/* ============================================================
   StreamingFresh — cinematic dark theme
   Display: Fraunces (editorial serif)  •  UI: Hanken Grotesk
   ============================================================ */

:root {
    --bg: #08080c;
    --bg-2: #0d0d15;
    --surface: rgba(255, 255, 255, .045);
    --surface-2: rgba(255, 255, 255, .075);
    --border: rgba(255, 255, 255, .09);
    --border-strong: rgba(255, 255, 255, .17);
    --text: #edecf2;
    --muted: #9a9aab;
    --muted-2: #6f6f80;
    --gold: #f5c518;
    --gold-soft: #ffd54a;
    --accent: #ff5d5d;
    --accent-2: #ff9a3d;
    --radius: 16px;
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-ui: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* ---- Atmospheric background -------------------------------------------- */

.app-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(1100px 620px at 10% -10%, rgba(255, 93, 93, .20), transparent 60%),
        radial-gradient(1000px 700px at 100% -5%, rgba(255, 154, 61, .13), transparent 55%),
        radial-gradient(900px 900px at 50% 125%, rgba(120, 110, 255, .10), transparent 60%),
        var(--bg);
}

.app-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .045;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.app-main {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px) 80px;
}

/* ---- Hero -------------------------------------------------------------- */

.hero { padding: clamp(36px, 6vw, 72px) 0 20px; }

.hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 18px;
}

.hero .eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), transparent);
}

.hero h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    line-height: .98;
    letter-spacing: -.025em;
    margin: 0;
}

.hero h1 em {
    font-style: italic;
    background: linear-gradient(95deg, var(--accent) 10%, var(--accent-2) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero p {
    margin: 16px 0 0;
    max-width: 56ch;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.55;
}
.hero-byline {
    margin: 6px 0 14px;
    font-size: .82rem;
    color: var(--muted);
}
.hero-byline a {
    color: var(--muted);
    text-decoration: none;
    letter-spacing: .04em;
}
.hero-byline a:hover {
    color: var(--accent);
}

/* ---- Filter bar -------------------------------------------------------- */

.filterbar {
    position: sticky;
    top: 14px;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    gap: 18px 22px;
    align-items: flex-end;
    padding: 18px 20px;
    margin: 28px 0 14px;
    border-radius: 20px;
    background: rgba(14, 14, 22, .72);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--border);
    box-shadow: 0 18px 50px -22px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.field { display: flex; flex-direction: column; gap: 7px; }

.field > label {
    font-size: .64rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted-2);
    font-weight: 700;
}

.field.grow { flex: 1 1 280px; min-width: 220px; }

.field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.svc-actions { display: inline-flex; align-items: center; gap: 10px; }
.svc-count { font-size: .68rem; color: var(--muted-2); font-weight: 700; letter-spacing: .04em; }

.link-btn {
    font: inherit;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color .18s;
}
.link-btn:hover { color: var(--accent); }

.select {
    appearance: none;
    font: inherit;
    font-size: .92rem;
    color: var(--text);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 10px 34px 10px 13px;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a9aab' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.select:hover { border-color: var(--border-strong); }
.select:focus { outline: none; border-color: var(--accent); }
.select option { background: var(--bg-2); color: var(--text); }

/* Sort group: select + direction toggle */
.sort-group { display: flex; gap: 8px; }

.dir-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-size: 1rem;
    transition: .2s;
}
.dir-toggle:hover { border-color: var(--border-strong); background: var(--surface-2); }

/* ---- Service toggle chips --------------------------------------------- */

.svc-row { display: flex; flex-wrap: wrap; gap: 8px; }

.svc {
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: all .18s ease;
    white-space: nowrap;
}
.svc:hover { color: var(--text); border-color: var(--border-strong); }

.svc.active {
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 93, 93, .9), rgba(255, 77, 77, .85));
    border-color: transparent;
    box-shadow: 0 6px 18px -8px rgba(255, 77, 77, .7);
}

/* ---- Buttons ----------------------------------------------------------- */

