/* ====================================================================
   🎨 1001KİTAB — PREMİUM LOGO-YELLOW & SLATE-DARK DİZAYN SİSTEMİ
   Primary      : Logo Sarı (#F6C00D)
   Primary Dark : Oxunaqlı Qızılı (#E0AF0B)
   Dark Slate   : Premium Kontrast Qara (#0F172A)
   ==================================================================== */

:root {
    --clr-primary:         #F6C00D;
    --clr-primary-light:   #FEF9E6;
    --clr-primary-dark:    #E0AF0B;
    --clr-dark:            #0F172A;
    --clr-dark-light:      #1E293B;
    --clr-paper:           #FAF9F5;
    --clr-border:          #E2E8F0;
    --clr-success:         #10B981;
    --clr-danger:          #EF4444;
}

/* --- Override standard Bootstrap Dark/Black utility classes with Slate Dark (#0F172A) --- */
.text-dark, .text-black, [class*="text-dark"], [class*="text-black"] {
    color: var(--clr-dark) !important;
}

.bg-dark, .bg-black, [class*="bg-dark"], [class*="bg-black"] {
    background-color: var(--clr-dark) !important;
}

.btn-dark {
    background-color: var(--clr-dark) !important;
    border-color:     var(--clr-dark) !important;
    color:            #FFFFFF !important;
    transition:       all 0.2s ease-in-out !important;
}
.btn-dark:hover, .btn-dark:focus, .btn-dark:active {
    background-color: var(--clr-dark-light) !important;
    border-color:     var(--clr-dark-light) !important;
    color:            #FFFFFF !important;
    box-shadow:       0 4px 12px rgba(15, 23, 42, 0.15) !important;
}

/* --- Google Font: Inter --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

body {
    background: var(--clr-paper) !important;
    color: var(--clr-dark) !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* --- Toastr, alerts --- */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
}

@media only screen and (max-width: 767px) {
    #toast-container {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* --- Links & typography default --- */
a {
    color: var(--clr-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: var(--clr-primary-dark);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--clr-dark) !important;
    font-weight: 800;
}

/* --- Bootstrap btn-primary override (Sarı düymə, Slate Qara yazı) --- */
.btn-primary {
    background-color: var(--clr-primary) !important;
    border-color:     var(--clr-primary) !important;
    color:            var(--clr-dark) !important;
    font-weight:      700 !important;
    border-radius:    10px !important;
    transition:       all 0.2s ease !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--clr-primary-dark) !important;
    border-color:     var(--clr-primary-dark) !important;
    color:            var(--clr-dark) !important;
    box-shadow:       0 4px 12px rgba(246,192,13,0.3) !important;
}

/* --- btn-outline-primary --- */
.btn-outline-primary {
    color:            var(--clr-primary-dark) !important;
    border-color:     var(--clr-primary) !important;
    border-radius:    10px !important;
    font-weight:      600 !important;
    transition:       all 0.2s ease !important;
}
.btn-outline-primary:hover {
    background-color: var(--clr-primary) !important;
    border-color:     var(--clr-primary) !important;
    color:            var(--clr-dark) !important;
}

/* --- text-primary, bg-primary overrides --- */
.text-primary   { color: var(--clr-primary-dark) !important; }
.bg-primary     { background-color: var(--clr-primary) !important; }
.border-primary { border-color: var(--clr-primary) !important; }

/* --- Badge bg-primary --- */
.badge.bg-primary, .badge.text-bg-primary {
    background-color: var(--clr-primary) !important;
    color: var(--clr-dark) !important;
}

/* --- Pagination active --- */
.page-item.active .page-link {
    background-color: var(--clr-primary) !important;
    border-color:     var(--clr-primary) !important;
    color:            var(--clr-dark) !important;
    font-weight:      700 !important;
}
.page-link {
    color: var(--clr-dark) !important;
    border-radius: 8px !important;
    margin: 0 2px;
}
.page-link:hover {
    background-color: var(--clr-primary-light) !important;
    color: var(--clr-primary-dark) !important;
}

/* --- Form controls focus --- */
.form-control:focus, .form-select:focus {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(246, 192, 13, 0.2) !important;
}

