/* ═══════════════════════════════════════════════════════════════
   Filmnab Component Library — Neon Dark Theme
   Buttons · Forms · Modals · Cards · Tabs · Auth · Profile · FAQ
   ═══════════════════════════════════════════════════════════════ */

/* ── Typography ── */

body.fn-app,
body.fn-auth {
    font-family: var(--fn-font-sans);
    font-size: var(--fn-text-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.fn-heading-display {
    font-family: var(--fn-font-display);
    font-size: var(--fn-text-3xl);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: var(--fn-text-primary);
    margin: 0;
}

.fn-heading-section {
    font-size: var(--fn-text-xl);
    font-weight: 700;
    color: var(--fn-text-primary);
    margin: 0 0 var(--fn-space-md);
}

.fn-heading-section::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-top: 0.4rem;
    border-radius: var(--fn-radius-pill);
    background: var(--fn-neon-gradient);
    box-shadow: var(--fn-neon-purple-glow);
}

[dir="rtl"] .fn-heading-section::after {
    margin-right: 0;
}

[dir="ltr"] .fn-heading-section::after {
    margin-left: 0;
}

.fn-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fn-space-md);
    margin-bottom: var(--fn-space-md);
    padding-inline: var(--fn-content-gutter);
}

.fn-section-header__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--fn-neon-purple);
    font-size: var(--fn-text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--fn-transition-fast), text-shadow var(--fn-transition-fast);
}

.fn-section-header__link:hover {
    color: var(--fn-neon-purple-light);
    text-shadow: var(--fn-neon-purple-glow);
}

/* ── Buttons ── */

.fn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    border-radius: var(--fn-radius-md);
    border: 1px solid transparent;
    font-family: inherit;
    font-weight: 600;
    font-size: var(--fn-text-sm);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--fn-transition-fast), box-shadow var(--fn-transition-fast),
        background var(--fn-transition-fast), border-color var(--fn-transition-fast), color var(--fn-transition-fast);
}

.fn-btn:focus-visible {
    outline: none;
    box-shadow: var(--fn-focus-ring);
}

.fn-btn:disabled,
.fn-btn.disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

.fn-btn-primary,
body.fn-app .btn-success.btn-movie-info,
body.fn-app .btn-primary.moraba-bold {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--fn-neon-purple);
    border-color: var(--fn-neon-purple);
    color: #fff !important;
    box-shadow: var(--fn-neon-purple-glow-btn);
}

.fn-btn-primary:hover,
body.fn-app .btn-success.btn-movie-info:hover,
body.fn-app .btn-primary.moraba-bold:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: var(--fn-neon-purple-glow-btn-strong);
}

.fn-btn-secondary {
    background: var(--fn-glass);
    border-color: var(--fn-border-subtle);
    color: var(--fn-text-primary);
    backdrop-filter: blur(8px);
}

.fn-btn-secondary:hover {
    border-color: var(--fn-neon-purple);
    color: var(--fn-neon-purple-light);
    box-shadow: var(--fn-neon-purple-glow);
}

.fn-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--fn-text-muted);
}

.fn-btn-ghost:hover {
    color: var(--fn-neon-purple);
    background: rgba(168, 85, 247, 0.1);
    box-shadow: var(--fn-neon-purple-glow-subtle);
}

.fn-btn-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: var(--fn-glass);
    border: 1px solid var(--fn-border-subtle);
    color: #fff;
}

.fn-btn-icon:hover {
    border-color: var(--fn-neon-purple);
    box-shadow: var(--fn-neon-purple-glow);
}

.fn-btn-sm {
    padding: 0.35rem 0.85rem;
    font-size: var(--fn-text-xs);
    border-radius: var(--fn-radius-sm);
}

.fn-btn-lg {
    padding: 0.75rem 1.75rem;
    font-size: var(--fn-text-base);
    border-radius: var(--fn-radius-lg);
}

