/*
Theme Name: CLIFF MOVIES
Theme URI: https://cliffmovies.com
Author: Cliff Movies Team
Author URI: https://cliffmovies.com
Description: A premium Netflix-style OTT streaming WordPress theme for Cliff Movies. Features dark UI, video streaming, subscription management, QR/UPI payments, and Elementor support. Built for Indian market with Razorpay, Stripe, and SabPaisa integration.
Version: 3.5.4 | Updated: 02 August 2026
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: cliffmovies
Tags: entertainment, video, streaming, ott, netflix-style, dark, subscription, membership, elementor, responsive

Cliff Movies WordPress Theme
Copyright (C) 2025 Cliff Movies
*/

/* ========================================
   CLIFF MOVIES - MAIN STYLESHEET
   Netflix-Style Dark OTT Theme
   ======================================== */

/* CSS Variables */
:root {
    --cm-bg: #0f0f0f;
    --cm-bg-light: #1a1a1a;
    --cm-bg-card: #161616;
    --cm-bg-hover: #2a2a2a;
    --cm-text: #ffffff;
    --cm-text-secondary: #a3a3a3;
    --cm-text-muted: #737373;
    --cm-primary: #e50914;
    --cm-primary-hover: #f40612;
    --cm-accent: #e50914;
    --cm-border: #2a2a2a;
    --cm-border-light: #3a3a3a;
    --cm-gradient-overlay: linear-gradient(to top, rgba(15,15,15,0.95) 0%, rgba(15,15,15,0.4) 50%, rgba(15,15,15,0.1) 100%);
    --cm-gradient-hero: linear-gradient(77deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%);
    --cm-font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cm-radius: 8px;
    --cm-radius-lg: 12px;
    --cm-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Base */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--cm-font-main);
    background: var(--cm-bg);
    color: var(--cm-text);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--cm-text); text-decoration: none; transition: var(--cm-transition); }
a:hover { color: var(--cm-primary); }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; border: none; outline: none; }
ul, ol { list-style: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--cm-bg); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* ========================================
   HEADER & NAVIGATION
   ======================================== */
.cm-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0 4%;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
    transition: var(--cm-transition);
}
.cm-header.scrolled {
    background: rgba(15,15,15,0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.cm-header-inner { display: flex; align-items: center; gap: 40px; max-width: 1920px; width: 100%; margin: 0 auto; }
.cm-logo { display: flex; align-items: center; gap: 10px; }
.cm-logo img { height: 40px; width: auto; }
.cm-logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--cm-primary);
    letter-spacing: -0.5px;
}
.cm-nav { display: flex; align-items: center; gap: 32px; flex: 1; }
.cm-nav a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--cm-text);
    opacity: 0.85;
    transition: var(--cm-transition);
    position: relative;
}
.cm-nav a:hover, .cm-nav a.active { opacity: 1; color: var(--cm-text); }
.cm-nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--cm-primary);
    transition: var(--cm-transition);
}
.cm-nav a:hover::after, .cm-nav a.active::after { width: 100%; }
.cm-header-actions { display: flex; align-items: center; gap: 16px; }
.cm-search-btn, .cm-notify-btn {
    background: none;
    color: var(--cm-text);
    font-size: 1.2rem;
    padding: 8px;
    border-radius: 50%;
    transition: var(--cm-transition);
}
.cm-search-btn:hover, .cm-notify-btn:hover { background: rgba(255,255,255,0.1); }
.cm-btn-login {
    padding: 8px 20px;
    background: transparent;
    color: var(--cm-text);
    border: 1px solid var(--cm-border-light);
    border-radius: var(--cm-radius);
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--cm-transition);
}
.cm-btn-login:hover { border-color: var(--cm-text); background: rgba(255,255,255,0.05); }
.cm-btn-subscribe {
    padding: 8px 20px;
    background: var(--cm-primary);
    color: #fff;
    border-radius: var(--cm-radius);
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--cm-transition);
}
.cm-btn-subscribe:hover { background: var(--cm-primary-hover); transform: translateY(-1px); }
.cm-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: linear-gradient(135deg, #e50914, #b20710);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    position: relative;
}
.cm-user-menu {
    position: absolute;
    top: 48px;
    right: 0;
    background: var(--cm-bg-light);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    padding: 8px 0;
    min-width: 180px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--cm-transition);
}
.cm-user-avatar:hover .cm-user-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cm-user-menu a {
    display: block;
    padding: 10px 20px;
    font-size: 0.85rem;
    color: var(--cm-text);
}
.cm-user-menu a:hover { background: var(--cm-bg-hover); color: var(--cm-text); }

/* Mobile Menu */
.cm-mobile-toggle { display: none; background: none; color: var(--cm-text); font-size: 1.5rem; }

/* ========================================
   HERO BANNER (HOMEPAGE)
   ======================================== */
.cm-hero {
    position: relative;
    height: 85vh;
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.cm-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    z-index: 1;
}
.cm-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--cm-gradient-hero);
}
.cm-hero-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, var(--cm-bg) 0%, transparent 100%);
    z-index: 2;
}
.cm-hero-content {
    position: relative;
    z-index: 3;
    padding: 0 4% 80px;
    max-width: 800px;
}
.cm-hero-logo {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 8px;
    letter-spacing: -1px;
    text-shadow: 2px 2px 20px rgba(0,0,0,0.8);
}
.cm-hero-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: var(--cm-text-secondary);
}
.cm-hero-rating { color: #ffd700; font-weight: 600; }
.cm-hero-year, .cm-hero-duration, .cm-hero-quality {
    padding: 2px 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}
.cm-hero-desc {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--cm-text-secondary);
    margin-bottom: 28px;
    max-width: 600px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cm-hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.cm-btn-play {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: var(--cm-text);
    color: #000;
    border-radius: var(--cm-radius);
    font-size: 0.95rem;
    font-weight: 700;
    transition: var(--cm-transition);
}
.cm-btn-play:hover { background: #e0e0e0; color: #000; transform: scale(1.02); }
.cm-btn-trailer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: rgba(255,255,255,0.15);
    color: var(--cm-text);
    border-radius: var(--cm-radius);
    font-size: 0.95rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    transition: var(--cm-transition);
}
.cm-btn-trailer:hover { background: rgba(255,255,255,0.25); color: var(--cm-text); }

/* ========================================
   CONTENT SECTIONS & ROWS
   ======================================== */
.cm-section { padding: 30px 4%; }
.cm-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cm-section-title a { font-size: 0.8rem; color: var(--cm-primary); font-weight: 600; }
.cm-section-title a:hover { text-decoration: underline; }

/* Content Row (horizontal scroll) */
.cm-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
    scrollbar-width: none;
}
.cm-row::-webkit-scrollbar { display: none; }