/* --- List group items --- */
.list-group-item a {
    color: var(--clr-dark-light); 
}
.list-group-item a:hover {
    color: var(--clr-primary-dark); 
}
.list-group-item.active {
    background-color: var(--clr-primary) !important;
    border-color: var(--clr-primary) !important;
    color: var(--clr-dark) !important;
}

/* --- Scrollbar styling --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--clr-paper); }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-primary-dark); }

/* --- Dropdown menus --- */
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--clr-primary-light) !important;
    color: var(--clr-primary-dark) !important;
}
.dropdown-item.active {
    background-color: var(--clr-primary) !important;
    color: var(--clr-dark) !important;
}

/* ============================================================
   HEADER — Premium Kitabxana Dizaynı & UX
   ============================================================ */
.main-header-container {
    background: #FFFFFF !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
    padding: 0 !important;
    position: relative;
    z-index: 999;
}

.header-row {
    padding: 18px 0 !important;
}

/* Logo brand bounce scale */
.header-logo-link {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.header-logo-link:hover {
    transform: scale(1.05);
}
.header-logo-img {
    max-height: 42px !important;
    display: block;
}

/* --- THE SEARCH ENGINE COMPONENT --- */
.search-form {
    margin: 0 !important;
    padding: 0 !important;
}

.search-input-wrapper {
    display: block;
    position: relative;
}

.search-input-field {
    padding: 13px 54px 13px 22px !important;
    border-radius: 50px !important;
    border: 1.5px solid #E2E8F0 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    background-color: var(--clr-paper) !important;
    color: var(--clr-dark) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.search-input-field:focus {
    background-color: #FFFFFF !important;
    border-color: var(--clr-primary) !important;
    box-shadow: 0 0 0 4px rgba(246, 192, 13, 0.15) !important;
    color: var(--clr-dark) !important;
}

/* High contrast search circle-pill button */
.btn-search-submit {
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: var(--clr-primary) !important;
    color: var(--clr-dark) !important;
    border-radius: 50% !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: 0 2px 6px rgba(246, 192, 13, 0.15) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
}

.btn-search-submit:hover {
    background: var(--clr-primary-dark) !important;
    transform: translateY(-50%) scale(1.06) !important;
    box-shadow: 0 4px 12px rgba(246, 192, 13, 0.3) !important;
}

.btn-search-submit svg {
    color: var(--clr-dark) !important;
}

/* --- PREMIUM CIRCULAR ACTION TILES --- */
.header-icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    color: var(--clr-dark-light) !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.01) !important;
}

.header-icon-btn:hover {
    background: var(--clr-primary) !important;
    border-color: var(--clr-primary) !important;
    color: var(--clr-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(246, 192, 13, 0.25) !important;
}

.header-icon-btn svg {
    transition: transform 0.2s ease;
}

.header-icon-btn:hover svg {
    transform: scale(1.05);
}

/* Vibrant Glossy Notification Badge */
.header-badge {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    min-width: 19px !important;
    height: 19px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #FF5E36, #FF3B30) !important;
    color: #FFFFFF !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    border: 2px solid #FFFFFF !important;
    box-shadow: 0 4px 10px rgba(255, 59, 48, 0.35) !important;
    z-index: 2;
}

/* Boş səbət/istək siyahısında "0" göstərmə */
.header-badge.d-none {
    display: none !important;
}

/* Hamburger yalnız mobildə */
@media (min-width: 992px) {
    .header-icon-btn.d-lg-none {
        display: none !important;
    }
}

/* User account display text color */
.username-text {
    font-size: 0.82rem !important;
    color: var(--clr-dark) !important;
    transition: color 0.2s ease;
}
.header-icon-btn:hover .username-text {
    color: var(--clr-dark) !important;
}

/* --- THE SUB-NAVIGATION SYSTEM --- */
.desktop-navigation-bar {
    background: #FFFFFF !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
    padding: 0 !important;
}

.navigation-row {
    gap: 6px !important;
    height: 52px !important;
}

.nav-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 18px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--clr-dark) !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap !important;
}

