/**
 * Progressive Web App (PWA) Mobile-First Design System
 * Exclusively active when running as an installed PWA (.is-pwa-standalone / .is-pwa-app)
 * Strictly adheres to system white-label and branding configurations via CSS variables.
 */

/* ==========================================================================
   1. CSS Custom Properties & Base Setup
   ========================================================================== */
:root {
    --pwa-theme-color: #e50914;
    --pwa-theme-rgb: 229, 9, 20;
    --pwa-theme-contrast: #ffffff;
    --pwa-theme-glow: rgba(var(--pwa-theme-rgb), 0.38);
    --pwa-theme-glow-soft: rgba(var(--pwa-theme-rgb), 0.16);
    --pwa-bg-color: #0e1015;
    --pwa-surface: #161820;
    --pwa-surface-glass: rgba(24, 26, 34, 0.85);
    --pwa-surface-hover: #222530;
    --pwa-border: rgba(255, 255, 255, 0.1);
    --pwa-border-subtle: rgba(255, 255, 255, 0.06);
    --pwa-text-primary: #ffffff;
    --pwa-text-secondary: #9ca3af;
    --pwa-text-muted: #6b7280;
    --pwa-nav-height: 116px;
    --pwa-dock-height: 56px;
    --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
    --pwa-safe-top: env(safe-area-inset-top, 0px);
    --pwa-transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --pwa-radius-card: 28px;
    --pwa-radius-pill: 9999px;
}

/* ==========================================================================
   2. Default State (Normal Browser / Website)
   Hide all installed-PWA UI components when in normal web browser mode
   ========================================================================== */
.pwa-mobile-topbar,
.pwa-bottom-dock,
.pwa-bottom-sheet:not(.show):not(.closing),
.pwa-sheet-backdrop:not(.show):not(.closing),
.pwa-splash-sequence:not(.active):not(.show),
#pwa-page-loader:not(.active):not(.closing) {
    display: none !important;
}

/* Hide PWA components completely on standard non-PWA browser sessions */
html:not(.is-pwa-standalone) #pwa-page-loader,
body:not(.is-pwa-standalone) #pwa-page-loader {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   3. Installed PWA State (.is-pwa-standalone on html/body)
   ========================================================================== */
html.is-pwa-standalone,
body.is-pwa-standalone {
    background-color: var(--pwa-bg-color) !important;
    overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

body.is-pwa-standalone {
    padding-top: calc(var(--pwa-nav-height) + var(--pwa-safe-top)) !important;
    padding-bottom: calc(var(--pwa-dock-height) + var(--pwa-safe-bottom) + 36px) !important;
}

/* Hide standard desktop headers, footers & generic page loader inside installed PWA */
body.is-pwa-standalone>header:not(.pwa-mobile-topbar),
body.is-pwa-standalone .iq-top-navbar,
body.is-pwa-standalone footer,
body.is-pwa-standalone .footer-one,
body.is-pwa-standalone .pwa-install-prompt-card,
html.is-pwa-standalone #page-loader,
body.is-pwa-standalone #page-loader {
    display: none !important;
}

/* Enable PWA-specific UI */
body.is-pwa-standalone .pwa-mobile-topbar {
    display: block !important;
}

body.is-pwa-standalone .pwa-bottom-dock {
    display: block !important;
}

body.is-pwa-standalone .pwa-splash-sequence.active,
body.is-pwa-standalone .pwa-splash-sequence.show,
html.is-pwa-standalone .pwa-splash-sequence.active,
html.is-pwa-standalone .pwa-splash-sequence.show,
.pwa-splash-sequence.active,
.pwa-splash-sequence.show {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10000000 !important;
}

html.is-pwa-standalone #pwa-page-loader,
body.is-pwa-standalone #pwa-page-loader,
.is-pwa-standalone #pwa-page-loader {
    display: flex !important;
}

html.is-pwa-standalone #pwa-page-loader.active,
body.is-pwa-standalone #pwa-page-loader.active,
.is-pwa-standalone #pwa-page-loader.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

html.is-pwa-standalone #pwa-page-loader.closing,
body.is-pwa-standalone #pwa-page-loader.closing,
.is-pwa-standalone #pwa-page-loader.closing {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Strictly suppress PWA page loader when title details modal or any overlay is active */
body.tdm-open #pwa-page-loader,
html.tdm-open #pwa-page-loader,
.tdm-open #pwa-page-loader,
body.modal-open #pwa-page-loader {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   4. PWA Mobile App Header / Top Bar (Exact Reference UI)
   ========================================================================== */
.pwa-mobile-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: var(--pwa-safe-top);
    z-index: 1040;
    box-sizing: border-box;
    transition: background 0.3s ease;
}

.pwa-topbar-container {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

/* Left: Avatar + Location + Greeting */
.pwa-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pwa-back-btn {
    background: transparent;
    border: none;
    color: var(--pwa-text-primary);
    font-size: 22px;
    padding: 6px;
    margin-left: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
}

.pwa-back-btn:active {
    background: rgba(255, 255, 255, 0.15);
}

.pwa-brand-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.pwa-brand-dark-logo {
    max-height: 38px;
    max-width: 140px;
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
}

.pwa-user-greeting-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pwa-avatar-ring-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pwa-avatar-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, border-color 0.2s ease;
}

.pwa-avatar-ring-btn:active .pwa-avatar-img {
    transform: scale(0.94);
    border-color: var(--pwa-theme-color);
}

.pwa-greeting-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 10px;
}

.pwa-location-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--pwa-text-secondary);
    line-height: 1;
}

.pwa-location-badge i {
    font-size: 11px;
    color: var(--pwa-theme-color);
}

.pwa-greeting-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--pwa-text-primary);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.2px;
}

/* Right: Circular Frosted Glass Action Buttons */
.pwa-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pwa-frosted-circle-btn {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pwa-text-primary);
    font-size: 20px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s, border-color 0.2s;
}

.pwa-frosted-circle-btn-pro {
    position: relative;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pwa-text-primary);
    font-size: 20px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s, border-color 0.2s;
    padding: 2px 2px;
    min-width: min-content !important;
}

.pwa-frosted-circle-btn i,
.pwa-frosted-circle-btn i.ph-light,
.pwa-back-btn i,
.pwa-back-btn i.ph-light {
    font-weight: 200 !important;
    font-size: 21px;
    line-height: 1;
}

.pwa-frosted-circle-btn:active {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(0.93);
    border-color: rgba(255, 255, 255, 0.25);
}

.pwa-frosted-circle-btn.active {
    color: var(--pwa-theme-color);
    border-color: var(--pwa-theme-color);
}

/* ==========================================================================
   Animated Hamburger Icon (Weight ~200, Smooth Morph to 'X' on Open/Close)
   ========================================================================== */
.pwa-hamburger-btn {
    padding: 0;
    overflow: hidden;
}

.pwa-hamburger-box {
    position: relative;
    width: 18px;
    height: 13px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.pwa-hamburger-bar {
    display: block;
    width: 18px;
    height: 1.5px;
    background-color: var(--pwa-text-primary);
    border-radius: 2px;
    transform-origin: center;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease, background-color 0.2s ease, width 0.2s ease;
    will-change: transform, opacity;
}

.pwa-hamburger-bar.bar-top {
    width: 18px;
}

.pwa-hamburger-bar.bar-mid {
    width: 13px;
    align-self: flex-end;
}

.pwa-hamburger-bar.bar-bot {
    width: 18px;
}

/* Morph into 'X' when bottom sheet is open */
.pwa-hamburger-btn.is-active,
.pwa-hamburger-btn.open {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.pwa-hamburger-btn.is-active .pwa-hamburger-bar.bar-top,
.pwa-hamburger-btn.open .pwa-hamburger-bar.bar-top {
    transform: translateY(5.75px) rotate(45deg);
    background-color: #ffffff;
}

.pwa-hamburger-btn.is-active .pwa-hamburger-bar.bar-mid,
.pwa-hamburger-btn.open .pwa-hamburger-bar.bar-mid {
    opacity: 0;
    transform: scaleX(0);
}

.pwa-hamburger-btn.is-active .pwa-hamburger-bar.bar-bot,
.pwa-hamburger-btn.open .pwa-hamburger-bar.bar-bot {
    transform: translateY(-5.75px) rotate(-45deg);
    background-color: #ffffff;
}

.pwa-bell-dot {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pwa-theme-color);
    box-shadow: 0 0 8px var(--pwa-theme-color);
    animation: pwaPulseDot 2s infinite ease-in-out;
}

@keyframes pwaPulseDot {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

/* Horizontal Category Filter Pills (Exact Reference UI) */
.pwa-category-bar {
    padding: 2px 16px 10px;
    overflow: hidden;
}

.pwa-category-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

.pwa-category-scroll::-webkit-scrollbar {
    display: none;
}

.pwa-category-pill {
    white-space: nowrap;
    padding: 8px 18px;
    border-radius: var(--pwa-radius-pill);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--pwa-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pwa-category-pill:active {
    transform: scale(0.95);
}

.pwa-category-pill.active {
    background: var(--pwa-theme-color) !important;
    color: var(--pwa-theme-contrast) !important;
    border-color: var(--pwa-theme-color) !important;
    font-weight: 700;
    box-shadow: 0 4px 16px var(--pwa-theme-glow);
}

/* ==========================================================================
   5. PWA Floating Island Capsule Dock (Exact Reference UI)
   ========================================================================== */
.pwa-bottom-dock {
    position: fixed;
    bottom: calc(var(--pwa-safe-bottom) + 18px);
    left: 43%;
    transform: translateX(-50%);
    width: calc(85% - 32px);
    max-width: 70vw !important;
    z-index: 1040;
    pointer-events: none;
    box-sizing: border-box;
}

.pwa-dock-island {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    background: var(--pwa-surface-glass);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--pwa-radius-pill);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.pwa-dock-pill-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-width: 44px;
    border-radius: var(--pwa-radius-pill);
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.25s var(--pwa-transition-smooth);
    font-size: 20px;
    padding: 0 10px;
    line-height: 1;
}

.pwa-dock-pill-item:active {
    transform: scale(0.92);
}

/* Active tab becomes the capsule pill from reference */
.pwa-dock-pill-item.active {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 8px 18px;
    gap: 8px;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.28);
}

.pwa-dock-pill-label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.1px;
}

/* ==========================================================================
   6. Redesigned Splash Screen Sequence (Exact Reference UI)
   ========================================================================== */
.pwa-splash-sequence {
    position: fixed;
    inset: 0;
    z-index: 10000000 !important;
    background: #0b0c10;
    overflow: hidden;
}

.pwa-splash-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

/* Tilted 3D Poster Mosaic Viewport */
.pwa-splash-mosaic-viewport {
    position: absolute;
    top: -90px;
    left: -70px;
    right: -70px;
    bottom: 200px;
    overflow: hidden;
    pointer-events: none;
    perspective: 1200px;
}

.pwa-splash-mosaic-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(136px, 1fr));
    gap: 5px;
    transform: rotate(-10deg) skewY(-3deg) scale(1.16);
    transform-origin: center center;
    width: 100%;
    margin-left: 1%;
}

.pwa-mosaic-column {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Staggered float animation */
.pwa-mosaic-column.col-1 {
    animation: pwaMosaicFloat 14s infinite ease-in-out;
    min-width: 40vw !important;
}

.pwa-mosaic-column.col-2 {
    animation: pwaMosaicFloat 16s infinite ease-in-out reverse;
    margin-top: -36px;
    min-width: 40vw !important;
}

.pwa-mosaic-column.col-3 {
    animation: pwaMosaicFloat 15s infinite ease-in-out 1s;
    margin-top: 18px;
    min-width: 40vw !important;
}

@keyframes pwaMosaicFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-30px);
    }
}

.pwa-mosaic-card {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
    aspect-ratio: 2 / 3 !important;
    width: 100%;
    min-height: 204px;
    background: #181a22;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    flex-shrink: 0;
}

.pwa-mosaic-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 2 / 3 !important;
    display: block !important;
}

/* Vignette & Radial Overlays */
.pwa-mosaic-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 35%, transparent 20%, rgba(11, 12, 16, 0.6) 65%, #0b0c10 100%),
        linear-gradient(to bottom, rgba(11, 12, 16, 0.2) 0%, transparent 30%, rgba(11, 12, 16, 0.9) 75%, #0b0c10 100%);
    pointer-events: none;
}

/* Curved Frosted Glass Bottom Card */
.pwa-splash-bottom-card {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(22, 24, 32, 0.82);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border-radius: 36px 36px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 32px 24px calc(var(--pwa-safe-bottom) + 16px);
    text-align: center;
    z-index: 10;
    box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
}

