/* ===== THEME: Luxe Tech — Dynamic Dashboard ===== */
/* Phone product page with Carbon/Gold/Indigo palette */

:root {
  /* ── Core Palette ── */
  --carbon-black: #191716;
  --sunflower-gold: #e6af2e;
  --soft-linen: #e0e2db;
  --indigo-velvet: #3d348b;
  --khaki-beige: #beb7a4;

  /* ── Derived Colors ── */
  --gold-light: #f0c85e;
  --gold-dark: #c4921e;
  --indigo-light: #5a4fb3;
  --indigo-dark: #2b2566;
  --carbon-light: #2a2725;
  --carbon-lighter: #3d3936;
  --linen-dark: #c8cabe;
  --linen-light: #edeee9;

  /* ── Backgrounds ── */
  --color-bg: #ffffff;
  --color-bg-alt: var(--linen-light);
  --color-bg-dark: var(--carbon-black);
  --color-bg-dark-alt: var(--carbon-light);
  --color-surface: var(--soft-linen);
  --color-surface-dark: var(--carbon-lighter);

  /* ── Text ── */
  --color-text: var(--carbon-black);
  --color-text-secondary: #5a5654;
  --color-text-muted: var(--khaki-beige);
  --color-text-light: #ffffff;
  --color-text-light-secondary: rgba(255, 255, 255, 0.75);
  --color-text-light-muted: rgba(255, 255, 255, 0.4);

  /* ── Accent: Primary (Gold) ── */
  --color-accent: var(--sunflower-gold);
  --color-accent-hover: var(--gold-dark);
  --color-accent-light: var(--gold-light);
  --color-accent-bg: rgba(230, 175, 46, 0.08);
  --color-accent-bg-strong: rgba(230, 175, 46, 0.15);

  /* ── Accent: Secondary (Indigo) ── */
  --color-secondary: var(--indigo-velvet);
  --color-secondary-hover: var(--indigo-light);
  --color-secondary-light: rgba(61, 52, 139, 0.1);
  --color-secondary-bg: rgba(61, 52, 139, 0.06);

  /* ── Borders ── */
  --color-border: var(--linen-dark);
  --color-border-light: var(--soft-linen);
  --color-border-dark: rgba(255, 255, 255, 0.1);
  --color-border-gold: rgba(230, 175, 46, 0.3);

  /* ── Status ── */
  --color-success: #4caf50;
  --color-warning: var(--sunflower-gold);
  --color-error: #ef4444;
  --color-info: var(--indigo-velvet);

  /* ── Fonts ── */
  --font-display: 'Playfair Display', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'Roboto Mono', monospace;

  /* ── Font Sizes ── */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;
  --text-6xl: 4.5rem;
  --text-hero: clamp(3rem, 8vw, 6rem);

  /* ── Font Weights ── */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Spacing ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-section: clamp(4rem, 10vw, 8rem);

  /* ── Border Radius ── */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(25, 23, 22, 0.04);
  --shadow-sm: 0 2px 8px rgba(25, 23, 22, 0.06);
  --shadow-md: 0 4px 16px rgba(25, 23, 22, 0.08);
  --shadow-lg: 0 8px 32px rgba(25, 23, 22, 0.1);
  --shadow-xl: 0 16px 48px rgba(25, 23, 22, 0.14);
  --shadow-glow-gold: 0 0 40px rgba(230, 175, 46, 0.2);
  --shadow-glow-indigo: 0 0 40px rgba(61, 52, 139, 0.2);
  --shadow-card: 0 2px 12px rgba(25, 23, 22, 0.06), 0 0 0 1px rgba(25, 23, 22, 0.03);
  --shadow-card-hover: 0 8px 30px rgba(25, 23, 22, 0.1), 0 0 0 1px rgba(230, 175, 46, 0.25);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --transition-base: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index ── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-nav: 500;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ── Layout ── */
  --container-max: 1280px;
  --container-padding: clamp(1rem, 4vw, 2rem);
  --nav-height: 72px;
  --nav-height-mobile: 64px;

  /* ── Progress Bar Colors (specs) ── */
  --progress-display: var(--sunflower-gold);
  --progress-camera: var(--gold-light);
  --progress-battery: var(--indigo-velvet);
  --progress-frame: var(--indigo-light);
}

