/* ==========================================================================
   SINHALANATYA.COM — Design System
   Fonts: Fraunces (display/serif) + Work Sans (body/UI)
   ========================================================================== */

:root{
  /* ---- Brand palette (from logo) ---- */
  --curtain:#1C1210;
  --curtain-2:#2A1B17;
  --playbill:#FBF3E7;
  --playbill-2:#F3E8D6;
  --marquee:#C0202C;
  --marquee-dark:#8f1620;
  --spotlight:#F5A623;
  --ink:#2B211D;
  --stone:#6E6560;
  --stone-light:#B8AEA5;

  /* ---- Semantic (light mode default) ---- */
  --bg:var(--playbill);
  --bg-alt:var(--playbill-2);
  --surface:#FFFFFF;
  --text:var(--ink);
  --text-muted:var(--stone);
  --border:#E4D8C4;
  --header-bg:rgba(251,243,231,.92);

  --radius-sm:6px;
  --radius-md:10px;
  --shadow-ticket:0 18px 40px rgba(28,18,16,.14);

  --container:1240px;
}

[data-theme="dark"]{
  --bg:var(--curtain);
  --bg-alt:var(--curtain-2);
  --surface:#241815;
  --text:#F3E8D6;
  --text-muted:#B8AEA5;
  --border:#3A2822;
  --header-bg:rgba(28,18,16,.92);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

body{
  margin:0;
  font-family:'Work Sans', sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.65;
  transition:background .3s ease, color .3s ease;
  padding-top:82px;
}

h1,h2,h3,h4,.font-display{
  font-family:'Fraunces', serif;
  font-weight:600;
  color:var(--text);
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{font-size:clamp(38px,5.2vw,68px); font-weight:560;}
h2{font-size:clamp(28px,3.6vw,44px);}
h3{font-size:clamp(20px,2.2vw,26px);}
p{color:var(--text-muted); margin:0 0 1em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:var(--container); margin:0 auto; padding:0 24px;}
section{padding:88px 0;}
.text-muted-c{color:var(--text-muted);}

::selection{background:var(--spotlight); color:var(--curtain);}
:focus-visible{outline:3px solid var(--spotlight); outline-offset:2px;}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Work Sans',sans-serif; font-weight:600; font-size:15.5px;
  padding:14px 28px; border-radius:var(--radius-sm); border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--marquee); color:#fff;}
.btn-primary:hover{background:var(--marquee-dark); color:#fff; box-shadow:0 12px 28px rgba(192,32,44,.3);}
.btn-gold{background:var(--spotlight); color:var(--curtain);}
.btn-gold:hover{box-shadow:0 12px 28px rgba(245,166,35,.35); color:var(--curtain);}
.btn-outline{background:transparent; border-color:var(--text); color:var(--text);}
.btn-outline:hover{background:var(--text); color:var(--bg);}
.btn-ghost{background:transparent; color:var(--text); padding:10px 6px;}
.btn-sm{padding:10px 18px; font-size:14px;}
.btn-block{width:100%;}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  background:var(--header-bg); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-row{display:flex; align-items:center; gap:28px; padding:14px 0;}
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.brand img{height:42px; width:auto;}
.main-nav{display:flex; gap:26px; margin-right:auto;}
.main-nav a{
  font-weight:600; font-size:15px; color:var(--text); position:relative; padding:6px 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--marquee); transition:width .2s ease;
}
.main-nav a:hover::after, .main-nav a.active::after{width:100%;}
.header-tools{display:flex; align-items:center; gap:6px;}
.tool-btn{
  width:40px; height:40px; border-radius:50%; border:none; background:transparent; color:var(--text);
  display:flex; align-items:center; justify-content:center; font-size:18px; cursor:pointer;
  transition:background .2s ease;
}
.tool-btn:hover{background:var(--bg-alt);}
.lang-toggle{
  font-family:'Work Sans',sans-serif; font-weight:700; font-size:13px; border:1.5px solid var(--border);
  background:transparent; color:var(--text); border-radius:20px; padding:7px 14px; cursor:pointer;
}
.cart-badge{
  position:relative;
}
.cart-badge .count{
  position:absolute; top:2px; right:2px; background:var(--marquee); color:#fff; font-size:10px; font-weight:700;
  width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.nav-toggle{display:none; background:none; border:none; font-size:26px; color:var(--text); cursor:pointer;}

@media (max-width:1080px){
  .main-nav{
    position:fixed; top:73px; left:0; width:100%; background:var(--surface); flex-direction:column; gap:0;
    padding:8px 24px 20px; border-bottom:1px solid var(--border); transform:translateY(-8px); opacity:0;
    pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  }
  .main-nav.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .main-nav a{padding:12px 0; border-bottom:1px solid var(--border);}
  .nav-toggle{display:block;}
  body{padding-top:73px;}
}

/* Search overlay */
.search-overlay{
  position:fixed; inset:0; background:rgba(28,18,16,.65); z-index:1200;
  display:flex; align-items:flex-start; justify-content:center; padding-top:12vh;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.search-overlay.open{opacity:1; pointer-events:auto;}
.search-box{
  background:var(--surface); border-radius:var(--radius-md); padding:28px; width:92%; max-width:640px;
  box-shadow:0 30px 60px rgba(0,0,0,.3);
}
.search-box input{
  width:100%; border:none; border-bottom:2px solid var(--border); font-family:'Fraunces',serif; font-size:26px;
  padding:10px 4px; background:transparent; color:var(--text);
}
.search-box input:focus{outline:none; border-color:var(--marquee);}
.search-hint{font-size:13px; color:var(--text-muted); margin-top:14px;}
.search-close{position:absolute; top:18px; right:26px; background:none; border:none; color:#fff; font-size:26px; cursor:pointer;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--curtain); color:#F3E8D6; padding:70px 0 26px;}
.site-footer a{color:#F3E8D6;}
.site-footer .text-muted-c{color:#B8AEA5;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px;}
.footer-brand img{height:46px; margin-bottom:14px;}
.footer-col h5{font-family:'Fraunces',serif; font-size:17px; margin-bottom:16px; color:#fff;}
.footer-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.footer-col a:hover{color:var(--spotlight);}
.footer-social{display:flex; gap:12px; margin-top:16px;}
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid #4A3830; display:flex; align-items:center;
  justify-content:center; transition:background .2s ease, border-color .2s ease;
}
.footer-social a:hover{background:var(--marquee); border-color:var(--marquee);}
.footer-bottom{
  border-top:1px solid #3A2822; margin-top:50px; padding-top:22px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:10px; font-size:13.5px; color:#8f8480;
}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}
}

/* ==========================================================================
   TICKET-STUB CARD  (signature component, used across the whole site)
   ========================================================================== */
.ticket{
  display:flex; flex-direction:column; background:var(--surface); border-radius:var(--radius-md);
  overflow:hidden; box-shadow:var(--shadow-ticket); position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.ticket:hover{transform:translateY(-5px); box-shadow:0 26px 50px rgba(28,18,16,.2);}
.ticket-poster{position:relative; aspect-ratio:4/5; overflow:hidden;}
.ticket-poster img{width:100%; height:100%; object-fit:cover;}
.ticket-tag{
  position:absolute; top:14px; left:14px; background:var(--spotlight); color:var(--curtain);
  font-size:12px; font-weight:700; padding:5px 12px; border-radius:20px;
}
.ticket-flag{
  position:absolute; top:14px; right:14px; background:rgba(28,18,16,.75); color:#fff; font-size:12px;
  font-weight:600; padding:5px 10px; border-radius:20px; display:flex; align-items:center; gap:6px;
}
.ticket-perf{
  position:relative; border-top:2px dashed var(--border); margin:0 18px;
}
.ticket-perf::before,.ticket-perf::after{
  content:""; position:absolute; top:-11px; width:22px; height:22px; border-radius:50%; background:var(--bg);
}
.ticket-perf::before{left:-29px;}
.ticket-perf::after{right:-29px;}
.ticket-body{padding:18px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1;}
.ticket-body h3{font-size:19px; margin:0;}
.ticket-meta{display:flex; flex-wrap:wrap; gap:12px; font-size:13.5px; color:var(--text-muted);}
.ticket-meta span{display:flex; align-items:center; gap:6px;}
.ticket-foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:6px;}
.ticket-price{font-family:'Fraunces',serif; font-weight:600; font-size:18px; color:var(--marquee);}
.ticket-price small{font-family:'Work Sans',sans-serif; font-weight:500; font-size:12px; color:var(--text-muted);}

/* ==========================================================================
   MISC SHARED
   ========================================================================== */
.section-head{max-width:640px; margin-bottom:44px;}
.section-head p{font-size:17px;}
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:24px; border:1.5px solid var(--border);
  font-size:14px; font-weight:600; color:var(--text); background:var(--surface); cursor:pointer; transition:.2s ease;
}
.pill.active,.pill:hover{border-color:var(--marquee); color:var(--marquee);}
.chip-row{display:flex; gap:10px; flex-wrap:wrap;}
.divider-curtain{height:64px; margin-top:-1px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
@media (max-width:980px){.grid-3{grid-template-columns:repeat(2,1fr);} .grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-3,.grid-4{grid-template-columns:1fr;}}

.badge-soft{
  display:inline-flex; align-items:center; gap:8px; background:var(--bg-alt); color:var(--text);
  padding:7px 14px; border-radius:20px; font-size:13.5px; font-weight:600;
}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--marquee); color:#fff; padding:12px 20px; z-index:2000;
}
.skip-link:focus{left:12px; top:12px;}

/* ==========================================================================
   HOME — HERO (the one bold motion moment: curtain parts open)
   ========================================================================== */
.hero{
  position:relative; background:var(--curtain); color:#F3E8D6; overflow:hidden;
  padding:150px 0 110px; margin-top:-1px;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 55% at 22% 30%, rgba(245,166,35,.22), transparent 70%);
  pointer-events:none;
}
.hero-curtain-l,.hero-curtain-r{
  position:absolute; top:0; bottom:0; width:52%; background:linear-gradient(135deg,#2A1B17,#170F0D);
  z-index:5; pointer-events:none;
}
.hero-curtain-l{left:0; transform-origin:left; animation:curtainOpenL 1.1s cubic-bezier(.7,0,.2,1) .15s both;}
.hero-curtain-r{right:0; transform-origin:right; animation:curtainOpenR 1.1s cubic-bezier(.7,0,.2,1) .15s both;}
@keyframes curtainOpenL{from{transform:translateX(0);} to{transform:translateX(-100%);}}
@keyframes curtainOpenR{from{transform:translateX(0);} to{transform:translateX(100%);}}
@media (prefers-reduced-motion: reduce){
  .hero-curtain-l,.hero-curtain-r{display:none;}
}
.hero-inner{position:relative; z-index:2; max-width:680px; opacity:0; animation:heroReveal .8s ease .9s forwards;}
@media (prefers-reduced-motion: reduce){.hero-inner{opacity:1; animation:none;}}
@keyframes heroReveal{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
.hero-kicker{color:var(--spotlight); font-weight:700; font-size:15px; margin-bottom:14px;}
.hero h1{color:#fff; font-size:clamp(40px,5.6vw,72px); margin-bottom:20px;}
.hero h1 em{color:var(--spotlight); font-style:normal;}
.hero p.lead{color:#D8C9B8; font-size:18px; max-width:520px; margin-bottom:34px;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:46px;}
.hero-stats{display:flex; gap:44px; flex-wrap:wrap; border-top:1px solid #3A2822; padding-top:28px;}
.hero-stats div b{font-family:'Fraunces',serif; font-size:30px; display:block; color:#fff;}
.hero-stats div span{font-size:13.5px; color:#B8AEA5;}

.curtain-fold{display:block; width:100%; height:56px; margin-top:-2px;}

/* ==========================================================================
   CATEGORY / MOOD TILES
   ========================================================================== */
.mood-tile{
  display:flex; flex-direction:column; gap:10px; padding:26px 22px; border-radius:var(--radius-md);
  background:var(--surface); border:1px solid var(--border); transition:.2s ease; height:100%;
}
.mood-tile:hover{border-color:var(--marquee); transform:translateY(-3px);}
.mood-tile .mood-icon{font-size:26px;}
.mood-tile h4{font-family:'Fraunces',serif; font-size:18px; margin:0;}
.mood-tile span{font-size:13px; color:var(--text-muted);}

/* ==========================================================================
   HOW IT WORKS (numbered — genuinely sequential, used once)
   ========================================================================== */
.steps-row{display:flex; gap:0; counter-reset:step;}
.step{flex:1; position:relative; padding:0 22px;}
.step:first-child{padding-left:0;}
.step:not(:first-child)::before{
  content:""; position:absolute; left:0; top:22px; width:100%; height:2px; background:var(--border);
}
.step-num{
  width:44px; height:44px; border-radius:50%; background:var(--curtain); color:var(--spotlight);
  font-family:'Fraunces',serif; font-weight:600; font-size:18px; display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2; margin-bottom:16px;
}
.step h4{font-size:17px; margin-bottom:6px;}
.step p{font-size:14.5px;}
@media (max-width:900px){
  .steps-row{flex-direction:column; gap:30px;}
  .step:not(:first-child)::before{display:none;}
}

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.trust-strip{background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.trust-item{display:flex; align-items:center; gap:14px;}
.trust-item .icon{
  width:46px; height:46px; border-radius:50%; background:var(--surface); color:var(--marquee);
  display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; border:1px solid var(--border);
}
.trust-item h5{margin:0 0 3px; font-size:15.5px; font-family:'Work Sans',sans-serif; font-weight:700;}
.trust-item p{margin:0; font-size:13.5px;}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.breadcrumb-bar{padding:22px 0; border-bottom:1px solid var(--border);}
.crumbs{font-size:13.5px; color:var(--text-muted); display:flex; gap:8px; align-items:center;}
.crumbs a:hover{color:var(--marquee);}

/* ==========================================================================
   EVENT LISTING PAGE
   ========================================================================== */
.listing-layout{display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:start;}
.filter-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px;
  position:sticky; top:98px;
}
.filter-group{margin-bottom:26px;}
.filter-group:last-child{margin-bottom:0;}
.filter-group h6{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:14px; font-weight:700;}
.filter-option{display:flex; align-items:center; gap:10px; font-size:14.5px; padding:6px 0; cursor:pointer;}
.filter-option input{accent-color:var(--marquee); width:16px; height:16px;}
.listing-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; gap:16px; flex-wrap:wrap;}
.listing-count{font-size:14.5px; color:var(--text-muted);}
.sort-select{
  border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:9px 14px; background:var(--surface);
  color:var(--text); font-family:'Work Sans',sans-serif; font-size:14px;
}
.listing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.empty-state{text-align:center; padding:60px 20px; color:var(--text-muted);}
@media (max-width:1080px){
  .listing-layout{grid-template-columns:1fr;}
  .filter-panel{position:static;}
  .listing-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){.listing-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   EVENT DETAIL PAGE
   ========================================================================== */
.event-hero{position:relative; height:52vh; min-height:380px; background-size:cover; background-position:center;}
.event-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(28,18,16,.15), rgba(28,18,16,.85));}
.event-hero-content{position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:36px;}
.event-hero-content h1{color:#fff; margin-bottom:10px;}
.event-hero-meta{display:flex; gap:18px; flex-wrap:wrap; color:#E8DCC8; font-size:14.5px;}
.event-hero-meta span{display:flex; align-items:center; gap:7px;}

.detail-layout{display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:start;}
.detail-block{margin-bottom:44px;}
.detail-block:last-child{margin-bottom:0;}
.detail-block h3{margin-bottom:16px;}
.cast-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.cast-card{text-align:center;}
.cast-card img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%; margin-bottom:10px; border:3px solid var(--bg-alt);}
.cast-card h6{font-size:14px; margin:0 0 2px; font-weight:700;}
.cast-card span{font-size:12.5px; color:var(--text-muted);}
.video-embed{position:relative; padding-top:56.25%; border-radius:var(--radius-md); overflow:hidden; background:var(--curtain);}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.policy-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px;}
.policy-list li{display:flex; gap:12px; font-size:14.5px; color:var(--text-muted); padding-bottom:12px; border-bottom:1px solid var(--border);}
.policy-list li:last-child{border-bottom:none; padding-bottom:0;}
.policy-list li i{color:var(--marquee); margin-top:3px;}
.map-embed{border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border);}
.map-embed iframe{width:100%; height:280px; border:0; display:block;}

/* Seat tiers */
.tier-list{display:flex; flex-direction:column; gap:12px;}
.tier-row{
  display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); cursor:pointer; transition:.2s ease;
}
.tier-row:hover,.tier-row.selected{border-color:var(--marquee); background:var(--bg-alt);}
.tier-swatch{width:14px; height:14px; border-radius:3px; margin-right:12px; display:inline-block;}
.tier-name{display:flex; align-items:center; font-weight:700; font-size:15px;}
.tier-desc{font-size:12.5px; color:var(--text-muted); margin-top:2px;}
.tier-price{font-family:'Fraunces',serif; font-weight:600; color:var(--marquee); font-size:17px;}
.qty-control{display:flex; align-items:center; gap:10px; margin-left:16px;}
.qty-btn{
  width:28px; height:28px; border-radius:50%; border:1.5px solid var(--border); background:var(--surface); color:var(--text);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-weight:700;
}

/* Seat map (simplified visual) */
.seat-map{background:var(--bg-alt); border-radius:var(--radius-md); padding:26px; text-align:center;}
.stage-label{
  background:var(--curtain); color:#F3E8D6; font-family:'Fraunces',serif; font-size:13px; letter-spacing:.08em;
  padding:10px; border-radius:4px 4px 40px 40px; margin-bottom:26px; max-width:280px; margin-inline:auto;
}
.seat-grid{display:flex; flex-direction:column; gap:8px; align-items:center; margin-bottom:20px;}
.seat-row{display:flex; gap:7px;}
.seat{width:20px; height:20px; border-radius:4px 4px 8px 8px; background:var(--stone-light); cursor:pointer;}
.seat.vip{background:#E7B8B8;}
.seat.gold{background:#F3D48E;}
.seat.taken{background:#D9CFC4; cursor:not-allowed;}
.seat.picked{background:var(--marquee);}
.seat-legend{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; font-size:12.5px; color:var(--text-muted);}
.seat-legend span{display:flex; align-items:center; gap:6px;}
.seat-legend i{width:14px; height:14px; border-radius:4px; display:inline-block;}

/* Sticky booking sidebar */
.booking-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:26px;
  position:sticky; top:98px; box-shadow:var(--shadow-ticket);
}
.booking-date{display:flex; gap:14px; align-items:center; margin-bottom:18px;}
.booking-date .datebox{
  background:var(--curtain); color:#fff; border-radius:var(--radius-sm); width:58px; text-align:center; padding:8px 0; flex-shrink:0;
}
.booking-date .datebox b{display:block; font-family:'Fraunces',serif; font-size:20px; color:var(--spotlight);}
.booking-date .datebox span{font-size:11px; text-transform:uppercase;}
.booking-price-range{font-family:'Fraunces',serif; font-size:22px; color:var(--marquee); margin-bottom:18px;}
.booking-price-range small{font-family:'Work Sans',sans-serif; font-size:13px; color:var(--text-muted); font-weight:500;}
.booking-actions{display:flex; flex-direction:column; gap:10px;}
.icon-link-row{display:flex; gap:8px; margin-top:14px;}
.icon-link-row .tool-btn{border:1px solid var(--border);}

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.about-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
.about-stats div b{font-family:'Fraunces',serif; font-size:38px; color:var(--marquee); display:block;}
.about-stats div span{font-size:14px; color:var(--text-muted);}
.team-card{text-align:center;}
.team-card img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%; margin-bottom:14px;}
.team-card h5{margin:0 0 3px;}
.team-card span{font-size:13.5px; color:var(--marquee); font-weight:600;}
@media (max-width:768px){.about-stats{grid-template-columns:repeat(2,1fr); row-gap:30px;}}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-layout{display:grid; grid-template-columns:.9fr 1.1fr; gap:50px;}
.contact-card{
  display:flex; gap:16px; padding:20px; border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:16px;
  background:var(--surface);
}
.contact-card .icon{
  width:48px; height:48px; border-radius:50%; background:var(--marquee); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.contact-card h6{margin:0 0 4px; font-size:15px;}
.contact-card p{margin:0; font-size:14px;}
.form-field{margin-bottom:20px;}
.form-field label{display:block; font-size:13.5px; font-weight:700; margin-bottom:8px;}
.form-field input,.form-field select,.form-field textarea{
  width:100%; border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:13px 16px;
  font-family:'Work Sans',sans-serif; font-size:14.5px; background:var(--surface); color:var(--text);
}
.form-field textarea{min-height:130px; resize:vertical;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none; border-color:var(--marquee);}
@media (max-width:900px){.contact-layout{grid-template-columns:1fr;}}

/* ==========================================================================
   CART / CHECKOUT PAGE
   ========================================================================== */
.cart-item{
  display:flex; gap:18px; padding:20px 0; border-bottom:1px solid var(--border); align-items:center;
}
.cart-item img{width:80px; height:100px; object-fit:cover; border-radius:6px; flex-shrink:0;}
.cart-item .grow{flex:1;}
.cart-item h6{margin:0 0 4px;}
.cart-item span{font-size:13px; color:var(--text-muted);}
.cart-remove{background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:18px;}
.cart-remove:hover{color:var(--marquee);}
.summary-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:26px; position:sticky; top:98px;}
.summary-row{display:flex; justify-content:space-between; font-size:14.5px; padding:9px 0;}
.summary-row.total{border-top:1px solid var(--border); margin-top:8px; padding-top:16px; font-family:'Fraunces',serif; font-size:19px; color:var(--marquee); font-weight:600;}
.promo-row{display:flex; gap:10px; margin:18px 0;}
.promo-row input{flex:1; border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:11px 14px;}

/* ==========================================================================
   LOGIN / REGISTER PAGE
   ========================================================================== */
.auth-wrap{
  display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - 82px); margin-top:-88px;
}
.auth-visual{
  background:var(--curtain); color:#F3E8D6; display:flex; flex-direction:column; justify-content:center;
  padding:80px 60px; position:relative; overflow:hidden;
}
.auth-visual::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 70% 30%, rgba(245,166,35,.18), transparent 70%);}
.auth-visual > *{position:relative; z-index:2;}
.auth-form-side{display:flex; flex-direction:column; justify-content:center; padding:80px 60px;}
.auth-tabs{display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:34px;}
.auth-tab{
  flex:1; text-align:center; padding:14px; font-weight:700; font-size:15px; color:var(--text-muted); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-2px;
}
.auth-tab.active{color:var(--marquee); border-color:var(--marquee);}
.auth-panel{display:none;}
.auth-panel.active{display:block;}
.form-check{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-muted);}
.divider-or{display:flex; align-items:center; gap:14px; color:var(--text-muted); font-size:13px; margin:22px 0;}
.divider-or::before,.divider-or::after{content:""; flex:1; height:1px; background:var(--border);}
.social-auth{display:flex; gap:12px;}
.social-auth .btn{flex:1;}
@media (max-width:900px){
  .auth-wrap{grid-template-columns:1fr; margin-top:0;}
  .auth-visual{display:none;}
  .auth-form-side{padding:60px 24px;}
}

/* ==========================================================================
   GALLERY PAGE
   ========================================================================== */
.gallery-tabs{display:flex; gap:10px; margin-bottom:34px;}
.gallery-grid{
  columns:4 240px; column-gap:18px;
}
.gallery-item{break-inside:avoid; margin-bottom:18px; border-radius:var(--radius-sm); overflow:hidden; position:relative; cursor:pointer;}
.gallery-item img{width:100%; display:block; transition:transform .3s ease;}
.gallery-item:hover img{transform:scale(1.04);}
.gallery-item .cap{
  position:absolute; left:0; right:0; bottom:0; padding:14px; background:linear-gradient(0deg, rgba(28,18,16,.85), transparent);
  color:#fff; font-size:13px; opacity:0; transition:opacity .2s ease;
}
.gallery-item:hover .cap{opacity:1;}
.video-card{position:relative; border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:16/9;}
.video-card img{width:100%; height:100%; object-fit:cover;}
.video-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(28,18,16,.35);
}
.video-play i{
  width:56px; height:56px; border-radius:50%; background:var(--marquee); color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:20px;
}
.lightbox{
  position:fixed; inset:0; background:rgba(10,6,5,.94); z-index:1300; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease; padding:30px;
}
.lightbox.open{opacity:1; pointer-events:auto;}
.lightbox img,.lightbox iframe{max-width:90vw; max-height:85vh; border-radius:8px;}
.lightbox-close{position:absolute; top:24px; right:30px; color:#fff; font-size:30px; background:none; border:none; cursor:pointer;}

/* ==========================================================================
   DRAMATISTS PAGE
   ========================================================================== */
.artist-card{text-align:center; padding:24px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); transition:.2s ease;}
.artist-card:hover{border-color:var(--marquee); transform:translateY(-4px);}
.artist-card img{width:96px; height:96px; border-radius:50%; object-fit:cover; margin:0 auto 14px; border:3px solid var(--bg-alt);}
.artist-card h5{margin:0 0 4px; font-size:16.5px;}
.artist-card span{font-size:13px; color:var(--marquee); font-weight:600;}
.artist-card p{font-size:13px; margin-top:10px;}

