/* ============================================================
   TIXET STOREFRONT — app-like public UI
   Red / white / black. Syne + DM Sans.
   ============================================================ */
:root{
  --red:#C8181A; --red-light:#E8352A; --red-soft:rgba(200,24,26,0.07);
  --black:#0A0A0B; --ink:#16161A; --muted:#6E6E78; --line:#EAEAEF;
  --bg:#FFFFFF; --bg-soft:#F6F6F8; --green:#18A957; --amber:#E8A33D;
  --radius:18px; --radius-sm:12px;
  --font-display:'Syne',sans-serif; --font-body:'DM Sans',sans-serif;
  --shadow-sm:0 1px 3px rgba(10,10,11,0.06); --shadow-md:0 6px 24px rgba(10,10,11,0.08);
  --shadow-lg:0 16px 50px rgba(10,10,11,0.14);
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.55;}
a{text-decoration:none;color:inherit;} img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px;}

/* ── Top nav ───────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:18px;}
.nav-logo .mark{width:32px;height:32px;border-radius:9px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;}
.nav-links{display:flex;align-items:center;gap:26px;}
.nav-links a{font-size:14px;font-weight:500;color:var(--muted);transition:color 0.15s;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:#fff;font-family:var(--font-display);font-weight:700;font-size:13px;padding:9px 16px;border-radius:30px;transition:background 0.18s;}
.nav-cta:hover{background:var(--red);}

/* ── Buttons ───────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:14px;padding:13px 22px;border-radius:30px;background:var(--red);color:#fff;transition:all 0.18s;white-space:nowrap;}
.btn:hover{background:var(--red-light);transform:translateY(-1px);box-shadow:0 8px 22px rgba(200,24,26,0.28);}
.btn:active{transform:translateY(0);}
.btn-lg{padding:16px 30px;font-size:16px;}
.btn-block{width:100%;}
.btn-dark{background:var(--ink);} .btn-dark:hover{background:#27272b;box-shadow:0 8px 22px rgba(0,0,0,0.2);}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink);}
.btn-ghost:hover{background:var(--bg-soft);box-shadow:none;}

/* ── Hero / listing header ─────────────────── */
.hero{padding:70px 0 50px;text-align:center;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:700px;height:500px;background:radial-gradient(circle,var(--red-soft),transparent 65%);z-index:-1;}
.hero .eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--red);background:var(--red-soft);padding:7px 15px;border-radius:30px;margin-bottom:20px;}
.hero h1{font-family:var(--font-display);font-size:clamp(38px,6vw,68px);font-weight:800;line-height:1.0;letter-spacing:-0.03em;margin-bottom:18px;}
.hero p{font-size:17px;color:var(--muted);max-width:520px;margin:0 auto;font-weight:300;}

