/* H5 specific styles */

/* Body styles for mobile */
/* fallback */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v303/kJEPBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzBwG-RpA6RzaxHMPdY40KH8nGzv3fzfVJO1Q.woff2) format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
/* vietnamese */
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 500;
    src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 500;
    src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 500;
    src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 900;
    src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 900;
    src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 900;
    src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    font-family: "Noto Sans SC", "Public Sans", sans-serif;
    background-color: #f8f9fa;
}


/* Mobile menu animation */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu.open {
    transform: translateX(0);
}

/* Search input styles */
.search-input {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    padding: 12px 16px;
    font-size: 14px;
    width: 100%;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: #0A3069;
    box-shadow: 0 0 0 3px rgba(10, 48, 105, 0.1);
}

/* Category icon styles for H5 */
.category-icon {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark mode for category icons */
.dark .category-icon {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Category icon hover effect */
.category-icon:hover {
    transform: translateY(-2px) scale(1.05);
    background: transparent;
    box-shadow: none;
}

/* Icon display effect */
.category-icon img {
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Hover scale effect for icons */
.category-icon:hover img {
    transform: scale(1.08);
}

/* Category tag styles */
.category-tag {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.category-tag.active {
    background-color: #0A3069;
    color: white;
}

.category-tag.inactive {
    background-color: #f1f3f5;
    color: #617189;
}

.category-tag.inactive:hover {
    background-color: #e9ecef;
}

/* Category scroll container */
.category-scroll {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.category-scroll::-webkit-scrollbar {
    display: none;
}

/* Recommend card hover effect */
.recommend-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.recommend-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

/* Quick link card styles */
.quick-link-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-link-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Filter menu animation */
.filter-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.filter-menu.open {
    max-height: 500px;
}

/* Book card hover effect */
.book-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.book-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

/* Filter tag styles */
.filter-tag {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-tag.active {
    background-color: #0A3069;
    color: white;
}

.filter-tag.inactive {
    background-color: #f1f3f5;
    color: #617189;
}

.filter-tag.inactive:hover {
    background-color: #e9ecef;
}

/* Price tag styles */
.price-tag {
    font-size: 16px;
    font-weight: 700;
    color: #FF7D00;
}

/* Filter scroll container */
.filter-scroll {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.filter-scroll::-webkit-scrollbar {
    display: none;
}

.dropdown .selector{
    display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 12px;
}
.dropdown .dropdown-tree{
    z-index: 300 !important;
}
/* 书名最多显示2行，超出部分显示省略号 */
.book-title-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 作者最多显示1行，超出部分显示省略号 */
.author-line-clamp-1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* ========== 回到顶部按钮样式 ========== */
.back-to-top-new {
    position: fixed;
    bottom: 5rem;
    right: 1rem;
    z-index: 40;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #0a446b;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    outline: none;
}

.back-to-top-new .material-symbols-outlined {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    display: block;
}

.back-to-top-new.hidden {
    display: none !important;
}

.back-to-top-new:hover {
    background-color: #082552;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.back-to-top-new:active {
    transform: translateY(0);
}

.no-data {
    text-align: center;
    padding: 1rem 0;
    font-size: 14px;
    font-weight: bold;
    color: #999;
}