.nav-pill:hover {
    background: var(--clr-dark) !important;
    color: var(--clr-primary) !important;
}

.nav-pill-accent {
    color: var(--clr-primary-dark) !important;
    font-weight: 700 !important;
    background: var(--clr-primary-light) !important;
}

.nav-pill-accent:hover {
    background: var(--clr-primary) !important;
    color: var(--clr-dark) !important;
}

/* Category grid activator */
.category-btn {
    background: var(--clr-primary) !important;
    color: var(--clr-dark) !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    padding: 9px 18px !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(246, 192, 13, 0.15) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.category-btn:hover {
    background: var(--clr-dark) !important;
    color: var(--clr-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.25) !important;
}

/* "Digər Məhsullar" – ikinci dərəcəli düymə */
.category-btn-secondary {
    background: #FFFDF5 !important;
    color: #78350F !important;
    border: 1.5px solid #F59E0B !important;
    box-shadow: none !important;
}

.category-btn-secondary:hover {
    background: #FEF3C7 !important;
    color: #78350F !important;
    box-shadow: none !important;
}

/* Axtarış dropdown-u */
#search-results, #mobile-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 450px;
    overflow-y: auto;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    background: white;
    border: 1px solid var(--clr-border);
    display: none;
    padding: 0;
    margin-top: 8px;
}

.search-result-item {
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--clr-border);
}
.search-result-item:last-child {
    border-bottom: none;
}
.search-result-item:hover {
    background-color: var(--clr-primary-light) !important;
}


/* --- Premium Mini-Cart (Offcanvas Start) Styling --- */
.mini-cart-items-list {
    list-style: none;
    padding: 1.25rem;
    margin: 0;
    overflow-y: auto;
    flex-grow: 1;
}

.mini-cart-item-row {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 0.95rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(15, 23, 42, 0.04);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.01);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mini-cart-item-row:hover {
    border-color: rgba(246, 192, 13, 0.25);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.03);
    transform: translateY(-2px);
}

.mini-cart-cover-container {
    background: #FFFFFF;
    padding: 0.3rem;
    border-radius: 9px;
    border: 1px solid #F1F5F9;
    box-shadow: 0 3px 8px rgba(0,0,0,0.03);
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.mini-cart-item-row:hover .mini-cart-cover-container {
    transform: scale(1.05);
}

.mini-cart-img {
    height: 64px;
    width: auto;
    object-fit: contain;
    border-radius: 4px;
}

.mini-cart-title-link {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--clr-dark);
    text-decoration: none;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s ease;
}

.mini-cart-title-link:hover {
    color: var(--clr-primary-dark);
}

.mini-cart-meta {
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mini-cart-price {
    font-weight: 700;
    color: #10B981;
    font-size: 0.85rem;
}

.mini-cart-qty-mul {
    font-size: 0.75rem;
    color: #94A3B8;
    font-weight: 600;
}

.mini-cart-subtotal {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--clr-dark);
}

/* Mini Stepper */
.mini-cart-stepper {
    display: flex;
    align-items: center;
    background: #F1F5F9;
    border-radius: 8px;
    padding: 0.2rem;
    border: 1px solid #E2E8F0;
}

.mini-stepper-btn {
    border: none;
    background: #FFFFFF;
    color: #475569;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    transition: all 0.15s ease;
}

.mini-stepper-btn:hover {
    background: var(--clr-primary);
    color: var(--clr-dark);
}

.mini-stepper-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--clr-dark);
    min-width: 20px;
    text-align: center;
}

/* Trash */
.mini-cart-trash-btn {
    border: none;
    background: transparent;
    color: #94A3B8;
    cursor: pointer;
    padding: 0.25rem;
    transition: all 0.15s ease;
}

.mini-cart-trash-btn:hover {
    color: var(--clr-danger);
    transform: scale(1.15);
}

/* Footer Section */
.mini-cart-footer-section {
    background: #FFFFFF;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    padding: 1.5rem;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.02);
    margin-top: auto;
}

.mini-cart-summary-row {
    margin-bottom: 1.25rem;
}

.summary-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #64748B;
}

