/* ============================================
   THEME SWITCHER - Dark/Light Mode
   Notion-style Muted Neutral Palette
   ============================================ */

/* CSS Variables for Light Mode */
:root {
    --bg: #FFFFFF;
    --bg-subtle: #F7F7F5;
    --surface: #FFFFFF;
    --surface-hover: #F2F2F0;
    --border: #EDEDED;
    --text: #37352F;
    --text-2: #6B6A67;
    --text-3: #9B9A97;
    --link: #337EA9;
    
    /* Accent colors (muted, for tags/callouts only) */
    --accent-gray: #9B9A97;
    --accent-brown: #64473A;
    --accent-orange: #D9730D;
    --accent-yellow: #DFAB01;
    --accent-green: #4D7C5F;
    --accent-blue: #337EA9;
    --accent-purple: #9065B0;
    --accent-pink: #C14C8A;
    --accent-red: #E03E3E;
}

/* CSS Variables for Dark Mode */
[data-theme="dark"] {
    --bg: #191919;
    --bg-subtle: #202020;
    --surface: #2B2B2B;
    --surface-hover: #333333;
    --border: #3A3A3A;
    --text: #E6E6E6;
    --text-2: #B3B3B3;
    --text-3: #8F8F8F;
    --link: #5AA7D9;
    
    /* Accent colors (muted, for tags/callouts only) */
    --accent-gray: #9B9A97;
    --accent-brown: #64473A;
    --accent-orange: #D9730D;
    --accent-yellow: #DFAB01;
    --accent-green: #4D7C5F;
    --accent-blue: #337EA9;
    --accent-purple: #9065B0;
    --accent-pink: #C14C8A;
    --accent-red: #E03E3E;
}

/* Apply theme colors to body - ONLY in dark mode */
[data-theme="dark"] body {
    background-color: var(--bg);
    color: var(--text);
}

.star-picker-stars i.selected {
  color: #f59e0b !important;
  
}

.star-picker-stars i:hover,
.star-picker-stars i.hovered {
  color: #f59e0b !important;
  
}

/* Theme Toggle Button */
.theme-toggle {
    order: 1; /* Theme toggle after dots */
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    padding: 8px;
    margin-left: 10px;
    color: var(--text);
    transition: all 0.2s ease;
    border-radius: 4px;
}

.theme-toggle:hover {
    background-color: var(--surface-hover);
    color: var(--text);
    opacity: 0.8;
}


.product-container p {
    color: var(--text) !important;
}


