@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Changa:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

:root {
    --primary: #FF7073;
    --primary-dark: #E85D60;
    --secondary: #903BE1;
    --bg-color: #F8F3E9;
    --text-dark: #38244C;
    --text-light: #6A778B;
    --white: #FFFFFF;
    --border-color: #E2E2E2;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Tajawal', 'Cairo', 'Inter', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Tajawal', 'Cairo', 'Inter', sans-serif;
}

.with-line {
    position: relative;
    padding-right: 15px;
    /* مسافة بين الخط والنص */
}

.with-line::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 80%;
    background-color: var(--primary);
    border-radius: 4px;
}

[dir="ltr"] .with-line::before {
    right: auto;
    left: 0;
}

/* Make all structural section titles use Changa font */
.section-title,
.publishers-title {
    font-family: 'Changa', 'Cairo', 'Inter', sans-serif;
    font-weight: 700;
}

.text-primary {
    color: var(--primary) !important;
}

a,
button,
input {
    font-family: inherit;
}

button {
    background-color: transparent;
}

@font-face {
    font-family: 'Palestine';
    src: url('fonts/Palestine.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

.font-palestine {
    font-family: 'Palestine', 'Cairo', sans-serif !important;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Navbar */
.header-container {
    background-color: #FFFFFF;
    width: 100%;
    border-bottom: 2px solid var(--border-color);
    position: relative;
    z-index: 1000;
}

.navbar {
    width: 100%;
    max-width: 1440px;
    height: 93px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

/* Right Section: Logo & Mobile Menu */
.nav-right {
    display: flex;
    align-items: center;
    gap: 32px;
}

.logo a {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 68px;
    width: auto;
    display: block;
}

.mobile-menu-btn {
    display: none;
    font-size: 24px;
    color: var(--text-dark);
    cursor: pointer;
    border: none;
}

/* Navigation Links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    transition: 0.2s ease;
}

.nav-link:hover {
    color: var(--primary);
}

.nav-link i.icon-red {
    color: var(--primary);
    font-size: 14px;
}

.nav-link.dropdown i {
    font-size: 10px;
    color: var(--primary);
}

/* Utilities */
.nav-left {
    display: flex;
    align-items: center;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.circle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: #FFFFFF;
    color: var(--text-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    cursor: pointer;
    transition: 0.2s ease;
}

.circle-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.nav-auth {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-right: 24px;
}

.login-link {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    transition: 0.2s ease;
}

.login-link:hover {
    color: var(--primary);
}

.register-btn {
    background-color: var(--primary);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 8px;
    border: 2px solid #222222;
    box-shadow: 3px 3px 0px #222222;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    white-space: nowrap;
}

.register-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px #222222;
}

/* All Small Screens Responsive Design (Tablet & Mobile) */
@media (max-width: 1200px) {
    .nav-right {
        gap: 16px;
        /* Decrease gap for smaller screens */
    }

    .navbar {
        height: auto;
        min-height: 80px;
        padding: 10px 20px;
        /* Reduced padding for mobile */
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    /* Hide nav-links on mobile */
    .nav-links {
        display: none !important;
    }

    /* Keep the Logo and Hamburg on the right, and Auth on the left */
    /* Hide the normal links and search/cart actions */
    .nav-actions {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: transparent;
        border: none;
        color: var(--text-dark);
        font-size: 24px;
        cursor: pointer;
        transition: 0.2s ease;
        order: 1;
    }

    .nav-auth {
        display: none !important;
    }

    .mobile-menu-btn:hover {
        color: var(--primary);
    }

    /* Hide nav-auth when mobile menu is open */
    .navbar.menu-open .nav-auth {
        display: none;
    }

    .nav-auth {
        margin-right: 0;
        gap: 12px;
        order: 2;
        display: flex;
    }

    /* Convert elements to wrap nicer on extremely small screens */
    .login-link {
        font-size: 14px;
    }

    .register-btn {
        padding: 8px 16px;
        font-size: 14px;
    }

    .logo-img {
        height: 48px;
    }

    /* Mobile Dropdown Menu for Nav Links */
    .nav-links {
        display: none;
        /* hidden by default on small screens */
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        background-color: #FFFFFF;
        padding: 20px 0;
        gap: 16px;
        order: 3;
        /* Push it to a new row below the navbar items */
        border-top: 1px solid var(--border-color);
        margin-top: 10px;
    }

    .nav-links.active {
        display: flex;
        /* Toggle via JS */
    }

    .nav-link {
        width: 100%;
        padding: 8px 20px;
    }
}

/* Extra small mobile adjustments */
@media (max-width: 550px) {
    .navbar {
        padding: 10px 15px;
    }

    .mobile-menu-btn {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .register-btn {
        padding: 10px 12px;
        font-size: 11px;
        box-shadow: 2px 2px 0px #222222;
        border-width: 1.5px;
        border-radius: 12px
    }

    .login-link {
        font-size: 12px;
    }

    .nav-auth {
        gap: 10px;
        /* Reduce gap significantly */
    }

    .nav-right {
        gap: 8px;
    }

    .logo-img {
        height: 40px;
    }
}

/* ==========================================================
   Dropdown Menu Styles (Desktop)
   ========================================================== */

.dropdown-container {
    position: relative;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 100%;
    transition: all 0.3s ease;
}

[dir="ltr"] .dropdown-toggle {
    flex-direction: row-reverse;
}

.dropdown-toggle:hover {
    background-color: #F5F5F5;
}

.dropdown-toggle i {
    transition: transform 0.3s ease;
    font-size: 10px;
}

.dropdown-toggle.active i {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    display: none;
    flex-direction: column;
    z-index: 999;
    margin-top: 8px;
    animation: slideDown 0.3s ease;
}

[dir="ltr"] .dropdown-menu {
    right: auto;
    left: 0;
}

.dropdown-menu.active {
    display: flex;
}

.dropdown-item {
    padding: 12px 20px;
    color: var(--text-dark);
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
    border-bottom: 1px solid #F0F0F0;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background-color: #F8F8F8;
    color: var(--primary);
    padding-right: 24px;
}

[dir="ltr"] .dropdown-item:hover {
    padding-right: 20px;
    padding-left: 24px;
}

/* ── Nested Sub-Dropdown (Categories with children) ── */
.sub-dropdown-container {
    position: relative;
}

.sub-dropdown-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--text-dark);
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: pointer;
}

.sub-dropdown-toggle:hover {
    background-color: #F8F8F8;
    color: var(--primary);
}

.sub-dropdown-arrow {
    font-size: 10px;
    flex-shrink: 0;
    margin-inline-start: auto;
    transition: transform 0.2s ease;
}

[dir="ltr"] .sub-dropdown-arrow {
    transform: rotate(180deg);
}

.sub-dropdown-menu {
    position: absolute;
    top: 0;
    right: 100%;
    background-color: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    display: none;
    flex-direction: column;
    z-index: 1000;
    margin-right: 4px;
}

[dir="ltr"] .sub-dropdown-menu {
    right: auto;
    left: 100%;
    margin-right: 0;
    margin-left: 4px;
}

.sub-dropdown-container:hover > .sub-dropdown-menu {
    display: flex;
}

.categories-dropdown-menu {
    min-width: 220px;
    /* Long category lists: keep the menu inside the viewport instead of
       running off the bottom of the screen — scroll when it doesn't fit. */
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #E2D8EC transparent;
}

/* Nested fly-out submenus must also respect the viewport height */
.categories-dropdown-menu .sub-dropdown-menu {
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #E2D8EC transparent;
}

.categories-dropdown-menu::-webkit-scrollbar,
.categories-dropdown-menu .sub-dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.categories-dropdown-menu::-webkit-scrollbar-track,
.categories-dropdown-menu .sub-dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}

.categories-dropdown-menu::-webkit-scrollbar-thumb,
.categories-dropdown-menu .sub-dropdown-menu::-webkit-scrollbar-thumb {
    background: #E2D8EC;
    border-radius: 99px;
}

.categories-dropdown-menu::-webkit-scrollbar-thumb:hover,
.categories-dropdown-menu .sub-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #D2C3E0;
}

/* ── Mobile Subcategories (indented children) ── */
.mobile-subcategories {
    padding-right: 16px;
    background-color: #F0F0F0;
}

[dir="ltr"] .mobile-subcategories {
    padding-right: 0;
    padding-left: 16px;
}

.mobile-subcategories .dropdown-item-mobile {
    font-size: 13px;
    padding-right: 40px;
}

[dir="ltr"] .mobile-subcategories .dropdown-item-mobile {
    padding-right: 32px;
    padding-left: 40px;
}

/* ── Navbar Search Dropdown ── */
.search-dropdown-container {
    position: relative;
}

.search-dropdown-menu {
    min-width: 320px;
    right: 0;
    padding: 12px;
    border-radius: 12px;
}

/* For RTL (default Arabic), keep right-aligned; for LTR, use left */
[dir="ltr"] .search-dropdown-menu {
    right: auto;
    left: 0;
}

.navbar-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.navbar-search-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    padding: 0 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text-dark);
    background: #F9F9F9;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.navbar-search-input:focus {
    border-color: var(--primary);
    background: #FFFFFF;
}

.navbar-search-input::placeholder {
    color: #A0A0A0;
    font-size: 14px;
}

.navbar-search-submit {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(280deg, #FF7073 0%, #6C5BC2 100%);
    color: #FFFFFF;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.navbar-search-submit:hover {
    opacity: 0.9;
}

/* ── User Dropdown Menu ── */
.user-dropdown-menu {
    min-width: 200px;
    right: 0;
    left: auto;
}

[dir="ltr"] .user-dropdown-menu {
    right: auto;
    left: 0;
}

.user-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 20px;
}

.user-dropdown-menu .dropdown-item i {
    width: 18px;
    text-align: center;
    font-size: 14px;
    color: #9ca3af;
    transition: color 0.2s;
}

.user-dropdown-menu .dropdown-item:hover i {
    color: var(--primary);
}

.dropdown-divider {
    border: none;
    border-top: 1px solid #f3f4f6;
    margin: 4px 0;
}