.fn-btn-pill {
    border-radius: var(--fn-radius-pill);
}

/* Legacy moraba login button */
body.fn-auth .btn.moraba,
body.fn-app #login-button.btn.moraba,
body.fn-app #activation-button.btn.moraba {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--fn-neon-purple) !important;
    color: #fff !important;
    border-radius: var(--fn-radius-md) !important;
    padding: 0.65rem 1.5rem !important;
    box-shadow: var(--fn-neon-purple-glow-btn);
    width: 100%;
}

body.fn-auth .btn.moraba:hover,
body.fn-app #login-button.btn.moraba:hover {
    box-shadow: var(--fn-neon-purple-glow-btn-strong);
    transform: translateY(-1px);
}

/* ── Forms ── */

.fn-form-group {
    margin-bottom: var(--fn-space-md);
}

.fn-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--fn-text-sm);
    font-weight: 500;
    color: var(--fn-text-muted);
}

.fn-input,
body.fn-app .form-control,
body.fn-auth .form-control,
body.fn-app .login-input,
body.fn-app .activeCode-input,
body.fn-app .input-search,
body.fn-app .comment-textarea {
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: var(--fn-radius-md);
    border: 1px solid var(--fn-border-subtle);
    background: var(--fn-glass);
    color: var(--fn-text-primary);
    font-family: inherit;
    font-size: var(--fn-text-sm);
    transition: border-color var(--fn-transition-fast), box-shadow var(--fn-transition-fast), background var(--fn-transition-fast);
}

.fn-input::placeholder,
body.fn-app .form-control::placeholder,
body.fn-auth .form-control::placeholder,
body.fn-app .login-input::placeholder {
    color: var(--fn-text-dim);
}

.fn-input:focus,
body.fn-app .form-control:focus,
body.fn-auth .form-control:focus,
body.fn-app .login-input:focus,
body.fn-app .input-search:focus,
body.fn-app .comment-textarea:focus {
    outline: none;
    border-color: var(--fn-neon-purple);
    background: rgba(168, 85, 247, 0.08);
    box-shadow: var(--fn-neon-purple-glow);
    color: var(--fn-text-primary);
}

.fn-input--pill,
body.fn-app .input-search.rounded-pill {
    border-radius: var(--fn-radius-pill);
    padding-inline: 1.25rem;
}

.fn-input.is-invalid {
    border-color: var(--fn-cherry);
    box-shadow: var(--fn-cherry-glow);
}

.fn-form-hint {
    margin-top: 0.35rem;
    font-size: var(--fn-text-xs);
    color: var(--fn-text-dim);
}

.fn-form-error {
    color: var(--fn-cherry);
    font-size: var(--fn-text-sm);
}

/* ── Modals ── */

body.fn-app .modal-content,
body.fn-app .login-dialog,
body.fn-auth .login-dialog,
body.fn-app .bg-searchbar {
    background: var(--fn-bg-elevated) !important;
    border: 1px solid var(--fn-border-subtle);
    border-radius: var(--fn-radius-lg);
    box-shadow: var(--fn-shadow-lg);
    color: var(--fn-text-primary);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.fn-app .modal-header,
body.fn-auth .modal-header {
    border-bottom: 1px solid var(--fn-border-subtle);
    padding: var(--fn-space-md) var(--fn-space-lg);
}

body.fn-app .modal-body,
body.fn-auth .modal-body {
    padding: var(--fn-space-lg);
}

body.fn-app .modal-title,
body.fn-auth .modal-title,
body.fn-app #login-modal-label {
    color: var(--fn-text-primary) !important;
    font-weight: 700;
}

body.fn-app .modal-header .btn-close,
body.fn-auth .modal-header .btn-close {
    filter: invert(1);
    opacity: 0.7;
}

body.fn-app .modal-header .btn-close:hover {
    opacity: 1;
}

body.fn-app .login-dialog label,
body.fn-app .login-dialog h6,
body.fn-app .login-dialog b {
    color: var(--fn-text-muted) !important;
}

