/* styles-compat.css
   Fallbacks for browsers that don't support CSS color-mix().
   This file overrides only the color-mix() usages with broadly compatible rgba()/hex values.
*/
@supports not (background: color-mix(in srgb, #000 50%, #fff 50%)) {
  /* Vars that used color-mix() originally */
  :root {
    --input-bg: rgba(30, 45, 82, 0.60);        /* was color-mix(var(--surface) 60%, transparent) */
    --input-bg-focus: rgba(30, 45, 82, 0.80);  /* was color-mix(var(--surface) 80%, transparent) */
  }

  /* Global backgrounds */
  body {
    background:
      radial-gradient(1000px 500px at 80% -10%, rgba(91, 103, 224, 0.18), transparent 60%),
      radial-gradient(700px 350px at 10% -10%, rgba(58, 167, 230, 0.16), transparent 60%),
      linear-gradient(180deg, var(--bg), var(--bg-2));
  }

  /* Header / Navigation */
  .site-header {
    background: rgba(26, 38, 67, 0.80);
  }
  .nav-links a:hover,
  .nav-links a:focus {
    background: rgba(30, 45, 82, 0.40);
  }
  .menu-toggle {
    background: rgba(30, 45, 82, 0.30);
  }
  .menu-toggle:focus-visible {
    outline: 2px solid #adb3ef; /* mix of primary and white (50/50) */
  }
  .drawer {
    background: linear-gradient(180deg, rgba(30, 45, 82, 0.90), rgba(30, 45, 82, 0.95));
  }
  .drawer a:hover {
    background: rgba(30, 45, 82, 0.40);
  }
  .scrim /* unchanged color */ {}

  /* Buttons / Chips */
  .btn {
    background: linear-gradient(180deg, rgba(30, 45, 82, 0.85), rgba(30, 45, 82, 0.60));
  }
  .btn:focus-visible {
    outline: 2px solid #adb3ef; /* mix of primary and white (50/50) */
  }
  .btn-primary {
    background: linear-gradient(90deg, #4f5ac3, #2e82b5); /* mix(primary 85%, #0b1220 15%) and mix(primary-2 75%, #0b1220 25%) */
    border-color: rgba(91, 103, 224, 0.40);               /* primary 40% */
    box-shadow:
      0 10px 28px rgba(91, 103, 224, 0.18),               /* primary 18% */
      0 8px 22px rgba(58, 167, 230, 0.14);                /* primary-2 14% */
  }
  .btn-ghost /* unchanged */ {}
  .btn-sm /* unchanged */ {}
  .btn-icon {
    background: rgba(30, 45, 82, 0.30);
  }
  .chip {
    background: rgba(30, 45, 82, 0.30);
  }

  /* Branding tweak that used color-mix in shadow */
  .brand .logotype {
    text-shadow: 0 0 18px rgba(91, 103, 224, 0.25); /* primary 25% */
  }

  /* Hero/Glass */
  .glass {
    background:
      radial-gradient(1200px 400px at 90% -30%, rgba(91, 103, 224, 0.16), transparent 60%), /* primary 16% */
      radial-gradient(900px 300px at 10% -20%, rgba(58, 167, 230, 0.14), transparent 60%), /* primary-2 14% */
      linear-gradient(180deg, rgba(30, 45, 82, 0.50), rgba(30, 45, 82, 0.80));
  }

  /* Cards / Features */
  .card {
    background: linear-gradient(180deg, rgba(30, 45, 82, 0.60), rgba(30, 45, 82, 0.85));
  }
  .feature {
    background: rgba(30, 45, 82, 0.50);
  }

  /* Support grid */
  .support-card {
    background: rgba(30, 45, 82, 0.45);
  }
  .support-card:hover {
    background: rgba(30, 45, 82, 0.60);
    /* Approximates mix(primary 30%, var(--line)) */
    border-color: rgba(91, 103, 224, 0.30);
  }
  .support-icon {
    background: rgba(30, 45, 82, 0.35);
  }

  /* CTA */
  .cta {
    background:
      radial-gradient(900px 300px at 10% -20%, rgba(58, 167, 230, 0.12), transparent 60%), /* primary-2 12% */
      linear-gradient(180deg, rgba(30, 45, 82, 0.40), rgba(30, 45, 82, 0.70));
  }

  /* App icons */
  .app-icon-xl,
  .app-icon-round,
  .app-icon-square {
    background: rgba(30, 45, 82, 0.40);
  }

  /* Link rows */
  .link-item {
    background: rgba(30, 45, 82, 0.30);
  }

  /* Social buttons */
  .social {
    background: rgba(30, 45, 82, 0.30);
  }

  /* Modals */
  .modal {
    background:
      radial-gradient(900px 300px at 10% -20%, rgba(58, 167, 230, 0.12), transparent 60%),
      linear-gradient(180deg, rgba(30, 45, 82, 0.50), rgba(30, 45, 82, 0.80));
  }

  /* General form controls */
  .input,
  .select {
    background: rgba(30, 45, 82, 0.35);
  }
  .kp-input input:focus {
    border-color: rgba(91, 103, 224, 0.60); /* approx mix(primary 60%, var(--line)) */
    box-shadow: 0 0 0 4px rgba(91, 103, 224, 0.20); /* primary 20% */
  }

  /* Viewer */
  .viewer-area {
    background: rgba(30, 45, 82, 0.35);
  }

  /* Gifts */
  .gift-card {
    background: linear-gradient(180deg, rgba(30, 45, 82, 0.60), rgba(30, 45, 82, 0.85));
  }
  .gift-card .preview {
    background: rgba(30, 45, 82, 0.30);
  }

  /* FAQ */
  details.faq {
    background: rgba(30, 45, 82, 0.45);
  }
  details.faq[open] {
    background: rgba(30, 45, 82, 0.60);
  }

  /* Search toolbar */
  .search-toolbar {
    background: rgba(26, 38, 67, 0.80);
  }
  .search-bar {
    background: linear-gradient(180deg, rgba(30, 45, 82, 0.85), rgba(30, 45, 82, 0.60));
  }
  .search-icon {
    background: rgba(30, 45, 82, 0.30);
  }
  .search-toolbar .controls .select,
  .search-toolbar .select,
  .toggle {
    background: linear-gradient(180deg, rgba(30, 45, 82, 0.85), rgba(30, 45, 82, 0.60));
  }
  .toggle input /* accent-color remains as-is */ {}

  /* Featured/Results panels */
  .panel {
    background: linear-gradient(180deg, rgba(30, 45, 82, 0.60), rgba(30, 45, 82, 0.85));
  }
  .tag-card {
    background: rgba(30, 45, 82, 0.50);
  }
  .expander {
    background: rgba(30, 45, 82, 0.30);
  }
  .sub-item {
    background: rgba(30, 45, 82, 0.35);
  }
  .result-card {
    background: rgba(30, 45, 82, 0.50);
  }

  /* Extras (search challenge) */
  .challenge-box {
    background: rgba(30, 45, 82, 0.55);
  }

  /* Blog post */
  .post {
    background:
      radial-gradient(900px 300px at 10% -20%, rgba(58, 167, 230, 0.10), transparent 60%),
      linear-gradient(180deg, rgba(30, 45, 82, 0.40), rgba(30, 45, 82, 0.70));
  }
  .post-content {
    background: rgba(30, 45, 82, 0.70);
  }
  .post-content blockquote {
    background: rgba(30, 45, 82, 0.40);
    border-left-color: rgba(91, 103, 224, 0.50); /* primary 50% */
  }
  .post-content code {
    background: rgba(30, 45, 82, 0.45);
  }
  .post-content pre {
    background: rgba(30, 45, 82, 0.55);
  }
  .post-content a {
    text-decoration-color: rgba(207, 226, 255, 0.60); /* fallback for color-mix(#cfe2ff 60%, transparent) */
  }

  /* Cropper */
  #crop_image {
    background: rgba(30, 45, 82, 0.40);
  }
  #cropper-card .cropper-container {
    background: rgba(30, 45, 82, 0.40);
  }

  /* Premium dashboard bot cards */
  .premium-dashboard-bot-card {
    background: linear-gradient(180deg, rgba(30, 45, 82, 0.60), rgba(30, 45, 82, 0.85));
  }
  .premium-dashboard-bot-avatar {
    background: rgba(30, 45, 82, 0.40);
  }

  /* Premium - Playground */
  .kp-card {
    background: linear-gradient(180deg, rgba(30, 45, 82, 0.60), rgba(30, 45, 82, 0.85));
  }
  .kp-btn {
    border-color: rgba(91, 103, 224, 0.40);
    background: linear-gradient(90deg, #4f5ac3, #2e82b5);
    box-shadow:
      0 10px 28px rgba(91, 103, 224, 0.18),
      0 8px 22px rgba(58, 167, 230, 0.14);
  }
  .kp-secondary {
    background: rgba(30, 45, 82, 0.30);
  }
  .kp-toggle {
    background: rgba(30, 45, 82, 0.30);
  }
  .kp-toggle button.active {
    background: rgba(30, 45, 82, 0.50);
  }
  .kp-tile {
    background: linear-gradient(180deg, rgba(30, 45, 82, 0.40), rgba(30, 45, 82, 0.70));
  }
  .kp-avatar,
  .kp-avatar-wrap > img.kp-avatar {
    background: rgba(30, 45, 82, 0.40);
  }
  .kp-badge,
  .kp-emoji-badge {
    background: rgba(30, 45, 82, 0.60);
  }
  .kp-copy-btn {
    border-color: rgba(91, 103, 224, 0.40);
    background: linear-gradient(135deg, rgba(91, 103, 224, 0.30), rgba(58, 167, 230, 0.26));
  }

  /* Deactivated alert */
  .kp-alert-danger {
    border-color: rgba(239, 68, 68, 0.40);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.08));
  }

  /* SweetAlert dark adjustments */
  .swal2-popup {
    background: linear-gradient(180deg, rgba(30, 45, 82, 0.70), rgba(30, 45, 82, 0.90)) !important;
  }

  /* Apps mini */
  .apps-mini .row {
    background: rgba(30, 45, 82, 0.30);
  }

  /* Premium dashboard buttons */
  .premium-dashboard-btn {
    background: linear-gradient(180deg, rgba(30, 45, 82, 0.85), rgba(30, 45, 82, 0.60));
  }
  .premium-dashboard-btn-primary {
    background: linear-gradient(90deg, #4f5ac3, #2e82b5);
    border-color: rgba(91, 103, 224, 0.40);
    box-shadow:
      0 10px 28px rgba(91, 103, 224, 0.18),
      0 8px 22px rgba(58, 167, 230, 0.14);
  }
}