/* ==========================================================================
   Event page, "Wallet" look. Loaded after event-v3.css when the page body has .ev-wallet.
   A dark ribbon of key facts scrolls across the top; the hero has the tags, a heavy title, the organizer, a
   flip clock that turns every second, and the poster tilted on the right. Below, the details sit in a grid of
   cards that pop in one after another and tilt toward the pointer: a solid red From card with Buy now, the
   facts, About, a dark Your ticket card, Tickets and Venue. Buy now opens the ticket panel as a side drawer
   (a bottom sheet on phones). All hooks (#buyPanel, #cd-text, .tier, .qty ...) are untouched.
   To go back: change the body class in public/event.php (e.g. 'event-page ev-night ev-momo').
   ========================================================================== */

body.ev-wallet{background:#F2F1F5}
body.ev-wallet .ev{
  --ink:#16111C; --muted:#6B6577; --muted-2:#6B6577; --line:#E3E0E9; --line-strong:#CFCAD8;
  --paper:#F2F1F5; --surface:#fff; --wl-red:#E5383B; --wl-red-d:#B91C1C; --wl-tint:#FDEDED;
  --wl-ease:cubic-bezier(.16,.84,.24,1);
  background:#F2F1F5; color:var(--ink); font-family:'Plus Jakarta Sans',system-ui,sans-serif;
}
body.ev-wallet .ev-glow,body.ev-wallet .ev-pulse,body.ev-wallet .ev-event-react,body.ev-wallet .ev-eyebrow .ev-dot,body.ev-wallet .ev-eyebrow-state{display:none !important}
body.ev-wallet .wl-ended .ev-eyebrow-state{display:inline-block !important}

/* ---------- ribbon ---------- */
.wl-rib{background:#16111C; color:#fff; overflow:hidden; white-space:nowrap; border-bottom:3px solid #E5383B}
.wl-rib div{display:inline-flex; animation:wlMq 38s linear infinite}
.wl-rib span{font:600 .74rem 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase; padding:11px 28px}
.wl-rib span::after{content:"\2726"; color:#FF6B6B; margin-left:56px}
@keyframes wlMq{to{transform:translateX(-50%)}}

/* ---------- hero ---------- */
body.ev-wallet .ev-hero{padding:0; background:none}
body.ev-wallet .ev-hero-grid{max-width:1180px; margin:0 auto; padding:44px 32px 30px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:64px; align-items:center}
body.ev-wallet .ev-hero-text{order:1; display:flex; flex-wrap:wrap; align-items:center; gap:24px 8px; min-width:0}
body.ev-wallet .ev-hero-text > *{flex:0 0 100%; animation:none}
body.ev-wallet .ev-hero-text > .ev-eyebrow,body.ev-wallet .ev-hero-text > .ev-badges{flex:0 0 auto}
body.ev-wallet .ev-eyebrow{margin:0}
body.ev-wallet .ev-eyebrow-cat{display:inline-block; font:600 .68rem 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; padding:6px 11px; border:1px solid currentColor; border-radius:99px; color:#B91C1C}
body.ev-wallet .wl-ended .ev-eyebrow-state{font:600 .68rem 'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; padding:6px 11px; border-radius:99px; background:#16111C; color:#fff; margin-left:8px}
body.ev-wallet .ev-badges{display:flex; gap:8px; margin:0}
body.ev-wallet .ev-badge{font:600 .68rem 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; padding:6px 11px; border-radius:99px; border:1px solid transparent}
body.ev-wallet .ev-badge-online{background:#E5383B; color:#fff}
body.ev-wallet .ev-badge-free{background:#E8F6EC; color:#1B7A3D; border-color:#BDE5C8}
body.ev-wallet .ev-title{font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:clamp(2.1rem,4.8vw,4rem); font-weight:800; line-height:1.02; letter-spacing:-.04em; margin:0; text-wrap:balance; color:#16111C}
/* organizer: initials, "Organized by" label, name with the verified seal, share button on the same line */
body.ev-wallet .ev-org-row{display:flex; align-items:center; gap:12px; margin:0; padding:22px 0 0; border:0; border-top:1px solid #DAD5E2; width:100%; max-width:420px; color:#4A4455}
body.ev-wallet .ev-org-row .ev-avatar{display:inline-flex; width:40px; height:40px; font-size:.8rem; font-weight:700}
body.ev-wallet .ev-org-sub,body.ev-wallet .ev-org-row [data-ev-follow]{display:none}
body.ev-wallet .ev-org-info{flex:1; min-width:0; display:block}
body.ev-wallet .ev-org-lab{display:block; font:600 .64rem 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:#6B6577; margin-bottom:2px}
body.ev-wallet .ev-org-name{display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px}
body.ev-wallet .ev-org-name,body.ev-wallet .ev-org-name a{font-weight:800; color:#B91C1C; text-decoration:none}
body.ev-wallet .ev-org-name a:hover{text-decoration:underline}
body.ev-wallet .ev-verified{display:inline-flex; align-items:center; color:#1D9BF0}
body.ev-wallet .ev-org-share{flex:none; margin-left:auto}

/* countdown: "Starts in" label, then one dark bar of four equal sections (the cells are built by event-motion.js) */
body.ev-wallet .ev-cd{order:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; width:100%; max-width:420px; margin:0; animation:none}
body.ev-wallet .ev-cd::before{content:"Starts in"; grid-column:1 / -1; margin-bottom:10px; font:600 .64rem 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:#6B6577}
body.ev-wallet .ev-cd-u{display:grid; justify-items:center; gap:8px; min-width:0; padding:16px 4px 12px; background:#16111C; border:0; border-left:1px solid rgba(255,255,255,.12); border-radius:0; box-shadow:none; color:#fff}
body.ev-wallet .ev-cd-u:first-child{border-left:0; border-radius:16px 0 0 16px}
body.ev-wallet .ev-cd-u.is-sec{background:#E5383B; color:#fff; border-radius:0 16px 16px 0}
body.ev-wallet .ev-cd-u b{position:static; display:block; width:auto; height:auto; margin:0; border-radius:0; background:none; box-shadow:none; overflow:visible; font:600 2rem/1 'JetBrains Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; color:#fff}
body.ev-wallet .ev-cd-u b::after{display:none}
body.ev-wallet .ev-cd-u b span{display:block; animation:wlFlip .5s var(--wl-ease)}
body.ev-wallet .ev-cd-u small{font:600 .58rem 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62)}
body.ev-wallet .ev-cd-u.is-sec small{color:rgba(255,255,255,.88)}
@keyframes wlFlip{from{transform:rotateX(-90deg); opacity:0}to{transform:none; opacity:1}}

body.ev-wallet .ev-actions{margin:0; justify-content:flex-start}
body.ev-wallet .ev-actions:not(:has(.ev-btn, .ev-event-react, .ev-icons)){display:none}
body.ev-wallet .ev-actions .ev-grow{display:none}
body.ev-wallet .ev-icon-btn{width:42px; min-width:42px; height:42px; padding:0; border-radius:12px; background:#fff; border:1px solid #CFCAD8; color:#16111C}
body.ev-wallet .ev-icon-btn:hover{border-color:#16111C; transform:none}

/* poster: tilted, straightens on hover */
body.ev-wallet .ev-cover{order:2; justify-self:end; display:flex; justify-content:center; width:100%; max-width:340px; border-radius:0; animation:none; cursor:zoom-in}
body.ev-wallet .ev-cover img{display:block; width:auto; max-width:100%; height:auto; max-height:480px; aspect-ratio:auto; object-fit:contain; border-radius:0; box-shadow:none; transform:none; transition:none; animation:none}
body.ev-wallet .ev-cover:hover img{transform:none}
body.ev-wallet .ev-cover-fallback{aspect-ratio:4/5; border-radius:0}
body.ev-wallet .ev-shine{display:none}

@keyframes wlPop{from{opacity:0; transform:translateY(30px) scale(.96)}}

/* ---------- the grid of cards ---------- */
body.ev-wallet .wl-bento{max-width:1180px; margin:0 auto; padding:20px 32px 40px; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; grid-auto-flow:dense}
body.ev-wallet .wl-s4{grid-column:span 4}
body.ev-wallet .wl-s5{grid-column:span 5}
body.ev-wallet .wl-s7{grid-column:span 7}
body.ev-wallet .wl-s8{grid-column:span 8}
body.ev-wallet .wl-card{margin:0; padding:26px; background:#fff; border:1px solid #E3E0E9; border-radius:20px; transform-style:preserve-3d; transition:box-shadow .4s var(--wl-ease)}
body.ev-wallet .wl-card .ev-h2{font:800 1.25rem/1.2 'Plus Jakarta Sans',system-ui,sans-serif; letter-spacing:-.02em; margin:0 0 16px; color:inherit}
body.ev-wallet .ev-about .about-text{font-size:15px; line-height:1.65; font-weight:500; color:#3E3848; max-width:64ch}

/* From card: solid red */
body.ev-wallet .ev-side{display:block; min-width:0}
body.ev-wallet .mq-from{height:100%; background:linear-gradient(150deg,#E5383B,#B91C1C); color:#fff; border:0; border-radius:20px; padding:26px}
body.ev-wallet .mq-from-l{display:block; font-size:.7rem; font-weight:800; letter-spacing:.14em; color:#fff; opacity:.8}
body.ev-wallet .mq-from-p{display:block; margin:8px 0 18px; font:800 2.6rem/1 'Plus Jakarta Sans',system-ui,sans-serif; letter-spacing:-.03em; color:#fff}
body.ev-wallet .mq-buy{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 26px; border-radius:14px; background:#fff; color:#B91C1C !important; font-weight:800; font-size:1rem; text-decoration:none; transition:background .25s}
body.ev-wallet .mq-buy::after{content:"\2192"; transition:transform .35s var(--wl-ease)}
body.ev-wallet .mq-buy:hover{background:#FFE9E9}
body.ev-wallet .mq-buy:hover::after{transform:translateX(6px)}
.wl-rp{position:absolute; border-radius:50%; background:rgba(229,56,59,.28); transform:scale(0); animation:wlRp .6s ease-out forwards; pointer-events:none}
@keyframes wlRp{to{transform:scale(4); opacity:0}}
body.ev-wallet .ev .ended-panel{border-radius:20px; height:100%}

/* facts */
body.ev-wallet .wl-fk{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
body.ev-wallet .wl-fk > div{display:flex; gap:12px; align-items:flex-start; min-width:0}
body.ev-wallet .wl-bx{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:none; background:#FDEDED; color:#E5383B}
body.ev-wallet .wl-fk small{display:block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6577}
body.ev-wallet .wl-fk b{display:block; font-weight:800; line-height:1.3}
body.ev-wallet .wl-fk em{display:block; font-style:normal; font-size:.82rem; color:#6B6577; margin-top:2px}

/* tickets, venue, your ticket */
body.ev-wallet .mq-rows{list-style:none; margin:0; padding:0; display:grid; gap:10px}
body.ev-wallet .mq-rows li{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px; border-radius:14px; background:#F2F1F5; border:1px solid #E3E0E9; transition:border-color .3s, transform .3s var(--wl-ease)}
body.ev-wallet .mq-tn{font-size:.9rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:#16111C}
body.ev-wallet .mq-tn em{font-style:normal; margin-left:8px; font-size:.7rem; padding:2px 8px; border-radius:6px; background:#E3E0E9; color:#6B6577; text-transform:none}
body.ev-wallet .mq-tp{font:700 1rem 'JetBrains Mono',ui-monospace,monospace; white-space:nowrap; color:#16111C}
body.ev-wallet .mq-note{margin:12px 0 0; font-size:.82rem; color:#6B6577}
body.ev-wallet .mq-card{border-radius:14px; background:#F2F1F5; border:1px solid #E3E0E9}
body.ev-wallet .mq-venue{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px}
body.ev-wallet .mq-venue b{display:block; font-size:1.05rem; color:#16111C}
body.ev-wallet .mq-venue span{display:block; font-size:.84rem; color:#6B6577; margin-top:2px}
body.ev-wallet .mq-venue a{font-size:.8rem; font-weight:800; letter-spacing:.08em; color:#B91C1C; text-decoration:none}
body.ev-wallet .mq-venue a:hover{text-decoration:underline}
body.ev-wallet .wl-dark{background:#16111C; border-color:#16111C; color:#fff}
body.ev-wallet .wl-dark .mq-card{background:transparent; border:0}
body.ev-wallet .mq-how > div{display:flex; gap:14px; align-items:flex-start; padding:14px 0}
body.ev-wallet .mq-how > div + div{border-top:1px solid rgba(255,255,255,.14)}
body.ev-wallet .mq-ic{width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; background:rgba(229,56,59,.2); color:#FF8A8A}
body.ev-wallet .mq-how p{margin:0; font-size:.88rem; color:rgba(255,255,255,.7)}
body.ev-wallet .mq-how b{display:block; font-size:.95rem; color:#fff}
body.ev-wallet .mq-how a{color:#FF8A8A; font-weight:800; text-decoration:none}
body.ev-wallet .mq-how a:hover{text-decoration:underline}

/* extras and reviews, below the grid */
body.ev-wallet .wl-extra-wrap{max-width:1180px; margin:0 auto; padding:0 32px 60px}
body.ev-wallet .wl-extra:not(:has(section)){display:none}
body.ev-wallet .wl-extra .ev-section{margin:0 0 16px; padding:26px; background:#fff; border:1px solid #E3E0E9; border-radius:20px}

/* ---------- ticket panel: a side drawer instead of a card ---------- */
@media (min-width:921px){
  body.ev-wallet .ev-stub-wrap{position:static; filter:none; animation:none}
  body.ev-wallet .buy-panel.ev-stub{position:fixed; top:0; right:0; bottom:0; left:auto; width:min(440px,100%); z-index:80; overflow-y:auto; border-radius:0; border:0; border-left:1px solid rgba(255,255,255,.14);
    -webkit-mask:none; mask:none; transform:translateX(100%); visibility:hidden; transition:transform .45s cubic-bezier(.16,.84,.24,1), visibility 0s linear .45s}
  body.ev-wallet.ticket-sheet-open .buy-panel.ev-stub,body.ev-wallet .buy-panel.ev-stub:target{transform:none; visibility:visible; transition:transform .45s cubic-bezier(.16,.84,.24,1), visibility 0s}
  body.ev-wallet.ticket-sheet-open{overflow:hidden}
  body.ev-wallet .sheet-close{display:flex; color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2)}
  body.ev-wallet .ev-stub-top{height:auto; padding-top:30px; padding-bottom:20px}
}

/* ---------- tablet and phone ---------- */
@media (max-width:920px){
  body.ev-wallet .mq-from{display:none}
  body.ev-wallet .ev-side{grid-column:1 / -1}
  body.ev-wallet .ev-side:not(:has(.ended-panel)){display:contents}
}
@media (max-width:900px){
  body.ev-wallet .ev-hero-grid{grid-template-columns:minmax(0,1fr); gap:34px; padding:34px 16px 20px}
  body.ev-wallet .ev-cover{max-width:300px; justify-self:center}
  body.ev-wallet .ev-cover img{max-height:420px}
  body.ev-wallet .wl-bento{padding:16px 16px 30px}
  body.ev-wallet .wl-extra-wrap{padding:0 16px 40px}
  body.ev-wallet .wl-s5,body.ev-wallet .wl-s7,body.ev-wallet .wl-s8{grid-column:span 12}
  body.ev-wallet .ev-cd-u b{font-size:1.7rem}
}
@media (max-width:560px){
  body.ev-wallet .wl-fk{grid-template-columns:1fr}
  body.ev-wallet .ev-cd-u{padding:14px 2px 10px}
  body.ev-wallet .ev-cd-u b{font-size:1.5rem}
  body.ev-wallet .ev-cd-u small{font-size:.5rem}
}
@media (prefers-reduced-motion:reduce){
  .wl-rib div{animation:none}
  body.ev-wallet .wl-card,body.ev-wallet .ev-side,body.ev-wallet .ev-cover img,body.ev-wallet .ev-cd-u b span{animation:none}
}

/* Tickets card: payment logos */
body.ev-wallet .mq-pay{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:14px; font-size:.82rem; color:#6B6577}
body.ev-wallet .mq-pay .pay-badge{height:42px; padding:0; border-radius:10px; box-shadow:none}
body.ev-wallet .mq-pay .pay-logo{height:42px; width:auto; max-width:none}
body.ev-wallet .mq-pay .pay-badge:hover{transform:translateY(-2px); box-shadow:0 12px 20px -14px rgba(22,17,28,.5)}
body.ev-wallet .mq-pay-or{font-weight:700; color:#6B6577}