/* Apply theme colors to common elements - ONLY in dark mode */
[data-theme="dark"] .upper-headline {
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .product-container {
    background-color: var(--bg);
    color: var(--text);
}

[data-theme="dark"] .card {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

/* Neutral accent for buttons and links - ONLY in dark mode */
[data-theme="dark"] button.addtocart:hover,
[data-theme="dark"] .log-in:hover {
    background-color: var(--text);
    border-color: var(--text);
    color: var(--bg);
}

/* Neutral accent for selected items - ONLY in dark mode */
[data-theme="dark"] .selected {
    border-color: var(--text) !important;
    color: var(--text);
    background-color: var(--surface-hover);
}

/* Neutral accent for price display - ONLY in dark mode */
[data-theme="dark"] #price {
    color: var(--text);
    font-weight: 600;
}

/* ============================================
   HOMEPAGE ELEMENTS
   ============================================ */

/* Product boxes and text - ONLY in dark mode */
[data-theme="dark"] .box {
    color: var(--text) !important;
    background-color: var(--bg);
}

[data-theme="dark"] .box p {
    color: var(--text) !important;
}

/* Cart icon and dots icon - ONLY in dark mode */
[data-theme="dark"] .fa-cart-shopping,
[data-theme="dark"] .fa-ellipsis-vertical {
    color: var(--text) !important;
}

[data-theme="dark"] .fa-cart-shopping:hover {
    color: var(--text) !important;
    opacity: 0.8;
}

/* Bottom section text - ONLY in dark mode */
[data-theme="dark"] .bottom p,
[data-theme="dark"] .bottom-container p {
    color: var(--text) !important;
}

[data-theme="dark"] .bottom i {
    color: var(--text) !important;
}

/* ============================================
   PRODUCT PAGE ELEMENTS
   ============================================ */

/* Product name and labels - ONLY in dark mode */
[data-theme="dark"] #product-name,
[data-theme="dark"] .right-column p {
    color: var(--text) !important;
}

/* Left and right columns - ONLY in dark mode */
[data-theme="dark"] .left-column,
[data-theme="dark"] .right-column {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

/* Price display - ONLY in dark mode */
[data-theme="dark"] .price::before {
    color: var(--text) !important;
}

/* Country flags - ONLY in dark mode */
[data-theme="dark"] .country-flag {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .country-flag.selected {
    border-color: var(--text) !important;
    border-width: 2px !important;
    background-color: var(--surface-hover) !important;
}

/* Price buttons - ONLY in dark mode */
[data-theme="dark"] .price-button {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .price-button.selected {
    border-color: var(--text) !important;
    background-color: var(--surface-hover) !important;
    color: var(--text) !important;
    font-weight: 600;
}

[data-theme="dark"] .price-button.out-of-stock {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Headings - ONLY in dark mode */
[data-theme="dark"] h2 {
    color: var(--text) !important;
}

[data-theme="dark"] h2::after {
    background: var(--text) !important;
}

/* List items - ONLY in dark mode */
[data-theme="dark"] ul li {
    color: var(--text) !important;
}

/* ============================================
   POPUP AND MODAL ELEMENTS
   ============================================ */

/* Popup and modal elements - ONLY in dark mode */
[data-theme="dark"] .popup-container,
[data-theme="dark"] .popup-auth,
[data-theme="dark"] .popup-auth-otp,
[data-theme="dark"] .info-container {
    background-color: var(--surface) !important;
    color: var(--text) !important;
}

[data-theme="dark"] .popup-auth-header {
    background-color: var(--surface) !important;
}

[data-theme="dark"] .login-text,
[data-theme="dark"] .otp-text {
    color: var(--text) !important;
}

/* Input fields - ONLY apply in dark mode */
[data-theme="dark"] input.email,
[data-theme="dark"] input.password,
[data-theme="dark"] input.otp-input {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] input.email::placeholder,
[data-theme="dark"] input.password::placeholder,
[data-theme="dark"] input.otp-input::placeholder {
    color: var(--text-3);
    opacity: 1;
}

[data-theme="dark"] input.email:focus,
[data-theme="dark"] input.password:focus,
[data-theme="dark"] input.otp-input:focus {
    border-color: var(--text) !important;
    outline-color: var(--text) !important;
    background-color: var(--surface) !important;
}

/* Login button - ONLY in dark mode */
[data-theme="dark"] .log-in {
    background-color: #000000;
}

[data-theme="dark"] .login-btn,
[data-theme="dark"] .otp-btn {
    background-color: var(--text) !important;
    color: var(--bg) !important;
    border: none !important;
    transition: all 0.2s ease;
}

[data-theme="dark"] .login-btn:hover,
[data-theme="dark"] .otp-btn:hover {
    background-color: var(--surface-hover) !important;
    color: var(--text) !important;
}

/* User dropdown - dark mode */
[data-theme="dark"] .user-dropdown {
    background-color: #000000;
}

[data-theme="dark"] .verifed-logged-in-user.active {
    background-color: #000000;
}

/* Error messages - ONLY in dark mode */
[data-theme="dark"] .email-error {
    color: var(--accent-red) !important;
}

/* Close button - ONLY in dark mode */
[data-theme="dark"] .close-btn {
    color: var(--text) !important;
}

[data-theme="dark"] .close-btn:hover {
    color: var(--text) !important;
    opacity: 0.8;
}

/* Password toggle icons - ONLY in dark mode */
[data-theme="dark"] .bi-eye,
[data-theme="dark"] .bi-eye-slash {
    color: var(--text) !important;
}

/* ============================================
   DROPDOWN MENU
   ============================================ */

/* Dropdown menu - ONLY in dark mode */
[data-theme="dark"] .DropDownMenu {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="dark"] .DropDownMenu ul li a {
    color: var(--text) !important;
}

[data-theme="dark"] .DropDownMenu ul li a:hover {
    background-color: var(--surface-hover) !important;
    color: var(--text) !important;
}

[data-theme="dark"] .DropDownMenu i {
    color: var(--text) !important;
}

/* ============================================
   CART PAGE ELEMENTS
   ============================================ */

/* Override cart.css variables for dark mode */
[data-theme="dark"] {
    --muted: var(--text-3);
    --line: var(--border);
    --panel: var(--surface);
    --pill: var(--text);
    --pillText: var(--bg);
    --accent: var(--text);
}

/* Cart page elements - ONLY in dark mode */
[data-theme="dark"] .cart-item-title,
[data-theme="dark"] .cart-item-facevalue {
    color: var(--text) !important;
}

[data-theme="dark"] .cart-item-price {
    color: var(--text) !important;
}

[data-theme="dark"] .qty-value {
    color: var(--text) !important;
}

[data-theme="dark"] .offer-price {
    color: #ffffff;
}


/* ============================================
   GENERAL INPUT FIELDS - ONLY in dark mode
   ============================================ */

[data-theme="dark"] input, 
[data-theme="dark"] textarea, 
[data-theme="dark"] select {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] input:focus, 
[data-theme="dark"] textarea:focus, 
[data-theme="dark"] select:focus {
    border-color: var(--text) !important;
    outline-color: var(--text) !important;
}

/* ============================================
   LINKS AND ANCHORS
   ============================================ */

/* Links and anchors - ONLY in dark mode */
[data-theme="dark"] a {
    color: var(--link);
}

[data-theme="dark"] a:hover {
    color: var(--link);
    opacity: 0.8;
}

/* ============================================
   OVERLAY AND LOADER
   ============================================ */

#overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] #overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Loader - ONLY in dark mode */
[data-theme="dark"] .loader {
    background-color: var(--surface) !important;
}

/* ============================================
   ADD TO CART BUTTON
   ============================================ */

/* Add to cart button - ONLY in dark mode */

[data-theme="dark"] .applepay {
    background-color: black !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="dark"] .addtocart {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="dark"] .addtocart:hover {
    background-color: var(--text) !important;
    color: var(--bg) !important;
    border-color: var(--text) !important;
    opacity: 0.95;
}

[data-theme="dark"] .addtocart i,
[data-theme="dark"] .applepay i {
    color: var(--text) !important;
}

[data-theme="dark"] .addtocart:hover i {
    color: var(--bg) !important;
}

/* ============================================
   STEPS AND BREADCRUMBS
   ============================================ */

/* Steps and breadcrumbs - ONLY in dark mode */
[data-theme="dark"] .steps {
    color: var(--text) !important;
}

[data-theme="dark"] .steps b {
    color: var(--text) !important;
}

[data-theme="dark"] .steps span {
    color: var(--text-2);
    opacity: 1;
}

/* ============================================
   CART BADGE (Neutral professional)
   ============================================ */

/* Cart badge - ONLY in dark mode */
[data-theme="dark"] .cart-badge {
    background-color: var(--text) !important;
    color: var(--bg) !important;
    font-weight: 600;
}

/* ============================================
   CONTAINER BANNERS
   ============================================ */

/* Container banners - ONLY in dark mode */
[data-theme="dark"] .container-banners {
    background-color: transparent;
}

/* ============================================
   WHY US SECTION - ONLY in dark mode
   ============================================ */

[data-theme="dark"] .whyus,
[data-theme="dark"] .reviews {
    background-color: transparent;
    color: var(--text);
}

/* ============================================
   BOTTOM SECTION - ONLY in dark mode
   ============================================ */

[data-theme="dark"] .bottom {
    background-color: var(--bg);
    color: var(--text);
}

[data-theme="dark"] .bottom-container {
    background-color: transparent;
}

.site-footer {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

/* Footer logo white in dark mode */
[data-theme="dark"] .footer-logo-img {
    filter: brightness(0) invert(1);
}

/* Footer text elements in dark mode */
[data-theme="dark"] .footer-logo-text,
[data-theme="dark"] .footer-heading {
    color: #FFFFFF !important;
}

[data-theme="dark"] .footer-description,
[data-theme="dark"] .footer-list a,
[data-theme="dark"] .social-link,
[data-theme="dark"] .footer-legal a {
    color: #B3B3B3 !important;
}

[data-theme="dark"] .footer-list a:hover,
[data-theme="dark"] .social-link:hover,
[data-theme="dark"] .footer-legal a:hover {
    color: #FFFFFF !important;
}

[data-theme="dark"] .footer-copyright {
    color: #8F8F8F !important;
}

[data-theme="dark"] .footer-bottom {
    border-top-color: #3A3A3A !important;
}