.btn {
    font: inherit;
    font-weight: 600;
    font-size: .92rem;
    border-radius: 11px;
    padding: 10px 18px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    transition: .2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn:hover { background: var(--surface); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-accent {
    border: none;
    background: linear-gradient(180deg, #ff6b6b, #ff4747);
    color: #fff;
    box-shadow: 0 10px 26px -10px rgba(255, 71, 71, .75);
}
.btn-accent:hover:not(:disabled) { filter: brightness(1.07); background: linear-gradient(180deg, #ff6b6b, #ff4747); }

/* ---- Search box --------------------------------------------------------- */

.searchbox {
    min-width: 160px;
    background-image: none;
    cursor: text;
}
.searchbox::placeholder { color: var(--muted-2); }

/* ---- Filter bar layout wrappers (mobile collapse) ----------------------- */
/* On desktop the lead/advanced wrappers must not introduce extra flex boxes:
   display:contents promotes their children straight into the .filterbar flex
   row, so the desktop layout is identical to before. The mobile media query
   below turns them back into real, collapsible boxes. */
.filterbar-lead,
.filterbar-advanced { display: contents; }

.filters-toggle { display: none; }   /* mobile-only trigger; hidden on desktop */

/* Filters toggle button (shown ≤768px) */
.filters-toggle {
    align-items: center;
    gap: 9px;
    padding: 10px 15px;
    border-radius: 12px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
    white-space: nowrap;
}
.filters-toggle:hover { background: var(--surface); }
.filters-toggle.open { border-color: var(--accent); }
.filters-toggle .ft-ico { font-size: 1rem; line-height: 1; }
.filters-toggle .ft-chevron { font-size: .62rem; color: var(--muted); margin-left: 2px; }
.filters-toggle .ft-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff6b6b, #ff4747);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
}

/* ---- Language switcher (floating, top-right) ---------------------------- */
.lang-switch {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(14, 14, 22, .78);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .85);
}
.lang-opt {
    font: inherit;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--muted);
    background: none;
    border: none;
    padding: 5px 11px;
    border-radius: 999px;
    cursor: pointer;
    transition: color .18s, background-color .18s;
}
.lang-opt:hover { color: var(--text); }
.lang-opt.active {
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 93, 93, .92), rgba(255, 77, 77, .88));
    box-shadow: 0 4px 12px -6px rgba(255, 77, 77, .8);
}
.lang-sep { width: 1px; height: 14px; background: var(--border-strong); }

/* ---- Quick-view segments ------------------------------------------------ */

.segments {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 4px;
}

.seg {
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: all .18s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.seg:hover { color: var(--text); border-color: var(--border-strong); }
.seg.active {
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 93, 93, .9), rgba(255, 77, 77, .85));
    border-color: transparent;
    box-shadow: 0 6px 18px -8px rgba(255, 77, 77, .7);
}
.seg.gold.active {
    color: #1b1305;
    background: linear-gradient(180deg, var(--gold-soft), var(--gold));
    box-shadow: 0 6px 18px -8px rgba(245, 197, 24, .7);
}
.seg.ghost { border-style: dashed; }
.seg-count {
    font-size: .68rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
}
.seg.gold.active .seg-count { background: rgba(27, 19, 5, .18); }

/* ---- Status / meta line ------------------------------------------------ */

.statusline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: .86rem;
    margin: 8px 2px 26px;
}
.statusline .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted-2); }
.statusline strong { color: var(--text); font-weight: 700; }

/* ---- Notices ----------------------------------------------------------- */

.notice {
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    margin: 14px 0;
    line-height: 1.5;
    font-size: .92rem;
}
.notice code {
    background: rgba(255, 255, 255, .08);
    padding: 1px 6px;
    border-radius: 5px;
    font-size: .85em;
}
.notice-warn { border-left: 3px solid var(--gold); }
.notice-error { border-left: 3px solid var(--accent); color: #ffd9d9; }

/* ---- Grid + cards ------------------------------------------------------ */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 22px;
}

.card-film {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--border);
    transform: translateZ(0);
    transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s, border-color .4s;
    animation: cardIn .55s both;
}

.card-film:hover {
    transform: translateY(-7px) scale(1.022);
    border-color: var(--border-strong);
    box-shadow: 0 22px 56px -16px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 93, 93, .28);
}

.card-film .poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.card-film:hover .poster { transform: scale(1.07); }

.card-film .poster-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-2);
    font-size: .8rem;
    background: repeating-linear-gradient(45deg, #14141d, #14141d 10px, #11111a 10px, #11111a 20px);
}

.card-film .scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5, 5, 9, .97) 3%, rgba(5, 5, 9, .55) 30%, rgba(5, 5, 9, 0) 58%);
}

.card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 13px 13px 14px;
}

.card-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.12;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-alt {
    font-size: .68rem;
    font-style: italic;
    color: var(--muted-2);
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meta-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .68rem;
    color: var(--muted);
    margin-bottom: 8px;
}
.meta-line .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }
.meta-line .rel-date { color: var(--text); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }

.chip {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .1);
    color: #e7e7ee;
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(4px);
}

/* Rating badge (gold) */
.rating {
    position: absolute;
    top: 11px;
    left: 11px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 800;
    font-size: .74rem;
    color: #1b1305;
    background: linear-gradient(180deg, var(--gold-soft), var(--gold));
    padding: 4px 8px 4px 7px;
    border-radius: 9px;
    box-shadow: 0 6px 16px -4px rgba(245, 197, 24, .45);
}
.rating.none { background: rgba(255, 255, 255, .12); color: var(--muted); box-shadow: none; }
.rating .star { font-size: .72rem; line-height: 1; }
.rating .votes {
    font-size: .6rem;
    font-weight: 700;
    color: rgba(27, 19, 5, .62);
    margin-left: 2px;
    padding-left: 5px;
    border-left: 1px solid rgba(27, 19, 5, .25);
}

