/* Lebanon Cinema — public site styles
   Dark, poster-led; logical properties so the same rules work in LTR and RTL. */

:root {
    --bg: #0e0c0c;
    --bg-raised: #171313;
    --bg-card: #1d1818;
    --line: #2d2626;
    --text: #f4efe9;
    --text-dim: #b3a9a0;
    --text-faint: #7d736b;
    --red: #c8102e;
    --red-bright: #e8304b;
    --gold: #f2c14e;
    --gold-dim: #b8913a;
    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --container: 1200px;
    --gutter: clamp(16px, 4vw, 32px);
}

[dir="rtl"] {
    --font-display: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
    --font-body: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

[dir="rtl"] body { line-height: 1.8; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 700; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: 1rem; top: -3rem; z-index: 100; background: var(--gold); color: #111; padding: .5rem 1rem; border-radius: var(--radius-sm); }
.skip-link:focus { top: 1rem; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(14, 12, 12, .82);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; gap: 1rem; height: 68px; }

.brand { display: inline-flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.brand-text { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: .01em; }

.main-nav { margin-inline-start: auto; }
.main-nav ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.main-nav a {
    display: block; padding: .5rem .5rem; border-radius: var(--radius-sm);
    color: var(--text-dim); font-size: .88rem; font-weight: 500; white-space: nowrap; transition: color .15s, background .15s;
}
.main-nav a:hover { color: var(--text); background: var(--bg-card); }
.main-nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--red); border-radius: 0; }

.header-actions { display: flex; align-items: center; gap: .5rem; }
.lang-switch {
    padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 999px;
    font-size: .88rem; font-weight: 600; color: var(--gold);
}
.lang-switch:hover { border-color: var(--gold-dim); }
.lang-switch:lang(ar) { font-family: "Noto Kufi Arabic", sans-serif; }
.lang-switch:lang(en) { font-family: "Inter", sans-serif; }

.menu-toggle {
    display: none; background: none; border: 1px solid var(--line); color: var(--text);
    width: 42px; height: 42px; border-radius: var(--radius-sm); cursor: pointer;
    align-items: center; justify-content: center;
}

@media (max-width: 1240px) {
    .menu-toggle { display: inline-flex; }
    .header-actions { margin-inline-start: auto; }
    .main-nav {
        position: fixed; inset: 68px 0 auto 0; margin: 0;
        background: var(--bg); border-bottom: 1px solid var(--line);
        padding: .5rem var(--gutter) 1rem;
        display: none;
    }
    .main-nav.is-open { display: block; }
    .main-nav ul { flex-direction: column; }
    .main-nav a { padding: .8rem .5rem; font-size: 1rem; }
    .main-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--red); }
    [dir="rtl"] .main-nav a[aria-current="page"] { box-shadow: inset -3px 0 0 var(--red); }
}

