/* search-compact-overrides.css  v6.0
   ═══════════════════════════════════════════════════════════════
   v6.0 changes vs v5.1
   ─────────────────────────────────────────────────────────────
   COLOR SYSTEM
   • Non-green neutrals → blue-tinted from fv token family
     --bg #f0f4f2 → #f4f7fc   | surface: f0f4f2 → #edf1f8
     --thi #111827 → #152a2f  | --tmd #374151 → #2f5157
     --tlo #6b7280 → #6d8590  | border rgba(0,0,.13) → blue-tinted
   • ALL green/teal accents → --fv-brand-teal-light (#00CEB0)
     was #0dba92 throughout
   ─────────────────────────────────────────────────────────────
   DESIGN — Progressive Disclosure · Minimal Interface · Modern SaaS
   • Cards: 1px blue-tinted border + layered shadow + blue-white bg
   • Hover: border highlight + deeper shadow (no transform — VS-safe)
   • Input: premium blue-tinted border + refined focus ring
   • Tags: added border, refined cyan-teal palette
   • Filter pills: bolder active state, teal-light bg tint
   • No-result: soft card shell for empty state
   ─────────────────────────────────────────────────────────────
   PERFORMANCE — no JS, CSS-only — zero behavior change
   ═══════════════════════════════════════════════════════════════ */

