/* =====================================================================
   MovieGoers — site theme
   ---------------------------------------------------------------------
   The single place that decides how the site looks: fonts, colour tokens,
   the type scale, the header/footer chrome and the poster grid. It is a
   pure styling layer over the existing Blade markup and data.

   Load order: style.css (Bootstrap 3 + template) -> override.css (legacy
   tweaks) -> theme.css (this file). The card/grid rules that used to live
   in the first two files were removed, so this file owns the poster grid
   outright and does not need !important for it. The few !important flags
   that remain each beat a specific !important in override.css/style.css
   and are commented as such.

   Sections
     1. Fonts (self-hosted, /fonts)
     2. Tokens (colour, type scale, spacing)
     3. Base + typography hierarchy
     4. Layout container
     5. Header / navigation
     6. Buttons + forms
     7. Poster grid (canonical movie card)
     8. Sidebar blocks, news, movie page, footer, login overlay
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Fonts — self-hosted in public/fonts. The url() is relative to this
      stylesheet, so it resolves to /fonts/... on every route regardless
      of how deep the page URL is.
   --------------------------------------------------------------------- */
@font-face {
    font-family: "Bebas Neue";
    src: url("../fonts/BebasNeue-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-Variable.woff2") format("woff2");
    font-weight: 100 700;           /* variable font: one file, every weight */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Legacy family names still referenced deep inside style.css/override.css
   (Roboto, Open Sans, the Aleo slab faces, Museo). Point them all at the
   body face so nothing on the site can fall back to Arial/Times. A later
   @font-face with the same family + descriptors replaces the earlier one. */
@font-face { font-family: "Roboto";         src: url("../fonts/IBMPlexSans-Variable.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "Open Sans";      src: url("../fonts/IBMPlexSans-Variable.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans";      src: url("../fonts/IBMPlexSans-Variable.woff2") format("woff2"); font-weight: 100 700; font-style: italic; font-display: swap; }
@font-face { font-family: "aleoregular";    src: url("../fonts/IBMPlexSans-Variable.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "aleobold";       src: url("../fonts/IBMPlexSans-Variable.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "aleoitalic";     src: url("../fonts/IBMPlexSans-Variable.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "aleobolditalic"; src: url("../fonts/IBMPlexSans-Variable.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "museo_sans500";  src: url("../fonts/IBMPlexSans-Variable.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }


/* ---------------------------------------------------------------------
   2. Tokens
   --------------------------------------------------------------------- */
:root {
    /* colour */
    --bg: #0c0e13;
    --panel: #151822;
    --panel-alt: #1b1f2b;
    --line: #2a2f3d;
    --gold: #e3a83b;
    --gold-bright: #f4c567;
    --gold-ink: #1a1408;            /* text on gold */
    --crimson: #a6423f;
    --crimson-bright: #c85a56;
    --text: #f1ece0;
    --muted: #8f97ac;
    --muted-2: #5f6579;

    /* families */
    --font-display: "Bebas Neue", "Oswald", Impact, sans-serif;
    --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

    /* type scale (root = 16px). Fluid steps grow with the viewport so
       desktop and mobile don't share one size. */
    --fs-hero:    clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);    /* 36 -> 56px  page headings   */
    --fs-section: clamp(1.5rem,  1.25rem + .8vw, 2rem);      /* 24 -> 32px  block titles    */
    --fs-title:   clamp(1.25rem, 1.05rem + .6vw, 1.625rem);  /* 20 -> 26px  movie titles    */
    --fs-body:    clamp(.9375rem, .9rem + .2vw, 1.0625rem);  /* 15 -> 17px  body copy       */
    --fs-meta:    .9375rem;                                  /* 15px        genres, dates   */
    --fs-label:   .75rem;                                    /* 12px        mono labels     */
    --fs-nav:     1rem;
    --fs-btn:     .875rem;

    --radius: 10px;
    --radius-sm: 6px;
}


/* ---------------------------------------------------------------------
   3. Base + typography hierarchy
   --------------------------------------------------------------------- */
html {
    font-size: 100%;                /* Bootstrap 3 sets 10px; rem sizes above assume 16px */
    background: var(--bg);
}
body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    background-image:
        radial-gradient(circle at 15% 8%, rgba(227, 168, 59, 0.06), transparent 40%),
        radial-gradient(circle at 85% 20%, rgba(166, 66, 63, 0.07), transparent 45%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}
.wrapper,
.wrapper-images {
    background: transparent;
    background-image: none;
}

a { color: var(--gold-bright); }
a:hover,
a:focus { color: var(--text); text-decoration: underline; }

h1, h2, h3, h4,
.page-heading,
.post__title,
.login__title,
.category .category__title {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--text);
    text-transform: uppercase;
}

/* Level 1 — page / section headings ("Now showing in cinemas") */
.page-heading,
.page-heading.heading--outcontainer {
    font-size: var(--fs-hero);
    line-height: 1;
    background: none;
    padding-left: 0;
    margin: 2.25rem 0 1.25rem;
}

/* Level 2 — block titles (sidebar, news) */
.category .category__title,
.post__title {
    font-size: var(--fs-section);
    line-height: 1.05;
}

p, li, td, th, label,
.movie__option,
.movie__describe,
.movie__time { color: var(--muted); }
strong, b { color: var(--text); }
hr { border-color: var(--line); }

/* mono labels: durations, dates, copyright */
.movie__time,
.post__date,
.copy {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-2);
}


/* ---------------------------------------------------------------------
   4. Layout container — Bootstrap 3 stops at 1170px, which wastes most of
      a 1920px+ screen. Let it grow (fluid, capped) from 1440px up.
   --------------------------------------------------------------------- */
@media (min-width: 1440px) {
    .container {
        width: auto;
        max-width: 1800px;
        padding-left: 32px;
        padding-right: 32px;
    }
}


/* ---------------------------------------------------------------------
   5. Header / navigation
   --------------------------------------------------------------------- */
.header-wrapper,
.header-wrapper--home {
    position: sticky;
    top: 0;
    z-index: 120;
    height: auto;
    min-height: 64px;
    background: rgba(12, 14, 19, 0.92);
    background-image: none;
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--text);
}
.header-wrapper .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    min-height: 64px;
}
/* the template absolutely positions the logo over the nav; make it a normal
   flex item so the first menu entry is never hidden behind it */
.header-wrapper .logo {
    position: static;
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
}
.logo img { top: 0; filter: brightness(0) invert(1); opacity: 0.95; }   /* grey logo -> white on dark */

.mg-gradient { background: transparent; background-image: none; }

#navigation-box { padding: 0; }
ul#navigation > li > a,
ul#navigation a,
#navigation .menu__nav-item:before {
    color: var(--muted);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-nav);
    transition: color 0.15s ease;
}
ul#navigation > li > a:hover,
ul#navigation a:hover { color: var(--text); text-decoration: none; }