/* ---------- Buttons & small parts ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 46px; padding: .65rem 1.3rem; border-radius: 999px;
    font-weight: 600; font-size: .95rem; border: 1px solid transparent; cursor: pointer;
    transition: transform .15s, background .15s, border-color .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-bright); }
.btn-gold { background: var(--gold); color: #1a1408; }
.btn-ghost { border-color: rgba(255, 255, 255, .22); color: var(--text); background: rgba(255, 255, 255, .04); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, .5); }

.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem;
    font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
[dir="rtl"] .eyebrow { letter-spacing: 0; font-size: .9rem; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red-bright); box-shadow: 0 0 0 4px rgba(232, 48, 75, .2); }
.eyebrow--gold { color: var(--gold); }

.link-arrow { color: var(--gold); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.link-arrow::after { content: " →"; }
[dir="rtl"] .link-arrow::after { content: " ←"; }
.link-arrow:hover { color: #ffd77a; }

.pill {
    flex-shrink: 0; padding: .25rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
    background: var(--bg-raised); border: 1px solid var(--line); color: var(--text-dim);
}
.pill--live { background: rgba(200, 16, 46, .16); border-color: rgba(200, 16, 46, .5); color: #ff9aa9; }

.tag {
    position: absolute; inset-block-start: .75rem; inset-inline-start: .75rem;
    padding: .2rem .6rem; border-radius: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    background: rgba(14, 12, 12, .8); color: var(--text);
}
.tag--review { background: var(--gold); color: #1a1408; }
.tag--news { background: var(--red); color: #fff; }

.empty { color: var(--text-dim); padding: 2rem; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); }

/* ---------- Hero ---------- */
.hero {
    position: relative; overflow: hidden; isolation: isolate;
    padding-block: clamp(3rem, 8vw, 6rem);
    background:
        radial-gradient(ellipse 70% 90% at 80% 20%, hsla(var(--hue), 55%, 32%, .55), transparent 70%),
        radial-gradient(ellipse 60% 80% at 10% 100%, rgba(200, 16, 46, .22), transparent 70%),
        var(--bg);
}
[dir="rtl"] .hero {
    background:
        radial-gradient(ellipse 70% 90% at 20% 20%, hsla(var(--hue), 55%, 32%, .55), transparent 70%),
        radial-gradient(ellipse 60% 80% at 90% 100%, rgba(200, 16, 46, .22), transparent 70%),
        var(--bg);
}
.hero::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 120px; z-index: -1;
    background: linear-gradient(transparent, var(--bg));
}
.hero-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; z-index: -2; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero-title { font-family: var(--font-display); font-size: clamp(2.6rem, 7vw, 5rem); letter-spacing: -.01em; }
.hero-meta { margin: 1rem 0 .25rem; color: var(--text-dim); font-size: .95rem; }
.hero-director { margin: 0; color: var(--text); font-weight: 500; }
.hero-synopsis { max-width: 58ch; margin: 1.25rem 0 2rem; color: #d8cfc6; font-size: 1.05rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-poster .poster { transform: rotate(2deg); }
[dir="rtl"] .hero-poster .poster { transform: rotate(-2deg); }

@media (max-width: 760px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-poster { order: -1; max-width: 200px; }
}

/* ---------- Posters ---------- */
.poster { display: flex; flex-direction: column; gap: .6rem; width: 100%; }
.poster-frame {
    position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden;
    border-radius: var(--radius); background: var(--bg-card); box-shadow: var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}
.poster:hover .poster-frame { transform: translateY(-4px); box-shadow: 0 26px 50px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(242, 193, 78, .35); }
.poster-frame img { width: 100%; height: 100%; object-fit: cover; }
.poster-placeholder {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem;
    padding: 1rem;
    background:
        linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .75)),
        radial-gradient(circle at 30% 25%, hsla(var(--hue), 70%, 55%, .9), transparent 55%),
        linear-gradient(160deg, hsl(var(--hue), 45%, 28%), hsl(calc(var(--hue) + 40), 50%, 12%));
}
.poster-placeholder::before {
    content: ""; position: absolute; inset: .6rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px;
}
.poster-placeholder-title { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.1; }
.poster-placeholder-year { position: relative; font-size: .8rem; color: rgba(255, 255, 255, .7); letter-spacing: .1em; }
.poster-badge {
    position: absolute; inset-block-start: .6rem; inset-inline-end: .6rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; background: rgba(14, 12, 12, .75); color: var(--gold);
}
.poster-caption { display: flex; flex-direction: column; gap: .1rem; }
.poster-title { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.poster-meta { color: var(--text-faint); font-size: .82rem; }
.poster--lg .poster-caption, .poster--sm .poster-caption { display: none; }
.poster--lg .poster-placeholder-title { font-size: 1.8rem; }
.poster--sm .poster-frame { border-radius: var(--radius-sm); }
.poster--sm .poster-placeholder { padding: .5rem; }
.poster--sm .poster-placeholder::before, .poster--sm .poster-placeholder-year { display: none; }
.poster--sm .poster-placeholder-title { font-size: .72rem; }
.poster--sm .poster-badge { display: none; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(2.5rem, 6vw, 4rem); }
.section--tight { padding-block: 1.5rem; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.section-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); }
.section-sub { margin: .35rem 0 0; color: var(--text-dim); font-size: .92rem; }