.logout-item {
    color: #ef4444 !important;
    width: 100%;
    text-align: right;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

[dir="ltr"] .logout-item {
    text-align: left;
}

.logout-item i {
    color: #ef4444 !important;
}

.logout-item:hover {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}

/* Language switcher inside nav-actions */
.lang-switcher .lang-toggle-btn {
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.lang-switcher .lang-dropdown-menu {
    min-width: 140px;
    right: 50%;
    transform: translateX(50%);
    margin-top: 10px;
    border-radius: 10px;
    padding: 4px 0;
}

[dir="ltr"] .lang-switcher .lang-dropdown-menu {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

.lang-switcher .lang-dropdown-item {
    width: 100%;
    border: none;
    background: transparent;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.lang-switcher .lang-dropdown-item:hover {
    padding-right: 20px;
}

[dir="ltr"] .lang-switcher .lang-dropdown-item:hover {
    padding-right: 12px;
    padding-left: 20px;
}

.lang-switcher .lang-item-code {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #8A7A99;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================
   Mobile Menu Styles
   ========================================================== */

.mobile-menu {
    display: none;
    position: absolute;
    top: 93px;
    right: 0;
    left: 0;
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--border-color);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    z-index: 998;
}

.mobile-menu.active {
    display: block;
    max-height: 130vh;
    overflow-y: auto;
}

.mobile-menu-content {
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-nav-item {
    width: 100%;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-dark);
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s ease;
    width: 100%;
    text-align: right;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.mobile-nav-link:hover {
    background-color: #F8F8F8;
    color: var(--primary);
}

.mobile-nav-link i {
    font-size: 16px;
}

/* Mobile Dropdown Container */
.dropdown-container-mobile {
    width: 100%;
}

.dropdown-toggle-mobile {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    padding: 12px 16px;
    width: 100%;
    background-color: transparent;
    border: none;
    color: var(--text-dark);
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.dropdown-toggle-mobile:hover {
    background-color: #F8F8F8;
    color: var(--primary);
}

.dropdown-toggle-mobile i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.dropdown-toggle-mobile.active i {
    transform: rotate(180deg);
}

.dropdown-menu-mobile {
    display: none;
    flex-direction: column;
    background-color: #F8F8F8;
    border-radius: 6px;
    overflow: hidden;
    animation: slideDown 0.3s ease;
}

.dropdown-menu-mobile.active {
    display: flex;
}

.dropdown-item-mobile {
    padding: 12px 16px 12px 32px;
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid #E8E8E8;
    transition: all 0.2s ease;
    display: block;
}

.dropdown-item-mobile:last-child {
    border-bottom: none;
}

.dropdown-item-mobile:hover {
    background-color: #F0F0F0;
    color: var(--primary);
    padding-right: 36px;
}

/* Mobile Menu Divider */
.mobile-menu-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 8px 0;
}

.mobile-login {
    color: var(--text-dark);
}

.mobile-register-btn {
    background-color: var(--primary);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    padding: 12px 16px;
    border-radius: 8px;
    border: 2px solid #222222;
    box-shadow: 3px 3px 0px #222222;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    white-space: nowrap;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.mobile-register-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px #222222;
}

/* ── Mobile Utility Row (Search + Cart) ── */
.mobile-utility-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 8px 0;
}

.mobile-search-form {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #F5F5F5;
    border-radius: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
}

.mobile-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-dark);
    outline: none;
    padding: 6px 0;
}

.mobile-search-input::placeholder {
    color: #A0A0A0;
    font-size: 13px;
}

.mobile-search-submit {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(280deg, #FF7073 0%, #6C5BC2 100%);
    color: #FFFFFF;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-cart-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    font-size: 18px;
    flex-shrink: 0;
    transition: 0.2s ease;
}

.mobile-cart-link:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.mobile-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--primary);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* ── Mobile Language Row ── */
.mobile-lang-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.mobile-lang-btn {
    background: #F5F5F5;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark);
    cursor: pointer;
    transition: 0.2s ease;
    letter-spacing: 0.04em;
}

.mobile-lang-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #FFFFFF;
}

/* Desktop view - hide mobile menu button */
@media (min-width: 1201px) {
    .mobile-menu {
        display: none !important;
    }

    .mobile-menu-btn {
        display: none !important;
    }

    /* Show nav-links on desktop */
    .nav-links {
        display: flex !important;
        width: auto !important;
        flex: 1;
        flex-direction: row !important;
        align-items: center;
        background-color: transparent !important;
        padding: 0 24px !important;
        gap: 24px;
        order: auto !important;
        border-top: none !important;
        margin-top: 0 !important;
        margin-right: auto;
    }

    .nav-link {
        width: auto !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 700;
        color: var(--text-dark);
        transition: 0.2s ease;
    }

    .nav-link:hover {
        color: var(--primary);
    }

    .nav-link-item {
        position: relative;
    }
}

/* ==========================================================
   Hero Section
   ========================================================== */
.hero-section {
    position: relative;
    padding: 100px 20px;
    text-align: center;
    overflow: hidden;
    max-width: 1300px;
    margin: 0 auto;
    /* For floating shapes */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* matches body cream bg inherently but if we set explicit: background-color: var(--bg-color); */
}

/* Floating Shapes Decoration */
.bg-shape {
    position: absolute;
    width: 60px;
    height: 80px;
    border-radius: 8px;
    z-index: 1;
    opacity: 0.9;
}

.shape-1 {
    background: #E8EDFF;
    top: 15%;
    left: 10%;
    transform: rotate(-15deg);
}

[dir="ltr"] .shape-1 {
    left: auto;
    right: 10%;
}

.shape-2 {
    background: #D4D9FF;
    bottom: 25%;
    left: 18%;
    transform: rotate(20deg);
}

[dir="ltr"] .shape-2 {
    left: auto;
    right: 18%;
}

.shape-3 {
    background: #F3E8FF;
    top: 12%;
    right: 40%;
    transform: rotate(10deg);
}

[dir="ltr"] .shape-3 {
    right: auto;
    left: 40%;
}

.shape-4 {
    background: #FFDDF4;
    top: 25%;
    right: 10%;
    transform: rotate(15deg);
}

[dir="ltr"] .shape-4 {
    right: auto;
    left: 10%;
}

.shape-5 {
    background: #EEDDFF;
    bottom: 25%;
    right: 15%;
    transform: rotate(-20deg);
}

[dir="ltr"] .shape-5 {
    right: auto;
    left: 15%;
}

/* Title & Subtitle */
.hero-title {
    font-family: 'Palestine', 'Cairo', sans-serif !important;
    font-size: 80px;
    font-weight: 800;
    color: #38244C;
    line-height: 1.4;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
    letter-spacing: -1px;
}

.hero-title .text-primary {
    color: var(--primary);
}

.hero-subtitle {
    font-size: 22px;
    font-weight: 600;
    color: #64748B;
    max-width: 650px;
    margin: 0 auto 40px auto;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

/* Buttons Container */
.hero-buttons {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 2;
}

.btn-primary-index {
    background: linear-gradient(280deg, #FF7073 0%, #6C5BC2 100%);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    padding: 16px 48px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(255, 112, 115, 0.4);
    transition: 0.3s ease;
    max-width: 350px;
    width: 100%;
    white-space: nowrap;

}

.btn-primary-index:hover {
    box-shadow: 0 12px 32px rgba(255, 112, 115, 0.6);
    transform: translateY(-2px);
}

.btn-secondary {
    background: #FFFFFF;
    color: var(--primary);
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    padding: 16px 48px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: 0.3s ease;
    max-width: 350px;
    width: 100%;
    white-space: nowrap;
}

.btn-secondary:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }

    /* Responsiveness for Hero */
    @media (max-width: 1024px) {
        .hero-title {
            font-size: 60px;
        }

        .bg-shape {
            transform: scale(0.7);
        }
    }

    @media (max-width: 768px) {
        .bg-shape {
            transform: scale(0.5);
            opacity: 0.8;
        }

        .hero-section {
            padding: 60px 20px;
        }

        .hero-title {
            font-size: 36px !important;
            line-height: 1.4;
            text-align: center;
        }

        .hero-subtitle {
            font-size: 18px;
        }

        .hero-buttons {
            flex-direction: column;
            width: 100%;
            gap: 16px;
        }

        .btn-primary-index,
        .btn-secondary {
            width: 100%;
            max-width: 350px;
            padding: 16px 47px
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p {
            margin-top: 0.4rem;
            margin-bottom: 0.8rem;
        }
    }

    /* ==========================================================
   Books Slider Section
   ========================================================== */
    .books-slider-section {
        position: relative;
        width: 100%;
        margin-top: 60px;
        margin-bottom: -10px;
        padding: 20px 0;
        overflow: hidden;
    }


    /* Base track for horizontal scrolling */
    .books-track {
        display: flex;
        gap: 30px;
        /* Exact gap from Figma pink marker */
        padding: 0 40px;
        overflow-x: auto;
        scroll-behavior: auto;
        /* Hide scrollbar for a clean design */
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
        /* Draggable marquee — grab with mouse on PC, swipe on touch */
        cursor: grab;
        touch-action: pan-y;
        user-select: none;
        -webkit-user-select: none;
    }

    .books-track::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari and Opera */
    }

    /* Infinite Marquee — auto-scroll + dragging is driven by JS
       (public/js/script.js). Width stays max-content so the duplicated
       content forms a seamless loop. */
    .track-scroll-right,
    .track-scroll-left {
        width: max-content;
    }

    /* Active dragging state */
    .books-track.dragging {
        cursor: grabbing;
        scroll-behavior: auto;
    }

    /* Keep the browser's native image drag / text selection out of the way
       so horizontal swipes on phones and drags on PC feel smooth */
    .books-track img {
        -webkit-user-drag: none;
        -moz-user-drag: none;
        user-drag: none;
        pointer-events: none;
    }

    /* Individual Book Cover Card */
    .book-card {
        flex: 0 0 auto;
        width: 240px;
        height: 350px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        background-color: var(--bg-color);
    }

    .book-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Keeps aspect ratio perfect */
        display: block;
    }

    /* Small Book Card for Second Slider */
    .small-book-card {
        flex: 0 0 auto;
        width: 150px;
        height: 220px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        background-color: var(--bg-color);
    }

    .small-book-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Edge Gradients (Fade masks) */
    .fade-right,
    .fade-left {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 150px;
        z-index: 2;
        pointer-events: none;
        /* don't block scrolling under them */
    }

    .fade-right {
        right: 0;
        background: linear-gradient(to left, var(--bg-color) 0%, transparent 100%);
    }

    [dir="ltr"] .fade-right {
        right: auto;
        left: 0;
        background: linear-gradient(to right, var(--bg-color) 0%, transparent 100%);
    }

    .fade-left {
        left: 0;
        background: linear-gradient(to right, var(--bg-color) 0%, transparent 100%);
    }

    [dir="ltr"] .fade-left {
        left: auto;
        right: 0;
        background: linear-gradient(to left, var(--bg-color) 0%, transparent 100%);
    }

    /* ── Books Slider — Responsive ── */

    /* Large tablets & small desktops */
    @media (max-width: 1024px) {
        .book-card {
            width: 200px;
            height: 290px;
        }

        .small-book-card {
            width: 130px;
            height: 190px;
        }

        .books-track {
            gap: 22px;
        }

        .fade-right,
        .fade-left {
            width: 110px;
        }
    }

    /* Tablets */
    @media (max-width: 768px) {
        .book-card {
            width: 155px;
            height: 225px;
            border-radius: 10px;
        }

        .small-book-card {
            width: 105px;
            height: 155px;
            border-radius: 8px;
        }

        .books-track {
            gap: 16px;
            padding: 0 25px;
        }

        .fade-right,
        .fade-left {
            width: 70px;
        }
    }

    /* Large phones */
    @media (max-width: 550px) {
        .book-card {
            width: 125px;
            height: 185px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .small-book-card {
            width: 85px;
            height: 125px;
            border-radius: 7px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }

        .books-track {
            gap: 12px;
            padding: 0 18px;
        }

        .fade-right,
        .fade-left {
            width: 50px;
        }
    }

    /* Small phones */
    @media (max-width: 380px) {
        .book-card {
            width: 105px;
            height: 155px;
            border-radius: 7px;
        }

        .small-book-card {
            width: 70px;
            height: 105px;
            border-radius: 6px;
        }

        .books-track {
            gap: 10px;
            padding: 0 12px;
        }

        .fade-right,
        .fade-left {
            width: 40px;
        }
    }


    /* ==========================================================
   Breadcrumb Section
   ========================================================== */
    .breadcrumb-section {
        background-color: var(--bg-color);
        width: 100%;
    }

    .breadcrumb-container {
        max-width: 1440px;
        margin: 0 auto;
        padding: 24px 32px;
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        font-family: 'Changa', sans-serif;
        margin-top: -20px;
    }

    .breadcrumb-link {
        font-size: 14px;
        color: var(--text-light);
        font-weight: 600;
        transition: 0.2s ease;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .breadcrumb-link:hover {
        color: var(--primary);
    }

    .breadcrumb-link i {
        font-size: 14px;
    }

    .breadcrumb-separator {
        font-size: 10px;
        color: var(--text-light);
    }

    .breadcrumb-current {
        font-size: 14px;
        color: var(--Color-6, #38244C);
        font-weight: 700;
    }

    @media (max-width: 768px) {
        .breadcrumb-container {
            padding: 16px 20px;
            gap: 8px;
        }
    }

    /* ==========================================================
   Book Details Section
   ========================================================== */
    .book-details-layout {
        --text-light: #4A5565;
        display: flex;
        max-width: 1440px;
        margin: 0 auto;
        padding: 24px 120px 80px;
        gap: 116px;
        align-items: flex-start;
        position: relative;
        z-index: 1;
        overflow-x: hidden;
    }

    .book-details-layout::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        height: 100%;
        background-color: #FFFCF4;
        z-index: -1;
    }

    /* --- Sidebar --- */
    .book-sidebar {
        width: 320px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .book-cover-container {
        width: 100%;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
    }

    .book-main-cover {
        width: 100%;
        display: block;
    }

    .pricing-box {
        text-align: right;
    }

    .price-label {
        font-size: 14px;
        color: var(--text-light);
        font-weight: 600;
    }

    .price-values {
        display: flex;
        align-items: baseline;
        gap: 16px;
        margin-top: 4px;
        display: flex !important;

    }

    .current-price {
        font-size: 36px;
        font-weight: 800;
        color: var(--primary);
    }

    .current-price small {
        font-size: 18px;
    }

    .old-price {
        font-size: 18px;
        color: var(--text-light);
        text-decoration: line-through;
    }

    .purchase-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .action-btn {
        width: 100%;
        padding: 16px;
        border-radius: 8px;
        font-family: inherit;
        font-size: 18px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        border: none;
        cursor: pointer;
        transition: 0.2s ease;
        color: #FFFFFF;
        text-decoration: none;
    }

    .btn-listen {
        background-color: #00A389;
    }

    .btn-buy {
        background: linear-gradient(180deg, #FF9597 0%, #FF7073 100%);
    }

    .btn-read {
        background-color: var(--text-dark);
    }

    .btn-subscribe {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: #fff;
    }

    .btn-subscribe:hover {
        background: linear-gradient(135deg, #d97706, #b45309);
    }


    /* ── Cart Badge ── */
    .cart-toggle {
        position: relative;
        display: flex !important;
        align-items: center;
    }

    .cart-badge {
        position: absolute;
        top: -6px;
        right: -10px;
        background: #ef4444;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        line-height: 1;
    }

    [dir="ltr"] .cart-badge {
        right: auto;
        left: -10px;
    }

    /* ── Cart Dropdown ── */
    .cart-dropdown-menu {
        min-width: 320px;
        max-height: 360px;
        overflow-y: auto;
        right: 0;
        left: auto;
    }

    .cart-dropdown-item {
        display: flex !important;
        align-items: center;
        gap: 12px;
        padding: 10px 16px !important;
    }

    .cart-dropdown-item:hover {
        background: #f3f4f6;
    }

    .cart-dd-cover img {
        border-radius: 4px;
        object-fit: cover;
    }

    .cart-dd-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .cart-dd-title {
        font-size: 13px;
        font-weight: 600;
        color: #111827;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cart-dd-price {
        font-size: 12px;
        color: #6b7280;
    }

    .cart-show-all {
        font-weight: 600;
        color: var(--primary, #8b5cf6) !important;
        justify-content: center;
        gap: 8px !important;
    }

    /* ── Mobile cart badge fix ── */
    @media (max-width: 768px) {
        .cart-container {
            order: 2;
        }

        .cart-badge {
            top: -4px;
            right: -8px;
        }
    }


    /* ══════════════════════════════════════════════════════════════
   Store Pages: Cart, Checkout, Orders
   ══════════════════════════════════════════════════════════════ */

    /* ── Shared: Page Title ── */
    .store-page-title,
    .cart-page .page-title,
    .checkout-page .page-title,
    .orders-page .page-title {
        font-size: 24px;
        font-weight: 800;
        color: #111827;
        margin-bottom: 24px;
        text-align: right;
    }

    /* ── Shared: Empty State ── */
    .empty-cart,
    .empty-orders {
        text-align: center;
        padding: 60px 20px;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }

    .empty-cart .empty-icon,
    .empty-orders .empty-icon {
        font-size: 56px;
        color: #d1d5db;
        margin-bottom: 16px;
        display: block;
    }

    .empty-cart h2,
    .empty-orders h2 {
        font-size: 20px;
        font-weight: 700;
        color: #374151;
        margin: 0 0 8px 0;
    }

    .empty-cart p,
    .empty-orders p {
        color: #9ca3af;
        margin: 0 0 20px 0;
    }

    .btn-browse {
        display: inline-block;
        padding: 10px 24px;
        background: var(--primary, #8b5cf6);
        color: #fff;
        border-radius: 8px;
        font-weight: 600;
        text-decoration: none;
        transition: 0.2s;
    }

    .btn-browse:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }

    /* ── Cart Page: Item Cards ── */
    /* ── Cart Page Wrapper ── */
    .cart-page-wrapper {
        background-color: #FFFCF4;
        padding-bottom: 60px;
        min-height: 60vh;
    }

    /* ── Cart Page: Layout ── */
    .cart-page {
        max-width: 1100px;
        margin: 0 auto;
        padding: 28px 24px 60px;
    }

    .cart-layout {
        display: flex;
        gap: 24px;
        align-items: flex-start;
    }

    .cart-main {
        flex: 1;
        min-width: 0;
    }

    .cart-sidebar {
        width: 320px;
        flex-shrink: 0;
    }

    /* ── Cart Items ── */
    .cart-items-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .cart-item-card {
        display: flex;
        align-items: center;
        gap: 16px;
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        transition: 0.2s;
    }

    .cart-item-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .cart-item-cover img {
        width: 72px;
        height: 100px;
        object-fit: cover;
        border-radius: 8px;
    }

    .cart-item-info {
        flex: 1;
        min-width: 0;
    }

    .cart-item-title {
        font-size: 16px;
        font-weight: 700;
        color: #111827;
        margin: 0 0 6px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cart-item-format {
        font-size: 13px;
        color: #6b7280;
        display: inline-block;
        background: #f3f4f6;
        padding: 2px 10px;
        border-radius: 20px;
    }

    .cart-item-price {
        display: block;
        font-size: 16px;
        font-weight: 700;
        color: #059669;
        margin-top: 6px;
    }

    .cart-item-actions .btn-remove {
        background: none;
        border: 1px solid #fca5a5;
        color: #dc2626;
        padding: 8px 14px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: 0.2s;
        white-space: nowrap;
    }

    .cart-item-actions .btn-remove:hover {
        background: #fef2f2;
    }

    /* ── Cart Summary ── */
    .cart-summary {
        background: #fff;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        display: flex;
        flex-direction: column;
        gap: 16px;
        position: sticky;
        top: 20px;
    }

    .cart-summary-title {
        font-size: 18px;
        font-weight: 700;
        color: #111827;
        margin: 0 0 4px 0;
        text-align: right;
        padding-bottom: 12px;
        border-bottom: 1px solid #f3f4f6;
    }

    /* ── Cart Breakdown (subtotal, discount, tax) ── */
    .cart-breakdown {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-bottom: 12px;
        border-bottom: 1px solid #f3f4f6;
    }

    .cart-breakdown-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #6b7280;
    }

    .cart-breakdown-row span:last-child {
        font-weight: 600;
        color: #374151;
    }

    .cart-total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
        color: #374151;
    }

    .cart-total strong {
        font-size: 22px;
        color: #111827;
    }

    /* ── Cart Item Price Row ── */
    .cart-item-price-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 6px;
        flex-wrap: wrap;
    }

    .cart-item-original-price {
        text-decoration: line-through;
        color: #9ca3af;
        font-size: 13px;
    }

    .cart-item-discount-badge {
        font-size: 11px;
        font-weight: 600;
        color: #16a34a;
        background: #f0fdf4;
        padding: 1px 6px;
        border-radius: 4px;
    }

    /* ── Cart Notice Banner ── */
    .cart-notice {
        display: flex;
        align-items: center;
        gap: 10px;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 10px;
        padding: 14px 18px;
        margin-bottom: 20px;
        font-size: 14px;
        color: #1e40af;
    }

    .cart-notice i {
        font-size: 18px;
        color: #3b82f6;
        flex-shrink: 0;
    }

    .cart-notice a {
        color: #1d4ed8;
        font-weight: 700;
        text-decoration: underline;
    }

    .cart-tax-note {
        font-size: 13px;
        color: #6b7280;
        text-align: right;
    }

    .btn-checkout {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 16px;
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        color: #fff;
        border-radius: 10px;
        font-size: 17px;
        font-weight: 700;
        text-decoration: none;
        transition: 0.2s;
    }

    .btn-checkout:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(139, 92, 246, 0.3);
    }

    /* ── Cart Mobile: stack sidebar below ── */
    @media (max-width: 768px) {
        .cart-page-wrapper {
            padding-bottom: 40px;
        }
        .cart-page {
            padding: 20px 16px 40px;
        }
        .cart-layout {
            flex-direction: column;
        }
        .cart-sidebar {
            width: 100%;
        }
        .cart-summary {
            position: static;
        }
        .cart-item-card {
            padding: 14px;
            gap: 12px;
        }
        .cart-item-cover img {
            width: 56px;
            height: 78px;
        }
        .cart-item-title {
            font-size: 14px;
        }
        .cart-item-price {
            font-size: 14px;
        }
        .cart-item-format {
            font-size: 11px;
        }
    }

    /* ── Checkout Page ── */
    .checkout-page {
        max-width: 700px;
        margin: 0 auto;
        padding: 24px 16px 80px;
    }

    .checkout-summary {
        background: #fff;
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }

    .checkout-summary h2 {
        font-size: 20px;
        font-weight: 700;
        color: #111827;
        margin: 0 0 16px 0;
        text-align: right;
    }

    .checkout-items {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 16px;
    }

    .checkout-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #f3f4f6;
    }

    .checkout-item-title {
        font-size: 15px;
        font-weight: 600;
        color: #374151;
    }

    .checkout-item-price {
        font-size: 15px;
        font-weight: 700;
        color: #059669;
        white-space: nowrap;
    }

    /* ── Checkout Breakdown (subtotal, discount, tax) ── */
    .checkout-breakdown {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 12px 0;
        border-bottom: 1px solid #f3f4f6;
    }

    .checkout-breakdown-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #6b7280;
        padding: 4px 0;
    }

    .checkout-breakdown-row span:last-child {
        font-weight: 600;
        color: #374151;
    }

    .checkout-total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 0;
        border-top: 2px solid #e5e7eb;
        font-size: 18px;
        color: #374151;
    }

    .checkout-total strong {
        font-size: 24px;
        color: #111827;
    }

    /* Coupon Code Section */
    .checkout-coupon-section {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px dashed #d1d5db;
    }

    .coupon-input-group {
        display: flex;
        gap: 8px;
    }

    .coupon-input {
        flex: 1;
        padding: 10px 14px;
        border: 2px solid #d1d5db;
        border-radius: 8px;
        font-size: 14px;
        font-family: inherit;
        transition: border-color 0.2s;
    }

    .coupon-input:focus {
        outline: none;
        border-color: #38244C;
    }

    .coupon-apply-btn {
        padding: 10px 20px;
        background-color: #38244C;
        color: #FFFFFF;
        border: 2px solid #222222;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        transition: transform 0.1s, box-shadow 0.1s;
        font-family: inherit;
        box-shadow: 2px 2px 0px #222222;
    }

    .coupon-apply-btn:active {
        transform: translate(1px, 1px);
        box-shadow: 1px 1px 0px #222222;
    }

    .coupon-apply-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .coupon-message {
        display: block;
        margin-top: 8px;
        font-size: 13px;
        font-weight: 600;
    }

    .coupon-message.success {
        color: #16a34a;
    }

    .coupon-message.error {
        color: #dc2626;
    }

    .text-discount {
        color: #16a34a !important;
    }

    .checkout-form {
        margin-top: 20px;
    }

    .checkout-address-section {
        margin-top: 28px;
        padding-top: 24px;
        border-top: 2px solid #e5e7eb;
    }

    .checkout-address-section h2 {
        font-size: 20px;
        font-weight: 700;
        color: #111827;
        margin: 0 0 16px 0;
        text-align: right;
    }

    .form-row {
        display: flex;
        gap: 12px;
        margin-bottom: 14px;
        flex-wrap: wrap;
    }

    .form-group {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .form-group.full-width {
        flex: 1 1 100%;
    }

    .form-group label {
        font-size: 14px;
        font-weight: 600;
        color: #374151;
        text-align: right;
    }

    .form-group input,
    .form-group textarea {
        padding: 12px 14px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 15px;
        font-family: inherit;
        background: #fff;
        transition: border-color 0.2s;
        text-align: right;
    }

    .form-group input:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    }

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

    .form-error {
        font-size: 12px;
        color: #ef4444;
        text-align: right;
    }

    .required {
        color: #ef4444;
    }

    .payment-method-notice {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        background: #fef3c7;
        border: 1px solid #fcd34d;
        border-radius: 8px;
        margin-bottom: 16px;
        font-size: 14px;
        color: #92400e;
    }

    .btn-confirm-payment {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 16px;
        background: linear-gradient(135deg, #10b981, #059669);
        color: #fff;
        border: none;
        border-radius: 10px;
        font-size: 17px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        transition: 0.2s;
    }

    .btn-confirm-payment:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3);
    }

    /* ── Orders List ── */
    .orders-page {
        max-width: 800px;
        margin: 0 auto;
        padding: 24px 16px 80px;
    }

    .orders-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .order-card {
        background: #fff;
        border-radius: 12px;
        padding: 16px 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        transition: 0.2s;
    }

    .order-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .order-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }

    .order-id {
        font-weight: 700;
        font-size: 15px;
        color: #111827;
    }

    .order-date {
        font-size: 13px;
        color: #9ca3af;
    }

    .order-status {
        font-size: 12px;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 20px;
        margin-right: auto;
    }

    .status-paid {
        background: #d1fae5;
        color: #065f46;
    }

    .status-pending {
        background: #fef3c7;
        color: #92400e;
    }

    .order-body {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 10px;
    }

    .order-total {
        font-size: 18px;
        color: #059669;
    }

    .order-items-count {
        font-size: 13px;
        color: #6b7280;
    }

    .btn-view-order {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        font-weight: 600;
        color: var(--primary, #8b5cf6);
        text-decoration: none;
        transition: 0.2s;
    }

    .btn-view-order:hover {
        gap: 10px;
    }

    /* ── Order Detail ── */
    /* ══════════════════════════════════════════════════════════════
   ORDER DETAIL PAGE — Redesigned
   ══════════════════════════════════════════════════════════════ */

    .od-page {
        max-width: 960px;
        margin: 0 auto;
        padding: 32px 20px 80px;
    }

    /* ── Top Bar ── */
    .od-topbar {
        margin-bottom: 24px;
    }

    .od-back-link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        font-weight: 700;
        color: #6b7280;
        text-decoration: none;
        padding: 10px 20px;
        border-radius: 12px;
        background: #fff;
        border: 1px solid #e5e7eb;
        transition: all 0.2s;
    }

    .od-back-link:hover {
        color: var(--primary);
        border-color: var(--primary);
        background: #fef2f2;
        gap: 14px;
    }

    /* ── Hero Card ── */
    .od-hero {
        position: relative;
        background: linear-gradient(135deg, #38244C 0%, #4a3266 100%);
        border-radius: 20px;
        padding: 36px 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        margin-bottom: 28px;
        box-shadow: 0 8px 32px rgba(56, 36, 76, 0.15);
    }

    .od-hero-accent {
        position: absolute;
        top: -40px;
        left: -40px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(255, 112, 115, 0.15);
        pointer-events: none;
    }

    .od-hero-left {
        position: relative;
        z-index: 1;
    }

    .od-hero-overline {
        font-size: 12px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.5);
        text-transform: uppercase;
        letter-spacing: 2px;
        margin: 0 0 4px 0;
    }

    .od-hero-id {
        font-family: 'Changa', 'Cairo', sans-serif;
        font-size: 36px;
        font-weight: 800;
        color: #fff;
        margin: 0 0 6px 0;
        letter-spacing: 1px;
    }

    .od-hero-date {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.65);
        margin: 0;
        font-weight: 500;
    }

    .od-hero-right {
        position: relative;
        z-index: 1;
    }

    .od-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 24px;
        border-radius: 50px;
        background: var(--pill-bg, rgba(16, 185, 129, 0.15));
        color: var(--pill-fg, #10b981);
        font-size: 15px;
        font-weight: 700;
        border: 1.5px solid var(--pill-fg, #10b981);
    }

    .od-status-pill i {
        font-size: 18px;
    }

    /* ── Unpaid Order — Pay Now Banner ── */
    .od-unpaid {
        display: flex;
        align-items: center;
        gap: 16px;
        background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
        border: 1.5px solid #fbbf24;
        border-radius: 16px;
        padding: 16px 20px;
        margin-bottom: 28px;
        box-shadow: 0 6px 20px rgba(245, 158, 11, 0.12);
    }

    .od-unpaid-icon {
        flex-shrink: 0;
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: #fef3c7;
        color: #d97706;
        font-size: 20px;
    }

    .od-unpaid-text {
        flex: 1;
        min-width: 0;
    }

    .od-unpaid-text strong {
        display: block;
        font-size: 15px;
        font-weight: 800;
        color: #92400e;
        margin: 0 0 2px 0;
    }

    .od-unpaid-text p {
        margin: 0;
        font-size: 13px;
        color: #b45309;
        line-height: 1.5;
    }

    .od-pay-btn {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: linear-gradient(135deg, var(--primary), #e85d60);
        color: #fff;
        border: none;
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 800;
        font-size: 14px;
        font-family: inherit;
        text-decoration: none;
        box-shadow: 3px 3px 0 #b45309;
        transition: all 0.15s ease;
        cursor: pointer;
    }

    .od-pay-btn:hover {
        transform: translate(2px, 2px);
        box-shadow: 1px 1px 0 #b45309;
        color: #fff;
    }

    @media (max-width: 600px) {
        .od-unpaid {
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
            text-align: center;
        }

        .od-unpaid-icon {
            margin: 0 auto;
        }

        .od-pay-btn {
            width: 100%;
        }
    }

    /* ── Two-Column Grid ── */
    .od-grid {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 24px;
        align-items: start;
        margin-bottom: 28px;
    }

    .od-col {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* ── Cards ── */
    .od-card {
        background: #fff;
        border-radius: 16px;
        padding: 24px 28px;
        border: 1px solid #f0ebe0;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    }

    .od-card-title {
        font-family: 'Changa', 'Cairo', sans-serif;
        font-size: 17px;
        font-weight: 800;
        color: #38244C;
        margin: 0 0 20px 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .od-card-title i {
        color: var(--primary);
        font-size: 18px;
    }

    /* ── Details Grid ── */
    .od-details-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .od-detail {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 12px 16px;
        background: var(--bg-color);
        border-radius: 10px;
    }

    .od-detail--full {
        grid-column: 1 / -1;
    }

    .od-detail-label {
        font-size: 12px;
        font-weight: 600;
        color: #9ca3af;
    }

    .od-detail-value {
        font-size: 14px;
        font-weight: 700;
        color: #38244C;
    }

    .od-tracking {
        font-family: monospace;
        font-size: 16px !important;
        letter-spacing: 2px;
        color: var(--secondary) !important;
        background: rgba(144, 59, 225, 0.06);
        padding: 4px 12px;
        border-radius: 6px;
        display: inline-block;
    }

    /* ── Address ── */
    .od-address-header {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .od-address-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 800;
        flex-shrink: 0;
    }

    .od-address-name {
        font-size: 16px;
        font-weight: 800;
        color: #38244C;
        margin: 0;
    }

    .od-address-phone {
        font-size: 13px;
        color: #6b7280;
        margin: 2px 0 0;
        direction: ltr;
        text-align: right;
    }

    .od-divider {
        border: none;
        border-top: 1px solid #f0ebe0;
        margin: 16px 0;
    }

    .od-address-line {
        font-size: 14px;
        color: #4b5563;
        margin: 0 0 6px 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .od-address-line i {
        color: var(--primary);
        font-size: 13px;
        width: 16px;
        text-align: center;
    }

    .od-address-city {
        font-weight: 600;
        color: #38244C;
    }

    .od-address-postal {
        font-size: 13px;
        color: #9ca3af;
        margin: 2px 0 0;
    }

    .od-address-notes {
        margin-top: 12px;
        padding: 10px 14px;
        background: #fef3c7;
        border: 1px solid #fcd34d;
        border-radius: 8px;
        font-size: 13px;
        color: #92400e;
        display: flex;
        align-items: flex-start;
        gap: 8px;
        line-height: 1.5;
    }

    .od-address-notes i {
        color: #f59e0b;
        margin-top: 2px;
    }

    /* ── Total Card ── */
    .od-card--total {
        background: linear-gradient(135deg, #38244C, #4a3266);
        color: #fff;
        border: none;
        box-shadow: 0 4px 20px rgba(56, 36, 76, 0.2);
    }

    .od-total-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
    }

    .od-total-label {
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.7);
    }

    .od-total-price {
        font-family: 'Changa', 'Cairo', sans-serif;
        font-size: 28px;
        font-weight: 800;
        color: var(--primary);
    }

    .od-total-items {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.5);
        font-weight: 500;
    }

    /* ── Vertical Timeline ── */
    .od-timeline {
        display: flex;
        flex-direction: column;
    }

    .od-tl-step {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 6px 0;
    }

    .od-tl-dot {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #f3f4f6;
        color: #d1d5db;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        flex-shrink: 0;
        border: 2px solid #e5e7eb;
    }

    .od-tl--done .od-tl-dot {
        background: #d1fae5;
        color: #059669;
        border-color: #059669;
    }

    .od-tl--active .od-tl-dot {
        background: #dbeafe;
        color: #2563eb;
        border-color: #2563eb;
    }

    .od-tl-content {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 6px;
    }

    .od-tl-label {
        font-size: 14px;
        font-weight: 700;
        color: #9ca3af;
    }

    .od-tl--done .od-tl-label {
        color: #374151;
    }

    .od-tl--active .od-tl-label {
        color: #1e40af;
    }

    .od-tl-badge {
        font-size: 11px;
        font-weight: 700;
        padding: 2px 10px;
        border-radius: 20px;
        background: #d1fae5;
        color: #059669;
    }

    .od-tl-badge--active {
        background: #dbeafe;
        color: #2563eb;
    }

    .od-tl-line {
        width: 2px;
        height: 20px;
        background: #e5e7eb;
        margin-right: 17px;
    }

    .od-tl-line--done {
        background: #059669;
    }

    /* ── Purchased Books ── */
    .od-card--books {
        margin-bottom: 0;
    }

    .od-count-badge {
        font-size: 13px;
        font-weight: 700;
        background: var(--bg-color);
        color: #38244C;
        padding: 3px 10px;
        border-radius: 20px;
        margin-right: auto;
    }

    .od-books-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
    }

    /* ── Book Card ── */
    .od-book-card {
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid #f0ebe0;
        display: flex;
        flex-direction: column;
        transition: all 0.2s;
    }

    .od-book-card:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        transform: translateY(-3px);
    }

    .od-book-cover {
        position: relative;
        aspect-ratio: 3 / 4;
        overflow: hidden;
        background: linear-gradient(135deg, #f7f3ea, #ede4d3);
    }

    .od-book-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .od-book-format {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 11px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 20px;
        color: #fff;
    }

    .od-fmt--audio {
        background: #903BE1;
    }

    .od-fmt--ebook {
        background: #2D7FF9;
    }

    .od-fmt--physical {
        background: #1F9D7A;
    }

    .od-book-body {
        padding: 14px 14px 6px;
        flex: 1;
    }

    .od-book-title {
        font-family: 'Changa', 'Cairo', sans-serif;
        font-size: 14px;
        font-weight: 700;
        color: #38244C;
        margin: 0 0 6px 0;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .od-book-price {
        font-size: 15px;
        font-weight: 800;
        color: var(--primary);
    }

    .od-book-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 8px 14px 14px;
        padding: 10px;
        background: linear-gradient(135deg, var(--primary), #e85d60);
        color: #fff;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        transition: all 0.2s;
    }

    .od-book-link:hover {
        box-shadow: 0 4px 12px rgba(255, 112, 115, 0.3);
        gap: 10px;
    }

    /* ── Responsive ── */
    @media (max-width: 768px) {
        .od-page {
            padding: 16px 14px 60px;
        }

        .od-hero {
            padding: 24px 20px;
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
            border-radius: 16px;
        }

        .od-hero-id {
            font-size: 28px;
        }

        .od-hero-accent {
            width: 120px;
            height: 120px;
            top: -30px;
            left: -30px;
        }

        .od-grid {
            grid-template-columns: 1fr;
        }

        .od-details-grid {
            grid-template-columns: 1fr;
        }

        .od-books-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .od-book-body {
            padding: 10px 10px 4px;
        }

        .od-book-link {
            margin: 6px 10px 10px;
            font-size: 12px;
            padding: 8px;
        }

        .od-card {
            padding: 18px 16px;
            border-radius: 12px;
        }

        .od-address-avatar {
            width: 36px;
            height: 36px;
            font-size: 15px;
        }
    }

    @media (max-width: 300px) {
        .od-hero-id {
            font-size: 22px;
        }

        .od-total-price {
            font-size: 22px;
        }

        .od-books-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 640px) {
        .cart-item-card {
            flex-wrap: wrap;
        }

        .cart-item-actions {
            width: 100%;
        }

        .cart-item-actions form {
            width: 100%;
        }

        .cart-item-actions .btn-remove {
            width: 100%;
            text-align: center;
        }
    }


    /* ── Circle Cart Button ── */
    .cart-btn-wrapper {
        position: relative;
    }

    .cart-icon-link {
        display: flex;
        align-items: center;
        justify-content: center;
        color: inherit;
        text-decoration: none;
        width: 100%;
        height: 100%;
    }

    .cart-btn-wrapper .cart-badge {
        position: absolute;
        top: 2px;
        right: -4px;
        background: #ef4444;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        line-height: 1;
        pointer-events: none;
    }

    [dir="ltr"] .cart-btn-wrapper .cart-badge {
        right: auto;
        left: -4px;
    }

    .action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }


    /* ── Access Badges (book details) ── */
    .access-badge {
        text-align: center;
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .subscription-badge {
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        color: #92400e;
        border: 1px solid #fcd34d;
    }

    .owned-badge {
        background: linear-gradient(135deg, #d1fae5, #a7f3d0);
        color: #065f46;
        border: 1px solid #6ee7b7;
    }

    .locked-badge {
        background: linear-gradient(135deg, #fee2e2, #fecaca);
        color: #991b1b;
        border: 1px solid #fca5a5;
    }

    /* ── In-Cart Button (disabled state) ── */
    .in-cart-btn {
        background-color: #e5e7eb !important;
        color: #6b7280 !important;
        cursor: default !important;
        pointer-events: none;
    }

    .in-cart-btn:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* ── Owned Formats Section ── */
    .owned-formats-section {
        margin-top: 16px;
        padding: 12px 16px;
        background: #f9fafb;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
    }

    .owned-formats-section h4 {
        font-size: 13px;
        font-weight: 600;
        color: #6b7280;
        margin: 0 0 8px 0;
    }

    .owned-formats-section ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .owned-formats-section li {
        font-size: 14px;
        color: #374151;
        padding: 4px 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .owned-formats-section li i {
        color: #10b981;
    }

    .experience-block {
        border-radius: 24px;
        background: #FFF;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
        margin-top: 16px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
    }

    .experience-title {
        font-size: 24px;
        font-weight: 800;
        color: var(--text-dark);
        margin-bottom: 0;
        position: relative;

        text-align: right;
        font-family: inherit;
        font-family: "Palestine";
        justify-content: center;
    }

    .experience-title span {
        font-family: "Palestine";
        margin-right: 5px;
    }

    /* .experience-title::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 24px;
    background-color: var(--primary);
    border-radius: 4px;
} */

    .experience-cards {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    .exp-card {
        background-color: #F6EFE5;
        border-radius: 16px;
        padding: 16px 24px;
        display: flex;
        align-items: center;
        /* justify-content: space-between; */
        width: 100%;
        border: 1px solid transparent;
        transition: 0.2s ease;
        flex-direction: row-reverse;
        gap: 10px;
        justify-content: flex-end;
    }

    .exp-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
        text-align: right;
    }

    .exp-info strong {
        font-size: 18px;
        font-weight: 800;
        color: var(--text-dark);
    }

    .exp-info span {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-light);
    }

    .play-btn,
    .view-btn {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background-color: #FFFFFF;
        color: var(--text-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        border: none;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transition: 0.2s ease;
        flex-shrink: 0;
    }

    .play-btn:hover,
    .view-btn:hover {
        transform: scale(1.05);
    }

    .trust-badges {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-top: 32px;
        align-items: flex-start;
    }

    .trust-item {
        display: flex;
        align-items: center;
        gap: 16px;
        width: 100%;
    }

    .trust-icon-container {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        flex-shrink: 0;
    }

    .trust-text {
        font-size: 18px;
        font-weight: 800;
    }

    /* Delivery Info styles */
    .trust-delivery .trust-icon-container {
        background-color: #F6EFE5;
        color: var(--text-dark);
    }

    .trust-delivery .trust-text {
        color: var(--text-dark);
    }

    /* Secure info styles */
    .trust-secure .trust-icon-container {
        background-color: #EEF4FF;
        color: #4B32FF;
    }

    .trust-secure .trust-text {
        color: #4B32FF;
    }

    /* --- Main Left Column --- */
    .book-main-col {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .book-tags {
        display: flex;
        gap: 12px;
        margin-bottom: 24px;
        flex-wrap: wrap;
    }

    .book-tag {
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .book-tag.bg-blue {
        background-color: #EEF4FF;
        color: #4A90E2;
    }

    .book-tag.bg-brown {
        background-color: #F8F3E9;
        color: #C07E47;
        border: 1px solid #EBE1D0;
    }

    .book-tag.bg-green {
        background-color: #E6F6F4;
        color: #00A389;
    }

    .book-header-info {
        margin-bottom: 24px;
    }

    .book-title-main {
        font-size: 48px;
        font-weight: 800;
        color: var(--text-dark);
        font-family: 'Palestine' !important;
        line-height: 1.4;
        margin-bottom: 16px;
    }

    .book-author-rating {

        align-items: center;
        gap: 32px;
    }

    .author-name-inline {
        font-size: 16px;
        color: var(--text-light);
    }

    .author-name-inline strong {
        color: var(--primary);
    }

    .rating-box {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .rating-score {
        font-weight: 700;
        font-size: 16px;
    }

    .stars {
        color: #FFC107;
        font-size: 14px;
    }

    .rating-count {
        color: var(--text-light);
        font-size: 14px;
    }

    .book-action-icons {
        display: flex;
        gap: 16px;
        margin-bottom: 40px;
    }

    .icon-action-btn {
        background: transparent;
        border: none;
        font-size: 20px;
        cursor: pointer;
        transition: 0.2s;
    }

    .icon-action-btn.text-purple {
        color: #903BE1;
    }

    .icon-action-btn.text-green {
        color: #00A389;
    }

    .icon-action-btn.text-red {
        color: var(--primary);
    }

    .icon-action-btn.text-orange {
        color: #F59E0B;
    }

    .icon-action-btn:hover {
        transform: scale(1.1);
    }

    .section-block {
        margin-bottom: 10px;
        margin-top: 10px;
        position: relative;
        padding-right: 16px;
    }



    .block-title {
        font-size: 24px;
        color: var(--text-dark);
        margin-bottom: 16px;
        font-family: 'Palestine', 'Cairo', sans-serif;
    }

    .block-text {
        font-size: 16px;
        color: #38244C;
        line-height: 1.8;
    }

    .read-more-link {
        color: var(--primary);
        font-weight: bold;
        margin-right: 8px;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .info-card {
        background-color: #FFFFFF;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 16px 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-direction: row-reverse;
        justify-content: flex-end;
        align-items: center;
    }

    .info-data {
        display: flex;
        flex-direction: column;
    }

    .info-label {
        font-size: 12px;
        color: var(--text-light);
    }

    .info-value {
        font-size: 15px;
        font-weight: 700;
        color: var(--text-dark);
        margin-top: 4px;
    }

    .info-icon {
        width: 40px;
        height: 40px;
        background-color: #F8F3E9;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-dark);
        font-size: 18px;
    }

    /* Author block */
    .block-header-with-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .nav-arrows {
        display: flex;
        gap: 8px;
    }

    .nav-arrow {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: #F5EEDC;
        border: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--text-dark);
        transition: 0.2s;
    }

    .nav-arrow:hover {
        background-color: var(--primary);
        color: #FFFFFF;
        border-color: var(--primary);
    }

    .author-profile-card {
        background-color: #FFFFFF;
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 32px;
        text-align: center;
        /* display: flex;
    flex-direction: column;
    align-items: center; */
    }

    .author-img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 16px;
        border: 3px solid #FFFFFF;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .author-name-title {
        font-size: 20px;
        font-weight: 800;
        color: var(--primary);
        margin-bottom: 15px;
        font-family: "Palestine";
    }

    .author-releases {
        font-size: 13px;
        color: var(--text-dark);
        background-color: #F8F3E9;
        padding: 6px 16px;
        border-radius: 50px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .author-bio {
        font-size: 15px;
        color: #38244C;
        line-height: 1.8;
        margin-bottom: 24px;
        max-width: 600px;
        margin-top: 30px;
    }

    .author-bio-two {
        margin-top: 20 !important;
    }

    .author-profile-link {
        font-weight: 700;
        font-size: 15px;
        display: flex;
        align-items: center;

        justify-content: center;
        gap: 10px;
    }

    .authors-track::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar for Chrome, Safari and Opera */
    }

    @media (max-width: 1024px) {
        .book-details-layout {
            padding: 24px 40px 80px;
            gap: 60px;
        }
    }

    @media (max-width: 850px) {
        .book-details-layout {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .book-sidebar,
        .book-main-col,
        .book-header-info {
            display: contents;

        }

        .book-title-main {
            order: 1;
            text-align: center !important;
            font-size: 32px;
            margin-bottom: 24px;
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .book-cover-container {
            order: 2;
            margin: 0 auto 24px auto;
            max-width: 320px;
            width: 100%;
        }

        .pricing-box {
            order: 3;
            margin-bottom: 16px;
            width: 100%;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            align-items: center;
        }

        .pricing-box .price-values {
            justify-content: flex-end;

            align-items: baseline;
            gap: 16px;
            margin-top: 0;
        }

        .price-values {

            display: flex;
            justify-content: space-between !important;
            width: 65%;
            display: flex !important;

            align-items: center !important;
            /* flex-direction: row-reverse !important; */
        }

        .purchase-actions {
            width: 100%;
            order: 4;
            margin-bottom: 24px;
        }


        /* ── Access Badges (book details) ── */
        .access-badge {
            text-align: center;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .subscription-badge {
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            color: #92400e;
            border: 1px solid #fcd34d;
        }

        .owned-badge {
            background: linear-gradient(135deg, #d1fae5, #a7f3d0);
            color: #065f46;
            border: 1px solid #6ee7b7;
        }

        .locked-badge {
            background: linear-gradient(135deg, #fee2e2, #fecaca);
            color: #991b1b;
            border: 1px solid #fca5a5;
        }

        /* ── In-Cart Button (disabled state) ── */
        .in-cart-btn {
            background-color: #e5e7eb !important;
            color: #6b7280 !important;
            cursor: default !important;
            pointer-events: none;
        }

        .in-cart-btn:hover {
            transform: none !important;
            box-shadow: none !important;
        }

        /* ── Owned Formats Section ── */
        .owned-formats-section {
            margin-top: 16px;
            padding: 12px 16px;
            background: #f9fafb;
            border-radius: 8px;
            border: 1px solid #e5e7eb;
        }

        .owned-formats-section h4 {
            font-size: 13px;
            font-weight: 600;
            color: #6b7280;
            margin: 0 0 8px 0;
        }

        .owned-formats-section ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .owned-formats-section li {
            font-size: 14px;
            color: #374151;
            padding: 4px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .owned-formats-section li i {
            color: #10b981;
        }

        .experience-block {
            order: 5;
            margin-bottom: 24px;
        }

        .trust-badges {
            order: 6;
            align-items: center;
            margin-bottom: 32px;
        }

        .book-tags {
            order: 7;
            justify-content: center;
            margin-bottom: 16px;
        }

        .book-author-rating {
            order: 8;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 16px;
            gap: 12px;
        }

        .book-action-icons {
            order: 9;
            justify-content: center;
            margin-bottom: 32px;
        }

        .section-block {
            order: 10;
            width: 100%;
        }

        .author-profile-card {
            order: 11;
            width: 100%;
        }

        .info-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 550px) {
        .book-details-layout {
            padding: 24px 20px 60px;
        }

    }

    /* ==========================================================
   Reviews & Ratings Section
   ========================================================== */
    .reviews-section {
        padding: 60px 20px;
        background-color: var(--bg-color);
    }

    .reviews-container {
        max-width: 800px;
        /* Assuming it's slightly narrower for better readability */
        margin: 0 auto;
    }

    .reviews-section .section-title {
        text-align: right;
        margin-bottom: 32px;
        font-size: 32px;
        color: var(--text-dark);
    }

    .reviews-tabs {
        display: flex;
        gap: 16px;
        margin-bottom: 32px;
    }

    .tab-btn {
        flex: 1;
        padding: 16px;
        border: none;
        border-radius: 8px;
        font-size: 18px;
        font-weight: 700;
        cursor: pointer;
        background-color: #EBE1D0;
        color: var(--text-dark);
        transition: 0.2s ease;
        font-family: inherit;
    }

    .tab-btn.active {
        background-color: var(--primary);
        color: #FFFFFF;
    }

    .tab-btn:hover:not(.active) {
        background-color: #DFD5C4;
    }

    /* Tab Content Styling */
    .tab-content {
        display: none;
        animation: fadeIn 0.3s ease;
    }

    .tab-content.active {
        display: block;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Reviews Content */
    .reviews-list {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .review-card {
        background-color: #FFFFFF;
        border-radius: 24px;
        padding: 24px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    }

    .review-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;
    }

    .reviewer-info {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .reviewer-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
    }

    .reviewer-name {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-dark);
        margin: 0 0 6px 0;
    }

    .review-stars {
        color: #FFB800;
        font-size: 12px;
        display: flex;
        gap: 4px;
    }

    .review-stars i:last-child {
        color: #E2E2E2;
    }

    .review-date {
        font-size: 14px;
        color: var(--text-light);
    }

    .review-text {
        font-size: 15px;
        color: var(--text-dark);
        line-height: 1.6;
        margin: 0;
    }

    /* Quotes Content */
    .quotes-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .quote-card {
        background-color: #FFFFFF;
        border-radius: 24px;
        padding: 32px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
        /* border-right: 5px solid var(--primary); */
    }

    .quote-text {
        font-size: 18px;
        font-weight: 500;
        color: var(--text-dark);
        line-height: 1.8;
        margin: 0 0 16px 0;
        font-style: italic;
        font-family: 'Changa', sans-serif;
    }

    .quote-author {
        font-size: 14px;
        color: var(--primary);
        font-weight: 700;
        margin: 0;
    }

    /* Ratings Card */
    .ratings-card {
        background-color: #FFFFFF;
        border-radius: 24px;
        padding: 40px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    }

    .overall-rating {
        text-align: center;
        margin-bottom: 32px;
    }

    .overall-rating .stars {
        color: #FFB800;
        font-size: 24px;
        margin-bottom: 8px;
    }

    .rating-based-on {
        color: var(--text-light);
        font-size: 14px;
    }

    .rating-bars {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 40px;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .rating-bar-row {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .star-num {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-dark);
        width: 20px;
        text-align: center;
    }

    .progress-track {
        flex: 1;
        height: 8px;
        background-color: #F8F3E9;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
    }

    .progress-fill {
        height: 100%;
        background-color: #FFB800;
        border-radius: 10px;
    }

    .percent-val {
        font-size: 14px;
        font-weight: 700;
        color: var(--primary);
        width: 35px;
        text-align: left;
    }

    .submit-rating-btn {
        width: 100%;
        padding: 16px;
        background-color: var(--primary);
        color: #FFFFFF;
        font-size: 18px;
        font-weight: 700;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        transition: 0.2s ease;
        font-family: inherit;
        box-shadow: 0 4px 14px rgba(255, 112, 115, 0.2);
    }

    .submit-rating-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(255, 112, 115, 0.4);
    }

    @media (max-width: 600px) {
        .reviews-tabs {
            flex-direction: column;
        }

        .ratings-card {
            padding: 24px;
        }
    }

    /* ==========================================================
   Search Section
   ========================================================== */
    .search-section {
        padding: 70px 20px 50px 20px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--bg-color);
        max-width: 1300px;
        margin: 0 auto;
    }

    .search-title {
        font-family: Changa;
        font-size: 40px;
        font-weight: 800;
        color: var(--text-dark);
        margin-bottom: 12px;
    }

    .search-subtitle {
        font-size: 18px;
        color: #45556C;
        margin-bottom: 40px;
        text-align: center;
    }

    .voice-one {
        font-size: 21px;
    }

    /* Filters */
    .search-filters {
        display: flex;
        gap: 16px;
        margin-bottom: 24px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .filter-btn {
        background-color: #FFFFFF;
        color: var(--text-dark);
        border: none;
        padding: 10px 24px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 16px;
        cursor: pointer;
        font-family: inherit;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
        transition: 0.3s ease;
    }

    .filter-btn.active {
        background: linear-gradient(280deg, #FF7073 0%, #6C5BC2 100%);
        color: #FFFFFF;
    }

    /* ── Category filters on search results: collapse overflow chips ── */
    .category-filters {
        position: relative;
    }

    .category-filters.is-collapsed .category-chip.is-more {
        display: none;
    }

    .category-filters-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #FFFFFF;
        color: #6C5BC2;
        border: 1.5px dashed #C9BFE8;
        padding: 10px 20px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
        font-family: inherit;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
        transition: all 0.25s ease;
    }

    .category-filters-toggle:hover {
        border-style: solid;
        background: #F4EFFF;
        transform: translateY(-1px);
    }

    .category-filters .cf-toggle-less {
        display: none;
    }

    .category-filters.is-collapsed .cf-toggle-less {
        display: none;
    }

    .category-filters.is-collapsed .cf-toggle-more {
        display: inline;
    }

    .category-filters.is-expanded .cf-toggle-more {
        display: none;
    }

    .category-filters.is-expanded .cf-toggle-less {
        display: inline;
    }

    .category-filters-toggle .cf-toggle-icon {
        font-size: 12px;
        transition: transform 0.3s ease;
    }

    .category-filters.is-expanded .category-filters-toggle .cf-toggle-icon {
        transform: rotate(180deg);
    }

    @keyframes category-chip-in {
        from {
            opacity: 0;
            transform: translateY(6px) scale(0.96);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    .category-filters.is-expanded .category-chip.is-more {
        animation: category-chip-in 0.28s ease both;
    }

    /* Search Bar */
    .search-bar-container {
        display: flex;
        align-items: center;
        background: #FFFFFF;
        border-radius: 50px;
        padding: 8px;
        width: 100%;
        max-width: 800px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
        margin-bottom: 32px;
    }

    .search-input {
        flex: 1;
        border: none;
        background: transparent;
        padding: 16px 24px;
        font-size: 16px;
        font-family: inherit;
        color: var(--text-dark);
        outline: none;
    }

    .search-input::placeholder {
        color: #A0A0A0;
    }

    .search-submit-btn {
        background: linear-gradient(280deg, #FF7073 0%, #6C5BC2 100%);
        color: #FFFFFF;
        border: none;
        padding: 14px 48px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 18px;
        cursor: pointer;
        font-family: inherit;
    }

    /* Search Tags */
    .search-tags {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        max-width: 800px;
        justify-content: center;
    }

    .tags-label {
        font-size: 14px;
        color: var(--text-light);
        font-weight: 600;
        flex: 0 0 auto;
    }

    .search-tags-track {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 4px 2px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .search-tags-track::-webkit-scrollbar {
        display: none;
    }

    .tag-badge {
        background-color: #FFFFFF;
        color: #314158;
        padding: 6px 16px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
        cursor: pointer;
        transition: 0.2s ease;
        white-space: nowrap;
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .tag-badge:hover {
        color: var(--primary);
        transform: translateY(-2px);
    }

    /* ==========================================================
   Audiobooks Section
   ========================================================== */
    .audiobooks-section {
        padding: 60px 20px;
        background-color: #fff;
        max-width: 1300px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        text-align: center;
    }

    .audiobooks-section .section-title {
        font-size: 32px;
        font-weight: 800;
        color: var(--text-dark);
        margin-bottom: 8px;
        text-align: center;
    }

    .audiobooks-section .section-subtitle {
        text-align: center;
        color: #6A778B;
        font-size: 16px;
        margin-bottom: 24px;
        margin-top: -12px;
    }

    .audiobooks-track {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        padding-bottom: 20px;
        padding-top: 15px;
        scroll-behavior: smooth;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .audiobooks-track::-webkit-scrollbar {
        display: none;
    }

    .audiobook-card {
        flex: 0 0 300px;
        width: 300px;
        background: #FCF4E5;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        text-align: right;
        display: flex;
        flex-direction: column;
    }

    @media (max-width: 768px) {
        .audiobook-card {
            width: 200px;

        }

        .audiobooks-track {
            padding: 20px 0;
            gap: 20px;
        }

        /* .audiobook-card{
        width: 140px !important;
        height: 360px;
    } */

        .audiobooks-section {
            padding: 30px 20px !important;
        }

        .search-subtitle {
            margin-bottom: 10px !important;
        }
    }

    @media (max-width: 550px) {
        .audiobook-card {
            width: 160px;
            height: auto;
            min-height: 340px;
        }

        .circle-play-btn {
            width: 50px;
            height: 50px;
        }

        .listen-now-btn {
            font-size: 12px;
        }

        .publishers-grid .store-card {
            width: 100%;
            flex: none !important;
        }

        .store-card,
        .foryou-track .store-card {
            width: calc(50% - 10px);
            flex: 0 0 calc(50% - 10px);
            padding: 8px;
        }

        .store-card .card-info {
            margin-bottom: 10px;
        }

        .store-card .card-title {
            font-size: 12px;
            margin-bottom: 2px;
            margin-top: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0;
            width: stretch;
        }

        .store-card .card-author {
            font-size: 11px;
        }

        .store-card .card-rating {
            font-size: 12px;
        }

        .store-card .card-actions {
            gap: 6px;
        }

        .store-card .buy-btn {
            padding: 8px 6px;
            font-size: 11px;
            border-radius: 8px;
            flex: 1;
        }

        .cat-card .cart-btn-outline,
        .cart-btn-outline {
            width: 30px;
            height: 30px;
            font-size: 10px;

        }

        .store-card .cart-btn {
            width: 32px;
            padding: 6px;
            font-size: 12px;
            border-radius: 8px;
        }

        .store-card .card-price {
            font-size: 12px;
        }

        .store-card .audio-badge,
        .store-card .hot-badge {
            font-size: 9px;
            padding: 3px 6px;
        }

        .store-card .audio-badge {
            width: 22px;
            height: 22px;
            font-size: 10px;
        }
    }

    .cover-wrapper {
        position: relative;
        width: 100%;
        height: 280px;
        overflow: hidden;
    }

    .cover-wrapper .cover-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .duration-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        background: rgba(0, 0, 0, 0.7);
        color: #FFF;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    [dir="ltr"] .duration-badge {
        right: auto;
        left: 12px;
    }

    .play-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.15);
        z-index: 1;
    }

    .circle-play-btn {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--primary);
        color: #FFF;
        border: none;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(255, 112, 115, 0.4);
        transition: transform 0.2s;
    }

    [dir="rtl"] .circle-play-btn {
        padding-left: 6px;
    }

    [dir="ltr"] .circle-play-btn {
        padding-right: 6px;
    }

    .circle-play-btn:hover {
        transform: scale(1.1);
    }

    .audio-waveform {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 3px;
        padding-bottom: 8px;
        z-index: 2;
    }

    [dir="ltr"] .audio-waveform {
        left: auto;
        right: 0;
    }

    .audio-waveform-bar {
        width: 3px;
        background: #E48332;
        border-radius: 2px;
    }

    .card-content {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .book-title {
        font-size: 16px;
        font-weight: 800;
        color: var(--text-dark);
    }

    .book-author {
        font-size: 14px;
        color: var(--text-light);
        margin-bottom: 12px;
    }

    .listen-now-btn {
        background: var(--primary);
        color: #FFF;
        border: none;
        padding: 10px 16px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 14px;
        display: flex;
        align-items: center;
        cursor: pointer;
        font-family: inherit;
        transition: 0.2s;
        gap: 5px;
        flex-direction: row-reverse;
        justify-content: center;
    }

    [dir="ltr"] .listen-now-btn {
        flex-direction: row;
    }

    .listen-now-btn:hover {
        background: #EF6063;
    }

    .slider-controls {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 20px;
    }

    .control-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #EFE4D9;
        color: var(--text-dark);
        border: none;
        font-size: 14px;
        cursor: pointer;
        transition: 0.2s;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .control-btn:hover {
        background: #E1D3C4;
    }

    /* ==========================================================
   Categories Section
   ========================================================== */
    .categories-section {
        padding: 60px 20px;
        background-color: #fff;
        max-width: 1300px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }

    .categories-track {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        padding-bottom: 20px;
        padding-top: 15px;
        /* Added to prevent hover cutoff */
        scroll-behavior: smooth;
        scrollbar-width: none;
    }

    .categories-track::-webkit-scrollbar {
        display: none;
    }

    .category-card {
        flex: 0 0 340px;
        border-radius: 16px;
        padding: 40px 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        color: #FFFFFF;
        text-decoration: none;
        transition: transform 0.3s;
    }

    .category-card:hover {
        transform: translateY(-8px);
    }

    .category-img {
        height: 180px;
        margin-bottom: 32px;
        object-fit: contain;
        border-radius: 8px;
        /* just in case it's a square unsplash image */
    }

    .category-title {
        font-size: 26px;
        font-weight: 800;
    }
    .category-book-count{
        margin-bottom: 16px;

    }

    .category-desc {
        font-size: 18px;
        line-height: 1.6;
        font-weight: 500;
    }

    .bg-green {
        background-color: #0F9D8A;
    }

    .bg-pink {
        background-color: #FF7073;
    }

    .bg-maroon {
        background-color: #790827;
    }

    .bg-blue {
        background-color: #17A2B8;
    }

    .categories-controls {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 40px;
    }

    .cat-control-btn {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: none;
        background: #EAE0CD;
        color: var(--text-dark);
        font-size: 16px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.2s;
    }

    .cat-control-btn:hover {
        background: #D8CCA8;
    }

    /* ==========================================================
   Best Sellers Section
   ========================================================== */
    .bestsellers-section {
        padding: 60px 20px;
        background-color: var(--bg-color);
        max-width: 1300px;
        margin: 0 auto;
    }

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

    .audiobooks-section .section-header {
        display: block;
        align-items: center;
        margin-bottom: 25px;
    }

    .section-title {
        font-size: 36px;
        font-weight: 800;
        color: var(--text-dark);
    }

    .view-all-link {
        font-size: 18px;
        font-weight: 800;
        color: var(--primary);
        display: flex;
        align-items: center;
        gap: 8px;
        transition: transform 0.2s;
        text-decoration: none;
    }

    .view-all-link:hover {
        transform: translateX(-6px);
    }

    [dir="ltr"] .view-all-link:hover {
        transform: translateX(6px);
    }

    /* Flip arrow for LTR */
    [dir="ltr"] .view-all-link i {
        transform: scaleX(-1);
    }

    .bestsellers-grid {
        display: flex;
        gap: 24px;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 24px;
        padding-top: 15px;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }

    .bestsellers-grid::-webkit-scrollbar {
        display: none;
    }

    .store-card {
        background: #FFFFFF;
        border-radius: 16px;
        padding: 12px;
        width: 290px;
        flex-shrink: 0;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        display: flex;
        flex-direction: column;
        transition: transform 0.3s;
    }

    .store-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

    .card-img-wrapper {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 16px;
        aspect-ratio: 1 / 1.45;
        background-color: #f0f0f0;
    }

    .card-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .audio-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        background: #903BE1;
        color: #FFFFFF;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        box-shadow: 0 2px 6px rgba(144, 59, 225, 0.4);
    }

    [dir="ltr"] .audio-badge {
        left: auto;
        right: 12px;
    }

    .top-left-badges {
        position: absolute;
        top: 12px;
        left: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        z-index: 2;
    }

    [dir="ltr"] .top-left-badges {
        left: auto;
        right: 12px;
    }

    .top-left-badges .audio-badge {
        position: static;
        top: auto;
        left: auto;
    }

    .top-left-badges .format-icon-badge {
        position: static;
    }

    .filter-divider {
        border: none;
        border-top: 1px solid #F0F0F0;
        margin: 16px 0;
    }

    .filter-group.collapsed+.filter-divider {
        display: none;
    }

    .filter-group-content {
        display: flex;
        flex-direction: column;
        gap: 14px;
        overflow: hidden;
        max-height: 1000px;
        /* arbitrary large height for open state */
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
        opacity: 1;
    }

    .filter-group.collapsed .filter-group-content {
        max-height: 0;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
        pointer-events: none;
    }

    .filter-group-title i {
        transition: transform 0.3s ease;
    }

    .filter-group.collapsed .filter-group-title i {
        transform: rotate(180deg);
    }

    .hot-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        background: linear-gradient(90deg, #FF7073 0%, #FF9B70 100%);
        color: #FFFFFF;
        padding: 6px 14px;
        border-radius: 50px;
        font-size: 11px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    [dir="ltr"] .hot-badge {
        right: auto;
        left: 12px;
    }

    .top-right-badges {
        position: absolute;
        top: 12px;
        right: 12px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        z-index: 2;
    }

    [dir="ltr"] .top-right-badges {
        right: auto;
        left: 12px;
    }

    .top-right-badges .hot-badge {
        position: static;
        top: auto;
        right: auto;
    }

    .format-icon-badge {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #FFFFFF;
        font-size: 14px;
    }

    .format-icon-badge--audio {
        background: #903BE1;
        box-shadow: 0 2px 6px rgba(144, 59, 225, 0.35);
    }

    .format-icon-badge--ebook {
        background: #2D7FF9;
        box-shadow: 0 2px 6px rgba(45, 127, 249, 0.35);
    }

    .format-icon-badge--physical {
        background: #1F9D7A;
        box-shadow: 0 2px 6px rgba(31, 157, 122, 0.35);
    }

    .card-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;
        padding: 0 4px;
            text-align: start;
    }

    .card-info-div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-items: center;
        width: 100%;
    }

    .card-title {
        font-size: 18px;
        font-weight: 800;
        color: var(--text-dark);
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        width: stretch;
    }

    .card-author {
        font-size: 14px;
        color: #6A778B;
        font-weight: 500;
    }

    .format-badges {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .format-badge {
        background: #eef3ff;
        color: #2c4db3;
        border-radius: 999px;
        padding: 4px 10px;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;
    }

    .card-rating {
        font-size: 14px;
        font-weight: 800;
        color: var(--text-dark);
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .card-rating i {
        color: var(--primary);
        font-size: 12px;
    }

    .card-actions {
        display: flex;
        gap: 12px;
    }

    .buy-btn {
        flex: 1;
        display: inline-block;
        text-align: center;
        text-decoration: none;
        box-sizing: border-box;
        background: var(--primary);
        color: #FFFFFF;
        border: none;
        border-radius: 10px;
        padding: 12px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: 0.2s;
        font-family: inherit;
        text-align: center;
    }

    .buy-btn:hover {
        background: #E85D60;
    }

    .cart-btn {
        background: #FFFFFF;
        color: var(--primary);
        border: 1.5px solid #F3DBDB;
        border-radius: 10px;
        width: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: 0.2s;
    }

    .cart-btn:hover {
        background: #FDF3F3;
        border-color: var(--primary);
    }

    /* ==========================================================
   For You Section
   ========================================================== */
    .foryou-section {
        padding: 60px 20px;
        background-color: var(--bg-color);
        max-width: 1300px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }

    .section-controls {
        display: flex;
        gap: 12px;
    }

    .circle-btn-white {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transition: 0.2s;
        color: var(--text-dark);
        font-size: 16px;
    }

    .circle-btn-white:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    }

    .foryou-track {
        display: flex;
        gap: 24px;
        overflow-x: auto;
        padding-bottom: 24px;
        padding-top: 15px;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }

    .foryou-track::-webkit-scrollbar {
        display: none;
    }

    .foryou-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        background: #FF7073;
        color: #FFFFFF;
        padding: 6px 16px;
        border-radius: 50px;
        font-size: 11px;
        font-weight: 700;
    }

    .foryou-track .store-card {
        flex: 0 0 290px;
    }

    /* ==========================================================
   Publishers Section
   ========================================================== */
    .publishers-section {
        padding: 80px 20px;
        background-color: #FFFDF9;
        text-align: center;
        margin-top: 60px;
        margin-left: auto;
        margin-right: auto;
    }

    .publishers-header {
        margin-bottom: 40px;
    }

    .publishers-title {
        font-size: 36px;
        font-weight: 800;
        color: var(--text-dark);
        margin-bottom: 12px;
    }

    .publishers-subtitle {
        font-size: 16px;
        color: #6A778B;
        font-weight: 600;
    }

    .publishers-track {
        display: flex;
        justify-content: center;
        gap: 24px;
        max-width: 1400px;
        margin: 0 auto;
        overflow-x: auto;
        padding: 20px;
        scrollbar-width: none;
    }

    .publishers-track::-webkit-scrollbar {
        display: none;
    }

    .publisher-card {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        transition: transform 0.3s;
        text-decoration: none;
        color: inherit;
    }

    .publisher-card:hover {
        transform: translateY(-6px);
    }

    .publisher-logo {
        width: 120px;
        height: 120px;
        background: #FFFFFF;
        border-radius: 20px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        transition: box-shadow 0.3s;
    }

    .publisher-card:hover .publisher-logo {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

    .publisher-logo img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .publisher-name {
        font-size: 14px;
        font-weight: 800;
        color: var(--text-dark);
    }

    /* ==========================================================
   Most Read Section
   ========================================================== */
    .mostread-section {
        padding: 60px 20px;
        background-color: var(--bg-color);
        max-width: 1300px;
        margin: 0 auto;
    }

    .badge-stack {
        position: absolute;
        top: 12px;
        right: 12px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: stretch;
    }

    [dir="ltr"] .badge-stack {
        right: auto;
        left: 12px;
    }

    .badge-mostread {
        background: #FF7073;
        color: #FFFFFF;
        padding: 6px 14px;
        border-radius: 50px;
        font-size: 11px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        box-shadow: 0 2px 8px rgba(255, 112, 115, 0.4);
    }

    .badge-free {
        background: #00A389;
        color: #FFFFFF;
        padding: 4px 14px;
        border-radius: 50px;
        font-size: 11px;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    /* ==========================================================
   Experience Section
   ========================================================== */
    .experience-section {
        padding: 80px 20px;
        background-color: #FFFFFF;
        max-width: 1300px;
        margin: 0 auto;
    }

    /* ── Header ── */
    .experience-header {
        text-align: center;
        margin-bottom: 64px;
    }

    .experience-title {
        font-size: 48px;
        font-weight: 800;
        color: var(--text-dark);
        margin-bottom: 16px;
        line-height: 1.3;
        text-align: center;
    }

    .experience-title .text-primary {
        color: var(--primary);
    }

    .experience-subtitle {
        font-size: 18px;
        color: #6b7280;
        max-width: 650px;
        margin: 0 auto;
        line-height: 1.7;
    }

    /* ── Row Layout ── */
    .experience-row {
        display: flex;
        align-items: center;
        gap: 70px;
        margin-bottom: 80px;
    }

    .experience-row:last-child {
        margin-bottom: 0;
    }

    /* ── RTL/LTR Ordering (dir attribute on <html> naturally flips flexbox order) ── */
    .experience-row.row-image-left .experience-image { order: 2; }
    .experience-row.row-image-left .experience-content { order: 1; }
    .experience-row.row-image-right .experience-image { order: 1; }
    .experience-row.row-image-right .experience-content { order: 2; }

    /* ── Image ── */
    .experience-image {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .experience-image img {
        width: 100%;
        max-width: 480px;
        object-fit: cover;
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
    }

    .experience-image img:hover {
        transform: scale(1.02);
    }

    /* ── Content ── */
    .experience-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: start;
        width: 100%;
    }


    /* ── Badge Pill ── */
    .badge-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 20px;
        letter-spacing: 0.02em;
        background-color: #F3EDF7;
        color: #7C3AED;
    }

    .badge-pill i {
        font-size: 14px;
    }

    .badge-pill.green {
        background-color: #ECFDF5;
        color: #059669;
    }

    /* ── Content Title ── */
    .content-title {
        font-size: 36px;
        font-weight: 800;
        color: var(--text-dark);
        margin-bottom: 20px;
        line-height: 1.3;
    }

    .content-subtitle {
        font-size: 17px;
        color: #6b7280;
        margin-bottom: 28px;
        line-height: 1.7;
    }

    /* ── Feature List (Reading) ── */
    .feature-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 32px;
        width: 100%;
    }

    .feature-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .feature-item h4 {
        font-size: 17px;
        font-weight: 700;
        color: var(--text-dark);
    }

    .feature-item p {
        font-size: 14px;
        color: var(--text-light);
        line-height: 1.5;
    }

    /* ── Feature Grid (Listening) ── */
    .feature-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 28px;
        width: 100%;
    }

    .feature-box {
        background: #FDFBFA;
        border: 1.5px solid #F0EBE0;
        border-radius: 16px;
        padding: 24px 18px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        transition: all 0.25s ease;
        cursor: default;
    }

    .feature-box:hover {
        border-color: var(--primary);
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(255, 112, 115, 0.08);
    }

    .feature-box i {
        font-size: 22px;
        color: var(--primary);
        background: linear-gradient(135deg, #FFF5F5, #FDF2F8);
        width: 52px;
        height: 52px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 14px;
        transition: transform 0.25s ease;
    }

    .feature-box:hover i {
        transform: scale(1.1);
    }

    .feature-box h5 {
        font-size: 15px;
        font-weight: 700;
        color: var(--text-dark);
        margin: 0;
    }

    .feature-box p {
        font-size: 13px;
        color: var(--text-light);
        line-height: 1.5;
        margin: 0;
    }

    /* ── Buttons ── */
    .btn-primary {
        background: var(--primary);
        color: #FFFFFF;
        border: 2px solid var(--text-dark);
        padding: 12px 40px;
        border-radius: 10px;
        font-weight: 800;
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        transition: all 0.15s ease;
        font-family: inherit;
        box-shadow: 4px 4px 0px var(--text-dark);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        vertical-align: middle;
    }

    .btn-primary:hover {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0px var(--text-dark);
    }

    .btn-link {
        background: none;
        border: none;
        color: var(--primary);
        font-weight: 800;
        font-size: 16px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
        font-family: inherit;
        transition: all 0.2s ease;
        text-decoration: none;
        border-bottom: 2px solid transparent;
    }

    .btn-link:hover {
        color: #E85D60;
        border-bottom-color: var(--primary);
        gap: 12px;
    }

    [dir="rtl"] .btn-link:hover i {
        transform: translateX(-4px);
    }

    [dir="ltr"] .btn-link:hover i {
        transform: translateX(4px);
    }

    /* ═══════════════════════════════════════════════
       Tablet (max-width: 992px)
       ═══════════════════════════════════════════════ */
    @media (max-width: 992px) {
        .experience-section {
            padding: 60px 24px;
        }

        .experience-row,
        .experience-row.row-image-left,
        .experience-row.row-image-right {
            flex-direction: column;
            gap: 36px;
            margin-bottom: 60px;
        }

        .experience-row:last-child {
            margin-bottom: 0;
        }

        .experience-row.row-image-left .experience-image,
        .experience-row.row-image-left .experience-content,
        .experience-row.row-image-right .experience-image,
        .experience-row.row-image-right .experience-content {
            order: 0;
        }

        .experience-content {
            align-items: flex-start;
            text-align: start;
            width: 100%;
        }

        .row-image-right .experience-content {
            align-items: flex-start;
            text-align: start;
        }

        .experience-image {
            width: 100%;
        }

        .experience-image img {
            max-width: 100%;
            max-height: 360px;
            border-radius: 16px;
        }

        .content-title {
            font-size: 28px;
            margin-bottom: 16px;
        }

        .content-subtitle {
            font-size: 15px;
            margin-bottom: 20px;
        }

        .feature-list {
            gap: 16px;
            margin-bottom: 24px;
        }

        .feature-grid {
            gap: 12px;
            margin-bottom: 20px;
        }

        .feature-box {
            padding: 18px 14px;
        }
    }

    /* ═══════════════════════════════════════════════
       Mobile (max-width: 640px)
       ═══════════════════════════════════════════════ */
    @media (max-width: 640px) {
        .experience-section {
            padding: 48px 16px;
        }

        .experience-header {
            margin-bottom: 40px;
        }

        .experience-title {
            font-size: 32px;
            line-height: 1.4;
        }

        .experience-subtitle {
            font-size: 15px;
            line-height: 1.6;
        }

        .experience-row {
            gap: 28px;
            margin-bottom: 48px;
        }

        .experience-image img {
            max-height: 260px;
            border-radius: 14px;
        }

        .content-title {
            font-size: 24px;
            margin-bottom: 12px;
        }

        .content-subtitle {
            font-size: 14px;
            margin-bottom: 16px;
        }

        .badge-pill {
            font-size: 13px;
            padding: 8px 16px;
            margin-bottom: 14px;
        }

        .feature-list {
            gap: 14px;
            margin-bottom: 20px;
        }

        .feature-item h4 {
            font-size: 15px;
        }

        .feature-item p {
            font-size: 13px;
        }

        .feature-grid {
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .feature-box {
            padding: 16px 10px;
            border-radius: 12px;
        }

        .feature-box i {
            width: 44px;
            height: 44px;
            font-size: 18px;
            border-radius: 10px;
        }

        .feature-box h5 {
            font-size: 13px;
        }

        .feature-box p {
            font-size: 11px;
        }

        .btn-primary {
            padding: 12px 28px;
            font-size: 14px;
            justify-content: center;
            width: 100%;
            text-align: center;
        }

        .btn-link {
            font-size: 15px;
            justify-content: center;
            width: 100%;
        }
    }

    /* ═══════════════════════════════════════════════
       Small Mobile (max-width: 300px)
       ═══════════════════════════════════════════════ */
    @media (max-width: 300px) {
        .experience-section {
            padding: 40px 12px;
        }

        .experience-title {
            font-size: 28px;
        }

        .experience-subtitle {
            font-size: 14px;
        }

        .experience-image img {
            max-height: 220px;
            border-radius: 12px;
        }

        .content-title {
            font-size: 20px;
        }

        .feature-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .feature-box {
            padding: 16px 14px;
            flex-direction: row;
            text-align: right;
            gap: 12px;
            align-items: center;
        }

        .feature-box i {
            width: 40px;
            height: 40px;
            font-size: 17px;
            border-radius: 10px;
            flex-shrink: 0;
        }

        .feature-box h5 {
            font-size: 13px;
        }

        .feature-box p {
            font-size: 11px;
        }
    }


        /* ==========================================================
   Pricing Section
   ========================================================== */
    .pricing-section {
        padding: 80px 20px;
        background-color: var(--bg-color);
        text-align: center;
        max-width: 1300px;
        margin: 0 auto;
    }

    .pricing-title {
        font-size: 50px;
        font-weight: 900;
        color: var(--text-dark);
        margin-bottom: 0px;
        font-family: "Palestine";
    }

    .pricing-logo-text {
        font-family: 'Palestine', 'Cairo', sans-serif;
        font-size: 50px;
        color: var(--primary);
        margin-bottom: 60px;
        display: inline-block;
    }

    .pricing-cards {
        display: flex;
        justify-content: center;
        gap: 32px;
        max-width: 1100px;
        margin: 0 auto;
        flex-wrap: wrap;
    }

    .pricing-card {
        background: #FFFFFF;
        border-radius: 16px;
        padding: 40px 24px;
        width: 340px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: column;
        position: relative;
        transition: transform 0.3s;
        margin-top: 20px;
    }

    .pricing-card:hover {
        transform: translateY(-8px);
    }

    .pricing-card.highlight {
        border: 2px solid var(--primary);
        transform: scale(1.05);
    }

    .pricing-card.highlight:hover {
        transform: scale(1.05) translateY(-5px);
    }

    .popular-badge {
        position: absolute;
        top: -16px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--primary);
        color: #FFF;
        padding: 6px 20px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
    }

    .plan-name {
        font-size: 32px;
        font-weight: 900;
        color: var(--text-dark);
        margin-bottom: 8px;
    }

    .plan-subtitle {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-light);
        margin-bottom: 24px;
    }

    .plan-price {
        font-size: 36px;
        font-weight: 900;
        color: var(--primary);
        margin-bottom: 32px;
    }

    .promo-apply-btn {
        background: var(--primary);
        color: #FFFFFF;
        border: 1px solid transparent;
        border-radius: 8px;
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 600;
        font-family: 'Cairo', sans-serif;
        white-space: nowrap;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.1s ease;
    }

    .promo-apply-btn:hover {
        background: #e85f62;
    }

    .promo-apply-btn:active {
        transform: scale(0.97);
    }

    .promo-apply-btn:disabled {
        background: #f3b0b2;
        cursor: not-allowed;
    }

    .plan-features {
        list-style: none;
        text-align: right;
        margin-bottom: 40px;
        flex: 1;
    }

    .plan-features li {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-dark);
        margin-bottom: 16px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        line-height: 1.5;
    }

    .feature-icon {
        color: #2ECC71;
        font-size: 14px;
        margin-top: 4px;
    }

    .plan-btn {
        background: var(--primary);
        color: #FFFFFF;
        border: none;
        padding: 12px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 16px;
        cursor: pointer;
        font-family: inherit;
        transition: 0.2s;
        width: 100%;
    }

    .plan-btn:hover {
        background: #EF6063;
    }

    /* Responsive adjustments for the slider */
    @media (max-width: 768px) {
        .books-slider-section {
            margin-top: -5px;
            margin-bottom: -70px;
        }

        .slider-sec {
            margin-bottom: -30px;
        }

        .books-track {
            gap: 16px;
            padding: 0 20px;
        }

        .book-card {
            width: 130px;
            height: 190px;
        }

        .small-book-card {
            width: 130px;
            height: 190px;
        }

        .fade-right,
        .fade-left {
            width: 60px;
        }

        .pricing-title,
        .pricing-logo-text {
            font-size: 35px;

        }

        .pricing-logo-text {
            margin-bottom: 20px;
        }
    }

    /* ==========================================================
   Global Responsive Design
   ========================================================== */

    @media (max-width: 1024px) {

        /* Categories/ForYou Sliders */
        .bestsellers-grid,
        .foryou-track,
        .categories-track {
            gap: 16px;

        }

        .foryou-track .store-card,
        .store-card {
            width: 260px;
            flex: 0 0 260px;
        }

        .category-card {
            flex: 0 0 280px;
            padding: 30px 16px;
        }
    }

    @media (max-width: 768px) {

        /* Global Section Paddings */
        section {
            padding: 20px 20px;

        }

        .section-same {
            padding: 30px 20px;
            margin-top: 15px;
            margin-bottom: 15px;

        }

        .section-title,
        .publishers-title {
            margin-bottom: 20px;
        }

        .section-header {
            gap: 8px;
            margin-bottom: 0px
        }

        .hero-container {
            padding-top: 20px;
            padding-bottom: 20px;
        }

        /* Navbar Adjustments */
        .navbar {
            height: auto;
            min-height: 80px;
            flex-wrap: wrap;
            gap: 16px;
            justify-content: space-between;
            padding: 16px 20px;
        }

        .nav-links {
            display: none;
            /* Can be toggled via JS later */
        }

        .nav-actions {
            order: 2;
            gap: 12px;
        }

        .search-container {
            order: 3;
            width: 100%;
            max-width: 100%;
            margin-right: 0;
        }

        /* Hero Section */
        .hero-container {
            flex-direction: column;
            text-align: center;
            padding-top: 40px;
            padding-bottom: 40px;
        }

        .hero-content {
            max-width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .hero-title {
            font-size: 38px;
            line-height: 1.4;
            text-align: right;
            margin-bottom: 10px !important;
        }

        .hero-subtitle {
            text-align: right;
            font-size: 16px;
            margin-bottom: 10px !important;
        }

        .hero-buttons {
            justify-content: center;
            flex-wrap: wrap;
        }

        /* Form Inputs */
        .search-input {
            width: 100%;
            min-width: 0;
        }

        /* Section Headers */
        .section-title,
        .publishers-title {
            font-size: 22px;
            line-height: 1.4;
        }

        .view-all-link {
            font-size: 14px !important;
        }

        .reviews-section .section-title {
            font-size: 29px;
        }

        .section-header {
            flex-direction: row !important;
            justify-content: space-between !important;
            align-items: center !important;
            gap: 8px;

        }

        /* Reverse logic overrides for section-header inline styles */
        div[style*="flex-direction: row-reverse"] {

            align-items: flex-start !important;
        }

        .search-title {
            text-align: center;
            font-size: 31px;
        }

        /* Pricing Section */
        .pricing-cards {
            flex-direction: column;
            align-items: center;
            gap: 40px;
        }

        .pricing-card {
            width: 100%;
            max-width: 380px;
            padding: 28px 18px;
        }

        .popular-badge {
            top: -14px;
            padding: 5px 16px;
            font-size: 13px;
        }

        .plan-name {
            font-size: 28px;
            margin-bottom: 10px;
        }

        .plan-subtitle {
            margin-bottom: 22px;
        }

        .plan-price {
            margin-bottom: 30px;
        }

        .plan-features {
            margin-bottom: 30px;
        }

        .plan-features li {
            margin-bottom: 14px;
            gap: 12px;
        }

        .plan-btn {
            padding: 12px 14px;
            font-size: 15px;
        }

        .pricing-title-main,
        .pricing-title-sub {
            font-size: 46px;
            line-height: 56px;
        }

        .pricing-title-container {
            min-height: auto;
            margin-bottom: 40px;
        }

        .pricing-section {
            padding: 60px 20px;
            margin-top: -15px;
        }
    }

    /* ==========================================================
   Promo Banner Section
   ========================================================== */
    .promo-banner-section {
        padding: 60px 20px;
        background-color: var(--bg-color);
        /* matches body */
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 1300px;
        margin: 0 auto;
    }

    .promo-banner-container {
        width: 100%;
        max-width: 1100px;
        background-color: #F0F6FA;
        /* Very light blue background */
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 50px 60px;
        position: relative;
        overflow: hidden;
    }

    /* Fluid wave decoration overlay */
    .promo-wave {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        z-index: 1;
    }

    .promo-content {
        position: relative;
        z-index: 2;
        max-width: 55%;
        text-align: right;
    }

    [dir="ltr"] .promo-content {
        text-align: left;
    }

    .promo-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #FFFFFF;
        border: 1px solid #E0E0E0;
        padding: 8px 16px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 20px;
    }

    .promo-title {
        font-family: "palestine";
        font-size: 42px;
        font-weight: 800;
        color: #38244C;
        margin-bottom: 16px;
        line-height: 1.4;
        letter-spacing: -0.5px;
    }

    .promo-title span {
        font-family: "palestine";
    }

    .promo-subtitle {
        font-size: 23px;
        font-weight: 700;
        color: #38244C;
        margin-bottom: 32px;
    }

    .promo-btn {
        background-color: #FF7073;
        color: #FFFFFF;
        font-size: 16px;
        font-weight: 700;
        padding: 12px 32px;
        border-radius: 8px;
        border: 1.5px solid #222222;
        box-shadow: 3px 3px 0px #222222;
        cursor: pointer;
        transition: transform 0.1s, box-shadow 0.1s;
        font-family: inherit;
    }

    .promo-btn:active {
        transform: translate(2px, 2px);
        box-shadow: 1px 1px 0px #222222;
    }

    .promo-image {
        position: relative;
        z-index: 2;
        width: 40%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .promo-img {
        width: 300px;
        height: 250px;
        object-fit: cover;
        border-radius: 12px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        border: 2px solid #fff;
        transition: opacity 0.2s ease-in-out;
        max-width: 100%;
    }

    .promo-dots {
        display: flex;
        gap: 12px;
        margin-top: 32px;
        align-items: center;
        direction: ltr;
        /* Keeps active dot placement logical or RTL depending on preference */
    }

    .promo-dots .dot {
        width: 8px;
        height: 8px;
        background-color: #C0C0C0;
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
    }

    .promo-dots .dot.active {
        width: 10px;
        height: 10px;
        background-color: #FF7073;
        box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 4px #C0C0C0;
    }

    @media (max-width: 900px) {
        .promo-banner-section {
            padding: 30px 10px;
        }

        .promo-banner-container {
            flex-direction: row;
            /* keep it horizontal */
            padding: 20px;
            align-items: center;
            border-radius: 8px;
            gap: 16px;
        }

        .promo-content {
            max-width: 60%;
            text-align: right;
        }

        .promo-image {
            width: 40%;
        }

        .promo-img {
            width: 100%;
            height: auto;
            aspect-ratio: 1 / 1;
        }

        .promo-title {
            font-size: 24px;
            margin-bottom: 10px;
        }

        .promo-badge {
            font-size: 10px;
            padding: 4px 10px;
            margin-bottom: 12px;
        }

        .promo-subtitle {
            font-size: 12px;
            margin-bottom: 16px;
        }

        .promo-btn {
            font-size: 12px;
            padding: 8px 16px;
            box-shadow: 2px 2px 0px #222222;
        }
    }

    @media (max-width: 550px) {
        .promo-banner-container {
            padding: 16px 12px;
            flex-direction: column;
            text-align: center;
        }

        .promo-content {
            max-width: 100%;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .promo-image {
            width: 100%;
            max-width: 200px;
        }

        .promo-title {
            font-size: 18px;
            margin-bottom: 8px;
        }

        .promo-subtitle {
            font-size: 10px;
            margin-bottom: 12px;
        }

        .promo-badge {
            font-size: 9px;
            padding: 4px 8px;
            margin-bottom: 8px;
            gap: 4px;
        }

        .promo-btn {
            font-size: 10px;
            padding: 6px 12px;
        }
    }

    /* ==========================================================
   Recently Added Section
   ========================================================== */
    .recently-added-section {
        padding: 60px 20px;
        background-color: var(--bg-color);
        max-width: 1300px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }

    .recently-track {
        display: flex;
        gap: 24px;
        overflow-x: auto;
        padding-bottom: 24px;
        padding-top: 15px;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }

    .recently-track::-webkit-scrollbar {
        display: none;
    }

    .recent-card {
        background: #FFFFFF;
        border-radius: 16px;
        padding: 16px;
        width: 300px;
        flex: 0 0 300px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        display: flex;
        flex-direction: column;
    }

    .recent-card .card-img-wrapper {
        width: 100%;
        height: 340px;
        border-radius: 12px;
        overflow: hidden;
        position: relative;
        margin-bottom: 20px;
    }

    .recent-card .card-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .new-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        background: #FF7073;
        color: #FFFFFF;
        padding: 6px 20px;
        border-radius: 50px;
        font-size: 13px;
        font-weight: 700;
    }

    .cart-btn-outline {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        border: 2px solid #F6D6D6;
        background: transparent;
        color: var(--primary);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        cursor: pointer;
        transition: 0.2s;
    }

    .cart-btn-outline:hover {
        background: var(--primary);
        color: #FFFFFF;
        border-color: var(--primary);
    }

    @media (max-width: 768px) {
        .recently-track {
            gap: 16px;
        }

        .recent-card {
            width: 240px;
            flex: 0 0 240px;
            padding: 12px;
        }

        .recent-card .card-img-wrapper {
            height: 280px;
        }
    }

    /* ==========================================================
   Start With Books Section & Most Listened Section
   ========================================================== */
    .start-with-section,
    .most-listened-section {
        padding: 60px 20px;
        background-color: var(--bg-color);
        max-width: 1300px;
        margin: 0 auto;
    }

    .most-listened-badge {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 16px;
        /* slightly adjust for icon space */
    }

    /* ==========================================================
   Latest Releases 2026 Section
   ========================================================== */
    .latest-releases-section {
        padding: 60px 20px;
        background-color: var(--bg-color);
        max-width: 1300px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }

    .sec-three {
        background-color: #FFFCF4;
    }

    .slider-top-controls {
        display: flex;
        gap: 12px;
    }

    .top-nav-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: #FFFFFF;
        color: #38244C;
        border: none;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: 16px;
        transition: 0.2s;
    }

    .top-nav-btn:hover {
        background-color: var(--primary);
        color: #FFFFFF;
    }

    /* ==========================================================
   Testimonials Section
   ========================================================== */
    .testimonials-section {
        padding: 80px 20px;
        background-color: #FFFDF9;
        /* Slightly cream matching the background */
        text-align: center;
        position: relative;
        overflow: hidden;
        max-width: 1300px;
        margin: 0 auto;
    }

    .testimonials-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0.7;
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg stroke='%23E3D5BE' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10,190 Q100,100 190,10'/%3E%3Cpath d='M50,150 Q10,120 40,80 Q90,110 50,150'/%3E%3Cpath d='M90,110 Q50,70 90,30 Q140,70 90,110'/%3E%3Cpath d='M130,70 Q110,20 160,10 Q180,60 130,70'/%3E%3Cpath d='M80,160 Q130,170 160,130 Q110,110 80,160'/%3E%3Cpath d='M120,120 Q180,130 190,90 Q150,70 120,120'/%3E%3C/g%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg transform='translate(200,0) scale(-1,1)' stroke='%23E3D5BE' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10,190 Q100,100 190,10'/%3E%3Cpath d='M50,150 Q10,120 40,80 Q90,110 50,150'/%3E%3Cpath d='M90,110 Q50,70 90,30 Q140,70 90,110'/%3E%3Cpath d='M130,70 Q110,20 160,10 Q180,60 130,70'/%3E%3Cpath d='M80,160 Q130,170 160,130 Q110,110 80,160'/%3E%3Cpath d='M120,120 Q180,130 190,90 Q150,70 120,120'/%3E%3C/g%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg transform='translate(0,200) scale(1,-1)' stroke='%23E3D5BE' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10,190 Q100,100 190,10'/%3E%3Cpath d='M50,150 Q10,120 40,80 Q90,110 50,150'/%3E%3Cpath d='M90,110 Q50,70 90,30 Q140,70 90,110'/%3E%3Cpath d='M130,70 Q110,20 160,10 Q180,60 130,70'/%3E%3Cpath d='M80,160 Q130,170 160,130 Q110,110 80,160'/%3E%3Cpath d='M120,120 Q180,130 190,90 Q150,70 120,120'/%3E%3C/g%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg transform='translate(200,200) scale(-1,-1)' stroke='%23E3D5BE' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10,190 Q100,100 190,10'/%3E%3Cpath d='M50,150 Q10,120 40,80 Q90,110 50,150'/%3E%3Cpath d='M90,110 Q50,70 90,30 Q140,70 90,110'/%3E%3Cpath d='M130,70 Q110,20 160,10 Q180,60 130,70'/%3E%3Cpath d='M80,160 Q130,170 160,130 Q110,110 80,160'/%3E%3Cpath d='M120,120 Q180,130 190,90 Q150,70 120,120'/%3E%3C/g%3E%3C/svg%3E");
        background-position: left -30px top -30px, right -30px top -30px, left -30px bottom -30px, right -30px bottom -30px;
        background-repeat: no-repeat;
        background-size: 120px;
    }

    .testimonials-header {
        margin-bottom: 50px;
    }

    .testimonials-title {
        font-size: 38px;
        font-weight: 800;
        color: #FF7073;
        display: inline-block;
        position: relative;
        padding-bottom: 12px;
    }

    .testimonials-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 7px;
        background-color: #FF7073;
        border-radius: 10px;
    }

    .testimonials-track-container {
        max-width: 1400px;
        margin: 0 auto;
        position: relative;
    }

    .testimonials-track {
        display: flex;
        gap: 24px;
        overflow-x: auto;
        padding-bottom: 24px;
        padding-top: 20px;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }

    .testimonials-track::-webkit-scrollbar {
        display: none;
    }

    /* .testimonial-card {
    background: #FDF4E5;
    border-radius: 24px;
    padding: 30px;
    padding-bottom: 20px;
    width: 380px;
    flex: 0 0 380px;
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
} */
    .testimonial-card {
        width: 380px;
        min-height: 450px;
        position: relative;
        z-index: 1;
        background: transparent;
        padding: 30px;
        display: flex;
        flex-direction: column;
    }

    .testimonial-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #FDF4E5;
        /* لون الكارد الداخلي */
        border-radius: 24px;

        /* إضافة البوردر هنا */
        border: 8px solid #FFFDF9;
        box-sizing: border-box;

        z-index: -1;

        border-bottom-right-radius: 24px;
        border-bottom-left-radius: 130px;
    }

    .testimonial-card .stars {
        color: #FFC107;
        font-size: 32px;
        margin-bottom: 24px;
        display: flex;
        gap: 6px;
        justify-content: flex-start;
    }

    .testimonial-card .review-text {
        font-size: 16px;
        line-height: 1.8;
        color: #586782;
        margin-bottom: 40px;
        font-weight: 600;
        flex: 1;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .author-info {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        flex-direction: row;
        width: 100%;
        position: relative;
        height: auto;
        min-height: 60px;
        /* Reserve space for the bottom-left avatar so long names never slide under it */
        padding-left: 100px;
    }

    .author-name {
        font-size: 26px;
        font-weight: 900;
        margin-right: 0;
        margin-left: auto;
        color: #38244C;
        font-family: 'Palestine', 'Cairo', sans-serif;
        margin-bottom: 15px;
        max-width: 230px;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* .author-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    bottom: -31px;
    right: -37px;
    border: 8px solid #FFFDF9;
    box-sizing: content-box;
} */
    .author-avatar {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        position: absolute;
        bottom: -20px;
        right: auto;
        left: -20px;
        border: 8px solid #FFFDF9;
        z-index: 99;
        /* عشان تظهر فوق القصة */
        object-fit: cover;
    }

    .testimonials-controls {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 20px;
    }

    .ts-circle-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #EFE4D9;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        color: #222222;
        font-size: 14px;
        transition: 0.2s;
    }

    .ts-circle-btn:hover {
        background: #FF7073;
        color: #fff;
    }

    @media (max-width: 768px) {
        .testimonial-card {
            width: 300px;
            flex: 0 0 300px;
            padding: 20px;
        }

        .testimonials-title {
            font-size: 30px;
        }

        .testimonial-card .stars {
            font-size: 22px;
            margin: 14px 7px;
        }

        .testimonials-header {
            margin-bottom: 0px;
        }
    }

    @media (max-width: 550px) {
        .testimonial-card {
            width: 100%;
            flex: 0 0 100%;
            padding: 20px;
        }

        .testimonials-controls {
            display: none;
        }

        .testimonials-track {
            gap: 0;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
        }

        .testimonial-card {
            scroll-snap-align: start;
        }
    }

    /* ==========================================================
   CTA Publishing Section
   ========================================================== */
    .cta-publishing-section {
        padding: 60px 0px;
        background-color: var(--bg-color);
        /* matches page background */
        display: flex;
        justify-content: center;
        max-width: 1300px;
        margin: 0 auto;
    }

    .cta-publishing-container {
        width: 100%;
        max-width: 1300px;
        background-color: #FFFFFF;
        border: 2px solid #EBE4FF;
        border-radius: 16px;
        padding: 60px 0px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .cta-publishing-content {
        position: relative;
        z-index: 2;
        max-width: 960px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cta-publishing-title {
        font-size: 40px;
        font-weight: 900;
        color: #38244C;
        margin-bottom: 16px;
        font-family: 'Palestine', 'Cairo', sans-serif;
    }

    .cta-publishing-subtitle {
        font-size: 16px;
        color: #62678E;
        margin-bottom: 32px;
        line-height: 1.6;
    }

    .cta-publishing-btn {
        background-color: #FF7073;
        color: #FFFFFF;
        font-size: 20px;
        font-weight: 800;
        padding: 16px 50px;
        border-radius: 12px;
        border: 2px solid #222222;
        box-shadow: 4px 4px 0px #222222;
        cursor: pointer;
        transition: transform 0.1s, box-shadow 0.1s;
        font-family: inherit;
        margin-bottom: 24px;
    }

    .cta-publishing-btn:active {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0px #222222;
    }

    .cta-publishing-footer {
        font-size: 11px;
        color: #62678E;
    }

    /* CTA Plan Cards */
    .cta-publishing-plans {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        width: 100%;
        margin-bottom: 24px;
        align-items: stretch;
    }

    .cta-plan-card {
        background: #FFFFFF;
        border: 2px solid #EBE4FF;
        border-radius: 16px;
        padding: 48px 32px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        height: 100%;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .cta-plan-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(56, 36, 76, 0.1);
    }

    .cta-plan-name {
        font-size: 20px;
        font-weight: 800;
        color: #38244C;
        font-family: 'Palestine', 'Cairo', sans-serif;
    }

    .cta-plan-audience {
        display: inline-block;
        background-color: #FDF1B6;
        color: #38244C;
        font-size: 12px;
        font-weight: 700;
        padding: 4px 12px;
        border-radius: 20px;
        text-transform: capitalize;
    }

    .cta-plan-description {
        font-size: 14px;
        color: #62678E;
        line-height: 1.5;
    }

    .cta-plan-price {
        font-size: 24px;
        font-weight: 900;
        color: #FF7073;
    }

    .cta-plan-duration {
        font-size: 13px;
        color: #8E8EA0;
    }

    .cta-plan-btn {
        display: inline-block;
        background-color: #38244C;
        color: #FFFFFF;
        font-size: 16px;
        font-weight: 700;
        padding: 12px 32px;
        border-radius: 12px;
        border: 2px solid #222222;
        box-shadow: 4px 4px 0px #222222;
        text-decoration: none;
        transition: transform 0.1s, box-shadow 0.1s;
        margin-top: auto;
    }

    .cta-plan-btn:hover {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0px #222222;
        color: #FFFFFF;
    }

    /* Decorative Shapes */
    .cta-publishing-container .shape {
        position: absolute;
        border-radius: 8px;
        z-index: 1;
    }

    .cta-publishing-container .shape-1 {
        width: 50px;
        height: 60px;
        background-color: #E2E4E9;
        top: 50px;
        left: 100px;
        transform: rotate(-15deg);
    }

    [dir="ltr"] .cta-publishing-container .shape-1 {
        left: auto;
        right: 100px;
    }

    .cta-publishing-container .shape-2 {
        width: 45px;
        height: 55px;
        background-color: #FFE6D2;
        bottom: 50px;
        left: 200px;
        transform: rotate(15deg);
    }

    [dir="ltr"] .cta-publishing-container .shape-2 {
        left: auto;
        right: 200px;
    }

    .cta-publishing-container .shape-3 {
        width: 55px;
        height: 65px;
        background-color: #FDF1B6;
        top: 60px;
        right: 120px;
        transform: rotate(20deg);
    }

    [dir="ltr"] .cta-publishing-container .shape-3 {
        right: auto;
        left: 120px;
    }

    .cta-publishing-container .shape-4 {
        width: 45px;
        height: 55px;
        background-color: #FDF1B6;
        bottom: 50px;
        right: 250px;
        transform: rotate(-10deg);
    }

    [dir="ltr"] .cta-publishing-container .shape-4 {
        right: auto;
        left: 250px;
    }

    @media (max-width: 1024px) {
        .cta-publishing-plans {
            grid-template-columns: repeat(1, 1fr);
            gap: 16px;
        }
    }

    @media (max-width: 768px) {
        .cta-publishing-container {
            padding: 40px 20px;
        }

        .cta-publishing-title {
            font-size: 28px;
        }

        .cta-publishing-subtitle {
            font-size: 14px;
        }

        .cta-publishing-btn {
            font-size: 16px;
            padding: 12px 32px;
        }

        .cta-publishing-plans {
            grid-template-columns: 1fr;
        }

        .cta-plan-card {
            padding: 24px 16px;
        }

        .cta-plan-name {
            font-size: 18px;
        }

        .cta-plan-price {
            font-size: 20px;
        }

        .cta-publishing-container .shape {
            opacity: 0.5;
        }

        .cta-publishing-container .shape-1 {
            top: 10px;
            left: -10px;
            transform: scale(0.6) rotate(-15deg);
        }

        .cta-publishing-container .shape-2 {
            bottom: 10px;
            left: 5px;
            transform: scale(0.6) rotate(15deg);
        }

        .cta-publishing-container .shape-3 {
            top: 15px;
            right: -10px;
            transform: scale(0.6) rotate(20deg);
        }

        .cta-publishing-container .shape-4 {
            bottom: 15px;
            right: 5px;
            transform: scale(0.6) rotate(-10deg);
        }
    }

    /* ==========================================================
   Footer Section
   ========================================================== */
    .site-footer {
        background-color: var(--text-dark);
        /* #38244C */
        color: #FFFFFF;
        padding: 60px 40px 30px;
        font-family: 'Cairo', sans-serif;
    }

    .footer-top {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 40px;
        margin-bottom: 40px;
    }

    .footer-desc {
        flex: 2;
        min-width: 300px;
    }

    .footer-desc p {
        font-size: 22px;
        font-weight: 700;
        line-height: 1.8;
        color: #F8F9FA;
        font-family: 'Palestine', 'Cairo', sans-serif;
    }

    .footer-app {
        flex: 1;
        min-width: 200px;
    }

    .footer-title {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 24px;
        color: #FFFFFF;
    }

    .app-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        background: transparent;
        color: #FFFFFF;
        padding: 8px 16px;
        border-radius: 50px;
        margin-bottom: 12px;
        text-decoration: none;
        font-size: 14px;
        transition: 0.3s;
        width: fit-content;
        min-width: 140px;
    }

    .app-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: #FFFFFF;
    }

    .app-btn i {
        font-size: 18px;
    }

    .footer-links-group {
        flex: 1;
        min-width: 120px;
    }

    .footer-links-group ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer-links-group ul li {
        margin-bottom: 16px;
    }

    .footer-links-group ul li a {
        color: #D1D5DB;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: color 0.2s;
    }

    .footer-links-group ul li a:hover {
        color: var(--primary);
    }

    .footer-middle {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 24px 0;
        display: flex;
        justify-content: flex-start;
        /* Push to the right in RTL */
    }

    [dir="ltr"] .footer-middle {
        justify-content: flex-end;
    }

    /* ── Flip slider/carousel chevron arrows for LTR ── */
    [dir="ltr"] .cat-control-btn i,
    [dir="ltr"] .ts-circle-btn i,
    [dir="ltr"] .circle-btn-white i,
    [dir="ltr"] .top-nav-btn i,
    [dir="ltr"] .categories-controls i,
    [dir="ltr"] .testimonials-controls i,
    [dir="ltr"] .section-controls i,
    [dir="ltr"] .slider-top-controls i,
    [dir="ltr"] .nav-arrows i {
        transform: scaleX(-1);
    }

    .social-icons {
        display: flex;
        gap: 12px;
    }

    .social-icons a {
        width: 36px;
        height: 36px;
        background-color: #FDF4E5;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--text-dark);
        text-decoration: none;
        transition: 0.3s transform;
    }

    .social-icons a:hover {
        transform: translateY(-3px);
        background-color: var(--primary);
        color: #FFF;
    }

    .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .footer-logo {
        display: flex;
        align-items: center;
    }

    .logo-box {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .logo-box img {
        height: 44px;
        width: auto;
        object-fit: contain;
    }

    .footer-bottom-links {
        display: flex;
        gap: 24px;
    }

    .footer-bottom-links a {
        color: #D1D5DB;
        text-decoration: none;
        font-size: 14px;
        transition: 0.2s;
    }

    .footer-bottom-links a:hover {
        color: #FFF;
    }

    .copyright {
        font-size: 13px;
        color: #9CA3AF;
    }

    @media (max-width: 992px) {
        .site-footer {
            padding: 40px 20px 20px;
        }

        .footer-top {
            flex-direction: column;
            gap: 30px;
        }

        .footer-desc {
            min-width: 100%;
            margin-bottom: 10px;
            text-align: center;
        }

        .footer-desc p {
            font-size: 18px;
            text-align: center;
        }

        .footer-title {
            font-size: 15px;
            margin-bottom: 16px;
            text-align: center;
        }

        .footer-links-group {
            text-align: center;
        }

        .footer-app {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .footer-links-group ul li a,
        .footer-bottom-links a {
            font-size: 13px;
        }

        .footer-middle {
            justify-content: center;
            padding: 16px 0;
        }

        .footer-bottom {
            flex-direction: column;
            justify-content: center;
            text-align: center;
            gap: 16px;
            padding-top: 16px;
        }

        .footer-bottom-links {
            gap: 16px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .copyright {
            font-size: 12px;
        }
    }

    /* ==========================================================
   Category Page Section (section.html)
   ========================================================== */
    .category-layout {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 40px;
        align-items: start;
    }

    .category-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
        transition: opacity 0.3s ease;
    }

    /* Category Grid Card Overrides */
    .cat-card {
        background: #FFFFFF;
        border-radius: 16px;
        padding: 12px;
        border: 2px solid transparent;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.04);
        width: 100%;
        /* Override fixed width from .store-card */
        box-sizing: border-box;
    }

    .cat-card:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .cat-card .card-img-wrapper {
        margin-bottom: 12px;
        border-radius: 12px;
        overflow: hidden;
        position: relative;
        aspect-ratio: 5 / 7;
        flex-shrink: 0;
    }

    .cat-card .card-img-wrapper img {
        width: 100%;
        height: 100%;
        aspect-ratio: 5 / 7;
        object-fit: cover;
        border-radius: 12px;
    }

    .cat-card .img-rating-badge {
        position: absolute;
        bottom: 8px;
        left: 8px;
        background: #38244C;
        color: white;
        padding: 4px 8px;
        border-radius: 8px;
        font-size: 11px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 4px;
        z-index: 5;
    }

    .cat-card .img-rating-badge i {
        color: #FFC107;
    }

    .cat-card .custom-info {
        padding: 0 4px;
    }

    .cat-card .title-price-row {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
    }

    .cat-card .card-title {
        font-size: 20px;
        font-weight: 800;
        color: #38244C;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        width: stretch;
    }

    .cat-card .card-price {
        font-size: 15px;
        font-weight: 800;
        color: #FF7073;
    }

    .cat-card .card-author {
        font-size: 13px;
        color: #999;
        margin: 0 0 12px 0;
    }

    .cat-card .custom-actions {
        display: flex;
        flex-direction: row-reverse;
        gap: 8px;
        border: none;
        padding: 0 4px;
    }

    .cat-card .cart-btn-outline {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: 1px solid #FF7073;
        background: white;
        color: #FF7073;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: 14px;
        flex-shrink: 0;
    }

    .cat-card .buy-btn-solid {
        flex: 1;
        height: 40px;
        border-radius: 12px;
        background: #FF7073;
        color: white;
        border: none;
        font-weight: 700;
        font-family: 'Cairo', sans-serif;
        cursor: pointer;
        margin-bottom: 10px;
    }

    .publishing-main-card {
        height: auto;
        min-height: 500px;
    }

    /* Custom Range Slider */
    .custom-range-slider {
        -webkit-appearance: none;
        width: 100%;
        height: 4px;
        background: #FF7073;
        border-radius: 2px;
        outline: none;
        margin: 10px 0;
    }

    .custom-range-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
        border: 3px solid #FF7073;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

    .custom-range-slider::-moz-range-thumb {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
        border: 3px solid #FF7073;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

    /* Custom Radio & Checkbox (Unified design) */
    .custom-radio,
    .custom-checkbox {
        display: flex;
        align-items: center;
        position: relative;
        padding-right: 28px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        color: #38244C;
        user-select: none;
        font-family: 'Cairo', sans-serif;
        width: 100%;
    }

    .custom-radio .radio-text,
    .custom-checkbox .check-text {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .custom-radio input,
    .custom-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .radio-mark,
    .check-mark {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        height: 18px;
        width: 18px;
        background-color: #fff;
        border: 2px solid #EAEAEA;
        border-radius: 50%;
        /* Match Figma circles perfectly */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .custom-radio:hover input~.radio-mark,
    .custom-checkbox:hover input~.check-mark {
        border-color: #FF7073;
    }

    .custom-radio input:checked~.radio-mark,
    .custom-checkbox input:checked~.check-mark {
        background-color: #FF7073;
        border-color: #FF7073;
    }

    .radio-mark:after,
    .check-mark:after {
        content: "✓";
        position: absolute;
        display: none;
        color: white;
        font-size: 10px;
        font-family: sans-serif;
    }

    .custom-radio input:checked~.radio-mark:after,
    .custom-checkbox input:checked~.check-mark:after {
        display: block;
    }

    /* Pagination Buttons Hover */
    .pag-btn:hover:not(.active):not(.pag-dots) {
        background-color: #FFEFF0 !important;
        color: var(--primary) !important;
    }

    @media (max-width: 992px) {
        .category-layout {
            grid-template-columns: 1fr;
        }

        .category-sidebar {
            width: 100%;
            margin-bottom: 24px;
            display: block !important;
            /* Force it to show naturally inline */
        }


    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 480px) {
        .app-btn {
            width: 100%;
            max-width: 250px;
        }

        .cat-card .buy-btn-solid {
            font-size: 10px;
        }
    }


    .btn-do {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
        font-family: 'Cairo', sans-serif;
        background-color: #FF7073;
        color: white;
        border: none;
        cursor: pointer;
        margin-top: 16px;
        transition: background 0.3s ease;
        box-shadow: none !important;
        /* Ensure no shadow is inherited */
        box-sizing: border-box;
    }

    .btn-do:hover {
        background-color: #E66567;
    }

    /* ==========================================================
   Author Profile Section
   ========================================================== */
    .author-profile-section {
        max-width: 1000px;
        margin: 40px auto;
        padding: 0 20px;
    }

    .author-card-container {
        background-color: #FFFFFF;
        border-radius: 20px;
        padding: 40px;
        display: flex;
        align-items: center;
        gap: 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }

    .author-image {
        flex-shrink: 0;
    }

    .author-image img {
        width: 250px;
        height: 250px;
        border-radius: 50%;
        object-fit: cover;
    }

    .author-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: right;
        flex-grow: 1;
    }

    .author-badge {
        background-color: #F8F3E9;
        color: var(--text-dark);
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 24px;
    }

    .author-name {
        font-family: 'Palestine', 'Cairo', sans-serif;
        font-size: 30px;
        color: #38244C;
        margin-bottom: 16px;
        font-weight: 800;
    }

    .author-bio {
        color: var(--text-dark);
        font-size: 15px;
        line-height: 1.8;
        margin-bottom: 24px;
        max-width: 650px;
    }

    .author-stats {
        display: flex;
        justify-content: flex-start;
        gap: 16px;
        margin-bottom: 30px;
        width: 100%;
    }

    .stat-item {
        background-color: #F5EEDC;
        border-radius: 12px;
        padding: 12px 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        min-width: 120px;
    }

    .stat-item .stat-title {
        font-size: 13px;
        color: var(--text-dark);
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .stat-item .stat-value {
        font-size: 14px;
        color: var(--primary);
        font-weight: 700;
    }

    .stat-item .red-icon {
        color: var(--primary);
    }

    .stat-item .yellow-icon {
        color: #FFC107;
    }

    .stat-item .blue-icon {
        color: #4A90E2;
    }

    .author-actions {
        display: flex;
        gap: 16px;
        justify-content: flex-start;
        width: 100%;
    }

    .btn-author-follow {
        background-color: var(--primary);
        color: #FFFFFF;
        border: none;
        padding: 12px 28px;
        border-radius: 24px;
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: 0.2s;
        font-family: inherit;
    }

    .btn-author-follow:hover {
        background-color: var(--primary-dark);
        transform: translateY(-2px);
    }

    .btn-author-more {
        background-color: #FFFFFF;
        color: var(--text-dark);
        border: 1px solid var(--text-dark);
        padding: 12px 28px;
        border-radius: 24px;
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        transition: 0.2s;
        font-family: inherit;
    }

    .btn-author-more:hover {
        background-color: var(--text-dark);
        color: #FFFFFF;
        transform: translateY(-2px);
    }

    .sp-none-one {
        display: none;
    }

    @media (max-width: 768px) {
        .author-card-container {
            flex-direction: column;
            padding: 24px;
            align-items: center;
        }

        .author-two {
            flex-direction: column-reverse !important;
        }

        .author-info {
            /* display: contents; */
            /* Allows children to be flex items of container */
        }

        .author-badge {
            order: 1;
            margin-bottom: 24px;
        }

        .sp-none-one {
            display: block !important;
            width: fit-content;
        }

        .sp-none-two {
            display: none !important;
        }

        .auth-two {
            display: flex;
            flex-direction: column-reverse;
            justify-content: center;
            align-items: center;
        }

        .author-name-two {
            margin: -20px auto 0px auto !important;
        }

        .author-bio-two {
            text-align: center;
            margin: 15px auto;
        }

        .author-image {
            order: 2;
            margin-bottom: 8px;
        }

        .author-image img {
            width: 180px;
            height: 180px;
            border: 4px solid #FFFFFF;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
        }

        .author-name {
            order: 3;
            font-size: 30px;
            text-align: center;
        }

        .author-bio {
            order: 4;
            text-align: center;
        }

        .author-stats {
            order: 5;
            flex-wrap: nowrap;
            justify-content: center;
            gap: 8px;
            width: 100%;
        }

        .stat-item {
            min-width: 0;
            padding: 10px 8px;
            flex: 1;
        }

        .stat-item .stat-title {
            font-size: 11px;
        }

        .stat-item .stat-value {
            font-size: 13px;
        }

        .author-actions {
            order: 6;
            flex-direction: column;
            width: 100%;
            gap: 16px;
        }

        .btn-author-follow,
        .btn-author-more {
            width: 100%;
            justify-content: center;
        }

        .author-profile-section-two {
            margin-top: -10px;
            margin-bottom: 0;
        }

        .sec-three {
            margin-top: 0px !important;
        }

        .auth-one {
            padding: 5px 0px 0px 0px !important;
        }
    }

    .author-profile-section-two {
        margin: 0 auto;

    }

    .auth-one {
        padding: 60px 20px 10px 20px;
    }

    /* ==========================================================
   Quotes Section
   ========================================================== */
    .quotes-section {
        background-color: #FFFFFF;
        width: 100%;
        padding: 60px 40px;
    }

    .quotes-section .section-header,
    .quotes-section .quotes-slider-wrapper {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }

    .quotes-slider-wrapper {
        width: 100%;
        overflow: hidden;
    }

    .quotes-track {
        display: flex;
        gap: 24px;
        overflow-x: auto;
        scroll-behavior: smooth;
        -ms-overflow-style: none;
        scrollbar-width: none;
        padding-bottom: 10px;
    }

    .quotes-track::-webkit-scrollbar {
        display: none;
    }

    .quote-card {
        flex: 0 0 calc(33.333% - 16px);
        background-color: #F8F3E9;
        border-radius: 12px;
        padding: 32px 24px 24px;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .quote-mark {
        position: absolute;
        top: -5px;
        right: 10px;
        font-size: 40px;
        font-weight: 800;
        color: #D4D0C6;
        opacity: 0.4;
        line-height: 1;
        font-family: "Palestine";
        user-select: none;
    }

    .quote-text {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.8;
        text-align: center;
        color: var(--text-dark);
        margin-top: 13px;
        margin-bottom: auto;
    }

    .quote-divider {
        border: none;
        border-top: 2px solid #EAEAEA;
        margin: 24px 0 16px 0;
        width: 100%;
    }

    .quote-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .quote-book-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .quote-book-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-dark);
    }

    .quote-book-img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .quote-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #D4D0C6;
        border: none;
        cursor: pointer;
        transition: 0.3s ease;
        padding: 0;
    }

    .quote-dot.active {
        background-color: var(--primary);
        width: 32px;
        border-radius: 12px;
    }

    @media (max-width: 992px) {
        .quote-card {
            flex: 0 0 calc(50% - 12px);
        }
    }

    @media (max-width: 768px) {
        .quote-card {
            flex: 0 0 100%;
        }

        .quotes-section {
            padding: 40px 20px;
            margin-top: 15px;
        }
    }

    /* ==========================================================
   Other Authors Section
   ========================================================== */
    .other-authors-section {
        max-width: 1400px;
        margin: 60px auto 100px;
        padding: 0 40px;
    }

    .authors-grid {
        display: flex;
        gap: 32px;
        margin-top: 40px;
        overflow-x: auto;
        padding-bottom: 24px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .authors-grid::-webkit-scrollbar {
        display: none;
    }

    .other-author-card {
        flex: 0 0 calc(20% - 26px);
        min-width: 180px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .other-author-img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 24px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .other-author-name {
        font-size: 16px;
        font-weight: 800;
        color: var(--text-dark);
        margin-bottom: 8px;
    }

    .other-author-role {
        font-size: 13px;
        color: var(--text-light);
        margin-bottom: 16px;
    }

    .other-author-link {
        font-size: 13px;
        font-weight: 700;
        color: var(--primary);
        text-decoration: none;
        transition: 0.2s;
    }

    .other-author-link:hover {
        color: var(--primary-dark);
    }

    @media (max-width: 1200px) {
        .authors-grid {
            flex-wrap: wrap;
            justify-content: center;
            gap: 24px;
            overflow-x: visible;
            /* Disable scroll */
            padding-bottom: 0;
        }

        .other-author-card {
            flex: 0 0 calc(25% - 24px);
            /* 4 per row */
            min-width: auto;
            margin-bottom: 24px;
        }
    }

    @media (max-width: 992px) {
        .authors-grid {
            gap: 20px;
        }

        .other-author-card {
            flex: 0 0 calc(33.333% - 20px);
            /* 3 per row */
        }

        .other-author-img {
            width: 130px;
            height: 130px;
        }
    }

    @media (max-width: 768px) {
        .other-authors-section {
            padding: 0 20px;
            margin-top: 15px;
            margin-bottom: 20px;
        }

        .authors-grid {
            gap: 16px;
        }

        .other-author-card {
            flex: 0 0 calc(50% - 16px);
            /* 2 per row */
        }

        .other-author-img {
            width: 110px;
            height: 110px;
            margin-bottom: 16px;
        }

        .other-author-name {
            font-size: 15px;
            margin-bottom: 0px;
        }

        .other-author-role {
            font-size: 12px;
            margin-bottom: 5px;
        }

        .latest-releases-section {
            margin-top: 20px !important;
            margin-bottom: -20px !important;

        }

        .sec-three {
            margin-top: 0px !important;
        }

        .white-page-wrapper {
            padding-bottom: 5px !important;
        }

        .pagination-wrapper {
            margin-top: 24px !important;
        }

        .category-page-section {
            margin-bottom: 20px !important;
            padding: 16px !important;
        }

        .category-header-wrapper {
            flex-direction: column;
            align-items: flex-start;
        }

        .category-header-actions {
            width: 100%;
        }

        .top-filter-btn,
        .top-sort-btn {
            flex: 1;
            justify-content: center;
            font-size: 13px;
            padding: 10px 16px;
        }

        /* ── Search Results: prevent filter pill overflow ── */
        .search-filters {
            overflow-x: auto;
            flex-wrap: nowrap !important;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding-bottom: 6px;
            justify-content: flex-start;
        }

        .search-filters::-webkit-scrollbar {
            display: none;
        }

        .filter-btn {
            flex-shrink: 0;
            white-space: nowrap;
        }
    }

    @media (max-width: 480px) {
        .other-author-card {
            flex: 0 0 calc(50% - 12px);
            /* Maintain 2 per row but tighter */
        }

        .authors-grid {
            gap: 12px;
        }

        .other-author-img {
            width: 90px;
            height: 90px;
            margin-bottom: 10px;
        }

        .other-author-name {
            font-size: 14px;
        }

        .other-author-link {
            font-size: 12px;
        }
    }

    /* ==========================================================
   Publishers Section (Publishing Houses Page)
   ========================================================== */
    @media (max-width: 768px) {
        .page-intro-section .hero-title {
            font-size: 50px !important;
            margin-bottom: 25px !important;
        }
    }

    .publishers-track {
        display: flex;
        gap: 24px;
        overflow-x: auto;
        padding: 20px 4px 40px 4px;
        scroll-behavior: smooth;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .publishers-track::-webkit-scrollbar {
        display: none;
    }

    /* ==========================================================
   Featured Publishers Slider
   ========================================================== */
    .featured-pub-card {
        min-width: 320px;
        flex: 0 0 280px;
        background-color: #FFFFFF;
        border-radius: 24px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        box-shadow: none;
        border: 1px solid #EFEFEF;
        transition: 0.3s;
    }

    .featured-pub-card:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        transform: translateY(-4px);
    }

    .featured-logo-wrapper {
        width: 100%;
        aspect-ratio: 1 / 1;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 16px;
        background: #FCFBF8;
        border-radius: 16px;
        overflow: hidden;
    }

    .featured-logo-wrapper img {
        border-radius: 0 !important;
    }

    .featured-logo {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .featured-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 16px;
        flex-grow: 1;
    }

    .featured-title-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .featured-name {
        font-size: 16px;
        font-weight: 800;
        color: #38244C;
        margin: 0;
    }

    .featured-loc {
        font-size: 12px;
        color: #6A778B;
        text-align: right;
        width: 100%;
    }

    .featured-count {
        font-size: 11px;
        font-weight: 700;
        color: var(--primary-light, #FF7073);
        background: #FFF0F0;
        padding: 4px 8px;
        border-radius: 40px;
        direction: ltr;
        white-space: nowrap;
    }

    .featured-btn {
        width: 100%;
        background-color: var(--primary-light, #FF7073);
        color: #FFFFFF;
        padding: 12px;
        border-radius: 12px;
        text-align: center;
        font-weight: 700;
        font-size: 15px;
        transition: 0.2s;
        border: none;
        cursor: pointer;
        margin-top: auto;
        box-shadow: 0 4px 12px rgba(255, 112, 115, 0.2);
    }

    .featured-btn:hover {
        background-color: var(--primary);
        box-shadow: 0 6px 16px rgba(255, 112, 115, 0.3);
    }

    /* ==========================================================
   Publishers Grid (All Publishers)
   ========================================================== */

    .publishers-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px;
    }

    .publishers-grid .store-card {
        width: 100%;
    }

    @media (max-width: 992px) {
        .publishers-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 24px;
        }

        .publishers-grid .publishing-main-card {
            height: auto;
            min-height: 460px;
        }
    }

    @media (max-width: 576px) {
        .publishers-grid {
            gap: 12px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .publishers-grid .publishing-main-card {
            width: 100% !important;
            height: auto !important;
            min-height: 360px;
        }

        .pg-num-none {
            display: none !important;
        }

        .grid-pub-card {
            padding: 11px !important;
        }

        .cat-card .card-title {
            font-size: 14px;
        }

        .cat-card .card-price {
            font-size: 12px;
        }

        .cat-card .card-author {
            font-size: 11px;
            margin-bottom: 8px;
        }

        .cat-card .cart-btn-outline {
            width: 32px;
            height: 32px;
            font-size: 12px;
        }

        .cat-card .buy-btn-solid {
            font-size: 12px;
            height: 32px;
        }
    }

    @media (max-width: 300px) {
        .publishers-grid {
            grid-template-columns: minmax(0, 1fr);
            gap: 12px;
        }

        .publishers-grid .publishing-main-card {
            min-height: 320px;
        }

        .search-section {
            padding: 20px 8px 16px 8px !important;
        }

        .search-title {
            font-size: 22px;
        }

        .search-subtitle {
            font-size: 13px;
            margin-bottom: 16px;
        }

        .search-bar-container {
            border-radius: 30px;
            padding: 4px;
            margin-bottom: 20px;
        }

        .search-input {
            padding: 10px 12px;
            font-size: 12px;
        }

        .search-submit-btn {
            padding: 8px 14px;
            font-size: 12px;
            border-radius: 30px;
        }

        .filter-btn {
            font-size: 11px;
            padding: 6px 12px;
        }

        .search-tags {
            gap: 8px;
        }

        .tags-label {
            font-size: 11px;
        }

        .tag-badge {
            font-size: 11px;
            padding: 4px 10px;
        }

        .cat-card .card-title {
            font-size: 13px;
        }

        .cat-card .card-price {
            font-size: 11px;
        }

        .cat-card .card-author {
            font-size: 10px;
        }

        .cat-card .cart-btn-outline {
            width: 28px;
            height: 28px;
            font-size: 10px;
        }

        .cat-card .buy-btn-solid {
            font-size: 11px;
            height: 28px;
        }
    }

    /* ==========================================================
       Book Cards 5-per-row (KOT-122) — internal listing pages
       ========================================================== */
    .publishers-grid.books-grid-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 20px;
    }

    .publishers-grid.books-grid-5 .store-card {
        width: 100%;
    }

    .publishers-grid.books-grid-5 .cat-card,
    .publishers-grid.books-grid-5 .store-card {
        padding: 10px;
        border-radius: 12px;
    }

    .publishers-grid.books-grid-5 .card-img-wrapper {
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .publishers-grid.books-grid-5 .card-title {
        font-size: 15px;
    }

    .publishers-grid.books-grid-5 .card-price {
        font-size: 13px;
    }

    .publishers-grid.books-grid-5 .card-author {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .publishers-grid.books-grid-5 .card-info {
        margin-bottom: 10px;
    }

    .publishers-grid.books-grid-5 .publishing-main-card {
        height: auto;
        min-height: 400px;
    }

    /* Equal-height cards: the grid stretches the <a> wrapper; make the card fill it */
    .publishers-grid.books-grid-5 > a {
        display: flex;
    }

    .publishers-grid.books-grid-5 > a > .store-card {
        flex: 1 1 0%;
    }

    .publishers-grid.books-grid-5 .card-actions {
        margin-top: auto;
    }

    .publishers-grid.books-grid-5 .buy-btn-solid,
    .publishers-grid.books-grid-5 .cart-btn-outline,
    .publishers-grid.books-grid-5 .buy-btn {
        height: 34px;
        border-radius: 8px;
        font-size: 13px;
    }

    @media (max-width: 1199px) {
        .publishers-grid.books-grid-5 {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 18px;
        }
    }

    @media (max-width: 992px) {
        .publishers-grid.books-grid-5 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;
        }

        .publishers-grid.books-grid-5 .publishing-main-card {
            min-height: 380px;
        }
    }

    @media (max-width: 767px) {
        .publishers-grid.books-grid-5 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        .publishers-grid.books-grid-5 .publishing-main-card {
            min-height: 360px;
        }
    }

    @media (max-width: 576px) {
        .publishers-grid.books-grid-5 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
    }

    @media (max-width: 300px) {
        .publishers-grid.books-grid-5 {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .grid-pub-card {
        background-color: #FFFFFF;
        border-radius: 24px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        box-shadow: none;
        border: 1px solid #EFEFEF;
        transition: 0.3s;
    }

    .grid-pub-card:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        transform: translateY(-4px);
    }

    .grid-pub-logo-wrapper {
        width: 100%;
        aspect-ratio: 1 / 1;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 16px;
        background: #FCFBF8;
        border-radius: 16px;
        overflow: hidden;
    }

    .grid-pub-logo-wrapper img {
        border-radius: 0 !important;
    }

    .grid-pub-logo {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .grid-pub-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 16px;
        flex-grow: 1;
    }

    .grid-pub-title-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .grid-pub-name {
        font-size: 16px;
        font-weight: 800;
        color: #38244C;
        margin: 0;
    }

    .grid-pub-book-count {
        font-size: 11px;
        font-weight: 700;
        color: var(--primary-light, #FF7073);
        background: #FFF0F0;
        padding: 4px 8px;
        border-radius: 40px;
        direction: ltr;
        white-space: nowrap;
    }

    .grid-pub-loc {
        font-size: 12px;
        color: #6A778B;
        text-align: right;
        width: 100%;
    }

    .grid-pub-btn {
        width: 100%;
        background-color: var(--primary-light, #FF7073);
        color: #FFFFFF;
        padding: 12px;
        border-radius: 12px;
        text-align: center;
        font-weight: 700;
        font-size: 15px;
        transition: 0.2s;
        border: none;
        cursor: pointer;
        margin-top: auto;
        box-shadow: 0 4px 12px rgba(255, 112, 115, 0.2);
    }

    .grid-pub-btn:hover {
        background-color: var(--primary);
        box-shadow: 0 6px 16px rgba(255, 112, 115, 0.3);
    }

    /* Publishers Responsive */
    @media (max-width: 768px) {
        .publishers-track {
            justify-content: flex-start;
            padding: 0 20px;
            gap: 16px;
        }

        .featured-pub-card {
            flex: 0 0 150px;
            padding: 8px;
            min-width: 142px;
        }

        .featured-logo-wrapper {
            aspect-ratio: 1 / 1;
        }

        .featured-loc,
        .grid-pub-loc {
            font-size: 11px !important;
        }

        .featured-name,
        .grid-pub-name {
            font-size: 12px !important;
        }

        .featured-btn,
        .grid-pub-btn {
            padding: 9px !important;
            font-size: 13px !important;
        }
    }

    /* ==========================================================
   Publisher Books Content Area
   ========================================================== */
    .pub-books-layout {
        display: block;
        width: 100%;
    }

    .pub-books-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 24px;
    }

    .pub-book-card {
        background: #FFFFFF;
        border-radius: 16px;
        padding: 12px;
        border: 2px solid transparent;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.04);
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        transition: 0.3s;
    }

    .pub-book-card:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .pub-book-card .card-img-wrapper {
        margin-bottom: 12px;
        border-radius: 12px;
        overflow: hidden;
        position: relative;
        width: 100%;
        aspect-ratio: 5 / 7;
    }

    .pub-book-card .card-img-wrapper img {
        width: 100%;
        height: auto;
        aspect-ratio: 5 / 7;
        object-fit: cover;
        border-radius: 12px;
    }

    .pub-book-card .img-rating-badge {
        position: absolute;
        bottom: 8px;
        left: 8px;
        background: #38244C;
        color: white;
        padding: 4px 8px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 700;
    }

    .pub-book-card .audio-badge,
    .pub-book-card .hot-badge,
    .pub-book-card .new-badge {
        position: absolute;
        color: white;
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: bold;
    }

    .pub-book-card .audio-badge {
        top: 8px;
        right: 8px;
    }

    .pub-book-card .hot-badge,
    .pub-book-card .new-badge {
        top: 8px;
        left: 8px;
        right: auto;
    }

    .pub-book-card .card-actions {
        margin-top: auto;
    }

    /* ==========================================================
   Newsletter Section
   ========================================================== */
    .newsletter-section {
        max-width: 1300px;
        margin: 60px auto 0px;
        padding: 0 40px;
    }

    .newsletter-banner {
        background-color: #F8F4EC;
        border-radius: 32px;
        padding: 60px 20px;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .newsletter-banner .floating-shape {
        position: absolute;
        width: 60px;
        height: 60px;
        border-radius: 12px;
    }

    .newsletter-banner .shape-1 {
        background-color: #E6E8EB;
        top: 20%;
        left: 10%;
        transform: rotate(-15deg);
    }

    .newsletter-banner .shape-2 {
        background-color: #BEB7B6;
        bottom: 20%;
        left: 15%;
        transform: rotate(15deg);
        width: 40px;
        height: 40px;
    }

    .newsletter-banner .shape-3 {
        background-color: #F8EDCB;
        top: 15%;
        right: 15%;
        transform: rotate(20deg);
    }

    .newsletter-banner .shape-4 {
        background-color: #F8EDCB;
        bottom: 15%;
        right: 25%;
        transform: rotate(-10deg);
        width: 45px;
        height: 45px;
    }

    .nl-title {
        font-size: 28px;
        font-weight: 800;
        color: #38244C;
        margin-bottom: 12px;
        font-family: 'Changa', sans-serif;
        z-index: 1;
    }

    .nl-subtitle {
        font-size: 16px;
        color: #6A778B;
        margin-bottom: 32px;
        max-width: 600px;
        z-index: 1;
    }

    .nl-form {
        display: flex;
        gap: 12px;
        width: 100%;
        max-width: 500px;
        z-index: 1;
    }

    .nl-input {
        flex-grow: 1;
        background-color: #FFFFFF;
        border: none;
        border-radius: 12px;
        padding: 16px 20px;
        font-family: inherit;
        font-size: 15px;
        outline: none;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    }

    .nl-input::placeholder {
        color: #A9B2C2;
    }

    .nl-btn {
        background-color: #FF7073;
        color: #FFFFFF;
        border: none;
        border-radius: 12px;
        padding: 0 32px;
        font-size: 16px;
        font-weight: 700;
        font-family: inherit;
        cursor: pointer;
        transition: 0.3s;
        box-shadow: 0 4px 15px rgba(255, 112, 115, 0.2);
    }

    .nl-btn:hover {
        background-color: #E65A5D;
        transform: translateY(-2px);
    }

    @media (max-width: 576px) {
        .newsletter-section {
            padding: 0 20px;
            margin-top: 10px;

        }

        .hous-div {
            padding-bottom: 10px !important;
        }

        .newsletter-banner {
            padding: 40px 20px;
            border-radius: 24px;
        }

        .nl-form {
            /* flex-direction: column; */
        }

        .nl-btn {
            padding: 16px;
        }

        .newsletter-banner .floating-shape {
            opacity: 0.5;
            transform: scale(0.6);
        }
    }

    /* ==========================================================
   Publisher Page Styles
   ========================================================== */
    .publisher-layout-container {
        max-width: 1440px;
        margin: 0 auto;
        padding: 80px 0;
        display: flex;
        flex-direction: column;
        gap: 60px;

    }

    /* 1. Publisher Info Card */
    .publisher-info-wrapper {
        position: relative;
        padding-left: 20px;
    }

    .decorative-note {
        position: absolute;
        top: 4px;
        left: 37px;
        width: 80px;
        height: 100px;
        background-color: #FDF9EC;
        border-radius: 8px;
        transform: rotate(16deg);
        z-index: 2;
    }

    .publisher-info-box {
        position: relative;
        z-index: 1;
        background-color: #FFFFFF;
        border-radius: 24px;
        gap: 32px;
        padding: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row-reverse;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

    .pub-text-details {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-left: 40px;
    }

    .pub-title-row {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .pub-title {
        font-family: "Palestine", 'Cairo', sans-serif;
        font-size: 32px;
        color: var(--text-dark);
        margin: 0;
    }

    .pub-verified-badge {
        background-color: #FF7073;
        color: #FFF;
        border-radius: 50px;
        padding: 6px 16px;
        font-size: 14px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 14px;
    }

    .pub-stats {
        display: flex;
        align-items: center;
        gap: 24px;
        color: #6A778B;
        font-size: 15px;
        font-weight: 600;
    }

    .pub-stats span i {
        color: var(--primary);
        margin-left: 4px;
    }

    .pub-desc {
        color: var(--text-dark);
        font-size: 16px;
        line-height: 1.8;
        margin: 0;
        max-width: 800px;
    }

    .pub-logo-box {
        flex-shrink: 0;
        width: 140px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pub-logo-img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
    }

    /* 2. About Publisher */
    .publisher-section-block {
        margin-top: 0;
    }

    .publisher-about-box {
        background-color: #F5EEDC;
        border-radius: 16px;
        padding: 32px;
        color: #38244C;
        font-size: 16px;
        line-height: 2;
    }

    .publisher-about-box p {
        margin: 0;
    }

    /* 3. Awards Grid */
    .publisher-awards-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .pub-award-card {
        background-color: #F5EEDC;
        border-radius: 16px;
        padding: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row-reverse;
        gap: 16px;
    }

    .award-text {
        flex-grow: 1;
    }

    .award-text h3 {
        font-size: 18px;
        color: #38244C;
        margin: 0 0 8px 0;
    }

    .award-text p {
        font-size: 13px;
        color: #4A5565;
        margin: 0;
        line-height: 1.6;
    }

    .award-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
    }

    .award-icon.blue-bg {
        background-color: #E6EEFA;
        color: #4A90E2;
    }

    .award-icon.red-bg {
        background-color: #FDE8E9;
        color: #E24A4A;
    }

    .award-icon.yellow-bg {
        background-color: #FAF2DF;
        color: #DDA83A;
    }

    /* Responsive Rules for Publisher */
    @media (max-width: 1024px) {
        .publisher-layout-container {
            padding: 24px 40px 80px;
        }

        .publisher-awards-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 850px) {
        .decorative-note {
            width: 60px;
            height: 80px;
        }

        .publisher-awards-grid {
            grid-template-columns: 1fr;
        }

        .publisher-info-box {
            flex-direction: column-reverse;
            padding: 24px;
            text-align: center;
        }

        .pub-text-details {
            padding-left: 0;
            align-items: center;
        }

        .pub-stats {
            flex-wrap: wrap;
            justify-content: center;
        }

        .pub-logo-box {
            margin-bottom: 24px;
        }
    }

    @media (max-width: 550px) {
        .publisher-layout-container {
            padding: 24px 20px 60px;
        }
    }

    /* ==========================================================
   Events Section Styles
   ========================================================== */
    .events-section {
        border-radius: 24px;
        background: #FFF;
        padding: 60px 20px;
        max-width: 1400px;
        margin: 48px auto 0;
    }

    .events-header {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 32px;
    }

    .events-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        width: 100%;
    }

    .event-card {
        background-color: #FFFFFF;
        border: 1px solid #EAE3CD;
        border-radius: 16px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
    }

    .event-img-wrapper {
        position: relative;
        width: 100%;
        height: 200px;
    }

    .event-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .event-date-badge {
        position: absolute;
        top: 16px;
        right: 16px;
        background-color: #38244C;
        color: #FFFFFF;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.2;
    }

    .event-date-badge .day {
        font-size: 20px;
        font-weight: 700;
        color: #FF7073;
    }

    .event-date-badge .month {
        font-size: 12px;
    }

    .event-details {
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex-grow: 1;
    }

    .event-title {
        color: #38244C;
        font-size: 18px;
        font-weight: 700;
        margin: 0;
    }

    .event-info {
        display: flex;
        flex-direction: column;
        gap: 12px;
        color: #545D6A;
        font-size: 14px;
        margin-bottom: auto;
    }

    .event-info span {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .event-info span i {
        color: #8C99AA;
        width: 16px;
        text-align: center;
    }

    .event-action-btn {
        background-color: #FF7073;
        color: #FFFFFF;
        border: none;
        border-radius: 50px;
        padding: 12px 24px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: background-color 0.3s ease;
        width: 100%;
        text-align: center;
    }

    .event-action-btn:hover {
        background-color: #E65A5D;
    }

    @media (max-width: 1024px) {
        .events-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }


    @media (max-width: 768px) {
        .events-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 512px) {
        .publishers-section {
            margin-top: 0px !important;
        }

        .badge-stack {
            width: 50% !important;

        }

        .badge-mostread,
        .badge-free {
            font-size: 9px !important;
            width: 100%;
            text-align: center;
            padding: 4px 7px;
        }

        .price-label {
            font-size: 18px;
            color: #38244C;
            font-weight: 800;
        }

        .badge-free {
            display: none;
        }

        .search-section {
            padding: 24px 12px 20px 12px !important;
        }

        .search-title {
            font-size: 26px;
        }

        .search-subtitle {
            font-size: 14px;
            margin-bottom: 20px;
        }

        .current-price {
            font-size: 28px;
        }

        .old-price {
            font-size: 17px;
        }

        .publicher-heder {
            margin-bottom: 10px !important;
            font-size: 18px !important;
        }

        .publisher-layout-container {
            gap: 25px;
        }

        .featured-count {
            font-size: 6px;
            padding: 4px 8px;
        }

        .grid-pub-book-count {
            font-size: 7px;
            padding: 4px 8px;
        }

        .search-filters {
            display: flex;
            flex-direction: row;
            width: 100%;
            gap: 6px;
            overflow-x: auto;
            flex-wrap: nowrap !important;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding-bottom: 4px;
            justify-content: flex-start;
        }

        .search-filters::-webkit-scrollbar {
            display: none;
        }

        .filter-btn {
            font-size: 12px;
            padding: 8px 14px;
            flex-shrink: 0;
            white-space: nowrap;
        }

        .search-bar-container {
            max-width: 100%;
        }

        .search-submit-btn {
            padding: 10px 18px;
            font-size: 14px;
            white-space: nowrap;
        }

        .search-input {
            padding: 12px 14px;
            font-size: 13px;
        }

        /* ── Search tags: enable horizontal scroll ── */
        .search-tags {
            max-width: 100%;
        }

        /* ── Book cards in search grid ── */
        .publishers-grid {
            gap: 12px;
        }

        .publishers-grid .publishing-main-card {
            height: auto !important;
            min-height: 380px;
        }

        .cat-card .card-title {
            font-size: 15px;
        }

        .cat-card .card-price {
            font-size: 13px;
        }

        .cat-card .card-author {
            font-size: 11px;
        }

        .pub-verified-badge {
            font-size: 9px !important;
        }

        .pub-title-row {
            align-items: center !important;
        }

        .category-card {
            flex: 0 0 230px;
            padding: 30px 16px;
        }

        .category-img {
            height: 120px;
            margin-bottom: 20px;
        }

        .category-title {
            font-size: 20px;
            margin-bottom: 10px;
        }

        .category-desc {
            font-size: 15px;
        }

        .categories-controls {
            margin: 5px auto 20px auto;
        }

        .categories-track {

            gap: 20px;
        }

        .pb-sm {
            padding-bottom: 15px !important;
        }

        .pt-sm {
            padding-top: 15px !important;
        }

        .audio-books {
            margin-top: 20px !important;
        }

        .slider-controls {
            margin-top: 0px;
        }

    }


    /* ==========================================================
   Extra Small Screen Adjustments (320px and below)
   ========================================================== */
    @media (max-width: 320px) {

        /* Hero Section */
        .hero-title {
            font-size: 28px !important;
            line-height: 1.3;
        }

        .hero-subtitle {
            font-size: 14px;
            margin-bottom: 20px;
        }

        .btn-primary-index,
        .btn-secondary {
            font-size: 14px;
            padding: 12px 32px;
        }

        /* Section Titles */
        .section-title,
        .publishers-title {
            font-size: 18px;
        }

        .view-all-link {
            font-size: 12px;
        }

        /* Paragraphs and Text */
        p,
        .block-text,
        .author-bio,
        .pub-desc,
        .publisher-about-box {
            font-size: 14px;
        }

        /* Buttons */
        .btn-primary,
        .btn-link,
        .action-btn,
        .buy-btn,
        .listen-now-btn,
        .plan-btn,
        .submit-rating-btn,
        .cta-publishing-btn,
        .promo-btn,
        .nl-btn {
            font-size: 14px;
            padding: 10px 20px;
        }

        /* Navigation */
        .nav-link {
            font-size: 14px;
        }

        .login-link,
        .register-btn {
            font-size: 12px;
        }

        /* Cards and Titles */
        .book-title,
        .card-title,
        .author-name-title,
        .featured-name,
        .grid-pub-name,
        .pub-title,
        .event-title {
            font-size: 14px;
        }

        .book-author,
        .card-author,
        .author-releases,
        .featured-loc,
        .grid-pub-loc,
        .pub-stats,
        .event-info {
            font-size: 12px;
        }

        /* Badges and Small Text */
        .price-label,
        .info-label,
        .info-value,
        .trust-text,
        .badge-pill,
        .content-subtitle,
        .feature-item p,
        .feature-box h5,
        .feature-box p,
        .copyright,
        .tags-label,
        .tag-badge,
        .app-btn,
        .footer-bottom-links a,
        .footer-links-group ul li a {
            font-size: 12px;
        }

        /* Slider Controls */
        .control-btn,
        .circle-btn-white,
        .ts-circle-btn,
        .cat-control-btn,
        .top-nav-btn {
            font-size: 14px;
            width: 36px;
            height: 36px;
        }

        /* Footer */
        .footer-desc p {
            font-size: 16px;
        }

        .footer-title {
            font-size: 14px;
        }

        /* Search */
        .search-title {
            font-size: 32px;
        }

        .search-subtitle {
            font-size: 14px;

        }

        .filter-btn {
            font-size: 14px;
            padding: 8px 20px;
        }

        .search-submit-btn {
            font-size: 14px;
            padding: 12px 32px;
        }

        /* Audiobooks */
        .duration-badge {
            font-size: 10px;
            padding: 4px 8px;
        }

        .circle-play-btn {
            font-size: 18px;
            width: 48px;
            height: 48px;
        }

        /* Categories */
        .category-title {
            font-size: 20px;

        }

        .category-desc {
            font-size: 14px;
        }

        /* Bestsellers */
        .audio-badge,
        .hot-badge,
        .format-badge,
        .new-badge,
        .foryou-badge,
        .badge-mostread,
        .badge-free,
        .img-rating-badge {
            font-size: 10px;
            padding: 4px 8px;
        }

        /* Reviews */
        .tab-btn {
            font-size: 16px;
            padding: 12px;
        }

        .rating-based-on,
        .star-num,
        .percent-val {
            font-size: 12px;
        }

        /* Testimonials */
        .testimonials-title {
            font-size: 24px;
        }

        .author-name {
            font-size: 18px;
        }

        .testimonial-card .review-text {
            font-size: 14px;
        }

        /* CTA Publishing */
        .cta-publishing-title {
            font-size: 32px;
        }

        .cta-publishing-subtitle {
            font-size: 14px;
        }

        /* Promo Banner */
        .promo-title {
            font-size: 16px;
        }

        .promo-subtitle {
            font-size: 10px;
        }

        .promo-badge {
            font-size: 8px;
            padding: 3px 6px;
        }

        /* Quotes */
        .quote-text {
            font-size: 14px;
        }

        .quote-book-title {
            font-size: 12px;
        }

        /* Other Authors */
        .other-author-name {
            font-size: 13px;
        }

        .other-author-role,
        .other-author-link {
            font-size: 11px;
        }

        /* Publishers */
        .publisher-name {
            font-size: 12px;
        }

        /* Newsletter */
        .nl-title {
            font-size: 24px;
        }

        .nl-subtitle {
            font-size: 13px;
        }

        .nl-input {
            font-size: 14px;
            padding: 12px 16px;
        }

        /* Awards */
        .award-text h3 {
            font-size: 16px;
        }

        .award-text p {
            font-size: 12px;
        }

        /* Events */
        .event-date-badge .day {
            font-size: 16px;
        }

        .event-date-badge .month {
            font-size: 10px;
        }

        .event-title {
            font-size: 16px;
        }

        .event-info {
            font-size: 12px;
        }

        /* General Spacing Adjustments */
        section {
            padding: 20px 15px !important;
        }

        .books-track,
        .audiobooks-track,
        .categories-track,
        .bestsellers-grid,
        .foryou-track,
        .publishers-track,
        .authors-grid,
        .quotes-track,
        .testimonials-track,
        .recently-track {
            gap: 12px;
            padding: 0 15px;
        }

        .book-card,
        .small-book-card,
        .audiobook-card,
        .category-card,
        .store-card,
        .foryou-track .store-card,
        .publisher-card,
        .featured-pub-card,
        .grid-pub-card,
        .pub-book-card,
        .recent-card,
        .quote-card,
        .testimonial-card,
        .other-author-card,
        .event-card {
            padding: 10px;

        }


    }

    @media (max-width: 430px) {
        .publishers-grid .publishing-main-card {
            height: auto !important;
            min-height: 360px;
        }
    }

    /* ── Subscription Confirmed ─────────────────────────────── */
    .subscription-confirmed {
        padding: 80px 20px;
        background-color: var(--bg-color);
        min-height: 70vh;
        display: flex;
        align-items: center;
    }

    .subscription-confirmed .container {
        max-width: 600px;
        margin: 0 auto;
        width: 100%;
    }

    .confirmed-card {
        background: #FFFFFF;
        border-radius: 16px;
        padding: 56px 48px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        text-align: center;
        border: 2px solid var(--border-color);
    }

    .success-icon {
        font-size: 72px;
        color: var(--primary);
        margin-bottom: 24px;
        line-height: 1;
    }

    .confirmed-card h1 {
        font-size: 32px;
        font-weight: 900;
        color: var(--text-dark);
        margin-bottom: 12px;
    }

    .confirmed-card>p {
        font-size: 16px;
        color: var(--text-light);
        line-height: 1.7;
        margin-bottom: 40px;
    }

    .subscription-details {
        background: var(--bg-color);
        border-radius: 12px;
        padding: 24px 32px;
        margin-bottom: 40px;
        text-align: right;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .detail-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 16px;
    }

    .detail-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .detail-label {
        font-size: 14px;
        color: var(--text-light);
        font-weight: 600;
    }

    .detail-value {
        font-size: 15px;
        color: var(--text-dark);
        font-weight: 700;
    }

    .confirmed-actions {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .confirmed-actions .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 32px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 800;
        font-family: inherit;
        text-decoration: none;
        transition: 0.2s;
        cursor: pointer;
        border: 2px solid var(--text-dark);
    }

    .confirmed-actions .btn-primary {
        background: var(--primary);
        color: #FFFFFF;
        box-shadow: 4px 4px 0px var(--text-dark);
    }

    .confirmed-actions .btn-primary:hover {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0px var(--text-dark);
    }

    .confirmed-actions .btn-outline {
        background: #FFFFFF;
        color: var(--text-dark);
        box-shadow: 4px 4px 0px var(--text-dark);
    }

    .confirmed-actions .btn-outline:hover {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0px var(--text-dark);
    }

    @media (max-width: 600px) {
        .confirmed-card {
            padding: 40px 24px;
        }

        .confirmed-card h1 {
            font-size: 24px;
        }

        .subscription-details {
            padding: 20px;
        }

        .confirmed-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .confirmed-actions .btn {
            justify-content: center;
        }
    }

    /* ==========================================================
   Library Page — Index
   ========================================================== */
    .library-page {
        padding: 60px 0 80px;
        min-height: 60vh;
    }

    .library-page .container {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .page-header {
        text-align: center;
        margin-bottom: 48px;
    }

    .page-header h1 {
        font-family: 'Changa', 'Cairo', sans-serif;
        font-size: 40px;
        font-weight: 800;
        color: var(--text-dark);
        margin-bottom: 12px;
    }

    .page-header p {
        font-size: 18px;
        color: var(--text-light);
        font-weight: 500;
    }

    /* ── Empty State ── */
    .empty-state {
        text-align: center;
        padding: 80px 40px;
        background: var(--white);
        border-radius: 20px;
        border: 2px dashed var(--border-color);
        max-width: 500px;
        margin: 0 auto;
    }

    .empty-state p {
        font-size: 18px;
        color: var(--text-light);
        margin-bottom: 28px;
        font-weight: 500;
    }

    /* ── Books Grid ── */
    .books-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 28px;
        margin-bottom: 40px;
    }

    /* ── Book Card (Library Grid — uses store-card component) ── */
    .library-page .store-card {
        width: 100% !important;
        flex-shrink: 1 !important;
        background: var(--white);
        border-radius: 16px;
        padding: 0;
        overflow: hidden;
        border: 2px solid transparent;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
    }

    .library-page .store-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
        border-color: var(--primary);
    }

    .library-page .store-card .card-img-wrapper {
        border-radius: 0;
        margin-bottom: 0;
        aspect-ratio: 3 / 4;
        background: linear-gradient(135deg, #f7f3ea, #ede4d3);
    }

    .library-page .store-card .card-img-wrapper img {
        transition: transform 0.4s ease;
    }

    .library-page .store-card:hover .card-img-wrapper img {
        transform: scale(1.05);
    }

    .library-page .store-card .card-info {
        padding: 18px 16px 16px;
        flex: 1;
        margin-bottom: 0 !important;
    }

    .library-page .store-card .card-info>div {
        flex-direction: column !important;
        gap: 6px;
    }

    .library-page .store-card .card-title {
        font-family: 'Changa', 'Cairo', sans-serif;
        font-size: 15px !important;
        font-weight: 700;
        color: var(--text-dark);
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }

    .library-page .store-card .card-author {
        font-size: 13px !important;
        color: var(--text-light);
        font-weight: 500;
    }

    .library-page .store-card .card-rating {
        display: none !important;
    }

    /* Hide cart button in library (not a store context) */
    .library-page .store-card .cart-btn {
        display: none !important;
    }

    .library-page .store-card .card-actions {
        padding: 0 16px 16px;
    }

    .library-page .store-card .buy-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        border-radius: 12px;
        font-size: 14px;
        padding: 10px;
    }

    /* ── Cover Placeholder (used in show page) ── */
    .cover-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f7f3ea, #ede4d3);
    }

    .cover-placeholder i {
        font-size: 52px;
        color: #c4b99a;
    }

    /* ── Pagination in Library ── */
    .library-page .pagination-wrapper {
        display: flex;
        justify-content: center;
        margin-top: 32px;
    }

    /* ==========================================================
   Library Page — Book Detail (Show)
   ========================================================== */
    .book-detail-page {
        padding: 40px 0 100px;
        min-height: 60vh;
    }

    .book-detail-page .container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .book-detail-page .page-header {
        text-align: right;
        margin-bottom: 32px;
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 15px;
        font-weight: 600;
        color: var(--text-light);
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .back-link:hover {
        color: var(--primary);
        gap: 14px;
    }

    .back-link i {
        font-size: 14px;
    }

    /* ── Detail Layout ── */
    .book-detail-layout {
        display: flex;
        gap: 56px;
        align-items: flex-start;
        background: var(--white);
        border-radius: 24px;
        padding: 40px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
        border: 1px solid var(--border-color);
    }

    .book-cover-side {
        flex-shrink: 0;
        width: 300px;
    }

    .book-cover-large {
        width: 100%;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    }

    .book-info-side {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .book-info-side h1 {
        font-family: 'Changa', 'Cairo', sans-serif;
        font-size: 34px;
        font-weight: 800;
        color: var(--text-dark);
        margin-bottom: 10px;
        line-height: 1.4;
    }

    .book-authors {
        font-size: 18px;
        color: var(--text-light);
        font-weight: 500;
        margin-bottom: 6px;
    }

    .book-info-side .book-category {
        font-size: 14px;
        margin-bottom: 20px;
        display: inline-block;
    }

    .book-description {
        margin-top: 8px;
        padding-top: 24px;
        border-top: 1px solid var(--border-color);
        font-size: 16px;
        color: var(--text-dark);
        line-height: 1.9;
        font-weight: 400;
    }

    /* ── Format Actions ── */
    .format-actions {
        display: flex;
        gap: 16px;
        margin-top: 32px;
        flex-wrap: wrap;
    }

    .format-actions .btn-primary,
    .format-actions .btn-outline-dark {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    /* ── Outline Dark Button (for format actions) ── */
    .format-actions .btn-outline-dark {
        background: var(--white);
        color: var(--text-dark);
        border: 2px solid var(--text-dark);
        padding: 12px 40px;
        border-radius: 10px;
        font-weight: 800;
        font-size: 16px;
        cursor: pointer;
        transition: 0.2s;
        font-family: inherit;
        box-shadow: 4px 4px 0px var(--text-dark);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
    }

    .format-actions .btn-outline-dark:hover {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0px var(--text-dark);
    }

    /* ── Button Large Variant ── */
    .btn-lg {
        padding: 16px 44px !important;
        font-size: 18px !important;
        border-radius: 12px !important;
    }

    /* ── Text Muted ── */
    .text-muted {
        color: var(--text-light);
        font-size: 16px;
    }

    /* ==========================================================
   READER PAGE — E-Book Reading View
   ========================================================== */
    .reader-page {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 80px);
        background: var(--bg-color);
    }

    /* ── Top Bar ── */
    .reader-topbar {
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--white);
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    }

    .reader-topbar-inner {
        max-width: 960px;
        margin: 0 auto;
        padding: 14px 24px;
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .reader-back-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-light);
        text-decoration: none;
        padding: 8px 16px;
        border-radius: 8px;
        background: #f5f2eb;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .reader-back-btn:hover {
        color: var(--primary);
        background: #fef0f0;
    }

    .reader-book-title {
        font-family: 'Changa', 'Cairo', sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: var(--text-dark);
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }

    .reader-page-tracker {
        font-size: 14px;
        color: var(--text-light);
        font-weight: 500;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .reader-page-tracker i {
        color: var(--primary);
        font-size: 15px;
    }

    .reader-page-tracker strong {
        color: var(--text-dark);
        font-weight: 700;
    }

    /* ── Progress Bar ── */
    .reader-progress-bar {
        height: 4px;
        background: #ede4d3;
        width: 100%;
    }

    .reader-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--primary), var(--secondary));
        border-radius: 0 4px 4px 0;
        transition: width 0.4s ease;
    }

    /* ── Reading Body ── */
    .reader-body {
        flex: 1;
        display: flex;
        justify-content: center;
        padding: 40px 24px 60px;
    }

    .reader-container {
        width: 100%;
        max-width: 800px;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    /* ── Page Content ── */
    .reader-page-content {
        background: var(--white);
        border-radius: 16px;
        padding: 48px 40px;
        min-height: 500px;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
        border: 1px solid var(--border-color);
        font-size: 18px;
        line-height: 2.1;
        color: var(--text-dark);
        font-weight: 400;
        text-align: justify;
    }

    /* ── PDF iframe embed ── */
    .reader-pdf-iframe {
        width: 100%;
        min-height: 75vh;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        background: var(--white);
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
    }

    .reader-page-number {
        text-align: center;
        font-size: 14px;
        color: var(--text-light);
        font-weight: 600;
        margin-bottom: 28px;
        letter-spacing: 2px;
    }

    /* ── Navigation ── */
    .reader-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .reader-nav .btn-outline-dark {
        background: var(--white);
        color: var(--text-dark);
        border: 2px solid var(--text-dark);
        padding: 12px 32px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 15px;
        cursor: pointer;
        transition: 0.2s;
        font-family: inherit;
        box-shadow: 4px 4px 0px var(--text-dark);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .reader-nav .btn-outline-dark:hover:not(:disabled) {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0px var(--text-dark);
    }

    .reader-nav .btn-outline-dark:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

    .reader-nav-current {
        font-family: 'Changa', 'Cairo', sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: var(--text-light);
        min-width: 80px;
        text-align: center;
    }

    /* ── Reader Responsive ── */
    @media (max-width: 768px) {
        .reader-topbar-inner {
            padding: 10px 16px;
            gap: 12px;
        }

        .reader-back-btn span {
            display: none;
        }

        .reader-back-btn {
            padding: 8px 12px;
        }

        .reader-book-title {
            font-size: 15px;
        }

        .reader-page-tracker span {
            font-size: 12px;
        }

        .reader-body {
            padding: 24px 12px 40px;
        }

        .reader-page-content {
            padding: 28px 20px;
            font-size: 16px;
            line-height: 1.9;
            min-height: 400px;
        }

        .reader-nav .btn-outline-dark {
            padding: 10px 20px;
            font-size: 14px;
        }

        .reader-nav {
            gap: 12px;
        }
    }

    /* ==========================================================
   PLAYER PAGE — Audio Book Listening View
   ========================================================== */
    .player-page {
        min-height: calc(100vh - 80px);
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, #f3ede0 0%, var(--bg-color) 100%);
        padding: 40px 24px;
    }

    .player-page-inner {
        width: 100%;
        max-width: 520px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 28px;
    }

    .player-back-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-light);
        text-decoration: none;
        transition: color 0.2s;
    }

    .player-back-link:hover {
        color: var(--primary);
    }

    /* ── Player Card ── */
    .player-card {
        width: 100%;
        background: var(--white);
        border-radius: 28px;
        padding: 44px 36px 36px;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.08);
        border: 1px solid var(--border-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    /* ── Cover Art ── */
    .player-cover-wrap {
        position: relative;
        width: 240px;
        height: 240px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .player-cover-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
        position: relative;
        z-index: 2;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    }

    .player-cover-placeholder {
        width: 100%;
        height: 100%;
        border-radius: 16px;
        background: linear-gradient(135deg, #38244C, #6C5BC2);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    }

    .player-cover-placeholder i {
        font-size: 64px;
        color: rgba(255, 255, 255, 0.6);
    }

    .player-cover-glow {
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 112, 115, 0.25), transparent 70%);
        z-index: 1;
        filter: blur(24px);
    }

    /* ── Book Info ── */
    .player-info {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .player-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #fdf0ff;
        color: var(--secondary);
        font-size: 12px;
        font-weight: 700;
        padding: 5px 14px;
        border-radius: 999px;
        font-family: 'Tajawal', 'Cairo', sans-serif;
    }

    .player-title {
        font-family: 'Changa', 'Cairo', sans-serif;
        font-size: 26px;
        font-weight: 800;
        color: var(--text-dark);
        line-height: 1.4;
    }

    .player-authors {
        font-size: 15px;
        color: var(--text-light);
        font-weight: 500;
    }

    .player-category {
        font-size: 13px;
        color: var(--text-light);
        font-weight: 500;
        background: #f5f2eb;
        padding: 4px 12px;
        border-radius: 999px;
    }

    /* ── Audio Section ── */
    .player-audio-section {
        width: 100%;
    }

    .player-audio-el {
        width: 100%;
        margin-bottom: 12px;
    }

    /* ── Player Error ── */
    .player-error {
        text-align: center;
        padding: 24px 20px;
        background: #fef2f2;
        border-radius: 12px;
        color: #b91c1c;
        font-size: 15px;
        font-weight: 600;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .player-error i {
        font-size: 32px;
        color: #ef4444;
    }

    .player-error p {
        margin: 0;
        font-family: 'Tajawal', 'Cairo', sans-serif;
    }

    /* ── Custom Controls ── */
    .player-custom-controls {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    /* Slider Row */
    .player-slider-wrap {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .player-time {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-light);
        font-family: 'Tajawal', 'Cairo', sans-serif;
        min-width: 42px;
        text-align: center;
    }

    .player-seek-bar {
        flex: 1;
        -webkit-appearance: none;
        appearance: none;
        height: 6px;
        border-radius: 3px;
        background: #ede4d3;
        outline: none;
        cursor: pointer;
    }

    .player-seek-bar::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--primary);
        cursor: pointer;
        border: 3px solid var(--white);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    .player-seek-bar::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--primary);
        cursor: pointer;
        border: 3px solid var(--white);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    /* Play Buttons */
    .player-buttons {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .player-btn-play {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--primary);
        color: var(--white);
        border: none;
        font-size: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 20px rgba(255, 112, 115, 0.4);
        transition: all 0.2s ease;
    }

    .player-btn-play:hover {
        transform: scale(1.08);
        box-shadow: 0 8px 28px rgba(255, 112, 115, 0.55);
    }

    .player-btn-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #f5f2eb;
        color: var(--text-dark);
        border: none;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        transition: all 0.2s ease;
        font-weight: 700;
        font-family: 'Tajawal', 'Cairo', sans-serif;
        position: relative;
    }

    .player-btn-icon i {
        font-size: 16px;
    }

    .player-btn-icon:hover {
        background: #ede4d3;
        color: var(--primary);
    }

    .player-btn-text {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #f5f2eb;
        color: var(--text-dark);
        border: none;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s ease;
        font-family: 'Tajawal', 'Cairo', sans-serif;
    }

    .player-btn-text:hover {
        background: #ede4d3;
        color: var(--primary);
    }

    /* Extras */
    .player-extras {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .player-volume-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .player-volume-wrap i {
        color: var(--text-light);
        font-size: 17px;
    }

    .player-volume-bar {
        width: 100px;
        -webkit-appearance: none;
        appearance: none;
        height: 5px;
        border-radius: 3px;
        background: #ede4d3;
        outline: none;
        cursor: pointer;
    }

    .player-volume-bar::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--primary);
        cursor: pointer;
        border: 2px solid var(--white);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    }

    .player-volume-bar::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--primary);
        cursor: pointer;
        border: 2px solid var(--white);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    }

    /* ── Player Responsive ── */
    @media (max-width: 600px) {
        .player-page {
            padding: 24px 16px;
            align-items: flex-start;
        }

        .player-card {
            padding: 32px 20px 28px;
            border-radius: 24px;
            gap: 20px;
        }

        .player-cover-wrap {
            width: 180px;
            height: 180px;
        }

        .player-cover-glow {
            width: 150px;
            height: 150px;
        }

        .player-title {
            font-size: 22px;
        }

        .player-btn-play {
            width: 56px;
            height: 56px;
            font-size: 22px;
        }

        .player-btn-icon {
            width: 40px;
            height: 40px;
        }

        .player-cover-placeholder i {
            font-size: 48px;
        }
    }

    /* ── Alerts ── */
    .alert {
        padding: 16px 24px;
        border-radius: 12px;
        margin-bottom: 24px;
        font-weight: 600;
        font-size: 15px;
    }

    .alert-success {
        background: #ecfdf5;
        color: #065f46;
        border: 1px solid #a7f3d0;
    }

    /* ── My Subscription Page ── */
    .my-subscription-page {
        padding: 60px 0 80px;
        min-height: 60vh;
    }

    .my-subscription-page .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .subscription-status-card {
        background: var(--white);
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
        border: 1px solid var(--border-color);
    }

    .status-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 32px;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--border-color);
    }

    .status-header h2 {
        font-family: 'Changa', 'Cairo', sans-serif;
        font-size: 24px;
        font-weight: 700;
        color: var(--text-dark);
    }

    .status-badge {
        padding: 6px 18px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 700;
        color: #FFFFFF;
    }

    .status-badge.active {
        background: #10b981;
    }

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

    .detail-row {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .detail-label {
        font-size: 13px;
        color: var(--text-light);
        font-weight: 500;
    }

    .detail-value {
        font-size: 16px;
        color: var(--text-dark);
        font-weight: 700;
    }

    .status-actions {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        padding-top: 24px;
        border-top: 1px solid var(--border-color);
    }

    /* ── Plan Change Rows (Upgrade / Downgrade) ── */
    .plan-change-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 16px 0;
        border-bottom: 1px solid var(--border-color);
        flex-direction: row !important;
    }

    .plan-change-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    /* ── Downgrade Button (outline with hover animation) ── */
.btn-downgrade {
    background: #fff;
    color: var(--text-dark);
    border: 2px solid var(--text-dark);
    padding: 8px 24px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
    font-family: inherit;
    box-shadow: 4px 4px 0px var(--text-dark);
}

.btn-downgrade:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--text-dark);
}

/* ── Toggle Auto-Renew Button ── */
.btn-toggle-renew {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--text-dark);
    border: 2px solid var(--text-dark);
    padding: 12px 40px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: 0.2s;
    font-family: inherit;
    box-shadow: 4px 4px 0px var(--text-dark);
    text-decoration: none;
    vertical-align: middle;
}

.btn-toggle-renew:hover:not(:disabled) {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--text-dark);
}

.btn-toggle-renew:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: 2px 2px 0px var(--text-dark);
    transform: translate(2px, 2px);
}

/* ── Auto-Renew Badge ── */
.auto-renew-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: normal;
    word-break: break-word;
}

.auto-renew-badge--on {
    background: #e8f5e9;
    color: #2e7d32;
}

.auto-renew-badge--off {
    background: #f5f5f5;
    color: #888;
}

.auto-renew-next {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--text-light);
    font-weight: 500;
}

    /* ── Button Danger ── */
    .btn-danger {
        background: #ef4444;
        color: #FFFFFF;
        border: 2px solid var(--text-dark);
        padding: 12px 40px;
        border-radius: 10px;
        font-weight: 800;
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        transition: 0.2s;
        font-family: inherit;
        box-shadow: 4px 4px 0px var(--text-dark);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        vertical-align: middle;
    }

    .btn-danger:hover {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0px var(--text-dark);
        background: #dc2626;
    }

    /* ==========================================================
   Library Page — Responsive
   ========================================================== */
    @media (max-width: 768px) {
        .library-page {
            padding: 40px 0 60px;
        }

        .page-header h1 {
            font-size: 28px;
        }

        .page-header p {
            font-size: 15px;
        }

        .books-grid {
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 16px;
        }

        .library-page .store-card {
            border-radius: 12px;
        }

        .library-page .store-card .card-info {
            padding: 14px 12px 12px;
        }

        .library-page .store-card .card-title {
            font-size: 14px !important;
        }

        .book-detail-layout {
            flex-direction: column;
            align-items: center;
            padding: 24px;
            gap: 32px;
        }

        .book-cover-side {
            width: 220px;
        }

        .book-info-side h1 {
            font-size: 26px;
        }

        .book-authors {
            font-size: 16px;
        }

        .format-actions {
            flex-direction: column;
        }

        .format-actions .btn {
            justify-content: center;
            width: 100%;
        }

        .subscription-status-card {
            padding: 24px;
        }

        .status-details {
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .status-actions {
            flex-direction: column;
        }

        .status-actions .btn,
        .status-actions .btn-danger {
            justify-content: center;
            width: 100%;
        }
    }

    @media (max-width: 480px) {
        .books-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .book-detail-page .container {
            padding: 0 16px;
        }

        .book-detail-layout {
            padding: 20px;
        }

        .book-cover-side {
            width: 180px;
        }

        .book-info-side h1 {
            font-size: 22px;
        }

        .status-details {
            grid-template-columns: 1fr;
        }
    }

/* =============================================================================
   Image-Based Book Reader — RTL Optimized
   ============================================================================= */

.reader-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: #1a1a2e;
    color: #e0e0e0;
    overflow: hidden;
}

/* ---- Top Bar ---- */
.reader-topbar {
    background: #16213e;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.reader-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    gap: 16px;
}

.reader-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a0aec0;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    transition: color 0.2s;
}

.reader-back-btn:hover {
    color: #e2e8f0;
}

.reader-book-title {
    font-size: 18px;
    font-weight: 600;
    color: #f7fafc;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    flex: 1;
}

.reader-page-tracker {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a0aec0;
    font-size: 14px;
    white-space: nowrap;
}

.reader-page-tracker strong {
    color: #f7fafc;
}

.reader-progress-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
}

.reader-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transition: width 0.3s ease;
}