/* Content Card */
.cm-card {
    flex: 0 0 auto;
    width: 16%;
    min-width: 200px;
    scroll-snap-align: start;
    cursor: pointer;
    transition: var(--cm-transition);
    position: relative;
}
.cm-card:hover { transform: scale(1.05); z-index: 10; }
.cm-card:hover .cm-card-info { opacity: 1; }
.cm-card-img {
    position: relative;
    aspect-ratio: 2/3;
    border-radius: var(--cm-radius);
    overflow: hidden;
    background: var(--cm-bg-card);
}
.cm-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--cm-transition);
}
.cm-card:hover .cm-card-img img { filter: brightness(1.1); }
.cm-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 10px;
    background: var(--cm-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 2;
}
.cm-card-badge.new { background: #ff4757; }
.cm-card-badge.free { background: #2ed573; }
.cm-card-badge.premium { background: #ffa502; }
.cm-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 50%);
    opacity: 0;
    transition: var(--cm-transition);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
}
.cm-card:hover .cm-card-overlay { opacity: 1; }
.cm-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    opacity: 0;
    transition: var(--cm-transition);
}
.cm-card:hover .cm-card-play { opacity: 1; }
.cm-card-title {
    margin-top: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cm-card-episode {
    font-size: 0.75rem;
    color: var(--cm-text-muted);
    margin-top: 2px;
}

/* Row Navigation Arrows */
.cm-row-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: var(--cm-transition);
}
.cm-row-wrap { position: relative; }
.cm-row-wrap:hover .cm-row-nav { opacity: 1; }
.cm-row-nav.prev { left: 10px; }
.cm-row-nav.next { right: 10px; }
.cm-row-nav:hover { background: rgba(0,0,0,0.8); }

/* ========================================
   VIDEO PREVIEW MODAL (10-Second)
   ======================================== */
.cm-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--cm-transition);
}
.cm-preview-modal.active { opacity: 1; visibility: visible; }
.cm-preview-container {
    position: relative;
    width: 90%;
    max-width: 1000px;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: var(--cm-radius-lg);
    overflow: hidden;
}
.cm-preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cm-preview-lock {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 10;
}
.cm-preview-lock-icon {
    font-size: 4rem;
    color: var(--cm-primary);
}
.cm-preview-lock h3 {
    font-size: 1.5rem;
    font-weight: 700;
}
.cm-preview-lock p {
    color: var(--cm-text-secondary);
    font-size: 0.9rem;
}
.cm-preview-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: var(--cm-primary);
    width: 0%;
    transition: width 0.1s linear;
    z-index: 5;
}
.cm-preview-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    z-index: 20;
    cursor: pointer;
    transition: var(--cm-transition);
}
.cm-preview-close:hover { background: rgba(0,0,0,0.9); }

/* ========================================
   LOGIN / REGISTER MODAL
   ======================================== */
.cm-auth-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--cm-transition);
}
.cm-auth-modal.active { opacity: 1; visibility: visible; }
.cm-auth-container {
    background: var(--cm-bg-light);
    border-radius: var(--cm-radius-lg);
    padding: 40px;
    width: 90%;
    max-width: 460px;
    position: relative;
    border: 1px solid var(--cm-border);
}
.cm-auth-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    color: var(--cm-text-secondary);
    font-size: 1.3rem;
    cursor: pointer;
}
.cm-auth-close:hover { color: var(--cm-text); }
.cm-auth-logo {
    text-align: center;
    margin-bottom: 28px;
}
.cm-auth-logo h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--cm-primary);
}
.cm-auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    background: var(--cm-bg-card);
    border-radius: var(--cm-radius);
    padding: 4px;
}
.cm-auth-tab {
    flex: 1;
    padding: 10px;
    background: none;
    color: var(--cm-text-secondary);
    border-radius: var(--cm-radius);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    transition: var(--cm-transition);
}
.cm-auth-tab.active { background: var(--cm-primary); color: #fff; }
.cm-form-group { margin-bottom: 16px; }
.cm-form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--cm-text-secondary);
    margin-bottom: 6px;
}
/* Checkbox group labels must use flex, not block */
.cm-checkbox-group label,
.cm-form-group.cm-checkbox-group label {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--cm-text);
    cursor: pointer;
    line-height: 1.5;
    margin-bottom: 0;
    user-select: none;
}
.cm-checkbox-group input[type="checkbox"] {
    width: auto;
    min-width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--cm-primary);
    cursor: pointer;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
}
.cm-checkbox-group span {
    flex: 1;
}
.cm-checkbox-group { margin-bottom: 12px; }
.cm-form-group input {
    width: 100%;
    padding: 12px 16px;
    background: var(--cm-bg-card);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    color: var(--cm-text);
    font-size: 0.9rem;
    transition: var(--cm-transition);
}
.cm-form-group input:focus {
    border-color: var(--cm-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(229,9,20,0.15);
}
.cm-btn-submit {
    width: 100%;
    padding: 14px;
    background: var(--cm-primary);
    color: #fff;
    border-radius: var(--cm-radius);
    font-size: 0.95rem;
    font-weight: 700;
    transition: var(--cm-transition);
}
.cm-btn-submit:hover { background: var(--cm-primary-hover); }
.cm-auth-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
    color: var(--cm-text-muted);
    font-size: 0.8rem;
}
.cm-auth-divider::before, .cm-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cm-border);
}
.cm-social-login { display: flex; flex-direction: column; gap: 10px; }
.cm-btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    background: #fff;
    color: #333;
    border-radius: var(--cm-radius);
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--cm-transition);
}
.cm-btn-google:hover { background: #f0f0f0; }
.cm-btn-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    background: var(--cm-bg-card);
    color: var(--cm-text);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--cm-transition);
}
.cm-btn-phone:hover { background: var(--cm-bg-hover); }

/* OTP Input */
.cm-otp-inputs { display: flex; gap: 8px; justify-content: center; margin: 16px 0; }
.cm-otp-inputs input {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--cm-bg-card);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    color: var(--cm-text);
}
.cm-otp-inputs input:focus { border-color: var(--cm-primary); }

/* ========================================
   SUBSCRIPTION / PRICING PAGE
   ======================================== */
.cm-pricing { padding: 100px 4% 60px; min-height: 100vh; }
.cm-pricing-header { text-align: center; margin-bottom: 60px; }
.cm-pricing-header h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 12px; }
.cm-pricing-header p { color: var(--cm-text-secondary); font-size: 1.05rem; }
.cm-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}
.cm-pricing-card {
    background: var(--cm-bg-light);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-lg);
    padding: 40px 32px;
    text-align: center;
    position: relative;
    transition: var(--cm-transition);
}
.cm-pricing-card:hover { border-color: var(--cm-border-light); transform: translateY(-4px); }
.cm-pricing-card.featured { border-color: var(--cm-primary); }
.cm-pricing-card.featured::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cm-primary);
    color: #fff;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
}
.cm-pricing-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
.cm-pricing-price {
    font-size: 3rem;
    font-weight: 800;
    margin: 16px 0;
}
.cm-pricing-price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--cm-text-muted);
}
.cm-pricing-features { text-align: left; margin: 24px 0; }
.cm-pricing-features li {
    padding: 10px 0;
    border-bottom: 1px solid var(--cm-border);
    font-size: 0.9rem;
    color: var(--cm-text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
}
.cm-pricing-features li::before {
    content: '\2713';
    color: var(--cm-primary);
    font-weight: 700;
}

/* ========================================
   PAYMENT PAGE & QR CODE
   ======================================== */
.cm-payment { padding: 100px 4% 60px; min-height: 100vh; }
.cm-payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: start;
}
.cm-payment-plan {
    background: var(--cm-bg-light);
    border-radius: var(--cm-radius-lg);
    padding: 32px;
    border: 1px solid var(--cm-border);
}
.cm-payment-plan h3 { margin-bottom: 16px; }
.cm-payment-plan .price { font-size: 2rem; font-weight: 800; margin-bottom: 24px; }
.cm-qr-section {
    background: var(--cm-bg-light);
    border-radius: var(--cm-radius-lg);
    padding: 32px;
    border: 1px solid var(--cm-border);
    text-align: center;
}
.cm-qr-code {
    width: 220px;
    height: 220px;
    margin: 20px auto;
    background: #fff;
    padding: 16px;
    border-radius: var(--cm-radius);
}
.cm-qr-code img { width: 100%; height: 100%; }
.cm-payment-methods { margin-top: 24px; }
.cm-payment-method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--cm-bg-card);
    border-radius: var(--cm-radius);
    margin-bottom: 10px;
    cursor: pointer;
    transition: var(--cm-transition);
    border: 2px solid transparent;
}
.cm-payment-method:hover, .cm-payment-method.active { border-color: var(--cm-primary); }
.cm-payment-method img { height: 30px; width: auto; }
.cm-payment-method span { font-weight: 600; font-size: 0.9rem; }