.rail {
    display: grid; grid-auto-flow: column; grid-auto-columns: clamp(140px, 17vw, 190px); gap: 1.25rem;
    overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.rail > * { scroll-snap-align: start; }

/* ---------- Today's showtimes ---------- */
.today-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 1rem; }
.today-film {
    display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 1.1rem;
    padding: 1.1rem; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
}
.today-film-title { font-size: 1.15rem; font-family: var(--font-display); }
.today-film-title a:hover { color: var(--gold); }
.today-film-meta { margin: .2rem 0 .8rem; color: var(--text-faint); font-size: .85rem; }
.today-cinemas { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.today-cinemas li { display: grid; gap: .35rem; }
.today-cinema-name { font-size: .88rem; font-weight: 600; color: var(--text-dim); }
.today-cinema-name:hover { color: var(--text); }
.times { display: flex; flex-wrap: wrap; gap: .4rem; }
.time {
    display: inline-flex; align-items: baseline; gap: .3rem;
    padding: .3rem .65rem; border-radius: 6px; font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums;
    background: var(--bg-card); border: 1px solid var(--line);
    direction: ltr;
}
.time small { font-size: .68rem; color: var(--gold); }
.time.is-past { opacity: .38; text-decoration: line-through; text-decoration-thickness: 1px; }

/* ---------- Archive pick ---------- */
.archive-pick {
    display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
    padding: clamp(1.5rem, 4vw, 3rem); border-radius: calc(var(--radius) * 1.5);
    border: 1px solid rgba(242, 193, 78, .25);
    background:
        radial-gradient(ellipse at 100% 0%, rgba(242, 193, 78, .12), transparent 60%),
        linear-gradient(135deg, hsla(var(--hue), 35%, 18%, .6), var(--bg-raised));
}
.archive-pick-title { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.2rem); }
.archive-pick-synopsis { margin: 1rem 0 1.75rem; color: #d8cfc6; max-width: 60ch; }
@media (max-width: 720px) {
    .archive-pick { grid-template-columns: 1fr; }
    .archive-pick-poster { max-width: 180px; }
}

/* ---------- News ---------- */
.news-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: auto; gap: 1.25rem; }
.news-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s; }
.news-card:hover { border-color: rgba(242, 193, 78, .4); }
.news-card--lead { grid-row: span 2; }
.news-card-link { display: flex; flex-direction: column; height: 100%; }
.news-card-media {
    position: relative; display: block; aspect-ratio: 16 / 9;
    background:
        radial-gradient(circle at 75% 30%, hsla(var(--hue), 65%, 50%, .65), transparent 55%),
        linear-gradient(140deg, hsl(var(--hue), 35%, 20%), hsl(calc(var(--hue) + 50), 40%, 10%));
}
.news-card--lead .news-card-media { aspect-ratio: 4 / 3; }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; }
.news-card-body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem 1.2rem; flex: 1; }
.news-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.25; }
.news-card--lead .news-card-title { font-size: 1.6rem; }
.news-card-excerpt { color: var(--text-dim); font-size: .92rem; }
.news-card-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; color: var(--text-faint); font-size: .82rem; }
.stars { color: var(--gold); letter-spacing: .1em; direction: ltr; }
@media (max-width: 900px) {
    .news-grid { grid-template-columns: 1fr 1fr; }
    .news-card--lead { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) { .news-grid { grid-template-columns: 1fr; } }

/* ---------- Festivals & cinemas ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split .section + .section { padding-top: 0; } }

.festival-list, .cinema-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.festival {
    display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem;
    background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
}
.festival:hover { border-color: rgba(242, 193, 78, .4); }
.festival-date {
    display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0;
    min-width: 56px; height: 60px; padding-inline: .45rem; border-radius: 10px; background: var(--red); color: #fff; line-height: 1.05; text-align: center;
}
.festival-day { font-size: 1.4rem; font-weight: 700; font-family: var(--font-display); }
.festival-month { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.festival-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.festival-name { font-weight: 600; }
.festival-meta { color: var(--text-faint); font-size: .85rem; }

.cinema-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.cinema-chip {
    display: flex; flex-direction: column; height: 100%; padding: .85rem 1rem;
    background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
    border-inline-start: 3px solid var(--red);
}
.cinema-chip:hover { border-color: rgba(242, 193, 78, .4); border-inline-start-color: var(--gold); }
.cinema-chip-name { font-weight: 600; font-size: .95rem; }
.cinema-chip-meta { color: var(--text-faint); font-size: .82rem; }

/* ---------- Message pages (coming soon, errors) ---------- */
.message-page {
    min-height: 62vh; display: flex; align-items: center;
    background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(200, 16, 46, .18), transparent 70%);
}
.message-inner { text-align: center; padding-block: 4rem; display: flex; flex-direction: column; align-items: center; }
.message-code { font-family: var(--font-display); font-size: clamp(4rem, 12vw, 7rem); line-height: 1; margin: 0 0 1rem; color: var(--red); }
.message-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); }
.message-body { max-width: 52ch; color: var(--text-dim); margin: 1rem 0 2rem; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 3rem; border-top: 1px solid var(--line); background: #0a0909; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; padding-block: 3rem 2rem; }
.footer-about p { color: var(--text-dim); max-width: 42ch; font-size: .92rem; }
.footer-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); margin-bottom: 1rem; }
[dir="rtl"] .footer-title { letter-spacing: 0; font-size: .9rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-links a { color: var(--text-dim); font-size: .92rem; }
.footer-links a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid var(--line); padding-block: 1.25rem; color: var(--text-faint); font-size: .85rem; }
.footer-bottom p { margin: 0; }
.footer-bottom .footer-credit { margin-top: .4rem; font-size: .78rem; opacity: .8; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }

/* ---------- Inner page header ---------- */
.page-hero {
    position: relative; overflow: hidden; isolation: isolate;
    padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem);
    background: radial-gradient(ellipse 60% 120% at 85% 0%, rgba(200, 16, 46, .22), transparent 70%);
}
[dir="rtl"] .page-hero { background: radial-gradient(ellipse 60% 120% at 15% 0%, rgba(200, 16, 46, .22), transparent 70%); }
.page-title { font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 3.6rem); }
.page-lead { max-width: 60ch; margin: .75rem 0 0; color: var(--text-dim); font-size: 1.05rem; }
.crumbs { margin: 0 0 .75rem; color: var(--text-faint); font-size: .9rem; }
.crumbs a { color: var(--gold); }
.section--flush { padding-top: 1rem; }
.section-title--sm { font-size: 1.3rem; margin-bottom: 1rem; }
.disclaimer { margin: 1.5rem 0 0; color: var(--text-faint); font-size: .85rem; }

/* ---------- Day strip ---------- */
.day-strip {
    display: flex; gap: .5rem; overflow-x: auto; padding: .25rem 0 1rem; margin-bottom: .5rem;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.day {
    display: flex; flex-direction: column; align-items: center; flex: 1 0 96px; padding: .65rem .75rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-raised);
    transition: border-color .15s, background .15s;
}
.day:hover { border-color: rgba(242, 193, 78, .4); }
.day-name { font-weight: 600; font-size: .92rem; white-space: nowrap; }
.day-date { color: var(--text-faint); font-size: .8rem; white-space: nowrap; }
.day.is-active { background: var(--red); border-color: var(--red); }
.day.is-active .day-date { color: rgba(255, 255, 255, .8); }
.day.is-empty:not(.is-active) { opacity: .45; }

