/* ============================================================
   Apple Polish Layer — Phase 2a foundation
   Loads AFTER all other css/*.css so utility classes can layer on.

   Provides:
   - SF Pro system font stack (variable, opt-in via .apl-sf or :where(body))
   - Liquid Glass utility classes (.lg-glass, .lg-glass-card, .lg-glass-button)
   - Spring micro-interaction transitions (--apl-spring, .apl-press)
   - Apple-style segmented control (.apl-segment / .apl-segment-item)
   - Apple-style toast container (.apl-toast-stack, .apl-toast)
   - True-black dark mode variant ([data-theme="dark-oled"])
   - Inline SF Symbols-style icon sizing (.apl-icon, .apl-icon-md, .apl-icon-lg)

   Convention: every new class is prefixed with `lg-` (liquid glass) or
   `apl-` (apple polish) so it never collides with existing styles.
   Existing pages keep working unchanged until they opt in.
   ============================================================ */

:root {
  /* ── SF Pro system font stack ────────────────────────────── */
  /* Prefer the user's San Francisco system font on Apple devices,
     fall back to Inter (already in main.css) elsewhere. */
  --apl-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                   "SF Pro Text", "SF Pro", "Helvetica Neue",
                   "Inter", system-ui, sans-serif;
  --apl-font-mono: ui-monospace, "SF Mono", "Menlo", "Monaco",
                   "Cascadia Mono", "Fira Code", monospace;
  --apl-font-rounded: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic Pro",
                      "Quicksand", system-ui, sans-serif;

  /* ── Spring micro-interactions ───────────────────────────── */
  /* iOS-style overshoot bounce for press-release feedback. */
  --apl-spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --apl-spring-gentle: cubic-bezier(0.22, 1, 0.36, 1);
  --apl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Liquid Glass primitives ─────────────────────────────── */
  --lg-blur: saturate(180%) blur(18px);
  --lg-blur-strong: saturate(200%) blur(28px);
  --lg-tint: rgba(255, 255, 255, 0.04);
  --lg-tint-warm: rgba(63, 111, 187, 0.06);
  --lg-border: rgba(255, 255, 255, 0.08);
  --lg-border-glow: rgba(47, 92, 168, 0.20);
  --lg-shadow-1: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
                 0 6px 14px -4px rgba(0, 0, 0, 0.45);
  --lg-shadow-2: 0 1px 0 rgba(255, 255, 255, 0.08) inset,
                 0 16px 32px -8px rgba(0, 0, 0, 0.55);
  --lg-refraction:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.02) 30%,
      rgba(255, 255, 255, 0.00) 60%);

  /* ── Toast geometry ──────────────────────────────────────── */
  --apl-toast-radius: 14px;
  --apl-toast-gap: 8px;
  --apl-toast-padding: 12px 16px;
}

/* True-black OLED-safe dark mode (opt-in: [data-theme="dark-oled"]) */
[data-theme="dark-oled"] {
  --bg-primary: #000000;
  --bg-secondary: #0a0606;
  --bg-tertiary: #14090a;
  --lg-tint: rgba(255, 255, 255, 0.02);
  --lg-border: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   LIQUID GLASS — utility classes
   ============================================================ */

.lg-glass {
  background: var(--lg-tint);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-shadow-1);
  position: relative;
  overflow: hidden;
}
.lg-glass::before {
  /* Refraction highlight band — gives the iOS-style "wet glass" sheen */
  content: '';
  position: absolute;
  inset: 0;
  background: var(--lg-refraction);
  pointer-events: none;
  border-radius: inherit;
}

.lg-glass-card {
  composes: lg-glass;
  background: var(--lg-tint);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-shadow-2);
  border-radius: 16px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.lg-glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--lg-refraction);
  pointer-events: none;
  border-radius: inherit;
}
.lg-glass-card:hover {
  box-shadow: var(--lg-shadow-2),
              0 0 0 1px var(--lg-border-glow),
              0 0 24px -8px var(--lg-border-glow);
  transition: box-shadow 240ms var(--apl-ease-out);
}

.lg-glass-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 12px;
  background: var(--lg-tint);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-border);
  color: var(--text-primary, #e8ebf2);
  font: 500 13px/1.2 var(--apl-font-sans);
  cursor: pointer;
  transition: transform 160ms var(--apl-spring-snappy),
              background 200ms var(--apl-ease-out),
              border-color 200ms var(--apl-ease-out);
}
.lg-glass-button:hover {
  background: var(--lg-tint-warm);
  border-color: var(--lg-border-glow);
}
.lg-glass-button:active {
  /* iOS press-down spring */
  transform: scale(0.96);
}

