/* ========================================
   MAIN STYLESHEET FOR ASPAN PUBLISHING WEBSITE
   ========================================
   This file contains all the main styles for the website including:
   
   - Global reset and base styles
   - Header and navigation
   - Mobile menu with animations
   - Hero sections
   - Book grids and cards
   - Buttons and interactive elements
   - Footer
   - Responsive design
   - Utility classes
   
   File Structure:
   1. Global reset and base styles
   2. Header and navigation
   3. Mobile menu
   4. Layout and containers
   5. Hero sections
   6. Book display components
   7. Interactive elements
   8. Footer
   9. Responsive design
   10. Utility classes
   ======================================== */

/* ========================================
   GLOBAL RESET AND BASE STYLES
   ======================================== */

/* Reset all elements to consistent baseline */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base body styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

/* ========================================
   HEADER AND NAVIGATION
   ======================================== */

/* Main header container */
.header {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Header main content area */
.header-main {
    padding: 15px 0;
}

/* Header layout container */
.header-main .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo styling */
.logo {
    font-size: 28px;
    font-weight: bold;
    color: #6383A0;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Logo image sizing */
.logo img {
    height: 65px;
    width: auto;
}

/* Search container styling */
.search-container {
    flex: 1;
    max-width: 500px;
    margin: 0 40px;
    position: relative;
}

/* Search input field */
.search-input {
    width: 100%;
    padding: 12px 50px 12px 20px;
    border: 2px solid #e5e5e5;
    border-radius: 25px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s;
}

/* Search input focus state */
.search-input:focus {
    border-color: #6383A0;
}

/* Search button styling */
.search-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: #6383A0;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Search button hover state */
.search-btn:hover {
    background: #4a6280;
}

/* Header actions container */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* ========================================
   DESKTOP NAVIGATION
   ======================================== */

/* Navigation container */
.nav {
    display: flex;
    align-items: center;
}

/* Navigation menu list */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 40px;
    margin: 0;
    padding: 0;
}

/* Navigation item links */
.nav-item a {
    display: block;
    padding: 10px 0;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
    position: relative;
}

/* Navigation item hover state */
.nav-item a:hover {
    color: #6383A0;
}

/* Navigation item underline animation */
.nav-item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #6383A0;
    transition: width 0.3s;
}

/* Navigation item hover underline */
.nav-item a:hover::after {
    width: 100%;
}

/* Active navigation item */
.nav-item a.active {
    color: #6383A0;
    font-weight: 600;
}

/* Active navigation item underline */
.nav-item a.active::after {
    width: 100%;
}

/* ========================================
   MOBILE MENU
   ======================================== */

/* Mobile menu toggle button */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    position: relative;
    z-index: 1002;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.mobile-menu-toggle:hover {
    background-color: rgba(99, 131, 160, 0.1);
}

/* Hamburger menu lines - base state */
.mobile-menu-toggle .hamburger-line {
    width: 25px;
    height: 3px;
    background: #6383A0;
    margin: 3px 0;
    border-radius: 2px;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-origin: center;
    position: relative;
    display: block !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ========================================
   HAMBURGER TO X MORPHING ANIMATION
   ======================================== */

/* First line morphing to X */
button#mobileMenuToggle.mobile-menu-toggle.active .hamburger-line:nth-child(1),
button.mobile-menu-toggle.active .hamburger-line:nth-child(1),
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px) !important;
    background: white !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
    width: 25px !important;
    height: 3px !important;
}

/* Second line morphing to X (fades out and scales down) */
button#mobileMenuToggle.mobile-menu-toggle.active .hamburger-line:nth-child(2),
button.mobile-menu-toggle.active .hamburger-line:nth-child(2),
.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0 !important;
    transform: translateX(-20px) scaleX(0) !important;
    width: 0 !important;
    height: 3px !important;
}