ul#navigation > li > ul,
ul#navigation ul {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
ul#navigation .menu__nav-item a { color: var(--muted); }
ul#navigation .menu__nav-item a:hover { color: var(--gold-bright); }
.sub-nav-toggle { color: var(--muted); }

.buy-tickets-header {
    background: var(--gold);
    color: var(--gold-ink);
    border: 0;
    border-radius: var(--radius-sm);
    font-weight: 600;
    top: 12px;
}

.header-search .select__field,
.header-search input[type="text"] {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    height: 38px;
    padding: 6px 12px;
    font-family: var(--font-body);
    font-size: var(--fs-meta);
}
.header-search .select__field::placeholder { color: var(--muted-2); }
.header-search .select__field:focus { border-color: var(--gold); outline: 0; }
.header-search .btn-md,
.header-search input[type="submit"] {
    background: var(--gold);
    color: var(--gold-ink);
    border: 0;
    border-radius: var(--radius-sm);
    height: 38px;
    margin-top: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* ---------------------------------------------------------------------
   6. Buttons + forms
   --------------------------------------------------------------------- */
.btn,
.btn-md {
    font-family: var(--font-body);
    font-size: var(--fs-btn);
    font-weight: 600;
    border-radius: var(--radius-sm);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: background 0.15s ease, color 0.15s ease;
}
.btn--warning,
.btn--danger,
.movie__show-btn,
.movie_popup {
    background: var(--gold);
    color: var(--gold-ink);
    border: 0;
}
.btn--warning:hover,
.btn--danger:hover,
.movie__show-btn:hover {
    background: var(--gold-bright);
    color: var(--gold-ink);
    text-decoration: none;
}
.btn--wider { background: var(--crimson); color: var(--text); }
.btn--wider:hover { background: var(--crimson-bright); }

input, select, textarea,
.select2-container .select2-choice,
.select2-container--flat .select2-selection--single,
.select2-container--flat .select2-selection--multiple {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
}
.select2-container--flat .select2-selection--single .select2-selection__rendered,
.select2-container--flat .select2-selection--single .select2-selection__placeholder { color: var(--text); }
.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above,
.select2-drop { background: var(--panel); border-color: var(--line); color: var(--text); }
/* override.css sets these with !important */
.select2-results .select2-highlighted,
.select2-container--flat .select2-results__option--highlighted[aria-selected],
.select2-container--flat .select2-results__option[aria-selected=true] { background: var(--gold) !important; color: var(--gold-ink) !important; }


/* ---------------------------------------------------------------------
   7. Poster grid — the canonical movie card
   ---------------------------------------------------------------------
   Markup (home, listing, coming-soon, reviews):

     .homepage-movie-list
       > .movie.movie--test
           > .movie__images > a.movie-beta__link > img      (370x500 thumb)
           > .movie__info   > a.movie__title
                            > p.movie__time
                            > p.movie__option (genres / times)
                            > a.movie__show-btn

   The grid decides the card width: auto-fill columns no narrower than
   --poster-min, so column count follows the available container width
   (3 at 1280, 3-4 at 1440-1920, 4+ on ultrawide, 2 on phones). The card
   is a column flexbox; the poster box keeps the thumbnail's 370:500
   ratio so nothing is stretched or additionally cropped.
   --------------------------------------------------------------------- */
.homepage-movie-list {
    --poster-min: 200px;
    --grid-gap: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--poster-min)), 1fr));
    gap: var(--grid-gap);
    align-items: stretch;
    margin-bottom: 2.5rem;
}
@media (min-width: 1200px) { .homepage-movie-list { --poster-min: 240px; } }
@media (min-width: 1900px) { .homepage-movie-list { --poster-min: 280px; --grid-gap: 24px; } }
@media (max-width: 639px) {
    .homepage-movie-list {
        --grid-gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* headings / empty-state text inside the list span the full row;
   the stray <br>s in the listing templates must not become grid cells */
.homepage-movie-list > h2,
.homepage-movie-list > h3,
.homepage-movie-list > p { grid-column: 1 / -1; }
.homepage-movie-list > h2 { margin-top: 1.5rem; margin-bottom: 0; }
.homepage-movie-list > br { display: none; }

.homepage-movie-list .movie--test {
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: none;
    float: none;
    margin: 0;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.homepage-movie-list .movie--test:hover { border-color: var(--gold); }

.homepage-movie-list .movie--test .movie__images {
    display: block;
    float: none;
    width: 100%;
    max-width: none;
    margin: 0;
    aspect-ratio: 370 / 500;
    overflow: hidden;
    border: 0;
    background: var(--panel-alt);
}
.homepage-movie-list .movie--test .movie-beta__link {
    display: block;
    height: 100%;
}
.homepage-movie-list .movie--test .movie__images img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.homepage-movie-list .movie--test .movie__info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0.9rem 0.9rem 1rem;
    min-height: 0;
    overflow: visible;
    position: static;
    border: 0;
    background: transparent;
}

/* Level 3 — movie title: display face, up to two lines, then ellipsis */
.homepage-movie-list .movie--test .movie__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    width: auto;
    max-width: none;
    margin: 0;
    white-space: normal;
    font-family: var(--font-display);
    font-size: var(--fs-title);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text);
}
.homepage-movie-list .movie--test .movie__title:hover { color: var(--gold-bright); text-decoration: none; }