/* ── Event grid ────────────────────────────── */
.section{padding:40px 0 80px;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px;}
.section-head h2{font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-0.02em;}
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.ev-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform 0.25s,box-shadow 0.25s;display:flex;flex-direction:column;}
.ev-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.ev-img{aspect-ratio:3/2;background:linear-gradient(135deg,#1a1a1f,#0a0a0b);position:relative;overflow:hidden;}
.ev-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s;}
.ev-card:hover .ev-img img{transform:scale(1.05);}
.ev-img .ev-date-chip{position:absolute;top:14px;left:14px;background:rgba(255,255,255,0.95);backdrop-filter:blur(6px);border-radius:12px;padding:8px 12px;text-align:center;font-family:var(--font-display);line-height:1;box-shadow:var(--shadow-sm);}
.ev-date-chip .d{font-size:20px;font-weight:800;color:var(--red);} .ev-date-chip .m{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);margin-top:3px;}
.ev-img .ev-img-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.15);font-size:40px;}
.ev-body{padding:20px;display:flex;flex-direction:column;flex:1;}
.ev-cat{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--red);margin-bottom:8px;}
.ev-title{font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-0.02em;line-height:1.15;margin-bottom:10px;}
.ev-meta{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:5px;margin-bottom:18px;}
.ev-meta span{display:flex;align-items:center;gap:8px;} .ev-meta i{color:var(--red);width:13px;font-size:12px;}
.ev-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--line);}
.ev-price{font-family:var(--font-display);font-weight:800;font-size:16px;} .ev-price small{font-size:11px;color:var(--muted);font-weight:400;display:block;}
.ev-go{width:38px;height:38px;border-radius:50%;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:all 0.18s;}
.ev-card:hover .ev-go{background:var(--red);color:#fff;}

/* ── Event detail ──────────────────────────── */
.detail-hero{position:relative;min-height:380px;display:flex;align-items:flex-end;background:var(--black);overflow:hidden;}
.detail-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.55;}
.detail-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,11,0.95),rgba(10,10,11,0.2));}
.detail-hero-content{position:relative;z-index:2;color:#fff;padding:50px 0;width:100%;}
.detail-hero .eyebrow{color:#fff;background:var(--red);}
.detail-hero h1{font-family:var(--font-display);font-size:clamp(32px,5vw,56px);font-weight:800;line-height:1.02;letter-spacing:-0.03em;color:#fff;margin-bottom:14px;max-width:760px;}
.detail-hero .dh-meta{display:flex;gap:24px;flex-wrap:wrap;font-size:15px;color:rgba(255,255,255,0.85);}
.detail-hero .dh-meta span{display:flex;align-items:center;gap:8px;} .detail-hero .dh-meta i{color:var(--red-light);}
.detail-grid{display:grid;grid-template-columns:1fr 400px;gap:40px;padding:50px 0 90px;align-items:start;}
.detail-about h2{font-family:var(--font-display);font-size:22px;font-weight:800;margin-bottom:14px;letter-spacing:-0.01em;}
.detail-about p{color:#33333a;font-size:16px;line-height:1.75;font-weight:300;white-space:pre-line;margin-bottom:18px;}

/* ── Ticket picker (sticky checkout card) ──── */
.buy-card{position:sticky;top:84px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden;}
.buy-head{padding:20px 22px;border-bottom:1px solid var(--line);}
.buy-head h3{font-family:var(--font-display);font-size:17px;font-weight:800;}
.buy-head p{font-size:13px;color:var(--muted);}
.tt-row{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;}
.tt-info .tt-name{font-family:var(--font-display);font-weight:700;font-size:15px;}
.tt-info .tt-desc{font-size:12px;color:var(--muted);margin-top:2px;}
.tt-info .tt-price{font-size:14px;color:var(--red);font-weight:700;margin-top:5px;}
.tt-info .tt-left{font-size:11px;color:var(--amber);font-weight:600;margin-top:3px;}
.tt-soldout{font-size:12px;font-weight:700;color:var(--muted);}
.qty{display:flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:30px;overflow:hidden;}
.qty button{width:34px;height:34px;font-size:16px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background 0.15s;}
.qty button:hover{background:var(--bg-soft);color:var(--red);}
.qty input{width:38px;text-align:center;border:none;font-family:var(--font-display);font-weight:700;font-size:15px;background:transparent;-moz-appearance:textfield;}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.buy-summary{padding:20px 22px;background:var(--bg-soft);}
.summary-line{display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px;color:var(--muted);}
.summary-line.total{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--ink);margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);}
.buy-foot{padding:20px 22px;}
.coupon-row{display:flex;gap:8px;margin-bottom:14px;}
.coupon-row input{flex:1;font-family:var(--font-body);font-size:14px;border:1.5px solid var(--line);border-radius:30px;padding:10px 16px;outline:none;}
.coupon-row input:focus{border-color:var(--red);}
.coupon-row button{padding:10px 16px;border-radius:30px;background:var(--bg-soft);font-family:var(--font-display);font-weight:700;font-size:13px;}

/* ── Checkout / forms ──────────────────────── */
.checkout-wrap{max-width:720px;margin:0 auto;padding:40px 0 90px;}
.checkout-wrap h1{font-family:var(--font-display);font-size:30px;font-weight:800;letter-spacing:-0.02em;margin-bottom:6px;}
.checkout-wrap .ck-sub{color:var(--muted);margin-bottom:30px;}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-bottom:20px;box-shadow:var(--shadow-sm);}
.card h2{font-family:var(--font-display);font-size:17px;font-weight:800;margin-bottom:18px;}
.form-grid{display:grid;gap:18px;} .form-grid.cols-2{grid-template-columns:1fr 1fr;}
.fld{display:flex;flex-direction:column;gap:7px;}
.fld.span-2{grid-column:1/-1;}
.fld label{font-size:13px;font-weight:600;}
.fld input{font-family:var(--font-body);font-size:15px;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:13px 15px;outline:none;background:var(--bg-soft);transition:border-color 0.18s,background 0.18s;}
.fld input:focus{border-color:var(--red);background:var(--bg);}
.order-summary-box .os-line{display:flex;justify-content:space-between;font-size:14px;padding:6px 0;color:var(--muted);}
.order-summary-box .os-line strong{color:var(--ink);font-weight:600;}
.order-summary-box .os-total{display:flex;justify-content:space-between;font-family:var(--font-display);font-weight:800;font-size:20px;padding-top:14px;margin-top:8px;border-top:1px solid var(--line);}

/* ── Alerts ────────────────────────────────── */
.alert{padding:13px 18px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:18px;display:flex;align-items:center;gap:10px;}
.alert-error{background:var(--red-soft);color:#9C1416;}
.alert-success{background:#E9F8EF;color:#0F7A3D;}
.alert-info{background:#EAF1FD;color:#2D5FB8;}

/* ── Confirmation ──────────────────────────── */
.confirm{max-width:560px;margin:0 auto;text-align:center;padding:70px 0;}
.confirm .check{width:84px;height:84px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:38px;margin:0 auto 24px;}
.confirm h1{font-family:var(--font-display);font-size:32px;font-weight:800;margin-bottom:10px;}
.confirm p{color:var(--muted);font-size:16px;margin-bottom:8px;}
.confirm .order-ref{font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--red);margin:18px 0;}

/* ── Footer ────────────────────────────────── */
.foot{background:var(--black);color:#fff;padding:50px 0 30px;margin-top:40px;}
.foot-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;align-items:flex-start;}
.foot-brand{font-family:var(--font-display);font-weight:800;font-size:20px;display:flex;align-items:center;gap:10px;}
.foot-brand .mark{width:32px;height:32px;border-radius:9px;background:var(--red);display:flex;align-items:center;justify-content:center;}
.foot-links{display:flex;gap:40px;flex-wrap:wrap;}
.foot-col h4{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:14px;}
.foot-col a{display:block;font-size:14px;color:rgba(255,255,255,0.7);margin-bottom:9px;transition:color 0.15s;}
.foot-col a:hover{color:#fff;}
.foot-bottom{margin-top:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.1);font-size:13px;color:rgba(255,255,255,0.4);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}

/* ── Empty ─────────────────────────────────── */
.empty-state{text-align:center;padding:80px 24px;color:var(--muted);}
.empty-state .es-ico{width:72px;height:72px;border-radius:20px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;font-size:30px;color:#C8C8D0;margin:0 auto 20px;}
.empty-state h3{font-family:var(--font-display);font-size:22px;color:var(--ink);margin-bottom:8px;}

/* ── Responsive ────────────────────────────── */
@media (max-width:920px){
  .events-grid{grid-template-columns:1fr 1fr;}
  .detail-grid{grid-template-columns:1fr;}
  .buy-card{position:static;}
  .nav-links a:not(.nav-cta){display:none;}
}
@media (max-width:600px){
  .events-grid{grid-template-columns:1fr;}
  .form-grid.cols-2{grid-template-columns:1fr;}
  .hero{padding:48px 0 36px;}
  .section{padding:30px 0 60px;}
}