.summary-value {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--clr-dark);
}

.mini-cart-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 0.75rem;
}

.mini-cart-btn-secondary {
    background: #FFFFFF;
    color: #475569;
    border: 1px solid #E2E8F0;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 10px;
    text-align: center;
    padding: 0.85rem 0;
    text-decoration: none;
    transition: all 0.2s ease;
}

.mini-cart-btn-secondary:hover {
    background: #F8FAFC;
    color: var(--clr-dark);
    border-color: #CBD5E1;
}

.mini-cart-btn-primary {
    background: var(--clr-primary);
    color: var(--clr-dark);
    font-weight: 800;
    font-size: 0.9rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(246, 192, 13, 0.25);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mini-cart-btn-primary:hover {
    background: var(--clr-primary-dark);
    color: var(--clr-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(246, 192, 13, 0.35);
}

.mini-cart-btn-primary svg {
    transition: transform 0.25s ease;
}

.mini-cart-btn-primary:hover svg {
    transform: translateX(4px);
}

/* Empty State */
.mini-cart-empty {
    text-align: center;
    padding: 5rem 1.5rem;
    margin: auto 0;
}

.mini-cart-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FFFBEB;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-primary);
    margin: 0 auto 1.25rem;
    box-shadow: 0 4px 12px rgba(246, 192, 13, 0.08);
}

.mini-cart-empty .empty-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--clr-dark);
    margin-bottom: 0.5rem;
}

.mini-cart-empty .empty-subtitle {
    font-size: 0.8rem;
    color: #64748B;
    margin-bottom: 1.5rem;
    line-height: 1.45;
}

@media (max-width: 576px) {
    .header-icon-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
    }
    .header-icon-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
    .header-logo-img {
        max-height: 32px !important;
    }
}


/* ====================================================================
   🛒 SƏBƏT SƏHİFƏSİ (CART INDEX) STİLLƏRİ
   ==================================================================== */
.cart-page-wrapper {
    background-color: #F8FAFC;
    min-height: 85vh;
    padding-top: 1rem;
    padding-bottom: 5rem;
}

.cart-title-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.cart-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--clr-dark);
    margin: 0;
    letter-spacing: -0.02em;
}

.cart-badge {
    background-color: var(--clr-primary);
    color: var(--clr-dark);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.4rem 0.9rem;
    border-radius: 50rem;
    margin-left: 1rem;
    box-shadow: 0 4px 12px rgba(246, 192, 13, 0.25);
}

.premium-card {
    background: #FFFFFF;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
    overflow: hidden;
}

.cart-item-list {
    padding: 1.5rem;
}

.cart-item-row {
    background: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 1.25rem;
    border-radius: 16px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 1rem;
    border: 1px solid #F1F5F9;
}

.cart-item-row:hover {
    background: #FAFAFB;
    border-color: rgba(246, 192, 13, 0.2);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

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

.book-cover-container {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 0.4rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    border: 1px solid #F1F5F9;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.cart-item-row:hover .book-cover-container {
    transform: translateY(-3px);
}

.book-title {
    font-weight: 700;
    color: var(--clr-dark);
    font-size: 1.05rem;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s ease;
    word-break: break-word;
}

.book-title:hover {
    color: var(--clr-primary-dark);
}

.item-price-tag {
    color: var(--clr-success);
    font-weight: 700;
    font-size: 0.95rem;
}

/* Custom Stepper style */
.cart-stepper {
    display: inline-flex;
    align-items: center;
    background: #F1F5F9;
    border-radius: 12px;
    padding: 0.3rem;
    border: 1px solid #E2E8F0;
}

.stepper-btn {
    border: none;
    background: #FFFFFF;
    color: #475569;
    border-radius: 9px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.stepper-btn:hover {
    background: var(--clr-primary);
    color: var(--clr-dark);
    transform: scale(1.05);
}

.stepper-input {
    width: 36px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 1rem;
    color: var(--clr-dark);
    pointer-events: none;
}

/* Delete button styling */
.premium-trash-btn {
    color: #94A3B8;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    background: transparent;
}

.premium-trash-btn:hover {
    color: var(--clr-danger);
    transform: scale(1.15) rotate(3deg);
}

/* Summary Card Style */
.summary-card {
    background: #FFFFFF;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
    padding: 2rem;
    position: sticky;
    top: 2rem;
}

.summary-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--clr-dark);
    letter-spacing: 0.05em;
    border-bottom: 2px solid #F1F5F9;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.summary-row.total-row {
    border-top: 2px dashed #F1F5F9;
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 0;
}

