/* Dark mode for header only - match khalidjewelry style (soft dark + gold accent) */
/* Colors: soft dark header and warm gold accent */
:root{
    --loobek-dark-header-bg: #0f1112; /* deep but not pitch black */
    --loobek-dark-text: #f3f5f6;
    --loobek-gold: #d4af37; /* warm gold accent */
    --loobek-track-light: #eef2f4;
    --loobek-thumb-dark: #0b0c0d;
}

body.ts-dark-header .ts-header{
    background: var(--loobek-dark-header-bg) !important;
    color: var(--loobek-dark-text) !important;
}
body.ts-dark-header .ts-header a{ color: var(--loobek-dark-text) !important; }
body.ts-dark-header .ts-header .icon,
body.ts-dark-header .ts-header .icon-menu-sticky-header .icon,
body.ts-dark-header .ts-header .search-button .icon{ color: var(--loobek-dark-text) !important; }

/* Use gold accent for active elements (cart count, wishlist, small highlights) */
body.ts-dark-header .shopping-cart-wrapper .cart-control .cart-number,
body.ts-dark-header .my-wishlist-wrapper .count-number,
body.ts-dark-header .ts-header .header-currency a,
body.ts-dark-header .ts-header .header-language a{
    color: var(--loobek-gold) !important;
}

/* Pill-style dark-mode toggle (like khalidjewelry) */
.ts-dark-mode-toggle{
    display:inline-flex;
    align-items:center;
    padding:6px 8px;
    border-radius:22px;
    background: transparent;
    border:0;
    cursor:pointer;
}
.ts-toggle-track{
    position:relative;
    width:62px;
    height:30px;
    border-radius:22px;
    background: var(--loobek-track-light);
    display:inline-block;
    transition: background 0.28s ease;
}
.ts-toggle-thumb{
    position:absolute;
    top:4px;
    left:4px;
    width:22px;
    height:22px;
    border-radius:50%;
    background: #ffffff;
    box-shadow:0 3px 8px rgba(0,0,0,0.16);
    transition: transform 0.28s cubic-bezier(.4,0,.2,1), background 0.28s ease, box-shadow 0.28s ease;
}
.ts-toggle-icon{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:13px;
    color:#98a2aa;
    transition: color 0.28s ease, opacity 0.28s ease;
    pointer-events:none;
}
.ts-toggle-sun{ left:10px; }
.ts-toggle-moon{ right:10px; }

/* Active (dark) state - controlled by body class */
body.ts-dark-header .ts-toggle-track{ background: rgba(255,255,255,0.04); }
body.ts-dark-header .ts-toggle-thumb{
    transform: translateX(32px);
    background: var(--loobek-thumb-dark);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
body.ts-dark-header .ts-toggle-sun{ color: rgba(255,255,255,0.35); }
body.ts-dark-header .ts-toggle-moon{ color: var(--loobek-gold); }

/* reflect state on button class too */
.ts-dark-mode-toggle.is-on .ts-toggle-track{ background: rgba(255,255,255,0.04); }
.ts-dark-mode-toggle.is-on .ts-toggle-thumb{ transform: translateX(32px); }

/* Ensure toggle keeps alignment in header */
.group-language-currency .header-darkmode{ display:inline-block; margin-left:10px; vertical-align:middle; }

/* Apply small header element tweaks when dark (borders, shadows) */
body.ts-dark-header .ts-header .header-middle,
body.ts-dark-header .ts-header .header-top,
body.ts-dark-header .ts-header .header-bottom{
    border-color: rgba(255,255,255,0.03);
}

/* Responsive adjustments */
@media (max-width: 768px){
    .ts-toggle-track{ width:52px; height:26px; }
    .ts-toggle-thumb{ width:20px; height:20px; top:3px; left:3px; }
    body.ts-dark-header .ts-toggle-thumb{ transform: translateX(26px); }
}