.homepage-movie-list .movie--test .movie__time {
    margin: 0;
    padding-left: 0;
    color: var(--muted);            /* template paints it red */
}
.homepage-movie-list .movie--test .movie__time:before { content: none; }   /* template clock icon */

/* Level 4 — supporting metadata (genres, showtimes) */
.homepage-movie-list .movie--test .movie__option {
    width: auto;
    margin: 0;
    font-size: var(--fs-meta);
    line-height: 1.45;
    white-space: normal;
    color: var(--muted);
}
.homepage-movie-list .movie--test .movie__option strong {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-2);
}
.homepage-movie-list .movie--test .movie__option a,
.homepage-movie-list .movie--test .generes-list a { color: var(--muted); }
.homepage-movie-list .movie--test .movie__option a:hover,
.homepage-movie-list .movie--test .generes-list a:hover { color: var(--gold-bright); text-decoration: none; }
.homepage-movie-list .movie--test .movie__option span[title] { color: var(--gold); font-family: var(--font-mono); }

/* CTA sits at the bottom of every card, full width */
.homepage-movie-list .movie--test .movie__show-btn,
.homepage-movie-list .movie--test .movie_popup {
    position: static;
    display: block;
    align-self: stretch;
    margin-top: auto;
    padding: 0.6rem 0.9rem;
    text-align: center;
    font-size: var(--fs-btn);
}
.homepage-movie-list .movie--test .movie__show-btn { padding-top: 0.6rem; }   /* margin-top:auto needs a real gap above */
.homepage-movie-list .movie--test .movie__option + .movie__show-btn { margin-top: 0.75rem; }
.homepage-movie-list .movie--test .movie__btns { margin-top: 0.5rem; }


