/* ================================================================
   css-theme-vars-EN.css
   central color system, DARK theme only. Neutral, near-black
   background (not pure black), slightly lighter elevated surfaces
   for cards/menus. All borders are zero-width by decision - border
   color/variables are kept for other uses (outline, ring box-shadow,
   etc) but no border line is ever actually drawn.
   ================================================================ */

:root {
    /* typography: one family for the whole site (Inter, self-hosted - see fonts-EN.css) */
    --font-sans: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    /* backgrounds: neutral dark base, with slightly lighter surfaces
       for elevation. Never pure black (#000) for the page background. */
    --bg-black: #121214;
    --bg-gray: #1a1a1d;
    --bg-base: #121214;
    --bg-elevated: #1c1c1f;
    --bg-elevated-2: #232326;
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.12);

    --text-primary: #f2f2f3;
    --text-secondary: rgba(242, 242, 243, 0.65);
    --text-muted: rgba(242, 242, 243, 0.45);

    /* main accent/brand color: red, used for buttons/badges/filled surfaces
       (always with white text, high contrast). */
    --accent: #d01b1b;
    --accent-hover: #e13333;
    --accent-dark: #a91515;
    --accent-soft: rgba(208, 27, 27, 0.14);
    --accent-glow: rgba(208, 27, 27, 0.28);
    --accent-contrast: #ffffff;
    --accent-gradient-2: #e13333;

    /* accent text variant - a slightly lighter/brighter red so it stays
       readable on dark surfaces (small text/icons, not full button
       bodies) */
    --accent-text: #e8474a;
    --accent-text-hover: #ef6567;

    /* semantic button colors: blue = login/info, green = purchase/success,
       red = brand accent (shared with --accent) */
    --btn-blue: #0f5ca3;
    --btn-blue-hover: #1670c2;
    /* blue for TEXT/icons on the dark background (--btn-blue is only meant for button fills: ~2.6:1 as text) */
    --blue-text: #5eabf0;
    --btn-green: #0b6f2c;
    --btn-green-hover: #0d8636;
    --btn-red: #d01b1b;
    --btn-red-hover: #e13333;
    --btn-red-soft: #4a2323;
    --btn-orange: #d97a1f;
    --btn-yellow: #c99a1a;

    /* error/warning red, kept separate from the brand accent */
    --danger: #e8474a;
    --danger-dark: #c0392b;
    --danger-soft: rgba(232, 71, 74, 0.14);

    --overlay-strong: rgba(0, 0, 0, 0.75);
    --overlay-mid: rgba(0, 0, 0, 0.45);
    --overlay-soft: rgba(0, 0, 0, 0.1);

    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.8);

    /* always-dark surface for video/media chrome (player container,
       fullscreen story modal, poster ring borders) - on this theme it's
       simply the same near-black base, but kept as its own token so
       these elements never depend on --bg-black changing meaning. */
    --media-black: #0c0c0d;

    /* subscription plan colors, one per plan for visual distinction */
    --plan-1: #0f5ca3;
    --plan-2: #b3095a;
    --plan-3: #c99a1a;
    --plan-4: #6d3fc4;

    /* surface overlay layers - white-on-dark, for text/icons/borders that
       sit directly on the dark page/card background */
    --on-surface-02: rgba(255, 255, 255, 0.02);
    --on-surface-03: rgba(255, 255, 255, 0.03);
    --on-surface-04: rgba(255, 255, 255, 0.04);
    --on-surface-05: rgba(255, 255, 255, 0.05);
    --on-surface-06: rgba(255, 255, 255, 0.06);
    --on-surface-07: rgba(255, 255, 255, 0.07);
    --on-surface-08: rgba(255, 255, 255, 0.08);
    --on-surface-10: rgba(255, 255, 255, 0.1);
    --on-surface-12: rgba(255, 255, 255, 0.12);
    --on-surface-15: rgba(255, 255, 255, 0.15);
    --on-surface-20: rgba(255, 255, 255, 0.2);
    --on-surface-25: rgba(255, 255, 255, 0.25);
    --on-surface-30: rgba(255, 255, 255, 0.3);
    --on-surface-35: rgba(255, 255, 255, 0.35);
    --on-surface-40: rgba(255, 255, 255, 0.4);
    --on-surface-45: rgba(255, 255, 255, 0.45);
    --on-surface-50: rgba(255, 255, 255, 0.5);
    --on-surface-60: rgba(255, 255, 255, 0.6);
    --on-surface-65: rgba(255, 255, 255, 0.65);
    --on-surface-70: rgba(255, 255, 255, 0.7);
    --on-surface-75: rgba(255, 255, 255, 0.75);
    --on-surface-80: rgba(255, 255, 255, 0.8);
    --on-surface-85: rgba(255, 255, 255, 0.85);

    /* ================================================================
       header background (desktop + mobile) - a distinct, slightly
       lighter shade than the page background (not a near-match), since
       the header is fixed and always overlaid on scrolling content
       below it. Fully opaque at rest; --header-bg-scrolled adds a touch
       more depth (shadow-backed) once the page has scrolled past it.
       ================================================================ */
    --header-bg: #1a1a1f;
    --header-bg-scrolled: #17171b;

    /* film/series title text color on cards - light text, cards sit on
       dark/image surfaces */
    --card-title-color: #ffffff;

    /* button text color (on the colored button body) - stays white */
    --btn-text-color: #ffffff;

    /* ================================================================
       header - full control per piece (logo, menu, buttons, search, language)
       ================================================================ */

    /* logo size (the image itself is uploaded elsewhere) */
    --logo-width: auto;
    --logo-height: 38px;
    --logo-height-mobile: 32px;

    /* main desktop menu (header center links) */
    --menu-text-color: rgba(255, 255, 255, 0.85);
    --menu-text-hover-color: #ffffff;
    --menu-hover-bg: rgba(255, 255, 255, 0.08);

    /* category dropdown submenu */
    --submenu-text-color: #cfcfd2;
    --submenu-text-hover-color: #ffffff;
    --submenu-hover-bg: var(--accent-soft);

    /* login button (blue) */
    --btn-login-bg: var(--btn-blue);
    --btn-login-hover-bg: var(--btn-blue-hover);
    --btn-login-text: #ffffff;

    /* account panel button (red/brand) */
    --btn-panel-bg: var(--btn-red);
    --btn-panel-hover-bg: var(--btn-red-hover);
    --btn-panel-text: #ffffff;

    /* buy subscription button (green) */
    --btn-subscribe-bg: var(--btn-green);
    --btn-subscribe-hover-bg: var(--btn-green-hover);
    --btn-subscribe-text: #ffffff;

    /* search icon (separate from other header icon-btns like app download) */
    --search-icon-color: rgba(255, 255, 255, 0.7);
    --search-icon-hover-color: #ffffff;
    --search-icon-hover-bg: rgba(255, 255, 255, 0.1);

    /* language icon + its dropdown */
    --lang-icon-color: rgba(255, 255, 255, 0.7);
    --lang-icon-hover-color: #ffffff;
    --lang-icon-hover-bg: rgba(255, 255, 255, 0.1);
    --lang-menu-text-color: #cfcfd2;
    --lang-menu-hover-bg: var(--accent-soft);
    --lang-menu-hover-text: var(--accent-text);
    --lang-menu-active-bg: var(--accent);
    --lang-menu-active-text: var(--accent-contrast);

    /* ================================================================
       homepage - overall width, spacing, section colors, filters, stories
       ================================================================ */

    /* overall content width for header and homepage (formerly container-1700) */
    --site-content-width: 1700px;

    /* spacing */
    --section-gap: 44px;
    /* gap between cards within a row (carousel) */
    --card-gap: 16px;

    /* per-section background (card wrapping the whole row) - transparent by
       default, i.e. exactly like now with no background at all */
    --section-bg: transparent;
    --section-radius: 16px;
    --section-padding: 0px;

    /* icon/title color per homepage row section (9 total) */
    --section-color-iranian: #1fae52;
    --section-color-movies: var(--accent-text);
    --section-color-series: var(--accent-text);
    --section-color-animations: var(--accent-text);
    --section-color-turkish: #e8474a;
    --section-color-korean: #d9534f;
    --section-color-indian: #d9822b;
    --section-color-documentaries: #0f5ca3;
    --section-color-horror: #8b6fd6;

    /* filters (type/genre/year/country/language at the top of the homepage) */
    --filter-bg: var(--bg-elevated);
    --filter-border-color: var(--border-subtle);
    --filter-text-color: #cfcfd2;
    --filter-font-size: 13px;
    --filter-display: block;

    /* stories (circles at the top of the homepage) */
    --story-ring-color-1: var(--accent);
    --story-ring-color-2: var(--danger);
    --story-title-color: #cfcfd2;

    /* ================================================================
       primary/secondary brand color - site-wide (not just homepage)
       ================================================================ */

    /* footer background - site-wide */
    --footer-bg: #18181b;

    /* ================================================================
       site-wide background pattern color. The pattern type (lines/dots/grid)
       is set via a class on body (body.bg-pattern-lines, etc), not this
       variable, since each needs a different gradient function that a
       simple variable can't swap between.
       ================================================================ */
    --bg-pattern-color: rgba(255, 255, 255, 0.035);
}

