/* Reset styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global styles */
body {
    font-family: Arial, sans-serif;
    text-align: center;
}

.header {
    background-color: black;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px; /* Ensure the header height */
}

.logo {
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    position: absolute;
    left: 20px; /* Ensure logo is fixed to the left */
    display: flex;
    align-items: center;
}

.navigation {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.navigation a {
    color: #fff;
    text-decoration: none;
    margin: 0 15px;
    font-size: 18px;
}

.language-switch {
    position: absolute;
    right: 20px;
    display: flex; /* Use flex layout to ensure horizontal alignment of children */
    align-items: center; /* Vertically center align children */
}

.language-switch a, .language-switch span {
    margin: 0 5px; /* Set left and right margin for language switch links */
    text-decoration: none;
    color: #fff; /* Set color to white */
    font-size: 16px; /* Increase font size for better readability */
}

main {
    width: 1100px; /* Width of the main container */
    margin: 60px auto 20px;  /* Increased top margin for more space between header and content */
    padding: 13px;
    background-color: #fff; /* Set main background to white */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three columns */
    grid-gap: 15px; /* White space between boxes */
    border: 2px solid #fff; /* Adjusting border style to white as per new style */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Optional shadow for depth */
}

.character-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #F6F6F6; /* Light gray background for each character box */
    padding: 10px; /* Padding inside each character box */
}

.character-box .pinyin {
    margin-bottom: 5px; /* Space between pinyin and character */
}

.character-box .hanzi {
    margin-bottom: 1px; /* Space between character and buttons */
}

.button-container {
    display: flex;
    justify-content: center;
    margin-top: 1px; /* Space above buttons */
}

.button-container button {
    margin: 0 5px; /* Space between buttons */
    background-color: #e0e0e0; /* Same as character box for consistency */
    border: none;
    border-radius: 50%; /* Rounded buttons */
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.button-container .play-button i, .button-container .sound-button i {
    font-size: 18px;
    color: #666; /* Icon color */
}

#prev-page {
    margin-right: 30px; /* 增加右侧间距 */
}

#next-page {
    margin-left: 30px; /* 增加左侧间距 */
}

/* 搜索框样式代码 */
.search-container {
    position: relative; /* 改为相对定位 */
    margin: 15px 0; /* 设置上下边距，可以根据需要调整 */
    text-align: center; /* 将容器内容居中对齐 */
}

.search-container input[type="text"] {
    padding: 8px; /* 调整内边距 */
    margin-right: 5px; /* 调整右边距，用以分隔按钮和输入框 */
    border: 1px solid #ccc; /* 调整边框颜色 */
    border-radius: 13px; /* 设置圆角 */
    width: 380px; /* 调整输入框的宽度 */
    font-size: 14px; /* 调整字体大小 */
    background-color: #F6F6F6; /* 设置背景为浅灰色 */
    outline: none; /* 移除默认的 focus 外边框 */
}

.search-container button {
    padding: 8px 15px; /* 调整按钮的内边距 */
    background-color: #F6F6F6; /* 设置背景为浅灰色 */
    border: 1px solid #ccc; /* 调整边框颜色 */
    border-radius: 13px; /* 设置圆角 */
    cursor: pointer;
    color: #808080;
    font-size: 14px; /* 调整字体大小 */
}

.search-container input[type="text"], 
.search-container button {
    line-height: 1.5; /* 统一行高以便对齐 */
    box-sizing: border-box; /* 确保 padding 和 border 都包含在 height 内 */
}

/* 取消鼠标点进搜索框时，边框颜色加深的效果 */
.search-container input[type="text"]:focus {
    border-color: #ccc; /* 保持边框颜色不变 */
}