.pwa-splash-card-content {
    max-width: 360px;
    margin: 0 auto;
}

.pwa-splash-heading {
    font-size: 24px;
    font-weight: 800;
    color: var(--pwa-text-primary);
    margin: 0 0 10px;
    line-height: 1.25;
    letter-spacing: -0.4px;
}

.pwa-splash-subtext {
    font-size: 13px;
    line-height: 1.5;
    color: var(--pwa-text-secondary);
    margin: 0 0 24px;
    font-weight: 400;
}

.pwa-btn-get-started {
    width: 100%;
    height: 52px;
    border-radius: var(--pwa-radius-pill);
    background: var(--pwa-theme-color);
    color: var(--pwa-theme-contrast);
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px var(--pwa-theme-glow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin-bottom: 12px;
}

.pwa-btn-get-started:active {
    transform: scale(0.97);
}

.pwa-btn-signin-glass {
    width: 100%;
    height: 50px;
    border-radius: var(--pwa-radius-pill);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--pwa-text-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

.pwa-btn-signin-glass:active {
    background: rgba(255, 255, 255, 0.16);
    transform: scale(0.97);
}

.pwa-splash-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.pwa-splash-dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.25);
    transition: all 0.3s var(--pwa-transition-smooth);
}

.pwa-splash-dot.active {
    width: 24px;
    background: var(--pwa-theme-color);
    box-shadow: 0 0 10px var(--pwa-theme-color);
}

.pwa-home-indicator {
    width: 128px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
    margin: 18px auto 0;
}

/* ==========================================================================
   7. Homepage Hero Feature Showcase Card (Exact Reference UI)
   Active inside installed PWA mode
   ========================================================================== */
body.is-pwa-standalone #banner-section {
    padding: 8px 16px 16px !important;
    margin-bottom: 5vh !important;
}

body.is-pwa-standalone .slick-banner {
    border-radius: var(--pwa-radius-card) !important;
    overflow: hidden !important;
    position: relative !important;
}

body.is-pwa-standalone .slick-item {
    border-radius: var(--pwa-radius-card) !important;
    max-height: 100% !important;
    background-size: cover !important;
    background-position: center top !important;
    position: relative;
}

body.is-pwa-standalone .slick-item::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

body.is-pwa-standalone .movie-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px 16px !important;
    text-align: center;
}

body.is-pwa-standalone .movie-info {
    text-align: center;
}

body.is-pwa-standalone .movie-tag-list {
    justify-content: center !important;
}

body.is-pwa-standalone .movie-info h4 {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 12px !important;
    letter-spacing: -0.3px;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
}

body.is-pwa-standalone .banner-description {
    display: none !important;
}

body.is-pwa-standalone .movie-info ul.list-inline.mt-4 {
    display: none !important;
}

/* Floating "Watch Now" Pill Button from Reference */
body.is-pwa-standalone .movie-info .d-flex.align-items-center.gap-3 {
    justify-content: center;
    margin-top: 10px;
}

body.is-pwa-standalone .banner-play-btn,
body.is-pwa-standalone .btn-primary {
    background: var(--pwa-theme-color) !important;
    color: var(--pwa-theme-contrast) !important;
    border-radius: var(--pwa-radius-pill) !important;
    padding: 12px 36px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 10px 28px var(--pwa-theme-glow) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.is-pwa-standalone .banner-play-btn:active,
body.is-pwa-standalone .btn-primary:active {
    transform: scale(0.96);
}

/* ==========================================================================
   7b. Homepage Sections Below Slider Hero (Exact Reference UI & Spacings)
   Active exclusively on PWA mobile screens (.is-pwa-standalone)
   ========================================================================== */
body.is-pwa-standalone .container-fluid.padding-right-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
}

/* Uniform Section Spacings & Rhythm */
body.is-pwa-standalone .section-wraper {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 28px !important;
    box-sizing: border-box !important;
}

body.is-pwa-standalone .section-wraper.mt-5,
body.is-pwa-standalone .section-wraper.pt-5 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.is-pwa-standalone .streamit-block {
    margin-bottom: 0 !important;
}

/* Section Header (Screen 2 & Screen 3 Pattern) */
body.is-pwa-standalone .streamit-block>.d-flex.align-items-center.justify-content-between,
body.is-pwa-standalone .section-header {
    padding: 0 16px 12px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

header {
    background: transparent !important;
}

body.is-pwa-standalone .main-title,
body.is-pwa-standalone h5.main-title,
body.is-pwa-standalone .section-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.3px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-transform: capitalize !important;
}

/* "See All" / "View All" Button (Screen 3 Pattern) */
body.is-pwa-standalone .view-all-button,
body.is-pwa-standalone .view-more {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--pwa-text-secondary, #9ca3af) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: color 0.2s ease !important;
}

body.is-pwa-standalone .view-all-button:hover,
body.is-pwa-standalone .view-all-button:active {
    color: var(--pwa-theme-color) !important;
}

body.is-pwa-standalone .view-all-button span {
    font-size: 13px !important;
}

body.is-pwa-standalone .view-all-button i {
    font-size: 12px !important;
    margin-top: 1px;
}

/* Horizontal Slick Slider & Container Spacings on Mobile */
body.is-pwa-standalone .card-style-slider {
    padding: 0 10px !important;
    margin: 0 !important;
    position: relative !important;
}

body.is-pwa-standalone .card-style-slider .slick-list {
    padding: 4px 6px 14px !important;
    margin: 0 -6px !important;
    overflow: hidden !important;
}

body.is-pwa-standalone .card-style-slider .slick-slide {
    padding: 0 6px !important;
    outline: none !important;
}

/* Hide desktop slick next/prev arrows on mobile PWA */
body.is-pwa-standalone .card-style-slider .slick-prev,
body.is-pwa-standalone .card-style-slider .slick-next {
    display: none !important;
}

/* Content Poster Cards (Screens 2 & 3 Pattern) */
body.is-pwa-standalone .atomic-content-card,
body.is-pwa-standalone .card-style-grid,
body.is-pwa-standalone .block-images,
body.is-pwa-standalone .img-box {
    border-radius: 18px !important;
    overflow: hidden !important;
    background: var(--pwa-surface, #161820) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
    position: relative !important;
}

body.is-pwa-standalone .atomic-content-card:active {
    transform: scale(0.96) !important;
}

body.is-pwa-standalone .atomic-poster-wrapper {
    border-radius: 18px !important;
    overflow: hidden !important;
    aspect-ratio: 2/3 !important;
    position: relative !important;
    background: #12141a !important;
}

body.is-pwa-standalone .atomic-poster-img,
body.is-pwa-standalone .img-box img,
body.is-pwa-standalone .block-images img {
    border-radius: 18px !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

body.is-pwa-standalone .atomic-poster-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(14, 16, 21, 0.85) 0%, transparent 55%) !important;
    pointer-events: none !important;
}

/* Card Badges (VJ Pill, IMDb Rating, Rent Badge) */
body.is-pwa-standalone .atomic-vj-badge {
    top: 8px !important;
    left: 8px !important;
    margin: 0 !important;
}

body.is-pwa-standalone .atomic-vj-pill {
    background: rgba(14, 16, 21, 0.78) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 9999px !important;
    padding: 3px 8px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
}

body.is-pwa-standalone .atomic-top-badges {
    top: 8px !important;
    right: 8px !important;
    margin: 0 !important;
    gap: 4px !important;
}

body.is-pwa-standalone .atomic-rating-badge {
    background: rgba(14, 16, 21, 0.78) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 9999px !important;
    padding: 3px 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #fbbf24 !important;
    line-height: 1.2 !important;
}

body.is-pwa-standalone .atomic-rent-badge {
    background: var(--pwa-theme-color) !important;
    color: var(--pwa-theme-contrast) !important;
    border-radius: 9999px !important;
    padding: 3px 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    border: none !important;
    box-shadow: 0 2px 8px var(--pwa-theme-glow) !important;
}

/* Top Channels & Brand Badges (Screen 3 Pattern) */
body.is-pwa-standalone #topchannel-section .channel-card,
body.is-pwa-standalone #topchannel-section .slick-item,
body.is-pwa-standalone .channel-slider-item {
    border-radius: 16px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
}

body.is-pwa-standalone #topchannel-section img {
    max-height: 40px !important;
    object-fit: contain !important;
}

/* ==========================================================================
   7c. Modern Mobile PWA Continue Watching Cards
   Active in installed PWA mode (.is-pwa-standalone) & on mobile screens
   ========================================================================== */
/* Section Container & Spacings */
body.is-pwa-standalone #continue-watch-section {
    margin-top: 0 !important;
    margin-bottom: 34px !important;
    padding: 0 !important;
    display: block !important;
    clear: both !important;
    position: relative !important;
}

body.is-pwa-standalone #continue-watch-section .continue-watching-block,
.is-pwa-standalone .continue-watching-block {
    margin: 0 !important;
    padding: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
}

/* Section Header (Uniform with PWA Screen 2 & 3 Pattern) */
body.is-pwa-standalone .continue-watching-block .section-header,
body.is-pwa-standalone .continue-watching-block>.d-flex {
    padding: 0 16px 12px !important;
    margin: 0 0 4px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

body.is-pwa-standalone .continue-watching-block .main-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.3px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-transform: capitalize !important;
}

body.is-pwa-standalone .continue-watching-block .view-all-button {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--pwa-text-secondary, #9ca3af) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: color 0.2s ease !important;
}

body.is-pwa-standalone .continue-watching-block .view-all-button:hover,
body.is-pwa-standalone .continue-watching-block .view-all-button:active {
    color: var(--pwa-theme-color) !important;
}

/* Reset double padding from nested .card-style-slider */
body.is-pwa-standalone .continue-watching-block .card-style-slider .card-style-slider {
    padding: 0 !important;
    margin: 0 !important;
}

body.is-pwa-standalone .continue-watching-block .slick-list {
    padding: 4px 6px 18px !important;
    margin: 0 -6px !important;
    overflow: hidden !important;
}

/* Slide track item sizing for peek-ahead mobile swiping */
body.is-pwa-standalone #continue-watch-section .slick-item,
body.is-pwa-standalone #continue-watch-section .slick-slide,
body.is-pwa-standalone .continue-watch-delete .slick-slide {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 250px !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
    height: auto !important;
}

/* Card Container */
body.is-pwa-standalone .continue-watch-card,
body.is-pwa-standalone #continue-watch-section .continue-watch-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: var(--pwa-surface, #161820) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
    position: relative !important;
}

body.is-pwa-standalone .continue-watch-card:active {
    transform: scale(0.97) !important;
}

/* 16:9 Thumbnail Image Viewport */
body.is-pwa-standalone .continue-watch-card-image,
body.is-pwa-standalone #continue-watch-section .continue-watch-card-image {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: #0d0f14 !important;
    overflow: hidden !important;
    border-radius: 17px 17px 0 0 !important;
}

body.is-pwa-standalone .continue-watch-image,
body.is-pwa-standalone #continue-watch-section .continue-watch-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.35s ease !important;
}

/* Dark Gradient Vignette Overlay */
body.is-pwa-standalone .continue-watch-card-image::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 40%, rgba(14, 16, 21, 0.85) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Centered Glowing Frosted Glass Play Button */
body.is-pwa-standalone .continue-watch-play-btn,
.continue-watch-play-btn {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(20, 22, 30, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    pointer-events: none !important;
    z-index: 2 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65) !important;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
}

body.is-pwa-standalone .continue-watch-play-btn i,
.continue-watch-play-btn i {
    margin-left: 2px !important;
    color: #ffffff !important;
    font-size: 15px !important;
}

body.is-pwa-standalone .continue-watch-card:active .continue-watch-play-btn {
    transform: translate(-50%, -50%) scale(1.1) !important;
    background: var(--pwa-theme-color) !important;
    border-color: var(--pwa-theme-color) !important;
    box-shadow: 0 0 16px var(--pwa-theme-glow) !important;
}

/* Sleek Circular Glass Remove (X) Button */
body.is-pwa-standalone .continue_remove_btn,
body.is-pwa-standalone #continue-watch-section .continue_remove_btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(14, 16, 21, 0.72) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    z-index: 3 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease !important;
}

body.is-pwa-standalone .continue_remove_btn:active,
body.is-pwa-standalone #continue-watch-section .continue_remove_btn:active {
    transform: scale(0.9) !important;
    background: rgba(255, 59, 48, 0.85) !important;
    border-color: rgba(255, 59, 48, 0.9) !important;
    color: #ffffff !important;
}