/* Third line morphing to X */
button#mobileMenuToggle.mobile-menu-toggle.active .hamburger-line:nth-child(3),
button.mobile-menu-toggle.active .hamburger-line:nth-child(3),
.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px) !important;
    background: white !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
    width: 25px !important;
    height: 3px !important;
}

/* ========================================
   X TO HAMBURGER REVERSE ANIMATION
   ======================================== */

/* When menu is closing, ensure smooth transition back */
.mobile-menu-toggle:not(.active) .hamburger-line {
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Reset first line back to hamburger */
.mobile-menu-toggle:not(.active) .hamburger-line:nth-child(1) {
    transform: rotate(0deg) translate(0, 0) !important;
    background: #6383A0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    width: 25px !important;
    height: 3px !important;
}

/* Reset second line back to hamburger */
.mobile-menu-toggle:not(.active) .hamburger-line:nth-child(2) {
    opacity: 1 !important;
    transform: translateX(0) scaleX(1) !important;
    width: 25px !important;
    height: 3px !important;
}

/* Reset third line back to hamburger */
.mobile-menu-toggle:not(.active) .hamburger-line:nth-child(3) {
    transform: rotate(0deg) translate(0, 0) !important;
    background: #6383A0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    width: 25px !important;
    height: 3px !important;
}

/* Mobile menu overlay */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #6383A0;
    z-index: 1000;
    padding: 0;
    margin: 0;
}

.mobile-menu.active {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 80px;
}

/* Remove separate close button - we're using hamburger-to-X morphing instead */
.mobile-menu-close {
    display: none !important;
}

.mobile-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100%;
}

.mobile-nav-item {
    margin: 15px 0;
}

.mobile-nav-item a {
    display: block;
    padding: 15px 30px;
    color: white;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    margin: 0 20px;
}

.mobile-nav-item a:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.mobile-nav-item a.active {
    background: rgba(255, 255, 255, 0.3);
    color: #6383A0;
    font-weight: 700;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 8px;
        border-radius: 8px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    /* Hide logo when mobile menu is active, but keep hamburger visible for X */
    body.mobile-menu-open .header-main .logo {
        display: none !important;
    }
    
    /* Keep hamburger button visible when menu is open so we can see the X */
    body.mobile-menu-open .header-main .mobile-menu-toggle,
    body.mobile-menu-open .header-actions .mobile-menu-toggle {
        display: flex !important;
        position: fixed !important;
        top: 30px !important;
        right: 30px !important;
        z-index: 1002 !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 50% !important;
        padding: 8px !important;
        backdrop-filter: blur(5px) !important;
    }
    
    /* Hamburger lines inherit from main styles - no overrides needed */
    
    .nav-menu {
        display: none;
    }
    
    .mobile-menu {
        display: none;
    }
    
    .mobile-menu.active {
        display: flex;
    }
    
    /* Mobile menu animations */
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .mobile-nav-item {
        opacity: 0;
        animation: slideInUp 0.6s ease forwards;
    }
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #6383A0 0%, #4a6280 100%);
    color: white;
    text-align: center;
    padding: 100px 0;
}

.hero h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
}

.hero p {
    font-size: 20px;
    margin-bottom: 40px;
    opacity: 0.9;
}

.cta-button {
    display: inline-block;
    background: white;
    color: #6383A0;
    padding: 15px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

/* Filters */
.filters {
    background: #f8f9fa;
    padding: 30px 0;
}

.filter-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-select {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: white;
    font-size: 14px;
    min-width: 150px;
}

/* Main Content */
.main-content {
    padding: 60px 0;
}

.section-title {
    text-align: center;
    font-size: 36px;
    font-weight: 600;
    color: #333;
    margin-bottom: 50px;
}

.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

.book-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.book-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.book-cover {
    position: relative;
    height: 280px;
    overflow: hidden;
    background: #f8f9fa;
}

.book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.book-card:hover .book-cover img {
    transform: scale(1.05);
}

.book-info {
    padding: 20px;
}

.book-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.3;
}