/* Animated Checkout Button */
.checkout-cta-btn {
    background: var(--clr-primary);
    color: var(--clr-dark);
    border-radius: 14px;
    font-weight: 800;
    font-size: 1.1rem;
    padding: 1.1rem 1.6rem;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 6px 20px rgba(246, 192, 13, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.checkout-cta-btn:hover {
    background: var(--clr-primary-dark);
    color: var(--clr-dark);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(246, 192, 13, 0.45);
}

.checkout-cta-btn svg {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.checkout-cta-btn:hover svg {
    transform: translateX(6px);
}

/* Custom Warnings */
.custom-warning-card {
    background: #FFFBEB;
    border: 1px solid #FEF3C7;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1.25rem;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.05);
}

.custom-warning-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #FEF3C7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D97706;
}

/* Empty State Style */
.premium-empty-state {
    text-align: center;
    padding: 5rem 2rem;
}

.empty-icon-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #FFFBEB;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.75rem;
    color: var(--clr-primary);
    box-shadow: 0 10px 24px rgba(246, 192, 13, 0.12);
}


/* ====================================================================
   💳 SİFARİŞİ TAMAMLA (CHECKOUT) SƏHİFƏSİ STİLLƏRİ
   ==================================================================== */
.checkout-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    padding: 28px;
    margin-bottom: 24px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.checkout-card:hover {
    border-color: #D1D5DB;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
}
.form-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #4B5563;
    margin-bottom: 8px;
    display: inline-block;
}
.form-control, .form-select {
    border-radius: 10px;
    border: 1.5px solid #E5E7EB;
    padding: 12px 16px;
    font-size: 0.92rem;
    color: var(--clr-dark);
    font-weight: 500;
    background-color: #FAF9F8;
    transition: all 0.2s ease-in-out;
}
.form-control:focus, .form-select:focus {
    background-color: #ffffff;
    border-color: var(--clr-primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
}
.form-control::placeholder {
    color: #9CA3AF;
    font-weight: 400;
}
.btn-checkout {
    background: var(--clr-primary);
    color: var(--clr-dark);
    font-weight: 800;
    font-size: 1.05rem;
    padding: 14px 24px;
    border: none;
    border-radius: 12px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-checkout:hover {
    background: var(--clr-primary-dark);
    color: var(--clr-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
}
.btn-checkout:active {
    transform: translateY(0);
}
.item-thumbnail {
    width: 48px;
    height: 68px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: #fff;
}
.accent-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.1rem;
}

/* ====================================================================
   📚 [ignoring loop detection] PREMIUM 1001KITAB PRODUCT CARD REDESIGN
   ==================================================================== */
.card-product {
    position: relative !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 20px !important;
    background: #FFFFFF !important;
    border: 1px solid #F1F5F9 !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.02) !important;
}

.card-product:hover {
    border-color: rgba(246, 192, 13, 0.35) !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08) !important;
}

.card-product .card-body {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 0 !important;
}

/* --- PHOTO STAGE & IMAGE MOUNT --- */
.card-product .img-wrapper {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 125% !important;
    background: #FAF9F6 !important; /* Soft warm kit-paper spotlight */
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.03) !important;
}

.card-product .img-wrapper a {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important; /* Brought book much closer & larger */
}

.card-product .img-wrapper img {
    max-width: 95% !important; /* Increased dimension to bring book closer */
    max-height: 95% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    filter: drop-shadow(4px 8px 16px rgba(15, 23, 42, 0.12)) !important; /* Physical book shadow */
}