/* Flush Edge-to-Edge Progress Bar at Bottom of Thumbnail */
body.is-pwa-standalone .continue-watch-card-image .progress,
body.is-pwa-standalone #continue-watch-section .continue-watch-card-image .progress {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3.5px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.2) !important;
    overflow: hidden !important;
    z-index: 2 !important;
}

body.is-pwa-standalone .continue-watch-card-image .progress-bar,
body.is-pwa-standalone #continue-watch-section .continue-watch-card-image .progress-bar {
    background: var(--pwa-theme-color) !important;
    box-shadow: 0 0 10px var(--pwa-theme-glow) !important;
    border-radius: 0 2px 2px 0 !important;
    height: 100% !important;
}

/* Card Content Area */
body.is-pwa-standalone .continue-watch-card-content,
body.is-pwa-standalone #continue-watch-section .continue-watch-card-content {
    padding: 10px 12px 12px !important;
    background: var(--pwa-surface, #161820) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

body.is-pwa-standalone .continue-watch-card-content .title-wrapper {
    text-decoration: none !important;
}

body.is-pwa-standalone .continue-watch-card-content .title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.2px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
}

/* Meta Row (Duration + Type Badge) */
body.is-pwa-standalone .continue-watch-meta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 2px !important;
}

body.is-pwa-standalone .continue-watch-duration {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: var(--pwa-text-secondary, #9ca3af) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    line-height: 1 !important;
}

body.is-pwa-standalone .continue-watch-duration i {
    font-size: 11px !important;
    color: var(--pwa-theme-color) !important;
}

body.is-pwa-standalone .continue-watch-type-badge {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--pwa-text-secondary, #9ca3af) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    line-height: 1 !important;
}

/* Top 10 Section Outline Numbers on Mobile PWA */
body.is-pwa-standalone #top-10-moive-section .top-ten-numbers {
    font-size: 64px !important;
    font-weight: 900 !important;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.4) !important;
    color: transparent !important;
    line-height: 0.8 !important;
}

/* ==========================================================================
   8. PWA Bottom Sheets (Slide-up Glassmorphic Sheet - Screen 3 Pattern)
   Smooth slide-in-up animation on opening & reverse slide-down on closing
   ========================================================================== */
.pwa-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.38s;
}

.pwa-sheet-backdrop.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
}

.pwa-sheet-backdrop.closing {
    opacity: 0 !important;
    visibility: visible !important;
    pointer-events: none !important;
    display: block !important;
    transition: opacity 0.32s ease !important;
}

.pwa-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    background: rgba(22, 24, 32, 0.96);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border-radius: 32px 32px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.9);
    z-index: 1060;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, visibility 0.42s;
    overflow-y: auto;
    padding-bottom: calc(var(--pwa-safe-bottom) + 16px);
    box-sizing: border-box;
    will-change: transform, opacity;
}

.pwa-bottom-sheet.show {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
}

.pwa-bottom-sheet.closing {
    transform: translateY(100%) !important;
    opacity: 0 !important;
    visibility: visible !important;
    pointer-events: none !important;
    display: block !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
}

.pwa-sheet-handle-bar {
    width: 100%;
    padding: 12px 0 8px;
    display: flex;
    justify-content: center;
    cursor: grab;
}

.pwa-sheet-handle {
    width: 44px;
    height: 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.25);
}

.pwa-sheet-content {
    padding: 0 20px 16px;
}

.pwa-sheet-user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 20px;
    transition: all 0.25s ease;
}

.pwa-sheet-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.pwa-sheet-user-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.pwa-sheet-user-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--pwa-theme-color);
    background: #181a20;
    display: block;
}

.pwa-sheet-kids-badge-icon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background: #ff9800;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 1.5px solid #161820;
}

.pwa-sheet-user-meta {
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.pwa-sheet-user-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.pwa-sheet-user-name {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.pwa-pill-badge-kids {
    display: inline-block;
    padding: 1px 7px;
    background: rgba(255, 152, 0, 0.2);
    border: 1px solid rgba(255, 152, 0, 0.4);
    color: #ffb74d;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 999px;
    flex-shrink: 0;
}

.pwa-sheet-user-email {
    font-size: 12px;
    color: var(--pwa-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-top: 2px;
}

.pwa-sheet-user-action {
    flex-shrink: 0;
    margin-left: 8px;
}

/* Switch button pill */
.pwa-profile-switch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    outline: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.pwa-profile-switch-btn:active {
    transform: scale(0.95);
}

/* Kids Switch Pill (Amber/Golden fun vibrant theme) */
.pwa-profile-switch-kids {
    background: linear-gradient(135deg, rgba(255, 183, 77, 0.18), rgba(255, 152, 0, 0.26));
    border: 1px solid rgba(255, 183, 77, 0.45);
    color: #ffb74d;
    box-shadow: 0 2px 10px rgba(255, 152, 0, 0.2);
}

.pwa-profile-switch-kids:hover,
.pwa-profile-switch-kids:focus {
    background: linear-gradient(135deg, rgba(255, 183, 77, 0.28), rgba(255, 152, 0, 0.38));
    border-color: rgba(255, 183, 77, 0.7);
    color: #ffe082;
    box-shadow: 0 4px 14px rgba(255, 152, 0, 0.35);
}

.pwa-profile-switch-kids i {
    font-size: 14px;
}

/* Exit Kids Pill (Theme Red / Parent exit) */
.pwa-profile-switch-exit {
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.2), rgba(185, 9, 18, 0.3));
    border: 1px solid rgba(229, 9, 20, 0.45);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(229, 9, 20, 0.25);
}

.pwa-profile-switch-exit:hover,
.pwa-profile-switch-exit:focus {
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.3), rgba(185, 9, 18, 0.45));
    border-color: rgba(229, 9, 20, 0.7);
    box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}

.pwa-profile-switch-exit i {
    font-size: 14px;
}

/* PWA PIN Dialog styles */
.pwa-pin-dialog-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10050;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.pwa-pin-dialog-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.pwa-pin-dialog-card {
    background: rgba(20, 22, 28, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 1px 1px rgba(255, 255, 255, 0.05);
    width: 100%;
    max-width: 360px;
    padding: 26px 20px 22px;
    text-align: center;
    position: relative;
    transform: scale(0.92) translateY(20px);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.pwa-pin-dialog-backdrop.show .pwa-pin-dialog-card {
    transform: scale(1) translateY(0);
}

.pwa-pin-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.pwa-pin-close-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.pwa-pin-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.2), rgba(229, 9, 20, 0.08));
    border: 1.5px solid rgba(229, 9, 20, 0.35);
    color: var(--pwa-theme-color, #e50914);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 14px;
}

.pwa-pin-dialog-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px;
}

.pwa-pin-dialog-desc {
    font-size: 13px;
    color: var(--pwa-text-secondary, #9ca3af);
    margin: 0 0 20px;
    line-height: 1.4;
}

.pwa-pin-inputs-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}

.pwa-pin-digit-box {
    width: 50px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.pwa-pin-digit-box:focus {
    border-color: var(--pwa-theme-color, #e50914);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.25);
}

.pwa-pin-digit-box.is-invalid {
    border-color: #dc3545 !important;
    animation: pwaPinShake 0.35s ease-in-out;
}

@keyframes pwaPinShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.pwa-pin-error-text {
    font-size: 12px;
    color: #ef4444;
    min-height: 18px;
    margin-bottom: 14px;
    font-weight: 500;
}

.pwa-pin-submit-btn {
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    background: var(--pwa-theme-color, #e50914);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(229, 9, 20, 0.35);
    transition: opacity 0.2s, transform 0.15s;
}

.pwa-pin-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.pwa-pin-submit-btn:not(:disabled):active {
    transform: scale(0.98);
}

.pwa-sheet-links-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.pwa-sheet-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    color: var(--pwa-text-primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s;
}

.pwa-sheet-link i {
    font-size: 20px;
    color: var(--pwa-text-secondary);
}

.pwa-sheet-link:active {
    background: rgba(255, 255, 255, 0.08);
}

.pwa-sheet-link-highlight {
    background: linear-gradient(135deg, rgba(var(--pwa-theme-rgb), 0.16) 0%, rgba(var(--pwa-theme-rgb), 0.06) 100%) !important;
    border: 1px solid rgba(var(--pwa-theme-rgb), 0.35) !important;
    color: #ffffff !important;
    justify-content: space-between;
}

.pwa-sheet-link-highlight .pwa-sheet-link-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pwa-sheet-link-highlight i {
    color: var(--pwa-theme-color);
    font-size: 20px;
}

.pwa-sheet-link-text {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 13.5px;
}

.pwa-sub-pill {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--pwa-theme-color);
    color: var(--pwa-theme-contrast, #ffffff);
    box-shadow: 0 2px 8px var(--pwa-theme-glow);
}

.pwa-sub-pill-upgrade {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: none;
}

.pwa-sheet-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 59, 48, 0.12);
    border: 1px solid rgba(255, 59, 48, 0.2);
    color: #ff453a;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.pwa-sheet-guest {
    text-align: center;
    padding: 20px 10px;
}

.pwa-sheet-guest-icon i {
    font-size: 54px;
    color: var(--pwa-theme-color);
    margin-bottom: 12px;
}

.pwa-sheet-guest h3 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
}

.pwa-sheet-guest p {
    font-size: 14px;
    color: var(--pwa-text-secondary);
    margin-bottom: 24px;
}

/* ==========================================================================
   9. Homepage Floating Installation Prompt Card (Bottom-Left Corner)
   ========================================================================== */
.pwa-install-prompt-card {
    position: fixed;
    bottom: 24px;
    left: 24px;
    max-width: 300px;
    background: rgba(24, 26, 34, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    z-index: 1030;
    box-sizing: border-box;
    animation: pwaSlideInLeft 0.5s var(--pwa-transition-smooth);
}

@keyframes pwaSlideInLeft {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pwa-prompt-dismiss-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: rgba(255, 255, 255, 0.6);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.pwa-prompt-dismiss-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.pwa-prompt-body {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding-right: 20px;
}

.pwa-prompt-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.pwa-prompt-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pwa-prompt-text {
    flex: 1;
}

.pwa-prompt-title {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px;
    line-height: 1.2;
}

.pwa-prompt-desc {
    font-size: 12px;
    line-height: 1.4;
    color: var(--pwa-text-secondary);
    margin: 0;
}

.pwa-prompt-actions {
    display: flex;
    gap: 8px;
}

.pwa-btn-install {
    flex: 1;
    background: var(--pwa-theme-color);
    color: var(--pwa-theme-contrast);
    border: none;
    padding: 11px 16px;
    border-radius: var(--pwa-radius-pill);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px var(--pwa-theme-glow);
    transition: transform 0.15s;
}

.pwa-btn-install:active {
    transform: scale(0.97);
}

@media (max-width: 480px) {
    .pwa-install-prompt-card {
        bottom: 16px;
        left: 16px;
        right: 16px;
        max-width: none;
    }

}

/* ==========================================================================
   7. Modular Movie Streaming PWA Page Loader Overlay (Minimalist Edition)
   Strictly active when running in installed PWA standalone mode
   ========================================================================== */
#pwa-page-loader {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    background-color: var(--pwa-bg-color, #08090d);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

/* Standalone PWA Activation */
html.is-pwa-standalone #pwa-page-loader,
body.is-pwa-standalone #pwa-page-loader,
.is-pwa-standalone #pwa-page-loader {
    display: flex !important;
}

html.is-pwa-standalone #pwa-page-loader.active,
body.is-pwa-standalone #pwa-page-loader.active,
.is-pwa-standalone #pwa-page-loader.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

html.is-pwa-standalone #pwa-page-loader.closing,
body.is-pwa-standalone #pwa-page-loader.closing,
.is-pwa-standalone #pwa-page-loader.closing {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Strictly suppress PWA page loader when title details modal or any overlay is active */
body.tdm-open #pwa-page-loader,
html.tdm-open #pwa-page-loader,
.tdm-open #pwa-page-loader,
body.modal-open #pwa-page-loader {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Subtle, Calm Ambient Backdrop */
.pwa-loader-minimal-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.1) 0%, rgba(8, 9, 13, 0.96) 65%, #06070a 100%);
    pointer-events: none;
    display: none;
}

/* Touch Surface for Gentle Fluid Ripple */
.pwa-loader-interactive-surface {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.pwa-loader-touch-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    border: 1.5px solid rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.6);
    box-shadow: 0 0 16px var(--pwa-theme-glow);
    animation: pwaTouchExpand 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Minimal Center Content */
