/*
 * Kino overrides on top of the StreamIT theme.
 * Plain CSS (no build step) to match how the template ships its own assets.
 */

/* Stand-in artwork for titles with no poster uploaded yet. Mirrors the
   dimensions of the .img-box <img> so card layout is unaffected. */
.kino-poster-fallback {
    display: flex;
    align-items: flex-end;
    width: 100%;
    aspect-ratio: 2 / 3;
    padding: 0.75rem;
    background-image: var(--kino-gradient);
}

.kino-poster-fallback__title {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Landscape stand-in used on the detail page when there's no trailer. */
.kino-landscape-fallback {
    display: flex;
    align-items: flex-end;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    padding: 1.25rem;
    background-image: var(--kino-gradient);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* The hero uses a DB-driven background image; keep it covering on all sizes. */
.banner-home-swiper-image,
.iq-banner-thumb-slider .slider--image {
    background-size: cover;
    background-position: center;
}

/*
 * Solid title text.
 *
 * The template's .texture-text sets color:transparent and clips a noise
 * bitmap (images/pages/texure.webp) into the glyphs, so titles render blotchy
 * and vary with whatever the texture happens to line up with. Real titles read
 * better as a flat colour, so the texture is dropped while the template's own
 * weight/line-height rules for the class still apply.
 */
.texture-text {
    color: #fff;
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
}

/*
 * Header over the hero.
 *
 * The template absolutely positions the header but then pads .main-content by
 * the header height, so it sits *above* the artwork rather than over it. On
 * pages with a hero we drop that padding and fade the bar into the image;
 * hovering anywhere on it returns a solid background so the menu stays
 * readable against busy artwork.
 */
.kino-hero-home .main-content {
    padding-top: 0;
}

.kino-hero-home header.header-sticky:not(.sticky) {
    background: -webkit-linear-gradient(top, rgba(var(--bs-black-rgb), 0.85) 0%, rgba(var(--bs-black-rgb), 0.4) 55%, rgba(var(--bs-black-rgb), 0) 100%);
    background: -o-linear-gradient(top, rgba(var(--bs-black-rgb), 0.85) 0%, rgba(var(--bs-black-rgb), 0.4) 55%, rgba(var(--bs-black-rgb), 0) 100%);
    background: linear-gradient(to bottom, rgba(var(--bs-black-rgb), 0.85) 0%, rgba(var(--bs-black-rgb), 0.4) 55%, rgba(var(--bs-black-rgb), 0) 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Opaque on hover — applies on every page, not just the hero pages. */
header.header-sticky:hover,
.kino-hero-home header.header-sticky:not(.sticky):hover {
    background: rgb(var(--bs-black-rgb));
    -webkit-backdrop-filter: blur(0.625em);
    backdrop-filter: blur(0.625em);
}

/*
 * Hero trailer takeover. The video sits above the backdrop image but stays
 * earlier in the DOM than .container-fluid (which is position-relative), so
 * the slide's text keeps painting on top without needing a z-index war.
 */
.iq-banner-thumb-slider .slider--image {
    position: relative;
    overflow: hidden;
}

.kino-hero-video.video-js {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    opacity: 0;
    transition: opacity 900ms ease;
    pointer-events: none;
    z-index: 1;
}

/*
 * Extra darkening.
 *
 * The template's own scrim is a ::before, which paints *under* absolutely
 * positioned children — so once the trailer video faded in it covered the
 * scrim completely and the copy lost its contrast. This ::after sits above
 * the video (z-index 2) but below the text (z-index 3), so artwork and
 * trailer are darkened alike.
 */
.iq-banner-thumb-slider .slider .slider-bg .slider-images .slider--image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background:
        -webkit-linear-gradient(left, rgba(var(--bs-black-rgb), 0.68) 0%, rgba(var(--bs-black-rgb), 0.33) 35%, rgba(var(--bs-black-rgb), 0.08) 65%, rgba(var(--bs-black-rgb), 0) 100%),
        -webkit-linear-gradient(bottom, rgba(var(--bs-black-rgb), 0.58) 0%, rgba(var(--bs-black-rgb), 0.16) 38%, rgba(var(--bs-black-rgb), 0) 72%);
    background:
        linear-gradient(to right, rgba(var(--bs-black-rgb), 0.68) 0%, rgba(var(--bs-black-rgb), 0.33) 35%, rgba(var(--bs-black-rgb), 0.08) 65%, rgba(var(--bs-black-rgb), 0) 100%),
        linear-gradient(to top, rgba(var(--bs-black-rgb), 0.58) 0%, rgba(var(--bs-black-rgb), 0.16) 38%, rgba(var(--bs-black-rgb), 0) 72%);
}

/* Keep the title/description/buttons above the new scrim. */
.iq-banner-thumb-slider .slider .slider-bg .slider-images .slider--image > .container-fluid {
    z-index: 3;
}

.slider--image.is-trailer-playing .kino-hero-video.video-js {
    opacity: 1;
}

.kino-hero-video.video-js video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Respect users who don't want motion: never swap in the trailer. */
@media (prefers-reduced-motion: reduce) {
    .slider--image.is-trailer-playing .kino-hero-video.video-js {
        opacity: 0;
    }
}

/*
 * Hero thumbnails: the template ships these as tall 2/2.8 portraits with
 * mix-blend-mode overlay (which washes real photography out). We show small
 * 16:9 landscape stills instead, so they read as video, not book covers.
 */
/*
 * Reposition the hero thumb strip to match the StreamIT demo: the shipped HTML
 * template centres it vertically inside a dark gradient panel, whereas the demo
 * bottom-aligns a bare strip over the artwork.
 */
.iq-banner-thumb-slider .slider .slider-bg .horizontal_thumb_slider {
    top: auto;
    bottom: 2.5em;
    /* Inset far enough that the "next" arrow, which hangs outside the strip,
       still lands inside the viewport instead of being clipped by the edge. */
    right: 4.5em;
    /* Wide enough that each thumb lands near the ~250px of the demo, but
       viewport-relative so it can't crowd out the hero copy on smaller
       screens. Paired with the slidesPerView breakpoints in swiper.js. */
    width: clamp(28em, 54vw, 66em);
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    background: none;
    padding: 0;
}

.iq-banner-thumb-slider .slider .slider-bg .horizontal_thumb_slider .banner-thumb-slider-nav {
    padding-bottom: 0;
}

/* Arrows flank the strip instead of stacking under its left edge. */
.iq-banner-thumb-slider .slider .slider-bg .horizontal_thumb_slider .banner-thumb-slider-nav .slider-prev,
.iq-banner-thumb-slider .slider .slider-bg .horizontal_thumb_slider .banner-thumb-slider-nav .slider-next {
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.iq-banner-thumb-slider .slider .slider-bg .horizontal_thumb_slider .banner-thumb-slider-nav .slider-prev {
    left: -2.75em;
}

.iq-banner-thumb-slider .slider .slider-bg .horizontal_thumb_slider .banner-thumb-slider-nav .slider-next {
    left: auto;
    right: -2.75em;
}

/* With too few featured titles to scroll, Swiper disables the arrows — say so
   rather than leaving them looking clickable. */
.iq-banner-thumb-slider .slider .slider-bg .horizontal_thumb_slider .banner-thumb-slider-nav .swiper-button-disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Bottom-aligned hero copy needs breathing room above the fold edge. */
.iq-banner-thumb-slider .slider .slider-bg .slider-images .swiper-wrapper .banner-bg .slider-content-full-height {
    padding-bottom: 5em;
}

.iq-banner-thumb-slider .slider .slider-bg .horizontal_thumb_slider .block-images .img-box img,
.iq-banner-thumb-slider .slider .slider-bg .horizontal_thumb_slider .block-images .img-box .kino-thumb-fallback {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    /* Template shipped 0.5em here; 2px softer again per design review. */
    border-radius: calc(0.5em + 2px);
    /* Template blends the thumb into its gradient; that muddies real stills. */
    mix-blend-mode: normal;
}

.iq-banner-thumb-slider .slider .slider-bg .horizontal_thumb_slider .block-images .img-box .kino-thumb-fallback {
    background-image: var(--kino-gradient);
}

/* Keep the caption legible now that the image behind it is full-contrast. */
.iq-banner-thumb-slider .slider .slider-bg .horizontal_thumb_slider .block-images .img-box .block-description {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}

/*
 * Thumbs are controls, so they need to look and behave like it: pointer
 * cursor, a hover lift, and a highlight ring on the one currently showing.
 * The template only styles an active state for its *vertical* thumb slider,
 * not this OTT strip, so it's added here.
 */
.iq-banner-thumb-slider .slider .slider-bg .horizontal_thumb_slider .swiper-slide {
    cursor: pointer;
}

.iq-banner-thumb-slider .slider .slider-bg .horizontal_thumb_slider .swiper-slide .img-box {
    /* Matches the thumb image radius so the highlight ring hugs the corners */
    border-radius: calc(0.5em + 2px);
    border: 2px solid transparent;
    -webkit-transition: border-color 250ms ease, opacity 250ms ease;
    -o-transition: border-color 250ms ease, opacity 250ms ease;
    transition: border-color 250ms ease, opacity 250ms ease;
    opacity: 0.65;
}

.iq-banner-thumb-slider .slider .slider-bg .horizontal_thumb_slider .swiper-slide:hover .img-box {
    opacity: 1;
}

/* Only the thumb whose title is playing. .swiper-slide-active is deliberately
   NOT matched: the strip always has its own active slide (the leftmost visible
   one), which showed a second ring. */
.iq-banner-thumb-slider .slider .slider-bg .horizontal_thumb_slider .swiper-slide.swiper-slide-thumb-active .img-box {
    border-color: rgba(255, 255, 255, 0.9);
    opacity: 1;
}

/* ------------------------------------------------------------------------
 * Card hover: zoom the artwork, never change the tile's footprint.
 *
 * The template's hover grows the card — margin-top:-1.875em, overflow:visible,
 * translate3d(±12%) on edge slides, plus an expanded border box via ::after —
 * which shoves neighbouring cards around. All of that is suppressed here; the
 * frame stays put and only the image scales inside it.
 * ------------------------------------------------------------------------ */

.card-hover:hover .block-images,
.card-hover.landscape-card-hover:hover .block-images,
.view-all-movies .card-hover:hover .block-images,
.card-style-grid:hover .block-images,
.card-style-slider li.swiper-slide.swiper-slide-active .card-hover:hover .block-images,
.card-style-slider li.swiper-slide.swiper-slide-active .card-hover.landscape-card-hover:hover .block-images,
.card-style-slider li.swiper-slide.swiper-active.last .card-hover:hover .block-images,
.card-style-slider li.swiper-slide.swiper-active.last .card-hover.landscape-card-hover:hover .block-images {
    /* !important: the template sets these across many deep selectors. */
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
    margin-top: 0 !important;
    overflow: hidden !important;
    z-index: auto;
}

/* The expanded bordered box that made the card look bigger. */
.iq-card:hover .block-images::after {
    opacity: 0;
    visibility: hidden;
}

/* Artwork: true colours (template blends it to overlay), dimmed at rest,
   brightening and zooming on hover — the fade effect. */
.iq-card .block-images .img-box {
    overflow: hidden;
}

.iq-card .block-images .img-box img,
.iq-card .block-images .img-box .kino-poster-fallback {
    mix-blend-mode: normal;
    opacity: 0.82;
    -webkit-transition: opacity 400ms ease, -webkit-transform 600ms ease;
    -o-transition: opacity 400ms ease, transform 600ms ease;
    transition: opacity 400ms ease, transform 600ms ease;
}

.iq-card:hover .block-images .img-box img,
.iq-card:hover .block-images .img-box .kino-poster-fallback {
    opacity: 1;
    -webkit-transform: scale(1.08);
    -ms-transform: scale(1.08);
    transform: scale(1.08);
}

/* Info panel fades in over the bottom of the artwork rather than hanging below
   it — the template parks it at bottom:-3.75em, outside the frame, which only
   worked because the card grew. */
.iq-card .block-images .card-description.with-transition,
.iq-card:hover .block-images .card-description.with-transition {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5em 1em 1em;
    background: -webkit-linear-gradient(bottom, rgba(var(--bs-black-rgb), 0.92) 0%, rgba(var(--bs-black-rgb), 0.55) 55%, rgba(var(--bs-black-rgb), 0) 100%);
    background: linear-gradient(to top, rgba(var(--bs-black-rgb), 0.92) 0%, rgba(var(--bs-black-rgb), 0.55) 55%, rgba(var(--bs-black-rgb), 0) 100%);
    -webkit-transition: opacity 350ms ease, -webkit-transform 350ms ease, visibility 350ms ease;
    -o-transition: opacity 350ms ease, transform 350ms ease, visibility 350ms ease;
    transition: opacity 350ms ease, transform 350ms ease, visibility 350ms ease;
}

.iq-card .block-images .card-description.with-transition {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(0.5em);
    -ms-transform: translateY(0.5em);
    transform: translateY(0.5em);
}

.iq-card:hover .block-images .card-description.with-transition {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .iq-card:hover .block-images .img-box img,
    .iq-card:hover .block-images .img-box .kino-poster-fallback {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

/* Fade-to-black on the hovered card.
 *
 * The template's own scrim is .img-box::before, but .img-box a carries
 * z-index:1, so the artwork paints over it and it never shows (it only
 * appeared in the demo because the image was blend-mode'd). This overlay sits
 * above the image (z-index 2) and below .card-description (z-index 9), so the
 * card darkens on hover and the title/Play Now stay legible on top.
 */
.iq-card .block-images .img-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background: -webkit-linear-gradient(bottom, rgba(var(--bs-black-rgb), 0.95) 0%, rgba(var(--bs-black-rgb), 0.6) 45%, rgba(var(--bs-black-rgb), 0.2) 100%);
    background: linear-gradient(to top, rgba(var(--bs-black-rgb), 0.95) 0%, rgba(var(--bs-black-rgb), 0.6) 45%, rgba(var(--bs-black-rgb), 0.2) 100%);
    opacity: 0;
    -webkit-transition: opacity 400ms ease;
    -o-transition: opacity 400ms ease;
    transition: opacity 400ms ease;
}

.iq-card:hover .block-images .img-box::after {
    opacity: 1;
}

/* The overlay above now does the darkening, so the info panel doesn't need its
   own gradient stacked on top of it. */
.iq-card .block-images .card-description.with-transition,
.iq-card:hover .block-images .card-description.with-transition {
    background: transparent;
}

/* Logged-in identifier shown in full, as a pill rather than a round avatar
   (a phone number or email doesn't fit in a circle). */
.kino-user-chip {
    display: inline-flex;
    align-items: center;
    max-width: 14em;
    padding: 0.45em 0.9em;
    border-radius: 999px;
    background: var(--bs-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.875em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------------------
 * Content detail page.
 *
 * .iq-main-slider.site-video is an aspect-ratio box (height:0 + padding) and
 * .movie-detail-part is absolutely positioned by the template, so the details
 * overlay the background media rather than sitting under it.
 * ------------------------------------------------------------------------ */

/* The template wraps this section in .poition-relative — a typo that matches
   no rule, so nothing established a positioning context and the absolutely
   positioned .movie-detail-part escaped to the page bottom (footer above it).
   Anchor it here instead. */
.kino-detail {
    position: relative;
}

.kino-detail .iq-main-slider.site-video {
    position: relative;
    overflow: hidden;
}

/* Trailer and still both fill the box and crop rather than letterbox. */
.kino-detail .video-js,
.kino-detail .kino-detail__still {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.kino-detail .video-js video,
.kino-detail .kino-detail__still {
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
}

.kino-detail .kino-detail__still--empty {
    display: block;
    background-image: var(--kino-gradient);
}

/* Keeps the overlaid copy readable over bright artwork or motion. */
.kino-detail .kino-detail__scrim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background:
        -webkit-linear-gradient(left, rgba(var(--bs-black-rgb), 0.95) 0%, rgba(var(--bs-black-rgb), 0.6) 40%, rgba(var(--bs-black-rgb), 0.15) 75%),
        -webkit-linear-gradient(bottom, rgba(var(--bs-black-rgb), 0.95) 0%, rgba(var(--bs-black-rgb), 0.35) 45%, rgba(var(--bs-black-rgb), 0) 75%);
    background:
        linear-gradient(to right, rgba(var(--bs-black-rgb), 0.95) 0%, rgba(var(--bs-black-rgb), 0.6) 40%, rgba(var(--bs-black-rgb), 0.15) 75%),
        linear-gradient(to top, rgba(var(--bs-black-rgb), 0.95) 0%, rgba(var(--bs-black-rgb), 0.35) 45%, rgba(var(--bs-black-rgb), 0) 75%);
}

/* Description clamp; the toggle swaps this class off to reveal the rest. */
.kino-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kino-readmore {
    color: var(--bs-primary);
    font-size: 0.875em;
    font-weight: 600;
    text-decoration: none;
}

/*
 * Detail overlay positioning — stated explicitly rather than inherited.
 *
 * The template positions BOTH .movie-detail-part (absolute, bottom:0) and
 * .details-parts (absolute, bottom:6em, width:50%) — the latter inside a
 * zero-height parent. Its own breakpoints then flip the parent to
 * `top:12%/32px; bottom:unset`, so between 768 and 1200px the copy was
 * anchored upward from the top of the media box and vanished off-screen.
 */
.kino-detail .movie-detail-part {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

/* Back into normal flow, so the block sizes to its content. */
.kino-detail .movie-detail-part .trending-info .details-parts {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    max-width: 46em;
    padding: 0 4vw 3em;
}

@media (max-width: 991.98px) {
    /* 42–46% of a narrow viewport is only ~250–400px tall — not enough to hold
       the copy — so stop overlaying and stack it under the media instead. */
    .kino-detail .movie-detail-part {
        position: static;
    }

    /* Plain 16:9 once it is no longer a backdrop for text. */
    .kino-detail .iq-main-slider.site-video {
        padding-bottom: 56.25%;
    }

    .kino-detail .movie-detail-part .trending-info .details-parts {
        max-width: none;
        padding: 1.5em 1.25em 2.5em;
    }

    /* Nothing sits on the scrim any more, so lighten it. */
    .kino-detail .kino-detail__scrim {
        background: -webkit-linear-gradient(bottom, rgba(var(--bs-black-rgb), 0.5) 0%, rgba(var(--bs-black-rgb), 0) 60%);
        background: linear-gradient(to top, rgba(var(--bs-black-rgb), 0.5) 0%, rgba(var(--bs-black-rgb), 0) 60%);
    }
}

/* ------------------------------------------------------------------------
 * Sticky footer: on short pages (a sparse category, a coming-soon title) the
 * footer used to float mid-screen with dead space beneath it. Making the body
 * a column flexbox and letting <main> absorb the slack pins it to the bottom
 * without pushing it off-screen on tall pages.
 *
 * Scoped to .kino-app so the auth layout, which has no <main>/<footer>, is
 * unaffected.
 * ------------------------------------------------------------------------ */
.kino-app {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
    /* Accounts for mobile browser chrome where supported. */
    min-height: 100dvh;
}

.kino-app > .main-content {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

.kino-app > .footer {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/* ------------------------------------------------------------------------
 * Watch page: header, player, footer.
 * ------------------------------------------------------------------------ */

/*
 * streamit.js measures the header and sets --header-height at runtime, but it
 * loads deferred — until then `padding-top: var(--header-height)` is invalid
 * and content slides under the absolutely positioned header. A fallback keeps
 * the first paint correct on every non-hero page.
 */
.custom-header-relative:not(.kino-hero-home) .main-content {
    padding-top: var(--header-height, 5em);
}

.kino-watch {
    padding: 2em 0 3.5em;
}

.kino-watch__stage {
    position: relative;
    width: 100%;
    max-width: 100em;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 0.5em;
    overflow: hidden;
}

/* Video.js copies the element's classes onto a generated wrapper div, so both
   the wrapper and the inner <video> need to fill the stage. */
.kino-watch__stage .video-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* contain, not cover: never crop a feature the viewer chose to watch. */
.kino-watch__stage .video-js video {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

/* Title left, sound toggle right, on one line above the player. */
.kino-watch__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 1em;
    max-width: 100em;
    margin: 0 auto 0.75em;
}

.kino-watch__title {
    margin: 0;
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    font-weight: 800;
    color: #fff;
}

.kino-sound {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ---------- Subscription / payment screens ---------- */

.kino-subscribe {
    padding: 2.5em 0 4em;
}

.kino-subscribe__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 1.25em;
}

.kino-plan {
    background: var(--bs-gray-900);
    border: 1px solid rgba(var(--bs-white-rgb, 255, 255, 255), 0.08);
    border-radius: 0.75em;
    padding: 1.5em;
}

.kino-plan__name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.kino-plan__price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--bs-primary);
    margin: 0.35em 0 0.15em;
}

.kino-plan__note {
    font-size: 0.875rem;
    margin-bottom: 1.25em;
}

.kino-qr {
    width: 100%;
    max-width: 17em;
    height: auto;
    background: #fff;
    border-radius: 0.5em;
    padding: 0.5em;
}

/* Bank deeplinks: a wrapping grid so 20+ options stay scannable. */
.kino-banks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr));
    gap: 0.75em;
}

.kino-bank {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.6em 0.75em;
    border-radius: 0.5em;
    background: rgba(var(--bs-black-rgb), 0.35);
    border: 1px solid rgba(var(--bs-white-rgb, 255, 255, 255), 0.08);
    color: #fff;
    text-decoration: none;
    transition: background 200ms ease, border-color 200ms ease;
}

.kino-bank:hover {
    background: rgba(var(--bs-black-rgb), 0.6);
    border-color: var(--bs-primary);
    color: #fff;
}

.kino-bank__logo {
    width: 1.75em;
    height: 1.75em;
    border-radius: 0.25em;
    flex-shrink: 0;
    object-fit: contain;
    background: #fff;
}

.kino-bank__name {
    font-size: 0.8rem;
    line-height: 1.2;
}

/* Playback blocked overlay (session replaced / subscription lapsed). */
.kino-watch__blocked {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5em;
    background: rgba(var(--bs-black-rgb), 0.88);
}

.kino-watch__blocked-inner i {
    font-size: 2.5rem;
    color: var(--bs-primary);
    display: block;
    margin-bottom: 0.5em;
}

/*
 * Hero copy on tablets/phones (< 992px), where the template hides the thumb
 * strip.
 *
 * The template swaps the hero's `min-height: 92vh` for `min-height: inherit`
 * here, collapsing the slide so `align-items-end` had no slack to work with and
 * the copy drifted up the artwork. Rather than fight that cascade through the
 * Bootstrap row, the background box itself becomes a flex column and pushes its
 * content block to the bottom — one rule, no reliance on row alignment.
 */
@media (max-width: 991.98px) {
    .iq-banner-thumb-slider .slider .slider-bg .slider-images .slider--image {
        /* Shorter than desktop's 92vh: a full-height hero on a phone hides the
           rows below it entirely. */
        min-height: 62vh;
        height: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    .iq-banner-thumb-slider .slider .slider-bg .slider-images .slider--image > .container-fluid {
        width: 100%;
    }

    /* Sizes to its content now that the parent handles placement. The header
       overlays the top of the artwork, which the copy no longer reaches. */
    .iq-banner-thumb-slider .slider .slider-bg .slider-images .swiper-wrapper .banner-bg .slider-content-full-height {
        min-height: 0;
        padding: 0 0 2em;
    }

    /* Thumb strip is hidden here, so the copy can use the full width. */
    .iq-banner-thumb-slider .slider .slider-bg .slider-images .slider-content {
        max-width: none;
    }
}

/*
 * Small-screen gutter.
 *
 * The template steps .container-fluid down 3.75em -> 2em -> 1em, and that final
 * 1em (16px) below 768px left the logo and the login button looking flush to the
 * screen edges. Match the 2em (32px) used in the band just above instead, so the
 * header margin looks the same either side of the breakpoint.
 */
@media (max-width: 767.98px) {
    /*
     * Header only. Applying this to every .container-fluid also widened the
     * content rows, which left too much dead space either side of the cards on
     * a phone — those keep the template's 1em.
     */
    header .navbar > .container-fluid {
        padding-left: 1.5em;
        padding-right: 1.5em;
        /*
         * Vertical breathing room. The template gives the logo
         * `padding: 1.5em 0` at every other width, but zeroes it here
         * (.navbar-brand img.logo { padding: 0 }) — and because the header is
         * absolutely positioned over the hero, the logo and the login button
         * ended up flush against the top of the screen. Padding the container
         * lifts both, not just the logo.
         */
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* ------------------------------------------------------------------------
 * Notices.
 *
 * Bootstrap's stock alerts are pale, high-radius blocks that fight a dark
 * cinema UI — the yellow warning in particular. Restyled as a quiet dark panel
 * with a thin coloured edge, so the meaning still reads without shouting.
 * ------------------------------------------------------------------------ */
.alert {
    border: 0;
    border-left: 3px solid var(--bs-primary);
    border-radius: 0.25rem;
    background: rgba(var(--bs-black-rgb), 0.5);
    color: #fff;
    font-size: 0.9rem;
    padding: 0.85em 1.1em;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.alert-success {
    border-left-color: #2ecc71;
}

.alert-warning {
    border-left-color: #f5c518;
}

.alert-danger {
    border-left-color: var(--bs-primary);
}

.alert-info {
    border-left-color: #4aa3df;
}

/* ---------- All-categories modal ---------- */

.kino-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
    gap: 0.6em;
}

.kino-category-link {
    display: block;
    padding: 0.7em 0.9em;
    border-radius: 0.375rem;
    border: 1px solid rgba(var(--bs-black-rgb), 0.6);
    background: rgba(var(--bs-black-rgb), 0.4);
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.25;
    text-decoration: none;
    -webkit-transition: background 200ms ease, border-color 200ms ease;
    -o-transition: background 200ms ease, border-color 200ms ease;
    transition: background 200ms ease, border-color 200ms ease;
}

.kino-category-link:hover,
.kino-category-link:focus-visible {
    background: rgba(var(--bs-black-rgb), 0.75);
    border-color: var(--bs-primary);
    color: #fff;
}

.kino-category-link.is-active {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

/*
 * Category names as stored.
 *
 * The template applies `text-transform: capitalize` to nav links, which
 * upper-cases every word — "Монгол порно од" rendered as "Монгол Порно Од".
 * Render the stored value instead, so sentence case survives (and a genuine
 * proper noun mid-name, e.g. "Төгс Орос хүүхэн", keeps its capital).
 */
.iq-nav-menu > li > a,
.iq-nav-menu > li > a .item-name,
.kino-category-link {
    text-transform: none;
}

/*
 * "Бусад категориуд" trigger.
 *
 * Sat among the category links looking identical to them, so it didn't read as
 * a control. Styled as an outlined pill with a grid icon and a count, and given
 * higher specificity than .iq-nav-menu > li > a so the template's own link
 * padding doesn't fight it.
 */
.iq-nav-menu > li > a.kino-more-cats {
    /* Template nav links are 1rem; this sits 2px smaller so the pill reads as a
       control rather than competing with the category links. The icon is 1.05em,
       so it scales down with it. */
    font-size: 0.875rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.45em;
    padding: 0.4em 0.9em;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: #fff;
    -webkit-transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
    -o-transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
    transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}

.iq-nav-menu > li > a.kino-more-cats:hover,
.iq-nav-menu > li > a.kino-more-cats:focus-visible {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-black-rgb), 0.55);
    color: var(--bs-primary);
}

.iq-nav-menu > li > a.kino-more-cats i {
    font-size: 1.05em;
    line-height: 1;
}

/* Count badge, so it's obvious how much more is behind the click. */
.kino-more-cats__count {
    display: inline-block;
    min-width: 1.5em;
    padding: 0.1em 0.35em;
    border-radius: 999px;
    background: var(--bs-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.iq-nav-menu > li > a.kino-more-cats:hover .kino-more-cats__count {
    background: #fff;
    color: var(--bs-primary);
}

/* ---------- Profile page ---------- */

/* Definition list rendered as label/value rows. */
.kino-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4em 1em;
    margin: 0;
}

.kino-facts dt {
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--bs-body-color);
}

.kino-facts dd {
    margin: 0;
    font-weight: 600;
    color: #fff;
    text-align: right;
}

.kino-table {
    color: #fff;
    font-size: 0.85rem;
}

.kino-table thead th {
    font-weight: 600;
    color: var(--bs-body-color);
    border-bottom-color: rgba(255, 255, 255, 0.12);
    text-transform: none;
}

.kino-table td {
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

/*
 * Logo sizing.
 *
 * Two problems with the template's rule (`width: 9.375em` + `max-height:
 * 5.375em`): it pins both axes, so a 4:3 mark got squashed by the cap; and em
 * here resolves against .navbar-brand, whose font-size comes from a Bootstrap
 * variable and is `unset` elsewhere — it measured ~12.4px on desktop and
 * ~8.7px at 768px, so em-based sizing was unpredictable.
 *
 * Driven by width in px (deterministic) with `height: auto`, so the source
 * aspect ratio is always preserved.
 */
.navbar-brand img.logo {
    width: 85px;
    height: auto;
    max-height: none;
    padding: 0;
    -o-object-fit: contain;
       object-fit: contain;
}

@media (min-width: 768px) {
    .navbar-brand img.logo {
        width: 100px;
        padding: 14px 0;
    }
}

/*
 * Auth pages (login / register) logo.
 *
 * This one sits outside .navbar-brand, so the header rule above doesn't reach
 * it. The template sizes it with `width: 11.25em`, which is em-based and
 * therefore unpredictable here; pin it in px and let the height follow.
 */
.sign-in-page img.logo {
    width: 120px;
    height: auto;
    max-height: none;
}

/*
 * Soften the template's own hero scrim.
 *
 * Its ::before starts at fully opaque `var(--bs-black)` for the first ~10% and
 * fades out, which reads as a hard black band down the left edge. It's hidden
 * behind a playing trailer, but stacks under our ::after on titles that only
 * have a static landscape — so those looked markedly darker than the rest.
 */
.iq-banner-thumb-slider .slider .slider-bg .slider-images .slider--image::before {
    background:
        -webkit-linear-gradient(left, rgba(var(--bs-black-rgb), 0.46) 0%, rgba(var(--bs-black-rgb), 0) 34%),
        -webkit-linear-gradient(bottom, rgba(var(--bs-black-rgb), 0.36) 0%, rgba(var(--bs-black-rgb), 0) 60%);
    background:
        linear-gradient(to right, rgba(var(--bs-black-rgb), 0.46) 0%, rgba(var(--bs-black-rgb), 0) 34%),
        linear-gradient(to top, rgba(var(--bs-black-rgb), 0.36) 0%, rgba(var(--bs-black-rgb), 0) 60%);
}

/* ========================================================================
 * Home hero — premium ("VIP") treatment.
 *
 * Scoped to .kino-hero (the homepage banner only) so the detail and category
 * pages keep the template's plainer chrome. The brand magenta stays the
 * action colour throughout; the champagne accent is reserved for *status*
 * (the featured badge, the active thumbnail, section rules) and is never
 * used on something clickable, so "gold" always means "editorially picked"
 * rather than "press me".
 * ------------------------------------------------------------------------ */

.kino-app {
    --kino-gold: #f3d9a4;
    --kino-gold-deep: #c8a04b;
    --kino-gold-rgb: 243, 217, 164;
}

/*
 * Cinematic scrim.
 *
 * Replaces the two-stop wash from further up this file with three layers: a
 * left-hand ramp for the copy, a much heavier bottom ramp that lands on solid
 * black at the hero's edge (so the artwork melts into the page instead of
 * ending on a seam), and a soft vignette that pulls the eye to centre frame.
 *
 * Still z-index 2 — above the trailer video, below the copy — and the thumb
 * strip sits at the template's z-index 99, so neither is dimmed by it.
 */
.iq-banner-thumb-slider.kino-hero .slider .slider-bg .slider-images .slider--image::after {
    background:
        -webkit-linear-gradient(left, rgba(var(--bs-black-rgb), 0.82) 0%, rgba(var(--bs-black-rgb), 0.45) 34%, rgba(var(--bs-black-rgb), 0.1) 62%, rgba(var(--bs-black-rgb), 0) 100%),
        -webkit-linear-gradient(bottom, rgba(var(--bs-black-rgb), 1) 0%, rgba(var(--bs-black-rgb), 0.72) 9%, rgba(var(--bs-black-rgb), 0.3) 26%, rgba(var(--bs-black-rgb), 0) 58%),
        -webkit-radial-gradient(50% 42%, 120% 95%, rgba(var(--bs-black-rgb), 0) 48%, rgba(var(--bs-black-rgb), 0.45) 100%);
    background:
        linear-gradient(to right, rgba(var(--bs-black-rgb), 0.82) 0%, rgba(var(--bs-black-rgb), 0.45) 34%, rgba(var(--bs-black-rgb), 0.1) 62%, rgba(var(--bs-black-rgb), 0) 100%),
        linear-gradient(to top, rgba(var(--bs-black-rgb), 1) 0%, rgba(var(--bs-black-rgb), 0.72) 9%, rgba(var(--bs-black-rgb), 0.3) 26%, rgba(var(--bs-black-rgb), 0) 58%),
        radial-gradient(120% 95% at 50% 42%, rgba(var(--bs-black-rgb), 0) 48%, rgba(var(--bs-black-rgb), 0.45) 100%);
}

/* ---------- Eyebrow: status badge + slide counter ---------- */

.kino-hero__eyebrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.kino-badge-vip {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.45em;
    padding: 0.45em 0.95em;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    /* Dark ink on the gold: the only place in the hero that inverts, which is
       what makes it read as a seal rather than another chip. */
    color: #191307;
    background: -webkit-linear-gradient(315deg, #fbf0d6 0%, var(--kino-gold) 38%, var(--kino-gold-deep) 100%);
    background: linear-gradient(135deg, #fbf0d6 0%, var(--kino-gold) 38%, var(--kino-gold-deep) 100%);
    -webkit-box-shadow: 0 0.35em 1.4em rgba(var(--kino-gold-rgb), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.65);
    box-shadow: 0 0.35em 1.4em rgba(var(--kino-gold-rgb), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.kino-badge-vip i {
    font-size: 1.15em;
}

/* Rendered per slide in Blade, so it stays in sync with no JS. */
.kino-hero__counter {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.kino-hero__counter-sep {
    margin: 0 0.1em;
    opacity: 0.45;
}

/* ---------- Title ---------- */

/*
 * The template's .big-font is a flat 4.375em at every width, which puts ~70px
 * type on a 414px phone — one Mongolian word fills the line and the rest is
 * clipped. clamp() keeps the desktop scale and lets it fall back to something
 * a long title can actually finish inside.
 *
 * A gradient sheen was tried here (background-clip:text) and dropped: paired
 * with .line-count-1's -webkit-box clamp it intermittently rendered nothing
 * at all on narrow viewports.
 */
.kino-hero .kino-hero__title {
    font-size: clamp(2.1rem, 6.2vw, 4.375em);
    font-weight: 800;
    letter-spacing: -0.005em;
    color: #fff;
    text-shadow: 0 0.04em 0.4em rgba(0, 0, 0, 0.6);
}

/* ---------- Metadata capsules ---------- */

.kino-pill {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.4em;
    padding: 0.45em 0.9em;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(0.625em);
    backdrop-filter: blur(0.625em);
    text-decoration: none;
    -webkit-transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
    -o-transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.kino-pill i {
    font-size: 1.05em;
    opacity: 0.7;
}

.kino-pill--link:hover,
.kino-pill--link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
}

/* Not-yet-playable titles: gold-tinted so "coming soon" reads as anticipation
   rather than the muted grey badge it replaces. */
.kino-pill--soon {
    color: var(--kino-gold);
    background: rgba(var(--kino-gold-rgb), 0.1);
    border-color: rgba(var(--kino-gold-rgb), 0.32);
}

/* ---------- Synopsis ---------- */

.kino-hero .kino-hero__desc {
    max-width: 34em;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.7;
}

/* ---------- Calls to action ---------- */

.kino-hero .kino-btn {
    padding: 0.85em 1.9em;
    font-size: 0.95rem;
    font-weight: 600;
    border: 0;
    -webkit-transition: -webkit-transform 220ms ease, -webkit-box-shadow 220ms ease, background 220ms ease;
    transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.kino-hero .kino-btn:hover,
.kino-hero .kino-btn:focus-visible {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
}

.kino-hero .kino-btn--play {
    color: #fff;
    background: -webkit-linear-gradient(315deg, #ff5cbd 0%, var(--bs-primary) 52%, #8d1362 100%);
    background: linear-gradient(135deg, #ff5cbd 0%, var(--bs-primary) 52%, #8d1362 100%);
    -webkit-box-shadow: 0 0.6em 1.8em rgba(var(--bs-primary-rgb), 0.42);
    box-shadow: 0 0.6em 1.8em rgba(var(--bs-primary-rgb), 0.42);
}

.kino-hero .kino-btn--play:hover,
.kino-hero .kino-btn--play:focus-visible {
    color: #fff;
    -webkit-box-shadow: 0 0.85em 2.2em rgba(var(--bs-primary-rgb), 0.58);
    box-shadow: 0 0.85em 2.2em rgba(var(--bs-primary-rgb), 0.58);
}

.kino-hero .kino-btn--ghost {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.24);
    -webkit-backdrop-filter: blur(0.75em);
    backdrop-filter: blur(0.75em);
}

.kino-hero .kino-btn--ghost:hover,
.kino-hero .kino-btn--ghost:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.45);
}

/* ---------- Thumbnail shelf ---------- */

/* Small caps heading so the strip reads as a curated shelf. Lives inside
   .horizontal_thumb_slider, which the template hides below 992px, so it
   disappears with the strip it labels. */
.kino-thumb-strip__rule {
    width: 1.75em;
    height: 2px;
    border-radius: 2px;
    background: -webkit-linear-gradient(left, var(--kino-gold), rgba(var(--kino-gold-rgb), 0));
    background: linear-gradient(90deg, var(--kino-gold), rgba(var(--kino-gold-rgb), 0));
}

.kino-thumb-strip__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

.iq-banner-thumb-slider.kino-hero .slider .slider-bg .horizontal_thumb_slider .swiper-slide .img-box {
    position: relative;
    -webkit-transition: border-color 250ms ease, opacity 250ms ease, -webkit-transform 250ms ease, -webkit-box-shadow 250ms ease;
    -o-transition: border-color 250ms ease, opacity 250ms ease, transform 250ms ease, box-shadow 250ms ease;
    transition: border-color 250ms ease, opacity 250ms ease, transform 250ms ease, box-shadow 250ms ease;
}

.iq-banner-thumb-slider.kino-hero .slider .slider-bg .horizontal_thumb_slider .swiper-slide:hover .img-box {
    -webkit-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-box-shadow: 0 0.7em 1.6em rgba(0, 0, 0, 0.5);
    box-shadow: 0 0.7em 1.6em rgba(0, 0, 0, 0.5);
}

/* Gold ring on the title currently playing, replacing the white one above. */
.iq-banner-thumb-slider.kino-hero .slider .slider-bg .horizontal_thumb_slider .swiper-slide.swiper-slide-thumb-active .img-box {
    border-color: var(--kino-gold);
    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0.5em 1.6em rgba(var(--kino-gold-rgb), 0.22);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0.5em 1.6em rgba(var(--kino-gold-rgb), 0.22);
}

/* Hover-only play glyph: makes it obvious the thumbs drive the hero. */
.kino-thumb-play {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 250ms ease;
    -o-transition: opacity 250ms ease;
    transition: opacity 250ms ease;
}

.kino-thumb-play i {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    font-size: 0.85rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(0.375em);
    backdrop-filter: blur(0.375em);
}

.iq-banner-thumb-slider.kino-hero .slider .slider-bg .horizontal_thumb_slider .swiper-slide:hover .kino-thumb-play {
    opacity: 1;
}

/* ---------- Section rails below the hero ---------- */

/* An accent rule turns the shelf headings into a repeating brand mark instead
   of plain text. Scoped to .kino-rows so only the homepage picks it up. */
.kino-rows .main-title {
    position: relative;
    padding-left: 0.7em;
}

.kino-rows .main-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.12em;
    bottom: 0.12em;
    width: 3px;
    border-radius: 3px;
    background: -webkit-linear-gradient(top, var(--kino-gold), rgba(var(--bs-primary-rgb), 0.9));
    background: linear-gradient(180deg, var(--kino-gold), rgba(var(--bs-primary-rgb), 0.9));
}

/* ---------- Motion & small screens ---------- */

@media (prefers-reduced-motion: reduce) {

    .kino-hero .kino-btn:hover,
    .kino-hero .kino-btn:focus-visible,
    .iq-banner-thumb-slider.kino-hero .slider .slider-bg .horizontal_thumb_slider .swiper-slide:hover .img-box {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

@media (max-width: 991.98px) {

    /* The strip is hidden here, so the copy owns the full width. */
    .kino-hero .kino-hero__desc {
        max-width: none;
    }
}

@media (max-width: 575.98px) {

    .kino-hero__eyebrow {
        gap: 0.65rem;
        margin-bottom: 0.7rem;
    }

    .kino-badge-vip {
        font-size: 0.62rem;
        letter-spacing: 0.12em;
        padding: 0.4em 0.8em;
    }

    .kino-hero__counter {
        font-size: 0.68rem;
    }

    .kino-pill {
        font-size: 0.72rem;
        padding: 0.4em 0.75em;
    }

    .kino-hero .kino-btn {
        padding: 0.75em 1.4em;
        font-size: 0.88rem;
    }
}