.artist-hero{display:grid; grid-template-columns:260px 1fr; gap:44px; align-items:center;}
.artist-hero img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%;}
.artist-badges{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0;}
.filmography-row{display:flex; gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid var(--border);}
.filmography-row img{width:60px; height:75px; object-fit:cover; border-radius:6px; flex-shrink:0;}
.filmography-row h6{margin:0 0 4px;}
.filmography-row span{font-size:13px; color:var(--text-muted);}
@media (max-width:768px){.artist-hero{grid-template-columns:1fr; text-align:center;} .artist-hero img{width:160px; margin:0 auto;}}

/* ==========================================================================
   ORDER CONFIRMATION
   ========================================================================== */
.confirm-wrap{max-width:640px; margin:0 auto; text-align:center;}
.confirm-icon{
  width:88px; height:88px; border-radius:50%; background:var(--marquee); color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:38px; margin:0 auto 26px;
}
.confirm-ticket{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:0; text-align:left;
  margin:36px 0; box-shadow:var(--shadow-ticket); overflow:hidden;
}
.confirm-ticket-top{display:flex; gap:18px; padding:24px;}
.confirm-ticket-top img{width:90px; height:112px; object-fit:cover; border-radius:6px;}
.confirm-detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:20px 24px; background:var(--bg-alt);}
.confirm-detail-grid div span{display:block; font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px;}
.confirm-detail-grid div b{font-size:15px;}
.confirm-actions{display:flex; gap:14px; justify-content:center; margin-top:30px;}

/* Back to top */
#backToTop{
  position:fixed; bottom:26px; right:26px; z-index:900; width:46px; height:46px; border-radius:50%; border:none;
  background:var(--marquee); color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease;
  box-shadow:0 10px 24px rgba(192,32,44,.3); cursor:pointer;
}
#backToTop.show{opacity:1; pointer-events:auto; transform:translateY(0);}

@media (max-width:768px){
  section{padding:60px 0;}
  .footer-grid{grid-template-columns:1fr;}
  .detail-layout{grid-template-columns:1fr;}
  .cast-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-grid{columns:2 180px;}
}