.pwa-loader-minimal-center {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Spinner Wrap & Centered Logo */
.pwa-loader-spinner-wrap {
    position: relative;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.pwa-loader-spinner-svg {
    width: 180px;
    height: 180px;
    position: absolute;
    inset: 0;
}

.pwa-spinner-arc {
    transform-origin: 48px 48px;
    animation: pwaSpinSmooth 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pwa-loader-brand-icon {
    position: relative;
    z-index: 2;
    width: 106px;
    height: 106px;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pwa-loader-logo-img {
    max-width: 95px;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Razor-Thin Minimal Progress Bar */
.pwa-loader-minimal-bar {
    width: 150px;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 99px;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
}

.pwa-loader-minimal-line {
    height: 100%;
    width: 40%;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent 0%, var(--pwa-theme-color) 80%, #ffffff 100%);
    box-shadow: 0 0 8px var(--pwa-theme-color);
    animation: pwaMinimalSweep 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Clean, Understated Status Caption */
.pwa-loader-minimal-text {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.5px;
    margin: 0;
    min-height: 18px;
}

/* Keyframes */
@keyframes pwaSpinSmooth {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pwaMinimalSweep {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(300%);
    }
}

@keyframes pwaTouchExpand {
    0% {
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 0.85;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.2);
        opacity: 0;
    }
}

/* ==========================================================================
   20. PWA Mobile-First Auth Design System
   Exclusively active in PWA standalone mode on auth pages (.is-pwa-auth / .pwa-mobile-auth-screen)
   ========================================================================== */

/* Hide mobile-specific auth UI on standard non-PWA browser sessions */
.pwa-mobile-auth-screen {
    display: none !important;
}

/* In PWA Standalone Mode on Auth Pages: Suppress Standard Web Auth, Topbar & Bottom Dock */
html.is-pwa-standalone.is-pwa-auth,
body.is-pwa-standalone.is-pwa-auth {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: var(--pwa-bg-color, #0b0c10) !important;
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
    min-height: 100dvh !important;
    overflow-x: hidden;
}

body.is-pwa-standalone.is-pwa-auth #pwa-bottom-dock,
body.is-pwa-standalone.is-pwa-auth .pwa-bottom-dock,
body.is-pwa-standalone.is-pwa-auth #pwa-mobile-topbar,
body.is-pwa-standalone.is-pwa-auth .pwa-mobile-topbar,
body.is-pwa-standalone:has(.pwa-mobile-auth-screen) #pwa-bottom-dock,
body.is-pwa-standalone:has(.pwa-mobile-auth-screen) .pwa-bottom-dock,
body.is-pwa-standalone:has(.pwa-mobile-auth-screen) #pwa-mobile-topbar,
body.is-pwa-standalone:has(.pwa-mobile-auth-screen) .pwa-mobile-topbar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Toggle visibility between Desktop Web Auth and PWA Mobile Auth */
html.is-pwa-standalone .web-auth-screen {
    display: none !important;
}

html.is-pwa-standalone .pwa-mobile-auth-screen {
    display: flex !important;
}

/* PWA Mobile Auth Full-Screen Canvas */
.pwa-mobile-auth-screen {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        radial-gradient(circle at 50% -10%, rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.22) 0%, transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.08) 0%, transparent 45%),
        radial-gradient(circle at 0% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 40%),
        #0b0c10;
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

/* Atmospheric Glow Orb */
.pwa-mobile-auth-screen::before {
    content: "";
    position: fixed;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.28) 0%, transparent 70%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
}

/* Mobile App Top Navigation Bar */
.pwa-auth-nav-bar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--pwa-safe-top, 0px) + 12px) 20px 12px;
    background: rgba(11, 12, 16, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 60;
    width: 100%;
    box-sizing: border-box;
}

.pwa-auth-nav-left,
.pwa-auth-nav-right {
    width: 44px;
    display: flex;
    align-items: center;
}

.pwa-auth-nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pwa-auth-circle-back-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    outline: none;
    padding: 0;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
}

.pwa-auth-circle-back-btn:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.25);
}

.pwa-auth-header-logo {
    max-height: 28px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.pwa-auth-nav-title {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.2px;
}

.pwa-auth-nav-spacer {
    width: 42px;
    height: 42px;
}

/* Mobile Auth Scrollable Body Content */
.pwa-auth-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-height: 100vh !important;
    min-height: 100vh !important;
    max-width: 480px;
    margin: 0 auto;
    padding: 20px 22px calc(var(--pwa-safe-bottom, 0px) + 24px);
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    margin-top: 5vh !important;
}

/* Hero Branding Section */
.pwa-auth-hero {
    text-align: center;
    margin-bottom: 24px;
}

.pwa-auth-badge {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.14);
    border: 1px solid rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--pwa-theme-color, #e50914);
    margin-bottom: 14px;
    box-shadow: 0 8px 24px rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.25);
    animation: pwaHeroPulse 3s ease-in-out infinite alternate;
}

@keyframes pwaHeroPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 8px 24px rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.2);
    }

    100% {
        transform: scale(1.04);
        box-shadow: 0 12px 30px rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.38);
    }
}

.pwa-auth-title {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.4px;
    margin: 0 0 6px;
}

.pwa-auth-subtitle {
    font-size: 13.5px;
    font-weight: 400;
    color: #9ca3af;
    line-height: 1.45;
    margin: 0;
}

/* Glassmorphic Mobile Card Container */
.pwa-auth-form-card {
    background: rgba(20, 22, 30, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 22px 18px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    margin-bottom: 18px;
}

/* Banners (Intent & Referral) */
.pwa-auth-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.4;
}

.pwa-auth-banner-intent {
    background: rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.14);
    border: 1px solid rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.3);
    color: #ffffff;
}

.pwa-auth-banner-referral {
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #ffffff;
}

.pwa-auth-banner-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.pwa-auth-banner-intent .pwa-auth-banner-icon {
    color: var(--pwa-theme-color, #e50914);
}

.pwa-auth-banner-referral .pwa-auth-banner-icon {
    color: #60a5fa;
}

.pwa-auth-banner-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.pwa-auth-banner-intent .pwa-auth-banner-badge {
    background: var(--pwa-theme-color, #e50914);
    color: #ffffff;
}

.pwa-auth-banner-referral .pwa-auth-banner-badge {
    background: #2563eb;
    color: #ffffff;
}

/* Alert Messages (Errors / Notices) */
.pwa-auth-error-msg {
    color: #f87171;
    font-size: 13px;
    font-weight: 500;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    display: none;
}

.pwa-auth-error-msg:not(:empty) {
    display: block;
}

/* Form Groups & Inputs */
.pwa-auth-field {
    margin-bottom: 16px;
    position: relative;
}

.pwa-auth-field-row {
    display: flex;
    gap: 12px;
}

.pwa-auth-field-row .pwa-auth-field {
    flex: 1;
}

.pwa-auth-label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #9ca3af;
    margin-bottom: 6px;
}

/* Reusable Mobile Input Wrap (Also acts as input-group for auth.js validation) */
.pwa-auth-input-group {
    display: flex;
    align-items: center;
    background: rgba(12, 14, 18, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 0 14px;
    height: 52px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    position: relative;
}

.pwa-auth-input-group:focus-within {
    border-color: var(--pwa-theme-color, #e50914);
    box-shadow: 0 0 0 3px rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.24);
    background: rgba(16, 18, 24, 0.95);
}

.pwa-auth-input-group.has-error,
.pwa-auth-input-group:has(.is-invalid) {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

.pwa-auth-input-icon {
    font-size: 20px;
    color: #6b7280;
    margin-right: 12px;
    flex-shrink: 0;
    transition: color 0.2s;
}

.pwa-auth-input-group:focus-within .pwa-auth-input-icon {
    color: var(--pwa-theme-color, #e50914);
}

.pwa-auth-input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.pwa-auth-input::placeholder {
    color: #6b7280 !important;
    opacity: 1;
}

.pwa-auth-eye-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 20px;
    padding: 0;
    margin-left: 6px;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.pwa-auth-eye-btn:active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* Inline Validation Feedback */
.pwa-auth-feedback {
    display: none;
    font-size: 12px;
    color: #f87171;
    margin-top: 5px;
    padding-left: 2px;
    line-height: 1.35;
}

.pwa-auth-field .invalid-feedback {
    font-size: 12px;
    color: #f87171;
    margin-top: 5px;
    padding-left: 2px;
    line-height: 1.35;
}

/* Phone Country Pill */
.pwa-auth-country-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #e5e7eb;
    font-size: 13px;
    font-weight: 600;
    margin-right: 10px;
    flex-shrink: 0;
}

/* Remember Me & Forgot Password Row */
.pwa-auth-row-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 20px;
}

.pwa-auth-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #9ca3af;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    margin: 0;
}

.pwa-auth-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 19px;
    height: 19px;
    border-radius: 6px;
    background: rgba(14, 16, 21, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    position: relative;
    margin: 0;
    outline: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pwa-auth-checkbox:checked {
    background: var(--pwa-theme-color, #e50914);
    border-color: var(--pwa-theme-color, #e50914);
}

.pwa-auth-checkbox:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pwa-auth-forgot-link {
    color: #9ca3af;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.pwa-auth-forgot-link:hover,
.pwa-auth-forgot-link:active {
    color: #ffffff;
    text-decoration: underline;
}

/* Primary Submit Action Button */
.pwa-auth-btn-primary {
    width: 100%;
    height: 52px;
    border-radius: 16px;
    background: var(--pwa-theme-color, #e50914);
    border: none;
    color: var(--pwa-theme-contrast, #ffffff);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.pwa-auth-btn-primary:active {
    transform: scale(0.98);
    box-shadow: 0 4px 16px rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.5);
    filter: brightness(1.08);
}

.pwa-auth-btn-primary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none !important;
}

/* Divider Line */
.pwa-auth-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: #6b7280;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pwa-auth-divider::before,
.pwa-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.pwa-auth-divider span {
    padding: 0 12px;
}

/* Quick Action Frosted Buttons (Google / OTP) */
.pwa-auth-alt-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pwa-auth-btn-alt {
    width: 100%;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
}

.pwa-auth-btn-alt:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.985);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Demo Chip */
.pwa-auth-demo-wrap {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pwa-auth-demo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.12);
    border: 1px solid rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.28);
    color: #ffffff;
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.pwa-auth-demo-btn:active {
    transform: scale(0.96);
    background: rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.25);
}

/* Bottom Account Switch Prompt */
.pwa-auth-switch-prompt {
    text-align: center;
    color: #9ca3af;
    font-size: 13.5px;
    margin-top: 12px;
}

.pwa-auth-switch-link {
    color: var(--pwa-theme-color, #e50914);
    font-weight: 700;
    text-decoration: none;
    margin-left: 4px;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.pwa-auth-switch-link:hover,
.pwa-auth-switch-link:active {
    text-decoration: underline;
    filter: brightness(1.2);
}

/* Legal / Policy Disclaimer */
.pwa-auth-legal {
    text-align: center;
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.45;
    margin-top: 14px;
}

.pwa-auth-legal a {
    color: #9ca3af;
    text-decoration: underline;
}

/* Success Card for Password Reset */
.pwa-auth-success-card {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    margin-top: 18px;
}

.pwa-auth-success-icon {
    font-size: 32px;
    color: #10b981;
    margin-bottom: 8px;
}

.pwa-auth-success-title {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px;
}

.pwa-auth-success-desc {
    font-size: 12.5px;
    color: #d1fae5;
    margin: 0;
}

/* ==========================================================================
   21. PWA Biometric Passwordless Authentication Styles
   ========================================================================== */

/* Biometric Quick Login Button on Login Screen */
.pwa-auth-btn-biometric {
    width: 100%;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.45);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}

.pwa-auth-btn-biometric i {
    font-size: 22px;
    color: var(--pwa-theme-color, #e50914);
    filter: drop-shadow(0 0 8px rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.5));
    transition: transform 0.2s;
}

.pwa-auth-btn-biometric:hover {
    border-color: var(--pwa-theme-color, #e50914);
    background: linear-gradient(135deg, rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
    box-shadow: 0 6px 24px rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.3);
}

.pwa-auth-btn-biometric:active {
    transform: scale(0.98);
}

.pwa-auth-btn-biometric.loading i {
    animation: pwaSpinSmooth 1s linear infinite;
}

/* Post-Login Biometric Enrollment Bottom Sheet */
.pwa-biometric-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(18, 20, 27, 0.94);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px 28px 0 0;
    padding: 16px 24px calc(var(--pwa-safe-bottom, 0px) + 24px);
    z-index: 10000;
    transform: translateY(110%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.6);
    max-width: 520px;
    margin: 0 auto;
    box-sizing: border-box;
}

.pwa-biometric-sheet.show {
    transform: translateY(0);
}

.pwa-biometric-sheet-handle {
    width: 44px;
    height: 5px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 9999px;
    margin: 0 auto 20px;
    cursor: pointer;
}

.pwa-biometric-sheet-body {
    text-align: center;
}

.pwa-biometric-sheet-icon {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    background: rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.14);
    border: 1px solid rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: var(--pwa-theme-color, #e50914);
    margin-bottom: 16px;
    box-shadow: 0 10px 30px rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.25);
    animation: pwaHeroPulse 3s ease-in-out infinite alternate;
}

.pwa-biometric-sheet-title {
    font-size: 21px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}

.pwa-biometric-sheet-desc {
    font-size: 14px;
    color: #9ca3af;
    line-height: 1.5;
    margin: 0 0 24px;
    padding: 0 8px;
}

.pwa-biometric-sheet-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pwa-biometric-btn-enable {
    width: 100%;
    height: 50px;
    border-radius: 16px;
    background: var(--pwa-theme-color, #e50914);
    border: none;
    color: var(--pwa-theme-contrast, #ffffff);
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(var(--pwa-theme-rgb, 229, 9, 20), 0.35);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
}

.pwa-biometric-btn-enable:active {
    transform: scale(0.98);
}

.pwa-biometric-btn-snooze {
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 14px;
    font-weight: 500;
    padding: 8px;
    cursor: pointer;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.pwa-biometric-btn-snooze:hover,
.pwa-biometric-btn-snooze:active {
    color: #ffffff;
}

/* Account Settings Biometric Card Styling */
.pwa-biometric-account-card {
    border-left: 4px solid var(--pwa-theme-color, #e50914) !important;
}

/* ==========================================================================
   PWA Exclusive Atomic Cards & Sliders Redesign
   Applies only to PWAs (.is-pwa-standalone)
   Sections: Latest Movies & shows, Trending Picks, Free Movies
   ========================================================================== */

/* Normal Browser Mode: Hide PWA-only mockup headers */
.pwa-only-header {
    display: none !important;
}

/* PWA Standalone Mode: Switch to sleek mockup headers for the 3 target sections */
html.is-pwa-standalone #latest-movies-shows-section .non-pwa-header,
html.is-pwa-standalone #popular-tvshow-section .non-pwa-header,
html.is-pwa-standalone #free-movie-section .non-pwa-header {
    display: none !important;
}

html.is-pwa-standalone #latest-movies-shows-section .pwa-only-header,
html.is-pwa-standalone #popular-tvshow-section .pwa-only-header,
html.is-pwa-standalone #free-movie-section .pwa-only-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 14px 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.2px !important;
}

html.is-pwa-standalone .pwa-see-all-link {
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

html.is-pwa-standalone .pwa-see-all-link small {
    color: #888888 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    transition: color 0.15s ease !important;
}

html.is-pwa-standalone .pwa-see-all-link:active small {
    color: var(--pwa-theme-color, #e50914) !important;
}

/* PWA Slider Container */
html.is-pwa-standalone #latest-movies-shows-section .card-style-slider,
html.is-pwa-standalone #popular-tvshow-section .card-style-slider,
html.is-pwa-standalone #free-movie-section .card-style-slider {
    margin-bottom: 14px !important;
    padding: 0 !important;
}

/* Transform slick or flex container into horizontal scrolling card row */
html.is-pwa-standalone #latest-movies-shows-section .slick-general,
html.is-pwa-standalone #popular-tvshow-section .slick-general,
html.is-pwa-standalone #free-movie-section .slick-general {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding: 2px 14px 10px 14px !important;
    margin: 0 !important;
    scroll-snap-type: x proximity !important;
}

html.is-pwa-standalone #latest-movies-shows-section .slick-general::-webkit-scrollbar,
html.is-pwa-standalone #popular-tvshow-section .slick-general::-webkit-scrollbar,
html.is-pwa-standalone #free-movie-section .slick-general::-webkit-scrollbar {
    display: none !important;
}

/* Hide slick controls & artifacts */
html.is-pwa-standalone #latest-movies-shows-section .slick-arrow,
html.is-pwa-standalone #latest-movies-shows-section .slick-dots,
html.is-pwa-standalone #popular-tvshow-section .slick-arrow,
html.is-pwa-standalone #popular-tvshow-section .slick-dots,
html.is-pwa-standalone #free-movie-section .slick-arrow,
html.is-pwa-standalone #free-movie-section .slick-dots {
    display: none !important;
}

html.is-pwa-standalone #latest-movies-shows-section .slick-list,
html.is-pwa-standalone #popular-tvshow-section .slick-list,
html.is-pwa-standalone #free-movie-section .slick-list {
    overflow: visible !important;
    width: 100% !important;
    padding: 0 !important;
}

html.is-pwa-standalone #latest-movies-shows-section .slick-track,
html.is-pwa-standalone #popular-tvshow-section .slick-track,
html.is-pwa-standalone #free-movie-section .slick-track {
    display: flex !important;
    gap: 8px !important;
    width: auto !important;
    transform: none !important;
}

