/*
 * global.css
 * Eigene Styles – nur was Bootstrap nicht abdeckt.
 * Farbpalette: Netflix-Style – Rot (#E50914) auf Schwarz (#000000).
 */

/* ── CSS-Variablen ────────────────────────────────────────────────────────── */
:root {
    --ct-gold:    #e50914;   /* Accent  (Netflix-Rot) – Highlights, Preise, Text */
    --ct-red:     #e50914;   /* Primary (Netflix-Rot) – Buttons, Logo, Aktionen  */
    --ct-surface: #141414;   /* Karten / Flächen */
    --ct-bg:      #000000;   /* Seiten-Hintergrund (Netflix-Dark) */
    --ct-border:  rgba(230, 237, 243, 0.10);
}

/* ── Body / Hintergrund + Apple-Typografie ────────────────────────────────── */
body {
    background-color: var(--ct-bg) !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.011em;
    font-feature-settings: "cv11", "ss01";
}

/* Große Überschriften: eng & kräftig wie bei Apple */
h1, h2, h3, .h1, .h2, .h3,
.display-1, .display-2, .display-3, .display-4, .display-5 {
    letter-spacing: -0.025em;
    font-weight: 600;
}
.display-1, .display-2, .display-3, .display-4 { font-weight: 700; }

/* Sanfte, einheitliche Übergänge für interaktive Elemente */
.btn, .card, .ct-glass, .ct-ticket, .nav-link, .form-control, .form-select, a {
    transition: all .25s cubic-bezier(.4, 0, .2, 1);
}

