/* Force light mode - prevent browser dark mode */
:root, html, body { color-scheme: light only !important; }

/**
 * Amazon Style Theme for OpenCart 3.0.5.0
 * CSS Variables - Design System Foundation
 *
 * @package    theme_amazon
 * @author     ChatGPT.com
 * @version    1.0.0
 */

:root {
  /* ========================================
     BRAND COLORS
     ======================================== */

  /* Primary palette - Corporate Blue */
  --amazon-primary: #0F2352;
  --amazon-primary-light: #1A3068;
  --amazon-primary-dark: #0A1A3D;

  /* Secondary palette */
  --amazon-secondary: #0A1A3D;
  --amazon-secondary-light: #0F2352;

  /* Accent color - Orange CTA */
  --amazon-accent: #F97316;
  --amazon-accent-hover: #FB923C;
  --amazon-accent-dark: #EA6A0A;

  /* Status colors */
  --amazon-success: #067D62;
  --amazon-success-light: #E7F4F0;
  --amazon-danger: #B12704;
  --amazon-danger-light: #FEECEB;
  --amazon-warning: #C7511F;
  --amazon-warning-light: #FFF3E7;
  --amazon-info: #007185;
  --amazon-info-light: #E7F7FA;

  /* ========================================
     TEXT COLORS
     ======================================== */
  --amazon-text: #0F1111;
  --amazon-text-primary: #0F1111;
  --amazon-text-secondary: #565959;
  --amazon-text-muted: #767676;
  --amazon-text-light: #FFFFFF;
  --amazon-text-inverse: #FFFFFF;

  /* Links */
  --amazon-link: #007185;
  --amazon-link-hover: #C7511F;
  --amazon-link-visited: #006064;

  /* ========================================
     BACKGROUND COLORS
     ======================================== */
  --amazon-bg-body: #E3E6E6;
  --amazon-bg-light: #FFFFFF;
  --amazon-bg-secondary: #F5F5F5;
  --amazon-bg-gray: #F5F5F5;
  --amazon-bg-gray-light: #F7F8F8;
  --amazon-bg-hover: #F7F8F8;
  --amazon-bg-dark: #0F2352;
  --amazon-bg-darker: #0A1A3D;

  /* Component backgrounds */
  --amazon-bg-card: #FFFFFF;
  --amazon-bg-header: #0F2352;
  --amazon-bg-topbar: #0A1A3D;
  --amazon-bg-footer: #0F2352;
  --amazon-bg-mobile-nav: #FFFFFF;

  /* Admin model aliases (--amazon-header-bg maps to --amazon-bg-header, etc.) */
  --amazon-header-bg: #0F2352;
  --amazon-topbar-bg: #0A1A3D;
  --amazon-footer-bg: #0F2352;
  --amazon-footer-text: #FFFFFF;
  --amazon-mobile-nav-bg: #FFFFFF;
  --amazon-mobile-nav-icon: #565959;
  --amazon-mobile-nav-active: #F97316;

  /* ========================================
     BORDERS
     ======================================== */
  --amazon-border: #DDD;
  --amazon-border-color: #DDD;
  --amazon-border-light: #E7E7E7;
  --amazon-border-dark: #949494;
  --amazon-border-focus: #007185;
  --amazon-border-error: #B12704;

  /* Border radius */
  --amazon-radius-sm: 4px;
  --amazon-radius: 8px;
  --amazon-radius-lg: 12px;
  --amazon-radius-xl: 16px;
  --amazon-radius-full: 50%;

  /* ========================================
     SHADOWS
     ======================================== */
  --amazon-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --amazon-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  --amazon-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
  --amazon-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  --amazon-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2);
  --amazon-shadow-card: 0 2px 5px 0 rgba(213, 217, 217, 0.5);
  --amazon-shadow-dropdown: 0 2px 4px rgba(0, 0, 0, 0.13);

  /* ========================================
     TYPOGRAPHY
     ======================================== */
  --amazon-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --amazon-font-size: 14px;
  --amazon-font-heading: inherit;
  --amazon-font-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", monospace;

  /* Font sizes */
  --amazon-text-xs: 11px;
  --amazon-text-sm: 12px;
  --amazon-text-base: 14px;
  --amazon-text-md: 16px;
  --amazon-text-lg: 18px;
  --amazon-text-xl: 20px;
  --amazon-text-2xl: 24px;
  --amazon-text-3xl: 28px;
  --amazon-text-4xl: 32px;

  /* Font weights */
  --amazon-font-normal: 400;
  --amazon-font-medium: 500;
  --amazon-font-semibold: 600;
  --amazon-font-bold: 700;

  /* Line heights */
  --amazon-leading-tight: 1.2;
  --amazon-leading-snug: 1.35;
  --amazon-leading-normal: 1.5;
  --amazon-leading-relaxed: 1.625;

  /* ========================================
     SPACING
     ======================================== */
  --amazon-space-0: 0;
  --amazon-space-1: 4px;
  --amazon-space-2: 8px;
  --amazon-space-3: 12px;
  --amazon-space-4: 16px;
  --amazon-space-5: 20px;
  --amazon-space-6: 24px;
  --amazon-space-8: 32px;
  --amazon-space-10: 40px;
  --amazon-space-12: 48px;
  --amazon-space-16: 64px;

  /* ========================================
     LAYOUT
     ======================================== */
  --amazon-container-max: 1500px;
  --amazon-container-padding: 15px;

  /* Header heights */
  --amazon-topbar-height: 40px;
  --amazon-header-height: 60px;
  --amazon-nav-height: 40px;
  --amazon-mobile-nav-height: 56px;

  /* Sidebar */
  --amazon-sidebar-width: 280px;
  --amazon-drawer-width: 365px;

  /* ========================================
     BREAKPOINTS (for reference, use in media queries)
     ======================================== */
  /*
   * --amazon-bp-xs: 0;
   * --amazon-bp-sm: 576px;
   * --amazon-bp-md: 768px;
   * --amazon-bp-lg: 992px;
   * --amazon-bp-xl: 1200px;
   * --amazon-bp-xxl: 1400px;
   */

  /* ========================================
     Z-INDEX LAYERS
     ======================================== */
  --amazon-z-dropdown: 100;
  --amazon-z-sticky: 200;
  --amazon-z-fixed: 300;
  --amazon-z-drawer: 400;
  --amazon-z-modal-backdrop: 500;
  --amazon-z-modal: 600;
  --amazon-z-tooltip: 700;
  --amazon-z-toast: 800;

  /* ========================================
     TRANSITIONS
     ======================================== */
  --amazon-transition-fast: 150ms ease;
  --amazon-transition: 200ms ease;
  --amazon-transition-slow: 300ms ease;
  --amazon-transition-slower: 400ms ease;

  /* ========================================
     PRODUCT CARD
     ======================================== */
  --amazon-card-padding: 12px;
  --amazon-card-gap: 16px;
  --amazon-card-image-ratio: 1;

  /* ========================================
     BUTTONS
     ======================================== */
  --amazon-btn-height: 36px;
  --amazon-btn-height-sm: 28px;
  --amazon-btn-height-lg: 44px;
  --amazon-btn-padding: 0 16px;
  --amazon-btn-radius: 8px;

  /* Primary button (Buy/Add to Cart) */
  --amazon-btn-primary-bg: linear-gradient(to bottom, #f7dfa5, #f0c14b);
  --amazon-btn-primary-border: #a88734;
  --amazon-btn-primary-text: #111;
  --amazon-btn-primary-hover-bg: linear-gradient(to bottom, #f5d78e, #eeb933);

  /* Secondary button */
  --amazon-btn-secondary-bg: linear-gradient(to bottom, #f7f8fa, #e7e9ec);
  --amazon-btn-secondary-border: #adb1b8;
  --amazon-btn-secondary-text: #111;

  /* Buy Now button (Orange) */
  --amazon-btn-buy-bg: linear-gradient(to bottom, #FB923C, #F97316);
  --amazon-btn-buy-border: #EA6A0A;
  --amazon-btn-buy-text: #111;
  --amazon-btn-buy-hover-bg: linear-gradient(to bottom, #FDBA74, #FB923C);

  /* ========================================
     FORMS
     ======================================== */
  --amazon-input-height: 40px;
  --amazon-input-padding: 8px 12px;
  --amazon-input-border: 1px solid var(--amazon-border-color);
  --amazon-input-radius: 4px;
  --amazon-input-focus-shadow: 0 0 0 3px rgba(0, 113, 133, 0.2);

  /* ========================================
     RATINGS
     ======================================== */
  --amazon-star-color: #F97316;
  --amazon-star-empty: #D0D0D0;
  --amazon-star-size: 16px;

  /* ========================================
     PRICE
     ======================================== */
  --amazon-price-color: #0F1111;
  --amazon-price-sale: #B12704;
  --amazon-price-original: #565959;
  --amazon-price-symbol-size: 13px;
  --amazon-price-whole-size: 28px;
  --amazon-price-fraction-size: 13px;

  /* ========================================
     BADGES
     ======================================== */
  --amazon-badge-deal-bg: #CC0C39;
  --amazon-badge-deal-text: #FFFFFF;
  --amazon-badge-prime-bg: #232F3E;
  --amazon-badge-bestseller-bg: #F97316;
}

/* ========================================
   DARK MODE SUPPORT
   Activated via:
   1. Manual toggle: [data-theme="DISABLED-dark"] on <html>
   2. OS preference: @media (prefers-color-scheme: dark)
      when user hasn't explicitly chosen light mode
   ======================================== */

/* Smooth transition when switching modes */
html[data-theme] *,
html[data-theme] *::before,
html[data-theme] *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ---- Dark mode variable overrides ---- */
[data-theme="DISABLED-dark"] {
  /* Brand Colors */
  --amazon-primary: #1A2332;
  --amazon-primary-light: #2A3A4E;
  --amazon-primary-dark: #0D1117;

  --amazon-secondary: #0D1117;
  --amazon-secondary-light: #141C27;

  /* Accent stays bright */
  --amazon-accent: #F97316;
  --amazon-accent-hover: #FB923C;
  --amazon-accent-dark: #EA6A0A;

  /* Status colors - brighter for dark backgrounds */
  --amazon-success: #4CAF50;
  --amazon-success-light: #1B2E1C;
  --amazon-danger: #FF5252;
  --amazon-danger-light: #2E1515;
  --amazon-warning: #FF8A65;
  --amazon-warning-light: #2E1E15;
  --amazon-info: #29B6F6;
  --amazon-info-light: #152228;

  /* Text Colors */
  --amazon-text: #E8E8E8;
  --amazon-text-primary: #E8E8E8;
  --amazon-text-secondary: #999999;
  --amazon-text-muted: #888888;
  --amazon-text-light: #FFFFFF;
  --amazon-text-inverse: #0F1111;

  /* Links */
  --amazon-link: #569CD6;
  --amazon-link-hover: #FF9900;
  --amazon-link-visited: #7AAFDF;

  /* Background Colors */
  --amazon-bg-body: #0F1111;
  --amazon-bg-light: #191919;
  --amazon-bg-secondary: #1A1A1A;
  --amazon-bg-gray: #1E1E1E;
  --amazon-bg-gray-light: #1C1C1C;
  --amazon-bg-hover: #252525;
  --amazon-bg-dark: #0A0E13;
  --amazon-bg-darker: #050709;

  /* Component backgrounds */
  --amazon-bg-card: #191919;
  --amazon-bg-header: #0D1117;
  --amazon-bg-topbar: #1A2332;
  --amazon-bg-footer: #1A2332;
  --amazon-bg-mobile-nav: #191919;

  /* Admin model aliases */
  --amazon-header-bg: #0D1117;
  --amazon-topbar-bg: #1A2332;
  --amazon-footer-bg: #1A2332;
  --amazon-footer-text: #CCCCCC;
  --amazon-mobile-nav-bg: #191919;
  --amazon-mobile-nav-icon: #999999;
  --amazon-mobile-nav-active: #F97316;

  /* Borders */
  --amazon-border: #333333;
  --amazon-border-color: #333333;
  --amazon-border-light: #2A2A2A;
  --amazon-border-dark: #555555;
  --amazon-border-focus: #569CD6;
  --amazon-border-error: #FF5252;

  /* Shadows - stronger, darker */
  --amazon-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --amazon-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  --amazon-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.45);
  --amazon-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5);
  --amazon-shadow-xl: 0 12px 28px rgba(0, 0, 0, 0.6);
  --amazon-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
  --amazon-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.5);

  /* Buttons */
  --amazon-btn-primary-bg: linear-gradient(to bottom, #f0c14b, #e0a800);
  --amazon-btn-primary-border: #8a6d1b;
  --amazon-btn-primary-text: #111111;
  --amazon-btn-primary-hover-bg: linear-gradient(to bottom, #eeb933, #d4a017);

  --amazon-btn-secondary-bg: linear-gradient(to bottom, #3A3A3A, #2C2C2C);
  --amazon-btn-secondary-border: #555555;
  --amazon-btn-secondary-text: #E8E8E8;

  --amazon-btn-buy-bg: linear-gradient(to bottom, #FB923C, #F97316);
  --amazon-btn-buy-border: #EA6A0A;
  --amazon-btn-buy-text: #111111;
  --amazon-btn-buy-hover-bg: linear-gradient(to bottom, #FDBA74, #FB923C);

  /* Forms */
  --amazon-input-border: 1px solid #444444;
  --amazon-input-focus-shadow: 0 0 0 3px rgba(86, 156, 214, 0.3);

  /* Ratings */
  --amazon-star-color: #FF9900;
  --amazon-star-empty: #444444;

  /* Price - brighter for dark mode */
  --amazon-price-color: #E8E8E8;
  --amazon-price-sale: #FF6B35;
  --amazon-price-original: #888888;

  /* Badges */
  --amazon-badge-deal-bg: #FF4444;
  --amazon-badge-deal-text: #FFFFFF;
  --amazon-badge-prime-bg: #1A2332;
  --amazon-badge-bestseller-bg: #F97316;

  /* Skeleton / loading shimmer */
  --amazon-skeleton-base: #222222;
  --amazon-skeleton-shine: #333333;
}

/* Auto dark mode: follows OS preference unless user explicitly chose light.
   IMPORTANT: This block must duplicate [data-theme="DISABLED-dark"] above because
   @media queries cannot be combined with attribute selectors in a single ruleset.
   This ensures correct dark mode BEFORE JS loads (prevents flash of light theme). */
@media (prefers-color-scheme: DISABLED-dark-mode) { /* DISABLED: force light mode */
  :root:not([data-theme="light"]) {
    /* Brand Colors */
    --amazon-primary: #1A2332;
    --amazon-primary-light: #2A3A4E;
    --amazon-primary-dark: #0D1117;

    --amazon-secondary: #0D1117;
    --amazon-secondary-light: #141C27;

    /* Accent stays bright */
    --amazon-accent: #F97316;
    --amazon-accent-hover: #FB923C;
    --amazon-accent-dark: #EA6A0A;

    /* Status colors - brighter for dark backgrounds */
    --amazon-success: #4CAF50;
    --amazon-success-light: #1B2E1C;
    --amazon-danger: #FF5252;
    --amazon-danger-light: #2E1515;
    --amazon-warning: #FF8A65;
    --amazon-warning-light: #2E1E15;
    --amazon-info: #29B6F6;
    --amazon-info-light: #152228;

    /* Text Colors */
    --amazon-text: #E8E8E8;
    --amazon-text-primary: #E8E8E8;
    --amazon-text-secondary: #999999;
    --amazon-text-muted: #888888;
    --amazon-text-light: #FFFFFF;
    --amazon-text-inverse: #0F1111;

    /* Links */
    --amazon-link: #569CD6;
    --amazon-link-hover: #FF9900;
    --amazon-link-visited: #7AAFDF;

    /* Background Colors */
    --amazon-bg-body: #0F1111;
    --amazon-bg-light: #191919;
    --amazon-bg-secondary: #1A1A1A;
    --amazon-bg-gray: #1E1E1E;
    --amazon-bg-gray-light: #1C1C1C;
    --amazon-bg-hover: #252525;
    --amazon-bg-dark: #0A0E13;
    --amazon-bg-darker: #050709;

    /* Component backgrounds */
    --amazon-bg-card: #191919;
    --amazon-bg-header: #0D1117;
    --amazon-bg-topbar: #1A2332;
    --amazon-bg-footer: #1A2332;
    --amazon-bg-mobile-nav: #191919;

    /* Admin model aliases */
    --amazon-header-bg: #0D1117;
    --amazon-topbar-bg: #1A2332;
    --amazon-footer-bg: #1A2332;
    --amazon-footer-text: #CCCCCC;
    --amazon-mobile-nav-bg: #191919;
    --amazon-mobile-nav-icon: #999999;
    --amazon-mobile-nav-active: #F97316;

    /* Borders */
    --amazon-border: #333333;
    --amazon-border-color: #333333;
    --amazon-border-light: #2A2A2A;
    --amazon-border-dark: #555555;
    --amazon-border-focus: #569CD6;
    --amazon-border-error: #FF5252;

    /* Shadows - stronger, darker */
    --amazon-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --amazon-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    --amazon-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.45);
    --amazon-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5);
    --amazon-shadow-xl: 0 12px 28px rgba(0, 0, 0, 0.6);
    --amazon-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
    --amazon-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.5);

    /* Buttons */
    --amazon-btn-primary-bg: linear-gradient(to bottom, #f0c14b, #e0a800);
    --amazon-btn-primary-border: #8a6d1b;
    --amazon-btn-primary-text: #111111;
    --amazon-btn-primary-hover-bg: linear-gradient(to bottom, #eeb933, #d4a017);

    --amazon-btn-secondary-bg: linear-gradient(to bottom, #3A3A3A, #2C2C2C);
    --amazon-btn-secondary-border: #555555;
    --amazon-btn-secondary-text: #E8E8E8;

    --amazon-btn-buy-bg: linear-gradient(to bottom, #FB923C, #F97316);
    --amazon-btn-buy-border: #EA6A0A;
    --amazon-btn-buy-text: #111111;
    --amazon-btn-buy-hover-bg: linear-gradient(to bottom, #FDBA74, #FB923C);

    /* Forms */
    --amazon-input-border: 1px solid #444444;
    --amazon-input-focus-shadow: 0 0 0 3px rgba(86, 156, 214, 0.3);

    /* Ratings */
    --amazon-star-color: #FF9900;
    --amazon-star-empty: #444444;

    /* Price - brighter for dark mode */
    --amazon-price-color: #E8E8E8;
    --amazon-price-sale: #FF6B35;
    --amazon-price-original: #888888;

    /* Badges */
    --amazon-badge-deal-bg: #FF4444;
    --amazon-badge-deal-text: #FFFFFF;
    --amazon-badge-prime-bg: #1A2332;
    --amazon-badge-bestseller-bg: #F97316;

    /* Skeleton / loading shimmer */
    --amazon-skeleton-base: #222222;
    --amazon-skeleton-shine: #333333;
  }
}

/* ============================================
   Accessibility
   ============================================ */

/* Skip to content link */

.amazon-skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--amazon-accent);
    color: var(--amazon-text-inverse, #0F1111);
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    z-index: 100000;
    transition: top 0.2s ease;
}

.amazon-skip-link:focus {
    top: 0;
    outline: 3px solid var(--amazon-accent);
    outline-offset: 2px;
}

/* Enhanced focus indicators */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--amazon-accent);
    outline-offset: 2px;
}

/* Dark mode focus */
[data-theme="DISABLED-dark"] a:focus-visible,
[data-theme="DISABLED-dark"] button:focus-visible,
[data-theme="DISABLED-dark"] input:focus-visible,
[data-theme="DISABLED-dark"] select:focus-visible,
[data-theme="DISABLED-dark"] textarea:focus-visible,
[data-theme="DISABLED-dark"] [tabindex]:focus-visible {
    outline-color: var(--amazon-accent-light, #FFB84D);
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* mobile touch target fix - minimum 44px for buttons/inputs on mobile */
@media (max-width: 767.98px) {
    :root {
        --amazon-btn-height: 44px;
        --amazon-input-height: 44px;
    }
}