/* Cover forward-tilt hover interaction */
.card-product:hover .img-wrapper img {
    transform: scale(1.05) rotate(1deg) translateY(-3px) !important;
    filter: drop-shadow(6px 14px 24px rgba(15, 23, 42, 0.18)) !important;
}

/* Elegant Pill Badge */
.card-product .badge-discount {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 5 !important;
    background: linear-gradient(135deg, #FF5E36, #FF3B30) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.6px !important;
    padding: 5px 10px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.25) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* --- INFORMATION LAYOUT --- */
.card-product .product-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 1rem 1.15rem 1.15rem !important;
    background: #FFFFFF !important;
}

/* Publisher/Author brand style */
.card-product .product-author {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--clr-primary-dark) !important;
    margin-bottom: 0.35rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* Modern responsive title */
.card-product .product-title {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    color: var(--clr-dark) !important;
    margin: 0 0 auto !important;
    padding-bottom: 0.75rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.card-product:hover .product-title {
    color: var(--clr-primary-dark) !important;
}

/* Separator & Pricing */
.card-product .price-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 0.85rem !important;
    border-top: 1px dashed #E2E8F0 !important;
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
}

.card-product .price-block {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.1 !important;
}

.card-product .price-current {
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    color: var(--clr-dark) !important;
    letter-spacing: -0.3px !important;
}

.card-product .price-old {
    font-size: 0.75rem !important;
    text-decoration: line-through !important;
    color: #94A3B8 !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
}

/* Səbətə at - Compact circle-pill CTA */
.card-product .btn-add-cart {
    background: var(--clr-primary) !important;
    color: var(--clr-dark) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 9px 12px !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 12px rgba(246, 192, 13, 0.15) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

.card-product .btn-add-cart:hover {
    background: var(--clr-primary-dark) !important;
    transform: scale(1.04) translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(246, 192, 13, 0.3) !important;
}

.card-product .btn-add-cart:active {
    transform: scale(0.96) !important;
}

/* --- MOBILE RESPONSIVENESS OVERRIDES --- */
@media (max-width: 576px) {
    .card-product {
        border-radius: 16px !important;
    }
    .card-product .img-wrapper {
        padding-bottom: 120% !important;
    }
    .card-product .img-wrapper a {
        padding: 4px !important; /* Maximize mobile book covers */
    }
    .card-product .product-info {
        padding: 0.75rem 0.85rem 0.85rem !important;
    }
    .card-product .product-author {
        font-size: 0.6rem !important;
        margin-bottom: 0.25rem !important;
    }
    .card-product .product-title {
        font-size: 0.8rem !important;
        line-height: 1.35 !important;
        padding-bottom: 0.5rem !important;
    }
    .card-product .price-current {
        font-size: 1.05rem !important;
    }
    .card-product .btn-add-cart {
        padding: 8px 10px !important;
        font-size: 0.65rem !important;
        border-radius: 10px !important;
    }
}

/* --- CHECKOUT SUMMARY BADGE --- */
.checkout-item-badge {
    background: linear-gradient(135deg, #FF5E36, #FF3B30) !important;
    color: #FFFFFF !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    padding: 3px 7px !important;
    border: 1.5px solid #FFFFFF !important;
    box-shadow: 0 4px 8px rgba(255, 59, 48, 0.3) !important;
    line-height: 1 !important;
    z-index: 2 !important;
}

/* --- MULTI-LEVEL CATEGORIES DROPDOWN (DESKTOP) --- */

/* Main dropdown container */
.desktop-navigation-bar .dropdown-menu {
    border-radius: 16px !important;
    border: 1px solid rgba(15, 23, 42, 0.04) !important;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08) !important;
    padding: 10px !important;
    min-width: 250px !important;
    background: #FFFFFF !important;
    border-top: 3px solid var(--clr-primary) !important; /* Elegant yellow top indicator line */
    margin-top: 8px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Individual list item */
.desktop-navigation-bar .dropdown-menu li {
    position: relative !important;
    list-style: none !important;
    margin-bottom: 2px !important;
}

.desktop-navigation-bar .dropdown-menu li:last-child {
    margin-bottom: 0 !important;
}

/* Category menu links */
.desktop-navigation-bar .dropdown-menu .dropdown-item {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: var(--clr-dark) !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Hover highlights */
.desktop-navigation-bar .dropdown-menu .dropdown-item:hover,
.desktop-navigation-bar .dropdown-menu .dropdown-item:focus {
    background: var(--clr-primary) !important;
    color: var(--clr-dark) !important;
    padding-left: 18px !important; /* Gentle padding slide offset on hover */
}

/* Chevron positioning */
.desktop-navigation-bar .dropdown-menu .submenu-chevron {
    color: #94A3B8 !important;
    transition: all 0.2s ease !important;
    opacity: 0.7 !important;
}

.desktop-navigation-bar .dropdown-menu .dropdown-item:hover .submenu-chevron {
    color: var(--clr-dark) !important;
    transform: translateX(2px) !important; /* Micro shift chevron to right on hover */
    opacity: 1 !important;
}

/* Submenu trigger transition */
.desktop-navigation-bar .dropdown-menu li.has-submenu > .dropdown-menu {
    position: absolute !important;
    top: -10px !important;
    left: 100% !important;
    margin-left: 2px !important;
    margin-top: 0 !important;
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(10px) !important;
    pointer-events: none !important;
    border-top: 1px solid rgba(15, 23, 42, 0.04) !important; /* Normal flat border-top on submenus */
    border-left: 3px solid var(--clr-primary) !important; /* Left highlight border for flyout */
}

/* Hover to flyout */
.desktop-navigation-bar .dropdown-menu li.has-submenu:hover > .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
}

/* --- MOBILE OFFCANVAS MENU --- */
.offcanvas-start {
    border-right: 1px solid rgba(15, 23, 42, 0.04) !important;
    box-shadow: 10px 0 30px rgba(15, 23, 42, 0.03) !important;
    width: 310px !important;
}

#navbar-default .offcanvas-header {
    padding: 18px 24px !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

#navbar-default .offcanvas-body {
    padding: 24px !important;
    background: #FFFFFF !important;
}

/* Collapsed mobile category card styling */
#navbar-default .collapse .card-body {
    background: var(--clr-paper) !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 12px !important;
}