.book-author {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.book-series {
    font-size: 12px;
    color: #6383A0;
    background: #e8eef5;
    padding: 4px 8px;
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 15px;
}

.book-price {
    font-size: 20px;
    font-weight: 600;
    color: #6383A0;
    margin-bottom: 15px;
}

.book-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-block;
    text-align: center;
}

.btn-primary {
    background: #6383A0;
    color: white;
}

.btn-primary:hover {
    background: #4a6280;
}

.btn-secondary {
    background: #f8f9fa;
    color: #333;
    border: 1px solid #ddd;
}

.btn-secondary:hover {
    background: #e9ecef;
}

.coming-soon {
    background: #fff3cd;
    color: #856404;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 15px;
    display: inline-block;
}

/* Series Section */
.series-section {
    margin-bottom: 60px;
}

.series-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.series-title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

.series-count {
    font-size: 14px;
    color: #666;
}

/* Footer */
.footer {
    background: #2c3e50;
    color: white;
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h3 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #ecf0f1;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section ul li a:hover {
    color: #ecf0f1;
}

.footer-bottom {
    border-top: 1px solid #34495e;
    padding-top: 20px;
    text-align: center;
    color: #bdc3c7;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .header-main .container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }
    
    .logo {
        flex-shrink: 0;
    }
    
    .search-container {
        flex: 1;
        max-width: 300px;
        margin: 0 10px;
    }
    
    .header-actions {
        flex-shrink: 0;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .nav .container {
        justify-content: flex-start;
    }
    
    .nav-menu {
        display: none;
    }
    
    .hero h1 {
        font-size: 32px;
    }
    
    .hero p {
        font-size: 16px;
    }
    
    .book-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
    }
    
    .filter-container {
        flex-direction: column;
        align-items: center;
    }
    
    .filter-group {
        width: 100%;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .book-grid {
        grid-template-columns: 1fr;
    }
    
    .book-cover {
        height: 250px;
    }
    
    .book-info {
        padding: 15px;
    }
}

/* Loading and Error States */
.loading {
    text-align: center;
    padding: 80px 20px;
    color: #666;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #6383A0;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading p {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
}

.loading small {
    font-size: 14px;
    color: #999;
}

.error {
    text-align: center;
    padding: 60px 20px;
    color: #dc3545;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 12px;
    margin: 20px 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.error h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #721c24;
}

.error p {
    font-size: 16px;
    margin-bottom: 25px;
    line-height: 1.5;
}

.error .btn {
    margin: 0 10px;
}

.hidden {
    display: none !important;
}

/* Featured Books Slider - Improved Cross-Browser Compatibility */
.featured-books {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.slider-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.slider-wrapper {
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
}

.book-slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    -o-transition: -o-transform 0.5s ease-in-out;
    will-change: transform; /* Optimize for animations */
}

.slider-slide {
    min-width: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    background: white;
}

.featured-book-card {
    display: flex;
    max-width: 800px;
    gap: 40px;
    align-items: center;
}

.featured-book-cover {
    flex-shrink: 0;
}

.featured-book-cover img {
    width: 250px;
    height: 350px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    -webkit-user-drag: none; /* Prevent image dragging */
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    pointer-events: none; /* Alternative way to prevent dragging */
}

.featured-book-info {
    flex: 1;
}

.featured-book-series {
    font-size: 14px;
    color: #6383A0;
    background: #e8eef5;
    padding: 6px 12px;
    border-radius: 15px;
    display: inline-block;
    margin-bottom: 15px;
}

.featured-book-title {
    font-size: 32px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.2;
}

.featured-book-author {
    font-size: 18px;
    color: #666;
    margin-bottom: 20px;
}

.featured-book-description {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 30px;
}

.featured-book-price {
    font-size: 24px;
    font-weight: 600;
    color: #6383A0;
    margin-bottom: 30px;
}

.featured-book-actions {
    display: flex;
    gap: 15px;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.9);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    color: #6383A0;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    z-index: 10;
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
    touch-action: manipulation; /* Optimize touch interactions */
}