/* ── Cards ── */

.fn-card {
    background: var(--fn-glass);
    border: 1px solid var(--fn-border-subtle);
    border-radius: var(--fn-radius-lg);
    overflow: hidden;
    transition: transform var(--fn-transition-base), box-shadow var(--fn-transition-base), border-color var(--fn-transition-base);
}

.fn-card:hover {
    border-color: var(--fn-border-active);
    box-shadow: var(--fn-neon-purple-glow);
    transform: translateY(-2px);
}

.fn-card-body {
    padding: var(--fn-space-lg);
}

.fn-card--elevated {
    background: var(--fn-bg-surface);
}

/* Grid cards — neon hover */
body.fn-app .movies-grid-card {
    border-radius: var(--fn-radius-md);
    background: var(--fn-bg-surface);
    border: 1px solid var(--fn-border-subtle);
}

body.fn-app .movies-grid-card:hover {
    border-color: var(--fn-neon-purple);
    box-shadow: var(--fn-neon-purple-glow);
    transform: translateY(-3px) scale(1.01);
}

/* ── Badges & Chips ── */

.fn-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: var(--fn-radius-pill);
    font-size: var(--fn-text-xs);
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid var(--fn-border-subtle);
    background: var(--fn-glass);
    color: var(--fn-text-primary);
}

.fn-badge--neon {
    border-color: var(--fn-neon-purple);
    color: var(--fn-neon-purple-light);
    box-shadow: var(--fn-neon-purple-glow);
}

.fn-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    border-radius: var(--fn-radius-pill);
    font-size: var(--fn-text-sm);
    font-weight: 500;
    border: 1px solid var(--fn-border-subtle);
    background: var(--fn-glass);
    color: var(--fn-text-muted);
    cursor: pointer;
    transition: all var(--fn-transition-fast);
    white-space: nowrap;
}

.fn-chip:hover {
    color: var(--fn-text-primary);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--fn-neon-purple);
    box-shadow: var(--fn-neon-purple-glow-subtle);
}

.fn-chip.is-active,
body.fn-app .text-search-active-blue,
body.fn-app .text-search-active-white {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--fn-neon-purple) !important;
    border-color: var(--fn-neon-purple) !important;
    color: var(--fn-text-primary) !important;
    box-shadow: var(--fn-neon-purple-glow-btn);
}

body.fn-app .text-search {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    margin: 0.25rem;
    border-radius: var(--fn-radius-pill);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--fn-transition-fast);
}

body.fn-app .text-search:hover:not(.text-search-active-blue):not(.text-search-active-white) {
    border-color: rgba(168, 85, 247, 0.35);
    box-shadow: var(--fn-neon-purple-glow-subtle);
}

body.fn-app .movie-tag {
    background: var(--fn-glass) !important;
    border: 1px solid var(--fn-border-subtle) !important;
    color: var(--fn-text-primary) !important;
    border-radius: var(--fn-radius-sm) !important;
    font-size: var(--fn-text-xs) !important;
}

body.fn-app .movie-tag:hover {
    border-color: var(--fn-neon-purple) !important;
    color: var(--fn-neon-purple-light) !important;
    box-shadow: var(--fn-neon-purple-glow-subtle);
}

/* ── Tabs & Nav Pills ── */

body.fn-app .nav-tabs {
    border-bottom: 1px solid var(--fn-border-subtle);
    gap: 0.25rem;
}

body.fn-app .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: var(--fn-radius-sm) var(--fn-radius-sm) 0 0;
    color: var(--fn-text-muted) !important;
    padding: 0.55rem 1rem;
    transition: color var(--fn-transition-fast), background var(--fn-transition-fast), box-shadow var(--fn-transition-fast), border-color var(--fn-transition-fast);
}

