/* ═══ Container ═══ */
:root {
    /* Shared content width: fluid 90vw, capped at 1530px, but never
       narrower than 320px. Header + container + footer all use this so
       their left/right edges line up. */
    --moviedb-content-width: clamp(320px, 90vw, 1530px);

    /* ── Bottom-bar expand/collapse (motion tokens, no magic numbers) ──
       GPU-only: opacity + transform + grid-rows. No max-height / margin-top
       / display swaps, so it never shifts layout or breaks mobile. */
    --bb-duration: 0.32s;
    --bb-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out-ish */
}

.moviedb-container {
    width: var(--moviedb-content-width);
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

/* ═══ Home Page ═══ */
.moviedb-home {
    /* .moviedb-main already provides the 80px fixed-header spacer;
       only add the WP admin-bar height (0 for non-admins). */
    padding-top: var(--wp-admin--admin-bar--height, 0px);
    padding-bottom: 60px;
    min-height: 60vh;
}

.moviedb-home-section {
    margin-bottom: 48px;
}

.moviedb-home-section:last-child {
    margin-bottom: 0;
}

/* ═══ Section Title ═══ */
.moviedb-section-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--moviedb-text-light, #fff);
}

.moviedb-see-all {
    font-size: 13px;
    font-weight: 400;
    color: var(--moviedb-primary, #e50914);
    text-decoration: none;
    transition: opacity 0.2s;
}

.moviedb-see-all:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* ═══ Home Grid ═══ */
.moviedb-home-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

/* Updated-series baby cards (16:9 landscape): dynamic per-row count.
   auto-fill lets the grid itself decide how many cards fit each row
   based on the container width, instead of a fixed 6 columns. */
.moviedb-home-grid[data-grid="series"] {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 22px;
}

/* ═══════════ ARTEMIS CARD ═══════════ */
.artemis-card {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}
.artemis-card:hover {
    transform: translateY(-6px);
}
.artemis-card:hover .poster {
    box-shadow: 0 18px 44px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.12);
}

/* ---------- POSTER ---------- */
.artemis-card .poster {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, #0a1030 0%, #16204f 55%, #1d2a63 100%);
    box-shadow: 0 12px 32px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.07);
    transition: box-shadow .25s ease;
}

/* --- scene (CSS illustration — base layer, visible when no poster image) --- */
.artemis-card .scene {
    position: absolute; inset: 0;
}

/* --- sky glow --- */
.artemis-card .sky-glow {
    position: absolute; inset: 0;
    background:
      radial-gradient(200px 140px at 22% 12%, rgba(190,210,255,.16), transparent 70%),
      radial-gradient(320px 200px at 78% 96%, rgba(120,140,220,.10), transparent 70%);
}

/* --- stars (kept as subtle backdrop behind the poster icon) --- */
.artemis-card .stars { position: absolute; inset: 0; }
.artemis-card .stars i {
    position: absolute;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: #fff;
    opacity: .85;
}
.artemis-card .stars i:nth-child(1)  { left: 8%;  top: 16%;  opacity:.9; }
.artemis-card .stars i:nth-child(2)  { left: 15%; top: 44%;  opacity:.6; }
.artemis-card .stars i:nth-child(3)  { left: 24%; top: 70%;  opacity:.7; }
.artemis-card .stars i:nth-child(4)  { left: 42%; top: 9%;   opacity:.8; }
.artemis-card .stars i:nth-child(5)  { left: 58%; top: 30%;  opacity:.55; }
.artemis-card .stars i:nth-child(6)  { left: 70%; top: 58%;  opacity:.75; }
.artemis-card .stars i:nth-child(7)  { left: 84%; top: 18%;  opacity:.65; }
.artemis-card .stars i:nth-child(8)  { left: 90%; top: 46%;  opacity:.9; }
.artemis-card .stars i:nth-child(9)  { left: 74%; top: 82%;  opacity:.5; }
.artemis-card .stars i:nth-child(10) { left: 33%; top: 52%;  opacity:.7; }
.artemis-card .stars i:nth-child(11) { left: 92%; top: 74%;  opacity:.6; }
.artemis-card .stars i:nth-child(12) { left: 6%;  top: 88%;  opacity:.5; }