/* ---------- Filters ---------- */
.filters {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem;
    padding: 1rem; margin-bottom: 1rem; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
}
.filter { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 135px; min-width: 0; }
.filter-label { font-size: .78rem; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; }
[dir="rtl"] .filter-label { letter-spacing: 0; font-size: .85rem; }
.filter select {
    width: 100%; min-height: 44px; padding: .5rem .75rem; border-radius: var(--radius-sm);
    background: var(--bg-card); color: var(--text); border: 1px solid var(--line); font: inherit; font-size: .95rem;
    color-scheme: dark;
}
.filter select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.filter-actions { display: flex; gap: .5rem; }
.btn-sm { min-height: 44px; padding: .5rem 1rem; font-size: .9rem; }
.js .filters [data-autosubmit-hide] { display: none; }

/* ---------- Showtime blocks ---------- */
.today-cinema-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.book-link { font-size: .8rem; font-weight: 600; color: var(--gold); white-space: nowrap; }
.book-link::after { content: " ↗"; }
.book-link:hover { color: #ffd77a; }

/* ---------- Cinema directory ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chip {
    padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-raised);
    font-size: .9rem; font-weight: 500; color: var(--text-dim);
}
.chip:hover { color: var(--text); border-color: rgba(242, 193, 78, .4); }
.chip.is-active { background: var(--text); color: var(--bg); border-color: var(--text); }
.city-title { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem; }
.city-count { font-family: var(--font-body); font-size: .8rem; font-weight: 600; color: var(--text-faint); padding: .1rem .55rem; border: 1px solid var(--line); border-radius: 999px; }
.cinema-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.cinema-card { display: flex; flex-direction: column; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s, transform .2s; }
.cinema-card:hover { border-color: rgba(242, 193, 78, .4); transform: translateY(-2px); }
.cinema-card-media {
    position: relative; display: block; aspect-ratio: 16 / 7;
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 18px),
        radial-gradient(circle at 70% 20%, hsla(var(--hue), 60%, 45%, .6), transparent 60%),
        linear-gradient(135deg, hsl(var(--hue), 30%, 18%), #140f0f);
}
.cinema-card-media img { width: 100%; height: 100%; object-fit: cover; }
.cinema-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: 1rem 1.1rem 1.15rem; flex: 1; }
.cinema-card-name { font-weight: 700; font-size: 1.05rem; }
.cinema-card-city { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
[dir="rtl"] .cinema-card-city { letter-spacing: 0; font-size: .85rem; }
.chip-row--quiet .chip { font-size: .82rem; padding: .35rem .85rem; }
.cinema-card-address { color: var(--text-faint); font-size: .88rem; }
.cinema-card-body .pill { margin-top: auto; }

.cinema-hero { padding-bottom: 2rem; }
.cinema-facts { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 1rem 0 1.5rem; padding: 0; color: var(--text-dim); }
.cinema-facts li + li::before { content: "·"; margin-inline-end: 1.25rem; color: var(--text-faint); }
.cinema-facts a { color: var(--gold); }

/* ---------- Header search ---------- */
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: 50%; color: var(--text-dim); border: 1px solid transparent;
}
.icon-btn:hover, .icon-btn[aria-current="page"] { color: var(--text); border-color: var(--line); }

/* ---------- Film grids & filters ---------- */
.poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(45%, 165px), 1fr)); gap: 1.75rem 1.25rem; }
.filter--search { flex: 2 1 220px; }
.filter input[type="search"] {
    width: 100%; min-height: 44px; padding: .5rem .75rem; border-radius: var(--radius-sm);
    background: var(--bg-card); color: var(--text); border: 1px solid var(--line); font: inherit; font-size: .95rem;
}
.filter input[type="search"]:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.filter--check { flex-direction: row; align-items: center; gap: .5rem; flex: 0 1 auto; min-height: 44px; cursor: pointer; font-size: .92rem; }
.filter--check input { width: 18px; height: 18px; accent-color: var(--red); }
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
.pager-status { color: var(--text-dim); font-size: .9rem; }
.chip--sm { padding: .25rem .75rem; font-size: .82rem; }

/* ---------- Film page ---------- */
.other-title { margin: .35rem 0 0; color: var(--text-dim); font-size: 1.15rem; }
.other-title:lang(ar) { font-family: "Noto Kufi Arabic", sans-serif; }
.other-title:lang(en) { font-family: "Fraunces", Georgia, serif; }
.hero-director a { color: var(--gold); }
.genre-list { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; padding: 0; }
.film-hero .hero-synopsis { margin-top: 1.25rem; }
.film-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(1.5rem, 4vw, 3.5rem); padding-top: 1.5rem; }
@media (max-width: 900px) { .film-body { grid-template-columns: 1fr; } .film-aside { order: -1; } }
.film-aside { display: flex; flex-direction: column; gap: 1.5rem; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1rem; margin: 0; padding: 1.25rem; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); font-size: .92rem; }
.facts dt { color: var(--text-faint); }
.facts dd { margin: 0; }
.facts a { color: var(--text); border-bottom: 1px solid rgba(242, 193, 78, .4); }
.facts a:hover { color: var(--gold); }
.aside-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); margin-bottom: .75rem; }
[dir="rtl"] .aside-title { letter-spacing: 0; font-size: .9rem; }
.aside-block .chip-row { list-style: none; padding: 0; }