body.fn-app .nav-tabs .nav-link:hover {
    color: var(--fn-neon-purple-light) !important;
    background: rgba(168, 85, 247, 0.08);
    border-color: transparent;
    box-shadow: var(--fn-neon-purple-glow-subtle);
}

body.fn-app .nav-tabs .nav-link.active {
    color: var(--fn-neon-purple) !important;
    background: rgba(168, 85, 247, 0.12);
    border-color: var(--fn-border-subtle) var(--fn-border-subtle) var(--fn-bg-deep);
    box-shadow: inset 0 -2px 0 var(--fn-neon-purple);
}

body.fn-app .nav-pills .nav-link,
body.fn-app .vertical-pills .nav-link {
    color: var(--fn-text-muted) !important;
    border: 1px solid transparent;
    border-radius: var(--fn-radius-md);
    margin-bottom: 0.35rem;
    padding: 0.55rem 1rem;
    text-align: start;
    transition: all var(--fn-transition-fast);
}

body.fn-app .nav-pills .nav-link:hover,
body.fn-app .vertical-pills .nav-link:hover {
    color: var(--fn-text-primary) !important;
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.35);
    box-shadow: var(--fn-neon-purple-glow-subtle);
}

body.fn-app .nav-pills .nav-link.active,
body.fn-app .vertical-pills .nav-link.active {
    color: #fff !important;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--fn-neon-purple);
    box-shadow: var(--fn-neon-purple-glow-btn);
}

body.fn-app .movie-tab-btn {
    background: var(--fn-glass) !important;
    border: 1px solid var(--fn-border-subtle) !important;
    color: var(--fn-text-muted) !important;
    border-radius: var(--fn-radius-md) !important;
}

body.fn-app .movie-tab-btn.active,
body.fn-app .movie-tab-btn:hover {
    border-color: var(--fn-neon-purple) !important;
    color: var(--fn-neon-purple-light) !important;
    box-shadow: var(--fn-neon-purple-glow);
}

/* ── Auth shell ── */

body.fn-auth {
    background: var(--fn-bg-deep);
    color: var(--fn-text-primary);
    min-height: 100vh;
}

body.fn-auth::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 0%, rgba(168, 85, 247, 0.18), transparent 55%),
        radial-gradient(ellipse 60% 50% at 80% 100%, rgba(124, 58, 237, 0.12), transparent 50%),
        var(--fn-bg-deep);
    z-index: -1;
    pointer-events: none;
}

.fn-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--fn-space-xl) var(--fn-content-gutter);
}

.fn-auth-card {
    width: 100%;
    max-width: 420px;
    padding: var(--fn-space-xl);
    background: var(--fn-glass);
    border: 1px solid var(--fn-border-subtle);
    border-radius: var(--fn-radius-xl);
    backdrop-filter: blur(16px);
    box-shadow: var(--fn-shadow-lg);
}

.fn-auth-card .ruls-a {
    color: var(--fn-neon-purple) !important;
}

.fn-auth-card .ruls-p svg path {
    stroke: var(--fn-neon-purple);
}

/* ── Profile ── */

.fn-profile-page {
    padding: var(--fn-space-lg) var(--fn-content-gutter) var(--fn-space-2xl);
    max-width: var(--fn-content-max);
    margin-inline: auto;
}

.fn-profile-panel {
    background: var(--fn-glass);
    border: 1px solid var(--fn-border-subtle);
    border-radius: var(--fn-radius-lg);
    padding: var(--fn-space-lg);
}

.fn-profile-panel p {
    color: var(--fn-text-muted);
    margin-bottom: 0.5rem;
}

.fn-profile-panel hr {
    border-color: var(--fn-border-subtle);
    opacity: 1;
}

body.fn-app .profile-btn a {
    border-radius: var(--fn-radius-md);
    transition: background var(--fn-transition-fast), color var(--fn-transition-fast);
}

body.fn-app .profile-btn a:hover,
body.fn-app .profile-btn a.active {
    background: rgba(168, 85, 247, 0.15) !important;
    color: var(--fn-neon-purple) !important;
}