/* ---------------------------------------------------------------------
   8. Everything else
   --------------------------------------------------------------------- */

/* home: featured block (currently commented out in the template) */
.movie-best,
.movie-beta__item,
.movie-beta__info { background: var(--panel); border-color: var(--line); color: var(--muted); }
.bannercontainer,
.rev_slider_wrapper { background: var(--bg); }

/* showtime chips (listing + movie page) */
.time-select { background: transparent; border: 0; }
.time-select .time-select__place,
.movie .time-select .time-select__place,
.cinema-group a {
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    color: var(--gold);
    text-transform: uppercase;
}
.time-select .time-select__item {
    display: inline-block;
    background: var(--panel-alt);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    padding: 6px 14px;
    margin: 0 6px 8px 0;
    min-width: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.time-select .time-select__item:hover,
.time-select .time-select__item.active {
    background: var(--gold);
    color: var(--gold-ink);
    border-color: var(--gold);
}

/* schedule rows: the template painted these #f5f5f5 with white divider bars,
   which read as bright blocks on a dark page. Flatten them onto the panel and
   separate the rows with a hairline instead. */
.time-select .time-select__group {
    background-color: transparent;
    border-top: 1px solid var(--line);
    margin-bottom: 0;
    padding: 10px 0 4px;
}
.time-select .time-select__group:first-child,
.time-select .group--first { border-top: 0; }
.time-select .time-select__group:before,
.time-select .time-select__group:after { content: none; }
.time-select .items-wrap { padding-top: 0; margin-bottom: 0; list-style: none; }
.time-select .time-select__place { margin: 4px 0; }
.time-select .items-wrap li { color: var(--muted-2); font-family: var(--font-mono); font-size: var(--fs-label); }

/* schedule heading + notes on the movie page */
.schedule-heading {
    font-family: var(--font-display);
    font-size: var(--fs-section);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text);
    margin: 1.75rem 0 0.75rem;
}
.schedule-empty,
.schedule-note { color: var(--muted); font-size: var(--fs-meta); }
.schedule-empty {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    margin: 1.5rem 0 0;
}
.schedule-note { margin-top: 1rem; }
.schedule-note b { color: var(--muted-2); }

.cinema-area-block {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 14px;
}
.schedule-areas li,
.cinema-area-filter span {
    background: var(--panel-alt);
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    padding: 6px 14px;
    text-transform: capitalize;
}
.schedule-areas li:hover,
.schedule-areas li.active,
.cinema-area-filter span.active {
    background: var(--gold);
    color: var(--gold-ink);
    border-color: var(--gold);
    text-decoration: none;
}
.cinema-area-filter span:after { content: ""; }