/* ---- Processing Notice ---- */
.reader-processing-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: rgba(236, 201, 75, 0.15);
    color: #ecc94b;
    font-size: 15px;
    flex-shrink: 0;
}

/* ---- Body / Reading Area ---- */
.reader-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 0;
    padding: 0 60px;
}

.reader-container {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.reader-image-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.reader-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: transparent;
}

.reader-page-image {
    max-width: 100%;
    max-height: calc(100vh - 160px);
    max-height: calc(100dvh - 160px);
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    transition: opacity 0.2s ease;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

.reader-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(26, 26, 46, 0.8);
    color: #a0aec0;
    border-radius: 4px;
}

.reader-loading i {
    font-size: 32px;
}

/* ---- Navigation Zones (click sides) ---- */
.reader-nav-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
}

.reader-nav-zone:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.05);
}

.reader-nav-prev {
    left: 0;
    /* In RTL, left side = next page */
}

.reader-nav-next {
    right: 0;
    /* In RTL, right side = previous page */
}

.reader-nav-arrow {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s;
}

.reader-nav-zone:hover .reader-nav-arrow {
    color: rgba(255, 255, 255, 0.8);
}

/* ---- Footer / Bottom Nav ---- */
.reader-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 14px 20px;
    background: #16213e;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.reader-nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.reader-nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