/* ── Dark Section Override ── */
.section--dark {
  --color-bg: var(--color-bg-dark);
  --color-text: var(--color-text-light);
  --color-text-secondary: var(--color-text-light-secondary);
  --color-text-muted: var(--color-text-light-muted);
  --color-border: var(--color-border-dark);
  --color-surface: var(--color-surface-dark);
}

/* ── Gradient Presets ── */
:root {
  --gradient-hero: linear-gradient(135deg, var(--carbon-black) 0%, #2a2230 50%, var(--indigo-dark) 100%);
  --gradient-gold: linear-gradient(135deg, var(--gold-dark) 0%, var(--sunflower-gold) 50%, var(--gold-light) 100%);
  --gradient-card-dark: linear-gradient(180deg, var(--carbon-lighter) 0%, var(--carbon-black) 100%);
  --gradient-accent-bar: linear-gradient(90deg, var(--sunflower-gold), var(--indigo-velvet));
  --gradient-surface: linear-gradient(180deg, var(--linen-light) 0%, #ffffff 100%);
}

/* ══════════════════════════════════════════════════
   NAV ICON BUTTONS (Search, Account)
   ══════════════════════════════════════════════════ */
.nav__icon-btn {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: rgba(255,255,255,0.65) !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: all 0.25s ease !important;
  padding: 0 !important;
}
.nav__icon-btn:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #e6af2e !important;
  transform: scale(1.1) !important;
}
.nav--light .nav__icon-btn {
  color: rgba(25,23,22,0.45) !important;
}
.nav--light .nav__icon-btn:hover {
  background: rgba(25,23,22,0.06) !important;
  color: #3d348b !important;
}

/* Nav link dropdown-active state */
.nav__links a.dropdown-active {
  color: #e6af2e !important;
}
.nav__links a.dropdown-active::after {
  width: 100% !important;
  background: #e6af2e !important;
}

/* ══════════════════════════════════════════════════
   FOOTER NEWSLETTER
   ══════════════════════════════════════════════════ */
.footer__newsletter-wrapper {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  padding: 8px !important;
  margin-bottom: 40px !important;
}
.footer__newsletter {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 40px !important;
  padding: 28px 28px !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
}
.footer__newsletter-text h4 {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.35rem !important;
  color: #fff !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
  letter-spacing: -0.01em !important;
}
.footer__newsletter-text p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.82rem !important;
  color: rgba(255,255,255,0.4) !important;
}
.footer__newsletter-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.footer__newsletter-input-wrap {
  display: flex !important;
  border-radius: 100px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.04) !important;
  transition: border-color 0.3s ease !important;
}
.footer__newsletter-input-wrap:focus-within {
  border-color: rgba(230,175,46,0.4) !important;
}
.footer__newsletter-input-wrap input {
  background: transparent !important;
  border: none !important;
  padding: 11px 20px !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.85rem !important;
  outline: none !important;
  min-width: 220px !important;
  width: 100% !important;
}
.footer__newsletter-input-wrap input::placeholder {
  color: rgba(255,255,255,0.3) !important;
}
.footer__newsletter-input-wrap button {
  background: #e6af2e !important;
  color: #191716 !important;
  border: none !important;
  padding: 11px 24px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  white-space: nowrap !important;
}
.footer__newsletter-input-wrap button:hover {
  background: #f0c85e !important;
}
.footer__newsletter-msg {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.78rem !important;
  color: #e6af2e !important;
}

@media (max-width: 800px) {
  .footer__newsletter-wrapper {
    padding: 6px !important;
    border-radius: 16px !important;
    margin-bottom: 32px !important;
  }
  .footer__newsletter {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 20px 18px !important;
  }
  .footer__newsletter-input-wrap input {
    min-width: 140px !important;
  }
}

/* ══════════════════════════════════════════════════
   NAV MEGA DROPDOWNS
   ══════════════════════════════════════════════════ */