.schedule { display: grid; gap: 1rem; }
.schedule-day { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 1rem; padding: 1rem; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); }
.schedule-date { font-size: 1rem; display: flex; flex-direction: column; }
.schedule-date span { color: var(--text-faint); font-weight: 400; font-size: .85rem; }
@media (max-width: 560px) { .schedule-day { grid-template-columns: 1fr; gap: .5rem; } .schedule-date { flex-direction: row; gap: .5rem; align-items: baseline; } }

.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid var(--line); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.cast-grid, .people-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(45%, 140px), 1fr)); gap: 1.25rem 1rem; }
.cast-card, .person-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; }
.cast-card:hover .cast-name, .person-card:hover .cast-name { color: var(--gold); }
.cast-name { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.cast-role { color: var(--text-faint); font-size: .82rem; }

.avatar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, hsla(var(--hue), 55%, 55%, .9), transparent 60%), linear-gradient(150deg, hsl(var(--hue), 35%, 26%), #171111);
    color: rgba(255, 255, 255, .9); font-family: "Fraunces", Georgia, serif; font-weight: 700; letter-spacing: .02em;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--md { width: 88px; height: 88px; font-size: 1.5rem; }
.avatar--lg { width: 112px; height: 112px; font-size: 1.9rem; }
.avatar--xl { width: clamp(110px, 18vw, 168px); height: clamp(110px, 18vw, 168px); font-size: 2.6rem; }

.article-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.article-list a { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; padding: .85rem 1rem; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.article-list a:hover { border-color: rgba(242, 193, 78, .4); }
.article-list-type { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.article-list-title { font-weight: 600; flex: 1; min-width: 12rem; }
.article-list time { color: var(--text-faint); font-size: .85rem; }

/* ---------- Archive ---------- */
.archive-hero { background: radial-gradient(ellipse 70% 120% at 80% 0%, rgba(242, 193, 78, .14), transparent 70%), radial-gradient(ellipse 50% 90% at 10% 100%, rgba(200, 16, 46, .15), transparent 70%); }
.archive-search { display: flex; gap: .5rem; margin-top: 1.75rem; max-width: 560px; }
.archive-search input {
    flex: 1; min-width: 0; min-height: 50px; padding: .6rem 1rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--bg-raised); color: var(--text); font: inherit; font-size: 1rem;
}
.archive-search input:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.page-hero .section-sub { margin-top: 1rem; }

.decade-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.decade {
    display: flex; flex-direction: column; padding: 1rem 1.1rem; border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(242, 193, 78, .1), transparent), var(--bg-raised); border: 1px solid var(--line);
}
.decade:hover { border-color: rgba(242, 193, 78, .5); }
.decade-label { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--gold); line-height: 1.1; }
.decade-count { color: var(--text-faint); font-size: .85rem; }

.collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; }
.collection-card { display: flex; flex-direction: column; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s, transform .2s; }
.collection-card:hover { border-color: rgba(242, 193, 78, .45); transform: translateY(-2px); }
.collection-stack { position: relative; display: block; height: 170px; background: linear-gradient(160deg, #221919, #120e0e); overflow: hidden; }
.collection-stack-item {
    position: absolute; top: 22px; width: 92px; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden;
    inset-inline-start: calc(24px + var(--i) * 70px); transform: rotate(calc((var(--i) - 1) * 5deg));
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .9);
    background: radial-gradient(circle at 30% 25%, hsla(var(--hue), 70%, 55%, .9), transparent 55%), linear-gradient(160deg, hsl(var(--hue), 45%, 28%), hsl(calc(var(--hue) + 40), 50%, 12%));
    display: flex; align-items: flex-end; padding: .4rem; font-family: "Fraunces", Georgia, serif; font-size: .7rem; font-weight: 700; line-height: 1.1;
}
[dir="rtl"] .collection-stack-item { font-family: "Noto Kufi Arabic", sans-serif; transform: rotate(calc((1 - var(--i)) * 5deg)); }
.collection-stack-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.collection-body { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.2rem 1.25rem; flex: 1; }
.collection-title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }
.collection-desc { color: var(--text-dim); font-size: .9rem; }
.collection-count { margin-top: auto; color: var(--gold); font-size: .85rem; font-weight: 600; }

.collection-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.collection-item {
    display: grid; grid-template-columns: 48px 90px minmax(0, 1fr); gap: 1.25rem; align-items: start;
    padding: 1.25rem; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
}
.collection-number { font-family: "Fraunces", Georgia, serif; font-size: 2.2rem; font-weight: 700; color: var(--gold); line-height: 1; }
.collection-item-title { font-family: var(--font-display); font-size: 1.35rem; }
.collection-item-title a:hover { color: var(--gold); }
.collection-item-synopsis { margin: .5rem 0 0; color: var(--text-dim); max-width: 70ch; }
@media (max-width: 560px) { .collection-item { grid-template-columns: 70px minmax(0, 1fr); } .collection-number { display: none; } }