#navbar-default .list-group-item {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 2px !important;
}

#navbar-default .list-group-item a {
    color: var(--clr-dark) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
}

#navbar-default .list-group-item a:hover {
    background: var(--clr-primary-light) !important;
    color: var(--clr-primary-dark) !important;
    padding-left: 18px !important;
}

/* Nav links in offcanvas */
#navbar-default .navbar-nav .nav-item {
    margin-bottom: 8px !important;
}

#navbar-default .navbar-nav .nav-link {
    color: var(--clr-dark) !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    padding: 12px 18px !important;
    border-radius: 12px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: #F8FAFC !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid rgba(15, 23, 42, 0.02) !important;
}

#navbar-default .navbar-nav .nav-link:hover {
    background: var(--clr-primary-light) !important;
    color: var(--clr-primary-dark) !important;
    transform: translateX(4px) !important;
    border-color: rgba(246, 192, 13, 0.15) !important;
}

#navbar-default .navbar-nav .nav-link.nav-pill-accent {
    background: var(--clr-primary) !important;
    color: var(--clr-dark) !important;
    box-shadow: 0 4px 12px rgba(246, 192, 13, 0.15) !important;
}

#navbar-default .navbar-nav .nav-link.nav-pill-accent:hover {
    background: var(--clr-primary-dark) !important;
}