/* 设置登陆按钮样式 */
.button {
    display: inline-block;
    padding: 8px 16px; /* 调整内边距 */
    margin: 5px; /* 调整外边距 */
    font-size: 13.9px; /* 调整字体大小 */
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #007BFF; /* 蓝色背景 */
    border: none;
    border-radius: 4px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, box-shadow 0.3s;
    cursor: pointer;
  }
  
  .button:hover {
    background-color: #0056b3; /* 深蓝色背景 */
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.15);
  }
  
  .button:active {
    background-color: #004080; /* 更深的蓝色背景 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  
  .button--secondary {
    background-color: #6c757d; /* 灰色背景 */
  }
  
  .button--secondary:hover {
    background-color: #5a6268; /* 深灰色背景 */
  }
  
  .button--secondary:active {
    background-color: #343a40; /* 更深的灰色背景 */
  }
  
  .auth-buttons {
    display: flex;
    justify-content: center; /* 水平居中对齐 */
    align-items: center;
    margin-top: 5px; /* 调整顶部外边距 */
  }
  
  .auth-buttons .button {
    margin: 0 10px; /* 设置按钮之间的间距 */
  }
  
  .button--upgrade {
    background-color: #28a745; /* 绿色背景 */
  }
  
  .button--upgrade:hover {
    background-color: #218838; /* 深绿色背景 */
  }
  
  .button--upgrade:active {
    background-color: #1e7e34; /* 更深的绿色背景 */
  }
  
  #upgrade-button {
    order: 1; /* 确保“注册会员”按钮在左 */
  }
  
  #logout-button {
    order: 2; /* 确保“登出”按钮在右 */
  }

  /* 设置提示文字 */
  .container {
    position: relative;
    display: inline-block;
}

.tooltip {
    position: absolute;
    top: -30px; /* 根据需要调整提示文字的位置 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 12px;
    z-index: 1;
    display: none; /* 默认隐藏 */
}

.footer {
    text-align: center;
    padding: 5px; /* 增加了内边距以确保与上方内容有间距 */
    color: #505050; /* 设置字体颜色为中等灰色 */
    font-weight: bold;
    font-size: 0.8em;
    font-family: 'Microsoft YaHei', Arial, sans-serif; /* 设置字体为微软雅黑，如果不可用则回退到Arial */
    margin-top: 10px; /* 与上方内容的间距 */
}
  
.footer a {
    color: #505050; /* 链接文字颜色也设置为中等灰色 */
    text-decoration: none; /* 移除下划线 */
}

.footer p {
    margin-bottom: 10px; /* 段落之间的下边距 */
}

.button-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
  
#pagination-container {
    display: flex;
    align-items: center;
    margin: 0 10px;
}
  
.page-button, #pagination-container button {
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    margin: 0 5px;
    border-radius: 50%; /* 使按钮变成圆形 */
    font-size: 14px;
    width: 36px; /* 设置按钮宽度 */
    height: 36px; /* 设置按钮高度，与宽度相同确保是圆形 */
    display: flex; /* 使用flex布局使文字居中 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}
  
.page-button:hover, #pagination-container button:hover {
    background-color: #e7e7e7;
}
  
#pagination-container .active, .page-button:disabled {
    background-color: #ccc; /* 当前页和禁用按钮的颜色 */
    color: white;
    cursor: not-allowed; /* 更改鼠标样式表示按钮不可点击 */
}

/* Mobile styles */
@media (max-width: 768px) {
    .header {
        flex-direction: column;
        height: auto;
    }

    .logo {
        position: static;
        margin-bottom: 10px; /* Add margin for spacing */
        display: block;
    }

    .navigation {
        position: static;
        transform: none;
        margin-bottom: 10px; /* Add margin for spacing */
        display: block;
    }

    .language-switch {
        position: static;
        margin-bottom: 10px; /* Add margin for spacing */
        display: block;
    }

    main {
        width: 100%; /* Make main container full width */
        grid-template-columns: 1fr; /* Single column layout */
        padding: 10px 10px; /* Ensure main content does not touch screen edges */
        margin-top: 150px; /* Ensure content area has 60px margin from header */
    }

    .button-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #pagination-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin: 10px 0; /* Adjust margin for better spacing */
    }

    .page-button, #pagination-container button {
        margin: 5px; /* Adjust margin between buttons */
    }

    .search-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px; /* Ensure there's some space above the search container */
    }

    .search-container input[type="text"] {
        flex: 1; /* Make the input take up the remaining space */
        max-width: 70%; /* Limit the maximum width */
        margin-right: 5px; /* Space between input and button */
    }

    .search-container button {
        flex: none; /* Ensure button does not grow */
        max-width: 20%; /* Limit the maximum width */
    }
}