@property --g5   { syntax: '<color>'; inherits: true;  initial-value: #00CEB0; }
@property --g6   { syntax: '<color>'; inherits: true;  initial-value: #0a9273; }
@property --g05  { syntax: '<color>'; inherits: true;  initial-value: rgba(0,206,176,.07); }
@property --g1   { syntax: '<color>'; inherits: true;  initial-value: #a8ede7; }
@property --surf { syntax: '<color>'; inherits: true;  initial-value: #ffffff; }
@property --sur2 { syntax: '<color>'; inherits: true;  initial-value: #edf1f8; }
@property --thi  { syntax: '<color>'; inherits: true;  initial-value: #152a2f; }
@property --tmd  { syntax: '<color>'; inherits: true;  initial-value: #2f5157; }
@property --tlo  { syntax: '<color>'; inherits: true;  initial-value: #6d8590; }

@layer search-base, tokens, base, card, overlay, state, responsive, print, fallbacks;

/* ══════════════════════════════════════════════════════════════ */
@layer tokens {

  html { scroll-behavior: auto; }

  :root {
    /* ── Green/teal accents → fv-brand-teal-light ────────────── */
    --g5  : #00CEB0;               /* was #0dba92 */
    --g6  : #0a9273;               /* dark teal, hover/pressed */
    --g05 : rgba(0,206,176,.07);
    --g1  : #a8ede7;               /* teal-light bg tint */
    --g2  : #00CEB0;               /* was #0dba92 */

    /* ── Surfaces — blue-tinted neutrals ─────────────────────── */
    --bg  : #f4f7fc;               /* was #f0f4f2 (green-tinted) */
    --surf: #ffffff;
    --sur2: #edf1f8;               /* was #e8eceb (green-tinted) */

    /* ── Text — blue-tinted token values ─────────────────────── */
    --thi : #152a2f;               /* fv-text-heading  was #111827 */
    --tmd : #2f5157;               /* fv-text-body     was #374151 */
    --tlo : #6d8590;               /* fv-text-muted    was #6b7280 */
    --tph : rgba(15,38,41,.26);    /* placeholder      was rgba(13,31,23,.34) */

    /* ── Border & shadow — blue-tinted ──────────────────────── */
    --bd  : rgba(14,95,153,.08);   /* was rgba(0,0,0,.13) */
    --bdm : rgba(14,95,153,.08);
    --sh  : 0 2px 8px rgba(6,20,24,.04); /* was 0 1px 3px rgba(0,0,0,.05) */

    /* ── Shape & motion (unchanged) ──────────────────────────── */
    --rp  : 999px;
    --rx  : 26px;
    --rl  : 20px;
    --rm  : 16px;
    --rs  : 10px;
    --tf  : 250ms ease;

    color-scheme: light;
    overscroll-behavior-y: contain;
  }

}

/* ══════════════════════════════════════════════════════════════ */
@layer base {

  #search-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    transform: translateZ(0) translateY(0%);
    isolation: isolate;
  }

  .search-header {
    padding: 14px 0 0;
    /* Slight blue-white wash instead of flat white */
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid rgba(14,95,153,.07);
    box-shadow: 0 1px 0 rgba(14,95,153,.05), 0 4px 16px rgba(6,20,24,.05);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: relative;
    z-index: 2;
    contain: style;
    overflow: hidden;
  }

  #search-sticky.cat-open .search-header { box-shadow: none; }

  #cat-spacer { height: 0; overflow: hidden; }

  #searchForm {
    display: flex;
    align-items: center;
    padding: 0 14px;
    width: 100%;
    box-sizing: border-box;
  }

  /* ── Search input wrapper ────────────────────────────────── */
  .search-input-wrapper {
    display: flex         !important;
    align-items: center   !important;
    flex-direction: row   !important;
    gap: 2px;
    border-radius: var(--rp);
    /* Blue-tinted border replaces the old black-alpha one */
    background: rgba(255,255,255,1);
    border: 1px solid rgba(14,95,153,.12);
    padding: 0 10px 0 4px !important;
    max-width: none;
    width: 100%;
    margin: 0;
    height: 44px;
    box-sizing: border-box;
    /* Subtle blue-leaning shadow for depth */
    box-shadow: 0 1px 4px rgba(6,20,24,.04);
    transition: border-color var(--tf), box-shadow var(--tf), background-color var(--tf);

    &:focus-within {
      background: #fff;
      border-color: var(--g5);                               /* #00CEB0 */
      box-shadow: 0 0 0 3px rgba(0,206,176,.18),
                  0 1px 4px rgba(6,20,24,.04);
    }

    #searchOverlayContainer & {
      background: rgba(255,255,255,.97);
      max-width: none;
      margin: 0;
      height: 44px;
      box-shadow: none;
      border-color: rgba(14,95,153,.10);

      &:focus-within {
        background: #fff;
        border-color: var(--g5);
        box-shadow: 0 0 0 3px rgba(0,206,176,.16);
      }
    }
  }

  .search-input-icon {
    position: static !important;
    left: auto !important;
    top:  auto !important;
    z-index: auto !important;
    flex-shrink: 0;
    width: 39px; height: 39px; min-width: 39px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--tmd);
    background: transparent;
    transition: background-color var(--tf), opacity var(--tf);
    pointer-events: none;

    &[role="button"] {
      pointer-events: auto;
      cursor: pointer;
      color: var(--tmd);
      touch-action: manipulation;
      &:active { opacity: .65; }
    }

    & svg {
      width: 20px; height: 20px;
      stroke-width: 2.2;
      pointer-events: none;
      flex-shrink: 0;
    }
  }

  #searchInput {
    flex: 1 1 0  !important;
    min-width: 0 !important;
    padding: 0   !important;
    margin: 0    !important;
    font-size: .92rem;
    font-weight: 500;
    line-height: 1;
    border: 0;
    background: transparent;
    outline: none;
    /* Blue-tinted text color */
    color: var(--thi);
    font-family: inherit;
    letter-spacing: .1px;
    caret-color: var(--g5);
    font-synthesis: none;

    &::placeholder      { color: var(--tlo); font-weight: 400; }
    &::-webkit-search-cancel-button { display: none; }
  }

  #search-clear-btn {
    flex-shrink: 0;
    display: none;
    align-items: center; justify-content: center;
    width: 20px; height: 20px; min-width: 20px;
    border-radius: 50%;
    /* Blue-tinted clear button */
    background: rgba(14,95,153,.10);
    border: none;
    cursor: pointer;
    touch-action: manipulation;
    color: var(--tlo);
    padding: 0; outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--tf), opacity var(--tf);

    &:active  { opacity: .6; }
    & svg     { pointer-events: none; }
  }

  /* ── Suggestions ─────────────────────────────────────────── */
  .search-suggestions-fullscreen {
    background: var(--surf);
    border: none; margin: 0; padding-bottom: 8px;
  }

  .suggestions-head {
    padding: 20px 16px 8px;
    font-size: .80rem; font-weight: 700;
    /* Blue-tinted secondary text */
    color: var(--fv-text-secondary, #52638A);
    text-transform: uppercase; letter-spacing: 1px;
    user-select: none;
  }

  .suggestion-item {
    padding: 13px 20px;
    cursor: pointer;
    display: flex; align-items: center; gap: 14px;
    transition: background-color var(--tf);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;

    &:active { background: rgba(103, 115, 135, 0.08); }
  }

  .suggestion-body {
    flex: 1; word-break: break-word;
    font-size: .95rem; font-weight: 500;
    color: var(--tmd); line-height: 1.5;
  }

  .suggestion-body mark {
    background: var(--g1);
    color: var(--thi);
    font-weight: 600;
    display: inline;
    vertical-align: baseline;
    padding: 0 1px;
    border-radius: 2px;
  }

  /* ── Empty state ─────────────────────────────────────────── */
  .no-result {
    margin-top: 40px;
    padding: 36px 28px;
    text-align: center;
    color: var(--tlo);
    font-size: .91rem; font-weight: 500; line-height: 1.7;
    /* Modern SaaS: soft card shell for empty state */
    background: rgba(248,250,255,.7);
    border: 1px solid rgba(14,95,153,.06);
    border-radius: var(--rx);
    max-width: 480px;
    margin-inline: auto;

    &::before {
      content: '🔍'; display: block;
      font-size: 2.2rem; margin-bottom: 12px; opacity: .45;
    }
  }

  /* ── Copy hint text slot ──────────────────────────────────── */
  .copy-hint__text {
    display: inline-block;
    transition: transform 220ms cubic-bezier(0.4,0,1,1),
                opacity   220ms cubic-bezier(0.4,0,1,1);
  }

  .copy-hint__text--out {
    transform: translateY(45%);
    opacity: 0;
  }

  .copy-hint__text--in {
    animation: _text-in 620ms cubic-bezier(0.34,2.0,0.64,1) both;
  }

  @keyframes _text-in {
    from { transform: translateY(-60%); opacity: 0; }
    55%  {                              opacity: 1; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  /* ── Copy hint ─────────────────────────────────────────────
     Slightly more confident text — blue-tinted secondary color */
  .copy-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 4px 16px 6px;
    font-size: .86rem;
    font-weight: 600;
    /* Blue-tinted muted instead of plain gray */
    color: var(--fv-text-secondary, #52638A);
    letter-spacing: .2px;
    user-select: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    overflow: hidden;

    &::before {
      content: '';
      display: inline-block;
      width: 15px; height: 15px;
      flex-shrink: 0;
      background-color: currentColor;
      opacity: .5;
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
              mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
      -webkit-mask-size: contain; mask-size: contain;
      -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    }
  }

  @keyframes _hint-enter {
    0%   { opacity: 0; transform: translateY(-110%); }
    55%  { opacity: 1; transform: translateY(4%);    }
    75%  { opacity: 1; transform: translateY(-1%);   }
    100% { opacity: 1; transform: translateY(0);     }
  }

  @keyframes _hint-exit {
    from { opacity: 1; transform: translateY(0);    }
    to   { opacity: 0; transform: translateY(-8px); }
  }

  .copy-hint--enter {
    animation: _hint-enter 480ms cubic-bezier(0.34,1.56,0.64,1) forwards;
  }

  .copy-hint--exit {
    animation: _hint-exit 300ms ease-in forwards;
    pointer-events: none;
  }

  /* Demo flash — updated to teal-light */
  .sc--demo-active {
    background: rgba(0,206,176,.12) !important;
    box-shadow:
      inset 0 0 0 2px var(--g5),
      inset 0 0 18px rgba(0,206,176,.20) !important;
    transition: background-color 80ms ease, box-shadow 80ms ease !important;
    animation: _demo-pulse 400ms ease-out !important;
  }

  @keyframes _demo-pulse {
    0%   { box-shadow: inset 0 0 0 2px var(--g5), inset 0 0 18px rgba(0,206,176,.20), 0 0 0 0   rgba(0,206,176,.40); }
    60%  { box-shadow: inset 0 0 0 2px var(--g5), inset 0 0 18px rgba(0,206,176,.20), 0 0 0 12px rgba(0,206,176,.0); }
    100% { box-shadow: inset 0 0 0 2px var(--g5), inset 0 0 18px rgba(0,206,176,.20), 0 0 0 16px rgba(0,206,176,.0); }
  }

  .sc--demo-label {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    background: var(--g5);
    color: #fff;
    font-size: .78rem; font-weight: 700;
    padding: 5px 12px;
    border-radius: var(--rp);
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: .3px;
    box-shadow: 0 4px 16px rgba(0,206,176,.35);
    animation: _demo-label-in 300ms cubic-bezier(0.34,1.56,0.64,1) both;
    z-index: 10;
  }

  @keyframes _demo-label-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1);   }
  }

  /* ── Toast — teal-light gradient ────────────────────────── */
  .copy-toast-message {
    background: linear-gradient(135deg, var(--g5), #0a9273);
    color: #fff; padding: 10px 18px;
    border-radius: var(--rl);
    font-size: .91rem; font-weight: 650;
    box-shadow: 0 4px 20px rgba(0,206,176,.25);
    animation: _toast 220ms cubic-bezier(.4,0,.2,1) both;
    letter-spacing: .1px;
  }
  @keyframes _toast {
    from { opacity:0; transform:translateX(14px); }
    to   { opacity:1; transform:translateX(0); }
  }

}

/* ══════════════════════════════════════════════════════════════
   @layer card
   ══════════════════════════════════════════════════════════════ */
@layer card {

  #searchResults { position: relative; }

  .sc {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 20px;
    border-radius: var(--rx);

    /* Modern SaaS card: blue-white tint + 1px border + layered shadow */
    background: rgba(255,255,255,.97);
    border: 1px solid rgba(14,95,153,.07);
    box-shadow: 0 1px 3px rgba(6,20,24,.04),
                0 4px 16px rgba(6,20,24,.025);

    position: relative;
    margin-bottom: 10px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;

    /* Include border-color + box-shadow in transition for smooth hover */
    transition: background-color var(--tf),
                border-color var(--tf),
                box-shadow var(--tf);
    cursor: pointer;

    /* Active: teal-light tint (was green rgba(13,186,146,...)) */
    &:active {
      background: rgba(0,206,176,.05);
      border-color: rgba(0,206,176,.18);
    }

    /* ── Emoji / icon box ──────────────────────────────────── */
    & .scc {
      flex: 0 0 56px; height: 56px;
      font-size: 24px;
      border-radius: var(--rl);
      padding: 6px;
      display: flex; align-items: center; justify-content: center;
      /* teal-light tinted bg */
      background: rgba(0,206,176,.10);
      color: #00CEB0;
      border: none;
      flex-shrink: 0;
    }

    /* ── Body ─────────────────────────────────────────────── */
    & .scb {
      flex: 1 1 auto; min-width: 0;
      display: flex; flex-direction: column; gap: 5px;
    }

    /* ── Title — blue-tinted deep text ───────────────────── */
    & .sct {
      font-size: 1.02rem; font-weight: 700;
      /* fv-text-heading */
      color: #152a2f;
      line-height: 1.4;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      letter-spacing: -.01em;
      text-rendering: optimizeSpeed;
      font-synthesis: none;
    }

    /* ── Subtitle — blue-tinted secondary ─────────────────── */
    & .scs {
      font-size: .89rem; font-weight: 500;
      /* fv-text-secondary — noticeably blue-tinted */
      color: #52638A;
      line-height: 1.4;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      text-rendering: optimizeSpeed;
      font-synthesis: none;
    }

    /* ── Tag row ──────────────────────────────────────────── */
    & .scg {
      display: flex; gap: 5px;
      margin-top: 5px;
      align-items: center;
      flex-wrap: nowrap;
      overflow: hidden;
    }

    /* ── Tags — cyan-teal with border definition ──────────── */
    & .tag {
      background: rgba(0,206,176,.06);
      color: #0099a8;
      padding: 3px 10px;
      font-size: 12px;
      border-radius: var(--rp);
      font-weight: 500;
      /* Added 1px border for Modern SaaS definition */
      border: 1px solid rgba(0,206,176,.15);
      line-height: 1.5;
      white-space: nowrap;
      flex-shrink: 0;
      letter-spacing: .1px;
    }

    /* ── Vertical layout (long content) ───────────────────── */
    &.sv {
      flex-direction: column; gap: 10px; padding: 14px;

      & .scc {
        flex: 0 0 auto; height: auto; width: 100%;
        font-size: 14px; padding: 10px 12px;
        text-align: left; border-radius: var(--rm);
        display: -webkit-box;
        -webkit-line-clamp: 3; -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }

  .vs-item .sc {
    contain: layout style paint;
    margin-bottom: 0;
  }

  .vs-container { contain: layout style; }
  .vs-item      { contain: layout style paint; top: 0 !important; padding-bottom: 10px; box-sizing: border-box; }

  /* ── Filter bar ──────────────────────────────────────────── */
  .search-filters-panel {
    width: 100%; max-width: none;
    padding: 0; background: transparent;
    border: none; border-radius: 0; box-shadow: none;
    position: static; margin-top: 8px;
  }

  .filter-row-wrapper {
    display: flex; align-items: center; overflow: hidden;
    border-top: 1px solid rgba(14,95,153,.06);   /* blue-tinted separator */
  }

  .filter-pills-row {
    flex: 1 1 0;
    display: flex; align-items: center;
    gap: 4px;                                     /* tighter for Modern SaaS */
    padding-block: 10px;
    padding-inline: 14px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    contain: layout style paint;

    &::-webkit-scrollbar { display: none; }
  }

  .filter-pills-row--cat { padding-block: 9px 12px; }

  .filter-row-end {
    flex-shrink: 0;
    display: flex; align-items: center;
    padding-inline-end: 12px;
    padding-inline-start: 36px;
    margin-inline-start: -36px;
    background: linear-gradient(to right, transparent 0%, var(--surf) 40%);
    pointer-events: none;

    & > * { pointer-events: auto; }
  }

  /* ── Category toggle button ───────────────────────────── */
  .filter-cat-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    /* Blue-tinted inactive state */
    border: 1px solid rgba(14,95,153,.09);
    background: rgba(248,250,255,.8);
    color: var(--tlo);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    outline: none; flex-shrink: 0;
    transition: opacity 140ms ease, background-color 140ms ease,
                border-color 140ms ease;

    & svg {
      display: block; pointer-events: none;
      transition: transform 260ms cubic-bezier(0.16,1,0.3,1);
    }

    &.active {
      background: rgba(0,206,176,.10);
      border-color: rgba(0,206,176,.40);
      color: var(--g5);
      opacity: 1;
      & svg { transform: rotate(180deg); }
    }

    &:active { opacity: .55; }
  }

  .search-filters-panel { position: relative; }

  .filter-cat-wrap {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    padding-top: 0;
    z-index: 1;
    background: var(--surf);
    border-bottom: 1px solid rgba(14,95,153,.07);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
    visibility: hidden;
    contain: layout style;
    transition: opacity 220ms cubic-bezier(0.16,1,0.3,1),
                transform 280ms cubic-bezier(0.16,1,0.3,1),
                visibility 0ms 280ms;
  }

  .filter-cat-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms cubic-bezier(0.16,1,0.3,1);
  }

  .filter-cat-wrap.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    contain: layout style paint;
    transition: opacity 220ms cubic-bezier(0.16,1,0.3,1),
                transform 280ms cubic-bezier(0.16,1,0.3,1),
                visibility 0ms 0ms;
  }

  .filter-cat-wrap.open::after { opacity: 1; }

  /* ── Type filter pills ───────────────────────────────────── */
  .filter-pill {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    padding-block: 1.0em;
    padding-inline: 0.9em;
    border-radius: var(--rp);
    font-size: .9rem; line-height: 1;
    font-family: inherit;
    background: transparent;
    border: none;
    color: var(--tmd);
    opacity: .65;
    cursor: pointer; white-space: nowrap;
    letter-spacing: .01em;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    outline: none; user-select: none; font-synthesis: none;
    transition: opacity 140ms ease, background-color 140ms ease;

    &:active { opacity: .55; }

    /* Active: teal-light color + bg tint + bolder weight */
    &.active {
      box-shadow: 0 0 0 1px rgba(0,206,176,0.51);
      /* Subtle teal-light bg tint */
      background: var(--fv-surface-teal-hover);
      opacity: 1;
      color: var(--fv-brand-teal-light);
    }
  }

  /* ── Category filter pills ──────────────────────────────── */
  .filter-pill--cat {
    padding-block: 0.70em;
    padding-inline: 0.90em;
    font-size: .88rem; font-weight: 500;
    background: transparent;
    border: 1px solid rgba(14,95,153,.09);   /* blue-tinted border */
    color: var(--tlo);
    opacity: .85;

    &.active {
      background: rgba(0,206,176,.07);        /* was rgba(13,186,146,.06) */
      border-color: rgba(0,206,176,.42);      /* was rgba(13,186,146,.5) */
      color: #00CEB0;                          /* was var(--g6) */
      font-weight: 600;
      opacity: 1;
      box-shadow: none;
    }
  }

}

/* ══════════════════════════════════════════════════════════════ */
@layer overlay {

  .search-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--surf) !important;
  }

  #overlay-header-bar {
    display: flex; align-items: center;
    padding: 10px 14px;
    background: var(--surf);
    border-bottom: 1px solid rgba(14,95,153,.07);
    flex-shrink: 0; width: 100%; box-sizing: border-box;
    box-shadow: var(--sh);
  }

  .search-overlay-scrollable-content {
    overscroll-behavior: contain;
    contain: strict;
    background: var(--surf);
  }

}

