/* Dark Theme Variables */
:root {
    --bg-dark: #18191a;
    --bg-sidebar: #242526;
    --bg-card: #242526;
    --text-primary: #e4e6eb;
    --text-secondary: #b0b3b8;
    --accent-color: #00a400;
    /* Green from the image */
    --hover-bg: #3a3b3c;
    --border-color: #3e4042;
}

[data-theme="light"] {
    --bg-dark: #f0f2f5;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --text-primary: #050505;
    --text-secondary: #65676b;
    --accent-color: #00a400;
    --hover-bg: #e4e6eb;
    --border-color: #ced0d4;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

/* Sidebar Styles */
.sidebar {
    width: 250px;
    height: calc(100vh - 70px);
    position: fixed;
    top: 70px;
    left: 0;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    z-index: 1000;
    overflow-y: auto;
}

.sidebar .nav-link {
    color: var(--text-secondary);
    padding: 12px 20px;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

.sidebar .nav-link i {
    width: 20px;
    text-align: center;
}

/* Front Content Wrapper (Ziyaretçi Sayfaları) */
.front-content {
    margin: 0 auto; /* Boxed (Ortalama) Layout Geçişi */
    max-width: 1320px; /* Modern Boxed Max Genişliği */
    padding: 20px;
    padding-top: 150px; /* Topbar (70px) + Horizontal Menu (~60-80px) */
    min-height: 100vh;
}

/* --- YENİ YATAY MENÜ DİZAYNI (Resimli Tasarıma Uygun) --- */
.horizontal-menu-wrapper {
    position: fixed;
    top: 70px; /* Topbar'ın hemen altında */
    left: 0;
    right: 0;
    background-color: var(--bg-card);
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
}

.horizontal-logo {
    color: var(--text-primary) !important;
    font-size: 1.25rem;
    letter-spacing: -0.5px;
}

.horizontal-logo .logo-icon-box {
    width: 32px;
    height: 32px;
    background-color: var(--accent-color) !important; /* Tema rengi yeşil */
    border-radius: 8px; /* Altıgene benzeri köşeler için radius verildi */
    display: inline-flex;
}

.horizontal-nav-links {
    font-size: 0.95rem;
}

.horizontal-nav-links .nav-link {
    color: var(--text-primary) !important;
    font-weight: 500;
    padding: 16px 8px !important;
    transition: color 0.2s ease;
}

.horizontal-nav-links .nav-item:hover .nav-link {
    color: var(--accent-color) !important;
}

/* --- MEGA MENU YAPILARI --- */
/* Bootstrap dropdown override for Mega Menu */
.mega-dropdown {
    position: static !important; /* Full width support */
}

/* Ortak Dropdown Stili */
.navbar-nav .dropdown-menu {
    border-radius: 12px;
    padding: 15px;
    margin-top: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border: 1px solid var(--border-color);
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Dropdown içi genel linkler için tema uyumu */
.navbar-nav .dropdown-menu .dropdown-item {
    color: var(--text-primary) !important;
}
.navbar-nav .dropdown-menu .dropdown-item:hover {
    background-color: var(--hover-bg) !important;
    color: var(--accent-color) !important;
}

/* Tip 1: Nested Dropdown (Kurumsal) */
/* Hover ile altı açılan submenu */
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

/* Tip 2: Stacked Menu (SEO) */
.mega-icon-menu {
    width: 100%;
    max-width: 400px; /* Ürünler menüsü gibi sabit genişlik */
    left: 50% !important;
    transform: translateX(-50%);
}
.mega-icon-item {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    border-radius: 8px;
    transition: background 0.2s;
    text-decoration: none;
    color: var(--text-primary);
}
.mega-icon-item:hover {
    background-color: var(--hover-bg);
}
.mega-icon-item i {
    font-size: 1.5rem;
    margin-right: 15px;
    margin-top: 5px;
}
.mega-icon-content h6 {
    margin-bottom: 2px;
    font-weight: 600;
}
.mega-icon-content small {
    color: var(--text-secondary);
}

/* Tip 3: Split (Bayilik - İki Kolonlu Mega) */
.mega-split-menu {
    width: 100%;
    max-width: 700px; /* Ya da container'ın büyüklüğüne göre ayarlanır */
    left: 50% !important;
    transform: translateX(-50%);
    padding: 0 !important;
}

/* Mega menü içindeki Bootstrap açık/koyu kodlarını tema rengine adapte et */
.navbar-nav .dropdown-menu .bg-light {
    background-color: var(--hover-bg) !important;
    color: var(--text-primary) !important;
}
.navbar-nav .dropdown-menu .text-dark {
    color: var(--text-primary) !important;
}
.navbar-nav .dropdown-menu .bg-white {
    background-color: var(--bg-card) !important;
}

/* Tip 4: Image Grid (Ürünler) */
.mega-image-menu {
    width: 100%;
    max-width: 1100px;
    left: 50% !important;
    transform: translateX(-50%);
    padding: 20px;
}
.mega-image-card {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
}
.mega-image-card:hover {
    transform: translateY(-5px);
}
.mega-image-card img {
    width: 100%;
    height: auto;
    display: block;
}
.mega-image-card .card-body {
    background-color: var(--bg-card);
    text-align: center;
    padding: 10px;
    font-weight: 500;
}

/* Sağ Menü - Giriş Butonu vs. */
.horizontal-menu-wrapper .sign-in-btn {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #fff !important;
    border-radius: 6px !important; /* Hafif oval (tasarımdaki gibi) */
    padding: 8px 24px !important;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.horizontal-menu-wrapper .sign-in-btn:hover {
    filter: brightness(0.9);
}

.theme-selector-dropdown .dropdown-toggle::after {
    margin-left: 0.5rem;
    vertical-align: middle;
}

@media (max-width: 991px) {
    .front-content {
        padding-top: 130px;
    }
}

/* Topbar Header */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
}

/* Filter Tags */
.filter-btn {
    transition: all 0.2s;
}

.filter-btn:hover {
    filter: brightness(1.2);
}

/* Product Cards */
.product-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.product-card img {
    width: 100%;
    /* height removed here, handled inline or by container */
}

/* Top Header Right Icons */
.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    border: none;
    transition: all 0.2s;
    text-decoration: none;
}

.icon-btn:hover {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #888;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .main-content {
        margin-left: 0;
    }

    .sidebar.show {
        transform: translateX(0);
    }
}

/* Theme-Aware Dropdown */
.theme-dropdown {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
}

.theme-dropdown .dropdown-item {
    color: var(--text-secondary);
    transition: all 0.2s;
}

.theme-dropdown .dropdown-item:hover,
.theme-dropdown .dropdown-item:focus {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

.theme-dropdown .dropdown-item.active {
    background-color: #198754;
    color: #fff;
}

/* 
   PRODUCT CARD HOVER OVERLAY - FORCE SPECIFICITY 
   (Ensures these rules override any defaults)
*/
.product-image-container {
    position: relative !important;
    overflow: hidden;
    display: block;
}

.product-image-container img {
    transition: transform 0.5s ease;
    display: block;
    width: 100%;
}

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

.product-overlay {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 30, 46, 0.75);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 10;
    border-radius: 0;
    /* Ensures it matches container */
    display: flex !important;
    /* Force flex for centering */
}

/* Show overlay on hover */
.product-image-container:hover .product-overlay {
    opacity: 1 !important;
}

/* Circular Buttons */
.overlay-btn {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    text-decoration: none !important;
    font-size: 1.2rem;
}

.overlay-btn:hover {
    background: #fff !important;
    color: #000 !important;
    transform: translateY(-3px);
    border-color: #fff !important;
}

.overlay-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin-top: 8px;
    display: block;
    letter-spacing: 0.5px;
}

