/* ============================================================================
   film.css - مشغّل الإعلان السينمائي (film.js): المسرح 16:9، زر التشغيل الكبير، شريط التحكم، مؤشر التسجيل، وصفحة الفيلم المستقلة
   EN: The cinematic ad player (film.js): 16:9 stage, big play button, control bar, recording indicator, and the standalone film page
   ----------------------------------------------------------------------------
   أسود دافئ وذهبي بلا تدرّج (قاعدة 8)، والإطار الذهبي الرفيع حول المسرح هو "الفخامة" لا الزخرفة.
   ============================================================================ */
.film { --f-gold: #C9A227; --f-gold-l: #E6C75A; --f-ink: #0B0A08; --f-panel: #15130F; --f-line: #3A342A; --f-text: #F3F1EC; --f-muted: #B3AEA2;
        background: var(--f-ink); border: 1px solid var(--f-line); border-radius: 18px; overflow: hidden; color: var(--f-text);
        box-shadow: 0 0 0 1px rgba(201, 162, 39, .25), 0 24px 60px rgba(0, 0, 0, .35); outline: none; }
.film-stage { position: relative; aspect-ratio: 16 / 9; background: var(--f-ink); }
.film-stage canvas { display: block; width: 100%; height: 100%; }
.film-big { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .7rem;
            padding: .55rem 1.6rem .55rem 1.2rem; border-radius: 999px; border: 2px solid var(--f-gold); background: rgba(11, 10, 8, .72);
            color: var(--f-gold-l); font: 800 clamp(.95rem, 1.6vw, 1.25rem) "Cairo", system-ui, sans-serif; cursor: pointer; white-space: nowrap;
            box-shadow: 0 0 0 10px rgba(201, 162, 39, .12), 0 0 40px rgba(201, 162, 39, .35); transition: transform .25s, box-shadow .25s; }
.film-big:hover, .film-big:focus-visible { transform: translateX(-50%) scale(1.05); box-shadow: 0 0 0 14px rgba(201, 162, 39, .16), 0 0 60px rgba(201, 162, 39, .5); }
.film-big[hidden] { display: none; }
.film-big .bi { font-size: 1.7em; line-height: 1; color: var(--f-gold); }
[dir="rtl"] .film-big .bi-play-fill { transform: scaleX(-1); }
.film-rec { position: absolute; top: 14px; inset-inline-start: 14px; display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: 999px;
            background: rgba(11, 10, 8, .8); border: 1px solid #E5484D; color: #fff; font-size: .82rem; font-weight: 700; }
.film-rec[hidden] { display: none; }
/* زر "اضغط لتشغيل الصوت": يظهر حين يعمل الفيلم تلقائياً صامتاً (المتصفح يمنع الصوت قبل أول نقرة) */
.film-sound { position: absolute; top: 14px; inset-inline-end: 14px; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem;
              border-radius: 999px; border: 1px solid var(--f-gold); background: rgba(11, 10, 8, .78); color: var(--f-gold-l);
              font: 700 .85rem "Cairo", system-ui, sans-serif; cursor: pointer; }
.film-sound:hover, .film-sound:focus-visible { background: var(--f-gold); color: var(--f-ink); }
.film-sound[hidden] { display: none; }
.film-rec .dot { width: 10px; height: 10px; border-radius: 50%; background: #E5484D; animation: film-blink 1s steps(2) infinite; }
@keyframes film-blink { 50% { opacity: .2; } }
.film-bar { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; background: var(--f-panel); border-top: 1px solid var(--f-line); flex-wrap: wrap; }
.film-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--f-line); background: transparent; color: var(--f-text);
            display: inline-grid; place-items: center; cursor: pointer; font-size: 1.05rem; flex-shrink: 0; }
.film-btn:hover, .film-btn:focus-visible { border-color: var(--f-gold); color: var(--f-gold-l); }
.film-btn.on { color: var(--f-gold-l); border-color: var(--f-gold); }
.film-btn:disabled { opacity: .45; cursor: progress; }
.film-time { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; color: var(--f-muted); min-width: 92px; text-align: center; }
.film-range { flex: 1 1 160px; min-width: 120px; accent-color: var(--f-gold); cursor: pointer; }
.film-link { display: inline-flex; align-items: center; gap: .3rem; color: var(--f-gold-l); font-weight: 700; font-size: .85rem; text-decoration: none; padding: 0 .3rem; white-space: nowrap; }
.film-link:hover { text-decoration: underline; }
.film.is-recording .film-range, .film.is-recording .film-btn:not(:first-child) { pointer-events: none; opacity: .5; }
/* ملء الشاشة: المسرح يملأ ما فوق شريط التحكم */
.film:fullscreen { display: flex; flex-direction: column; border-radius: 0; border: 0; }
.film:fullscreen .film-stage { flex: 1 1 auto; aspect-ratio: auto; display: grid; place-items: center; }
.film:fullscreen .film-stage canvas { width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: 16 / 9; }

/* ---------------- قسم الإعلان في الصفحة التعريفية ---------------- */
.film-sec .film-wrap { max-width: 1100px; margin-inline: auto; }
.film-sec .film-meta { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; margin-top: .9rem; color: var(--muted, #5F6672); font-size: .9rem; font-weight: 700; }
.film-sec .film-meta i { color: var(--gold, #C9A227); }

/* ---------------- صفحة الفيلم المستقلة (film.html) ---------------- */
body.film-page { margin: 0; min-height: 100vh; background: #0B0A08; color: #F3F1EC; font-family: "Cairo", system-ui, "Segoe UI", sans-serif;
                 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 16px; box-sizing: border-box; }
.film-page .fp-head { width: min(1280px, 100%); display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.film-page .fp-logo { display: block; line-height: 0; direction: ltr; }
.film-page .fp-logo img { height: 36px; width: auto; display: block; }
.film-page .fp-head h1 { font-size: clamp(1.1rem, 2.4vw, 1.6rem); margin: 0; font-weight: 900; }
.film-page .fp-head h1 b { color: #C9A227; }
.film-page .fp-head .sp { flex: 1; }
.film-page .fp-lang { border: 1px solid #3A342A; background: transparent; color: #F3F1EC; border-radius: 10px; height: 38px; min-width: 44px; font: inherit; font-weight: 800; cursor: pointer; }
.film-page .fp-lang:hover { border-color: #C9A227; color: #E6C75A; }
.film-page #player { width: min(1280px, 100%); }
.film-page .fp-note { color: #B3AEA2; font-size: .85rem; text-align: center; max-width: 820px; margin: 0; }

@media (prefers-reduced-motion: reduce) { .film-big { transition: none; } .film-rec .dot { animation: none; } }
@media (max-width: 560px) { .film-time { min-width: 0; } .film-big { padding: .35rem 1rem .35rem .8rem; } }