/* Type pill */
.type-pill {
    position: absolute;
    top: 11px;
    right: 11px;
    z-index: 2;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    color: #fff;
    background: rgba(8, 8, 12, .6);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(6px);
}
.type-pill.series { color: #cfe9ff; }
.type-pill.movie { color: #ffe2c4; }

/* Hover panel: title + synopsis + open pill, an opaque reading surface that
   sits above every other card layer (scrim, body, pills) for max legibility. */
.hover-panel {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 15px;
    opacity: 0;
    transition: opacity .25s ease;
    background: rgba(7, 7, 11, .94);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    pointer-events: none;
    overflow: hidden;
}
.card-film:hover .hover-panel { opacity: 1; }

.hover-panel .hover-inner {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow: hidden;
}

.hover-panel .hover-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .98rem;
    line-height: 1.12;
    margin: 0;
    color: #fff;
    flex: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hover-panel .overview {
    margin: 0;
    font-size: .82rem;
    line-height: 1.52;
    color: #ececf3;
    display: -webkit-box;
    -webkit-line-clamp: 11;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hover-panel .overview.muted { color: var(--muted); font-style: italic; }

.hover-panel .open-pill {
    align-self: center;
    flex: none;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .26);
    transform: translateY(6px);
    transition: transform .3s;
}
.card-film:hover .open-pill { transform: translateY(0); }

/* "Déjà vu / pas intéressé" button (hover only) */
.hide-btn {
    position: absolute;
    right: 11px;
    top: 46px;
    z-index: 7;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: .82rem;
    color: #fff;
    background: rgba(8, 8, 12, .68);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity .25s, background .2s, transform .2s;
    backdrop-filter: blur(6px);
}
.card-film:hover .hide-btn { opacity: 1; }
.hide-btn:hover { background: rgba(255, 77, 77, .85); transform: scale(1.08); }

/* Hidden cards (only rendered when "show hidden" is on) */
.card-film.is-hidden { opacity: .45; filter: grayscale(.7); }
.card-film.is-hidden:hover { opacity: .85; filter: grayscale(.2); }

/* "Nouveau" pill — added to a service within the last 7 days */
.fresh-pill {
    position: absolute;
    top: 44px;
    left: 11px;
    z-index: 2;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 999px;
    color: #06251a;
    background: linear-gradient(180deg, #5af0b0, #2ed98c);
    box-shadow: 0 6px 16px -6px rgba(46, 217, 140, .6);
}

/* Top-pick ("Immanquable") treatment */
.card-film.top-pick {
    border-color: rgba(245, 197, 24, .45);
    box-shadow: 0 0 0 1px rgba(245, 197, 24, .22), 0 10px 32px -14px rgba(245, 197, 24, .35);
}
.card-film.top-pick:hover {
    border-color: rgba(245, 197, 24, .7);
    box-shadow: 0 22px 56px -16px rgba(0, 0, 0, .85), 0 0 0 1px rgba(245, 197, 24, .55);
}
.pick-label {
    display: inline-block;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 4px;
    text-shadow: 0 1px 8px rgba(245, 197, 24, .35);
}

/* ---- Empty state ------------------------------------------------------- */

.empty {
    text-align: center;
    padding: 70px 20px;
    color: var(--muted);
}
.empty .ico { font-size: 2.6rem; margin-bottom: 12px; opacity: .7; }
.empty h3 { font-family: var(--font-display); font-weight: 600; color: var(--text); margin: 0 0 6px; font-size: 1.3rem; }

/* ---- Spinner ----------------------------------------------------------- */

.spin {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: spin .7s linear infinite;
}

/* ---- Animations -------------------------------------------------------- */

@keyframes cardIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: none; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Blazor error UI (kept, restyled) ---------------------------------- */

#blazor-error-ui {
    color-scheme: light;
    background: #2b1414;
    color: #ffd9d9;
    bottom: 0;
    box-shadow: 0 -1px 12px rgba(0, 0, 0, .5);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.8rem 1.4rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: var(--font-ui);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.9rem; top: 0.6rem; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
    border-radius: 8px;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ---- Mobile: collapse the filter bar ----------------------------------- */
@media (max-width: 768px) {
    /* Stack the bar; search stays visible, the rest collapses behind "Filtres". */
    .filterbar {
        position: static;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px;
    }

    /* Lead row becomes a real flex box again: search grows, toggle sits beside it. */
    .filterbar-lead {
        display: flex;
        gap: 10px;
        align-items: flex-end;
    }
    .grow-search { flex: 1 1 auto; min-width: 0; }
    .grow-search .searchbox { min-width: 0; width: 100%; }
    .filters-toggle { display: inline-flex; }

    /* Advanced panel: a tidy 2-column grid, collapsed by default, animated open. */
    .filterbar-advanced {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 12px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height .35s ease, opacity .25s ease, margin-top .3s ease;
    }
    .filterbar-advanced.open {
        max-height: 1400px;
        opacity: 1;
        margin-top: 2px;
    }
    .filterbar-advanced .select { width: 100%; }
    /* Services and the refresh button span the full width of the panel. */
    .filterbar-advanced .field.grow,
    .filterbar-advanced .field:last-child { grid-column: 1 / -1; }
    .filterbar-advanced .field:last-child .btn { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
    .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
}