/* Slide Item Box: Exactly 3 cards visible in viewport */
html.is-pwa-standalone #latest-movies-shows-section .atomic-slider-item,
html.is-pwa-standalone #popular-tvshow-section .atomic-slider-item,
html.is-pwa-standalone #free-movie-section .atomic-slider-item,
html.is-pwa-standalone #latest-movies-shows-section .slick-slide,
html.is-pwa-standalone #popular-tvshow-section .slick-slide,
html.is-pwa-standalone #free-movie-section .slick-slide {
    flex: 0 0 calc((100% - 16px) / 3) !important;
    width: calc((100% - 16px) / 3) !important;
    min-width: calc((100% - 16px) / 3) !important;
    max-width: calc((100% - 16px) / 3) !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    scroll-snap-align: start !important;
}

@media (max-width: 767.98px) {

    html.is-pwa-standalone #latest-movies-shows-section .atomic-slider-item,
    html.is-pwa-standalone #popular-tvshow-section .atomic-slider-item,
    html.is-pwa-standalone #free-movie-section .atomic-slider-item,
    html.is-pwa-standalone #latest-movies-shows-section .slick-slide,
    html.is-pwa-standalone #popular-tvshow-section .slick-slide,
    html.is-pwa-standalone #free-movie-section .slick-slide {
        flex: 0 0 calc((100vw - 36px) / 2) !important;
        width: calc((100vw - 36px) / 2) !important;
        min-width: calc((100vw - 36px) / 2) !important;
        max-width: calc((100vw - 36px) / 2) !important;
        height: auto !important;
        aspect-ratio: 2 / 3 !important;
    }
}

/* PWA Card Body Styling: The card itself */
html.is-pwa-standalone #latest-movies-shows-section .atomic-content-card,
html.is-pwa-standalone #popular-tvshow-section .atomic-content-card,
html.is-pwa-standalone #free-movie-section .atomic-content-card {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 2 / 3 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #1c1e26 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
    position: relative !important;
    margin: 0 !important;
    cursor: pointer !important;
    transform: translateZ(0) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

html.is-pwa-standalone #latest-movies-shows-section .atomic-content-card:active,
html.is-pwa-standalone #popular-tvshow-section .atomic-content-card:active,
html.is-pwa-standalone #free-movie-section .atomic-content-card:active {
    transform: scale(0.96) !important;
}

/* Poster wrapper & image */
html.is-pwa-standalone #latest-movies-shows-section .atomic-poster-wrapper,
html.is-pwa-standalone #popular-tvshow-section .atomic-poster-wrapper,
html.is-pwa-standalone #free-movie-section .atomic-poster-wrapper {
    width: 100% !important;
    height: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
}

html.is-pwa-standalone #latest-movies-shows-section .atomic-poster-img,
html.is-pwa-standalone #popular-tvshow-section .atomic-poster-img,
html.is-pwa-standalone #free-movie-section .atomic-poster-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block !important;
}

html.is-pwa-standalone #latest-movies-shows-section .atomic-poster-overlay,
html.is-pwa-standalone #popular-tvshow-section .atomic-poster-overlay,
html.is-pwa-standalone #free-movie-section .atomic-poster-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%) !important;
    pointer-events: none !important;
}

/* HIDE extra elements to match mockup:
   - Card body beneath poster (title, meta, buttons)
   - Top badges (ratings, rent/premium)
   - Bottom tags (movie/tvshow pill)
   - Hover quick info buttons
*/
html.is-pwa-standalone #latest-movies-shows-section .atomic-card-body,
html.is-pwa-standalone #popular-tvshow-section .atomic-card-body,
html.is-pwa-standalone #free-movie-section .atomic-card-body,
html.is-pwa-standalone #latest-movies-shows-section .atomic-top-badges,
html.is-pwa-standalone #popular-tvshow-section .atomic-top-badges,
html.is-pwa-standalone #free-movie-section .atomic-top-badges,
html.is-pwa-standalone #latest-movies-shows-section .atomic-type-tag,
html.is-pwa-standalone #popular-tvshow-section .atomic-type-tag,
html.is-pwa-standalone #free-movie-section .atomic-type-tag,
html.is-pwa-standalone #latest-movies-shows-section .atomic-quick-info-btn,
html.is-pwa-standalone #popular-tvshow-section .atomic-quick-info-btn,
html.is-pwa-standalone #free-movie-section .atomic-quick-info-btn {
    display: none !important;
}

/* ONLY TAG REMAINING: VJ tag on top right corner */
html.is-pwa-standalone #latest-movies-shows-section .atomic-vj-badge,
html.is-pwa-standalone #popular-tvshow-section .atomic-vj-badge,
html.is-pwa-standalone #free-movie-section .atomic-vj-badge {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 5 !important;
}