/* --- poster placeholder icon (film + play) for movie/series cards --- */
.artemis-card .poster-icon {
    position: absolute;
    left: 50%; top: 52%;
    transform: translate(-50%, -50%);
    width: 46%;
    max-width: 150px;
    color: #7c8bb5;
    opacity: .85;
}
.artemis-card .poster-icon svg { width: 100%; height: auto; display: block; }

/* --- launch tower removed (replaced by poster-icon) --- */
.artemis-card .poster-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* --- bottom shade for legibility --- */
.artemis-card .poster-shade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
    background: linear-gradient(180deg, rgba(4,6,14,0) 0%, rgba(4,6,14,.55) 55%, rgba(4,6,14,.93) 100%);
    pointer-events: none;
    z-index: 2;
    transition: opacity .28s ease;
}
.artemis-card:hover .poster-shade {
    opacity: 0;
}
.artemis-card:hover .info-badge {
    opacity: 0;
}

/* --- hover overlay: genres + plot (replaces old zoom-in) --- */
.artemis-card .hover-info {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 16px;
    background:
        linear-gradient(180deg, rgba(4,6,14,.92) 0%, rgba(4,6,14,.78) 45%, rgba(4,6,14,.97) 100%);
    opacity: 0;
    transition: opacity .28s ease;
    z-index: 4;
    pointer-events: none;
}
.artemis-card:hover .hover-info {
    opacity: 1;
}
.artemis-card .hover-genres {
    display: inline-block;
    color: #f5c542;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
}
.artemis-card .hover-plot {
    color: rgba(255,255,255,.92);
    font-size: 12.5px;
    line-height: 1.75;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- BADGES ---------- */
.artemis-card .badge { position: absolute; top: 12px; width: 40px; height: 40px; z-index: 3; }
/* --- Rating ring: thin OUTER ring only (no pie/cake fill) --- */
.artemis-card .badge.rating { left: 12px; border-radius: 50%;
    background: conic-gradient(var(--ring-color, #2ecc71) 0deg var(--ring-deg, 0deg), rgba(255,255,255,.16) var(--ring-deg, 0deg) 360deg);
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    display: flex; align-items: center; justify-content: center;
}
.artemis-card .badge.rating .ring-core {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #080a12;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', Tahoma, sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: #ffffff;
    letter-spacing: -.5px;
}
.artemis-card .badge.cc {
    right: 12px;
    background: rgba(8,10,18,.62);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.artemis-card .badge.cc .cc-box {
    width: 24px; height: 15px;
    background: #f5c542;
    border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', Tahoma, sans-serif;
    font-weight: 800;
    font-size: 9.5px;
    letter-spacing: 1px;
    color: #17181c;
}
/* --- dub (microphone) badge — stacked BELOW the CC badge (vertical) --- */
.artemis-card .badge.dub {
    right: 12px;
    top: 58px;
    background: rgba(8,10,18,.62);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.artemis-card .badge.dub .dub-box {
    display: block;
    color: #2ecc71;
}

/* ---------- META BADGES (year / runtime-or-seasons) ---------- */
.artemis-card .info-badge {
    position: absolute;
    bottom: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(8,10,18,.55);
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .5px;
    color: #e7eaf2;
    z-index: 3;
    transition: opacity .28s ease;
}
.artemis-card .info-badge.year { right: 12px; }
.artemis-card .info-badge.episode { left: 12px;
    font-size: 10px;
    letter-spacing: .3px;
    color: #d4af67;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
}

/* ---------- POSTER TITLE ---------- */
.artemis-card .poster-title {
    position: absolute;
    left: 0; right: 0; bottom: 46px;
    text-align: center;
    z-index: 3;
    padding: 0 10px;
}
.artemis-card .poster-title h1 {
    font-family: 'Montserrat', 'Segoe UI', Tahoma, sans-serif;
    font-weight: 900;
    font-size: 21px;
    letter-spacing: 1px;
    line-height: 1.15;
    color: #fcd116;
    text-shadow: 0 2px 10px rgba(0,0,0,.55);
    unicode-bidi: plaintext;
    direction: ltr;
    margin: 0;
    overflow-wrap: break-word;
}
.artemis-card .poster-title p {
    margin-top: 4px;
    font-family: 'Montserrat', 'Segoe UI', Tahoma, sans-serif;
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: 1.6px;
    color: #ffffff;
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
    overflow-wrap: break-word;
}

/* ---------- META ---------- */
.artemis-card .meta { padding: 12px 2px 0; }
.artemis-card .meta h2 {
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #e6e8ef;
    text-align: center;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.artemis-card .meta p {
    margin-top: 4px;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    font-weight: 400;
    font-size: 12.5px;
    color: #8f93a2;
    text-align: center;
}

/* ═══ Footer ═══ */
.moviedb-footer {
    border-top: 1px solid var(--moviedb-border, rgba(255,255,255,0.08));
    padding: 24px 0;
    text-align: center;
    flex-shrink: 0;
}

.moviedb-footer-content {
    width: var(--moviedb-content-width);
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.moviedb-footer-content p {
    font-size: 13px;
    color: var(--moviedb-text-muted, #a0a0a0);
    margin: 0;
}

/* ═══ Responsive ═══ */
@media (max-width: 1100px) {
    .moviedb-home-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }

    /* Landscape 16:9 baby cards: give them room to breathe on tablets —
       auto-fill keeps 3-4 bigger cards instead of squishing 4 into the row. */
    .moviedb-home-grid[data-grid="series"] {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 18px;
    }
}

@media (max-width: 768px) {
    .moviedb-home-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .moviedb-home-grid[data-grid="series"] {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 14px;
    }

    .moviedb-section-title {
        font-size: 18px;
        margin-bottom: 16px;
    }
}

/* ═══ HOME FILTER responsive (tablet & phone) ═══ */
@media (max-width: 1100px) {
    /* top bar: let items wrap naturally instead of overflowing */
    .home-filter .bar.top { gap: 10px; }

    /* bottom bar: leave single-line on tablets, go vertical on phones */
    .home-filter .bar.bottom.show > .bottom-inner {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .home-filter .bar.top {
        /* tablet portrait: tidy 2-col grid instead of messy wraps */
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-content: initial;
        gap: 10px 12px;
    }
    /* segment + search span the full width (row 1 / row 3) */
    .home-filter .bar.top .segment { grid-column: 1 / -1; justify-self: stretch; }
    .home-filter .bar.top .segment button { flex: 1; }
    .home-filter .bar.top .btn-search { grid-column: 1 / -1; }
    /* genre select keeps its caption inline; fields shrink to fit */
    .home-filter .select.genre { flex-direction: row; }
    .home-filter .bar.top .select .field { min-width: 0; width: 100%; }
    .home-filter .bar.top .toggle { justify-content: space-between; gap: 10px; }
    .home-filter .bar.top .select { width: 100%; }
}

@media (max-width: 640px) {
    .home-filter .bar { gap: 8px; }
    .home-filter .btn-search, .home-filter .btn-more { flex: 1 1 auto; justify-content: center; }

    /* stacked vertical layout on phones (override the 900px grid) */
    .home-filter .bar.top {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .home-filter .bar.top .segment,
    .home-filter .bar.top .select,
    .home-filter .bar.top .toggle {
        width: 100%;
        justify-content: space-between;
    }
    .home-filter .select.genre { flex-direction: column; align-items: stretch; gap: 5px; }
    .home-filter .select .field { width: 100%; min-width: 0; }
    .home-filter .bar.top .btn-search,
    .home-filter .bar.top .btn-more {
        flex: 1 1 auto;
    }
    .home-filter .bar.bottom.show > .bottom-inner {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .home-filter .bar.bottom.show > .bottom-inner > .select,
    .home-filter .bar.bottom.show > .bottom-inner > .year-group {
        width: 100%;
        flex: none;
    }
    .home-filter .bar.bottom.show > .bottom-inner > .select .field { width: 100%; }
    .home-filter .year-group { flex-wrap: nowrap; width: 100%; }
    .home-filter .year-group label { flex: none; }
    .home-filter .year-group input { flex: 1; width: auto; }
    .home-filter .menu { width: 100%; }

    /* more-indicator centers over the bottom bar */
    .home-filter .more-indicator { display: none; }
}

/* baby-card title scales on phones */
@media (max-width: 480px) {
    .moviedb-home-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Updated-series baby cards: single column on phones — the 16:9
       landscape cards are too small at 2-up; one wide card per row is
       much more readable and the update badge fits without clipping. */
    .moviedb-home-grid[data-grid="series"] {
        grid-template-columns: 1fr;
    }
    .baby-card .title { font-size: 15px; }
    /* NOTE: no white-space:nowrap here anymore — the base `.baby-card
       .badge` rule (white-space:normal, multi-line) must win so long
       update texts wrap and never overflow/clip on small phones. */
    .baby-card .badge.badge {
        font-size: 11px;
        padding: 8px 12px;
        max-width: calc(100% - 10px);
    }
}

/* ════════════ HOME SLIDER (series + movies) ════════════ */
.moviedb-slider-section {
    margin-bottom: 48px;
}

/* header row: title right, nav (see-all + arrows) left */
.moviedb-slider-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.moviedb-slider-head .moviedb-section-title {
    margin: 0;
}

/* arrows that flank the slider (prev right, next left in RTL) */
.moviedb-slider-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.moviedb-slider-wrap > .moviedb-slider {
    flex: 1 1 auto;
    min-width: 0;        /* allow the flex track to shrink + scroll */
}
.moviedb-slider-wrap .slider-arrow-side {
    flex: none;
    align-self: center;
    display: none;          /* hidden until JS confirms the track overflows */
}
/* Show arrows only when the track actually overflows (enough content to
   scroll) AND the viewport is wide enough — phones keep native swipe. */
@media (min-width: 481px) {
    .moviedb-slider-wrap.can-scroll .slider-arrow-side { display: inline-flex; }
}
/* In the RTL flank layout prev sits on the right, next on the left, so flip
   the chevrons 180° so prev points left (into content) and next points right. */
.slider-arrow-side svg {
    transform: rotate(180deg);
}

/* arrows */
.slider-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--moviedb-border, #2c2c2c);
    background: rgba(255,255,255,0.04);
    color: var(--moviedb-text-light, #fff);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
    padding: 0;
}
.slider-arrow svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}
.slider-arrow:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.25);
}
.slider-arrow:active {
    transform: scale(.92);
}
.slider-arrow:disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

/* the scrollable track */
.moviedb-slider {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    /* top padding gives the straddling badge (-11px) room to stick out
       of the card without being clipped by the scroll container */
    padding: 28px 2px 14px;
    margin: -18px -2px 0;
    cursor: grab;                    /* hint desktop drag-to-scroll */
}
/* suppress the browser's native image/link drag so mouse-drag scrolls instead */
.moviedb-slider img,
.moviedb-slider a { -webkit-user-drag: none; user-drag: none; }
.moviedb-slider.dragging { cursor: grabbing; scroll-snap-type: none; }
.moviedb-slider::-webkit-scrollbar {
    display: none;                  /* Chrome / Safari */
}

/* fixed-width slide cells: landscape baby-cards are wide, portrait
   artemis cards are narrow — both scroll-snap aligned to start */
.moviedb-slider > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
}
.moviedb-slider > .baby-card {
    width: min(360px, 82vw);
}
.moviedb-slider > .artemis-card {
    width: min(220px, 46vw);
}

@media (max-width: 480px) {
    /* phones keep native swipe — arrows already hidden by default */
    .moviedb-slider { gap: 14px; }
}

/* ════════════ HOME FILTER (stream-filter style) ════════════ */
.home-filter {
    --bar: #141414;
    --chip: #1f1f1f;
    --chip-2: #222222;
    --track: #2a2a2a;
    --accent: #e50914;
    --accent-hover: #f6121d;
    --text: #ffffff;
    --muted: #9ca3af;
    --border: #2c2c2c;
    --radius: 14px;
    --font: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;

    margin: 28px 0 40px;
    display: flex;
    justify-content: center;
}
.home-filter * { box-sizing: border-box; }

.home-filter .filter-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.home-filter .bar {
    width: 100%;
    background: var(--bar);
    border-radius: var(--radius);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}
.home-filter .bar.top { justify-content: space-between; }

.home-filter .btn-search {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    padding: 11px 22px;
    cursor: pointer;
    transition: background .15s ease, transform .05s ease;
    white-space: nowrap;
}
.home-filter .btn-search:hover { background: var(--accent-hover); }
.home-filter .btn-search:active { transform: scale(.97); }

.home-filter .btn-more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--chip);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    padding: 11px 16px;
    cursor: pointer;
    transition: background .15s ease;
    white-space: nowrap;
}
.home-filter .btn-more:hover { background: #272727; }
.home-filter .btn-more svg { width: 16px; height: 16px; stroke: currentColor; }

.home-filter .more-indicator {
    position: absolute;
    left: 262.977px;
    top: 72px;
    width: 0; height: 0;
    /* Static connector: a triangle whose base sits on the bottom bar's top
       border (z-index above) so it visually overrides/merges with that border.
       rotate(180deg) flips the top-border triangle to point up into the gap. */
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 18px solid var(--bar);
    margin: 0;
    transform: translateX(-50%) rotate(180deg);
    transform-origin: center;
    z-index: 5;                 /* paint above .bar.bottom to override its top border */
    pointer-events: none;
    transition: opacity .15s ease;
}
.home-filter .more-indicator.hidden { opacity: 0; }

.home-filter .toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.home-filter .toggle .label { font-size: 13.5px; color: var(--muted); font-weight: 500; }
.home-filter .toggle.on .label { color: var(--text); }
.home-filter .switch {
    position: relative;
    width: 40px; height: 22px;
    background: var(--track);
    border-radius: 999px;
    transition: background .2s ease;
    flex: none;
}
.home-filter .switch::after {
    content: "";
    position: absolute;
    top: 3px; right: 3px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s ease;
}
.home-filter .toggle.on .switch { background: var(--accent); }
.home-filter .toggle.on .switch::after { transform: translateX(-18px); }

.home-filter .select {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
}
.home-filter .select .field {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 130px;
    background: var(--chip);
    border-radius: 10px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--muted);
    transition: background .15s ease;
    white-space: nowrap;
}
.home-filter .select.open .field,
.home-filter .select .field:hover { background: var(--chip-2); }
.home-filter .select .field .val { color: var(--text); }
.home-filter .select .field .placeholder { color: var(--muted); }
.home-filter .chev {
    width: 14px; height: 14px;
    stroke: var(--muted);
    transition: transform .2s ease;
    flex: none;
}
.home-filter .select.open .chev { transform: rotate(180deg); }

.home-filter .select .caption {
    font-size: 12px;
    color: var(--muted);
    padding-right: 2px;
}
.home-filter .select.selflabel { gap: 0; }
.home-filter .select.selflabel .field { min-width: 140px; }

.home-filter .menu {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    min-width: 100%;
    background: #0a0a0a;
    border-radius: 12px;
    padding: 6px 6px 10px;
    z-index: 50;
    display: none;
    flex-direction: column;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 12px 30px rgba(0,0,0,.6);
}
.home-filter .select.open .menu { display: flex; }
.home-filter .menu .opt {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    color: #e5e5e5;
    cursor: pointer;
    transition: background .12s ease;
    white-space: nowrap;
    text-align: right;
}
.home-filter .menu .opt:hover { background: #1c1c1c; }
.home-filter .menu .opt.active { color: #fff; background: rgba(229,9,20,.18); }
.home-filter .menu .opt .en { color: #6b7280; font-size: 12px; }

.home-filter .select.genre .field { min-width: 150px; }
.home-filter .select.genre { align-items: center; flex-direction: row; gap: 10px; }
.home-filter .select.genre .caption { padding-right: 0; }

.home-filter .segment {
    position: relative;
    display: inline-flex;
    background: var(--chip);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
}
.home-filter .segment button {
    position: relative;
    z-index: 2;
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 600;
    padding: 7px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: color .25s ease;
    white-space: nowrap;
}
/* Sliding active pill — glides between segments with a smooth ease */
.home-filter .segment .segment-indicator {
    position: absolute;
    z-index: 1;
    top: 4px; bottom: 4px;
    left: 4px;
    width: 0;
    background: var(--accent);
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(229, 9, 20, .35);
    transition: transform .35s cubic-bezier(.22, .8, .28, 1), width .35s cubic-bezier(.22, .8, .28, 1);
    will-change: transform, width;
    pointer-events: none;
}
.home-filter .segment button.active { color: #fff; }

.home-filter .year-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--chip);
    border-radius: 10px;
    padding: 7px 12px;
}
.home-filter .year-group label { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.home-filter .year-group input {
    width: 72px;
    background: #0f0f0f;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    padding: 6px 8px;
    text-align: center;
    outline: none;
}

/* Bottom bar — structure:
   .bar.bottom        = clip + animate container (grid 0fr→1fr, opacity, transform)
   .bar.bottom > .bottom-inner = the actual flex layout (so responsive
                        flex-direction:column still applies to the row of items)
   grid-template-rows 0fr→1fr animates the height WITHOUT a JS-measured target
   and WITHOUT shifting layout, so it's mobile-safe and WebView-safe. */
.home-filter .bar.bottom {
    width: 95%;
    margin-top: 0;                    /* no gap when collapsed (was display:none) */

    /* collapse mechanics */
    display: grid;
    grid-template-rows: 0fr;          /* collapsed: content clipped to 0 height */
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    overflow: hidden;
    transition:
        grid-template-rows var(--bb-duration) var(--bb-ease),
        opacity            var(--bb-duration) var(--bb-ease),
        transform          var(--bb-duration) var(--bb-ease);
}
.home-filter .bar.bottom.show {
    margin-top: 18px;                 /* gap appears instantly (not animated) on open */
    grid-template-rows: 1fr;          /* open: content takes its natural height */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Once the open animation has settled (no .animating), allow open dropdowns
   (.menu) to escape the collapse clip. The collapsed state and the brief
   .animating window keep overflow:hidden so the 0fr collapse + slide stay clean. */
.home-filter .bar.bottom.show:not(.animating) {
    overflow: visible;
    z-index: 5;                       /* paint above following home sections */
}
.home-filter .bar.bottom > .bottom-inner {
    min-height: 0;                    /* required for 0fr clipping to work */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
/* hint the compositor only while animating (toggle added/removed by JS) */
.home-filter .bar.bottom.animating { will-change: grid-template-rows, opacity, transform; }

/* Respect users who prefer reduced motion: keep it instant, no slide/fade. */
@media (prefers-reduced-motion: reduce) {
    .home-filter .bar.bottom {
        transition: none;
        transform: none;
    }
}

/* bottom-bar items stretch to fill the full width — applied in BOTH open and
   collapsing states so the inner layout stays stable during the close
   transition (if gated on .show, items snap narrow the instant .show is
   removed, while the bar is still animating closed). Collapsed state is
   clipped by overflow:hidden, so stretching here has no visual downside. */
.home-filter .bar.bottom > .bottom-inner > .select,
.home-filter .bar.bottom > .bottom-inner > .year-group { flex: 1 1 auto; min-width: 0; }
.home-filter .bar.bottom > .bottom-inner > .select .field { width: 100%; }

@media (max-width: 640px) {
    .home-filter .bar { gap: 8px; }
    .home-filter .btn-search, .home-filter .btn-more { flex: 1 1 auto; justify-content: center; }
}

/* ════════════ BABY CARD (new-updated series) ════════════ */
.baby-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 14px;
    background: #0d0f14;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
    cursor: pointer;
    outline: none;
    transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
    will-change: transform;
}
.baby-card:hover,
.baby-card:focus-visible {
    /* NO scale() zoom here: the badge straddles the top edge and a
       transform would carry it outside the card box, where the slider's
       overflow clips it (it vanished on hover). Lift + shadow only. */
    transform: translateY(-6px);
    box-shadow: 0 14px 38px rgba(0,0,0,.6);
}
.baby-card .poster {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: #0a1030;
}
.baby-card .poster-icon {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    max-width: 120px;
    color: #7c8bb5;
    opacity: .85;
}
.baby-card .poster-icon svg { width: 100%; height: auto; display: block; }
.baby-card .poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.baby-card:hover .poster-img,
.baby-card:focus-visible .poster-img {
    transform: scale(1.06);
}
.baby-card .play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%) scale(.85);
    z-index: 4;
    width: 64px; height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(20,23,28,.55);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(2px);
    box-shadow: 0 4px 18px rgba(0,0,0,.5);
    transition: opacity .25s ease, transform .25s cubic-bezier(.2,.7,.2,1), background .25s ease, visibility .25s;
}
.baby-card .play-btn svg { margin-inline-start: 3px; }
.baby-card:hover .play-btn,
.baby-card:focus-visible .play-btn {
    opacity: 1; visibility: visible;
    transform: translate(-50%,-50%) scale(1);
}
.baby-card .play-btn:hover { background: #f59e0b; }

.baby-card .overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 28px 16px 14px;
    text-align: left;
    background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,0) 100%);
}
.baby-card .title {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .3px;
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.baby-card .badge {
    position: absolute;
    top: -11px;             /* straddle: half above the card, half on it */
    left: 5px;
    z-index: 5;
    background: #f59e0b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    padding: 8px 12px;
    border-radius: 10px;
    /* Never truncate: allow wrapping so the FULL text always fits —
       before AND after hover. nowrap + max-width used to clip long
       updates and the overflow escaped the card on hover. */
    white-space: normal;
    overflow-wrap: break-word;
    max-width: calc(100% - 10px);
    box-sizing: border-box;
    box-shadow: 0 6px 16px rgba(245,158,11,.5);
}
.baby-card .badge::after {
    content: "";
    position: absolute;
    left: 10px; right: 10px;
    bottom: -7px;
    height: 7px;
    background: #f59e0b;
    border-radius: 0 0 10px 10px;
    opacity: .5;
    z-index: -1;
    display: none; /* badge no longer straddles the top edge — no tail */
}

/* ═══ Sima Footer (theme footer.php) ═══ */
.sima-footer {
    background: #0c0c0e;
    border-top: 1px solid #2a2a30;
    padding: 64px 0 32px;
    margin-top: 100px;
}

.sima-container {
    width: clamp(320px, 90vw, 1530px);
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 0.9fr 1.35fr 1.2fr 0.95fr;
    gap: 32px;
    align-items: start;
}

/* ---------- Brand column ---------- */
.brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #000;
    border: 1px solid #34343c;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 0 18px rgba(255,255,255,0.05);
    border-radius: 999px;
    padding: 8px 18px 8px 12px;
}
.logo img { height: 35px; width: auto;}
.logo .logo-text {
    color: #ffffff;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.2px;
    line-height: 1;
}
.logo svg { display: block; }

.intro {
    color: #8a8a92;
    font-size: 13.5px;
    line-height: 2.1;
    text-align: right;
    max-width: 360px;
    margin: 0;
}

/* ---------- Links columns ---------- */
.links { display: flex; flex-direction: column; gap: 24px; }

.link-col { border-top: 2px solid #e53935; padding-top: 16px; }
.link-col h3 {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 16px;
}
.link-col.no-head h3 { display: none; }

.link-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; padding: 0; margin: 0; }
.link-col a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #b3b3b9;
    text-decoration: none;
    font-size: 13.5px;
    transition: color 0.18s ease;
}
.link-col a::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #e53935;
    border-radius: 1px;
    flex: none;
    transform: translateY(0.5px);
}
.link-col a:hover { color: #ffffff; }

/* ---------- Action buttons ---------- */
.actions { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }

.btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #141417;
    border: 1px solid #2a2a30;
    border-radius: 10px;
    padding: 14px 16px;
    text-decoration: none;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.btn:hover { border-color: #34343c; background: #1b1b1f; transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid #e53935; outline-offset: 2px; }

.btn .btn-icon { color: #e53935; display: inline-flex; flex: none; }
.btn .btn-label { flex: 1; text-align: right; }
.btn .btn-chevron { color: #8a8a92; display: inline-flex; flex: none; }

/* ---------- Copyright ---------- */
.copyright {
    width: clamp(320px, 90vw, 1530px);
    max-width: 100%;
    margin: 48px auto 0;
    padding: 24px 20px 0;
    border-top: 1px solid #2a2a30;
    text-align: center;
    color: #8a8a92;
    font-size: 12.5px;
}

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
    .sima-container { grid-template-columns: 1fr 1fr; gap: 32px; }
    .brand { grid-column: 1 / -1; align-items: flex-start; }
    .brand .intro { max-width: none; }
    .actions { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .sima-container { grid-template-columns: 1fr; }
}