.reader-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.reader-page-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.reader-page-input {
    width: 70px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f7fafc;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
    direction: ltr;
}

.reader-page-input:focus {
    outline: none;
    border-color: #667eea;
    background: rgba(255, 255, 255, 0.1);
}

.reader-page-of {
    color: #a0aec0;
    font-size: 14px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .reader-body {
        padding: 0 10px;
    }

    .reader-topbar-inner {
        padding: 8px 12px;
        gap: 10px;
    }

    .reader-book-title {
        font-size: 15px;
    }

    .reader-page-tracker {
        font-size: 12px;
    }

    .reader-nav-zone {
        width: 50px;
    }

    .reader-footer {
        padding: 10px 12px;
        gap: 12px;
    }

    .reader-nav-btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    .reader-back-btn span,
    .reader-nav-btn span {
        display: none;
    }
}

/* ---- Dark mode already applied by default ---- */

/* ============================================================
   Report Modal
   ============================================================ */
.report-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.report-modal {
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 440px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    direction: rtl;
}

.report-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
}

.report-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.report-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-light);
    cursor: pointer;
    transition: color 0.2s;
}

.report-close-btn:hover {
    color: var(--text-dark);
}

.report-modal-body {
    padding: 20px 24px;
}

.report-field {
    margin-bottom: 20px;
}