/* ========================================
   SINGLE CONTENT PAGE (MOVIE/SERIES)
   ======================================== */
.cm-single-hero {
    position: relative;
    height: 70vh;
    min-height: 500px;
    display: flex;
    align-items: flex-end;
}
.cm-single-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 20%;
}
.cm-single-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--cm-bg) 0%, rgba(15,15,15,0.7) 50%, rgba(15,15,15,0.3) 100%);
}
.cm-single-content {
    position: relative;
    z-index: 2;
    padding: 0 4% 60px;
    max-width: 900px;
}
.cm-single-title { font-size: 3rem; font-weight: 900; margin-bottom: 12px; }
.cm-single-meta { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.cm-single-meta span {
    font-size: 0.85rem;
    color: var(--cm-text-secondary);
}
.cm-single-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.cm-episode-list { padding: 40px 4%; max-width: 900px; }
.cm-episode-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid var(--cm-border);
    cursor: pointer;
    transition: var(--cm-transition);
    border-radius: var(--cm-radius);
}
.cm-episode-item:hover { background: var(--cm-bg-light); }
.cm-episode-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cm-text-muted);
    min-width: 40px;
}
.cm-episode-thumb {
    width: 160px;
    aspect-ratio: 16/9;
    border-radius: var(--cm-radius);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.cm-episode-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cm-episode-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: var(--cm-transition);
    font-size: 2rem;
}
.cm-episode-item:hover .cm-episode-play { opacity: 1; }
.cm-episode-info { flex: 1; }
.cm-episode-info h4 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.cm-episode-info p {
    font-size: 0.8rem;
    color: var(--cm-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cm-episode-duration {
    font-size: 0.8rem;
    color: var(--cm-text-secondary);
}

/* ========================================
   LOCKED CONTENT OVERLAY
   ======================================== */
.cm-locked-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(20px);
}
.cm-locked-box {
    text-align: center;
    max-width: 500px;
    padding: 40px;
}
.cm-locked-box .lock-icon { font-size: 5rem; margin-bottom: 20px; }
.cm-locked-box h2 { font-size: 2rem; font-weight: 800; margin-bottom: 12px; }
.cm-locked-box p { color: var(--cm-text-secondary); margin-bottom: 28px; }

/* ========================================
   APP DOWNLOAD SECTION
   ======================================== */
.cm-app-section {
    padding: 60px 4%;
    background: linear-gradient(135deg, rgba(229,9,20,0.1) 0%, rgba(0,0,0,0) 100%);
    border-top: 1px solid var(--cm-border);
}
.cm-app-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.cm-app-content h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: 16px; }
.cm-app-content p { color: var(--cm-text-secondary); margin-bottom: 28px; font-size: 1rem; }
.cm-app-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.cm-app-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    background: var(--cm-bg-light);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    transition: var(--cm-transition);
    min-width: 180px;
}
.cm-app-btn:hover { border-color: var(--cm-primary); background: var(--cm-bg-hover); }
.cm-app-btn i { font-size: 1.8rem; }
.cm-app-btn div { text-align: left; }
.cm-app-btn small { display: block; font-size: 0.65rem; color: var(--cm-text-muted); text-transform: uppercase; }
.cm-app-btn strong { display: block; font-size: 0.95rem; font-weight: 700; }
.cm-app-btn.apk { background: var(--cm-primary); border-color: var(--cm-primary); }
.cm-app-btn.apk:hover { background: var(--cm-primary-hover); }
.cm-app-mockup {
    display: flex;
    justify-content: center;
}
.cm-app-mockup img { max-height: 400px; filter: drop-shadow(0 20px 60px rgba(229,9,20,0.2)); }

/* ========================================
   FOOTER
   ======================================== */
/* ── FOOTER ─────────────────────────────────────────── */
.cm-footer {
    padding: 60px 4% 30px;
    border-top: 1px solid var(--cm-border);
    background: var(--cm-bg);
}

/* Dynamic grid: brand column (2fr) + however many link columns admin created (auto) */
.cm-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto 40px;
}

.cm-footer-col h4 {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--cm-text);
}
.cm-footer-col a {
    display: block;
    padding: 6px 0;
    color: var(--cm-text-muted);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
    position: relative;
    padding-left: 0;
}
/* Triangle arrow — hidden by default, slides in on hover */
.cm-footer-col a::before {
    content: '▶';
    font-size: 0.45rem;
    color: var(--cm-primary, #e50914);
    opacity: 0;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    line-height: 1;
}
.cm-footer-col a:hover {
    color: var(--cm-text);
    padding-left: 12px;
}
.cm-footer-col a:hover::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.cm-footer-brand .cm-logo { margin-bottom: 16px; }
.cm-footer-brand p { color: var(--cm-text-muted); font-size: 0.85rem; line-height: 1.8; }
.cm-footer-bottom {
    border-top: 1px solid var(--cm-border);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
}
.cm-footer-bottom p { color: var(--cm-text-muted); font-size: 0.8rem; }
.cm-social-links { display: flex; gap: 12px; }
.cm-social-links a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cm-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cm-text-muted);
    font-size: 0.9rem;
    transition: var(--cm-transition);
}
.cm-social-links a:hover { background: var(--cm-primary); color: #fff; }

/* ========================================
   ELEMENTOR WIDGETS STYLES
   ======================================== */
.cm-widget-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 1200px) {
    .cm-card { width: 20%; min-width: 180px; }
    .cm-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .cm-header { padding: 0 16px; height: 56px; }
    .cm-nav { display: none; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; background: var(--cm-bg); flex-direction: column; padding: 40px 20px; gap: 24px; z-index: 999; }
    .cm-nav.active { display: flex; }
    .cm-nav a { font-size: 1.1rem; }
    .cm-mobile-toggle { display: block; }
    .cm-hero { height: 60vh; min-height: 400px; }
    .cm-hero-logo { font-size: 2rem; }
    .cm-hero-desc { font-size: 0.85rem; -webkit-line-clamp: 2; }
    .cm-card { width: 33.333%; min-width: 140px; }
    .cm-section { padding: 20px 16px; }
    .cm-footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .cm-app-grid { grid-template-columns: 1fr; text-align: center; }
    .cm-app-buttons { justify-content: center; }
    .cm-payment-grid { grid-template-columns: 1fr; }
    .cm-pricing-grid { grid-template-columns: 1fr; }
    .cm-single-title { font-size: 1.75rem; }
    .cm-episode-thumb { width: 120px; }
    .cm-row-nav { display: none; }
    .cm-auth-container { padding: 28px 24px; }
}

