/*
 * Filmnab responsive QA layer.
 * Loaded after feature/page styles to normalize sizes, prevent collision/overflow,
 * and keep touch targets usable across phone, tablet, laptop and desktop widths.
 */
:root {
    --fn-qa-gutter: clamp(0.75rem, 2.4vw, 1.5rem);
    --fn-qa-card-radius: clamp(14px, 1.4vw, 22px);
    --fn-qa-control-h: 44px;
    --fn-qa-icon: 1.25rem;
    --fn-qa-chip-h: 34px;
    --fn-qa-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: clip;
}

body.fn-app {
    overflow-x: clip;
    min-width: 320px;
}

body.fn-app *,
body.fn-app *::before,
body.fn-app *::after {
    box-sizing: border-box;
}

body.fn-app :where(.container, .container-fluid) {
    max-width: 100%;
}

body.fn-app :where(.row, [class*="row-cols"], .d-flex, .swiper-wrapper, .fn-hero-row, .fn-cat-spotlight-shell, .fn-search-results-head, .fn-feed-section-head) > * {
    min-width: 0;
}

body.fn-app :where(a, button, input, select, textarea, .btn, [role="button"]) {
    max-width: 100%;
}

body.fn-app :where(button, .btn, .fn-btn, .fn-btn-primary, .fn-btn-play, .fn-btn-teaser, .fn-floating-action, .site-header__icon-btn, .site-header__cta, .fn-sidenav-item, .fn-search-quick-chip, .fn-feed-view-all, .fn-search-reset-all) {
    min-height: var(--fn-qa-control-h);
    min-width: var(--fn-qa-control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    line-height: 1.25;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

body.fn-app :where(.btn, .fn-btn, .fn-btn-primary, .fn-btn-play, .fn-btn-teaser, .site-header__cta, .fn-feed-view-all, .fn-search-reset-all) {
    padding-inline: clamp(0.75rem, 1.6vw, 1.15rem);
    white-space: nowrap;
}

body.fn-app :where(svg, .fa, [class^="fa-"], [class*=" fa-"], .site-header__nav-icon, .fn-floating-action span) {
    flex: 0 0 auto;
    width: var(--fn-qa-icon);
    height: var(--fn-qa-icon);
    line-height: 1;
}

body.fn-app :where(img, video, canvas, iframe, svg) {
    max-width: 100%;
}

body.fn-app :where(img) {
    height: auto;
    vertical-align: middle;
}

body.fn-app :where(.fn-poster-frame, .movies-grid-media, .fn-reels-explore-card, .fn-cat-spotlight-card, .newMovies-card, .card-hover, .toScale, .text-img, .aSeriByGenre) {
    border-radius: var(--fn-qa-card-radius);
    overflow: hidden;
    contain: layout paint;
}

body.fn-app :where(.fn-poster-frame img, .movies-grid-image, .fn-reels-explore-poster, .fn-cat-spotlight-card img, .newMovies-card img, .card .cinemaImage, .card .img-card-hover, .blur-img, .toScale img, .aSeriByGenre img) {
    display: block;
    width: 100%;
    object-fit: cover;
}

body.fn-app :where(.movies-grid-title, .movies-grid-subtitle, .fn-home-poster-title, .fn-related-docs-title, .fn-related-docs-item-title, .fn-reels-explore-title, .fn-cat-spotlight-title, .fn-feed-section-title, .site-header__nav-link, .fn-sidenav-label, .modal-title, .fn-hero-title, .fn-hero-entitle, .fn-hero-desc, .txt-on-img, .txt-on-img h6) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.fn-app :where(.movies-grid-title, .fn-home-poster-title, .fn-related-docs-item-title, .fn-reels-explore-title, .fn-cat-spotlight-title) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

body.fn-app :where(.banner-tag, .cinema-tag, .movie-tag, .fn-hero-meta-item, .fn-cat-spotlight-stat, .fn-search-quick-chip, .fn-filter-chip, .badge, .chip) {
    min-height: var(--fn-qa-chip-h);
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.25;
}

body.fn-app :where(input, select, textarea, .form-control, .fn-input, .input-search, .profile-input) {
    width: 100%;
    min-width: 0;
    min-height: var(--fn-qa-control-h);
    font-size: max(16px, 1rem);
}

body.fn-app :where(.modal-dialog) {
    width: min(100% - 1rem, var(--bs-modal-width, 720px));
    max-width: min(100% - 1rem, var(--bs-modal-width, 720px));
    margin-inline: auto;
}

body.fn-app :where(.modal-content) {
    max-height: min(88svh, 760px);
    overflow: hidden;
    border-radius: clamp(16px, 2vw, 24px);
}

body.fn-app :where(.modal-body) {
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

body.fn-app .fn-floating-actions {
    inset-inline-end: max(1rem, env(safe-area-inset-right, 0px));
    inset-block-end: calc(1rem + var(--fn-qa-safe-bottom));
    gap: 0.65rem;
}

@media (max-width: 991.98px) {
    body.fn-app .fn-floating-actions {
        inset-block-end: calc(5.2rem + var(--fn-qa-safe-bottom));
    }
}

body.fn-app .fn-floating-action {
    width: 46px;
    height: 46px;
    border-radius: 16px;
}

body.fn-app .fn-network-banner {
    inset-inline: var(--fn-qa-gutter);
    max-width: min(680px, calc(100% - (2 * var(--fn-qa-gutter))));
    margin-inline: auto;
    overflow-wrap: anywhere;
}

body.fn-app .site-header__bar {
    min-width: 0;
    gap: clamp(0.35rem, 1.2vw, 1rem);
}

body.fn-app .site-header__actions,
body.fn-app .site-header__nav,
body.fn-app .site-header__brand {
    min-width: 0;
}

body.fn-app .site-header__logo,
body.fn-app .site-header .menu-logo {
    max-height: clamp(30px, 5vw, 42px);
    width: auto;
    object-fit: contain;
}

body.fn-app .fn-app-main {
    min-width: 0;
}

body.fn-app .main-margin-top {
    margin-top: clamp(0.75rem, 2vw, 1.5rem);
}

@media (max-width: 1199.98px) {
    :root { --fn-qa-gutter: clamp(0.75rem, 2vw, 1.25rem); }

    body.fn-app :where(.fn-feed-section-head, .fn-search-results-head, .fn-section-header) {
        gap: 0.75rem;
        flex-wrap: wrap;
    }
}

@media (max-width: 991.98px) {
    body.fn-app .fn-app-main {
        width: 100%;
    }

    body.fn-app :where(.fn-hero-actions, .movie-actions, .fn-cat-spotlight-actions, .fn-search-toolbar) {
        flex-wrap: wrap;
    }

    body.fn-app :where(.fn-hero-actions > *, .movie-actions > *) {
        flex: 1 1 auto;
    }

    body.fn-app .site-header__cta {
        min-width: 44px;
        padding-inline: 0.8rem;
    }
}

@media (max-width: 767.98px) {
    :root {
        --fn-qa-control-h: 46px;
        --fn-qa-chip-h: 32px;
        --fn-qa-icon: 1.15rem;
    }

    body.fn-app :where(.container, .container-fluid) {
        padding-inline: var(--fn-qa-gutter) !important;
    }

    body.fn-app :where(.fn-feed-section-title, .title, .title-blue, h1, h2, h3) {
        text-wrap: balance;
    }

    body.fn-app :where(.btn, .fn-btn, .fn-btn-primary, .fn-btn-play, .fn-btn-teaser, .fn-feed-view-all, .fn-search-reset-all) {
        font-size: clamp(0.82rem, 3.5vw, 0.95rem) !important;
        padding-inline: 0.8rem !important;
    }

    body.fn-app :where(.fn-floating-actions) {
        transform: scale(0.94);
        transform-origin: bottom right;
    }

    body.fn-app :where(.modal-dialog) {
        width: calc(100% - 1rem);
    }
}

@media (max-width: 575.98px) {
    :root { --fn-qa-gutter: 0.85rem; }

    body.fn-app :where(.fn-hero-meta, .fn-hero-genres, .movies-grid-tags, .fn-cat-spotlight-stats) {
        gap: 0.45rem;
    }

    body.fn-app :where(.banner-tag, .cinema-tag, .movie-tag, .fn-hero-meta-item, .fn-cat-spotlight-stat, .badge, .chip) {
        font-size: 0.78rem;
        padding-inline: 0.65rem;
    }

    body.fn-app :where(.fn-home-poster-title, .movies-grid-title, .fn-related-docs-item-title) {
        font-size: clamp(0.78rem, 3.6vw, 0.95rem);
    }

    body.fn-app .fn-network-banner {
        inset-inline: 0.75rem;
        bottom: calc(0.75rem + var(--fn-qa-safe-bottom));
    }
}

@media (max-width: 380px) {
    :root {
        --fn-qa-gutter: 0.65rem;
        --fn-qa-control-h: 44px;
    }

    body.fn-app :where(.btn, .fn-btn, .fn-btn-primary, .fn-btn-play, .fn-btn-teaser, .site-header__cta) {
        padding-inline: 0.65rem !important;
        font-size: 0.8rem !important;
    }

    body.fn-app :where(.fn-floating-action) {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }
}

@media (min-width: 1440px) {
    body.fn-app :where(.container, .container-fluid, .fn-feed-section, .fn-category-spotlight, .fn-info-section) {
        max-width: 1600px;
        margin-inline: auto;
    }
}

@media (hover: none) and (pointer: coarse) {
    body.fn-app :where(.card-hover:hover, .toScale:hover, .fn-cat-spotlight-card:hover) {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.fn-app *,
    body.fn-app *::before,
    body.fn-app *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Compact inline controls: do not let global touch-target rules bloat chips/badges. */
body.fn-app .fn-filter-chip {
    min-width: 0 !important;
    min-height: 28px !important;
    height: auto !important;
    padding: 0.25rem 0.5rem 0.25rem 0.35rem !important;
    gap: 0.35rem !important;
    border-radius: 14px !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    box-shadow: 0 0 0 1px rgba(168,85,247,0.55), 0 0 16px rgba(168,85,247,0.24) !important;
}

body.fn-app .fn-filter-chip-remove,
body.fn-app .btn-close {
    min-width: 22px !important;
    width: 22px !important;
    min-height: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

body.fn-app .fn-filter-chip-remove {
    background: rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.86) !important;
}

body.fn-app .fn-filter-chip-remove:hover,
body.fn-app .fn-filter-chip-remove:focus-visible {
    background: rgba(168,85,247,0.28) !important;
    color: #fff !important;
}

body.fn-app .fn-cat-spotlight-tab,
body.fn-app .fn-filter-dropdown-trigger {
    min-height: 36px !important;
    min-width: 0 !important;
    padding-block: 0.42rem !important;
    border-radius: 18px !important;
}

@media (max-width: 575.98px) {
    body.fn-app .fn-filter-chip {
        min-height: 26px !important;
        font-size: 0.74rem !important;
        border-radius: 13px !important;
    }

    body.fn-app .fn-filter-chip-remove,
    body.fn-app .btn-close {
        min-width: 20px !important;
        width: 20px !important;
        min-height: 20px !important;
        height: 20px !important;
        flex-basis: 20px !important;
    }
}

/* Soft-rectangle shape pass: replace over-rounded pills with subtle rounded rectangles. */
body.fn-app :where(.fn-filter-chip, .fn-cat-spotlight-tab, .fn-filter-dropdown-trigger, .fn-search-quick-chip, .fn-filter-chip, .fn-filter-option, .fn-feed-view-all, .fn-search-reset-all, .movie-tag, .banner-tag, .cinema-tag, .fn-hero-meta-item, .fn-cat-spotlight-stat, .badge, .chip) {
    border-radius: 9px !important;
}

body.fn-app :where(.fn-filter-chip) {
    border-radius: 9px !important;
    padding-inline: 0.5rem 0.4rem !important;
}

body.fn-app :where(.fn-filter-chip-remove, .btn-close) {
    border-radius: 7px !important;
}

body.fn-app :where(.fn-cat-spotlight-tab, .fn-filter-dropdown-trigger, .fn-search-quick-chip) {
    border-radius: 10px !important;
}

body.fn-app :where(.fn-filter-dropdown-panel, .modal-content, .fn-floating-action) {
    border-radius: 12px !important;
}

@media (max-width: 575.98px) {
    body.fn-app :where(.fn-filter-chip, .fn-cat-spotlight-tab, .fn-filter-dropdown-trigger, .fn-search-quick-chip, .movie-tag, .banner-tag, .cinema-tag, .fn-hero-meta-item, .fn-cat-spotlight-stat, .badge, .chip) {
        border-radius: 8px !important;
    }

    body.fn-app :where(.fn-filter-chip-remove, .btn-close) {
        border-radius: 6px !important;
    }
}

/* Final hard stop: no capsule/racetrack pills for chips and category controls. */
body.fn-app .fn-filter-chip,
body.fn-app .fn-cat-spotlight-tab,
body.fn-app .fn-filter-dropdown-trigger,
body.fn-app .fn-search-quick-chip,
body.fn-app .fn-filter-option,
body.fn-app .fn-feed-view-all,
body.fn-app .fn-search-reset-all,
body.fn-app .movie-tag,
body.fn-app .banner-tag,
body.fn-app .cinema-tag,
body.fn-app .fn-hero-meta-item,
body.fn-app .fn-cat-spotlight-stat,
body.fn-app .badge,
body.fn-app .chip {
    border-radius: 4px !important;
}

body.fn-app .fn-filter-chip {
    min-height: 28px !important;
    padding: 0.25rem 0.5rem !important;
    box-shadow: 0 0 0 1px rgba(168,85,247,0.5), 0 0 10px rgba(168,85,247,0.18) !important;
}

body.fn-app .fn-filter-chip-remove,
body.fn-app .btn-close {
    border-radius: 3px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    flex: 0 0 20px !important;
}

body.fn-app .fn-filter-dropdown-panel,
body.fn-app .modal-content,
body.fn-app .fn-floating-action {
    border-radius: 6px !important;
}