/* SURYA KOMPUTER - CUSTOM STYLES & CYBER-TECH THEME */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --primary: #2563eb;
    --primary-glow: rgba(37, 99, 235, 0.4);
    --secondary: #06b6d4;
    --accent: #8b5cf6;
    --dark-bg: #0b0f19;
    --dark-card: #111827;
    --dark-border: #1f2937;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #0b0f19;
    color: #f3f4f6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Outfit', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #0b0f19;
}
::-webkit-scrollbar-thumb {
    background: #1f2937;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #374151;
}

/* Hide scrollbar utility */
.scrollbar-none::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
.scrollbar-none,
.no-scrollbar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Product Swipe / Carousel Track */
.product-swipe-track {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.product-swipe-track.is-dragging,
.is-dragging {
    cursor: grabbing !important;
    scroll-behavior: auto !important;
    user-select: none;
    -webkit-user-select: none;
}
.product-swipe-track.is-dragging *,
.is-dragging * {
    user-select: none !important;
    -webkit-user-select: none !important;
    pointer-events: none !important;
}

/* Glowing Neon Elements */
.glow-cyan {
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.35);
}

.glow-blue {
    box-shadow: 0 0 25px rgba(37, 99, 235, 0.4);
}

.glow-purple {
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.35);
}

/* Glassmorphism Cards */
.glass-panel {
    background: rgba(17, 24, 39, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-dropdown {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradient text */
.text-gradient-cyan {
    background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 50%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-gold {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Card hover animation */
.product-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

.product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 12px 30px -10px rgba(14, 165, 233, 0.25);
}

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

.product-img-wrap {
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(15, 23, 42, 0.9) !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

.product-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Pastikan judul dan teks produk tampil utuh tanpa terpotong (tanpa ellipsis ...) */
.product-card h4,
.product-card h3,
.product-card h5,
.product-card .product-title {
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: break-word !important;
}

/* Standarisasi area judul & container kartu produk */
.product-card .product-title-wrap {
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

@media (min-width: 640px) {
    .product-card .product-title-wrap {
        min-height: 72px;
    }
}

/* Pastikan area harga dan badge selalu horizontal: Harga di KIRI, Badges di KANAN */
.product-card .product-price-wrap {
    min-height: 48px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.product-card > .p-4 {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Penyeragaman tinggi kartu di semua slider / swipe tracks */
.product-swipe-track,
#productsGrid.flex,
#sectionProductsGrid.flex,
#brandProductsGrid.flex,
#categoryProductsGrid.flex {
    display: flex !important;
    align-items: stretch !important;
}

.product-swipe-track > div,
#productsGrid.flex > div,
#sectionProductsGrid.flex > div,
#brandProductsGrid.flex > div,
#categoryProductsGrid.flex > div {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    height: auto !important;
}

.product-swipe-track > div > .product-card,
#productsGrid.flex > div > .product-card,
#sectionProductsGrid.flex > div > .product-card,
#brandProductsGrid.flex > div > .product-card,
#categoryProductsGrid.flex > div > .product-card {
    flex: 1 1 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#detailMainProductImg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

#detailImageSliderContainer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-thumb-btn img,
.cat-detail-thumb-btn img,
.brand-detail-thumb-btn img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 2px;
}

.brand-partner-card img,
.brand-quick-card img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

#cartDrawerItemsList img {
    object-fit: contain !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Hero animated glow background */
.hero-glow-bg {
    background: radial-gradient(circle at 50% 30%, rgba(37, 99, 235, 0.25) 0%, rgba(6, 182, 212, 0.15) 30%, rgba(11, 15, 25, 0) 70%);
}

/* Drawer / Slide-Over */
.drawer-backdrop {
    transition: opacity 0.3s ease;
}

.drawer-panel {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Badge pulse */
.pulse-badge {
    animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Print Invoice Styles */
@media print {
    *, *::before, *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    html, body {
        background: #fff !important;
        color: #000 !important;
        font-family: Arial, sans-serif !important;
        font-size: 12pt !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Strictly hide all dashboard chrome, sidebar, main content and other modals */
    aside, header, main, nav, footer, .no-print, button, .admin-section, #adminAuthWarningModal, 
    #adminProductModal, #adminCategoryModal, #adminShippingModal, #adminPaymentModal, #adminTrackingModal, #adminAddCouponModal,
    [class*="glass-panel"] > button:first-child {
        display: none !important;
        visibility: hidden !important;
    }
    /* Show only active invoice modal */
    #adminOrderDetailModal:not(.hidden), #memberInvoiceModal:not(.hidden), #invoiceDedicatedModal:not(.hidden) {
        position: static !important;
        display: block !important;
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    #adminOrderDetailModal > div, #memberInvoiceModal > div, #invoiceDedicatedModal > div {
        background: #fff !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }
    #invoiceDedicatedModal .sticky, .no-print {
        display: none !important;
    }
    #invoicePrintArea, .printable-invoice {
        display: block !important;
        position: static !important;
        width: 100% !important;
        background: #fff !important;
        color: #000 !important;
        padding: 24px !important;
        border: none !important;
    }
    #invoicePrintArea *, .printable-invoice * {
        color: #111 !important;
    }
    #invoicePrintArea table, .printable-invoice table {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    #invoicePrintArea th, #invoicePrintArea td, .printable-invoice th, .printable-invoice td {
        border-bottom: 1px solid #ddd !important;
        color: #000 !important;
        padding: 8px 4px !important;
    }
    .invoice-stamp-paid {
        border: 3px solid #16a34a !important;
        color: #16a34a !important;
        font-weight: 900 !important;
        padding: 4px 12px !important;
        display: inline-block !important;
        text-transform: uppercase !important;
        border-radius: 6px !important;
    }

    /* Dedicated Shipping Label Print Styling */
    .kiriminaja-shipping-label {
        page-break-after: always !important;
        page-break-inside: avoid !important;
        box-sizing: border-box !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        margin: 0 auto !important;
    }
    .kiriminaja-shipping-label:last-child {
        page-break-after: auto !important;
    }
}

/* Shipping Card Selection Styles */
.shipping-card-option {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}
.shipping-card-option:hover {
    border-color: #06b6d4;
    background-color: rgba(6, 182, 212, 0.05);
}
.shipping-card-option.active {
    border-color: #3b82f6;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(6, 182, 212, 0.08) 100%);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.25);
}

/* Tracking Timeline Step */
.tracking-milestone {
    position: relative;
    padding-left: 28px;
}
.tracking-milestone::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 14px;
    bottom: -14px;
    width: 2px;
    background: #334155;
}
.tracking-milestone:last-child::before {
    display: none;
}
.tracking-dot {
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}

/* ==================== GLOBAL & ADMIN COLOR THEMES ==================== */
body {
    background-color: var(--theme-bg, #0b0f19) !important;
    background-image: var(--theme-bg-gradient, none) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    color: #f3f4f6;
    transition: background-color 0.3s ease, background-image 0.3s ease, border-color 0.3s ease;
}

/* ==================== HIGH PERFORMANCE ADMIN CENTER ==================== */
/* 1. Eliminate fixed background repaint thrashing on scroll */
body.admin-body {
    background-attachment: scroll !important;
    transition: none !important;
}

/* 2. Disable expensive backdrop-filter in Admin Center */
body.admin-body .glass-panel,
body.admin-body .glass-dropdown,
body.admin-body [class*="backdrop-blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.admin-body .glass-panel {
    background: var(--theme-panel-bg, #111827) !important;
    border-color: var(--theme-border, rgba(255, 255, 255, 0.08)) !important;
    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.4) !important;
    transition: none !important; /* Zero transition lag during scroll & typing */
}

body.admin-body header.glass-panel {
    background: var(--theme-header-bg, #0f172a) !important;
    border-color: var(--theme-border, rgba(255, 255, 255, 0.08)) !important;
}

body.admin-body aside.glass-panel {
    background: var(--theme-sidebar-bg, #0f172a) !important;
    border-color: var(--theme-border, rgba(255, 255, 255, 0.08)) !important;
}

/* 3. Hardware-accelerated modal dialogs without backdrop blur */
body.admin-body div[id$="Modal"],
body.admin-body #demoAccountsModal,
body.admin-body #quickEditTimerModal,
body.admin-body #invoiceDedicatedModal,
body.admin-body #memberDetailModal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(5, 8, 16, 0.88) !important;
}

body.admin-body div[id$="Modal"] > div,
body.admin-body #demoAccountsModal > div,
body.admin-body #quickEditTimerModal > div,
body.admin-body #invoiceDedicatedModal > div,
body.admin-body #memberDetailModal > div {
    transform: translateZ(0);
    will-change: transform;
}

/* 4. Form input isolation: Typing only repaints the input field, eliminating modal lag */
body.admin-body input,
body.admin-body textarea,
body.admin-body select {
    contain: paint;
}

body .glass-panel {
    background: var(--theme-panel-bg, rgba(17, 24, 39, 0.85)) !important;
    border-color: var(--theme-border, rgba(255, 255, 255, 0.08)) !important;
    box-shadow: var(--theme-panel-shadow, 0 10px 25px -5px rgba(0, 0, 0, 0.3));
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body header.glass-panel {
    background: var(--theme-header-bg, rgba(15, 23, 42, 0.94)) !important;
    border-color: var(--theme-border, rgba(255, 255, 255, 0.08)) !important;
}

body aside.glass-panel {
    background: var(--theme-sidebar-bg, rgba(15, 23, 42, 0.88)) !important;
    border-color: var(--theme-border, rgba(255, 255, 255, 0.08)) !important;
}

/* 1. Cyber Obsidian (Default) */
html[data-theme="obsidian"] body,
html[data-admin-theme="obsidian"] body,
body[data-theme="obsidian"],
body[data-admin-theme="obsidian"],
body:not([data-theme]):not([data-admin-theme]) {
    --theme-bg: #0b0f19;
    --theme-bg-gradient: radial-gradient(circle at 50% 0%, #111e38 0%, #0b0f19 75%);
    --theme-panel-bg: rgba(17, 24, 39, 0.88);
    --theme-border: rgba(255, 255, 255, 0.08);
    --theme-header-bg: rgba(15, 23, 42, 0.94);
    --theme-sidebar-bg: rgba(15, 23, 42, 0.88);
    --theme-accent: #06b6d4;

    --adm-bg: #0b0f19;
    --adm-bg-gradient: radial-gradient(circle at 50% 0%, #111e38 0%, #0b0f19 75%);
    --adm-panel-bg: rgba(17, 24, 39, 0.88);
    --adm-border: rgba(255, 255, 255, 0.08);
    --adm-header-bg: rgba(15, 23, 42, 0.94);
    --adm-sidebar-bg: rgba(15, 23, 42, 0.88);
    --adm-accent: #06b6d4;
}

/* 2. OLED Stealth Black */
html[data-theme="oled"] body,
html[data-admin-theme="oled"] body,
body[data-theme="oled"],
body[data-admin-theme="oled"] {
    --theme-bg: #000000;
    --theme-bg-gradient: radial-gradient(circle at 50% 0%, #141414 0%, #000000 80%);
    --theme-panel-bg: rgba(15, 15, 15, 0.94);
    --theme-border: rgba(255, 255, 255, 0.14);
    --theme-header-bg: rgba(10, 10, 10, 0.96);
    --theme-sidebar-bg: rgba(12, 12, 12, 0.92);
    --theme-accent: #f8fafc;

    --adm-bg: #000000;
    --adm-bg-gradient: radial-gradient(circle at 50% 0%, #141414 0%, #000000 80%);
    --adm-panel-bg: rgba(15, 15, 15, 0.94);
    --adm-border: rgba(255, 255, 255, 0.14);
    --adm-header-bg: rgba(10, 10, 10, 0.96);
    --adm-sidebar-bg: rgba(12, 12, 12, 0.92);
    --adm-accent: #f8fafc;
}

/* 3. Midnight Deep Navy */
html[data-theme="midnight"] body,
html[data-admin-theme="midnight"] body,
body[data-theme="midnight"],
body[data-admin-theme="midnight"] {
    --theme-bg: #060b17;
    --theme-bg-gradient: radial-gradient(circle at 50% 0%, #0f2452 0%, #060b17 80%);
    --theme-panel-bg: rgba(14, 25, 52, 0.88);
    --theme-border: rgba(59, 130, 246, 0.22);
    --theme-header-bg: rgba(10, 20, 44, 0.94);
    --theme-sidebar-bg: rgba(8, 16, 36, 0.90);
    --theme-accent: #3b82f6;

    --adm-bg: #060b17;
    --adm-bg-gradient: radial-gradient(circle at 50% 0%, #0f2452 0%, #060b17 80%);
    --adm-panel-bg: rgba(14, 25, 52, 0.88);
    --adm-border: rgba(59, 130, 246, 0.22);
    --adm-header-bg: rgba(10, 20, 44, 0.94);
    --adm-sidebar-bg: rgba(8, 16, 36, 0.90);
    --adm-accent: #3b82f6;
}

/* 4. Slate Gunmetal Tech */
html[data-theme="slate"] body,
html[data-admin-theme="slate"] body,
body[data-theme="slate"],
body[data-admin-theme="slate"] {
    --theme-bg: #0f172a;
    --theme-bg-gradient: radial-gradient(circle at 50% 0%, #1e293b 0%, #0f172a 80%);
    --theme-panel-bg: rgba(30, 41, 59, 0.88);
    --theme-border: rgba(148, 163, 184, 0.18);
    --theme-header-bg: rgba(23, 33, 48, 0.94);
    --theme-sidebar-bg: rgba(19, 27, 40, 0.90);
    --theme-accent: #38bdf8;

    --adm-bg: #0f172a;
    --adm-bg-gradient: radial-gradient(circle at 50% 0%, #1e293b 0%, #0f172a 80%);
    --adm-panel-bg: rgba(30, 41, 59, 0.88);
    --adm-border: rgba(148, 163, 184, 0.18);
    --adm-header-bg: rgba(23, 33, 48, 0.94);
    --adm-sidebar-bg: rgba(19, 27, 40, 0.90);
    --adm-accent: #38bdf8;
}

/* 5. Cyberpunk Neon Purple */
html[data-theme="purple"] body,
html[data-admin-theme="purple"] body,
body[data-theme="purple"],
body[data-admin-theme="purple"] {
    --theme-bg: #0e051b;
    --theme-bg-gradient: radial-gradient(circle at 50% 0%, #2f0e57 0%, #0e051b 80%);
    --theme-panel-bg: rgba(27, 14, 52, 0.88);
    --theme-border: rgba(168, 85, 247, 0.25);
    --theme-header-bg: rgba(22, 10, 42, 0.94);
    --theme-sidebar-bg: rgba(18, 8, 35, 0.90);
    --theme-accent: #a855f7;

    --adm-bg: #0e051b;
    --adm-bg-gradient: radial-gradient(circle at 50% 0%, #2f0e57 0%, #0e051b 80%);
    --adm-panel-bg: rgba(27, 14, 52, 0.88);
    --adm-border: rgba(168, 85, 247, 0.25);
    --adm-header-bg: rgba(22, 10, 42, 0.94);
    --adm-sidebar-bg: rgba(18, 8, 35, 0.90);
    --adm-accent: #a855f7;
}

/* 6. Matrix Emerald Tech */
html[data-theme="emerald"] body,
html[data-admin-theme="emerald"] body,
body[data-theme="emerald"],
body[data-admin-theme="emerald"] {
    --theme-bg: #03140e;
    --theme-bg-gradient: radial-gradient(circle at 50% 0%, #0a3d28 0%, #03140e 80%);
    --theme-panel-bg: rgba(8, 38, 27, 0.88);
    --theme-border: rgba(16, 185, 129, 0.25);
    --theme-header-bg: rgba(6, 30, 21, 0.94);
    --theme-sidebar-bg: rgba(5, 24, 17, 0.90);
    --theme-accent: #10b981;

    --adm-bg: #03140e;
    --adm-bg-gradient: radial-gradient(circle at 50% 0%, #0a3d28 0%, #03140e 80%);
    --adm-panel-bg: rgba(8, 38, 27, 0.88);
    --adm-border: rgba(16, 185, 129, 0.25);
    --adm-header-bg: rgba(6, 30, 21, 0.94);
    --adm-sidebar-bg: rgba(5, 24, 17, 0.90);
    --adm-accent: #10b981;
}

/* 7. Crimson Apex Dark */
html[data-theme="crimson"] body,
html[data-admin-theme="crimson"] body,
body[data-theme="crimson"],
body[data-admin-theme="crimson"] {
    --theme-bg: #140508;
    --theme-bg-gradient: radial-gradient(circle at 50% 0%, #420c18 0%, #140508 80%);
    --theme-panel-bg: rgba(38, 12, 19, 0.88);
    --theme-border: rgba(244, 63, 94, 0.25);
    --theme-header-bg: rgba(30, 8, 14, 0.94);
    --theme-sidebar-bg: rgba(24, 6, 11, 0.90);
    --theme-accent: #f43f5e;

    --adm-bg: #140508;
    --adm-bg-gradient: radial-gradient(circle at 50% 0%, #420c18 0%, #140508 80%);
    --adm-panel-bg: rgba(38, 12, 19, 0.88);
    --adm-border: rgba(244, 63, 94, 0.25);
    --adm-header-bg: rgba(30, 8, 14, 0.94);
    --adm-sidebar-bg: rgba(24, 6, 11, 0.90);
    --adm-accent: #f43f5e;
}

/* 8. Titanium Carbon */
html[data-theme="titanium"] body,
html[data-admin-theme="titanium"] body,
body[data-theme="titanium"],
body[data-admin-theme="titanium"] {
    --theme-bg: #18181b;
    --theme-bg-gradient: radial-gradient(circle at 50% 0%, #2b2b30 0%, #18181b 80%);
    --theme-panel-bg: rgba(39, 39, 42, 0.88);
    --theme-border: rgba(255, 255, 255, 0.12);
    --theme-header-bg: rgba(28, 28, 31, 0.94);
    --theme-sidebar-bg: rgba(24, 24, 27, 0.90);
    --theme-accent: #fbbf24;

    --adm-bg: #18181b;
    --adm-bg-gradient: radial-gradient(circle at 50% 0%, #2b2b30 0%, #18181b 80%);
    --adm-panel-bg: rgba(39, 39, 42, 0.88);
    --adm-border: rgba(255, 255, 255, 0.12);
    --adm-header-bg: rgba(28, 28, 31, 0.94);
    --adm-sidebar-bg: rgba(24, 24, 27, 0.90);
    --adm-accent: #fbbf24;
}

/* 9. Custom Theme */
html[data-theme="custom"] body,
html[data-admin-theme="custom"] body,
body[data-theme="custom"],
body[data-admin-theme="custom"] {
    background-color: var(--theme-bg, var(--adm-bg, #0b0f19)) !important;
    background-image: none !important;
    --theme-panel-bg: rgba(0, 0, 0, 0.45);
    --theme-border: rgba(255, 255, 255, 0.12);
    --theme-header-bg: rgba(0, 0, 0, 0.65);
    --theme-sidebar-bg: rgba(0, 0, 0, 0.55);

    --adm-bg: var(--theme-bg, #0b0f19);
    --adm-bg-gradient: none;
    --adm-panel-bg: rgba(0, 0, 0, 0.45);
    --adm-border: rgba(255, 255, 255, 0.12);
    --adm-header-bg: rgba(0, 0, 0, 0.65);
    --adm-sidebar-bg: rgba(0, 0, 0, 0.55);
}

/* Theme Selector Cards & Swatches */
.theme-card, .admin-theme-card {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
}
.theme-card:hover, .admin-theme-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.6);
}
.theme-card.active, .admin-theme-card.active {
    border-color: #06b6d4 !important;
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.35) !important;
}
.theme-card.active .theme-check-icon, .admin-theme-card.active .theme-check-icon {
    display: flex !important;
}
.theme-dot, .sidebar-theme-dot {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
}
.theme-dot:hover, .sidebar-theme-dot:hover {
    transform: scale(1.15);
}
.theme-dot.active, .sidebar-theme-dot.active {
    border-color: #06b6d4 !important;
    box-shadow: 0 0 8px #06b6d4;
    transform: scale(1.1);
}

/* Brand Partner Interactive Cards */
.brand-partner-card {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}
.brand-partner-card:hover {
    transform: translateY(-4px);
}
.brand-partner-card:active {
    transform: scale(0.96);
}

/* Dynamic Ads Banner Animation */
@keyframes bannerSlideIn {
    0% {
        opacity: 0.35;
        transform: translateY(8px) scale(0.992);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-fadeIn {
    animation: bannerSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ======================================================== */
/* TOP ANNOUNCEMENT MOVING TICKER / MARQUEE ANIMATION       */
/* ======================================================== */
@keyframes topMarqueeScroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@-webkit-keyframes topMarqueeScroll {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-50%, 0, 0);
    }
}

.top-marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
}

.top-marquee-track {
    display: inline-flex;
    align-items: center;
    width: max-content;
    flex-wrap: nowrap;
    animation: topMarqueeScroll 36s linear infinite;
    -webkit-animation: topMarqueeScroll 36s linear infinite;
    will-change: transform;
}

/* Pause only on mouse hover, avoid sticking paused on touch or click/focus */
@media (hover: hover) {
    .top-marquee-track:hover {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }
}

/* ======================================================== */
/* KAREN AI BOT & LIVE SEARCH DROPDOWN STYLES               */
/* ======================================================== */
@keyframes bounceSoft {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.animate-bounce-soft {
    animation: bounceSoft 3s ease-in-out infinite;
}

#karenAiMessagesContainer::-webkit-scrollbar,
#suryaAiMessagesContainer::-webkit-scrollbar {
    width: 5px;
}

#karenAiMessagesContainer::-webkit-scrollbar-track,
#suryaAiMessagesContainer::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.6);
}

#karenAiMessagesContainer::-webkit-scrollbar-thumb,
#suryaAiMessagesContainer::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.3);
    border-radius: 9999px;
}

#karenAiMessagesContainer::-webkit-scrollbar-thumb:hover,
#suryaAiMessagesContainer::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.6);
}

#searchLiveDropdown::-webkit-scrollbar,
#mobileSearchLiveDropdown::-webkit-scrollbar {
    width: 6px;
}

#searchLiveDropdown::-webkit-scrollbar-thumb,
#mobileSearchLiveDropdown::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.3);
    border-radius: 9999px;
}

.live-search-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.live-search-item:hover {
    background-color: rgba(30, 41, 59, 0.9);
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateX(4px);
}

/* Karen AI Bot Specific Enhancements */
#karenAiChatWindow {
    box-shadow: 0 25px 60px -15px rgba(6, 182, 212, 0.3), 0 0 35px -5px rgba(14, 165, 233, 0.25) !important;
}

#karenAiFloatingWidget {
    user-select: none;
    -webkit-user-select: none;
}

#karenAiBotToggleBtn {
    cursor: pointer !important;
    touch-action: manipulation;
    box-shadow: 0 8px 28px -4px rgba(6, 182, 212, 0.55), 0 0 20px -2px rgba(14, 165, 233, 0.4) !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
}

#karenAiBotToggleBtn:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 14px 38px -2px rgba(6, 182, 212, 0.8), 0 0 30px rgba(14, 165, 233, 0.6) !important;
}

#karenAiBotToggleBtn:active {
    transform: scale(0.94) !important;
}

/* Auto-hide Karen AI Bot when cart drawer or checkout modal is active */
.karen-suppressed,
#karenAiBotRoot.karen-suppressed {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(28px) scale(0.7) !important;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease !important;
    visibility: hidden !important;
}

@media (max-width: 639px) {
    #karenAiChatWindow {
        width: calc(100vw - 20px) !important;
        right: 10px !important;
        bottom: 80px !important;
        height: 75vh !important;
    }
}

/* ========================================================
   ADMIN & STORE: MEDIA FIT & FILL (FIXED CONTAINER BOUNDS)
   Menjadikan gambar & video center, fit, dan fill container
   tanpa merusak atau memperbesar ukuran container (containernya fix).
   ======================================================== */
.admin-media-fit-fill {
    position: relative !important;
    overflow: hidden !important;
}

.admin-media-fit-fill img,
.admin-media-fit-fill video {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: inherit !important;
}

/* Storefront Hero Square Card Media Fit & Fill */
.hero-square-media-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4 / 4.8 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #020617 !important;
    border-radius: 1rem !important;
}

/* 1. Ambient Blurred Layer to Fill the Container */
.hero-square-ambient-blur {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: blur(24px) !important;
    transform: scale(1.25) !important;
    opacity: 0.45 !important;
    pointer-events: none !important;
    user-select: none !important;
    display: block !important;
}

/* 2. Sharp Foreground Media (Full fit, 100% uncropped, NO text cut off) */
.hero-square-main-media {
    position: relative !important;
    z-index: 10 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    margin: auto !important;
    border-radius: 0.875rem !important;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.6)) !important;
    transition: transform 0.4s ease !important;
}

.hero-square-media-wrap:hover .hero-square-main-media {
    transform: scale(1.02) !important;
}