/* Overlay behind dropdown (frosted glass) */
.nav-dropdown-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 498 !important;
  background: rgba(25,23,22,0.18) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
.nav-dropdown-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Dropdown panel — light frosted glass */
.nav-dropdown {
  position: fixed !important;
  top: 72px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 499 !important;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(25,23,22,0.06) !important;
  box-shadow: 0 12px 40px rgba(25,23,22,0.1) !important;
  transform: translateY(-12px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease, visibility 0.3s ease !important;
  padding: 0 !important;
}
.nav-dropdown.active {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.nav-dropdown__inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 36px clamp(1rem,4vw,2rem) 40px !important;
  display: flex !important;
  gap: 48px !important;
}

/* Dropdown columns */
.nav-dropdown__col {
  flex: 1 !important;
}
.nav-dropdown__col-title {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: rgba(25,23,22,0.4) !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(25,23,22,0.06) !important;
}

/* Dropdown links */
.nav-dropdown__link {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  color: #3d3936 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}
.nav-dropdown__link:hover {
  background: rgba(25,23,22,0.04) !important;
  color: #191716 !important;
}
.nav-dropdown__link-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: rgba(230,175,46,0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #c4921e !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}
.nav-dropdown__link:hover .nav-dropdown__link-icon {
  background: rgba(230,175,46,0.15) !important;
  color: #e6af2e !important;
}
.nav-dropdown__link-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.nav-dropdown__link-text span:first-child {
  color: #191716 !important;
  font-weight: 600 !important;
}
.nav-dropdown__link-text span:last-child {
  font-size: 0.78rem !important;
  color: rgba(25,23,22,0.45) !important;
  font-weight: 400 !important;
}

/* Promo card inside dropdown */
.nav-dropdown__promo {
  background: linear-gradient(135deg, rgba(230,175,46,0.06) 0%, rgba(61,52,139,0.04) 100%) !important;
  border: 1px solid rgba(230,175,46,0.18) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-width: 280px !important;
}
.nav-dropdown__promo-label {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #c4921e !important;
  font-weight: 600 !important;
}
.nav-dropdown__promo-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.15rem !important;
  color: #191716 !important;
  font-weight: 600 !important;
}
.nav-dropdown__promo-desc {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.8rem !important;
  color: rgba(25,23,22,0.55) !important;
  line-height: 1.5 !important;
}
.nav-dropdown__promo-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 8px !important;
  color: #c4921e !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: gap 0.2s ease !important;
}
.nav-dropdown__promo-btn:hover {
  gap: 10px !important;
  color: #e6af2e !important;
}

/* ── Search Dropdown ── */
.nav-dropdown--search .nav-dropdown__inner {
  flex-direction: column !important;
  gap: 24px !important;
  max-width: 680px !important;
}
.nav-search__input-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: rgba(25,23,22,0.03) !important;
  border: 1px solid rgba(25,23,22,0.1) !important;
  border-radius: 14px !important;
  padding: 14px 20px !important;
  transition: border-color 0.3s ease !important;
}
.nav-search__input-wrap:focus-within {
  border-color: rgba(230,175,46,0.5) !important;
  background: rgba(25,23,22,0.02) !important;
}
.nav-search__input-wrap svg {
  color: rgba(25,23,22,0.35) !important;
  flex-shrink: 0 !important;
}
.nav-search__input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  width: 100% !important;
  color: #191716 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1.05rem !important;
}
.nav-search__input::placeholder {
  color: rgba(25,23,22,0.35) !important;
}
.nav-search__suggestions {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.nav-search__sug-title {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: rgba(25,23,22,0.35) !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}
.nav-search__sug-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  color: #3d3936 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.nav-search__sug-link:hover {
  background: rgba(25,23,22,0.04) !important;
  color: #191716 !important;
}
.nav-search__sug-link svg {
  color: rgba(25,23,22,0.25) !important;
  width: 16px !important;
  height: 16px !important;
}

/* ── Hide dropdowns on mobile ── */
@media (max-width: 800px) {
  .nav-dropdown { display: none !important; }
  .nav-dropdown-overlay { display: none !important; }
}