@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* Elgonflix Cinema UI v3
   Presentation-only layer. It deliberately avoids IDs and selectors used by
   checkout, callback, polling, fulfillment and voting JavaScript. */
:root{
  --efx-bg:#050505;
  --efx-bg-soft:#0b0b0b;
  --efx-surface:#141414;
  --efx-surface-2:#1b1b1b;
  --efx-text:#f7f7f5;
  --efx-muted:#a7aaa7;
  --efx-line:rgba(255,255,255,.10);
  --efx-line-strong:rgba(255,255,255,.18);
  --efx-red:#e50914;
  --efx-red-hover:#f6121d;
  --efx-gold:#d7aa45;
  --efx-green:#46d17a;
  --efx-header:rgba(5,5,5,.82);
  --efx-header-solid:rgba(5,5,5,.97);
  --efx-shadow:0 24px 70px rgba(0,0,0,.46);
  --efx-radius:14px;
}

html{color-scheme:dark;scrollbar-color:#555 #0b0b0b}
body.elgon-page{
  background:var(--efx-bg);
  color:var(--efx-text);
  font-family:'Manrope','Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-feature-settings:'kern' 1,'liga' 1;
  text-rendering:optimizeLegibility;
}
body.elgon-page :where(button,input,select,textarea){font:inherit}
body.elgon-page :where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--efx-gold)!important;
  outline-offset:3px;
}
body.elgon-page ::selection{background:rgba(229,9,20,.8);color:#fff}

/* Shared public header language */
.efx-public-header,
.elgon-page--catalog .netflix-header,
.elgon-page--voting .topbar{
  background:linear-gradient(180deg,rgba(5,5,5,.97),rgba(5,5,5,.76));
  border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow:none;
  backdrop-filter:blur(22px) saturate(130%);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
}
.efx-public-header{position:sticky;top:0;z-index:80;height:72px}
.efx-header-inner{width:min(1440px,calc(100% - 48px));height:100%;margin:auto;display:flex;align-items:center;gap:30px}
.efx-header-brand{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none;color:inherit}
.efx-public-nav{display:flex;align-items:stretch;height:100%;gap:2px}
.efx-public-nav a{
  position:relative;display:flex;align-items:center;padding:0 12px;color:#b9bbb9;
  text-decoration:none;font-size:13px;font-weight:700;transition:color .18s ease;
}
.efx-public-nav a:hover,.efx-public-nav a.active{color:#fff}
.efx-public-nav a.active:after{
  content:'';position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--efx-red)
}
.efx-header-actions{margin-left:auto;display:flex;align-items:center;gap:9px}
.efx-header-pill,.efx-icon-button{
  border:1px solid var(--efx-line);background:rgba(255,255,255,.055);color:#fff;text-decoration:none;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,color .18s ease;
}
.efx-header-pill{min-height:40px;padding:0 15px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:800}
.efx-icon-button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.efx-header-pill:hover,.efx-icon-button:hover{background:rgba(255,255,255,.11);border-color:var(--efx-line-strong);transform:translateY(-1px)}
.efx-header-pill--accent{background:#fff;color:#080808;border-color:#fff}
.efx-header-pill--accent:hover{background:#e7e7e5;color:#080808}
.efx-header-context{color:#858985;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}

/* Catalog — keep existing switching/search/preview hooks, refine the visual system */
.elgon-page--catalog{--card-bg:#151515!important;--txt-1:#f5f5f1!important;--txt-2:#a9aaa7!important;--glass-brd:rgba(255,255,255,.09)!important;--input-bg:rgba(255,255,255,.075)!important;--header-bg:rgba(5,5,5,.82)!important;--hover-bg:rgba(255,255,255,.08)!important}
.elgon-page--catalog .scrollable-area{background:linear-gradient(180deg,#050505 0%,#090909 55%,#050505 100%)!important}
.elgon-page--catalog .netflix-header{height:72px;padding:0 clamp(1rem,3.2vw,3.5rem)!important}
.elgon-page--catalog .netflix-header.is-scrolled{background:var(--efx-header-solid)!important;border-color:var(--efx-line)!important}
.elgon-page--catalog .header-brand .elgonflix-brand__logos{width:3rem;height:3rem}
.elgon-page--catalog .desktop-nav .nav-item{font-family:'Manrope','Inter',sans-serif;font-size:.78rem;font-weight:700;color:#b7b8b6;padding-inline:.66rem}
.elgon-page--catalog .desktop-nav .nav-item.active{font-weight:800}
.elgon-page--catalog .desktop-nav .nav-item::after{background:var(--efx-red);height:3px}
.elgon-page--catalog .header-search{width:clamp(170px,20vw,340px)}
.elgon-page--catalog .header-search input{height:40px;border-radius:7px;background:rgba(0,0,0,.42);border-color:rgba(255,255,255,.22);font-size:.75rem}
.elgon-page--catalog .header-search input:focus{background:#080808;border-color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.elgon-page--catalog .header-icon{width:40px;height:40px;background:transparent;border-color:rgba(255,255,255,.14)}
.elgon-page--catalog .header-icon:hover{background:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.25)}
.elgon-page--catalog .elgon-hero{min-height:min(74vh,760px);background:#050505}
.elgon-page--catalog .elgon-hero__slide::after{background:linear-gradient(90deg,rgba(3,3,3,.98) 0%,rgba(3,3,3,.88) 30%,rgba(3,3,3,.40) 57%,rgba(3,3,3,.08) 100%),linear-gradient(0deg,#090909 0%,transparent 40%)}
.elgon-page--catalog .elgon-hero__poster{filter:saturate(.95) contrast(1.07) brightness(.92)}
.elgon-page--catalog .elgon-hero__content{width:min(720px,60vw);padding-left:clamp(1.1rem,4vw,4.2rem);padding-right:1rem}
.elgon-page--catalog .elgon-hero__eyebrow{color:#fff;font-size:.66rem;letter-spacing:.19em}
.elgon-page--catalog .elgon-hero h1{font-size:clamp(2.45rem,5vw,4.8rem);font-weight:800;letter-spacing:-.06em;line-height:.94;max-width:720px}
.elgon-page--catalog .elgon-hero p{font-size:clamp(.86rem,1.15vw,1rem);color:#d3d4d2;max-width:570px;line-height:1.62}
.elgon-page--catalog .elgon-hero__meta{font-size:.72rem;color:#d4d5d2}
.elgon-page--catalog .elgon-hero__actions .btn-primary{background:#fff;color:#080808;border-radius:7px;padding:.8rem 1.3rem;font-weight:800}
.elgon-page--catalog .elgon-hero__actions .btn-primary:hover{background:#d9d9d7;box-shadow:none;transform:none}
.elgon-page--catalog .elgon-hero__secondary{border-radius:7px;background:rgba(109,109,110,.68);font-weight:800;padding:.8rem 1.25rem}
.elgon-page--catalog .elgon-hero__progress span{background:var(--efx-red)}
.elgon-page--catalog .elgon-hero__dot.is-active{background:var(--efx-red)}
.elgon-page--catalog .browse-content{margin-top:-4.35rem;padding-bottom:3rem}
.elgon-page--catalog .browse-heading{margin-bottom:1.15rem}
.elgon-page--catalog .browse-kicker{color:#8e928e;font-size:.59rem;letter-spacing:.18em}
.elgon-page--catalog .browse-title{font-size:clamp(1.3rem,2vw,1.72rem);font-weight:800;letter-spacing:-.04em}
.elgon-page--catalog .browse-description{color:#91948f;font-size:.75rem}
.elgon-page--catalog #videosView,
.elgon-page--catalog #trendingView,
.elgon-page--catalog #watchlistView{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(.75rem,1.2vw,1.05rem)}
.elgon-page--catalog #eventsView{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1rem}
.elgon-page--catalog #merchView{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}
.elgon-page--catalog .v-sec .s-item,
.elgon-page--catalog .search-result-card{background:#151515!important;border:1px solid rgba(255,255,255,.045)!important;border-radius:10px!important;box-shadow:0 6px 18px rgba(0,0,0,.22)!important;transition:transform .22s ease,box-shadow .22s ease,background .22s ease!important}
.elgon-page--catalog .v-sec .s-item:hover,
.elgon-page--catalog .search-result-card:hover{transform:scale(1.035)!important;box-shadow:0 28px 70px rgba(0,0,0,.58)!important;background:#1b1b1b!important;z-index:25}
.elgon-page--catalog .v-sec .s-item::after{height:2px;background:var(--efx-red)}
.elgon-page--catalog .v-sec .s-item h3{font-weight:700;letter-spacing:-.018em}
.elgon-page--catalog .video-preview-cue{background:rgba(0,0,0,.76);border-color:rgba(255,255,255,.18);font-size:.55rem}
.elgon-page--catalog .video-preview-card.is-previewing .video-preview-cue{background:var(--efx-red)}
.elgon-page--catalog .cat-btn{font-weight:700!important;border-color:rgba(255,255,255,.12)!important;background:rgba(255,255,255,.055)!important}
.elgon-page--catalog .cat-btn:hover{background:rgba(255,255,255,.11)!important}
.elgon-page--catalog .cat-btn.bg-elgon-gold{background:#fff!important;color:#070707!important;border-color:#fff!important}
.elgon-page--catalog .modal-content{border-radius:16px!important;background:#151515!important;border-color:rgba(255,255,255,.11)!important;box-shadow:0 36px 110px rgba(0,0,0,.72)}

/* Detail / checkout pages */
.elgon-page--ticket,
.elgon-page--merch{--bg-start:#050505!important;--bg-end:#0a0a0a!important;--txt-1:#f7f7f5!important;--txt-2:#aaaead!important;--glass-brd:rgba(255,255,255,.10)!important;--input-bg:#151515!important;background:#050505!important}
.elgon-page--ticket>div.min-h-screen,
.elgon-page--merch>div.min-h-screen{background:radial-gradient(circle at 72% -10%,rgba(229,9,20,.10),transparent 30%),#050505!important}
.elgon-page--ticket .efx-detail-shell,
.elgon-page--merch .efx-detail-shell{width:min(1380px,calc(100% - 48px));margin:auto;padding:44px 0 72px}
.elgon-page--ticket .efx-detail-grid,
.elgon-page--merch .efx-detail-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,.72fr);gap:clamp(32px,4vw,64px);align-items:start}
.elgon-page--ticket .efx-artwork,
.elgon-page--merch .efx-artwork{overflow:hidden;border-radius:12px;background:#0c0c0c;box-shadow:0 22px 70px rgba(0,0,0,.36);border:1px solid rgba(255,255,255,.06)}
.elgon-page--ticket .efx-artwork img{transition:transform .65s ease;filter:saturate(.95) contrast(1.04)}
.elgon-page--ticket .efx-artwork:hover img{transform:scale(1.018)}
.elgon-page--ticket .efx-title,
.elgon-page--merch .efx-title{margin:26px 0 12px;font-size:clamp(2rem,4vw,4rem);line-height:.98;letter-spacing:-.055em;font-weight:800}
.elgon-page--ticket .efx-description,
.elgon-page--merch .efx-description{max-width:760px;color:#aeb0ad!important;font-size:14px;line-height:1.8}
.elgon-page--ticket .efx-fact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.elgon-page--ticket .efx-fact{background:#111!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:10px!important;padding:16px!important}
.elgon-page--ticket .efx-fact .text-xs{color:#787c78!important;font-size:10px!important;font-weight:800;letter-spacing:.12em}
.elgon-page--ticket .efx-checkout-card,
.elgon-page--merch .efx-checkout-card{position:sticky;top:94px;background:linear-gradient(180deg,#171717,#111)!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:14px!important;padding:24px!important;box-shadow:0 28px 90px rgba(0,0,0,.46)}
.elgon-page--ticket .efx-price,
.elgon-page--merch .efx-price{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:800;letter-spacing:-.04em;margin-bottom:22px}
.elgon-page--ticket .efx-price:before{content:'TOTAL · ';display:block;color:#777b77;font-size:9px;letter-spacing:.16em;font-weight:800;margin-bottom:7px}
.elgon-page--merch .efx-price:before{content:'TOTAL · ';display:block;color:#777b77;font-size:9px;letter-spacing:.16em;font-weight:800;margin-bottom:7px}
.elgon-page--ticket .efx-checkout-card label,
.elgon-page--merch .efx-checkout-card label{font-size:11px!important;color:#d0d2cf;font-weight:700!important}
.elgon-page--ticket .efx-checkout-card input,
.elgon-page--merch .efx-checkout-card input{min-height:46px;border-radius:8px!important;background:#090909!important;border-color:rgba(255,255,255,.13)!important;padding-inline:13px!important}
.elgon-page--ticket .efx-checkout-card input:focus,
.elgon-page--merch .efx-checkout-card input:focus{border-color:#fff!important;box-shadow:0 0 0 1px rgba(255,255,255,.12);outline:none!important}
.elgon-page--ticket .efx-pay-grid,
.elgon-page--merch .efx-pay-grid{gap:8px!important}
.elgon-page--ticket .efx-pay-grid button,
.elgon-page--merch .efx-pay-grid button{min-height:46px;border-radius:8px!important;font-size:12px;font-weight:800!important;box-shadow:none!important}
.elgon-page--ticket .efx-pay-grid button:hover,
.elgon-page--merch .efx-pay-grid button:hover{transform:translateY(-1px)}
.elgon-page--ticket #mpesaPhoneForm button,
.elgon-page--merch #mpesaPhoneForm button{min-height:46px;border-radius:8px!important;font-weight:800}

/* Watch / cinema page */
.elgon-page--watch{--bg-start:#050505!important;--bg-end:#090909!important;--card-bg:#131313!important;--txt-1:#f7f7f5!important;--txt-2:#a7aaa7!important;--glass-brd:rgba(255,255,255,.09)!important;--input-bg:rgba(255,255,255,.07)!important;--header-bg:rgba(5,5,5,.86)!important;background:#050505!important}
.elgon-page--watch .efx-public-header{flex-shrink:0}
.elgon-page--watch main.container{max-width:1480px!important;padding-top:32px!important;gap:36px!important}
.elgon-page--watch .video-wrapper{border-radius:10px!important;border-color:rgba(255,255,255,.07)!important;box-shadow:0 28px 90px rgba(0,0,0,.52)!important}
.elgon-page--watch .glass-card{background:#131313!important;border-color:rgba(255,255,255,.08)!important;border-radius:12px!important;box-shadow:none}
.elgon-page--watch .custom-controls{background:linear-gradient(to top,rgba(0,0,0,.96),rgba(0,0,0,.26),transparent);padding:26px 22px 18px}
.elgon-page--watch .progress-fill{background:var(--efx-red)!important}
.elgon-page--watch .btn-primary{background:#fff!important;color:#080808!important;border-radius:7px!important;font-weight:800!important;box-shadow:none!important}
.elgon-page--watch .btn-primary:hover{background:#dadad8!important;transform:none!important;box-shadow:none!important}
.elgon-page--watch h1,.elgon-page--watch h2,.elgon-page--watch h3{letter-spacing:-.03em}

/* Voting */
.elgon-page--voting{background:#050505!important;font-family:'Manrope','Inter',system-ui,sans-serif!important}
.elgon-page--voting .shell{width:min(1280px,calc(100% - 48px))}
.elgon-page--voting .topbar-in{height:72px}
.elgon-page--voting .nav-links{gap:2px;height:100%}
.elgon-page--voting .nav-links a{position:relative;display:flex;align-items:center;height:100%;padding:0 12px;color:#b7b9b7;font-size:13px;font-weight:700}
.elgon-page--voting .nav-links a.active:after{content:'';position:absolute;left:12px;right:12px;bottom:0;height:3px;background:var(--efx-red);border-radius:3px 3px 0 0}
.elgon-page--voting .hero{min-height:560px;border-bottom:0}
.elgon-page--voting .hero:before{background:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.88) 38%,rgba(5,5,5,.34) 66%,rgba(5,5,5,.08)),linear-gradient(0deg,#050505 0%,transparent 42%)}
.elgon-page--voting .hero-content{padding:130px 0 74px;max-width:760px}
.elgon-page--voting h1{font-size:clamp(42px,7vw,86px);font-weight:800;letter-spacing:-.065em;line-height:.94}
.elgon-page--voting h2{font-weight:800;letter-spacing:-.045em}
.elgon-page--voting .eyebrow{color:#fff;font-size:10px;letter-spacing:.18em}
.elgon-page--voting .lead{color:#c8cac7;line-height:1.65}
.elgon-page--voting .section{padding:48px 0}
.elgon-page--voting .campaign-card,
.elgon-page--voting .category-card,
.elgon-page--voting .nominee-card{border-radius:10px;background:#151515;border-color:rgba(255,255,255,.06);box-shadow:0 6px 20px rgba(0,0,0,.18)}
.elgon-page--voting .campaign-card:hover,
.elgon-page--voting .category-card:hover,
.elgon-page--voting .nominee-card:hover{transform:scale(1.025);border-color:rgba(255,255,255,.15);box-shadow:0 28px 70px rgba(0,0,0,.5)}
.elgon-page--voting .button{border-radius:7px;font-weight:800}
.elgon-page--voting .button-primary{background:#fff;color:#080808}
.elgon-page--voting .button-gold{background:var(--efx-gold)}
.elgon-page--voting .button-muted{background:rgba(109,109,110,.62)}
.elgon-page--voting .status.live{background:var(--efx-red)}
.elgon-page--voting .modal-panel{border-radius:14px;background:#141414;border-color:rgba(255,255,255,.11)}
.elgon-page--voting .search input,.elgon-page--voting .field{border-radius:8px;background:#111;border-color:rgba(255,255,255,.12)}
.elgon-page--voting .search input:focus,.elgon-page--voting .field:focus{border-color:#fff}

/* Receipts and verification */
.elgon-page--receipt,
.elgon-page--verify{background:radial-gradient(circle at 50% -10%,rgba(229,9,20,.10),transparent 34%),#050505!important;font-family:'Manrope','Inter',system-ui,sans-serif!important}
.elgon-page--receipt .top{min-height:64px;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.07)}
.elgon-page--receipt .receipt{background:#111!important;border-color:rgba(255,255,255,.09)!important;border-radius:16px!important;box-shadow:0 34px 100px rgba(0,0,0,.52)!important}
.elgon-page--receipt .receipt-head{background:linear-gradient(120deg,rgba(229,9,20,.08),transparent 54%)!important}
.elgon-page--receipt .ticket{border-radius:16px!important}
.elgon-page--verify .card{background:#111!important;border-color:rgba(255,255,255,.09)!important;border-radius:16px!important;box-shadow:0 34px 100px rgba(0,0,0,.52)!important}
.elgon-page--verify .bar{height:4px!important;background:linear-gradient(90deg,var(--efx-red),var(--efx-gold),var(--efx-green))!important}
.elgon-page--verify .content{padding:28px!important}
.elgon-page--verify .head{padding-bottom:20px!important}
.elgon-page--verify h1{font-weight:800!important;letter-spacing:-.05em!important}
.elgon-page--vote-receipt .receipt{background:#111!important;border-radius:16px!important}
.elgon-page--vote-receipt .hero{background:radial-gradient(circle at 50% 0,rgba(34,197,94,.13),transparent 62%)!important}

/* Light mode remains supported where the existing page already implements it. */
body.elgon-page.light,
html.theme-light body.elgon-page{color:#151515}
body.elgon-page.light .efx-public-header,
html.theme-light .efx-public-header{background:rgba(248,248,245,.94)}
body.elgon-page.light .efx-public-nav a,
html.theme-light .efx-public-nav a{color:#414541}

@media(max-width:1000px){
  .efx-header-inner{width:min(100% - 28px,1440px);gap:18px}
  .efx-public-nav{display:none}
  .elgon-page--ticket .efx-detail-grid,.elgon-page--merch .efx-detail-grid{grid-template-columns:1fr}
  .elgon-page--ticket .efx-checkout-card,.elgon-page--merch .efx-checkout-card{position:static}
  .elgon-page--ticket .efx-detail-shell,.elgon-page--merch .efx-detail-shell{width:min(100% - 32px,1380px);padding-top:28px}
}
@media(max-width:700px){
  .efx-public-header{height:64px}
  .efx-header-inner{width:calc(100% - 24px);gap:10px}
  .efx-header-context{display:none}
  .efx-header-pill span{display:none}
  .efx-header-pill{width:40px;padding:0;border-radius:50%}
  .elgon-page--catalog .netflix-header{height:64px!important}
  .elgon-page--catalog .elgon-hero{min-height:620px}
  .elgon-page--catalog .elgon-hero__content{width:100%;padding:11.5rem 1.15rem 6rem}
  .elgon-page--catalog .elgon-hero h1{font-size:2.35rem;line-height:.96}
  .elgon-page--catalog .browse-content{margin-top:-2rem;padding-inline:.85rem}
  .elgon-page--catalog #videosView,.elgon-page--catalog #trendingView,.elgon-page--catalog #watchlistView{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
  .elgon-page--catalog .v-sec .s-item:hover,.elgon-page--catalog .search-result-card:hover{transform:none!important}
  .elgon-page--ticket .efx-fact-grid{grid-template-columns:1fr}
  .elgon-page--ticket .efx-title,.elgon-page--merch .efx-title{font-size:2.25rem}
  .elgon-page--voting .shell{width:min(100% - 28px,1280px)}
  .elgon-page--voting .hero{min-height:540px}
  .elgon-page--voting .hero-content{padding-top:155px}
}
@media(prefers-reduced-motion:reduce){
  body.elgon-page *,body.elgon-page *:before,body.elgon-page *:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}