/* ---------- Person page ---------- */
.person-head { display: flex; align-items: center; gap: clamp(1.25rem, 4vw, 2.5rem); }
@media (max-width: 560px) { .person-head { flex-direction: column; align-items: flex-start; } }
.bio { max-width: 70ch; font-size: 1.05rem; color: #d8cfc6; margin: 0; }
.filmography-role { font-size: 1rem; margin: 1.5rem 0 .75rem; display: flex; align-items: center; gap: .5rem; }
.filmography { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.filmography li { display: flex; align-items: baseline; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.filmography-year { width: 3.5rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.filmography-title { font-weight: 600; }
.filmography-title:hover { color: var(--gold); }
.filmography-character { color: var(--text-faint); font-size: .9rem; }

/* ---------- News & articles ---------- */
.container--narrow { max-width: 780px; }
.news-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.25rem; }
.news-list-grid .news-card--lead { grid-column: 1 / -1; grid-row: auto; }
.news-list-grid .news-card--lead .news-card-link { flex-direction: row; }
.news-list-grid .news-card--lead .news-card-media { flex: 1.3; aspect-ratio: auto; min-height: 280px; }
.news-list-grid .news-card--lead .news-card-body { flex: 1; justify-content: center; padding: 1.75rem; }
@media (max-width: 760px) {
    .news-list-grid .news-card--lead .news-card-link { flex-direction: column; }
    .news-list-grid .news-card--lead .news-card-media { aspect-ratio: 16 / 9; min-height: 0; }
}
.feed-link { margin: 1rem 0 0; font-size: .9rem; }
.feed-link a { color: var(--gold); }

.article-hero { padding-bottom: 1.5rem; background: radial-gradient(ellipse 70% 120% at 50% 0%, hsla(var(--hue), 50%, 30%, .35), transparent 70%); }
.article-title { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.12; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin: 1.25rem 0 0; color: var(--text-faint); font-size: .92rem; }
.article-cover { margin: 0 0 2rem; border-radius: var(--radius); overflow: hidden; background: var(--bg-card); }
.article-cover img { width: 100%; max-height: 460px; object-fit: cover; }
.preview-banner { background: var(--gold); color: #1a1408; text-align: center; padding: .6rem var(--gutter); font-weight: 600; font-size: .92rem; }

.prose { font-size: 1.1rem; line-height: 1.8; color: #e4dbd2; }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { font-family: var(--font-display); font-size: 1.6rem; margin-top: 2.25rem; color: var(--text); }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { padding-inline-start: 1.4rem; }
.prose li + li { margin-top: .4rem; }
.prose[lang="ar"] { font-family: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif; line-height: 2; }
.prose[lang="en"] { font-family: "Inter", system-ui, sans-serif; }

.article-film {
    display: flex; gap: 1.25rem; align-items: center; margin-top: 2.5rem; padding: 1.25rem;
    background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
}
.article-film-poster { width: 84px; flex-shrink: 0; }
.article-film .eyebrow { margin-bottom: .35rem; }
.article-film-title { font-family: var(--font-display); font-size: 1.35rem; margin-bottom: .25rem; }
.article-film-title a:hover { color: var(--gold); }
.article-film .today-film-meta { margin-bottom: .75rem; }
.article-festival { margin: 1.5rem 0 0; color: var(--text-dim); }
.article-festival a { color: var(--gold); font-weight: 600; }

/* ---------- Festivals ---------- */
.festival-list--wide { max-width: 760px; }
.festival-hero { background: radial-gradient(ellipse 70% 130% at 85% 0%, hsla(var(--hue), 55%, 32%, .45), transparent 70%), radial-gradient(ellipse 50% 90% at 5% 100%, rgba(242, 193, 78, .12), transparent 70%); }
[dir="rtl"] .festival-hero { background: radial-gradient(ellipse 70% 130% at 15% 0%, hsla(var(--hue), 55%, 32%, .45), transparent 70%), radial-gradient(ellipse 50% 90% at 95% 100%, rgba(242, 193, 78, .12), transparent 70%); }

/* ---------- Newsletter ---------- */
.newsletter { margin-top: 4rem; padding-block: clamp(2rem, 5vw, 3rem); border-block: 1px solid var(--line); background: linear-gradient(135deg, rgba(200, 16, 46, .14), transparent 60%), var(--bg-raised); }
.newsletter-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 1.5rem 3rem; align-items: center; }
@media (max-width: 760px) { .newsletter-inner { grid-template-columns: minmax(0, 1fr); } }
.newsletter-title { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: .4rem; }
.newsletter-copy p { margin: 0; color: var(--text-dim); max-width: 48ch; }
.newsletter-form { display: flex; gap: .5rem; }
.newsletter-form input[type="email"] {
    flex: 1; min-width: 0; min-height: 50px; padding: .6rem 1.1rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: 1rem;
}
.newsletter-form input[aria-invalid="true"] { border-color: var(--red-bright); }
.newsletter-form input:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.newsletter-note { margin: .6rem 0 0; font-size: .92rem; }
.newsletter-note--ok { margin: 0; color: #9fe6c1; font-weight: 600; }
.newsletter-note--error { color: #ff9aa9; }
/* Anti-bot field: hidden by clipping, not by moving it off-screen (that makes RTL pages scroll sideways) */
.hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; pointer-events: none; }
.site-footer { margin-top: 0; }

/* ---------- Phase 5: accounts, forms ---------- */
.site-notice { background: rgba(63, 191, 127, .12); border-bottom: 1px solid rgba(63, 191, 127, .35); color: #b7efd0; padding-block: .7rem; font-size: .95rem; text-align: center; }
.auth-page { display: grid; place-items: start center; padding: clamp(2rem, 6vw, 4rem) var(--gutter); min-height: 60vh; }
.auth-card { width: 100%; max-width: 440px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 18px; padding: clamp(1.5rem, 4vw, 2.25rem); }
.auth-title { font-family: var(--font-display); font-size: 1.9rem; margin-bottom: .5rem; }
.auth-lead { margin: 0 0 1.5rem; color: var(--text-dim); }
.auth-alt { margin: 1.25rem 0 0; color: var(--text-dim); font-size: .95rem; text-align: center; }
.auth-alt a, .auth-fine a { color: var(--gold); }
.auth-fine { margin: .5rem 0 0; color: var(--text-faint); font-size: .85rem; text-align: center; }
.auth-card form, .form-stack { display: grid; gap: 1rem; }

.form-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.form-field > label, .form-field > legend { font-weight: 600; font-size: .92rem; padding: 0; }
.form-field .req { color: var(--red-bright); }
.form-field input:not([type="checkbox"]):not([type="radio"]), .form-field select, .form-field textarea {
    width: 100%; min-height: 46px; padding: .6rem .85rem; border-radius: var(--radius-sm);
    background: var(--bg); color: var(--text); border: 1px solid var(--line); font: inherit; font-size: 1rem; color-scheme: dark;
}
.form-field textarea { resize: vertical; line-height: 1.6; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: var(--red-bright); }
.form-field--check label { display: flex; align-items: flex-start; gap: .65rem; font-weight: 500; cursor: pointer; line-height: 1.45; }
.form-field--check input { width: 20px; height: 20px; margin-top: .1rem; flex-shrink: 0; accent-color: var(--red); }
.field-help { margin: 0; color: var(--text-faint); font-size: .85rem; }
.field-error { margin: 0; color: #ff9aa9; font-size: .88rem; }
.form-alert { padding: .75rem 1rem; border-radius: var(--radius-sm); background: rgba(232, 48, 75, .12); border: 1px solid rgba(232, 48, 75, .45); color: #ffb3bf; }
.form-alert--ok { background: rgba(60, 170, 110, .12); border-color: rgba(60, 170, 110, .5); color: #b6ecd0; }
.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .5rem 1rem; padding: .25rem 0; }
.check-inline { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; cursor: pointer; }
.check-inline input { width: 18px; height: 18px; accent-color: var(--red); }
.link-quiet { background: none; border: 0; padding: 0; color: var(--text-faint); font: inherit; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-quiet:hover { color: var(--text); }
.danger-row { margin-top: 1.25rem; text-align: center; }
.btn-danger { color: #ff9aa9; border-color: rgba(232, 48, 75, .5); }

.panel-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.panel-card h2 { font-size: 1.1rem; margin-bottom: .75rem; }
.panel-card--danger { border-color: rgba(232, 48, 75, .35); }
.settings-stack { display: grid; gap: 1.25rem; padding-block: 1.5rem 2rem; }
.account-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.account-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.account-actions form { margin: 0; }
.rated-poster { display: flex; flex-direction: column; gap: .35rem; }
.mini-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.mini-list li { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.mini-list li form { margin: 0; }
.mini-title { flex: 1; min-width: 8rem; font-weight: 600; }
.mini-title a:hover { color: var(--gold); }
.mini-action { background: none; border: 0; padding: 0; color: var(--gold); font: inherit; font-size: .88rem; cursor: pointer; }
.mini-action--danger { color: #ff9aa9; }
.badge { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--bg-card); color: var(--text-dim); border: 1px solid var(--line); }
.badge--approved, .badge--published { background: rgba(63, 191, 127, .14); color: #8fe0b6; border-color: rgba(63, 191, 127, .35); }
.badge--pending, .badge--draft { background: rgba(242, 193, 78, .12); color: var(--gold); border-color: rgba(242, 193, 78, .35); }
.badge--rejected { background: rgba(232, 48, 75, .12); color: #ff9aa9; border-color: rgba(232, 48, 75, .35); }
.muted { color: var(--text-faint); }

/* ---------- Film page: my film, ratings, reviews ---------- */
.my-film { padding: 1.25rem; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 1rem; }
.my-film .aside-title { margin: 0; }
.my-film form { display: grid; gap: .85rem; margin: 0; }
.my-film .btn.is-on { border-color: rgba(63, 191, 127, .55); color: #9fe6c1; }
.rating-field { border: 0; margin: 0; padding: 0; display: grid; gap: .35rem; }
.rating-field legend { font-weight: 600; font-size: .92rem; padding: 0; margin-bottom: .25rem; }
.star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; direction: ltr; width: max-content; }
.star-input label { font-size: 1.9rem; line-height: 1; color: var(--line); cursor: pointer; padding: .1rem .15rem; transition: color .1s; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: var(--gold); }
.star-input input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.rating-clear { font-size: .85rem; color: var(--text-faint); display: inline-flex; gap: .4rem; align-items: center; cursor: pointer; }
.hero-rating { margin: .5rem 0 0; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.hero-rating .stars { font-size: 1.1rem; }
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.review { padding: 1rem 1.1rem; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.review-head { margin: 0 0 .4rem; display: flex; gap: .5rem 1rem; flex-wrap: wrap; align-items: baseline; font-size: .92rem; }
.review-text { margin: 0; color: #e4dbd2; }
.stars-line { font-size: .88rem; }

/* ---------- Directory, jobs, hub ---------- */
.pro-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.pro-card { display: flex; gap: 1rem; align-items: flex-start; height: 100%; padding: 1rem; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); }
.pro-card:hover { border-color: rgba(242, 193, 78, .4); }
.pro-card-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pro-name { font-weight: 700; font-size: 1.05rem; }
.pro-roles { color: var(--gold); font-size: .85rem; font-weight: 600; }
.pro-headline { color: var(--text-dim); font-size: .9rem; overflow-wrap: anywhere; }
.pro-meta { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .25rem; color: var(--text-faint); font-size: .85rem; }

.job-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.job { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .9rem 1.1rem; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); }
.job:hover { border-color: rgba(242, 193, 78, .4); }
.job-type { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .25rem .6rem; border-radius: 6px; text-align: center; background: var(--bg-card); color: var(--text-dim); }
[dir="rtl"] .job-type { letter-spacing: 0; font-size: .85rem; }
.job-type--casting { background: rgba(200, 16, 46, .2); color: #ff9aa9; }
.job-type--crew { background: rgba(242, 193, 78, .15); color: var(--gold); }
.job-type--internship { background: rgba(63, 191, 127, .15); color: #8fe0b6; }
.job-body { display: flex; flex-direction: column; min-width: 0; }
.job-title { font-weight: 700; overflow-wrap: anywhere; }
.job-meta { color: var(--text-faint); font-size: .88rem; }
.job-deadline { color: var(--text-dim); font-size: .85rem; white-space: nowrap; }
@media (max-width: 640px) { .job { grid-template-columns: 1fr; gap: .4rem; } .job-type { justify-self: start; } }
.apply-box { margin-top: 2rem; display: grid; gap: .75rem; justify-items: start; }
.apply-box p { margin: 0; overflow-wrap: anywhere; }

.hub-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin-top: 1.5rem; }
.hub-card { display: flex; flex-direction: column; gap: .3rem; padding: 1.25rem; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); }
.hub-card:hover { border-color: rgba(242, 193, 78, .5); }
.hub-card-count { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--gold); line-height: 1; }
.hub-card-title { font-weight: 700; font-size: 1.1rem; }
.hub-card-text { color: var(--text-dim); font-size: .92rem; }

/* ---------- Phase 6: watch ---------- */
.container--wide { max-width: 1000px; }
.watch-poster { display: flex; flex-direction: column; gap: .6rem; }
.watch-badge { align-self: flex-start; padding: .3rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 700; background: var(--gold); color: #1a1408; }
.watch-badge--free { background: rgba(63, 191, 127, .2); color: #9fe6c1; border: 1px solid rgba(63, 191, 127, .5); }
.video-frame--player { margin-top: 1.5rem; box-shadow: var(--shadow); }
.watch-expiry { margin: .75rem 0 0; color: var(--text-dim); font-size: .92rem; }
.watch-synopsis { margin-top: 1.5rem; }
.rent-box { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 2.5rem); margin-top: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--bg-raised); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.4); }
@media (max-width: 640px) { .rent-box { grid-template-columns: 1fr; } .rent-poster { max-width: 160px; } }
.rent-body { display: grid; gap: 1rem; align-content: start; }
.rent-body form { margin: 0; }
.rent-price { margin: 0; font-family: var(--font-display); font-size: 2rem; font-weight: 700; }
.rent-price .muted { font-family: var(--font-body); font-size: 1rem; font-weight: 400; }
.rent-terms { margin: 0; padding-inline-start: 1.2rem; color: var(--text-dim); font-size: .95rem; display: grid; gap: .3rem; }

/* Small screens: keep logo, search, account, language and menu on one line */
@media (max-width: 480px) {
    .header-inner { gap: .5rem; }
    .brand { gap: .4rem; min-width: 0; }
    .brand-text { font-size: 1rem; white-space: nowrap; }
    .header-actions { gap: .2rem; flex-shrink: 0; }
    .icon-btn, .menu-toggle { width: 36px; height: 36px; }
    .lang-switch { padding: .3rem .55rem; font-size: .82rem; }
}
@media (max-width: 360px) {
    .brand-text { display: none; }
}

.people-search { display: flex; gap: .5rem; margin: 0 0 1rem; max-width: 420px; }
.people-search input { flex: 1; min-width: 0; }