/* ══════════════════════════════════════════════════════════════ */
@layer state {

  @media (hover: hover) {
    .search-input-icon[role="button"]:hover { background: rgba(14,95,153,.06); }
    #search-clear-btn:hover                 { background: rgba(14,95,153,.16); }
    .suggestion-item:hover                  { background: rgba(14,95,153,.03); }

    /* Card hover: border highlight + deeper shadow = Modern SaaS lift feel */
    .sc:hover {
      background: rgba(248,250,255,1);
      border-color: rgba(0,206,176,.24);
      box-shadow: 0 4px 24px rgba(6,20,24,.09),
                  0 1px 4px rgba(6,20,24,.04);
    }

    .filter-pill:not(.active):hover         { opacity: .75; }
    .filter-pill--cat:not(.active):hover    { opacity: .75; background: rgba(14,95,153,.03); }
    .filter-cat-toggle:not(.active):hover   { opacity: .75; background: rgba(14,95,153,.05); }
  }

}

/* ══════════════════════════════════════════════════════════════ */
@layer responsive {

  @media (max-width: 768px) {
    .search-header { padding: 10px 0 0; }

    #searchForm { padding: 0 12px; }

    .search-input-wrapper {
      height: 44px;
      padding: 0 8px 0 4px !important;
    }

    .search-input-icon {
      width: 38px; height: 38px; min-width: 38px;
      & svg { width: 20px; height: 20px; }
    }

    #searchInput { font-size: .95rem; }

    .suggestion-item { padding: 12px 16px; }

    .filter-pills-row  { padding-block: 7px; padding-inline: 12px; gap: 4px; }
    .filter-pill       { font-size: .89rem;  padding-block: 1.0em; padding-inline: 0.86em; }
    .filter-pill--cat  { font-size: .83rem;  padding-block: 0.68em; padding-inline: 0.86em; }
    .filter-cat-toggle { width: 31px; height: 31px; }
    .filter-row-end    { padding-inline-end: 10px; }

    .sc {
      padding: 13px 14px; gap: 12px;
      border-radius: var(--rl);
      contain-intrinsic-size: auto 78px;
    }

    .scc { flex: 0 0 52px; height: 52px; font-size: 21px; }
    .sct { font-size: .93rem; font-weight: 700; }
    .scs { font-size: .87rem; }

    .copy-hint { font-size: .83rem; padding: 3px 14px 5px; }

    .no-result { margin-top: 32px; padding: 28px 20px; }
  }

  @media (max-width: 480px) {
    .search-header { padding: 8px 0 0; }

    #searchForm { padding: 0 10px; }

    .search-input-wrapper { height: 46px; }

    .search-input-icon {
      width: 40px; height: 40px; min-width: 40px;
      & svg { width: 20px; height: 20px; }
    }

    #searchInput { font-size: .98rem; }

    .filter-pills-row  { padding-block: 6px; padding-inline: 10px; gap: 3px; }
    .filter-pill       { font-size: .9rem;  padding-block: 1em;  padding-inline: 0.85em; }
    .filter-pill--cat  { font-size: .8rem;  padding-block: 0.64em; padding-inline: 0.80em; }
    .filter-cat-toggle { width: 30px; height: 30px; }

    .sc  { padding: 12px 13px; gap: 10px; }
    .scc { flex: 0 0 48px; height: 48px; font-size: 20px; }

    .copy-hint { font-size: .79rem; }

    .no-result { padding: 22px 16px; border-radius: var(--rl); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
    }
  }

}

/* ══════════════════════════════════════════════════════════════ */
@layer print {

  @media print {
    .search-header, .search-filters-panel,
    .copy-hint, #copyToast, .search-footer { display: none !important; }

    .sc {
      page-break-inside: avoid;
      contain: none;
      box-shadow: none;
      border: 1px solid #ccc;
      cursor: default;
    }
  }

}

/* ══════════════════════════════════════════════════════════════ */
@layer fallbacks {

  @supports not (contain: strict) {
    .search-overlay-scrollable-content { contain: none; }
    .vs-container { contain: none; }
  }

  @supports not (syntax: '<color>') {
    html { scroll-behavior: auto; }

    :root {
      --g5  : #00CEB0;
      --g6  : #0a9273;
      --g05 : rgba(0,206,176,.07);
      --g1  : rgba(0,206,176,.18);
    }
  }

}