html.is-pwa-standalone #latest-movies-shows-section .atomic-vj-pill,
html.is-pwa-standalone #popular-tvshow-section .atomic-vj-pill,
html.is-pwa-standalone #free-movie-section .atomic-vj-pill {
    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 2.5px 5.5px !important;
    background: rgba(14, 16, 21, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    max-width: 68px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

html.is-pwa-standalone #latest-movies-shows-section .atomic-vj-pill i,
html.is-pwa-standalone #popular-tvshow-section .atomic-vj-pill i,
html.is-pwa-standalone #free-movie-section .atomic-vj-pill i {
    font-size: 8.5px !important;
    color: var(--pwa-theme-color, #e50914) !important;
}

/* ==========================================================================
   Dedicated PWA Section View All Page Styling
   ========================================================================== */
.pwa-section-page-container {
    min-height: 100vh;
    background-color: var(--pwa-bg-color, #0e1015);
    padding-top: calc(var(--pwa-safe-top, 0px) + 8px);
    padding-bottom: calc(var(--pwa-dock-height, 56px) + var(--pwa-safe-bottom, 0px) + 24px);
}

.pwa-page-topbar {
    position: sticky;
    margin-top: 8vh;
    z-index: 100;
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(14, 16, 21, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.pwa-page-back-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.pwa-page-back-btn:active {
    background: rgba(255, 255, 255, 0.2);
}

.pwa-page-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2px;
    margin-left: 10px;
}

.pwa-page-title {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.2px;
}

.pwa-page-count-badge {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
}

.pwa-page-spacer {
    width: 36px;
    height: 36px;
}

/* Grid of Cards on Dedicated Page */
.pwa-mockup-grid-wrapper .atomic-card-col {
    margin-bottom: 0 !important;
    padding: 0 4px !important;
}

.pwa-mockup-grid-wrapper .atomic-content-card {
    width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    height: auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #1c1e26 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
    position: relative !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: transform 0.15s ease !important;
}

.pwa-mockup-grid-wrapper .atomic-content-card:active {
    transform: scale(0.96) !important;
}

.pwa-mockup-grid-wrapper .atomic-poster-wrapper {
    width: 100% !important;
    height: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.pwa-mockup-grid-wrapper .atomic-poster-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block !important;
}

/* Hide card body and extra tags on dedicated page grid */
.pwa-mockup-grid-wrapper .atomic-card-body,
.pwa-mockup-grid-wrapper .atomic-top-badges,
.pwa-mockup-grid-wrapper .atomic-type-tag,
.pwa-mockup-grid-wrapper .atomic-quick-info-btn {
    display: none !important;
}

/* Only tag remaining: VJ tag on top right corner */
.pwa-mockup-grid-wrapper .atomic-vj-badge {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 5 !important;
}

.pwa-mockup-grid-wrapper .atomic-vj-pill {
    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 2.5px 5.5px !important;
    background: rgba(14, 16, 21, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    max-width: 68px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.pwa-mockup-grid-wrapper .atomic-vj-pill i {
    font-size: 8.5px !important;
    color: var(--pwa-theme-color, #e50914) !important;
}

/* ==========================================================================
   PWA Exclusive Grid Listings Layout & Design for /movies and /tv-shows
   Strictly and explicitly active ONLY on PWA apps (.is-pwa-standalone)
   Matching the exact grid layout and design from /pwa/latest-movies-shows
   ========================================================================== */

/* Outer grid wrapper spacing */
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper {
    padding-top: 8px !important;
    padding-bottom: calc(var(--pwa-dock-height, 64px) + var(--pwa-safe-bottom, 0px) + 24px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
    width: 100% !important;
}

/* Reset shimmer-container wrapper padding in PWA mode */
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-container,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* Row gutters & flex layout matching g-2 (0.5rem = 8px) */
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .pwa-movies-grid-row,
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper #entertainment-list,
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-container > .row,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .pwa-movies-grid-row,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper #entertainment-list,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-container > .row {
    --bs-gutter-x: 0.5rem !important;
    --bs-gutter-y: 0.5rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin-top: 0 !important;
    margin-right: -4px !important;
    margin-left: -4px !important;
}

/* Grid Column Sizing:
   Mobile (<576px): 2 columns (50%)
   Small (>=576px): 3 columns (33.33333333%)
   Medium (>=768px): 4 columns (25%)
   Large (>=992px): 5 columns (20%)
   Matching row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5
*/
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .pwa-movies-grid-row > .col:not(.col-12),
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper #entertainment-list > .col:not(.col-12),
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-container > .row > .col:not(.col-12),
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .pwa-movies-grid-row > .col:not(.col-12),
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper #entertainment-list > .col:not(.col-12),
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-container > .row > .col:not(.col-12) {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

@media (min-width: 576px) {
    html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .pwa-movies-grid-row > .col:not(.col-12),
    html.is-pwa-standalone .pwa-movies-shows-grid-wrapper #entertainment-list > .col:not(.col-12),
    html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-container > .row > .col:not(.col-12),
    body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .pwa-movies-grid-row > .col:not(.col-12),
    body.is-pwa-standalone .pwa-movies-shows-grid-wrapper #entertainment-list > .col:not(.col-12),
    body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-container > .row > .col:not(.col-12) {
        flex: 0 0 33.33333333% !important;
        width: 33.33333333% !important;
        max-width: 33.33333333% !important;
    }
}

@media (min-width: 768px) {
    html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .pwa-movies-grid-row > .col:not(.col-12),
    html.is-pwa-standalone .pwa-movies-shows-grid-wrapper #entertainment-list > .col:not(.col-12),
    html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-container > .row > .col:not(.col-12),
    body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .pwa-movies-grid-row > .col:not(.col-12),
    body.is-pwa-standalone .pwa-movies-shows-grid-wrapper #entertainment-list > .col:not(.col-12),
    body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-container > .row > .col:not(.col-12) {
        flex: 0 0 25% !important;
        width: 25% !important;
        max-width: 25% !important;
    }
}

@media (min-width: 992px) {
    html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .pwa-movies-grid-row > .col:not(.col-12),
    html.is-pwa-standalone .pwa-movies-shows-grid-wrapper #entertainment-list > .col:not(.col-12),
    html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-container > .row > .col:not(.col-12),
    body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .pwa-movies-grid-row > .col:not(.col-12),
    body.is-pwa-standalone .pwa-movies-shows-grid-wrapper #entertainment-list > .col:not(.col-12),
    body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-container > .row > .col:not(.col-12) {
        flex: 0 0 20% !important;
        width: 20% !important;
        max-width: 20% !important;
    }
}

/* Discovery Empty State */
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper #entertainment-list > .col-12,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper #entertainment-list > .col-12 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 2rem 0 !important;
}

/* Card Column & Margin Reset */
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-card-col,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-card-col {
    margin-bottom: 8px !important;
    padding: 0 4px !important;
}

/* Card Design: Exact Match to /pwa/latest-movies-shows (Aspect Ratio 2/3, 12px Radius, Dark Glow & Border) */
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-content-card,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-content-card {
    width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    height: auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #1c1e26 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
    position: relative !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: transform 0.15s ease !important;
}

html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-content-card:active,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-content-card:active {
    transform: scale(0.96) !important;
}

html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-poster-wrapper,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-poster-wrapper {
    width: 100% !important;
    height: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-poster-img,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-poster-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block !important;
}

/* Hide card body and extra tags on PWA grid */
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-card-body,
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-top-badges,
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-type-tag,
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-quick-info-btn,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-card-body,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-top-badges,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-type-tag,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-quick-info-btn {
    display: none !important;
}

/* Minimalist VJ Tag on Top Right Corner */
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-vj-badge,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-vj-badge {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 5 !important;
}

html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-vj-pill,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-vj-pill {
    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 2.5px 5.5px !important;
    background: rgba(14, 16, 21, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    max-width: 68px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-vj-pill i,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .atomic-vj-pill i {
    font-size: 8.5px !important;
    color: var(--pwa-theme-color, #e50914) !important;
}

/* Shimmer Loading Grid & Placeholder Cards */
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-container.col,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-container.col {
    margin-bottom: 8px !important;
    padding: 0 4px !important;
}

html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-card,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-card {
    width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    height: auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #1c1e26 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
    margin: 0 !important;
}

html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-card .block-images,
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-card .image-box,
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-card .placeholder-glow,
html.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-card .placeholder,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-card .block-images,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-card .image-box,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-card .placeholder-glow,
body.is-pwa-standalone .pwa-movies-shows-grid-wrapper .shimmer-card .placeholder {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    border-radius: 12px !important;
    display: block !important;
}

/* ==========================================================================
   PWA Exclusive Sliders & Mockup Card Rows
   For Latest Movies & Shows, Trending Picks, and Free Movies
   ========================================================================== */

/* By default, hide all PWA-only slider and card row elements on standard web/non-PWA */
.pwa-only-slider,
.pwa-only-header,
.pwa-sim-card-row {
    display: none !important;
}

html:not(.is-pwa-standalone) .pwa-only-slider,
html:not(.is-pwa-standalone) .pwa-only-header,
html:not(.is-pwa-standalone) .pwa-sim-card-row,
body:not(.is-pwa-standalone) .pwa-only-slider,
body:not(.is-pwa-standalone) .pwa-only-header,
body:not(.is-pwa-standalone) .pwa-sim-card-row {
    display: none !important;
}

/* Inside PWA standalone mode, hide desktop slick sliders for these sections */
html.is-pwa-standalone #latest-movies-shows-section .non-pwa-slider,
html.is-pwa-standalone #popular-tvshow-section .non-pwa-slider,
html.is-pwa-standalone #free-movie-section .non-pwa-slider,
html.is-pwa-standalone #love-stories-section .non-pwa-slider,
html.is-pwa-standalone #actions-section .non-pwa-slider,
html.is-pwa-standalone #scifi-section .non-pwa-slider,
html.is-pwa-standalone .genre-curated-section .non-pwa-slider,
body.is-pwa-standalone #latest-movies-shows-section .non-pwa-slider,
body.is-pwa-standalone #popular-tvshow-section .non-pwa-slider,
body.is-pwa-standalone #free-movie-section .non-pwa-slider,
body.is-pwa-standalone #love-stories-section .non-pwa-slider,
body.is-pwa-standalone #actions-section .non-pwa-slider,
body.is-pwa-standalone #scifi-section .non-pwa-slider,
body.is-pwa-standalone .genre-curated-section .non-pwa-slider,
html.is-pwa-standalone #latest-movies-shows-section .non-pwa-header,
html.is-pwa-standalone #popular-tvshow-section .non-pwa-header,
html.is-pwa-standalone #free-movie-section .non-pwa-header,
html.is-pwa-standalone #love-stories-section .non-pwa-header,
html.is-pwa-standalone #actions-section .non-pwa-header,
html.is-pwa-standalone #scifi-section .non-pwa-header,
html.is-pwa-standalone .genre-curated-section .non-pwa-header,
body.is-pwa-standalone #latest-movies-shows-section .non-pwa-header,
body.is-pwa-standalone #popular-tvshow-section .non-pwa-header,
body.is-pwa-standalone #free-movie-section .non-pwa-header,
body.is-pwa-standalone #love-stories-section .non-pwa-header,
body.is-pwa-standalone #actions-section .non-pwa-header,
body.is-pwa-standalone #scifi-section .non-pwa-header,
body.is-pwa-standalone .genre-curated-section .non-pwa-header {
    display: none !important;
}

/* Inside PWA standalone mode, show PWA-only headers and mockup card rows */
html.is-pwa-standalone #latest-movies-shows-section .pwa-only-slider,
html.is-pwa-standalone #popular-tvshow-section .pwa-only-slider,
html.is-pwa-standalone #free-movie-section .pwa-only-slider,
html.is-pwa-standalone #love-stories-section .pwa-only-slider,
html.is-pwa-standalone #actions-section .pwa-only-slider,
html.is-pwa-standalone #scifi-section .pwa-only-slider,
html.is-pwa-standalone .genre-curated-section .pwa-only-slider,
body.is-pwa-standalone #latest-movies-shows-section .pwa-only-slider,
body.is-pwa-standalone #popular-tvshow-section .pwa-only-slider,
body.is-pwa-standalone #free-movie-section .pwa-only-slider,
body.is-pwa-standalone #love-stories-section .pwa-only-slider,
body.is-pwa-standalone #actions-section .pwa-only-slider,
body.is-pwa-standalone #scifi-section .pwa-only-slider,
body.is-pwa-standalone .genre-curated-section .pwa-only-slider,
.guest-pwa-experience .pwa-only-slider {
    display: flex !important;
}

html.is-pwa-standalone #latest-movies-shows-section .pwa-only-header,
html.is-pwa-standalone #popular-tvshow-section .pwa-only-header,
html.is-pwa-standalone #free-movie-section .pwa-only-header,
html.is-pwa-standalone #love-stories-section .pwa-only-header,
html.is-pwa-standalone #actions-section .pwa-only-header,
html.is-pwa-standalone #scifi-section .pwa-only-header,
html.is-pwa-standalone .genre-curated-section .pwa-only-header,
body.is-pwa-standalone #latest-movies-shows-section .pwa-only-header,
body.is-pwa-standalone #popular-tvshow-section .pwa-only-header,
body.is-pwa-standalone #free-movie-section .pwa-only-header,
body.is-pwa-standalone #love-stories-section .pwa-only-header,
body.is-pwa-standalone #actions-section .pwa-only-header,
body.is-pwa-standalone #scifi-section .pwa-only-header,
body.is-pwa-standalone .genre-curated-section .pwa-only-header,
.guest-pwa-experience .pwa-only-header {
    display: flex !important;
}

/* PWA Mockup Section Header */
.pwa-sim-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 14px 8px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
}

.pwa-sim-section-header span {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.2px;
}

.pwa-sim-section-header small,
.pwa-see-all-link {
    color: #9ca3af !important;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: color 0.15s ease;
}

.pwa-see-all-link:hover,
.pwa-see-all-link:active {
    color: #ffffff !important;
}

/* PWA Mockup Card Row: Horizontal Touch Scroll ONLY ON PWA apps */
html.is-pwa-standalone .pwa-sim-card-row,
body.is-pwa-standalone .pwa-sim-card-row,
.guest-pwa-experience .pwa-sim-card-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 2px !important;
    padding: 2px 14px 16px !important;
    margin-left: 14px !important;
    scrollbar-width: none !important;
}

html.is-pwa-standalone .pwa-sim-card-row::-webkit-scrollbar,
body.is-pwa-standalone .pwa-sim-card-row::-webkit-scrollbar,
.guest-pwa-experience .pwa-sim-card-row::-webkit-scrollbar {
    display: none !important;
}

/* Card Column / Wrapper: 2 in Viewport on Mobile Screen Sizes (2x Bigger, ONLY ON PWA apps) */
@media (max-width: 767.98px) {

    html.is-pwa-standalone .pwa-sim-card-row>.atomic-card-col,
    html.is-pwa-standalone .pwa-sim-card-row>.col,
    html.is-pwa-standalone .pwa-sim-card-row>div,
    body.is-pwa-standalone .pwa-sim-card-row>.atomic-card-col,
    body.is-pwa-standalone .pwa-sim-card-row>.col,
    body.is-pwa-standalone .pwa-sim-card-row>div,
    .guest-pwa-experience .pwa-sim-card-row>.atomic-card-col,
    .guest-pwa-experience .pwa-sim-card-row>.col,
    .guest-pwa-experience .pwa-sim-card-row>div {
        flex: 0 0 calc((100% - 10px) / 1.4) !important;
        width: calc((100% - 10px) / 1.4) !important;
        max-width: calc((100% - 10px) / 1.4) !important;
        min-width: calc((100% - 10px) / 1.4) !important;
        scroll-snap-align: start !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
    }
    .movie-geners-block {
        padding: 2px 25px !important;
    }
}

/* Card Column / Wrapper for Tablet & Desktop screens in PWA app */
@media (min-width: 768px) {

    html.is-pwa-standalone .pwa-sim-card-row>.atomic-card-col,
    html.is-pwa-standalone .pwa-sim-card-row>.col,
    html.is-pwa-standalone .pwa-sim-card-row>div,
    body.is-pwa-standalone .pwa-sim-card-row>.atomic-card-col,
    body.is-pwa-standalone .pwa-sim-card-row>.col,
    body.is-pwa-standalone .pwa-sim-card-row>div,
    .guest-pwa-experience .pwa-sim-card-row>.atomic-card-col,
    .guest-pwa-experience .pwa-sim-card-row>.col,
    .guest-pwa-experience .pwa-sim-card-row>div {
        flex: 0 0 calc((100% - 20px) / 3) !important;
        width: calc((100% - 20px) / 3) !important;
        max-width: calc((100% - 20px) / 3) !important;
        min-width: calc((100% - 20px) / 3) !important;
        scroll-snap-align: start !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Card Styling: Replicating phone_preview mockup style */
.pwa-sim-card-row .atomic-content-card {
    width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    height: auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #1c1e26 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
    position: relative !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: transform 0.15s ease !important;
}

.pwa-sim-card-row .atomic-content-card:active {
    transform: scale(0.96) !important;
}

.pwa-sim-card-row .atomic-poster-wrapper,
.pwa-sim-card-row .atomic-poster-link {
    width: 100% !important;
    height: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: block !important;
}

.pwa-sim-card-row .atomic-poster-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block !important;
}

/* Hide card body and extra tags on home page PWA slider cards */
.pwa-sim-card-row .atomic-card-body,
.pwa-sim-card-row .atomic-top-badges,
.pwa-sim-card-row .atomic-type-tag,
.pwa-sim-card-row .atomic-quick-info-btn {
    display: none !important;
}

/* Only tag remaining: VJ tag on top right corner */
.pwa-sim-card-row .atomic-vj-badge {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 5 !important;
    display: block !important;
}

.pwa-sim-card-row .atomic-vj-pill {
    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 2.5px 5.5px !important;
    background: rgba(14, 16, 21, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    max-width: 68px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.pwa-sim-card-row .atomic-vj-pill i {
    font-size: 8.5px !important;
    color: var(--pwa-theme-color, #e50914) !important;
}

/* ==========================================================================
   14. Dedicated PWA Mobile App Account Management System
   Strictly scoped to installed PWA mode (.is-pwa-standalone)
   ========================================================================== */

/* Hide desktop left sidebar in PWA standalone mode */
html.is-pwa-standalone #account-settings-sidebar,
body.is-pwa-standalone #account-settings-sidebar,
html.is-pwa-standalone .account-settings-sidebar-inner,
body.is-pwa-standalone .account-settings-sidebar-inner {
    display: none !important;
}

/* Adjust page spacing on PWA account pages */
body.is-pwa-standalone .section-spacing {
    padding-top: 0 !important;
    padding-bottom: 24px !important;
}

body.is-pwa-standalone .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Dedicated PWA Account Sticky Top Header */
.pwa-account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    padding: 0 14px;
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(14, 16, 21, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--pwa-border-subtle, rgba(255, 255, 255, 0.08));
    margin-bottom: 4px;
}

.pwa-account-header-left,
.pwa-account-header-right {
    display: flex;
    align-items: center;
    width: 42px;
}

.pwa-account-header-right {
    justify-content: flex-end;
}

.pwa-account-header-center {
    flex: 1;
    text-align: center;
    overflow: hidden;
    padding: 0 8px;
}

.pwa-account-header-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-account-header-subtitle {
    display: block;
    font-size: 0.72rem;
    color: var(--pwa-text-secondary, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-account-back-btn,
.pwa-account-sheet-trigger-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.pwa-account-back-btn:active,
.pwa-account-sheet-trigger-btn:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.15);
}

/* Horizontal Scrollable Tabs Bar */
.pwa-account-tabs-nav {
    position: sticky;
    top: 54px;
    z-index: 95;
    background: rgba(14, 16, 21, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--pwa-border-subtle, rgba(255, 255, 255, 0.06));
    margin-bottom: 12px;
}

.pwa-account-tabs-scroller {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}

.pwa-account-tabs-scroller::-webkit-scrollbar {
    display: none;
}

.pwa-account-tab-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pwa-text-secondary, #9ca3af);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    text-decoration: none !important;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.pwa-account-tab-item i {
    font-size: 0.95rem;
}

.pwa-account-tab-item:active {
    transform: scale(0.95);
}

.pwa-account-tab-item.active {
    background: var(--pwa-theme-color, #e50914);
    color: #ffffff !important;
    border-color: var(--pwa-theme-color, #e50914);
    box-shadow: 0 4px 14px var(--pwa-theme-glow, rgba(229, 9, 20, 0.38));
}

/* PWA Account Mobile View Wrapper */
.pwa-account-mobile-view {
    padding: 4px 2px 24px;
}

/* PWA Cards */
.pwa-card {
    background: var(--pwa-surface, #161820);
    border: 1px solid var(--pwa-border, rgba(255, 255, 255, 0.1));
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.pwa-card-glass {
    background: rgba(22, 24, 32, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.pwa-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.pwa-card-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pwa-card-title i {
    color: var(--pwa-theme-color, #e50914);
    font-size: 1.15rem;
}

/* PWA Status Pills */
.pwa-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3.5px 9px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pwa-pill-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.pwa-pill-warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

.pwa-pill-theme {
    background: var(--pwa-theme-glow-soft, rgba(229, 9, 20, 0.16));
    border: 1px solid var(--pwa-theme-color, #e50914);
    color: #ffffff;
}

.pwa-pill-muted {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--pwa-text-secondary, #9ca3af);
}

/* PWA Mobile History & Transaction Cards */
.pwa-history-card {
    background: var(--pwa-surface, #161820);
    border: 1px solid var(--pwa-border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 18px;
    padding: 15px;
    margin-bottom: 12px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.pwa-history-card:active {
    transform: scale(0.98);
}

.pwa-history-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.pwa-history-title-wrap {
    flex: 1;
}

.pwa-history-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 2px 0;
}

.pwa-history-subtitle {
    font-size: 0.78rem;
    color: var(--pwa-text-secondary, #9ca3af);
    margin: 0;
}

.pwa-history-amount {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    text-align: right;
    white-space: nowrap;
}

.pwa-history-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    margin-bottom: 12px;
}

.pwa-meta-cell {
    display: flex;
    flex-direction: column;
}

.pwa-meta-label {
    font-size: 0.7rem;
    color: var(--pwa-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    margin-bottom: 2px;
}

.pwa-meta-value {
    font-size: 0.82rem;
    color: #e5e7eb;
    font-weight: 600;
}

.pwa-invoice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.pwa-invoice-btn:hover,
.pwa-invoice-btn:active {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

/* PWA Touch-Friendly Form Elements */
.pwa-form-group {
    margin-bottom: 16px;
}

.pwa-form-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #e5e7eb;
    margin-bottom: 6px;
}

.pwa-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.pwa-input-icon {
    position: absolute;
    left: 14px;
    color: var(--pwa-text-secondary, #9ca3af);
    font-size: 1.15rem;
    pointer-events: none;
    z-index: 2;
}

.pwa-input-trailing {
    position: absolute;
    right: 12px;
    color: var(--pwa-text-secondary, #9ca3af);
    font-size: 1.15rem;
    cursor: pointer;
    z-index: 2;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pwa-form-control {
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    font-size: 0.92rem !important;
    padding: 0 14px !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

.pwa-form-control.has-leading-icon {
    padding-left: 44px !important;
}

.pwa-form-control.has-trailing-icon {
    padding-right: 44px !important;
}

.pwa-form-control:focus {
    border-color: var(--pwa-theme-color, #e50914) !important;
    box-shadow: 0 0 0 3px var(--pwa-theme-glow-soft, rgba(229, 9, 20, 0.2)) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

.pwa-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    border-radius: 14px;
    background: var(--pwa-theme-color, #e50914);
    border: none;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px var(--pwa-theme-glow, rgba(229, 9, 20, 0.38));
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.pwa-btn-primary:active {
    transform: scale(0.97);
    filter: brightness(0.9);
}

.pwa-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.pwa-btn-secondary:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.15);
}

.pwa-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    border-radius: 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.pwa-btn-danger:active {
    background: rgba(239, 68, 68, 0.22);
    transform: scale(0.97);
}

/* PWA Avatar Upload */
.pwa-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.pwa-avatar-ring {
    position: relative;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, var(--pwa-theme-color, #e50914), rgba(255, 255, 255, 0.2));
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.pwa-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #111;
    max-width: 35px !important;
}

.pwa-avatar-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pwa-theme-color, #e50914);
    border: 2px solid #161820;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* PWA Device Item */
.pwa-device-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--pwa-border-subtle, rgba(255, 255, 255, 0.06));
    border-radius: 14px;
    margin-bottom: 10px;
}

.pwa-device-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pwa-theme-color, #e50914);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.pwa-device-info {
    flex: 1;
    padding: 0 12px;
}

.pwa-device-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.pwa-device-meta {
    font-size: 0.74rem;
    color: var(--pwa-text-secondary, #9ca3af);
    margin: 0;
}

/* PWA Referral Dark View */
.pwa-referral-hero-card {
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.15) 0%, rgba(22, 24, 32, 0.95) 100%);
    border: 1px solid rgba(229, 9, 20, 0.3);
    border-radius: 20px;
    padding: 20px 16px;
    text-align: center;
    margin-bottom: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.pwa-referral-icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--pwa-theme-glow-soft, rgba(229, 9, 20, 0.2));
    border: 1px solid var(--pwa-theme-color, #e50914);
    color: var(--pwa-theme-color, #e50914);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 12px;
    box-shadow: 0 0 16px var(--pwa-theme-glow, rgba(229, 9, 20, 0.35));
}

.pwa-referral-hero-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px;
}

.pwa-referral-hero-desc {
    font-size: 0.84rem;
    color: #cbd5e1;
    margin-bottom: 12px;
    line-height: 1.4;
}

.pwa-referral-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.pwa-stat-micro-card {
    background: var(--pwa-surface, #161820);
    border: 1px solid var(--pwa-border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    padding: 12px 6px;
    text-align: center;
}

.pwa-stat-micro-card i {
    font-size: 1.2rem;
    margin-bottom: 4px;
    display: block;
}

.pwa-stat-micro-num {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}

.pwa-stat-micro-label {
    font-size: 0.68rem;
    color: var(--pwa-text-secondary, #9ca3af);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pwa-share-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.pwa-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.pwa-share-btn-wa {
    background: #25D366;
    color: #ffffff !important;
}

.pwa-share-btn-tg {
    background: #229ED9;
    color: #ffffff !important;
}

.pwa-share-btn-native {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
    grid-column: span 2;
}

/* PWA 2-Column Watchlist & Rental Cards */
.pwa-media-grid-2col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 !important;
}

.pwa-media-grid-2col .watchlist-box,
.pwa-media-grid-2col .unlock-box,
.pwa-media-grid-2col .movie-card {
    width: 100% !important;
    margin: 0 !important;
}

/* Hide non-PWA desktop container when PWA mobile is rendered */
body.is-pwa-standalone .pwa-desktop-account-layout {
    display: none !important;
}

body:not(.is-pwa-standalone) .pwa-mobile-account-layout {
    display: none !important;
}

/* ==========================================================================
   15. PWA Search Bottom Sheet Styles
   ========================================================================== */
.pwa-search-input-box {
    position: relative;
    display: flex;
    align-items: center;
}

.pwa-search-input-box .pwa-search-input {
    padding-left: 44px !important;
    padding-right: 44px !important;
    height: 50px !important;
    font-size: 0.95rem !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.pwa-search-input-box .pwa-search-input:focus {
    border-color: var(--pwa-theme-color, #e50914) !important;
    box-shadow: 0 0 0 3px var(--pwa-theme-glow-soft, rgba(229, 9, 20, 0.22)) !important;
    background: rgba(255, 255, 255, 0.09) !important;
}

.pwa-search-input-icon {
    position: absolute;
    left: 14px;
    font-size: 1.25rem;
    color: var(--pwa-text-secondary, #9ca3af);
    pointer-events: none;
    z-index: 2;
}

.pwa-search-clear-btn {
    position: absolute;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--pwa-text-secondary, #9ca3af);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: color 0.15s ease;
}

.pwa-search-clear-btn:active {
    color: #ffffff;
}

.pwa-search-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.pwa-search-tag-chip:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.96);
}

/* ==========================================================================
   PWA GUEST LANDING PAGE (Mobile-App-First UX / Installed Standalone Mode Only)
   Strictly scoped to installed PWA apps (.is-pwa-standalone / display-mode)
   ========================================================================== */

/* 1. Mode Visibility Isolation */
.guest-pwa-experience,
.pwa-only-experience {
    display: none !important;
}

.guest-web-experience {
    display: block;
}

html.is-pwa-standalone .guest-web-experience,
body.is-pwa-standalone .guest-web-experience {
    display: none !important;
}

html.is-pwa-standalone .guest-pwa-experience,
body.is-pwa-standalone .guest-pwa-experience {
    display: block !important;
}

@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
    .guest-web-experience {
        display: none !important;
    }
    .guest-pwa-experience,
    .pwa-only-experience {
        display: block !important;
    }
}

.guest-pwa-experience {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding-bottom: 30px;
}

/* 2. Top Welcome Greeting Strip */
.pwa-guest-top-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px 14px;
}

.pwa-guest-welcome-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pwa-text-primary, #ffffff);
    letter-spacing: 0.02em;
}

.pwa-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bs-primary, #e50914);
    box-shadow: 0 0 10px var(--bs-primary, #e50914);
    animation: pwaPulse 2s infinite ease-in-out;
}

@keyframes pwaPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.75); }
}

.pwa-guest-signin-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--bs-primary-rgb), 0.15);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.4);
    border-radius: 9999px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--pwa-text-primary, #ffffff);
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.pwa-guest-signin-pill:active {
    background: var(--bs-primary, #e50914);
    transform: scale(0.96);
}

/* 3. Mobile Cinematic Spotlight Billboard */
.pwa-guest-spotlight-card {
    position: relative;
    width: calc(100% - 24px);
    margin: 0 auto 20px;
    border-radius: 22px;
    overflow: hidden;
    min-height: 440px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--pwa-surface, #161820);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.pwa-spotlight-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 1;
}

.pwa-spotlight-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: linear-gradient(
        180deg,
        rgba(14, 16, 21, 0.2) 0%,
        rgba(14, 16, 21, 0.1) 20%,
        rgba(14, 16, 21, 0.65) 55%,
        rgba(14, 16, 21, 0.95) 82%,
        var(--bs-body-bg, #0e1015) 100%
    );
}

.pwa-spotlight-top-tags {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pwa-spotlight-featured-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(14, 16, 21, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9999px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
}

.pwa-spotlight-featured-tag i {
    color: var(--bs-primary, #e50914);
}

.pwa-spotlight-free-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bs-primary, #e50914);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.45);
    border-radius: 9999px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #ffffff;
}

.pwa-spotlight-content-body {
    position: relative;
    z-index: 3;
    padding: 20px 16px 18px;
}

.pwa-spotlight-vj-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(var(--bs-primary-rgb), 0.22);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.5);
    border-radius: 9999px;
    padding: 3px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
}

.pwa-spotlight-title {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.pwa-spotlight-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 8px;
}

.pwa-spotlight-meta-rating {
    color: #ffc107;
    font-weight: 700;
}

.pwa-spotlight-meta-badge {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
}

.pwa-spotlight-synopsis {
    font-size: 0.84rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pwa-spotlight-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pwa-btn-play-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--bs-primary, #e50914);
    box-shadow: 0 6px 20px rgba(var(--bs-primary-rgb), 0.45);
    border: none;
    border-radius: 9999px;
    padding: 12px 16px;
    color: #ffffff;
    font-size: 0.94rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pwa-btn-play-hero:active {
    transform: scale(0.96);
    box-shadow: 0 2px 10px rgba(var(--bs-primary-rgb), 0.6);
}

.pwa-btn-info-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9999px;
    padding: 12px 16px;
    color: #ffffff;
    font-size: 0.94rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pwa-btn-info-hero:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.96);
}

/* Guest PWA Page: Zero top offset, overlap header, hide bottom dock */
body.is-pwa-guest-page,
body.is-pwa-standalone.is-pwa-guest-page,
body.is-pwa-standalone:has(.guest-pwa-experience) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.is-pwa-guest-page #pwa-bottom-dock,
body.is-pwa-guest-page .pwa-bottom-dock,
body.is-pwa-standalone.is-pwa-guest-page #pwa-bottom-dock,
body.is-pwa-standalone.is-pwa-guest-page .pwa-bottom-dock,
body.is-pwa-standalone:has(.guest-pwa-experience) #pwa-bottom-dock,
body.is-pwa-standalone:has(.guest-pwa-experience) .pwa-bottom-dock {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.is-pwa-standalone:has(.guest-pwa-experience) .pwa-mobile-topbar,
body.is-pwa-guest-page .pwa-mobile-topbar {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%) !important;
}

/* 4. Mobile Phone Instant Access Card - Full Screen & Centered Flagship Hero */
.pwa-guest-phone-card {
    position: relative;
    overflow: hidden;
    min-height: 75vh;
    min-height: 75dvh;
    width: 100%;
    margin: 0 0 28px 0 !important;
    padding: calc(60px + var(--pwa-safe-top, 0px) + 24px) 20px calc(32px + var(--pwa-safe-bottom, 0px)) 20px !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), inset 0 0 100px rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Centered Inner Container */
.pwa-guest-phone-card-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    margin: auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Top Badge Strip - Centered */
.pwa-guest-phone-top-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}

.pwa-guest-phone-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9999px;
    padding: 5px 13px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.pwa-guest-phone-badge .pwa-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bs-primary, #e50914);
    box-shadow: 0 0 10px var(--bs-primary, #e50914);
    display: inline-block;
    animation: pwaPulseDot 2s infinite ease-in-out;
}

@keyframes pwaPulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

.pwa-guest-phone-free-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.73rem;
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(16, 185, 129, 0.32);
    border-radius: 9999px;
    padding: 5px 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Card Header with Icon & Typography - Stacked & Centered */
.pwa-guest-phone-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
    width: 100%;
}

.pwa-guest-phone-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb, 229, 9, 20), 0.3) 0%, rgba(var(--bs-primary-rgb, 229, 9, 20), 0.1) 100%);
    border: 1.5px solid rgba(var(--bs-primary-rgb, 229, 9, 20), 0.5);
    color: var(--bs-primary, #e50914);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
    margin: 0 auto;
    box-shadow: 0 8px 24px rgba(var(--bs-primary-rgb, 229, 9, 20), 0.32);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pwa-guest-phone-card-icon:hover {
    transform: scale(1.06);
}

.pwa-guest-phone-card-text {
    width: 100%;
    text-align: center;
}

.pwa-guest-phone-card-title {
    font-size: clamp(1.45rem, 5.5vw, 1.85rem);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px;
    letter-spacing: -0.025em;
    line-height: 1.25;
    text-align: center;
}

.pwa-guest-phone-card-desc {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 auto;
    max-width: 340px;
    line-height: 1.48;
    text-align: center;
}

/* Phone Input Area inside Card - Centered */
.pwa-guest-phone-input-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    text-align: center;
}

.pwa-guest-phone-card .streamit-phone-auth-cta {
    max-width: 100%;
    margin: 0 auto;
}

.pwa-guest-phone-card .streamit-cta-input-group {
    background: rgba(14, 16, 23, 0.88) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 18px !important;
    padding: 6px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 2px 6px rgba(0, 0, 0, 0.45) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pwa-guest-phone-card .streamit-cta-input-group:focus-within {
    border-color: var(--bs-primary, #e50914) !important;
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb, 229, 9, 20), 0.28), 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 2px 6px rgba(0, 0, 0, 0.45) !important;
}

.pwa-guest-phone-card .streamit-cta-icon {
    display: NONE !important;
    align-items: center !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.5) !important;
    padding-left: 12px !important;
    padding-right: 6px !important;
    font-size: 1.25rem !important;
}

.pwa-guest-phone-card .streamit-cta-input {
    background: transparent !important;
    color: #ffffff !important;
    font-size: 0.98rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    height: 46px !important;
    min-width: 250px !important;
    text-align: center !important;
    padding: 0 10px !important;
}

.pwa-guest-phone-card .streamit-cta-input::placeholder {
    color: rgba(255, 255, 255, 0.38) !important;
    font-weight: 400 !important;
}

.pwa-guest-phone-card .streamit-cta-btn {
    border-radius: 13px !important;
    height: 46px !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    background: var(--bs-primary, #e50914) !important;
    border: none !important;
    padding: 0 18px !important;
    box-shadow: 0 4px 18px rgba(var(--bs-primary-rgb, 229, 9, 20), 0.45) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
    max-width: 80% !important;
    
}

.pwa-guest-phone-card .streamit-cta-btn:active {
    transform: scale(0.96) !important;
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb, 229, 9, 20), 0.3) !important;
}

.pwa-guest-phone-card .streamit-cta-feedback {
    text-align: center !important;
}

@media (max-width: 379.98px) {
    .pwa-guest-phone-card .streamit-cta-input-group {
        flex-direction: column !important;
    }
    .pwa-guest-phone-card .streamit-cta-btn {
        width: 100% !important;
        margin-top: 8px !important;
    }
}

/* Scroll Down Hint at bottom of full screen card */
.pwa-guest-scroll-down-hint {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none !important;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.2s ease;
}

.pwa-guest-scroll-down-hint:hover,
.pwa-guest-scroll-down-hint:focus {
    color: rgba(255, 255, 255, 0.9);
}

.pwa-guest-bounce-icon {
    font-size: 1.15rem;
    animation: pwaBounceDown 1.8s infinite ease-in-out;
}

@keyframes pwaBounceDown {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    50% {
        transform: translateY(6px);
        opacity: 1;
    }
}

/* 5. Native App Feature Highlights Strip */
.pwa-guest-perks-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px 20px;
    scrollbar-width: none;
}

.pwa-guest-perks-strip::-webkit-scrollbar {
    display: none;
}

.pwa-guest-perk-pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    padding: 8px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

.pwa-guest-perk-pill i {
    font-size: 1rem;
    color: var(--bs-primary, #e50914);
}

/* 6. Mobile Touch Rails */
.pwa-guest-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 10px;
}

.pwa-guest-section-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pwa-guest-section-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.01em;
}

.pwa-guest-section-badge {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    text-transform: uppercase;
}

.pwa-guest-touch-rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px 24px;
    scrollbar-width: none;
}

.pwa-guest-touch-rail::-webkit-scrollbar {
    display: none;
}

/* Sizing inside touch rail: 2.3 cards on mobile */
.pwa-guest-touch-rail .atomic-card-col,
.pwa-guest-touch-rail .col {
    flex: 0 0 145px !important;
    width: 145px !important;
    max-width: 145px !important;
    scroll-snap-align: start;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 480px) {
    .pwa-guest-touch-rail .atomic-card-col,
    .pwa-guest-touch-rail .col {
        flex: 0 0 calc((100vw - 44px) / 2.3) !important;
        width: calc((100vw - 44px) / 2.3) !important;
        max-width: calc((100vw - 44px) / 2.3) !important;
        min-width: 130px !important;
    }
}

.pwa-guest-touch-rail .atomic-content-card {
    height: 100%;
}

/* 7. Floating Bottom Guest CTA Capsule */
.pwa-guest-floating-dock-cta {
    position: fixed;
    bottom: calc(var(--pwa-dock-height, 64px) + var(--pwa-safe-bottom, 0px) + 14px);
    left: 14px;
    right: 14px;
    z-index: 1030;
    background: rgba(20, 22, 30, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    padding: 8px 10px 8px 16px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(0);
    opacity: 1;
}

.pwa-guest-floating-dock-cta.dock-hidden {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
}

.pwa-guest-floating-dock-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pwa-guest-floating-dock-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bs-primary, #e50914);
    box-shadow: 0 4px 14px rgba(var(--bs-primary-rgb), 0.45);
    border-radius: 9999px;
    padding: 8px 18px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.pwa-guest-floating-dock-btn:active {
    transform: scale(0.95);
}