/* ═══ Show page (clean-show-*.html) ═══ */
.ico{width:19px;height:19px;stroke:var(--a);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* Top area: old_single.html's soft colour spots on white (yellow, pink, blue, green) with the floating stars around the banner; fades to white */
.hero--show{padding:28px 0 90px;margin-bottom:-60px;overflow:hidden;
  background:
    radial-gradient(420px 300px at 82% 0%,rgba(255,210,63,.35),transparent 70%),
    radial-gradient(520px 340px at 60% 30%,rgba(236,30,121,.20),transparent 70%),
    radial-gradient(460px 320px at 30% 10%,rgba(28,117,188,.14),transparent 70%),
    radial-gradient(420px 300px at 10% 60%,rgba(43,182,115,.14),transparent 70%),
    #fff}
.hero--show::after{content:"";position:absolute;inset-inline:0;bottom:0;height:150px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 85%);pointer-events:none}   /* the spots melt into the page: no hard line under the banner */
.hero--show .f-star.s3{bottom:32%;inset-inline-start:8%}
.banner{position:relative;z-index:1;max-width:1380px;margin:0 auto;padding:0 24px}
.banner img{width:100%;border-radius:20px;aspect-ratio:2048/780;object-fit:cover}
.banner.banner--poster img{aspect-ratio:auto;max-height:520px;width:auto;margin:0 auto;object-fit:contain}
.show-page .fade{display:none}
.show-page .layout{padding-top:8px;position:relative;z-index:1}   /* above the hero's fade, which overlaps the page by 60px */
.show-head h1{font-weight:900;line-height:1.12;margin:0 0 16px;font-size:clamp(30px,3.6vw,44px)}
.show-head .facts li{background:var(--soft)}
.facts{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.facts li{display:flex;gap:9px;align-items:center;font-size:16px;font-weight:600;line-height:1.4;background:rgba(255,255,255,.88);border-radius:999px;padding:8px 18px;width:max-content}
.facts .ico{width:17px;height:17px;flex:none}
.facts li span[dir="ltr"]{unicode-bidi:embed}
.btn{display:inline-block;border:none;cursor:pointer;font-family:inherit;text-align:center;background:var(--a);color:var(--ink);font-weight:700;font-size:17px;border-radius:var(--pill);padding:13px 32px;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--brand) 85%,#000)}
section{scroll-margin-top:92px}
/* Section headings: the homepage's (Heebo 800 + the short yellow bar) */
.show-page h2{position:relative;display:table;font-weight:800;font-size:26px;line-height:1.15;margin:0 0 22px;padding:0 0 5px}
.show-page h2::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:74px;height:3px;border-radius:2px;background:var(--pink)}

/* Phone-only pieces (the clubs button, the filter row + count line over the table): hidden on desktop */
.perk-btn,.dh,.sf-row{display:none}
tr.f-out{display:none!important}
/* the drawer (MisgavUI.openDrawer): a bottom sheet with a title; used on phones for the clubs */
.drw{position:fixed;inset:0;z-index:120}
.drw[hidden]{display:none}
.drw-bd{position:absolute;inset:0;background:rgba(6,0,37,.5);opacity:0;transition:opacity .25s}
.drw-p{position:absolute;inset-inline:0;bottom:0;max-height:86vh;background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.3);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.drw.on .drw-bd{opacity:1}.drw.on .drw-p{transform:none}
.drw-p::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:#d6d8e4;margin:8px auto 0;flex:none}
.drw-h{display:flex;align-items:center;gap:10px;padding:8px 16px 10px;flex:none}
.drw-h b{flex:1;font-size:20px;font-weight:900}
.drw-h .sh-x{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--soft);color:var(--ink);font-size:17px;flex:none;padding:0}
.drw-c{overflow:auto;padding:0 16px calc(28px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.drw-c .perk-note{font-size:14.5px;color:var(--ink-dim);margin:0 0 12px}
.drw-c .perks-list .perk{min-height:0;padding:10px 12px}
.drw-c .perks-list .perk-logo{width:72px;height:72px}
.drw-c .perks-list .perk-logo img{max-width:60px;max-height:58px}

/* Dates table */
.tbl-wrap{border:none;border-radius:0;overflow:visible;background:none;margin:-12px 0}
.tbl-wrap table{width:100%;border-collapse:separate;border-spacing:0 12px;font-size:16px}
.tbl-wrap thead{display:none}
.tbl-wrap tbody tr{cursor:pointer}
.tbl-wrap tbody tr.sold{cursor:default}
.tbl-wrap tbody td{padding:18px 16px;vertical-align:middle;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .15s}
.tbl-wrap tbody td:first-child{border-start-start-radius:16px;border-end-start-radius:16px;border-inline-start:1px solid var(--line);padding-inline-start:22px}
.tbl-wrap tbody td:last-child{border-start-end-radius:16px;border-end-end-radius:16px;border-inline-end:1px solid var(--line);padding-inline-end:22px}
.tbl-wrap tbody tr:hover td{background:var(--a-tint)}
.tbl-wrap tbody tr.sold:hover td{background:#fff}
.tbl-wrap tbody tr.hl td{background:color-mix(in srgb,var(--a) 12%,#fff);border-color:color-mix(in srgb,var(--a) 30%,#fff)}
td.city{font-weight:700;font-size:17px;white-space:nowrap}
td.city .venue-sub{display:block;font-weight:400;font-size:16px;color:var(--ink-dim);white-space:normal}
td.when{position:relative;white-space:nowrap;width:128px;text-align:center;background:color-mix(in srgb,var(--a) 6%,#fff);border-inline-end:1px dashed color-mix(in srgb,var(--a) 32%,#fff)}
td.when::before,td.when::after{content:"";position:absolute;inset-inline-end:-9px;width:18px;height:10px;background:#fff;border:1px solid var(--line);z-index:1}
td.when::before{top:-1px;border-top:none;border-radius:0 0 10px 10px}
td.when::after{bottom:-1px;border-bottom:none;border-radius:10px 10px 0 0}
tr.sold td.when{background:#f5f5f7;border-inline-end-color:#e3e4ea}
tr.sold td.when .d-day,tr.sold td.when .d-date,tr.sold td.when .d-time{color:#9a9daa}
td.when .d-day{display:block;color:var(--a-dark);font-weight:700;font-size:15px;line-height:1}
td.when .d-date{display:block;font-size:27px;font-weight:800;line-height:1;margin:6px 0}
td.when .d-time{display:block;color:var(--a-dark);font-weight:700;font-size:15px;line-height:1}
td.act{text-align:left;white-space:nowrap}
.row-buy{display:inline-block;text-decoration:none;font-size:16px;font-weight:700;color:var(--ink);background:var(--a);border-radius:var(--pill);padding:7px 20px;transition:background .15s,transform .15s}
.row-buy:hover{background:color-mix(in srgb,var(--brand) 85%,#000);transform:translateY(-1px)}
.tbl-note{color:var(--ink-dim);font-size:16px;margin-top:12px}
.more-dates{display:block;margin:16px auto 8px;font:inherit;font-weight:700;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:10px 28px;cursor:pointer;transition:border-color .15s}
.more-dates:hover{border-color:var(--a)}
}

/* No dates yet: message + updates signup (same contract as tzelner) */
.nd{background:color-mix(in srgb,var(--pink) 14%,#fff);border:1.5px dashed color-mix(in srgb,var(--pink) 55%,#fff);border-radius:16px;padding:22px 24px}
.nd-msg{font-weight:800;font-size:18px;margin:0 0 12px}
.nd-form{display:grid;grid-template-columns:1fr 1.4fr auto;gap:10px;align-items:center}
.nd-form input{font:inherit;font-size:16px;border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;background:#fff;color:var(--ink);text-align:right}
.nd-form input:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 15%,transparent)}
.nd-form button{background:var(--pink);color:var(--ink);border:none;font:inherit;font-weight:800;font-size:16px;border-radius:999px;padding:11px 24px;white-space:nowrap}
.nd-form button:disabled{opacity:.6}
.nd-hp{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nd-out{grid-column:1/-1;margin:0;font-size:15px;color:var(--dim);min-height:1.2em}
.nd-out.ok{color:#1d8a4c;font-weight:700}
.nd-out.bad{color:#c3403a;font-weight:700}
@media (max-width:700px){.nd-form{grid-template-columns:1fr}}

/* About / know / trailer / credits */
.desc p{max-width:60em;margin-bottom:12px}
.know{border-top:1px solid var(--line);margin-top:18px;padding-top:15px;max-width:46em}
.know b{display:block;font-size:16px;color:var(--ink);margin-bottom:9px}
.know ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.know li{display:flex;gap:9px;align-items:flex-start;font-size:16px;line-height:1.5}
.k-ico{width:16px;height:16px;flex:none;margin-top:4px;stroke:var(--a);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.credits{display:grid;gap:8px;font-size:16px;padding:0;margin:18px 0 0;list-style:none}
.credits b{color:var(--a-dark);font-weight:700}
.trailer-box{position:relative;aspect-ratio:16/9;max-width:820px;border-radius:20px;overflow:hidden;background:#000}
.trailer-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Layout + side column (perks) */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 387px;grid-template-areas:"main side";gap:44px;padding-top:40px}
.layout > main{grid-area:main;min-width:0}
.layout > aside{grid-area:side}
.layout main section{padding:0 0 52px}
.layout main section.show-head{padding-bottom:32px}
.layout main section#dates{padding-bottom:32px}
#dates > h2{display:none}
.side-stack{position:sticky;top:92px;display:grid;gap:20px}
.side-card{border-radius:20px;padding:24px}
.side-card.perks{background:none;box-shadow:none;padding:0}
.side-card.perks h3{position:relative;width:max-content;font-weight:800;font-size:22px;color:var(--ink);margin-bottom:14px;padding:0 0 5px;display:flex;align-items:center;gap:9px}
.side-card.perks h3::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:74px;height:3px;border-radius:2px;background:var(--pink)}
.side-card.perks h3 .ico{width:20px;height:20px}
.perk{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;min-height:100px;overflow:hidden}
.perk:last-of-type{margin-bottom:0}
.p-txt{flex:1;min-width:0;text-align:right;padding:0}
.p-txt b{display:block;font-size:16px;line-height:1.4}
.p-txt span{display:block;font-size:16px;color:var(--ink-dim);line-height:1.45}
.p-link{display:inline-block;margin-top:4px;font-size:16px;color:var(--ink);font-weight:700;text-decoration:none}
.p-link:hover{text-decoration:underline;translate:-2px 0}
.perk-logo{flex:none;width:88px;height:88px;align-self:center;padding:7px;border-radius:10px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);overflow:hidden}
.perk-logo img{width:auto;height:auto;max-width:74px;max-height:72px;object-fit:contain}

/* More shows */
.more-sec{margin-top:6px}
.more-sec h2{margin:0 auto 22px;font-size:clamp(26px,3vw,36px);text-align:center}
.more-sec h2::after{inset-inline:0;margin:0 auto}
.more{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.m-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 16px rgba(6,0,37,.08);transition:transform .18s,box-shadow .18s}
.m-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(6,0,37,.16)}
.m-card img{width:100%;aspect-ratio:2/3;object-fit:cover}
.m-card b{display:block;padding:12px 16px 14px;font-weight:800;font-size:17px}
.m-card:hover b{color:var(--a-dark)}
.last{padding-bottom:56px}
@media (max-width:960px){
  .layout{grid-template-columns:1fr;grid-template-areas:"main" "side";gap:34px;padding-top:26px}
  .side-stack{position:static}
  .more{grid-template-columns:1fr 1fr}
}
/* ═══ Up to 860px: the date rows as ticket cards, the same card as the homepage list (.hit); the city + date filter over them ═══ */
@media (max-width:860px){
  .dh{display:flex;align-items:center;gap:10px;min-height:24px;margin:0 0 8px;order:0}   /* like the homepage: the count line above the fields */
  .sf-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
  #dates{display:flex;flex-direction:column}
  #dates .sf-row{order:1}
  #dates .tbl-wrap,#dates .nd{order:3}
  #dates .more-dates{order:4}
  .tbl-wrap{margin:0}
  .tbl-wrap table,.tbl-wrap tbody{display:block;width:100%}
  .tbl-wrap table{border-spacing:0}
  .tbl-wrap tbody tr{display:grid;grid-template-columns:78px minmax(0,1fr);grid-template-rows:auto auto;gap:0 14px;padding:0;overflow:hidden;border:0;border-radius:16px;background:#fff;box-shadow:0 4px 16px rgba(6,0,37,.08);margin-bottom:12px}
  .tbl-wrap tbody tr td,.tbl-wrap tbody tr td:first-child,.tbl-wrap tbody tr td:last-child{display:block;border:0;border-radius:0;background:none;padding:0}
  .tbl-wrap tbody tr:hover td{background:none}
  .tbl-wrap tbody tr td.when{grid-column:1;grid-row:1/3;width:auto;position:relative;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:16px 4px 14px;background:#fffcf1;border-inline-end:1px dashed #f0e3b8}
  .tbl-wrap tbody tr td.when::before,.tbl-wrap tbody tr td.when::after{display:none}
  td.when .d-day,td.when .d-date,td.when .d-time{display:block;margin:0;color:#060025}
  td.when .d-day{font-size:14px;font-weight:700}
  td.when .d-date{font-size:22px;font-weight:800;margin:6px 0}
  td.when .d-time{font-size:14px;font-weight:700}
  .tbl-wrap tbody tr td.city{grid-column:2;grid-row:1;padding:14px 0 0;padding-inline-end:14px;white-space:normal;font-size:16.5px;font-weight:800;line-height:1.3}
  td.city .venue-sub{font-size:14px;line-height:1.35;margin-top:3px;color:var(--dim)}
  .tbl-wrap tbody tr td.act{grid-column:2;grid-row:2;padding:10px 0 14px;padding-inline-end:14px;text-align:start;white-space:normal}
  td.act .act-box{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px}
  .row-buy{padding:10px 22px;font-weight:700;font-size:14.5px}
  .tbl-wrap tbody tr.hl td{background:none}
  .tbl-wrap tbody tr.hl td.when{background:#fff3c4}
  .tbl-wrap tbody tr.sold td.when{background:#f5f5f7;border-inline-end-color:#e3e4ea}
  tr.sold td.when .d-day,tr.sold td.when .d-date,tr.sold td.when .d-time{color:#9a9daa}
  .tbl-wrap tbody tr.f-empty td{padding:0}
  tr.f-empty .empty-state{padding:16px;border:1px dashed var(--line);border-radius:14px;color:var(--ink-dim)}
  /* skeleton rows while the filter refreshes */
  .tbl-wrap tbody tr.sk{min-height:112px;pointer-events:none}
  .tbl-wrap tbody tr.sk td{padding:0}
  .tbl-wrap tbody tr.sk td:nth-child(2){grid-column:2;grid-row:1;padding-top:16px}
  .tbl-wrap tbody tr.sk td:nth-child(3){grid-column:2;grid-row:2;padding:12px 0 14px}
  .tbl-wrap tbody tr.sk td.sk-when{grid-column:1;grid-row:1/3;display:block;width:78px;align-self:stretch;background:linear-gradient(90deg,#edeff3 25%,#f8f9fb 45%,#edeff3 65%);background-size:200% 100%;animation:sk 1.1s linear infinite}
  tr.sk .sk-bar{display:block;width:70%;height:16px}
  tr.sk .sk-sub{display:block;width:44%;height:12px;border-radius:6px;margin-top:8px;background:linear-gradient(90deg,#edeff3 25%,#f8f9fb 45%,#edeff3 65%);background-size:200% 100%;animation:sk 1.1s linear infinite}
  tr.sk .sk-btn{display:block;width:150px;height:38px}
}

/* ═══ Phones (≤760px) ═══ */
@media (max-width:760px){
  .hero--show{padding:14px 0 16px;margin-bottom:0;background:#fff}
  .hero--show::after{display:none}
  .banner{padding:0 16px}
  .banner img{border-radius:16px;aspect-ratio:16/7}
  .hero--show .f-star.s3{display:none}
  .show-page .layout{padding-top:0;gap:0}
  .show-head h1{font-size:28px;margin-bottom:12px}
  /* the facts as one soft list instead of stacked pills */
  .facts{flex-direction:column;gap:0;background:#fffcf1;border:1px solid #f5ecd2;border-radius:14px;padding:2px 14px}
  .facts li{width:auto;background:none;border-radius:0;padding:10px 0;border-bottom:1px solid #f5ecd2;font-size:15px}
  .facts li:last-child{border-bottom:0}
  .show-head .facts li{background:none}
  /* the clubs button: opens the drawer; the club logos roll by without end */
  .perk-btn{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;margin-top:12px;padding:10px 12px 12px;border:1.5px solid var(--line);border-radius:14px;background:#fff;text-align:start;font:inherit;color:var(--ink);box-shadow:0 4px 16px rgba(6,0,37,.08);cursor:pointer;overflow:hidden}
  .perk-btn:active{transform:scale(.99);background:#fffbea}
  .perk-btn .pb-row{display:flex;align-items:center;gap:12px}
  .perk-btn .pb-ic{width:42px;height:42px;border-radius:50%;background:var(--pink);color:var(--ink);display:grid;place-items:center;flex:none}
  .perk-btn .pb-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .perk-btn .pb-tx{flex:1;min-width:0}
  .perk-btn .pb-tx b{display:block;font-size:16.5px;font-weight:900;line-height:1.2}
  .perk-btn .pb-tx>span{display:block;font-size:13px;color:var(--ink-dim);margin-top:2px;line-height:1.3}
  .perk-btn .pb-go{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none}
  .perk-btn .pb-go svg{width:18px;height:18px}
  .perk-btn .pb-strip{display:block;overflow:hidden;margin:10px -12px 0;direction:ltr}
  .perk-btn .pb-track{display:flex;gap:6px;width:max-content;animation:pbroll var(--dur,30s) linear infinite}
  .perk-btn .pb-track img{flex:none;width:58px;height:36px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px}
  @keyframes pbroll{from{transform:translateX(calc(-1 * var(--half,0px)))}to{transform:translateX(0)}}
  .layout > aside{display:none}
  .layout main section{padding-bottom:36px}
  .layout main section.show-head{padding-bottom:22px}
  /* about, trailer */
  .know{max-width:none}
  .trailer-box{border-radius:14px}
  /* more shows: a swipe row of posters */
  .more-sec{margin-top:0}
  .more-sec h2{font-size:24px;margin-bottom:14px}
  .more{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .more::-webkit-scrollbar{display:none}
  .m-card{flex:0 0 150px;scroll-snap-align:start;border-radius:16px}
  .m-card:hover{transform:none}
  .m-card b{font-size:14px;line-height:1.3;padding:9px 10px 11px}
  .last{padding-bottom:20px}
  /* the bottom bar back to the dates while no date row is on screen */
  .dbar{position:fixed;inset-inline:0;bottom:0;z-index:110;padding:26px 14px calc(12px + env(safe-area-inset-bottom));pointer-events:none;background:linear-gradient(to top,rgba(255,255,255,.97) 0,rgba(255,255,255,.97) 58%,rgba(255,255,255,0) 100%);transform:translateY(120%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  .dbar.on{transform:none}
  .dbar button{pointer-events:auto;display:flex;align-items:center;gap:12px;width:100%;height:54px;padding:0 14px 0 9px;border:0;border-radius:999px;background:var(--pink);color:var(--ink);font:inherit;font-weight:900;font-size:16px;text-align:start;box-shadow:0 10px 28px rgba(255,206,50,.45),0 0 0 3px rgba(255,255,255,.92)}
  .dbar button:active{background:#edbb21}
  .dbar .db-ic{width:22px;height:22px;flex:none}
  .dbar .db-tx{flex:1;min-width:0;line-height:1.15}
  .dbar .db-tx small{display:block;font-size:12.5px;font-weight:600;color:rgba(6,0,37,.7);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dbar .db-go{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none;animation:dbnudge 1.8s ease-in-out infinite}
  .dbar .db-go svg{width:20px;height:20px;transition:transform .2s}
  @keyframes dbnudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
  .dbar.up .db-go svg{transform:rotate(180deg)}
  body.dbar-on{padding-bottom:84px}
  body.sheet-open .dbar,body.menu-open .dbar,body:has(#cp-modal:not([hidden])) .dbar,body:has(#login-modal:not([hidden])) .dbar{transform:translateY(120%)}
}
@media (prefers-reduced-motion:reduce){.dbar .db-go,.perk-btn .pb-track{animation:none}}