/* --- HEADER TRACKING PILL BUTTON --- */
.btn-tracking-header {
    background: #FFFFFF !important;
    color: var(--clr-dark) !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 30px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: none !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.btn-tracking-header:hover {
    background: var(--clr-primary) !important;
    color: var(--clr-dark) !important;
    border-color: var(--clr-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(246, 192, 13, 0.25) !important;
}

.btn-tracking-header:active {
    transform: translateY(0) !important;
}

/* --- PREMIUM BANNER SLIDER & GLASSMORPHISM --- */

.hero-slider {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    box-shadow: 0 15px 45px rgba(15, 23, 42, 0.08) !important;
}

/* Call to action pill (bannerlərin öz yazısı var, düymə küncdə durur) */
.btn-slide-cta {
    position: absolute !important;
    left: 28px !important;
    bottom: 28px !important;
    background: #FFFFFF !important;
    color: var(--clr-dark) !important;
    padding: 12px 26px !important;
    border-radius: 30px !important;
    font-weight: 800 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.8px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.btn-slide-cta svg {
    transition: transform 0.2s ease !important;
}

.slider-item:hover .btn-slide-cta,
.btn-slide-cta:hover {
    background: var(--clr-primary) !important;
    color: var(--clr-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(246, 192, 13, 0.35) !important;
}

.slider-item:hover .btn-slide-cta svg,
.btn-slide-cta:hover svg {
    transform: translateX(3px) !important;
}

/* --- PREMIUM SLICK NAVIGATION DOTS --- */
.hero-slider .slick-dots {
    bottom: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.hero-slider .slick-dots li {
    margin: 0 4px !important;
    display: inline-block !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    width: auto !important;
    height: auto !important;
}

.hero-slider .slick-dots li button {
    width: 10px !important;
    height: 10px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    border-radius: 50% !important;
    border: none !important;
    padding: 0 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
}

.hero-slider .slick-dots li button:before {
    display: none !important; /* Remove slick default font dots */
}

/* Stretchy active pill dot */
.hero-slider .slick-dots li.slick-active button {
    width: 28px !important;
    height: 10px !important;
    background: var(--clr-primary) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(246, 192, 13, 0.3) !important;
}

/* --- SLICK FLOATING NAVIGATION ARROWS --- */
.hero-slider .slick-prev,
.hero-slider .slick-next {
    width: 48px !important;
    height: 48px !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    z-index: 5 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.hero-slider .slick-prev {
    left: 20px !important;
    transform: translateY(-50%) translateX(-15px) !important;
}

.hero-slider .slick-next {
    right: 20px !important;
    transform: translateY(-50%) translateX(15px) !important;
}

/* Slide into view on slider hover */
.hero-slider:hover .slick-prev,
.hero-slider:hover .slick-next {
    opacity: 1 !important;
    visibility: visible !important;
}

.hero-slider:hover .slick-prev {
    transform: translateY(-50%) translateX(0) !important;
}

.hero-slider:hover .slick-next {
    transform: translateY(-50%) translateX(0) !important;
}

.hero-slider .slick-prev:hover,
.hero-slider .slick-next:hover {
    background: var(--clr-primary) !important;
    border-color: var(--clr-primary) !important;
}

.hero-slider .slick-prev:before {
    content: '←' !important;
    font-family: inherit !important;
    font-size: 18px !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
    display: block !important;
}

.hero-slider .slick-next:before {
    content: '→' !important;
    font-family: inherit !important;
    font-size: 18px !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
    display: block !important;
}

.hero-slider .slick-prev:hover:before,
.hero-slider .slick-next:hover:before {
    color: var(--clr-dark) !important;
}

/* --- MOBILE RESPONSIVENESS OVERRIDES --- */
@media (max-width: 768px) {
    .hero-slider,
    .hero-slider .slider-item {
        border-radius: 14px !important;
    }

    .btn-slide-cta {
        display: none !important;
    }

    .hero-slider .slick-dots {
        bottom: 8px !important;
    }

    .hero-slider .slick-dots li button {
        width: 7px !important;
        height: 7px !important;
    }

    .hero-slider .slick-dots li.slick-active button {
        width: 18px !important;
        height: 7px !important;
    }
}

/* --- ANA SƏHİFƏ: BÖLMƏ BAŞLIQLARI --- */
.home-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 1.5rem;
}

.home-section-title {
    position: relative;
    margin: 0;
    padding-bottom: 10px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--clr-dark);
}

.home-section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: 3px;
    background: var(--clr-primary);
}

.home-section-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--clr-dark);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.home-section-link svg {
    transition: transform 0.2s ease;
}

.home-section-link:hover {
    color: var(--clr-primary-dark);
}

.home-section-link:hover svg {
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .home-section-title {
        font-size: 1.15rem;
    }
}