.report-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.report-target-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.report-target-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    font-size: 14px;
}

.report-target-option:has(input:checked) {
    border-color: var(--primary);
    background: #FFF5F5;
}

.report-target-option input[type="radio"] {
    accent-color: var(--primary);
}

.report-target-label {
    color: var(--text-dark);
    font-weight: 500;
}

.report-select {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-dark);
    background: #fff;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236A778B' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
}

.report-select:focus {
    outline: none;
    border-color: var(--primary);
}

.report-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-dark);
    background: #fff;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.report-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.report-textarea::placeholder {
    color: var(--text-light);
    opacity: 0.7;
}

.report-status {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    margin-top: 4px;
}

.report-status-success {
    background: #ECFDF5;
    color: #065F46;
}

.report-status-error {
    background: #FEF2F2;
    color: #991B1B;
}

.report-modal-footer {
    display: flex;
    gap: 12px;
    padding: 0 24px 20px;
    justify-content: flex-end;
}

.report-btn-cancel {
    padding: 10px 24px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
    color: var(--text-light);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.report-btn-cancel:hover {
    background: #F9FAFB;
}

.report-btn-submit {
    padding: 10px 24px;
    border: none;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.report-btn-submit:hover {
    background: var(--primary-dark);
}

.report-btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =====================================================
   Direct Book Discount Styles
   ===================================================== */

.discount-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #dc2626;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    z-index: 2;
}

.product-cover-link {
    position: relative;
    display: block;
}

.original-price {
    text-decoration: line-through;
    color: #9ca3af;
    font-size: 13px;
    margin-right: 6px;
}

.discounted-price {
    color: #16a34a;
    font-weight: 700;
}

.original-price-strikethrough {
    display: block;
    text-decoration: line-through;
    color: #9ca3af;
    font-size: 14px;
    margin-bottom: 2px;
}

.current-price.discounted {
    color: #16a34a;
    font-weight: 800;
}

.discount-badge-text {
    display: inline-block;
    background: #fef2f2;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 4px;
}

/* Checkout direct discount styles */
.checkout-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.checkout-item-discount-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #16a34a;
    background: #f0fdf4;
    padding: 1px 6px;
    border-radius: 4px;
    width: fit-content;
}