.slider-btn:hover {
    background: white;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transform: translateY(-50%) scale(1.1);
}

.slider-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.slider-prev {
    left: -25px;
}

.slider-next {
    right: -25px;
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.slider-dot.active {
    background: #6383A0;
    transform: scale(1.2);
}

/* About Preview Section */
.about-preview {
    padding: 80px 0;
    background: white;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 60px;
    align-items: center;
}

.about-text h2 {
    font-size: 36px;
    font-weight: 600;
    color: #333;
    margin-bottom: 25px;
}

.about-text p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.about-image img {
    width: 100%;
    max-width: 400px;
    height: auto;
    aspect-ratio: 1080 / 1350;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Enhanced Mobile Responsive for Slider */
@media (max-width: 768px) {
    .featured-book-card {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .featured-book-cover img {
        width: 150px;
        height: 210px;
    }
    
    .featured-book-title {
        font-size: 20px;
    }
    
    .featured-book-description {
        display: none; /* Hide description on tablets and mobile */
    }
    
    .featured-book-actions {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .slider-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .about-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .about-text h2 {
        font-size: 28px;
    }
    
    .section-title {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .slider-slide {
        padding: 15px;
    }
    
    .featured-book-card {
        gap: 15px;
    }
    
    .featured-book-cover img {
        width: 120px;
        height: 168px;
    }
    
    .featured-book-title {
        font-size: 18px;
    }
    
    .featured-book-description {
        display: none; /* Hide description on mobile phones */
    }
    
    .featured-book-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .slider-btn {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
}

/* Additional utility classes */
.new-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e74c3c;
    color: white;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    width: 72px;
    text-align: center;
    box-sizing: border-box;
}

.coming-soon {
    background: #fff3cd;
    color: #856404;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 15px;
    display: inline-block;
}

.book-publication-date {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
}

/* Coming soon book card styling */
.coming-soon-card {
    opacity: 0.7;
}

.coming-soon-card .book-cover img {
    filter: grayscale(30%);
}

/* Apply grayscale filter to book covers for coming soon books */
.book-card .book-cover img[data-coming-soon="true"] {
    filter: grayscale(30%) !important;
}

/* Additional specific selector for coming soon books */
.book-card .book-cover img[data-coming-soon="true"],
.book-card[data-status="coming-soon"] .book-cover img,
.book-card .book-cover img.coming-soon {
    filter: grayscale(30%) !important;
}

/* Notify button removed as per user request */

.no-books {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.no-books h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #333;
}

.no-books p {
    font-size: 16px;
    margin-bottom: 20px;
}

.no-books a {
    color: #6383A0;
    text-decoration: none;
    font-weight: 500;
}

.no-books a:hover {
    text-decoration: underline;
}

/* Pagination */
.pagination-info {
    text-align: center;
    margin-bottom: 30px;
    color: #666;
    font-size: 14px;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.pagination-btn {
    padding: 10px 15px;
    border: 1px solid #ddd;
    background: white;
    color: #333;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s;
    cursor: pointer;
    min-width: 40px;
    text-align: center;
}

.pagination-btn:hover {
    background: #f8f9fa;
    border-color: #6383A0;
    color: #6383A0;
}

.pagination-btn.active {
    background: #6383A0;
    color: white;
    border-color: #6383A0;
}

.pagination-dots {
    padding: 10px 15px;
    color: #666;
}

@media (max-width: 768px) {
    .pagination {
        gap: 5px;
    }
    
    .pagination-btn {
        padding: 8px 12px;
        min-width: 35px;
        font-size: 14px;
    }
    
    .pagination-info {
        font-size: 12px;
    }
    
    /* Ensure badge maintains compact size on mobile */
    .new-badge {
        width: 72px !important;
        padding: 3px 6px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
}

/* FAQ Page Styles */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: white;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.faq-question {
    background: #f8f9fa;
    padding: 20px;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background: #e9ecef;
}

.faq-answer {
    padding: 20px;
    color: #555;
    line-height: 1.6;
}

.faq-answer p {
    margin-bottom: 15px;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-contact {
    text-align: center;
    margin-top: 60px;
    padding: 40px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 15px;
}

.faq-contact h2 {
    font-size: 28px;
    margin-bottom: 15px;
    color: #333;
}

.faq-contact p {
    font-size: 16px;
    margin-bottom: 30px;
    color: #666;
}

/* Contact Page Styles */
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-info h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #333;
}

.contact-info > p {
    font-size: 16px;
    color: #666;
    margin-bottom: 40px;
    line-height: 1.6;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-item {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.contact-item h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
}

.contact-item p {
    margin: 5px 0;
    color: #666;
}

.contact-item a {
    color: #6383A0;
    text-decoration: none;
    transition: color 0.3s;
}

.contact-item a:hover {
    color: #4a6280;
}

.contact-form {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.contact-form h2 {
    font-size: 28px;
    margin-bottom: 30px;
    color: #333;
    text-align: center;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #6383A0;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form .btn {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.contact-form .btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: #ccc;
}

.contact-form .btn:disabled:hover {
    background: #ccc;
    transform: none;
}

/* Support Page Styles */
.support-container {
    max-width: 1200px;
    margin: 0 auto;
}

.support-intro {
    text-align: center;
    margin-bottom: 60px;
}

.support-intro h2 {
    font-size: 32px;
    margin-bottom: 20px;
    color: #333;
}

.support-intro p {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

.support-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.support-card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.support-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.support-card h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #333;
}

.support-card p {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
}

.support-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.support-card ul li {
    padding: 8px 0;
    color: #555;
    position: relative;
    padding-left: 20px;
}

.support-card ul li:before {
    content: "•";
    color: #6383A0;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.support-card .btn {
    width: 100%;
    text-align: center;
}

.support-contact {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px;
    border-radius: 15px;
    margin-bottom: 60px;
}

.support-contact h2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 40px;
    color: #333;
}

.contact-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.contact-method {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.contact-method h3 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #333;
}

.contact-method p {
    margin: 8px 0;
    color: #666;
}

.contact-method a {
    color: #6383A0;
    text-decoration: none;
    transition: color 0.3s;
}

.contact-method a:hover {
    color: #4a6280;
}

.support-resources {
    text-align: center;
}

.support-resources h2 {
    font-size: 28px;
    margin-bottom: 40px;
    color: #333;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.resource-item {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.resource-item:hover {
    transform: translateY(-5px);
}

.resource-item h3 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #333;
}

.resource-item p {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
}

.resource-item .btn {
    width: 100%;
    text-align: center;
}

/* Responsive Design for New Pages */
@media (max-width: 768px) {
    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .contact-form {
        padding: 30px 20px;
    }
    
    .support-options {
        grid-template-columns: 1fr;
    }
    
    .contact-methods {
        grid-template-columns: 1fr;
    }
    
    .resources-grid {
        grid-template-columns: 1fr;
    }
    
    .support-contact {
        padding: 30px 20px;
    }
    
    .faq-contact {
        padding: 30px 20px;
    }
    
    .contact-details {
        gap: 20px;
    }
    
    .contact-item {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .contact-form {
        padding: 20px 15px;
    }
    
    .support-card {
        padding: 20px;
    }
    
    .contact-method {
        padding: 20px;
    }
    
    .resource-item {
        padding: 20px;
    }
    
    .faq-question {
        padding: 15px;
        font-size: 16px;
    }
    
    .faq-answer {
        padding: 15px;
    }
}