/* movie detail page */
.movie-page .movie__info,
.movie-info-page { background: transparent; }
.movie-page .movie__images {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
}
.movie .movie__title { font-family: var(--font-display); font-size: var(--fs-section); color: var(--text); }
.movie .movie__time,
.movie .movie__time:before { color: var(--muted); }
.movie__describe { color: var(--muted); font-size: var(--fs-body); line-height: 1.7; }
.preview-footer small { color: var(--muted-2); }
.comment-link { color: var(--gold-bright); }
.imdb-link { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.imdb-link:hover { text-decoration: none; }
.imdb-link:hover .imdb-link__text { color: var(--gold-bright); }
.imdb-link__text { color: var(--muted); font-size: var(--fs-meta); transition: color 0.15s ease; }
.imdb-badge {
    display: inline-block;
    background: #f5c518;              /* IMDb brand yellow */
    color: #000;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 5px 7px;
    border-radius: 4px;
}

/* news */
.post--preview .post__image img { display: block; width: 100%; border-radius: var(--radius-sm); }
.post__title { display: block; margin: 0.25rem 0 0.5rem; }
.post__title,
.post__title a { color: var(--text); }
.post__title:hover,
.post__title a:hover { color: var(--gold-bright); text-decoration: none; }
.post__date { padding-left: 0; }
.post__date:before { content: none; }
.post--btn,
.read-more { margin-top: 0.5rem; color: var(--gold-bright); }
.read-more:hover { color: var(--text); }

/* sidebar blocks. `.sitebar` is only the column wrapper — the boxes inside
   carry the panel, so styling it too left an empty bordered strip on pages
   with nothing in the sidebar. */
.category,
.category .category__title {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--muted);
}
.category .category__title { border: 0; text-align: left; margin-bottom: 0.75rem; }
.category .category__title .title-edition { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--muted-2); }
.category ol,
.category ul { padding-left: 1.1rem; margin-bottom: 1rem; }
.category .category__item { color: var(--muted); font-size: var(--fs-meta); }
.category .category__item:hover { color: var(--gold-bright); }

/* login overlay */
.overlay { background: rgba(12, 14, 19, 0.96); }
.login__input { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.login__tracker,
.login-edition,
.login__check-info { color: var(--muted); }
.overlay-close { color: var(--muted); }

/* footer */
.footer-wrapper {
    background: var(--panel);
    background-image: none;
    border-top: 1px solid var(--line);
    margin-top: 4rem;
    padding: 2rem 0 1.5rem;
}
/* The template drew each icon as a 30x31 pill plus a separate 46x46 ring
   pseudo-element offset by -8px, so the two never lined up once the sizes
   changed. One flex-centred circle, no ring. */
.social { display: flex; justify-content: center; align-items: center; gap: 12px; padding-top: 0; }
.social .social__variant {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    line-height: 1;
    font-size: 1.125rem;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.social .social__variant:after { content: none; }
.social .social__variant:hover {
    color: var(--gold-ink);
    background: var(--gold);
    border-color: var(--gold);
    text-decoration: none;
}

/* Back-to-top control (injected by custom.js as .top-scroll > a). The
   template pointed it at images/components/arrow.svg, which isn't in the
   build — draw the chevron with a border instead so it always renders. */
.top-scroll {
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
}
.top-scroll a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.top-scroll a:before {
    content: "";
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-left: 2px solid var(--gold);
    border-top: 2px solid var(--gold);
    transform: rotate(45deg);
    transition: border-color 0.15s ease;
}
.top-scroll a:hover { background: var(--gold); border-color: var(--gold); }
.top-scroll a:hover:before { border-color: var(--gold-ink); }

.adsbygoogle,
ins { background: transparent; }

/* phones */
@media (max-width: 767px) {
    .header-wrapper .container { gap: 0.5rem; }
    ul#navigation { background: var(--bg); border-top: 1px solid var(--line); }
    .page-heading,
    .page-heading.heading--outcontainer { margin: 1.5rem 0 1rem; }
    .homepage-movie-list .movie--test .movie__info { padding: 0.7rem 0.7rem 0.8rem; gap: 0.3rem; }
}