/* ── Subscription plans ── */

body.fn-app .plan-main-back {
    background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(168, 85, 247, 0.22), transparent 70%) !important;
}

body.fn-app .plan-back,
body.fn-app .plan-card,
body.fn-app .home-plan-card {
    background: var(--fn-glass) !important;
    border: 1px solid var(--fn-border-subtle) !important;
    border-radius: var(--fn-radius-lg) !important;
    color: var(--fn-text-primary) !important;
}

body.fn-app .hover-plan:hover {
    background: rgba(168, 85, 247, 0.15) !important;
    border-color: var(--fn-neon-purple) !important;
    box-shadow: var(--fn-neon-purple-glow);
}

body.fn-app .hover-plan:hover .planItemfornewuser,
body.fn-app .hover-plan:hover .btn-buysubscribe-btn {
    background: transparent !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid var(--fn-neon-purple);
    box-shadow: var(--fn-neon-purple-glow-btn);
}

body.fn-app .plan-title,
body.fn-app .plan-desc {
    color: var(--fn-text-primary) !important;
    text-shadow: none;
}

body.fn-app .plan-btn {
    background: transparent !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid var(--fn-neon-purple);
    box-shadow: var(--fn-neon-purple-glow-btn);
}

body.fn-app .threeMounth,
body.fn-app .sixMounth,
body.fn-app .oneMounth {
    background: var(--fn-bg-surface) !important;
    border: 1px solid var(--fn-border-subtle) !important;
}

body.fn-app .threeMounth:hover,
body.fn-app .sixMounth:hover,
body.fn-app .oneMounth:hover {
    border-color: var(--fn-neon-purple) !important;
    box-shadow: var(--fn-neon-purple-glow);
}

/* ── FAQ ── */

.fn-faq-section {
    padding: var(--fn-space-xl) var(--fn-content-gutter);
    max-width: var(--fn-content-max);
    margin-inline: auto;
}

.fn-faq-section .line-sm {
    display: inline-block;
    width: 4px;
    height: 1.75rem;
    margin-inline-end: 0.75rem;
    border-radius: var(--fn-radius-pill);
    background: var(--fn-neon-gradient);
    box-shadow: var(--fn-neon-purple-glow);
    vertical-align: middle;
}

.fn-faq-section .h2 {
    color: var(--fn-text-primary);
    font-size: var(--fn-text-2xl);
    font-weight: 700;
}

.fn-faq-section .tab-body h3 {
    font-size: var(--fn-text-lg);
    color: var(--fn-neon-purple-light);
    margin-top: var(--fn-space-md);
    margin-bottom: 0.35rem;
}

.fn-faq-section .tab-body p {
    color: var(--fn-text-muted);
    line-height: 1.7;
}

/* ── Competition ── */

.fn-competition-page {
    padding: var(--fn-space-lg) var(--fn-content-gutter) var(--fn-space-2xl);
    max-width: var(--fn-content-max);
    margin-inline: auto;
}

.fn-competition-page h5 {
    color: var(--fn-text-primary);
    font-weight: 700;
}

.fn-competition-page p {
    color: var(--fn-text-muted);
}

.fn-competition-page hr {
    border-color: var(--fn-border-subtle);
    opacity: 1;
}

/* ── Search page ── */

body.fn-app .search-page {
    position: relative;
    min-height: clamp(200px, 30vh, 320px);
    padding: var(--fn-space-xl) var(--fn-content-gutter);
}

body.fn-app .search-page > img {
    opacity: 0.15;
    pointer-events: none;
    object-fit: cover;
    max-height: 320px;
}

body.fn-app .search-page .input-group {
    max-width: 640px;
    margin-inline: auto;
}

body.fn-app .search-page .gold {
    color: var(--fn-neon-purple) !important;
}

/* ── Player chrome ── */

body.fn-player {
    background: #000;
}