/* ── Accent-Farbe (Cyan – heißt aus Kompatibilität weiter "gold") ─────────── */
.text-gold   { color: var(--ct-gold) !important; }
.bg-gold     { background-color: var(--ct-gold) !important; color: #000000 !important; }
.border-gold { border-color: var(--ct-gold) !important; }

/* ── Apple-artige Buttons (Pill, klar, weicher Hover) ─────────────────────── */
.btn {
    border-radius: 980px;          /* Pill – Apple-Signatur */
    font-weight: 500;
    padding-inline: 1.25rem;
}
.btn-lg { padding: .7rem 1.7rem; font-size: 1rem; }

.btn-gold {
    background-color: var(--ct-gold);
    color: #000000;
    font-weight: 600;
    border: none;
}
.btn-gold:hover {
    background-color: #f6121d;
    color: #000000;
    transform: translateY(-1px);
}

/* ── Primary (Purple – Klassenname bleibt "cinema-red") ───────────────────── */
.btn-cinema-red {
    background: #e50914;            /* satte Vollfläche statt Verlauf */
    color: #fff;
    border: none;
    box-shadow: 0 2px 12px rgba(229,9,20,0.35);
}
.btn-cinema-red:hover {
    background: #f6121d;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(229,9,20,0.50);
}
.btn-cinema-red:disabled { background:#2a2a2a; box-shadow:none; opacity:.65; }

/* ── Dark Card (weiche Schatten, große Radien) ────────────────────────────── */
.card-dark {
    background-color: var(--ct-surface);
    border: 1px solid var(--ct-border);
    color: #e6edf3;
    border-radius: 18px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 12px 32px rgba(0,0,0,0.35);
}

/* ── Dark Form Controls ───────────────────────────────────────────────────── */
.form-control-dark {
    background-color: #242424;
    border: 1px solid var(--ct-border);
    color: #e6edf3;
    border-radius: 12px;
    color-scheme: dark;   /* native Date-Picker & Select-Dropdowns dunkel */
}
.form-control-dark::placeholder { color: #8b949e; }
.form-control-dark:focus {
    background-color: #242424;
    color: #e6edf3;
    border-color: rgba(229,9,20,0.5);
    box-shadow: 0 0 0 0.2rem rgba(229,9,20,0.15);
}

/* ── Logo-Badge (Verlauf + Glanz + Schatten) ──────────────────────────────── */
.ct-logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(140deg, #f6121d 0%, #e50914 45%, #e50914 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    position: relative;
    font-size: 1.4rem;               /* Basisgröße fürs Schriftzeichen */
    box-shadow: 0 4px 14px rgba(229,9,20,0.40),
    inset 0 1px 0 rgba(255,255,255,0.30);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
/* Goldenes chinesisches Schriftzeichen im Logo (影 = Film/Kino) */
.ct-logo-char {
    color: #f5c518;
    font-weight: 700;
    line-height: 1;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
/* leichter Glanz oben */
.ct-logo-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent 55%);
    pointer-events: none;
}
/* Logo im Header reagiert beim Hover */
.navbar-brand:hover .ct-logo-icon {
    transform: rotate(-6deg) scale(1.06);
    box-shadow: 0 6px 20px rgba(229,9,20,0.55),
    inset 0 1px 0 rgba(255,255,255,0.30);
}

/* ── Runde Icon-Buttons im Header (z. B. Warenkorb) ───────────────────────── */
.ct-icon-btn {
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--ct-border);
    color: #c9d1d9;
    font-size: 1rem;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.ct-icon-btn:hover {
    background: rgba(229,9,20,0.12);
    border-color: rgba(229,9,20,0.45);
    color: #e50914;
    transform: translateY(-1px);
}

/* ── Profil-Avatar mit Verlauf + Initiale ─────────────────────────────────── */
.ct-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, #f6121d, #e50914 45%, #e50914);
    color: #fff; border: none;
    font-weight: 600; font-size: .95rem;
    box-shadow: 0 3px 10px rgba(229,9,20,0.40), inset 0 1px 0 rgba(255,255,255,0.30);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.ct-avatar:hover {
    transform: scale(1.07);
    box-shadow: 0 5px 16px rgba(229,9,20,0.55), inset 0 1px 0 rgba(255,255,255,0.30);
}

/* ── Moderne Suchleiste (EIN sauberes Pill, Icon innen) ───────────────────── */
.ct-search { min-width: 200px; max-width: 340px; flex: 1 1 260px; }
.ct-search-box { position: relative; width: 100%; }
.ct-search-icon {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: #8b949e; font-size: .95rem; pointer-events: none;
}
.ct-search-input {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--ct-border);
    border-radius: 999px;
    color: #e6edf3;
    padding: .5rem 1.1rem .5rem 2.5rem;   /* Platz links fürs Icon */
    box-shadow: none !important;
    outline: none;
}
.ct-search-input::placeholder { color: #8b949e; }
.ct-search-input:focus {
    background: rgba(255,255,255,0.10);
    border-color: rgba(229,9,20,0.55);
    color: #fff;
}

/* Live-Such-Ergebnisse (Dropdown unter dem Feld) */
.ct-search-results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: #141414;
    border: 1px solid var(--ct-border);
    border-radius: 14px;
    overflow: hidden;
    z-index: 1050;
    box-shadow: 0 14px 34px rgba(0,0,0,0.6);
    display: none;
}
.ct-search-results.show { display: block; }
.ct-search-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    text-decoration: none; color: #e6edf3;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ct-search-item:last-child { border-bottom: none; }
.ct-search-item:hover { background: rgba(229,9,20,0.12); color: #fff; }
.ct-search-item img,
.ct-search-item .ct-search-thumb {
    width: 32px; height: 46px; object-fit: cover;
    border-radius: 4px; flex-shrink: 0; background: #242424;
}
.ct-search-empty { padding: 12px; color: #8b949e; font-size: .85rem; }

/* ── Navigations-Links: sanfter Hover ─────────────────────────────────────── */
.navbar .nav-link { transition: color .2s ease, opacity .2s ease; }
.navbar .nav-link:hover { color: #e50914 !important; }

/* ── Film-Poster Platzhalter ──────────────────────────────────────────────── */
.ct-poster-placeholder {
    aspect-ratio: 2/3;
    background: #242424;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgba(255,255,255,0.1);
    border-radius: 6px 6px 0 0;
}

/* ── Hero-Bereich ─────────────────────────────────────────────────────────── */
.ct-hero {
    background: var(--ct-surface);
    border-bottom: 1px solid var(--ct-border);
    overflow: hidden;
    position: relative;
}
/* Glüh-Effekt im Hintergrund (füllt den rechten Bereich mit Tiefe) */
.ct-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
            radial-gradient(ellipse 50% 70% at 80% 38%, rgba(229,9,20,0.30) 0%, transparent 70%),
            radial-gradient(ellipse 45% 65% at 95% 82%, rgba(229,9,20,0.16) 0%, transparent 65%),
            radial-gradient(ellipse 40% 60% at 18% 8%,  rgba(229,9,20,0.08) 0%, transparent 60%);
}

/* ── Schnellnavigations-Kacheln ───────────────────────────────────────────── */
.ct-quicklink {
    background: var(--ct-surface);
    border: 1px solid var(--ct-border);
    border-radius: 14px;
    transition: transform .25s cubic-bezier(.4,0,.2,1),
    border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.ct-quicklink:hover {
    transform: translateY(-4px);
    border-color: rgba(229,9,20,0.40);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
    background: #262626;
}
.ct-quicklink .ct-ql-icon {
    width: 40px; height: 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(229,9,20,0.28), rgba(229,9,20,0.18));
    color: #e50914; font-size: 1.05rem;
    transition: transform .25s ease;
}
.ct-quicklink:hover .ct-ql-icon { transform: scale(1.08) rotate(-4deg); }
.ct-quicklink .ct-ql-arrow {
    opacity: 0; transform: translateX(-5px);
    transition: opacity .25s ease, transform .25s ease;
    color: #e50914;
}
.ct-quicklink:hover .ct-ql-arrow { opacity: 1; transform: translateX(0); }

/* Listenzeile (heutige Vorführungen) mit Hover */
.ct-list-row {
    background: var(--ct-surface);
    border: 1px solid var(--ct-border);
    border-radius: 14px;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.ct-list-row:hover {
    border-color: rgba(229,9,20,0.35);
    background: #262626;
    transform: translateX(3px);
}

/* Genre-Pille mit Hover */
.ct-genre-pill {
    background: var(--ct-surface);
    border: 1px solid rgba(255,255,255,0.10);
    color: #8b949e;
    transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
.ct-genre-pill:hover {
    border-color: rgba(229,9,20,0.45);
    color: #e6edf3;
    background: #262626;
    transform: translateY(-2px);
}

/* ── Sitzplatz-Indikator ──────────────────────────────────────────────────── */
.ct-seats-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2d7a3a; /* viele Plätze = grün */
}
.ct-seats-dot.low  { background: #b87d1a; } /* wenige Plätze = orange */
.ct-seats-dot.full { background: #7a2d2d; } /* ausverkauft = rot */


/* ═══════════════════════════════════════════════════════════════════════════
   MODERNES BUCHUNGS-DESIGN  (Saalplan · Bestätigung · Meine Tickets)
   Palette: Purple #e50914 (Primary) · Cyan #e50914 (Accent)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Seiten-Header mit weichem Glow */
.ct-page-head {
    position: relative;
    border-radius: 20px;
    padding: 1.5rem 1.75rem;
    background:
            radial-gradient(120% 140% at 0% 0%, rgba(229,9,20,0.22), transparent 55%),
            radial-gradient(120% 140% at 100% 0%, rgba(229,9,20,0.16), transparent 55%),
            var(--ct-surface);
    border: 1px solid var(--ct-border);
    overflow: hidden;
}

/* Glassmorphism-Karte (mattes Glas) */
.ct-glass {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--ct-border);
    border-radius: 20px;
}

/* Dezenter Verlaufstext (Cyan → Purple) */
.ct-gradient-text {
    background: linear-gradient(90deg, #ff5a5f, #e50914 55%, #e50914);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Leinwand mit Perspektive ─────────────────────────────────────────────── */
.ct-screen {
    position: relative;
    margin: 0 auto 2.75rem;
    width: 78%;
    height: 12px;
    border-radius: 50% 50% 6px 6px / 100% 100% 6px 6px;
    background: linear-gradient(180deg, #ff7a7d, rgba(229,9,20,0.15));
    transform: perspective(220px) rotateX(-32deg);
    box-shadow: 0 -2px 60px 14px rgba(229,9,20,0.30);
}
.ct-screen-label {
    position: absolute;
    left: 0; right: 0; top: 24px;
    text-align: center;
    letter-spacing: 8px;
    font-size: .68rem;
    color: #8b949e;
}

/* ── Saalplan-Raster ──────────────────────────────────────────────────────── */
.ct-seatmap { max-width: 720px; margin: 0 auto; }

.ct-seat-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 9px;
}
.ct-row-label {
    width: 20px;
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    color: #6e7681;
}

/* Ein Sitz */
.ct-seat {
    --seat-base: #2a2a2a;
    --seat-edge: rgba(255,255,255,0.10);
    width: 32px; height: 30px;
    border-radius: 9px 9px 5px 5px;
    border: 1px solid var(--seat-edge);
    background: var(--seat-base);
    color: #c9d1d9;
    font-size: .62rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; user-select: none;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.28), 0 1px 2px rgba(0,0,0,0.25);
    transition: transform .12s ease, box-shadow .12s ease, background .15s ease, border-color .15s ease;
}
.ct-seat.is-selectable:hover {
    transform: translateY(-3px) scale(1.06);
    border-color: rgba(229,9,20,0.7);
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.28), 0 6px 16px rgba(0,0,0,0.45);
}

/* Typ-Farben */
.ct-seat.type-vip        { --seat-base:#3a1216; --seat-edge:rgba(229,9,20,0.6); }   /* VIP = Purple */
.ct-seat.type-accessible { --seat-base:#143040; --seat-edge:rgba(47,129,247,0.55); }  /* barrierefrei = Blau */

/* Zustände */
.ct-seat.is-selected {
    --seat-base:#2ea043; --seat-edge:#46d36a;
    color:#fff;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25), 0 0 0 2px rgba(70,211,106,0.35), 0 6px 18px rgba(46,160,67,0.45);
    transform: translateY(-2px);
    animation: ct-pop .18s ease;
}
.ct-seat.is-occupied {
    --seat-base:#101010;
    color:#3d3d4d;
    cursor: not-allowed;
    box-shadow: none;
    border-style: dashed;
}
.ct-seat.is-blocked {
    background: transparent;
    border: none;
    box-shadow: none;
    cursor: default;
}
@keyframes ct-pop { 0%{transform:scale(.85)} 100%{transform:translateY(-2px) scale(1)} }

/* Legende */
.ct-legend { display:flex; flex-wrap:wrap; gap:1.1rem; justify-content:center; font-size:.8rem; color:#8b949e; }
.ct-legend span.dot {
    width:18px; height:16px; border-radius:5px 5px 3px 3px;
    display:inline-block; vertical-align:-3px; margin-right:6px;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25);
}

/* ── Auswahl-/Zusammenfassungspanel ───────────────────────────────────────── */
.ct-summary-head {
    background: linear-gradient(135deg, rgba(229,9,20,0.30), rgba(229,9,20,0.18));
    border-bottom: 1px solid var(--ct-border);
    border-radius: 20px 20px 0 0;
}
.ct-chip {
    display:inline-flex; align-items:center; gap:.35rem;
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--ct-border);
    border-radius: 999px;
    padding: .25rem .65rem;
    font-size: .78rem;
    color: #d7dce3;          /* gut lesbarer Standardton */
}

/* ── Ticket-Karten (Meine Tickets / Bestätigung) ──────────────────────────── */
.ct-ticket {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--ct-border);
    background: var(--ct-surface);
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.ct-ticket:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.4); border-color: rgba(229,9,20,0.35); }
/* farbiger Statusstreifen links */
.ct-ticket::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
    background: var(--ct-gold);
}
.ct-ticket.is-cancelled::before { background:#e5484d; }
.ct-ticket.is-past::before      { background:#3d444d; }
/* Perforations-Kerbe (Ticket-Optik) */
.ct-ticket .ct-notch {
    position:absolute; top:50%; width:18px; height:18px; border-radius:50%;
    background: var(--ct-bg); transform: translateY(-50%);
}
.ct-ticket .ct-notch.l { left:-9px; }
.ct-ticket .ct-notch.r { right:-9px; }

/* Status-Pille */
.ct-status {
    font-size:.7rem; font-weight:700; letter-spacing:.4px;
    padding:.2rem .6rem; border-radius:999px;
}
.ct-status.active    { background: rgba(46,160,67,0.18);  color:#3fb950; }
.ct-status.cancelled { background: rgba(229,72,77,0.18);  color:#f85149; }
.ct-status.past      { background: rgba(139,148,158,0.18); color:#8b949e; }

/* Großer animierter Erfolgs-Haken */
.ct-success-badge {
    width:88px; height:88px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin: 0 auto 1rem;
    background: radial-gradient(circle at 50% 35%, rgba(46,160,67,0.35), rgba(46,160,67,0.05));
    box-shadow: 0 0 0 1px rgba(63,185,80,0.4), 0 0 40px rgba(46,160,67,0.4);
    animation: ct-badge-in .4s ease;
}
.ct-success-badge i { font-size:3rem; color:#3fb950; }
@keyframes ct-badge-in { 0%{transform:scale(.6);opacity:0} 100%{transform:scale(1);opacity:1} }


/* ═══════════════════════════════════════════════════════════════════════════
   FILM-KARTEN HOVER  (anheben · Poster-Zoom · Play-Overlay · Press-Feedback)
   ═══════════════════════════════════════════════════════════════════════════ */
.ct-film-card {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08) !important;
    transition: transform .3s cubic-bezier(.4,0,.2,1),
    box-shadow .3s ease,
    border-color .3s ease;
    will-change: transform;
}
/* Maus drüber → anheben + Cyan-Glow */
.ct-film-card:hover {
    transform: translateY(-8px);
    border-color: rgba(229,9,20,0.45) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(229,9,20,0.18);
}
/* Maustaste gedrückt → leicht „eingedrückt" (ohne dass etwas passiert) */
.ct-film-card:active {
    transform: translateY(-3px) scale(.985);
    transition-duration: .08s;
}

/* Poster zoomt sanft beim Hover (Bild + Platzhalter) */
.ct-film-card .card-img-top,
.ct-film-card .ct-poster-placeholder {
    transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.ct-film-card:hover .card-img-top,
.ct-film-card:hover .ct-poster-placeholder {
    transform: scale(1.07);
}

/* Play-Overlay, das beim Hover erscheint */
.ct-film-card .ct-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, transparent 45%, rgba(229,9,20,0.30));
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.ct-film-card:hover .ct-play { opacity: 1; }
.ct-film-card .ct-play i {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255,255,255,0.92); color: #e50914;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    transform: scale(.8);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.ct-film-card:hover .ct-play i { transform: scale(1); }