/* ============================================================
   APPLE PRESS — micro-interaction
   Apply to any clickable element. iOS 'gentle bounce' on press.
   ============================================================ */

.apl-press {
  transition: transform 160ms var(--apl-spring-snappy);
}
.apl-press:active {
  transform: scale(0.97);
}

/* ============================================================
   SEGMENTED CONTROL — Apple iOS / macOS style
   Usage:
     <div class="apl-segment" role="tablist">
       <button class="apl-segment-item is-active">Tab A</button>
       <button class="apl-segment-item">Tab B</button>
     </div>
   ============================================================ */

.apl-segment {
  display: inline-flex;
  padding: 2px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-border);
  gap: 0;
  font: 600 12.5px/1 var(--apl-font-sans);
  letter-spacing: -0.01em;
}
.apl-segment-item {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary, #a3acbd);
  padding: 7px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 200ms var(--apl-ease-out),
              color 200ms var(--apl-ease-out),
              transform 140ms var(--apl-spring-snappy);
  white-space: nowrap;
  font: inherit;
}
.apl-segment-item:hover {
  color: var(--text-primary, #e8ebf2);
}
.apl-segment-item:active {
  transform: scale(0.97);
}
.apl-segment-item.is-active {
  background: var(--accent, #2f5ca8);
  color: #fff;
  box-shadow: 0 2px 6px -2px var(--accent-glow, rgba(47, 92, 168,0.4)),
              0 1px 0 rgba(255,255,255,0.12) inset;
}

/* ============================================================
   TOAST — Apple-style frosted-glass capsule
   Mounted dynamically by apple-toast.js into .apl-toast-stack.
   ============================================================ */

.apl-toast-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--apl-toast-gap);
  z-index: 99999;
  pointer-events: none;
}
.apl-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  max-width: 360px;
  padding: var(--apl-toast-padding);
  border-radius: var(--apl-toast-radius);
  background: rgba(20, 9, 10, 0.72);
  backdrop-filter: var(--lg-blur-strong);
  -webkit-backdrop-filter: var(--lg-blur-strong);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-shadow-2);
  color: var(--text-primary, #e8ebf2);
  font: 500 13px/1.35 var(--apl-font-sans);
  letter-spacing: -0.005em;
  transform: translateY(-8px);
  opacity: 0;
  animation: aplToastIn 360ms var(--apl-spring-snappy) forwards;
  position: relative;
  overflow: hidden;
}
.apl-toast::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--lg-refraction);
  pointer-events: none;
  border-radius: inherit;
}
.apl-toast--success { border-left: 3px solid var(--success, #22c55e); }
.apl-toast--warn    { border-left: 3px solid var(--warning, #ffb340); }
.apl-toast--error   { border-left: 3px solid var(--danger, #ef4444); }
.apl-toast--info    { border-left: 3px solid var(--accent, #2f5ca8); }

.apl-toast.is-leaving {
  animation: aplToastOut 220ms var(--apl-ease-out) forwards;
}
.apl-toast__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent, #2f5ca8);
  transform-origin: left center;
  animation: aplToastProgress var(--apl-toast-ttl, 3000ms) linear forwards;
}

@keyframes aplToastIn {
  from { transform: translateY(-8px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1);       opacity: 1; }
}
@keyframes aplToastOut {
  from { transform: translateY(0) scale(1);     opacity: 1; }
  to   { transform: translateY(-6px) scale(0.98); opacity: 0; }
}
@keyframes aplToastProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ============================================================
   INLINE SF-SYMBOLS-STYLE ICONS
   Mounted as <svg class="apl-icon"> by apple-icons.js helper.
   ============================================================ */

.apl-icon {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: text-bottom;
  flex-shrink: 0;
}
.apl-icon-md { width: 18px; height: 18px; }
.apl-icon-lg { width: 22px; height: 22px; }
.apl-icon-xl { width: 28px; height: 28px; stroke-width: 1.4; }

/* ============================================================
   OPT-IN: apply SF Pro to a page by adding class "apl-sf" to body
   or any container. Existing Inter-based pages stay unchanged.
   ============================================================ */

.apl-sf,
.apl-sf * {
  font-family: var(--apl-font-sans);
  font-feature-settings: "ss01", "cv01", "cv02";
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
  .lg-glass-button, .apl-press, .apl-segment-item, .apl-toast,
  .apl-toast.is-leaving {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
   DATA-ATTRIBUTE THEMING (Phase 2c — Track C)
   Density and Privacy CSS hooks. Set via region-density-privacy.js
   into <body data-density="..." data-privacy="..." data-region="..."/>
   ============================================================ */

/* ── DENSITY MODES ─────────────────────────────────────────────
   - comfortable : EU / Gulf / Canada default. Inter spacing, generous
                   padding, max ~3 cards per row.
   - dense       : US / Turkey default. Linear/Trendyol-style packed
                   cards, tighter padding, smaller type, more sparkline.
   These map onto existing utility classes by CSS-variable overrides
   so individual components don't need to know which mode they're in.
*/
body[data-density="comfortable"] {
  --apl-density-card-padding: 22px;
  --apl-density-card-gap:     16px;
  --apl-density-stat-size:    22px;
  --apl-density-label-size:   12.5px;
  --apl-density-grid-min:     320px;
}
body[data-density="dense"] {
  --apl-density-card-padding: 12px;
  --apl-density-card-gap:     10px;
  --apl-density-stat-size:    19px;
  --apl-density-label-size:   11.5px;
  --apl-density-grid-min:     220px;
}

/* Opt-in classes that respect the density tokens. Existing pages
   keep their own padding; new components use these. */
.apl-card {
  padding: var(--apl-density-card-padding, 20px);
}
.apl-card-grid {
  display: grid;
  gap: var(--apl-density-card-gap, 16px);
  grid-template-columns: repeat(auto-fill, minmax(var(--apl-density-grid-min, 280px), 1fr));
}
.apl-stat-value {
  font-size: var(--apl-density-stat-size, 20px);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.apl-stat-label {
  font-size: var(--apl-density-label-size, 12px);
  color: var(--text-secondary, #a3acbd);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── PRIVACY MODE ──────────────────────────────────────────────
   - open    : show full customer try-on images unblurred
   - private : Gulf / EU default. Render thumbnails as silhouettes /
               face-cropped previews unless the user explicitly hovers.
   We use a CSS-only blur + grayscale that lifts on hover. Components
   opt in by adding the .apl-tryon-thumb class to their <img>.
*/
body[data-privacy="private"] .apl-tryon-thumb {
  filter: blur(14px) saturate(0.6);
  transition: filter 280ms var(--apl-ease-out);
}
body[data-privacy="private"] .apl-tryon-thumb:hover {
  filter: blur(0) saturate(1);
}
body[data-privacy="private"] .apl-tryon-thumb::after {
  /* Inline 'tap to reveal' affordance for accessibility */
  content: 'tap to reveal';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 600 11px var(--apl-font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.18);
  pointer-events: none;
}
body[data-privacy="private"] .apl-tryon-thumb:hover::after {
  opacity: 0;
  transition: opacity 220ms var(--apl-ease-out);
}

/* Data-residency badge — opt-in via .apl-privacy-badge.
   Shown in headers / footers to communicate where the user's
   data lives. Region-aware label set inline by JS. */
.apl-privacy-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--lg-tint);
  border: 1px solid var(--lg-border);
  color: var(--text-secondary, #a3acbd);
  font: 600 11px var(--apl-font-sans);
  letter-spacing: 0.02em;
}
.apl-privacy-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success, #22c55e);
  box-shadow: 0 0 0 2px rgba(34,197,94,0.18);
}
body[data-privacy="private"] .apl-privacy-badge::before {
  background: var(--accent, #2f5ca8);
  box-shadow: 0 0 0 2px var(--accent-glow, rgba(47, 92, 168,0.20));
}

/* ── REGION HINTS ──────────────────────────────────────────────
   Region attribute can be used by JS to swap copy / metrics, or by
   CSS for minor tweaks. Just a few defaults here; full theming
   lives in region-specific preset files in Phase 2d.
*/
body[data-region="gulf"]  { --apl-accent-luxe: #c9a44d; }
body[data-region="eu"]    { --apl-accent-luxe: #6b7280; }
body[data-region="us"]    { --apl-accent-luxe: #2854b2; }
body[data-region="ca"]    { --apl-accent-luxe: #b91c1c; }
body[data-region="tr"]    { --apl-accent-luxe: #2f5ca8; }