body.fn-player .vjs-theme-city {
    --vjs-theme-city--primary: var(--fn-neon-purple);
}

body.fn-player .vjs-play-progress,
body.fn-player .vjs-volume-level {
    background-color: var(--fn-neon-purple) !important;
}

body.fn-player .vjs-slider-bar {
    background: rgba(168, 85, 247, 0.35) !important;
}

body.fn-player .vjs-done-button {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--fn-neon-purple) !important;
    border-color: var(--fn-neon-purple) !important;
    box-shadow: var(--fn-neon-purple-glow-btn);
}

body.fn-player .vjs-default-button {
    background: var(--fn-glass) !important;
    border-color: var(--fn-border-subtle) !important;
}

body.fn-player #myplayer-adsBtn {
    border-color: var(--fn-neon-purple) !important;
    background: rgba(168, 85, 247, 0.25) !important;
}

body.fn-app .alert-secondary {
    background: var(--fn-glass);
    border: 1px solid var(--fn-border-subtle);
    color: var(--fn-text-primary);
    border-radius: var(--fn-radius-md);
}

.fn-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--fn-space-2xl) var(--fn-space-lg);
    color: var(--fn-text-muted);
}

.fn-empty-state__icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--fn-space-md);
    color: var(--fn-neon-purple);
    opacity: 0.7;
}

.fn-empty-state__title {
    font-size: var(--fn-text-xl);
    font-weight: 700;
    color: var(--fn-text-primary);
    margin-bottom: 0.35rem;
}

/* ── Loading ── */

body.fn-app .spinner-border {
    color: var(--fn-neon-purple);
    border-color: rgba(168, 85, 247, 0.25);
    border-right-color: var(--fn-neon-purple);
}

/* ── Reels featured glow ── */

.fn-reel-card.is-featured,
.fn-reel-card:hover {
    border-color: var(--fn-neon-purple);
    box-shadow: var(--fn-neon-purple-glow);
    transform: scale(1.03);
}

.fn-reel-card {
    transition: transform var(--fn-transition-base), box-shadow var(--fn-transition-base), border-color var(--fn-transition-base);
}

/* ── Reels stats overlay (CategoryReels + Reels Viewer) ── */

.fn-reel-stats-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.fn-reel-like-badge {
    position: absolute;
    top: max(72px, calc(env(safe-area-inset-top, 0px) + 56px));
    inset-inline-start: max(12px, env(safe-area-inset-left, 0px));
    z-index: 1;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.fn-reel-stats-rail {
    position: absolute;
    inset-inline-end: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(120px, calc(env(safe-area-inset-bottom, 0px) + 100px));
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.fn-reel-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    line-height: 1.2;
    text-align: center;
}

.fn-reel-stat svg {
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.75));
}

/* ── Content container ── */

.fn-page-container {
    width: 100%;
    max-width: var(--fn-content-max);
    margin-inline: auto;
    padding-inline: var(--fn-content-gutter);
}

/* ── Accessibility ── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .fn-btn-primary:hover,
    .fn-card:hover,
    body.fn-app .movies-grid-card:hover {
        transform: none;
    }
}

/* ── Responsive tap targets ── */

@media (max-width: 767.98px) {
    .fn-btn,
    .fn-chip,
    body.fn-app .text-search {
        min-height: 44px;
    }

    .fn-auth-card {
        padding: var(--fn-space-lg);
    }

    .fn-faq-section .d-flex.align-items-start {
        flex-direction: column;
    }

    .fn-faq-section .vertical-pills {
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        margin-bottom: var(--fn-space-md);
        padding-bottom: 0.25rem;
        scrollbar-width: none;
    }

    .fn-faq-section .vertical-pills::-webkit-scrollbar {
        display: none;
    }

    .fn-faq-section .vertical-pills .nav-link {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

@media (min-width: 1600px) {
    :root {
        --fn-content-max: 1520px;
    }
}