/* Kuwal Store legacy bridge (P0b).
   Legacy account pages (auth, dashboard, checkout, my-product, support, invoice ...) style themselves with the old
   dark-theme variables (--bg-primary, --text-main, --primary ...) and classes (.btn, .card, .form-group ...).
   Under html.ks these variables are redefined to the light Store palette, and the shared legacy classes get a
   Store look, so unrestyled pages stay readable. Class rules use :where() (zero specificity) so page CSS,
   including inline <style> blocks and the restyled account.css/dashboard.css/checkout.css, always wins. */

html.ks {
  /* palette */
  --bg-primary: #FFF8F1;
  --bg-secondary: #FFF0E6;
  --bg-card: #FFFFFF;
  --bg-card-solid: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-dark: #3B2A33;
  --card-bg: #FFFFFF;
  --glass-bg: rgba(255, 255, 255, .72);
  --glass-border: #F0DDD3;
  --primary: #C93C68;
  --primary-rgb: 201, 60, 104;
  --primary-glow: rgba(201, 60, 104, .22);
  --primary-light: #A82E55;
  --primary-ultra-light: #FFE4EC;
  --secondary: #A82E55;
  --secondary-rgb: 168, 46, 85;
  --accent: #1E7B4F;
  --text-main: #3B2A33;
  --text-muted: #6B5762;
  --text-soft: #6B5762;
  --border: #F0DDD3;
  --border-hover: #C93C68;
  --border-strong: #E4C9BB;
  --success: #1E7B4F;
  --warning: #7A4B00;
  --danger: #B3261E;
  --mp-dot-idle-bg: #FFF0E6;
  --mp-dot-idle-border: #E4C9BB;
  /* spacing */
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px;
  /* shape */
  --radius-sm: 10px; --radius: 16px; --radius-lg: 20px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px;
  /* shadow */
  --shadow-sm: 0 2px 8px rgba(120, 60, 50, .08);
  --shadow-md: 0 8px 24px rgba(120, 60, 50, .12);
  --shadow-lg: 0 16px 40px rgba(120, 60, 50, .16);
  --shadow-glow: 0 6px 20px rgba(201, 60, 104, .22);
  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --transition: all .26s var(--ease-out);
  --transition-fast: all .16s var(--ease-out);
  --transition-slow: all .52s var(--ease-out);
}

/* layout helpers */
:where(html.ks) .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--ks-gutter, 16px); }
:where(html.ks) .section-spacing { padding: var(--ks-s-8) 0; }
:where(html.ks) .section-divider { border: 0; height: 1px; background: var(--border); margin: var(--ks-s-6) 0; }
:where(html.ks) .hidden { display: none !important; }

/* buttons */
:where(html.ks) .btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 10px 24px; border: 2px solid transparent; border-radius: var(--radius-pill); cursor: pointer;
  font-family: var(--ks-font-display); font-size: .95rem; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-decoration: none; white-space: nowrap;
  background: #fff; color: var(--text-main);
  transition: transform var(--ks-dur-1) var(--ks-ease-out), box-shadow var(--ks-dur-1) var(--ks-ease-out), background-color var(--ks-dur-1) var(--ks-ease), border-color var(--ks-dur-1) var(--ks-ease), color var(--ks-dur-1) var(--ks-ease);
}
:where(html.ks) .btn-primary { background: #C93C68; color: #fff; box-shadow: 0 4px 0 #9C2A50; }
:where(html.ks) .btn-primary:hover { background: #B0305A; color: #fff; transform: translateY(-1px); box-shadow: 0 5px 0 #9C2A50, 0 10px 18px rgba(201, 60, 104, .25); }
:where(html.ks) .btn-primary:active { transform: translateY(3px); box-shadow: 0 0 0 #9C2A50; }
:where(html.ks) .btn-outline, :where(html.ks) .btn-glass { background: #fff; color: #A82E55; border-color: #C93C68; }
:where(html.ks) .btn-outline:hover, :where(html.ks) .btn-glass:hover { background: #FFE4EC; color: #A82E55; border-color: #C93C68; }
:where(html.ks) .btn-white { background: #fff; color: #A82E55; border-color: #F0DDD3; }
:where(html.ks) .btn-white:hover { background: #FFF0E6; color: #A82E55; }
:where(html.ks) .btn-sm { min-height: 40px; padding: 6px 16px; font-size: .875rem; }
:where(html.ks) .btn-lg { min-height: 56px; padding: 14px 32px; font-size: 1.0625rem; }
:where(html.ks) .btn-block { display: flex; width: 100%; }
:where(html.ks) .btn[disabled], :where(html.ks) .btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* cards */
:where(html.ks) .card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-lg); box-shadow: var(--shadow-sm); color: var(--text-main); }

/* forms */
:where(html.ks) .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-md); }
:where(html.ks) .form-group label { font-size: .875rem; font-weight: 700; color: var(--text-main); }
:where(html.ks) .form-row { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { :where(html.ks) .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
:where(html.ks) .form-footer { margin-top: var(--space-md); color: var(--text-muted); font-size: .875rem; }
:where(html.ks) .form-group :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) {
  width: 100%; min-height: 48px; padding: 10px 16px; border: 2px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--text-main); font: inherit; transition: border-color var(--ks-dur-1) var(--ks-ease), box-shadow var(--ks-dur-1) var(--ks-ease);
}
:where(html.ks) .form-group textarea { min-height: 120px; resize: vertical; }
:where(html.ks) .form-group :is(input, select, textarea):focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px #FFE4EC; }
:where(html.ks) .form-group :is(input, textarea)::placeholder { color: var(--text-muted); opacity: .8; }

/* status badges (legacy support tickets etc.) */
:where(html.ks) .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: .75rem; font-weight: 700; background: #FFE4EC; color: #A82E55; border: 0; text-transform: none; letter-spacing: 0; }
:where(html.ks) .badge-open { background: #DDF3E8; color: #1E7B4F; border: 0; }
:where(html.ks) .badge-answered { background: #FFE4EC; color: #A82E55; border: 0; }
:where(html.ks) .badge-closed { background: #FFF0E6; color: #6B5762; border: 0; }
:where(html.ks) .badge-warning { background: #FFF1C2; color: #7A4B00; border: 0; }
:where(html.ks) .badge-discount { background: #C93C68; color: #fff; border: 0; }