@media (max-width: 480px) {
    .cm-card { width: 45%; min-width: 130px; }
    .cm-hero-buttons { flex-direction: column; }
    .cm-btn-play, .cm-btn-trailer { width: 100%; justify-content: center; }
    .cm-pricing-card { padding: 30px 20px; }
    .cm-footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.cm-container { max-width: 1920px; margin: 0 auto; padding: 0 4%; }
.cm-text-center { text-align: center; }
.cm-mt-1 { margin-top: 8px; }
.cm-mt-2 { margin-top: 16px; }
.cm-mt-3 { margin-top: 24px; }
.cm-mb-1 { margin-bottom: 8px; }
.cm-mb-2 { margin-bottom: 16px; }
.cm-mb-3 { margin-bottom: 24px; }
.cm-hidden { display: none !important; }
.cm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Loading Animation */
.cm-skeleton {
    background: linear-gradient(90deg, var(--cm-bg-card) 25%, var(--cm-bg-hover) 50%, var(--cm-bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--cm-radius);
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Toast Notification */
.cm-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 16px 24px;
    background: var(--cm-bg-light);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateX(150%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.cm-toast.show { transform: translateX(0); }
.cm-toast.success { border-left: 4px solid #2ed573; }
.cm-toast.error { border-left: 4px solid #ff4757; }

/* ── Card hover — show play button ── */
.cm-card-hover-overlay:hover { background: rgba(0,0,0,0.45) !important; }
.cm-card:hover .cm-card-play-btn { display: flex !important; }

/* ════════════════════════════════════════════════════════════════════
   PHASE 1.1 — MOBILE / ANDROID WEBVIEW UI POLISH
   CSS-only. Desktop is unaffected: every rule below is either inside a
   mobile media query or uses env(safe-area-inset-*), which resolves to 0
   on non-notched / desktop viewports. No template, JS, or logic changes.
   ════════════════════════════════════════════════════════════════════ */

/* ── P1 · Safe-area / notch support (fixed header clears status bar) ── */
.cm-header {
    /* Push the header content below the status bar / notch, and inset its
       horizontal padding on rounded-corner / punch-hole devices. On desktop
       these insets are 0, so the existing "0 4%" padding is preserved. */
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(4%, env(safe-area-inset-left, 0px));
    padding-right: max(4%, env(safe-area-inset-right, 0px));
    /* Grow the header box by the inset so its 68px content area is preserved. */
    height: calc(68px + env(safe-area-inset-top, 0px));
}
@media (max-width: 768px) {
    .cm-header {
        height: calc(56px + env(safe-area-inset-top, 0px));
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }
    /* Mobile nav drawer opens just under the (now inset) header. */
    .cm-nav {
        top: calc(56px + env(safe-area-inset-top, 0px));
        /* ── P8 · Scrollable mobile menu ── */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    }
}

/* ── P2 · Scrollable auth modal (register form never traps the button) ── */
@media (max-width: 768px) {
    .cm-auth-container {
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Give the modal a little breathing room from the very top/bottom edges,
       including the notch, on short and landscape phone viewports. */
    .cm-auth-modal {
        padding: calc(12px + env(safe-area-inset-top, 0px)) 12px
                 calc(12px + env(safe-area-inset-bottom, 0px));
        align-items: flex-start;
    }
    .cm-auth-container { padding: 28px 22px; }
}

/* ── P3 · 48dp touch targets (mobile only) ── */
@media (max-width: 768px) {
    .cm-btn-play,
    .cm-btn-trailer,
    .cm-btn-subscribe {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Padded hit-area for the hamburger without changing its glyph size. */
    .cm-mobile-toggle {
        min-width: 48px;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    /* Card overlay play button + row arrows reach the 44–48px comfort zone. */
    .cm-card-play-btn { min-width: 44px; min-height: 44px; }
    .cm-nav a { min-height: 44px; display: flex; align-items: center; }
}

/* ── P6 · Defensive mobile logo cap ── */
@media (max-width: 768px) {
    .cm-logo img { max-height: 34px; width: auto; }
}

/* ── P7 · Footer safe-area bottom padding (clears gesture nav bar) ── */
.cm-footer {
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    padding-left: max(4%, env(safe-area-inset-left, 0px));
    padding-right: max(4%, env(safe-area-inset-right, 0px));
}

/* ── P4 · Sub-400px card spacing only (no redesign; ≥400px untouched) ── */
@media (max-width: 400px) {
    /* Slightly more gutter so two-up posters don't touch; sizes unchanged. */
    .cm-row { gap: 10px; }
    .cm-section { padding: 18px 14px; }
    .cm-card { min-width: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   v3.2 — MOBILE NAVIGATION & HEADER REDESIGN
   Everything here is scoped to @media (max-width:768px). Desktop emits
   NONE of these rules, so the desktop header/nav/layout is untouched.
   The new mobile chrome is display:none by default (desktop) and only
   turned on inside the mobile query.
   ════════════════════════════════════════════════════════════════════ */

/* Hide the new mobile chrome on desktop (default state). */
.cm-mheader, .cm-drawer, .cm-drawer-backdrop { display: none; }

@media (max-width: 768px) {

    /* Swap headers: hide the desktop header + its spacer, show the mobile bar. */
    .cm-header { display: none !important; }

    .cm-mheader {
        display: grid;
        grid-template-columns: 48px 1fr auto;
        align-items: center;
        gap: 8px;
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 1000;
        height: calc(56px + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
        padding-left: max(10px, env(safe-area-inset-left, 0px));
        padding-right: max(10px, env(safe-area-inset-right, 0px));
        background: rgba(15, 15, 15, 0.96);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    /* Body offset so content clears the fixed mobile bar (replaces the old
       68px desktop spacer, which we hide next). */
    .cm-header + div[style*="height:68px"],
    div[style*="height:68px"] { height: calc(56px + env(safe-area-inset-top, 0px)) !important; }

    .cm-mh-btn {
        width: 48px; height: 48px;
        display: inline-flex; align-items: center; justify-content: center;
        background: none; border: none; padding: 0; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .cm-hamburger { display: inline-flex; flex-direction: column; gap: 4px; }
    .cm-hamburger span {
        width: 20px; height: 2px; background: #fff; border-radius: 2px;
        transition: transform .2s ease, opacity .2s ease;
    }

    .cm-mh-logo { justify-self: center; display: inline-flex; align-items: center; overflow: hidden; }
    .cm-mh-logo span { font-size: 1.15rem; font-weight: 900; color: var(--cm-primary); letter-spacing: -0.3px; white-space: nowrap; }
    .cm-mh-logo img { max-height: 30px; width: auto; }

    /* Right slot: Subscribe (guest) / avatar (logged-in) — always visible. */
    .cm-mh-subscribe {
        justify-self: end;
        display: inline-flex; align-items: center;
        min-height: 40px; padding: 0 14px;
        background: linear-gradient(135deg, #f6c945, #e5a409);
        color: #1a1a1a; font-weight: 800; font-size: 0.82rem;
        border-radius: 20px; text-decoration: none; white-space: nowrap;
    }
    .cm-mh-subscribe:active { filter: brightness(0.94); }
    .cm-mh-profile { justify-self: end; }
    .cm-mh-avatar {
        width: 38px; height: 38px; border-radius: 50%;
        background: var(--cm-primary); color: #fff;
        display: inline-flex; align-items: center; justify-content: center;
        font-weight: 800; font-size: 1rem;
    }

    /* ── Backdrop ── */
    .cm-drawer-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1099;
        background: rgba(0, 0, 0, 0.55); opacity: 0;
        transition: opacity .25s ease; pointer-events: none;
    }
    .cm-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

    /* ── Slide drawer ── */
    .cm-drawer {
        display: flex; flex-direction: column;
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 1100;
        width: min(86vw, 340px);
        background: #121218;
        transform: translateX(-100%);
        transition: transform .25s ease, visibility .25s ease;
        /* Contain content while the drawer is translated off-screen so no
           child (e.g. the search placeholder) can paint back into the
           viewport in Android WebView. visibility:hidden also removes it from
           rendering entirely when closed; restored to visible when .open. */
        overflow: hidden;
        visibility: hidden;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        box-shadow: 2px 0 24px rgba(0, 0, 0, 0.5);
        overscroll-behavior: contain;
    }
    .cm-drawer.open { transform: translateX(0); visibility: visible; }

    .cm-drawer-top {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 16px 10px;
    }
    .cm-drawer-logo span { font-size: 1.2rem; font-weight: 900; color: var(--cm-primary); }
    .cm-drawer-logo img { max-height: 30px; width: auto; }
    .cm-drawer-close {
        width: 44px; height: 44px; font-size: 1.8rem; line-height: 1;
        background: none; border: none; color: #aaa; cursor: pointer;
    }

    /* Guest actions */
    .cm-drawer-guest { padding: 4px 16px 12px; }
    .cm-drawer-guest-row { display: flex; gap: 10px; margin-top: 10px; }
    .cm-drawer-ghost {
        flex: 1; min-height: 46px;
        background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
        color: #fff; border-radius: 10px; font-size: 0.85rem; font-weight: 700; cursor: pointer;
    }
    .cm-drawer-ghost:active { background: rgba(255, 255, 255, 0.12); }

    .cm-drawer-cta {
        display: flex; align-items: center; justify-content: center;
        min-height: 48px; margin: 0 16px;
        background: linear-gradient(135deg, #f6c945, #e5a409);
        color: #1a1a1a; font-weight: 800; font-size: 0.9rem;
        border-radius: 12px; text-decoration: none;
    }
    .cm-drawer-cta:active { filter: brightness(0.94); }

    /* Profile card */
    .cm-drawer-profile {
        display: flex; align-items: center; gap: 12px;
        padding: 6px 16px 14px;
    }
    .cm-dp-avatar {
        width: 52px; height: 52px; border-radius: 50%;
        background: var(--cm-primary); color: #fff;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 1.4rem; font-weight: 900; flex: 0 0 auto;
    }
    .cm-dp-info { min-width: 0; }
    .cm-dp-name { font-weight: 800; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cm-dp-email { color: #8b8b98; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cm-dp-pill { display: inline-block; margin-top: 5px; padding: 2px 10px; border-radius: 11px; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; }

    .cm-drawer-quick { display: flex; flex-direction: column; padding: 0 8px 8px; }
    .cm-drawer-quick a {
        display: flex; align-items: center; gap: 12px;
        min-height: 46px; padding: 0 12px;
        color: #ddd; text-decoration: none; font-size: 0.86rem; border-radius: 10px;
    }
    .cm-drawer-quick a:active { background: rgba(255, 255, 255, 0.06); }

    /* Sticky search */
    .cm-drawer-search {
        position: sticky; top: 0; z-index: 2;
        display: flex; align-items: center; gap: 8px;
        margin: 8px 16px 4px; padding: 0 12px;
        background: #1c1c26; border: 1.5px solid rgba(255, 255, 255, 0.1);
        border-radius: 24px; min-height: 48px;
    }
    .cm-drawer-search input {
        flex: 1; background: none; border: none; outline: none;
        color: #fff; font-size: 0.9rem; min-height: 48px;
    }
    .cm-ds-icon { color: #888; font-size: 0.95rem; }

    /* Scrollable nav list */
    .cm-drawer-nav {
        flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
        padding: 6px 8px 12px; margin-top: 4px;
    }
    .cm-drawer-nav a {
        display: flex; align-items: center; gap: 14px;
        min-height: 48px; padding: 0 12px;
        color: #eee; text-decoration: none; font-size: 0.92rem; font-weight: 600;
        border-radius: 10px;
    }
    .cm-drawer-nav a:active { background: rgba(255, 255, 255, 0.07); }
    .cm-dn-ico { width: 22px; text-align: center; font-size: 1rem; flex: 0 0 auto; }

    .cm-drawer-logout {
        display: flex; align-items: center; gap: 10px;
        min-height: 50px; padding: 0 20px;
        margin-top: auto;
        color: #ff8080; text-decoration: none; font-weight: 700; font-size: 0.88rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    @media (prefers-reduced-motion: reduce) {
        .cm-drawer, .cm-drawer-backdrop { transition: none; }
    }
}

/* ════════════════════════════════════════════════════════════════════
   v3.2.1 — MOBILE MENU POLISH (premium profile, hero CTA, sticky top,
   scroll region, staggered animations). Still fully mobile-gated.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Drawer becomes a flex column: sticky top + scrolling nav. */
    .cm-drawer { padding-bottom: 0; }
    .cm-drawer-sticky {
        flex: 0 0 auto;
        background: #121218;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        padding-bottom: 10px;
    }

    /* #1 Netflix-style centered profile */
    .cm-drawer-profile {
        display: flex; flex-direction: column; align-items: center; text-align: center;
        padding: 6px 16px 14px; gap: 2px;
    }
    .cm-dp-avatar {
        width: 64px; height: 64px; border-radius: 50%;
        background: linear-gradient(135deg, var(--cm-primary), #b20710);
        color: #fff; display: inline-flex; align-items: center; justify-content: center;
        font-size: 1.6rem; font-weight: 900; margin-bottom: 8px;
        box-shadow: 0 4px 16px rgba(229,9,20,0.35);
    }
    .cm-dp-name { font-weight: 800; font-size: 1.05rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cm-dp-email { color: #8b8b98; font-size: 0.78rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cm-dp-pill { margin-top: 8px; padding: 4px 14px; border-radius: 13px; font-size: 0.72rem; font-weight: 800; }

    /* #2 Full-width hero Subscribe CTA */
    .cm-drawer-cta-hero {
        flex-direction: column; gap: 2px; min-height: 66px;
        margin: 4px 16px 10px; padding: 10px;
        box-shadow: 0 4px 18px rgba(229,169,9,0.3);
    }
    .cm-cta-stars { font-size: 0.7rem; letter-spacing: 3px; opacity: 0.85; }
    .cm-cta-main { font-size: 1.05rem; font-weight: 900; }
    .cm-cta-sub { font-size: 0.68rem; font-weight: 700; opacity: 0.8; }

    /* #7 Search look */
    .cm-drawer-search { margin: 6px 16px 2px; }
    .cm-drawer-search input::placeholder { color: #7a7a86; }

    /* Section labels + groups */
    .cm-nav-label {
        font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px;
        color: #6c6c7a; padding: 12px 20px 6px;
    }
    .cm-nav-group { display: flex; flex-direction: column; padding: 0 8px; }

    /* #10 only the nav scrolls; #5 smooth momentum scroll */
    .cm-drawer-nav {
        flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth; overscroll-behavior: contain;
        padding: 4px 0 0;
    }

    /* Social row */
    .cm-drawer-social {
        display: flex; justify-content: center; gap: 14px; padding: 16px;
    }
    .cm-drawer-social a {
        width: 44px; height: 44px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
        color: #ddd; font-size: 1.05rem; text-decoration: none;
    }
    .cm-drawer-social a:active { background: rgba(255,255,255,0.14); }

    .cm-drawer-logout {
        margin: 4px 8px; border-radius: 10px; border-top: none;
        background: rgba(255,80,80,0.08);
    }
    .cm-drawer-version { text-align: center; color: #555; font-size: 0.68rem; padding: 10px 0 18px; }

    /* #6 subtle staggered entrance (runs each time the drawer opens) */
    .cm-drawer.open .cm-anim { animation: cmItemIn .28s ease both; }
    .cm-drawer.open .cm-drawer-sticky { animation: cmFadeIn .2s ease both; }
    .cm-drawer.open .cm-anim:nth-child(1) { animation-delay: .03s; }
    .cm-drawer.open .cm-anim:nth-child(2) { animation-delay: .06s; }
    .cm-drawer.open .cm-anim:nth-child(3) { animation-delay: .09s; }
    .cm-drawer.open .cm-anim:nth-child(4) { animation-delay: .12s; }
    .cm-drawer.open .cm-anim:nth-child(5) { animation-delay: .15s; }
    .cm-drawer.open .cm-anim:nth-child(6) { animation-delay: .18s; }
    .cm-drawer.open .cm-anim:nth-child(n+7) { animation-delay: .2s; }
    @keyframes cmItemIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
    @keyframes cmFadeIn { from { opacity: 0; } to { opacity: 1; } }

    @media (prefers-reduced-motion: reduce) {
        .cm-drawer.open .cm-anim, .cm-drawer.open .cm-drawer-sticky { animation: none; }
        .cm-drawer-nav { scroll-behavior: auto; }
    }
}

/* ════════════════════════════════════════════════════════════════════
   v3.2.2 — SVG icons, footer brand block, drawer final polish (mobile).
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* SVG icons: consistent size, muted colour, inherit currentColor. */
    .cm-dn-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; flex: 0 0 auto; color: #b9b9c4; }
    .cm-drawer-nav a { color: #e8e8ee; }
    .cm-drawer-nav a:active .cm-dn-ico,
    .cm-drawer-nav a:active { color: #fff; }
    .cm-ico { display: block; }
    .cm-ds-icon { display: inline-flex; color: #7a7a86; }
    .cm-ds-icon .cm-ico { width: 18px; height: 18px; }

    /* Hero CTA with inline icon */
    .cm-cta-main { display: inline-flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 900; }
    .cm-cta-main .cm-ico { width: 18px; height: 18px; }
    .cm-drawer-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
    .cm-drawer-cta .cm-ico { width: 18px; height: 18px; }

    .cm-drawer-logout { display: flex; align-items: center; gap: 10px; }
    .cm-drawer-logout .cm-ico { width: 18px; height: 18px; }

    /* Footer brand block */
    .cm-drawer-foot { padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); text-align: center; border-top: 1px solid rgba(255,255,255,0.06); margin-top: 8px; }
    .cm-drawer-brand { font-weight: 900; font-size: 0.95rem; color: var(--cm-primary); letter-spacing: -0.2px; }
    .cm-drawer-version { color: #5a5a66; font-size: 0.7rem; margin-top: 2px; }
    .cm-drawer-social { display: flex; justify-content: center; gap: 12px; margin-top: 12px; }
    .cm-drawer-social a {
        width: 40px; height: 40px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
        color: #b9b9c4; text-decoration: none;
    }
    .cm-drawer-social a:active { background: rgba(255,255,255,0.12); color: #fff; }
}

/* ════════════════════════════════════════════════════════════════════
   v3.2.2b — screenshot fixes: smaller logo, premium card stars, avatar
   icon, account section. Mobile-gated; desktop untouched.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Slightly smaller mobile logo (~18% less) so the header feels balanced. */
    .cm-mh-logo span { font-size: 0.98rem; }
    .cm-mh-logo img { max-height: 25px; }

    /* Premium card: stars row above the title, richer sub text. */
    .cm-cta-stars { display: block; font-size: 0.72rem; letter-spacing: 4px; color: rgba(26,26,26,0.7); margin-bottom: 2px; }
    .cm-drawer-cta-hero { align-items: flex-start; text-align: left; padding: 14px 18px; }
    .cm-drawer-cta-hero .cm-cta-main { font-size: 1.25rem; font-weight: 900; }
    .cm-drawer-cta-hero .cm-cta-sub { font-size: 0.74rem; line-height: 1.3; margin-top: 3px; opacity: 0.85; }

    /* Profile avatar now uses the SVG person icon centered in the circle. */
    .cm-dp-avatar .cm-ico { width: 30px; height: 30px; color: #fff; }
}

/* ════════════════════════════════════════════════════════════════════
   v3.2.2c — wider/darker/blurred drawer + richer premium card.
   Admin-controlled menu (no hardcoded filtering). Mobile-gated.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Wider drawer (≈90%), darker backdrop, blur behind. */
    .cm-drawer { width: min(90vw, 380px); }
    .cm-drawer-backdrop {
        background: rgba(0, 0, 0, 0.78);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    /* Premium card — badge + tagline + bullet line (Netflix/Prime feel). */
    .cm-drawer-cta-hero { align-items: flex-start; text-align: left; padding: 14px 18px; gap: 1px; }
    .cm-cta-stars { display: block; font-size: 0.72rem; letter-spacing: 4px; color: rgba(26,26,26,0.7); margin-bottom: 2px; }
    .cm-drawer-cta-hero .cm-cta-main { font-size: 1.28rem; font-weight: 900; line-height: 1.1; }
    .cm-drawer-cta-hero .cm-cta-sub { font-size: 0.82rem; font-weight: 800; opacity: 0.9; margin-top: 3px; }
    .cm-cta-tags { font-size: 0.7rem; font-weight: 700; opacity: 0.72; margin-top: 2px; }

    @media (prefers-reduced-motion: reduce) {
        .cm-drawer-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
    }
}

/* ════════════════════════════════════════════════════════════════════
   v3.2.2 (final) — active menu highlighting. Mobile-gated.
   The current section (Movies / Web Series / Music Videos / Reels / …)
   shows red text + a red left indicator. Presentational only.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cm-drawer-nav a.cm-nav-active {
        color: var(--cm-primary);
        font-weight: 800;
        background: rgba(229, 9, 20, 0.08);
        box-shadow: inset 3px 0 0 var(--cm-primary);
    }
    .cm-drawer-nav a.cm-nav-active .cm-dn-ico { color: var(--cm-primary); }
}

/* ════════════════════════════════════════════════════════════════════
   ARTWORK PRESERVATION PATCH (v3.2.3)
   Uploaded thumbnails are designed compositions (title, badges, logo).
   Never crop or zoom them: show the full image, letterboxed on black
   when the box ratio differs (Netflix/Plex-style artwork handling).
   Overrides: .cm-card-img{aspect-ratio:2/3} + img{object-fit:cover}
   (style.css) and the .cm-card-* orientation inline block (wp_head).
   ════════════════════════════════════════════════════════════════════ */

/* Cards: default box becomes 16/9 (matches the uploaded art) and the
   image letterboxes instead of cropping. Applies to every card size. */
.cm-card-img {
    aspect-ratio: 16/9;
    background: #000;                    /* letterbox bars */
}
/* v3.2.4 supersedes card object-fit below (uses cover for 16:9-in-16:9).
   Keeping this block for episode/single hero only. */

/* Episode thumbs: same preservation. */
.cm-episode-thumb { background: #000; }
.cm-episode-thumb img { object-fit: contain; }

/* Single-page hero backdrop: same artwork → same rule. */
.cm-single-hero-bg {
    background-color: #000;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ════════════════════════════════════════════════════════════════════
   v3.2.4 — LANDSCAPE-FIRST HOMEPAGE (matches Netflix reference)
   • cards are 16:9 landscape by default (only cm_reel keeps vertical)
   • hero content spans wider so titles don't stack one-word-per-line
   ════════════════════════════════════════════════════════════════════ */

/* Force 16:9 on every card except vertical Reels (portrait art). */
.cm-card-horizontal .cm-card-img,
.cm-card-square .cm-card-img {
    padding-bottom: 56.25% !important;   /* 16:9 */
    background: #0a0a0a;
}
.cm-card-vertical .cm-card-img {
    padding-bottom: 177.78% !important;  /* 9:16 reels only */
    background: #0a0a0a;
}
.cm-card-horizontal .cm-card-img img,
.cm-card-square .cm-card-img img,
.cm-card-vertical .cm-card-img img {
    object-fit: cover !important;        /* fills the box; 16:9 art in 16:9 box → no crop */
    object-position: center !important;
}

/* Card grid polish — Netflix-style spacing, consistent alignment. */
.cm-row-scroller { gap: 6px !important; }
.cm-card-img { border-radius: 6px !important; overflow: hidden; }

/* Netflix-style hover: smooth scale + shadow + higher z-index. */
.cm-row-item, .cm-card {
    transition: transform .25s ease, box-shadow .25s ease !important;
    position: relative;
}
.cm-card:hover {
    transform: scale(1.04);
    z-index: 5;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
@media (hover: none) { .cm-card:hover { transform: none; box-shadow: none; } }

/* (v3.2.6 hero-title block removed — superseded by the v3.2.10 unified system below.) */

/* ════════════════════════════════════════════════════════════════════
   v3.2.7 — HERO TRAILER VIDEO + HERO TYPOGRAPHY + CARD HOVER TRAILER
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero <video> overlay: fills the stage, cover, no controls, hidden until playing ── */
.cm-slider-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    background: #000;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;         /* never eat clicks on Play/Trailer buttons */
    z-index: 1;                   /* above the bg image, below content */
}
.cm-slider-stage.active .cm-slider-video[src] { opacity: 1; }

/* (v3.2.7/8 hero typography block removed — superseded by the v3.2.10
   unified :where() system. Video overlay above + card hover below retained.) */

/* ── Card hover trailer: video overlay inside the 16:9 box ── */
.cm-card-img { position: relative; }
.cm-card-hover-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    background: #000;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
    z-index: 2;
}
.cm-card-hover-video.playing { opacity: 1; }
@media (hover: none) { .cm-card-hover-video { display: none !important; } }

/* ════════════════════════════════════════════════════════════════════
   v3.2.10 — UNIFIED HERO TITLE SYSTEM  (supersedes v3.2.7a/8/9a)
   ────────────────────────────────────────────────────────────────────
   ROOT CAUSE of character-stacking (confirmed read-only):
   v3.2.9a set .cm-slide-info (position:absolute; inset:0; display:flex;
   flex-direction:column) to right:auto + width:min(60vw,900px). Releasing
   `right` while top/bottom/left stayed 0 collapsed the absolute flex
   container toward min-content width; the stretched <h1> then shrank to a
   ~40px box → "KY / UN / PY …". FIX: never constrain the absolute flex
   CONTAINER — restore it full-bleed and constrain its CHILDREN instead.

   ONE shared system for every hero (homepage slider + all 7 singles).
   Uses :where() = 0 specificity, so it's overridable and needs no
   !important walls, and applies automatically to every hero title.
   ════════════════════════════════════════════════════════════════════ */

/* 1) Restore the absolute flex containers to full width (undo v3.2.9a). */
.cm-hero-content, .cm-slider-content {
    max-width: none;
    width: 100%;
    padding: 0;
}
.cm-slide-info {
    /* back to the original, correct full-bleed absolute box */
    position: absolute;
    inset: 0;                         /* top/right/bottom/left all 0 again */
    right: 0;                         /* explicitly re-assert (kills v3.2.9a right:auto) */
    width: auto;                      /* let inset:0 size it, not a min() width */
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 4% 90px;
    box-sizing: border-box;
}

/* 2) Constrain the CONTENT COLUMN (the flex children), not the container.
      This is what gives the OTT ~55–60% width without collapsing anything. */
:where(.cm-slide-info, .cm-single-content) > * {
    max-width: min(58vw, 820px);
}

/* 3) ONE shared hero-title typography system — every hero title class.
      Uses the real class selectors (specificity 0,1,0) so that, being later
      in the file, it cleanly overrides the old .cm-hero-logo (l.232) and
      .cm-single-title (l.852) rules WITHOUT needing !important. */
.cm-hero-logo, .cm-hero-title, .cm-slider-title, .cm-single-title {
    max-width: min(58vw, 820px);
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.75);
    white-space: normal;
    word-break: keep-all;             /* never break inside a word */
    overflow-wrap: break-word;        /* only break a word longer than the box */
    margin-bottom: 14px;
}

/* 4) Shared meta / description sizing. */
.cm-hero-meta, .cm-slide-meta, .cm-hero-desc, .cm-hero-description,
.cm-slide-desc, .cm-single-meta, .cm-single-description {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65);
}

/* 5) Mobile: narrower column, smaller title, natural wrapping. */
@media (max-width: 768px) {
    .cm-slide-info { padding: 0 4% 60px; }
    :where(.cm-slide-info, .cm-single-content) > * { max-width: 92%; }
    .cm-hero-logo, .cm-hero-title, .cm-slider-title, .cm-single-title {
        max-width: 92%;
        font-size: clamp(1.6rem, 6vw, 2.2rem);
    }
}


/* ════════════════════════════════════════════════════════════════════
   v3.2.9b — MUTE/UNMUTE BUTTONS (Hero + Card Hover)
   Netflix-style speaker toggle; no video reload, only video.muted flip.
   ════════════════════════════════════════════════════════════════════ */

/* Hero mute button — bottom-right of the hero section */
.cm-hero-mute {
    position: absolute;
    bottom: 90px;
    right: 5%;
    z-index: 6;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.35);
    border: 1.5px solid rgba(255,255,255,0.55);
    border-radius: 50%;
    color: #fff;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease, background .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.cm-hero-mute:hover {
    opacity: 1;
    transform: scale(1.08);
    background: rgba(0,0,0,0.55);
}
.cm-hero-mute[hidden] { display: none !important; }
@media (max-width: 768px) {
    .cm-hero-mute { bottom: 70px; right: 4%; width: 40px; height: 40px; }
}

/* Card hover preview mute button — bottom-right of the card image */
.cm-card-mute {
    position: absolute;
    bottom: 6px; right: 6px;
    z-index: 3;                        /* above the hover video, below any explicit UI */
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    color: #fff;
    opacity: 0.75;
    cursor: pointer;
    transition: opacity .18s ease, transform .18s ease, background .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.cm-card-mute:hover {
    opacity: 1;
    transform: scale(1.1);
    background: rgba(0,0,0,0.7);
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.5.1 — MOBILE DRAWER REDESIGN (premium OTT)
   Visual only. No markup, JS, link, auth, search or membership logic changed.
   Appended last so it overrides the earlier drawer rules without editing them.
   All spacing on an 8px grid.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── 1. Compact premium top bar (72px) ─────────────────────────────── */
    .cm-mheader {
        height: 72px;
        padding: 0 8px;
        background: #0B0B0D;
        border-bottom: 1px solid rgba(255,255,255,.06);
        box-shadow: 0 2px 16px rgba(0,0,0,.6);
    }
    .cm-mh-btn {
        width: 48px; height: 48px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 50%;
        background: transparent;
        transition: background .18s ease;
    }
    .cm-mh-btn:active { background: rgba(213,0,0,.18); }

    /* Animated hamburger → X (driven by existing aria-expanded, no JS change) */
    .cm-hamburger { width: 22px; height: 16px; position: relative; display: block; }
    .cm-hamburger span {
        position: absolute; left: 0;
        width: 100%; height: 2px;
        border-radius: 2px;
        background: #E6E6E6;
        transition: transform .28s cubic-bezier(.4,0,.2,1),
                    opacity .18s ease, width .28s ease;
    }
    .cm-hamburger span:nth-child(1) { top: 0; }
    .cm-hamburger span:nth-child(2) { top: 7px; width: 70%; }
    .cm-hamburger span:nth-child(3) { top: 14px; }
    #cm-menu-open[aria-expanded="true"] .cm-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    #cm-menu-open[aria-expanded="true"] .cm-hamburger span:nth-child(2) { opacity: 0; width: 0; }
    #cm-menu-open[aria-expanded="true"] .cm-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Logo: centred, never stretched, equal padding both sides */
    .cm-mh-logo { display: flex; align-items: center; justify-content: center; padding: 0 8px; }
    .cm-mh-logo img { max-height: 34px; width: auto; object-fit: contain; }

    /* ── 6. Drawer motion + elevation ──────────────────────────────────── */
    .cm-drawer {
        width: min(86vw, 360px);
        background: #0B0B0D;
        box-shadow: 8px 0 40px rgba(0,0,0,.72);
        transition: transform .34s cubic-bezier(.22,.61,.36,1), visibility .34s;
        will-change: transform;
    }
    .cm-drawer-backdrop {
        background: rgba(0,0,0,.66);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        transition: opacity .3s ease;
    }

    /* ── 1b. Drawer header: logo centred, circular close ───────────────── */
    .cm-drawer-top {
        height: 72px;
        display: flex; align-items: center; justify-content: space-between;
        padding: 0 8px 0 16px;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .cm-drawer-logo { display: flex; align-items: center; }
    .cm-drawer-logo img { max-height: 32px; width: auto; object-fit: contain; }
    .cm-drawer-logo span { font-size: 1.15rem; letter-spacing: .01em; }
    .cm-drawer-close {
        width: 40px; height: 40px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 50%;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.10);
        color: #E6E6E6;
        font-size: 22px; line-height: 1;
        transition: background .18s ease, border-color .18s ease, transform .18s ease;
    }
    .cm-drawer-close:active {
        background: rgba(213,0,0,.85);
        border-color: rgba(213,0,0,.9);
        color: #fff;
        transform: scale(.94);
    }

    /* ── 4. Sticky region spacing (8px grid, less dead space) ──────────── */
    .cm-drawer-sticky { padding-bottom: 8px; }
    .cm-drawer-cta-hero { margin: 16px 16px 0; border-radius: 16px; }
    .cm-drawer-guest-row { margin: 16px 16px 0; gap: 12px; }
    .cm-drawer-search { margin: 16px 16px 8px; }

    /* ── 3. Premium Sign In / Create Account ───────────────────────────── */
    .cm-drawer-ghost {
        flex: 1 1 0;
        min-width: 0;
        height: 48px;
        padding: 0 12px;
        border-radius: 12px;
        background: linear-gradient(180deg, #1E1E22 0%, #141417 100%);
        border: 1px solid rgba(255,255,255,.10);
        color: #fff;
        font-size: .92rem;
        font-weight: 700;
        letter-spacing: .01em;
        line-height: 1.15;
        display: inline-flex; align-items: center; justify-content: center;
        text-align: center;
        transition: background .18s ease, border-color .18s ease, transform .12s ease;
    }
    .cm-drawer-ghost:active {
        background: linear-gradient(180deg, #E01B24 0%, #A50007 100%);
        border-color: rgba(213,0,0,.9);
        transform: scale(.98);
    }

    /* ── 2. Premium search pill ────────────────────────────────────────── */
    .cm-drawer-search {
        position: relative;
        display: flex; align-items: center;
        height: 54px;
        padding: 0 16px 0 46px;
        border-radius: 27px;
        background: #141417;
        border: 1px solid rgba(230,230,230,.22);
        box-shadow: 0 2px 12px rgba(0,0,0,.5);
        transition: border-color .2s ease, box-shadow .2s ease;
    }
    .cm-drawer-search .cm-ds-icon {
        position: absolute; left: 16px; top: 50%;
        transform: translateY(-50%);
        display: flex; align-items: center;
        color: #9A9EA5;
        pointer-events: none;
    }
    .cm-drawer-search input[type="text"] {
        width: 100%; height: 100%;
        background: transparent;
        border: 0; outline: none;
        color: #fff;
        font-size: .95rem;
        line-height: 54px;
        padding: 0;
        text-overflow: ellipsis;
    }
    .cm-drawer-search input::placeholder { color: #8A8E95; }
    .cm-drawer-search:focus-within {
        border-color: #D50000;
        box-shadow: 0 0 0 3px rgba(213,0,0,.18);
    }

    /* ── 5. Navigation rows ────────────────────────────────────────────── */
    .cm-nav-label {
        padding: 16px 16px 8px;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: #7A7E85;
    }
    .cm-nav-group { padding: 0 8px; }
    .cm-nav-group a {
        display: flex; align-items: center; gap: 16px;
        min-height: 52px;
        padding: 0 12px;
        margin-bottom: 4px;
        border-radius: 12px;
        color: #fff;
        font-size: .98rem;
        font-weight: 600;
        background: transparent;
        transition: background .2s ease, color .2s ease;
    }
    .cm-nav-group a .cm-dn-ico {
        width: 24px; height: 24px;
        display: inline-flex; align-items: center; justify-content: center;
        flex: 0 0 24px;
        color: #C9CDD3;
        transition: color .2s ease;
    }
    .cm-nav-group a .cm-dn-ico svg { width: 22px; height: 22px; }
    .cm-nav-group a:active { background: rgba(255,255,255,.07); }
    .cm-nav-group a.cm-nav-active {
        background: linear-gradient(180deg, rgba(213,0,0,.30) 0%, rgba(140,0,0,.18) 100%);
        border: 1px solid rgba(213,0,0,.45);
        color: #fff;
        font-weight: 800;
    }
    .cm-nav-group a.cm-nav-active .cm-dn-ico { color: #fff; }
}