/* =========================================
   LIGHT MODE / THEME UTILITIES
   ========================================= */

.bg-theme-modal {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.bg-theme-surface {
    background-color: var(--bg-dark) !important;
}

.bg-theme-card {
    background-color: var(--bg-card) !important;
}

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

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

.border-theme {
    border-color: var(--border-color) !important;
}

/* In Light Mode, we need shadows to define depth since we don't have dark contrast */
[data-theme="light"] .shadow-theme {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .btn-close-white {
    filter: invert(1) !important;
    /* Make close buttons dark in light mode */
}

/* Ensure Gallery Thumbs are visible in light mode */
[data-theme="light"] .thumb-item {
    background: #fff;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .thumb-item.border-success {
    border-color: #198754 !important;
}

/* =========================================
   CART DRAWER & BLUR EFFECTS
   ========================================= */

/* Blur main content when body has .blur-active */
body.blur-active .main-content,
body.blur-active .sidebar,
body.blur-active nav.navbar {
    filter: blur(8px);
    transition: filter 0.3s ease;
    pointer-events: none;
    user-select: none;
}

/* Offcanvas Customization */
.offcanvas {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.offcanvas-backdrop.show {
    opacity: 0.5 !important;
    background-color: #000 !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Cart Item Hover */
.cart-item {
    transition: background-color 0.2s;
}

.cart-item:hover {
    background-color: var(--bg-hover, rgba(255, 255, 255, 0.05));
}


/* =========================================
   GLOBAL GLASSMORPHISM BUTTONS
   ========================================= */

/* General Button Shape & Transition */
.btn {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 50rem !important;
    /* Pill shape is standard for glass */
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.btn:active {
    transform: translateY(0);
}

/* 
   Specific Variants 
   Glassmorphism works best with semi-transparent backgrounds 
*/

/* Primary (Blue) */
.btn-primary {
    background: rgba(13, 110, 253, 0.15) !important;
    border-color: rgba(13, 110, 253, 0.5) !important;
    color: #0d6efd !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: rgba(13, 110, 253, 0.35) !important;
    border-color: #0d6efd !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(13, 110, 253, 0.3);
}

/* Success (Green) */
.btn-success {
    background: rgba(25, 135, 84, 0.15) !important;
    border-color: rgba(25, 135, 84, 0.5) !important;
    color: #198754 !important;
}

.btn-success:hover,
.btn-success:focus {
    background: rgba(25, 135, 84, 0.35) !important;
    border-color: #198754 !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(25, 135, 84, 0.3);
}

/* Secondary (Gray) */
.btn-secondary {
    background: rgba(108, 117, 125, 0.15) !important;
    border-color: rgba(108, 117, 125, 0.5) !important;
    color: #adb5bd !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: rgba(108, 117, 125, 0.35) !important;
    border-color: #adb5bd !important;
    color: #fff !important;
}

/* Danger (Red) */
.btn-danger {
    background: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.5) !important;
    color: #dc3545 !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background: rgba(220, 53, 69, 0.35) !important;
    border-color: #dc3545 !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.3);
}

/* Outline Variants Override (Make them consistent) */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-secondary,
.btn-outline-danger {
    backdrop-filter: blur(5px);
    background: transparent !important;
}

[data-theme="light"] .btn-outline-secondary {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="light"] .btn-check:checked+.btn-outline-secondary {
    background-color: var(--text-primary) !important;
    color: var(--bg-card) !important;
    border-color: var(--text-primary) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

.btn-outline-primary:hover {
    background: rgba(13, 110, 253, 0.2) !important;
}

/* Fix for Light Theme Readability */
[data-theme="light"] .btn-primary {
    background: rgba(13, 110, 253, 0.1) !important;
    color: #0d6efd !important;
}

[data-theme="light"] .btn-primary:hover {
    background: rgba(13, 110, 253, 0.8) !important;
    color: #fff !important;
}

/* Sidebar Toggle Logic (Desktop) */
@media (min-width: 992px) {
    body.sidebar-closed .sidebar {
        transform: translateX(-100%);
    }

    body.sidebar-closed .main-content {
        margin-left: 0;
    }
}

/* Sidebar Link Styling - Completely Flat Text */
.sidebar .nav-link {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin-bottom: 4px;
    border-radius: 8px;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    font-weight: 500;
}

.sidebar .nav-link:hover {
    color: var(--text-primary) !important;
    background-color: transparent !important;
    /* Ensure no background on hover */
}

.sidebar .nav-link.active {
    color: var(--accent-color) !important;
    background-color: transparent !important;
    font-weight: 600;
}

.sidebar .nav-link i {
    width: 24px;
    text-align: center;
    margin-right: 12px;
}

/* Mini Sidebar Styles */
@media (min-width: 992px) {
    body.sidebar-closed .sidebar {
        width: 80px;
        transform: none;
        overflow: visible !important;
        /* Key fix for floating submenu */
        border-right: 1px solid var(--border-color);
    }

    body.sidebar-closed .main-content {
        margin-left: 80px;
    }

    /* Hide Text by default */
    body.sidebar-closed .sidebar .nav-link span {
        display: none;
    }

    /* Show Text as Tooltip on Hover */
    body.sidebar-closed .sidebar .nav-link:hover span {
        display: block;
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        background-color: var(--bg-card);
        color: var(--text-primary);
        padding: 8px 16px;
        border-radius: 0 8px 8px 0;
        /* Rounded on right */
        white-space: nowrap;
        z-index: 10000;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
        border: 1px solid var(--border-color);
        border-left: none;
        /* Merge with icon visually */
        font-weight: 500;
        animation: fadeInTooltip 0.2s ease forwards;
        opacity: 0;
        /* Start invisible for animation */
    }

    /* Keyframes for smooth appearance */
    @keyframes fadeInTooltip {
        from {
            opacity: 0;
            transform: translateY(-50%) translateX(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
        }
    }

    /* Center Icons */
    body.sidebar-closed .sidebar .nav-link {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px 0;
        width: 100%;
        margin: 0;
        position: relative;
        /* For absolute positioning of span */
    }

    body.sidebar-closed .sidebar .nav-link i {
        margin: 0 !important;
        font-size: 1.5rem;
    }

    /* Hide Footer Text */
    body.sidebar-closed .sidebar .small.text-muted {
        display: none;
    }

    /* Hide Dropdown Arrow */
    body.sidebar-closed .sidebar .dropdown-arrow {
        display: none !important;
    }

    /* Handle overlap with Floating Submenu if exists */
    /* If hovering a header that has a submenu, we might want to hide the tooltip 
           if the submenu is already providing context, OR keep it. 
           User asked for "menu names", so keeping it is safer. 
           However, let's ensure z-index plays nice. Submenu is 9999. Tooltip is 10000. */

}

/* =========================================
   SIDEBAR CLOSED - FLOATING SUBMENU
   ========================================= */
@media (min-width: 992px) {

    /* Ensure the list item is positioned to anchor the submenu */
    body.sidebar-closed .sidebar .has-submenu {
        position: relative;
    }

    /* 
       CRITICAL FIX: Target the container DIRECTLY for both hover and .show states.
       It must be absolutely positioned to prevent flow breakage.
    */
    body.sidebar-closed .sidebar .has-submenu .submenu-container {
        position: absolute !important;
        left: 100% !important;
        /* Immediately to the right of the sidebar */
        top: 0 !important;
        min-width: 220px;
        background-color: var(--bg-sidebar);
        border: 1px solid var(--border-color);
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
        border-radius: 0 8px 8px 0;
        padding: 10px 0;
        z-index: 9999;

        /* Default hidden state is handled by Bootstrap collapse class, 
           but if we need to force it visible on hover, we do it below. 
           If it is .show (clicked), the styles above apply to keep it absolute. */
    }

    /* Force visibility on hover */
    body.sidebar-closed .sidebar .has-submenu:hover .submenu-container {
        display: block !important;
    }

    /* Style the links inside the floating menu */
    body.sidebar-closed .sidebar .has-submenu .submenu-container .nav-link {
        padding: 8px 20px;
        display: block;
        width: 100%;
        text-align: left;
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.9rem;
    }

    body.sidebar-closed .sidebar .has-submenu .submenu-container .nav-link:hover {
        color: #fff !important;
        background-color: rgba(255, 255, 255, 0.05) !important;
    }

    /* Ensure arrow is hidden */
    body.sidebar-closed .sidebar .has-submenu .dropdown-arrow {
        display: none;
    }
}

/* =========================================
   SWEETALERT2 THEME INTEGRATION
   ========================================= */
div:where(.swal2-container) div:where(.swal2-popup) {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
}

div:where(.swal2-container) h2:where(.swal2-title),
div:where(.swal2-container) div:where(.swal2-html-container) {
    color: var(--text-primary) !important;
}

div:where(.swal2-icon).swal2-success {
    border-color: #198754 !important;
    color: #198754 !important;
}

div:where(.swal2-icon).swal2-error {
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    background-color: #198754 !important;
    box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.5) !important;
    border-radius: 50rem !important;
    /* Pill shape like other buttons */
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.5) !important;
}

/* Spotlight Effect Styles (CodePen RNWoPRj Adapted) */
.spotlight-card {
    --glow-sens: 30;
    --color-sens: calc(var(--glow-sens) + 20);
    --pointer-x: 50%;
    --pointer-y: 50%;
    --pointer-d: 0;
    --pointer-deg: 0deg;

    isolation: isolate;
    border: 1px solid transparent !important;
}

.spotlight-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transition: opacity 0.25s ease-out;
    z-index: -1;

    border: 2px solid transparent;
    background:
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        radial-gradient(at 0% 0%, hsla(136, 100%, 70%, 1) 0px, transparent 50%) border-box,
        radial-gradient(at 100% 0%, hsla(280, 100%, 70%, 1) 0px, transparent 50%) border-box,
        radial-gradient(at 100% 100%, hsla(50, 100%, 70%, 1) 0px, transparent 50%) border-box,
        radial-gradient(at 0% 100%, hsla(200, 100%, 70%, 1) 0px, transparent 50%) border-box;

    mask-image: conic-gradient(from var(--pointer-deg) at 50% 50%, black 25%, transparent 40%, transparent 60%, black 75%);
    -webkit-mask-image: conic-gradient(from var(--pointer-deg) at 50% 50%, black 25%, transparent 40%, transparent 60%, black 75%);

    opacity: 0;
    /* Updated by JS */
}

.spotlight-card.active::before {
    opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
}

.spotlight-card .glow {
    position: absolute;
    inset: -40px;
    z-index: -2;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    mask-image: conic-gradient(from var(--pointer-deg) at 50% 50%, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
    -webkit-mask-image: conic-gradient(from var(--pointer-deg) at 50% 50%, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
    pointer-events: none;
    mix-blend-mode: soft-light;
}

.spotlight-card.active .glow {
    opacity: calc((var(--pointer-d) - var(--glow-sens)) / (100 - var(--glow-sens)));
}

.spotlight-card .glow::before {
    content: "";
    position: absolute;
    inset: 40px;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 15px 0 rgba(255, 255, 255, 0.3);
}

/* =========================================
   THEME AWARE FORM ELEMENTS
   ========================================= */
.form-control {
    background-color: var(--bg-dark) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.form-control:focus {
    background-color: var(--bg-dark) !important;
    border-color: var(--accent-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 164, 0, 0.25) !important;
}

.form-control::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7;
}

/* Ensure autofill doesn't break theme (hard to override fully but try) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--bg-dark) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

.form-check-input {
    background-color: var(--bg-dark) !important;
    border-color: var(--border-color) !important;
}

.form-check-input:checked {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* =========================================
   MODERN PRICING TABLES (SEO PACKAGES)
   ========================================= */

.pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
    border-color: var(--accent-color);
}

.card-header-price {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.package-name {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.price-container {
    display: flex;
    justify-content: center;
    align-items: baseline;
    color: var(--text-primary);
}

.currency {
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 4px;
}

.price {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.period {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-left: 4px;
}

.card-features {
    flex-grow: 1;
    margin-bottom: 2rem;
}

.card-features li {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.card-features li i {
    width: 24px;
    text-align: center;
    margin-right: 10px;
}

/* Highlighted "Popular" Card */
.pricing-card.popular {
    background: linear-gradient(135deg, #198754, #00b074);
    border: none;
    box-shadow: 0 15px 40px rgba(25, 135, 84, 0.3);
    color: #fff !important;
    transform: scale(1.05);
    z-index: 10;
}

.pricing-card.popular .package-name,
.pricing-card.popular .price-container,
.pricing-card.popular .period,
.pricing-card.popular .card-features li {
    color: #fff !important;
}

/* Ensure white text override works */
.pricing-card.popular .card-features li i.text-success {
    color: #fff !important;
}

.pricing-card.popular:hover {
    transform: scale(1.08);
}

.popular-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    padding: 4px 16px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Glass effect for basic cards in Light mode to be smoother */
[data-theme="light"] .pricing-card:not(.popular) {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

/* =========================================
   HEADER USER DROPDOWN STYLES (REFACTORED)
   ========================================= */
.btn-bayi-header {
    background: linear-gradient(135deg, #ffd700 0%, #fdb931 100%);
    color: #212529 !important;
    border: none;
    transition: all 0.3s ease;
}

.btn-bayi-header:hover {
    background: linear-gradient(135deg, #fdb931 0%, #ffd700 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(253, 185, 49, 0.4) !important;
}

.user-avatar-header {
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.btn-light-header {
    background-color: #f8f9fa;
    color: #333 !important;
    border: 1px solid #e9ecef;
}

.btn-light-header:hover {
    background-color: #e9ecef;
}

[data-theme="dark"] .btn-light-header {
    background-color: #2c2c2c;
    color: #e0e0e0 !important;
    border-color: #444;
}

[data-theme="dark"] .btn-light-header:hover {
    background-color: #333;
}

/* Dropdown Item Styling */
.dropdown-menu-custom .dropdown-item {
    padding: 10px 16px;
    font-size: 0.95rem;
    border-radius: 6px;
    margin: 0 4px;
    width: auto;
}

.dropdown-menu-custom .dropdown-item:hover {
    background-color: #f0f0f0;
}

[data-theme="dark"] .dropdown-menu-custom .dropdown-item:hover {
    background-color: #333;
}
/* --- ANIMATED PLACEHOLDER (SKELETON LOADER) --- */
.placeholder {
    display: inline-block;
    min-height: 1em;
    vertical-align: middle;
    cursor: wait;
    background-color: currentColor;
    opacity: 0.15;
    border-radius: 4px;
}
.placeholder-glow .placeholder {
    animation: placeholder-glow 2s ease-in-out infinite;
}
@keyframes placeholder-glow {
    50% { opacity: 0.05; }
}
.placeholder-xs { min-height: 0.6em; }
.placeholder-sm { min-height: 0.8em; }
.placeholder-lg { min-height: 1.2em; }
/* --- END PLACEHOLDER --- */

/* Customer Panel Container */
.panel-container {
    background-color: #f8f9fa;
    min-height: 80vh;
}
[data-theme="dark"] .panel-container {
    background-color: var(--bg-dark);
}

/* Product Title Line Clamping */
.product-title-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.05rem !important;
    line-height: 1.35;
    height: 2.7em;
    margin-bottom: 0.5rem !important;
}

/* Final Fix for Modal Overlap with Site Header */
.modal { z-index: 11000 !important; }
.modal-backdrop { z-index: 10950 !important; }