.checkout-item-price-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.checkout-original-price {
    text-decoration: line-through;
    color: #9ca3af;
    font-size: 12px;
}

#breakdown-direct-discount-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
}

/* ── Mobile pagination: single horizontally-scrollable row ──────────
   Prevents the page-number buttons from wrapping into multiple stacked
   rows (11+ buttons on middle pages overflow a 375px viewport). */
@media (max-width: 480px) {
    .pagination-wrapper {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 4px 0;
    }

    .pagination-wrapper > * {
        flex-shrink: 0;
    }

    .pagination-wrapper::-webkit-scrollbar {
        display: none;
    }
}

/* ── Audiobook chapter playlist (multi-track) ──────────────
   Shown in the audio player when the audiobook is split into per-chapter
   tracks. RTL-friendly (uses logical properties / margin-inline). */
.player-playlist {
    margin-top: 18px;
    border-top: 1px solid var(--border-color, #e8e0d4);
    padding-top: 14px;
}

.player-playlist-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--text-dark, #2b2118);
    font-weight: 700;
}

.player-playlist-heading {
    font-size: 0.95rem;
}

.player-playlist-count {
    margin-inline-start: auto;
    background: var(--primary, #c73e2f);
    color: #fff;
    border-radius: 999px;
    font-size: 0.75rem;
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.player-playlist-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.player-playlist-item {
    /* لا تسمح للعناصر بالانضغاط داخل الحاوية محدودة الارتفاع،
       عشان لو الفصول كتير تطلع سكرول بدل ما تتشرشح. */
    flex: 0 0 auto;
    border-radius: 10px;
    overflow: hidden;
}

.player-playlist-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 1px solid var(--border-color, #e8e0d4);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--text-dark, #2b2118);
    cursor: pointer;
    text-align: start;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
}

.player-playlist-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

.player-playlist-item.active .player-playlist-btn {
    background: rgba(199, 62, 47, 0.10);
    border-color: var(--primary, #c73e2f);
}

.player-playlist-num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary, #c9a876);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.player-playlist-item.active .player-playlist-num {
    background: var(--primary, #c73e2f);
}

.player-playlist-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.player-playlist-duration {
    flex: 0 0 auto;
    font-size: 0.78rem;
    color: #8a7f6f;
}

.player-playlist-play-icon {
    flex: 0 0 auto;
    color: var(--primary, #c73e2f);
    font-size: 0.8rem;
}

.player-playlist-list::-webkit-scrollbar {
    width: 6px;
}

.player-playlist-list::-webkit-scrollbar-thumb {
    background: var(--border-color, #e8e0d4);
    border-radius: 3px;
}

/* ── Two cards per row on phones (301px – 576px) ───────────────────────
   Card grids used to collapse to a single column at 400px
   (.publishers-grid, .od-books-grid) or relied on `auto-fill` with a
   200px/220px minimum, which also ends up as one column at phone
   widths (360-400px CSS width). Keep two per row and only fall back to
   one column at 300px and below. Placed last so it wins over the
   `max-width: 300px` blocks above. */
@media (min-width: 301px) and (max-width: 576px) {
    .publishers-grid,
    .books-grid,
    .od-books-grid,
    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── KOT-329 · أصغر وأوضح لكروت التصنيفات على الموبايل ───────────────────
   On phones the home category card used to be 230x357px (120px image,
   30/16px padding and a two-line description) — one card filled most of
   the row and the whole section was ~640px tall. Below 768px the card is
   now a compact tile: two full cards plus a 40px slice of the third are
   visible, so the horizontal swipe is obvious. The width is derived from
   the track (%) with a fixed gap and peek, so 360px and 390px screens get
   the exact same card size and the same peek. Only the category name and
   the book count stay inside the card (the long description is hidden)
   and both are clamped, so nothing can overflow the card or the screen.
   Placed last so it wins over the older breakpoint blocks above. */
@media (max-width: 767px) {
    .categories-section {
        padding: 28px 16px;
    }

    .categories-section .section-header {
        margin-bottom: 14px;
    }

    .categories-track {
        gap: 10px;
        padding: 4px 0 14px;
        scroll-snap-type: x mandatory;
    }

    .categories-track .category-card {
        /* 2 cards + 2 gaps + a 40px peek of the next card = 100% of the track */
        flex: 0 0 calc((100% - 60px) / 2);
        min-width: 0;
        padding: 8px 8px 10px;
        border-radius: 12px;
        scroll-snap-align: start;
    }

    .categories-track .category-card:hover {
        transform: none;
    }

    .categories-track .category-img {
        width: 100%;
        height: 84px;
        margin-bottom: 8px;
        object-fit: contain;
    }

    .categories-track .category-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        max-height: calc(2 * 1.35em);
        margin: 0 0 4px;
        overflow: hidden;
        overflow-wrap: break-word;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 700;
    }

    .categories-track .category-book-count {
        display: block;
        max-width: 100%;
        margin: 0;
        overflow: hidden;
        font-size: 11px;
        line-height: 1.2;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .categories-track .category-desc {
        display: none;
    }

    .categories-controls {
        margin: 12px auto 0;
        gap: 12px;
    }

    .cat-control-btn {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }
}

/* ── KOT-330 · كروت كتب أصغر ومتناسقة في كل أقسام الموبايل ─────────────────
   Before this block the same book was rendered as a different component in
   each section of the site on a phone:
     · home/related sliders (.bestsellers-grid / .foryou-track) — a 260px
       card (about one card per 360px view) with 12px padding;
     · the search + category/collection grids (.books-grid-5) — a ~156px
       card with 24px titles and a 360px–500px minimum height.
   The action button also moved vertically from card to card, because the
   title was clamped to ONE ellipsised line while the author name was free to
   wrap to two or three lines, and nothing reserved the space for the price.

   Below 577px every book card now shares ONE geometry:
     · two cards per view in the slider tracks (snap aligned) and two equal
       columns in the grids, with the same padding, radius and cover ratio;
     · the cover is a fixed 5:7 box, so every cover has the same size;
     · the title is clamped to two lines whose height is ALWAYS reserved,
       the author is a single ellipsised line whose height is always
       reserved, and the price got its own line, so the "view details"
       button never moves between cards;
     · long Arabic / English titles wrap inside the card, are clamped with
       an ellipsis and can never widen the card or overlap the price;
     · badges are pinned inside the cover and ellipsised as well, so nothing
       sticks out and the page never scrolls horizontally.
   Placed last so it wins over the older breakpoint blocks above. */

/* The actions row is pinned to the bottom of the card at every width, so a
   two-line title or a long author name can never move the "view details"
   button — in the sliders (equal-height flex items) and in the grids
   (equal-height grid rows) alike. */
.store-card .card-info {
    flex: 1 1 auto;
}

.store-card .card-actions {
    margin-top: auto;
}

@media (max-width: 576px) {

    /* ---------- one card skin in every section ---------- */
    .store-card,
    .bestsellers-grid > .store-card,
    .foryou-track > .store-card,
    .recently-track > .store-card,
    .publishers-grid .store-card,
    .publishers-grid.books-grid-5 .store-card,
    .publishers-grid.books-grid-5 .cat-card,
    .cat-card.store-card {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
        padding: 8px;
        border: 0;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    /* ---------- sliders: two cards per view ---------- */
    .bestsellers-grid,
    .foryou-track,
    .recently-track {
        gap: 10px;
        scroll-snap-type: x mandatory;
    }

    .bestsellers-grid > .store-card,
    .foryou-track > .store-card,
    .recently-track > .store-card {
        flex: 0 0 calc(50% - 10px);
        width: calc(50% - 10px);
        scroll-snap-align: start;
    }

    .publishers-grid.books-grid-5 .publishing-main-card,
    .publishers-grid .publishing-main-card,
    .store-card.publishing-main-card {
        min-height: 0;
        height: auto;
    }

    /* ---------- cover: identical ratio everywhere ---------- */
    .store-card .card-img-wrapper,
    .cat-card .card-img-wrapper,
    .publishers-grid.books-grid-5 .card-img-wrapper {
        flex: 0 0 auto;
        margin-bottom: 8px;
        border-radius: 10px;
        aspect-ratio: 5 / 7;
    }

    .store-card .card-img-wrapper img,
    .cat-card .card-img-wrapper img,
    .publishers-grid.books-grid-5 .card-img-wrapper img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        object-fit: cover;
    }

    /* ---------- text block: fixed spaces, nothing clipped ---------- */
    .store-card .card-info,
    .cat-card .card-info,
    .publishers-grid.books-grid-5 .card-info {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 8px;
        padding: 0 2px;
        text-align: start;
    }

    .store-card .card-info .card-title-row,
    .store-card .card-info .title-price-row,
    .cat-card .card-info .title-price-row,
    .publishers-grid.books-grid-5 .card-title-row,
    .publishers-grid.books-grid-5 .title-price-row {
        flex-wrap: wrap;
        align-items: flex-start;
        width: 100%;
        margin: 0;
        gap: 0;
    }

    .store-card .card-info .card-title,
    .publishers-grid.books-grid-5 .card-title,
    .cat-card .card-info .card-title {
        flex: 1 1 100%;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        /* reserve two lines so a one-line title cannot move the rows below */
        min-height: calc(2 * 1.35em);
        margin: 0;
        overflow: hidden;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .store-card .card-info .card-price,
    .publishers-grid.books-grid-5 .card-price,
    .cat-card .card-info .card-price {
        order: 2;
        flex: 0 0 100%;
        max-width: 100%;
        margin: 2px 0 0;
        overflow: hidden;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.3;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .store-card .card-info .card-author,
    .publishers-grid.books-grid-5 .card-author,
    .cat-card .card-info .card-author {
        min-height: 1.6em;
        max-height: 1.6em;
        margin: 2px 0 0;
        overflow: hidden;
        font-size: 11px;
        line-height: 1.6;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .store-card .card-info .card-rating,
    .cat-card .card-info .card-rating {
        align-self: flex-start;
        margin-top: 2px;
        font-size: 11px;
        line-height: 1.6;
    }

    /* ---------- actions pinned to the bottom of every card ---------- */
    .store-card .card-actions,
    .cat-card .card-actions,
    .publishers-grid.books-grid-5 .card-actions {
        flex-direction: row;
        gap: 6px;
        margin-top: auto;
        padding: 0 2px;
    }

    .store-card .card-actions .buy-btn,
    .store-card .card-actions .buy-btn-solid,
    .publishers-grid.books-grid-5 .card-actions .buy-btn,
    .publishers-grid.books-grid-5 .card-actions .buy-btn-solid,
    .cat-card .card-actions .buy-btn,
    .cat-card .card-actions .buy-btn-solid {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        margin: 0;
        padding: 0 6px;
        border-radius: 8px;
        font-size: 11px;
        line-height: 1;
        white-space: nowrap;
    }

    .store-card .card-actions .cart-btn,
    .cat-card .card-actions .cart-btn {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 11px;
    }

    /* ---------- badges: smaller and always inside the cover ---------- */
    .store-card .audio-badge,
    .store-card .format-icon-badge {
        width: 20px;
        height: 20px;
        font-size: 9px;
    }

    .store-card .top-left-badges {
        top: 8px;
        left: 8px;
        gap: 4px;
    }

    [dir="ltr"] .store-card .top-left-badges {
        left: auto;
        right: 8px;
    }

    .store-card .top-right-badges {
        top: 8px;
        right: 8px;
        max-width: calc(100% - 16px);
        min-width: 0;
    }

    [dir="ltr"] .store-card .top-right-badges {
        right: auto;
        left: 8px;
    }

    .store-card .top-right-badges .hot-badge {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        padding: 3px 8px;
        font-size: 9px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .store-card .badge-stack {
        top: 8px;
        right: 8px;
        max-width: calc(100% - 16px);
    }

    [dir="ltr"] .store-card .badge-stack {
        right: auto;
        left: 8px;
    }

    .store-card .badge-mostread,
    .store-card .badge-free {
        overflow: hidden;
        padding: 3px 8px;
        font-size: 9px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .store-card .img-rating-badge,
    .store-card .duration-badge {
        max-width: calc(100% - 16px);
        overflow: hidden;
        padding: 3px 8px;
        font-size: 9px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

/* ── KOT-330 · grids: two equal columns on phones ───────────────────────
   Same two-per-row rhythm as the sliders above. Kept in its own range so
   the one-column fallback for 300px and below (declared earlier) survives. */
@media (min-width: 301px) and (max-width: 576px) {
    .publishers-grid.books-grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

/* ── KOT-331 · inner page headers follow the document direction ─────────
   Search results, the printed / ebook / audio listings, category,
   collection and publishing pages. The header markup no longer hardcodes
   `direction: rtl`; everything inherits the page direction, so:
     · the Arabic site keeps its right-to-left titles and breadcrumb;
     · the LTR locales get left-aligned titles and a left-to-right
       breadcrumb with the separator flipped;
     · `dir="auto"` on the title/count elements lets a Latin-only title
       keep its own LTR word order (and an Arabic title keep RTL) without
       changing the rest of the page.
   `text-align: start` is resolved per element direction (because of
   dir="auto"), which is what keeps an Arabic heading right-aligned even on
   an LTR page. */
.category-page-section,
.category-header-text,
.category-header-text h2,
.category-header-text p {
    text-align: start;
}

.category-header-wrapper > *,
.category-header-text {
    min-width: 0;
}

.category-header-text h2 {
    overflow-wrap: break-word;
}

.category-header-text p {
    overflow-wrap: anywhere;
}

/* Breadcrumb: direction-aware separators. On the RTL page the chevron
   already points towards the next (left-hand) crumb; on an LTR page it is
   mirrored so it points right, the direction of the next crumb there. */
.breadcrumb-container {
    justify-content: flex-start;
}

.breadcrumb-separator {
    display: inline-block;
}

[dir="ltr"] .breadcrumb-separator {
    transform: scaleX(-1);
}

/* Pagination: the container is laid out right-to-left, so the next arrow is
   the left chevron. Mirror it on LTR pages, where next sits on the right. */
[dir="ltr"] .pagination-wrapper .pag-arrow i {
    transform: scaleX(-1);
}

.breadcrumb-current {
    text-align: start;
    overflow-wrap: anywhere;
}

/* Phones: the header stacks, so every row must take the full width. This
   keeps the title, the book count and the filter/sort buttons in separate
   rows at 360px / 390px (no overlap, no clipping). */
@media (max-width: 768px) {
    .category-header-wrapper {
        align-items: stretch;
    }

    .category-header-text {
        width: 100%;
    }
}


/* ── KOT-332 · search page category rail (phones) ───────────────────────
   «تظبيط دوائر التصنيفات داخل صفحة البحث».

   The category pills on /search are a horizontal rail below 769px. Three
   things broke it:
     1. the "show more" toggle carries the `hidden` attribute, but
        `.category-filters-toggle { display: inline-flex }` overrode the
        browser's `[hidden] { display: none }`, so on phones the (dead)
        button stayed in the rail and — because a flex line stretches its
        items — every pill grew to the toggle's 67px height, which pushed the
        label to the top of a tall empty box;
     2. pills had no fixed height / min-width, so short names («دين»)
        looked tiny next to long ones («بيزنس وريادة أعمال») and the row
        height came from whatever sibling happened to be tallest;
     3. the scroll container had no inline padding, so the first and the
        last pill were clipped flush against the edge.
   Everything below is scoped to `.search-filters.category-filters` so the
   format chips of the search bar (`<x-frontend-search-bar />`, which reuse
   `.search-filters` / `.filter-btn` on the home page) are untouched. */

/* The JS toggle (results.blade.php) hides itself on phones; make the
   `hidden` attribute actually win over the component's display value. */
.search-filters.category-filters .category-filters-toggle[hidden] {
    display: none !important;
}

@media (max-width: 768px) {

    .search-filters.category-filters {
        /* one equal-height row: no stretch, equal gaps, no page overflow */
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        max-width: 100%;
        min-width: 0;
        /* inline padding keeps the first/last pill off the clipped edge;
           the block padding leaves room for the pill shadow (a horizontal
           scroll container clips the vertical overflow too) */
        padding: 6px 2px 14px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-padding-inline: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .search-filters.category-filters::-webkit-scrollbar {
        display: none;
    }

    .search-filters.category-filters .category-chip {
        /* every pill: same height, same horizontal padding, same gap */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        box-sizing: border-box;
        height: 34px;
        min-height: 34px;
        min-width: 72px;
        padding: 0 14px;
        border-radius: 999px;
        font-size: 12px;
        line-height: 1;
        font-weight: 700;
        text-align: center;
        white-space: nowrap;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    /* Active category: the gradient stays, plus a ring/shadow so it reads as
       selected even when the rail is scrolled and only its corners are in
       view. */
    .search-filters.category-filters .category-chip.active {
        color: #FFFFFF;
        font-weight: 800;
        box-shadow: 0 0 0 2px #FFFCF4, 0 3px 8px rgba(255, 112, 115, 0.38);
    }
}

/* ── KOT-333 · المسافة الفارغة قبل قسم «تقييمات ومراجعات الكتاب» ─────────
   On the book details page the «كتب ذات صلة» band (`.related-books-band`)
   ends with FOUR stacked spaces, none of which was designed to sit next to
   the next heading:
     · 24px of slider padding under the cards (`.foryou-track`),
     · 60px of band padding (`.latest-releases-section`),
     · the band's own `margin-bottom: -20px`,
     · 60px of reviews padding.
   On a phone that added up to 124px of dead space between the last card and
   the «تقييمات ومراجعات الكتاب» heading (131px up to the heading box at
   360px and at 390px).
   Below 769px the band that leads straight into the reviews block drops to a
   single 20px bottom padding (which the band's own -20px margin cancels, so
   the two sections meet exactly at the bottom edge of the card strip) and the
   reviews block keeps a single 24px lead-in — the heading now sits ~54px
   under the cards: clearly separated, nothing overlapping, and no empty
   screen area between the two sections.
   Only `.related-books-band` is used on the book details page, so the home /
   publishing «latest releases» banners keep their original padding. */
@media (max-width: 768px) {
    .related-books-band {
        /* 20px + the band's -20px margin bottom = the reviews block starts
           exactly where the cards' strip ends */
        padding-bottom: 20px;
    }

    .reviews-section {
        padding-top: 24px;
    }
}

/* ── KOT-334 — mobile footer: two adjacent link columns ─────────────────
   Ticket «إعادة ترتيب الفوتر إلى قائمتين متجاورتين على الموبايل».

   Before: the `@media (max-width: 992px)` footer block above turns
   .footer-top into a column, so «الدعم والمساعدة» / «روابط سريعة» /
   «عن المنصة» stacked full-width, centred, one under another
   (≈880px of footer at 360px).

   Now: the three lists live inside .footer-links-grid and sit two per row,
   start-aligned, and the third wraps under the first; the social icons stay
   centred directly below them. Below 341px they collapse to one column.
   Appended at EOF so it wins over the earlier footer media query. */

/* Desktop (≥993px): `display: contents` makes the wrapper transparent, so the
   three lists stay direct flex items of .footer-top exactly as before — the
   desktop layout is byte-identical, the wrapper only exists for the mobile
   grid below. (A plain div, so no accessibility tree is lost.) */
.footer-links-grid {
    display: contents;
}

@media (max-width: 992px) {
    .footer-top {
        /* the two-column grid supplies its own spacing */
        margin-bottom: 28px;
    }

    .footer-links-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 24px 20px;
        width: 100%;
    }

    .footer-links-grid .footer-links-group {
        flex: 0 1 auto;
        min-width: 0;
        text-align: start;
    }

    .footer-links-grid .footer-title {
        margin-bottom: 10px;
        line-height: 1.4;
        text-align: start;
    }

    .footer-links-grid ul li {
        margin-bottom: 0;
    }

    /* full-column tap target; long labels wrap instead of widening the column */
    .footer-links-grid ul li a {
        display: block;
        padding: 6px 0;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    /* social icons right under the lists, evenly spaced */
    .footer-middle {
        justify-content: center;
        padding: 16px 0;
    }

    .social-icons {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
}

/* very small screens only: a single column */
@media (max-width: 340px) {
    .footer-links-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    /* keep all six social icons on one row instead of a 5 + 1 wrap */
    .social-icons {
        gap: 8px;
    }

    .social-icons a {
        width: 32px;
        height: 32px;
    }
}

/* ── KOT-335 · تقليل المسافات الفارغة فوق عناوين أقسام الصفحة الرئيسية ─────
   Ticket: «تقليل المسافات الفارغة فوق عناوين أقسام الصفحة الرئيسية».

   Measured in a browser at 360px BEFORE this block, the empty space between
   the last card of a band and the NEXT band's heading was 67px … 147px
   (best-sellers 67, categories 94, publishers 87, most read 147, newest 97,
   top rated 126, most listened 146, latest releases 147), because every band
   stacked its own desktop padding:
     · 60px (publishers/testimonials: 80px) of the band's own padding-top,
     · 60–80px of the PREVIOUS band's padding-bottom,
     · 24px of slider padding under the previous band's cards,
     · an extra 20px / -20px margin pair on the latest-releases band.
   The heading-to-cards space was just as uneven (13px, 20px, 34px, 86px)
   because the publishers / testimonials headers kept 40–50px bottom margins.

   Below 768px every band that carries the `home-section` marker (only the
   homepage components add it, so no other page can inherit these values) now
   shares ONE rhythm:
     · 12px of band padding above the heading,
     · 8px of band padding under the band's content,
     · 12px of slider padding under the cards (kept so the card shadow is not
       clipped by the horizontal scroller),
     · 10px between the heading row and the cards, +4px of slider padding.
   Measured result at 360px AND at 390px, RTL and LTR: 38–42px between the
   last card and the next heading, 26–27px after a band that ends with a
   block, and 14px between a heading and its cards — for every section, and
   always > 0 so a heading can neither touch the band above it nor its cards.
   The whole homepage got ~1700px shorter on a phone.
   Desktop (≥768px) is untouched: every rule lives inside this media query.
   Page-specific decorations (`.related-books-band` on the book details page,
   `.sec-three` related-books bands, the book page's `.audiobooks-section`)
   never carry the marker, so the spacing fixed by the earlier reviews-block
   ticket is unchanged. */
@media (max-width: 767px) {

    /* 1 · one vertical rhythm for every home band */
    .home-section {
        padding-top: 12px;
        padding-bottom: 8px;
    }

    /* the publishers band centres itself with a 60px top margin */
    .home-section.publishers-section {
        margin-top: 0;
    }

    /* the latest-releases band carries an `!important` 20px / -20px margin
       pair (it belongs to the book + publishing bands) and the audiobooks
       band carries an `!important` padding from an older breakpoint, so both
       need `!important` here to join the same rhythm */
    .home-section.latest-releases-section {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .home-section.audiobooks-section {
        padding-top: 12px !important;
        padding-bottom: 8px !important;
    }

    /* the highlighted pricing card is scaled 1.05, i.e. it PAINTS ~10px below
       its own box, so this band keeps 20px underneath and the card can never
       cross into the band below it */
    .home-section.pricing-section {
        padding-bottom: 20px;
    }

    /* 2 · the heading row sits a fixed distance above its cards */
    .home-section .section-header,
    .home-section .publishers-header,
    .home-section .experience-header,
    .home-section .testimonials-header {
        margin-bottom: 10px;
    }

    .home-section:not(.audiobooks-section) .section-header .section-title,
    .home-section .publishers-title,
    .home-section .testimonials-title {
        margin-bottom: 0;
    }

    /* 3 · card strips keep their shadow room without the old 15/24px */
    .home-section .bestsellers-grid,
    .home-section .foryou-track,
    .home-section .recently-track,
    .home-section .categories-track,
    .home-section .publishers-track,
    .home-section .testimonials-track,
    .home-section .audiobooks-track {
        padding-top: 4px;
        padding-bottom: 12px;
    }
}

/* ── KOT-336 · توسيط عنوان الصفحة الرئيسية (Hero) على الموبايل ─────────────
   «Global Responsive Design» block بتاع max-width:768px فيه
   `.hero-title { text-align: right }` (حوالين سطر 6420) جاي من تخطيط قديم
   معتمد على `.hero-container` — صنف مش مستخدم في أي blade دلوقتي — فالقاعدة
   الوحيدة اللي كانت بتوصل فعليًا هي عنوان الهوم. النتيجة على الموبايل: العنوان
   بيبقى ملزوق في جهة واحدة (at 360px: 30px فراغ على شمال العنوان مقابل 20px
   على يمينه في العربية، و 60px مقابل 20px في الإنجليزية) بدل التوسيط اللي
   `.hero-section` نفسها بتعلنه.

   الـ block ده بيرجّع التوسيط على الموبايل وبس (≤768px = نفس الـ breakpoint
   اللي بيغيّر حجم الخط لـ 36px)، فمفيش أي تغيير فوق 768px — يعني شرط
   «لا تغيير فوق 1024px» محقّق من غير أي استثناء (769–1024 كان centered أصلًا).

   Measured after, with the REAL hero blade + the REAL stylesheet, RTL and LTR,
   at 320/360/390/430/576/767/768: `text-align` is `center` and the distance
   from the heading's text box to BOTH edges of `.hero-section` is identical;
   `document.documentElement.scrollWidth == window.innerWidth` everywhere, also
   for a title containing a 55-character unbreakable word. */
@media (max-width: 768px) {

    /* 1 · العنوان في المنتصف أفقيًا — نفس النتيجة في RTL و LTR لأن
       `center` مش متأثر بالاتجاه، والـ `width` الكامل بيتأكد إن المسافتين
       على الجانبين متساويتين بالظبط حتى لو الـ flex item كان fit-content */
    .hero-section .hero-title {
        width: 100%;
        max-width: 100%;
        text-align: center;
        margin-inline: auto;
    }

    /* 2 · الـ -1px letter-spacing (base rule) عند 28–36px بيخلّي الحروف
       تتراكب/تتقص في العربي، فبيترجع normal على الموبايل بس */
    .hero-section .hero-title {
        letter-spacing: normal;
    }

    /* 3 · كلمة طويلة واحدة من غير مسافات كانت بتخرج عن حدود الشاشة ويتقص
       طرفها لأن `.hero-section` عندها `overflow: hidden`؛ دلوقتي بتلتف */
    .hero-section .hero-title,
    .hero-section .hero-title .text-primary {
        overflow-wrap: break-word;
        word-break: normal;
    }
}


/* ── KOT-337 · حواف دائرية موحّدة لصور التصنيفات على الموبايل ───────────────
   The home category cards mix two kinds of artwork: 180x180 square icons and
   ~600x388 landscape photos. `object-fit: contain` inside the 118x84px box
   that KOT-329 introduced painted the square icons at 84x84 centred, so they
   kept their own sharp square corners with 17px of empty card on either side,
   while the landscape photos filled the box and DID receive the 8px radius —
   exactly the "بعضها حوافه حادة والبعض الآخر دائرية" of the ticket.

   Below 768px the image is now a square media box that fills the card's inner
   width, uses `object-fit: cover` (the artwork is scaled with ONE factor, so
   it can never be stretched) and carries the card's own 12px radius, so every
   category image is clipped identically and the artwork always reaches the
   card edge — no letterboxing, no pale bands, no sharp corners:
     · square 180x180 icons render at their native ratio, uncropped;
     · landscape photos are centre-cropped, which a square tile always implies.
   Desktop (>= 768px) keeps its old 180px `contain` box untouched.
   Placed last so it wins over the KOT-329 image rule above. */
@media (max-width: 767px) {
    .categories-section .categories-track .category-img {
        box-sizing: border-box;
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0 0 8px;
        border-radius: 12px;
        object-fit: cover;
        object-position: center center;
        overflow: hidden;
        vertical-align: middle;
    }
}


/* ── KOT-339 · لوجو الفوتر الجديد: مصدر مستقل وأبعاد آمنة على الموبايل ───────
   The footer logo is now its own asset (`images/logo_footer.png` — a square
   coral emblem) instead of mirroring the admin-uploaded header logo, so
   changing one never changes the other (AC3).

   The rules below never set a fixed `width`/`height`: the logo is only
   CONSTRAINED with `max-*`, so the browser scales the artwork with a single
   factor and any logo ratio keeps its original proportions — no stretching,
   no squashing (AC4). `max-width: 100%` guarantees that even an unexpectedly
   wide logo shrinks instead of overflowing the footer at 360/390/414px
   (AC5/AC6), and `object-fit: contain` is the last-resort guard that
   letterboxes rather than stretches if a container ever clamps both axes.

   `.logo-img` is shared with the navbar, so every selector is scoped to
   `.site-footer` (the header keeps its 68/48/40px rules untouched) and the
   block sits last so it wins over `.logo-box img { height: 44px }` above.
   `64px` on desktop / `56px` below 992px (where the footer stacks and
   centres) is the size measured on the real footer at 360, 390 and 414px. */
.site-footer .footer-logo .logo-box .logo-img {
    display: block;
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
    object-position: center center;
}

@media (max-width: 992px) {
    .site-footer .footer-logo .logo-box .logo-img {
        max-height: 56px;
    }
}


/* ── KOT-340 · إيقاع موحّد بين العنوان الرئيسي والعنوان الفرعي (الموبايل) ────
   Ticket: «[Mobile Web] ضبط المسافات بين العناوين الرئيسية والفرعية في أقسام
   الصفحة الرئيسية» — المتابعة المباشرة لـ KOT-335 (البلوك اللي فوق).

   Measured in a browser at 360px and 390px BEFORE this block (the REAL home
   section components + the REAL stylesheet), the heading block had no shared
   rhythm at all:
     · audiobooks — the subtitle carried `margin-top: -12px` while the title
       kept 8px, so the two overlapped by 2px and the space under the subtitle
       (24px) was LARGER than the 12px above the title;
     · experience — 16px between the title and the subtitle;
     · publishers — 6.4px above the subtitle and 12.8px under it;
     · pricing    — 0px between the title and the brand line, 20px under it.
   Sections without a subtitle (best-sellers, categories, …) were already on
   the KOT-335 rhythm (10px under the heading).

   Below 768px every homepage band now shares ONE heading rhythm:
     · 20px from the band's top edge to the main title (the 12px band padding
       KOT-335 set + 8px on the heading) — always MORE than what follows the
       subtitle, which is the ticket's first acceptance criterion;
     · 6px between the main title and its subtitle — small, and identical in
       every rotation (AC2);
     · 10px between the subtitle (or a heading with no subtitle) and the
       band's content.
   20px > 10px, so "المسافة أعلى العنوان الرئيسي أكبر من المسافة أسفل العنوان
   الفرعي" holds for every section. The whole rhythm is block-axis margin, so
   RTL and LTR produce byte-identical numbers (AC4).

   Titles keep wrapping normally (`overflow-wrap: break-word`, no `nowrap`, no
   fixed height), so a long Arabic or English heading grows downwards and can
   never overlap its subtitle or the next band (AC5). Everything lives inside
   `@media (max-width: 767px)`, so tablet (768px) and desktop are untouched
   (AC6), and only the margins BETWEEN the heading parts are overridden —
   KOT-335 keeps ownership of the band padding and of the heading→cards gap
   (AC7). */
@media (max-width: 767px) {

    /* 1 · the main title of every band: 20px below the band's top edge.
       `margin-top` replaces the 6.4px the global reset gives <h2>, so the
       heading box starts exactly 20px (12px band padding + 8px) below the
       band's edge in every section. */
    .home-section .section-title,
    .home-section .publishers-title,
    .home-section .experience-title,
    .home-section .testimonials-title,
    .home-section .pricing-title {
        margin-top: 8px;
        margin-bottom: 0;
        line-height: 1.4;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
    }

    /* 2 · the 6px connector — ONLY where a subtitle follows the title, so a
       heading without one keeps the KOT-335 10px header margin */
    .home-section.audiobooks-section .section-title,
    .home-section .publishers-title,
    .home-section .experience-title,
    .home-section .pricing-title {
        margin-bottom: 6px;
    }

    /* 3 · audiobooks: its subtitle is a SIBLING of `.section-header`, so the
       10px header margin would collapse over the 6px connector and win; the
       header margin is dropped and the subtitle carries the 10px instead */
    .home-section.audiobooks-section .section-header {
        margin-bottom: 0;
    }

    .home-section.audiobooks-section .section-subtitle {
        margin-top: 0;
        margin-bottom: 10px;
        line-height: 1.5;
    }

    /* 4 · the subtitles that live INSIDE their header only need their own
       vertical margins removed — the header keeps the KOT-335 10px margin,
       which is then the single gap before the band's content */
    .home-section .publishers-subtitle,
    .home-section .experience-subtitle {
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.5;
        max-width: 100%;
        overflow-wrap: break-word;
    }

    /* 5 · the legacy mobile block pulls the pricing band 15px up into the band
       above (`margin-top: -15px`), which made the space above its title (5px)
       SMALLER than the space under its brand line (10px) — the exact
       imbalance this ticket is about. On a phone the band now starts where
       the previous one ends, so its title sits on the same 20px rhythm as
       every other section. */
    .home-section.pricing-section {
        margin-top: 0;
    }

    /* 6 · pricing has no header wrapper: the brand line is its subtitle, so it
       carries the same 10px before the plan cards */
    .home-section.pricing-section .pricing-logo-text {
        margin-top: 0;
        margin-bottom: 10px;
        max-width: 100%;
        overflow-wrap: break-word;
    }
}


/* ──────────────────────────────────────────────────────────────────
   KOT-341 — remove the search section from the top of the BOOK DETAILS
   page on MOBILE only.

   The search bar is the first block of `frontend::pages.books.book-details`
   (above the breadcrumb), so on a phone the book content starts after
   ~336px (390px wide) … ~450px (≤767px) of search UI. The page wraps it in
   `.book-details-search`; this block hides that wrapper with `display:none`
   at ≤767px so the section is gone AND reserves no space (AC1/AC2).

   Everything here is scoped to the book-details page marker inside a mobile
   media query, so:
     · 768px and above (tablet + desktop) keep the search bar byte-identical
       (AC4),
     · the home page, search results, category/collection, publishing and
       store pages keep their own `<x-frontend-search-bar />` untouched
       (they have no `.book-details-search` ancestor),
     · the global search (`GET /search`) is not affected at all (AC5).

   `.breadcrumb-container` carries `margin-top: -20px` to tuck it under the
   search section. With the section hidden that pull-up would hug the header,
   so the negative margin is cancelled here: the breadcrumb keeps a natural
   distance from the header and the first element after it
   (`.book-details-layout`) keeps the SAME gap it always had (AC3).
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .book-details-search {
        display: none !important;
    }

    .book-details-search + .breadcrumb-section .breadcrumb-container {
        margin-top: 0;
    }
}
/* ── KOT-338 · عرض موحّد لصور التصنيفات على سطح المكتب والتابلت ─────────────
   The base `.category-img` rule (height: 180px + `object-fit: contain`, no
   width) let the RENDERED WIDTH follow each file's own aspect ratio, so the
   category cards were never aligned: a 180x180 square icon painted 180px, a
   600x388 landscape photo 278px, and the shipped portrait default
   (940x1136 → 149px) looked visibly narrower than every category that owns an
   image — the reported bug. Mobile was already consistent (KOT-337 turns the
   image into a square box), so only >= 768px needed fixing.

   Every category image is now ONE 180x180 media box — the exact size the
   square icons already had, so they render byte-identically — filled with
   `object-fit: cover` (a single scale factor, so nothing is ever stretched)
   and centred horizontally. `object-position: center bottom` is deliberate:
   the shipped default artwork is a portrait illustration whose top band is
   empty background, so a bottom-anchored square crop keeps all of the
   drawing (only the empty margins are cut); landscape files have no vertical
   overflow, so for them the anchor behaves exactly like `center`.
   `max-width: 100%` keeps the box inside the narrower 230px tablet card.
   Placed last, after the KOT-340 block, so it wins over the base rule. */
@media (min-width: 768px) {
    .categories-section .categories-track .category-img {
        box-sizing: border-box;
        display: block;
        width: 180px;
        max-width: 100%;
        height: 180px;
        margin: 0 auto 32px;
        border-radius: 8px;
        object-fit: cover;
        object-position: center bottom;
        overflow: hidden;
        vertical-align: middle;
    }
}

/* ── KOT-344 · المسافة أعلى عنوان صفحة التصنيف وصفحة البحث (الموبايل) ──────
   «تقليل المسافة أعلى عنوان صفحة التصنيف (بعد الـ Breadcrumb)».

   The gap was four spaces that nobody added together on purpose:
     · `.breadcrumb-container` keeps 16px of bottom padding (its own row
       spacing);
     · `.breadcrumb-section` is a `section`, and the phone layout gives
       every section 20px of vertical padding;
     · `.category-page-section` adds another 16px of top padding;
     · the mobile `h1..h6, p` reset adds a 6.4px (0.4rem) top margin to
       the title on the category page.
   That measured 58.4px between the last crumb and the heading at both 360px
   and 390px, and it made the two pages disagree: the search page header
   starts with a count line and its h2 carries an inline `margin: 0`.

   Fix: the breadcrumb keeps its position (only the space UNDER it is
   removed) and the listing header starts right below it, so both pages show
   the same 20px between the breadcrumb and the first header line — the
   rhythm KOT-335/340 already use above the home headings.

   Scoped to `.listing-breadcrumb` and `.listing-header-section`, classes that
   only the category and search blades add, so the book-details, collection
   and publishing breadcrumbs keep their current spacing. Nothing outside
   this media query changes, so desktop and tablet are untouched. No element
   here has a fixed height; only padding/margins are trimmed. */
@media (max-width: 767px) {
    .breadcrumb-section.listing-breadcrumb {
        padding-bottom: 6px !important;
    }

    .breadcrumb-section.listing-breadcrumb .breadcrumb-container {
        padding-bottom: 6px;
    }

    .category-page-section.listing-header-section {
        padding-top: 8px !important;
    }

    .listing-header-section .category-header-text h2 {
        margin-top: 0;
    }
}


/* ── KOT-346 · إيقاع المسافات في قسم «انشر كتابك الآن» (الموبايل) ───────────
   Ticket: «ضبط المسافات في قسم «انشر كتابك الآن» – الصفحة الرئيسية»
   (Mobile Web only — the desktop/tablet layout must stay byte-identical).

   Measured in a browser at 360px and 390px BEFORE this block (the REAL
   `cta-publishing` component + the REAL stylesheet):
     · above the title — 60.4px from the band's top edge to the title box
       (12px band padding owned by KOT-335 + 2px card border + 40px card
       padding + the 6.4px <h2> margin), while every other home band puts its
       title exactly 20px below its own top edge ⇒ this heading floated ~40px
       lower than the rhythm KOT-335 / KOT-340 established;
     · title → subtitle — 22.4px (16px title margin + the 6.4px <p> margin,
       the content is a flex column so they do NOT collapse), against the 6px
       connector every other band uses;
     · subtitle → plan cards — 32px against the 10px gap used under a
       subtitle everywhere else;
     · the space below the subtitle before the cards was therefore larger than
       the space above the title, i.e. the exact imbalance the ticket reports.

   AFTER (measured at 360/390/430/576/767 in RTL AND LTR):
     · 20px of card padding above the main title — the SAME 20px rhythm the
       other bands use between their own top edge and their title; the card
       border (2px) and the band padding (12px, still owned by KOT-335) sit
       above that, exactly like the previous band's own padding sits above any
       other heading, so the visible space between the previous module's last
       card and this title lands on the page rhythm instead of ~80px;
     · 6px between the main title and the subtitle;
     · 10px between the subtitle and the plan cards.
   Type sizes, colours, the card's inline/bottom padding and the plan cards
   themselves are untouched, so the block keeps its visual identity (AC4).

   Everything lives inside `@media (max-width: 767px)`: at 768px and above the
   container keeps its 40px/60px padding and the 16px/32px heading margins,
   byte-identical to HEAD (AC5). Every selector is scoped to BOTH the
   `cta-publishing-section` class and the `home-section` marker, so no other
   page or module can inherit these rules. */
@media (max-width: 767px) {

    /* 1 · the card's own top padding carries the 20px rhythm above the title
       (the base 40px is what made the heading float) */
    .home-section.cta-publishing-section .cta-publishing-container {
        padding-top: 20px;
    }

    /* 2 · the title now owns the 6px connector to its subtitle instead of the
       old 16px bottom margin + the <h2> top margin */
    .home-section.cta-publishing-section .cta-publishing-title {
        margin-top: 0;
        margin-bottom: 6px;
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
    }

    /* 3 · the subtitle keeps the shared 10px before the section's content */
    .home-section.cta-publishing-section .cta-publishing-subtitle {
        margin-top: 0;
        margin-bottom: 10px;
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
    }
}

/* ── KOT-372 — footer contact details + app-store links ─────────────────────
   The footer now renders the official e-mail/phone and one button per store
   link that is actually configured in «إعدادات الموقع» (KOT-372). The rules
   below only style the NEW `.footer-contact` block and its mobile variant;
   `.app-btn` (the store buttons) already exists and is deliberately reused so
   the design stays identical. Appended at EOF so it wins over the earlier
   footer media queries. */
.footer-contact {
    flex: 1;
    min-width: 200px;
}

.footer-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    margin-bottom: 12px;
}

.footer-contact a,
.footer-contact .footer-contact-text {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #D1D5DB;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    transition: color 0.2s;
    overflow-wrap: anywhere;
}

.footer-contact a:hover {
    color: var(--primary);
}

.footer-contact i {
    font-size: 16px;
    color: #FDF4E5;
    flex: 0 0 auto;
}

@media (max-width: 992px) {
    .footer-contact {
        min-width: 100%;
        text-align: center;
    }

    .footer-contact a,
    .footer-contact .footer-contact-text {
        justify-content: center;
        font-size: 13px;
    }
}