.site-logo img {
    width: var(--logo-width);
    height: var(--logo-height);
}

/* ================================================================
   background: fixed, subtle two-tone dark gradient (no animation)
   ================================================================ */
body {
    background-color: var(--bg-black);
    background-image: linear-gradient(160deg, var(--bg-black) 0%, var(--bg-black) 35%, var(--bg-gray) 100%);
    background-attachment: fixed;
    position: relative;
}

/* pattern layer (lines/dots/grid), sits on top of the base gradient. With
   none of these classes on body (default, no pattern), this layer is fully
   invisible and nothing changes visually. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
/* lines: parallel diagonal lines */
body.bg-pattern-lines::before {
    background-image: repeating-linear-gradient(
        45deg,
        var(--bg-pattern-color) 0px,
        var(--bg-pattern-color) 1px,
        transparent 1px,
        transparent 14px
    );
}
/* dots: repeating dots */
body.bg-pattern-dots::before {
    background-image: radial-gradient(var(--bg-pattern-color) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
}
/* grid: crossing horizontal/vertical lines */
body.bg-pattern-grid::before {
    background-image:
        linear-gradient(var(--bg-pattern-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--bg-pattern-color) 1px, transparent 1px);
    background-size: 32px 32px;
}
/* the rest of the site content must stay above this layer */
.app-content, .site-header, .mobile-top-nav, .app-footer {
    position: relative;
    z-index: 1;
}

/* ================================================================
   bold white text for button bodies (filled with a saturated color) -
   use on buttons/links with a colored background.
   ================================================================ */
.text-on-dark,
.btn-dl,
.btn-dl-gold,
button.btn-primary,
.btn-primary {
    color: var(--accent-contrast) !important;
    font-weight: 700;
    font-size: 1.05em;
}

.bg-ambient {
    display: none;
}

/* ================================================================
   borders: zero-width everywhere. Simplest approach: reset everything to
   zero first, then give input/textarea/select their border back with a
   separate, more specific rule (no !important needed) - these elements
   need a visible border to read as "typeable fields".
   Note: a multi-selector *:not() used to be here but got mis-parsed by a
   server-side CSS minifier/optimizer and broke the whole file - this
   simpler version is more robust.
   ================================================================ */
* {
    border-width: 0 !important;
}
input, textarea, select {
    border-width: 1px !important;
}

/* smooth transition between states (hover/focus), not theme color since
   there's no theme switching anymore */
a, button, .btn-dl, .imdb-card, .actor-card {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}