/* TikTik Ticket V2 — staging experiment, product 88334 only. Mobile-first, RTL. */
.tkv2{--tkv2-red:#c9202f;--tkv2-red-dark:#9c1622;--tkv2-ink:#161a20;--tkv2-sub:#5b6472;--tkv2-line:#e6e8ef;--tkv2-bg:#f7f7fa;direction:rtl;text-align:right;font-family:inherit;color:var(--tkv2-ink);max-width:1200px;margin:0 auto;padding-bottom:96px;position:relative;scroll-margin-top:119px}
.tkv2 *{box-sizing:border-box}
.tkv2 a{color:inherit;text-decoration:none}
/* Deep-link fix (plan cosmetic #14, 16-09-2026): #tkv2Root/#tkv2List are real,
   always-rendered anchors — scroll-margin-top keeps them clear of the fixed
   107px header + 12px breathing room instead of landing at scrollY 0 under it.
   #tkv2Form stays unfixed here: it is height:0 until a category is picked, so a
   bare deep link to it has nothing to scroll to yet (reported, not silently
   "fixed" with a fake scroll target). */
#tkv2List{scroll-margin-top:119px}
/* A11y fix (plan §9): visible focus ring on every interactive control, beating
   the theme's own `outline:none` on buttons/pills via the same doubled-ID
   specificity trick used throughout this file. */
#tkv2Root#tkv2Root button:focus-visible,
.tkv2-card:focus-visible{outline:3px solid #1a73e8!important;outline-offset:2px}
/* NEW-4/QA13 fix (16-09-2026): the name/phone/email inputs had NO focus
   indicator at all — v2.css never had an input rule, so the theme's own
   focus reset (`outline:none` on inputs) was the only rule in play. Same
   doubled-ID specificity trick as the button rule above, `!important` to
   beat that reset. */
#tkv2Root#tkv2Root input:focus-visible{outline:3px solid var(--tkv2-red)!important;outline-offset:2px}

/* The theme's own single-product stylesheet forces EVERY plain <button> under
   `.single-product #primary` to a grey, full-width, uppercase 50px pill via
   `!important` (`.single-product #primary button:not(.elementor-button){color:#fff!important;
   font-size:17px!important;width:100%;...;background-color:#94a5ac!important;
   border-color:#94a5ac!important;...}`, plus a second desktop-only rule that
   shrinks the font to 9px). That is the actual cause of the "wireframe grey
   bars" — not missing CSS. Every button rule below is written against
   `#tkv2Root#tkv2Root` (the id repeated once = two ID-selectors of specificity,
   a standard, valid CSS technique) so it always outguns the theme's
   `#primary`-scoped rule regardless of source order, and every contested
   property carries `!important` to also beat the theme's `!important` colors.

   Also hides the theme's own black "subtitle" title bar (`.subtitle.otw_test`,
   printed unconditionally by content-single-product.php before this
   template-part loads, e.g. `<div class="subtitle otw_test"><h1><?php the_title(); ?></h1></div>`)
   so there is exactly one title on the page. `.subtitle` has no competing
   `display` declaration anywhere in the theme stylesheet (verified against
   the compiled style.min.css), so plain `display:none` — no !important —
   is enough; this is the same "second title bar, one h1 kept for SEO"
   pattern content-single-product.php already uses for the `fattal` partner
   variant, just without the visually-hidden h1 (SEO already covered by our
   own <h1 class="tkv2-title">). Scoped safely: this stylesheet is only
   enqueued when TikTik_Ticket_V2::is_gate_open() is true, i.e. only on the
   88334 experiment product, so no other product is affected. */
.subtitle.otw_test{display:none}

#tkv2Root#tkv2Root button{
	width:auto!important;min-width:0;height:auto!important;line-height:normal!important;
	text-transform:none!important;margin:0!important;padding:0!important;
	font-size:16px!important;font-weight:700!important;color:var(--tkv2-ink)!important;
	background-color:#fff!important;border:1.5px solid var(--tkv2-line)!important;
	border-radius:12px!important;cursor:pointer;box-sizing:border-box!important;
}

/* ---------- hero ---------- */
/* plan §4 (16-09-2026): the source hero photo bakes its own stadium-name
   graphic (e.g. "SANTIAGO BERNABEU") across the upper-middle third, right
   where the title used to sit almost unshaded — on some images/breakpoints
   that graphic visually collided with the H1 and the title read as barely
   legible dark-grey-on-sky at 1366px. Fix: darken the WHOLE image uniformly
   (not just a bottom-anchored gradient) so any baked-in graphic recedes
   regardless of where it falls, and add a text-shadow to every hero text
   line as a second, image-independent guarantee of contrast. */
/* Hero: round-4 state restored 18-09-2026 15:40 by owner order (the round-5 redesign was rejected). */
.tkv2-hero{position:relative;border-radius:16px;overflow:hidden;min-height:150px;max-height:180px;background:#0b1220}
.tkv2-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.tkv2-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,20,.55) 0%,rgba(6,10,20,.5) 40%,rgba(6,10,20,.75) 70%,rgba(6,10,20,.96) 100%)}
.tkv2-hero-body{position:relative;z-index:2;padding:14px 16px;color:#fff}
.tkv2-eyebrow{font-size:11px;font-weight:700;opacity:.9;margin-bottom:4px;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.tkv2-title{font-size:22px;font-weight:800;line-height:1.25;margin:0 0 4px;text-shadow:0 2px 8px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.95)}
/* Bug fixed (plan §4, 16-09-2026): the theme's own heading typography for the
   entry-content wrapper (".entry-content h2", specificity 0-1-1) is MORE
   specific than a bare ".tkv2-title" class selector (0-1-0) and was winning at
   every mobile/tablet width, computed color rgb(0,0,0) on the dark hero image
   — verified via getComputedStyle (results.jsonl `7-content.hero_title`).
   Fix: the SAME doubled-ID specificity escape hatch already used for every
   button in this file (#tkv2Root#tkv2Root = 2 ids + 1 class = always wins). */
#tkv2Root#tkv2Root .tkv2-title{color:#fff!important;text-shadow:0 2px 8px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.95)!important}
.tkv2-meta{font-size:13px;opacity:.95;display:flex;flex-wrap:wrap;gap:6px 12px;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.tkv2-meta .warn{opacity:.95;background:rgba(255,255,255,.16);padding:2px 8px;border-radius:20px;font-size:12px;text-shadow:none}

/* ---------- price + qty ---------- */
.tkv2-price-row{margin-top:14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tkv2-from{font-size:26px;font-weight:900;color:var(--tkv2-red)}
.tkv2-from small{font-size:13px;font-weight:700;color:var(--tkv2-sub)}
.tkv2-inclusive{font-size:12px;color:var(--tkv2-sub);margin-top:1px}
/* Owner 18-09-2026: online-only installments benefit, right under the from-price. */
.tkv2-benefit{margin:8px 0 6px;display:inline-flex;align-items:center;gap:8px;max-width:100%;background:#effaf1;border:1px solid #bfe6c8;color:#14532d;border-radius:10px;padding:6px 10px;font-size:13px;font-weight:700;line-height:1.3}
.tkv2-benefit-badge{flex:0 0 auto;background:#15803d;color:#fff;border-radius:6px;padding:1px 6px;font-size:11px;font-weight:800}

.tkv2-qty{margin-top:14px}
.tkv2-qty-label{font-size:13px;font-weight:700;color:var(--tkv2-sub);margin-bottom:8px;display:block}
.tkv2-qty-btns{display:flex;gap:8px;flex-wrap:nowrap}
#tkv2Root#tkv2Root .tkv2-qty-btns button{flex:1 1 0;min-width:0;min-height:44px;max-height:48px;transition:.15s}
#tkv2Root#tkv2Root .tkv2-qty-btns button.active{border-color:var(--tkv2-red)!important;background-color:var(--tkv2-red)!important;color:#fff!important}

/* ---------- lead mode (owner ruling 19-09-2026 night, PART 2) ----------
   Same hero above, the theme's own lead-form partial (.tiktik-ab-wrapper,
   styled by functions.php's own inline CSS — not touched here) sits inside
   this wrapper, then .tkv2-trust (shared rule, already defined below) right
   after it. No new visual language: only the spacing needed to sit correctly
   inside the .tkv2 rhythm, mobile + desktop. */
.tkv2-lead-body{margin-top:16px}
.tkv2-lead-body .tiktik-ab-wrapper{margin:0}
@media(min-width:1024px){
  .tkv2-lead-body{max-width:640px}
}

/* ---------- layout: mobile stacked, desktop 2-col ---------- */
.tkv2-body{margin-top:20px}
.tkv2-cols{display:flex;flex-direction:column;gap:20px}

.tkv2-map-wrap{border:1px solid var(--tkv2-line);border-radius:14px;padding:10px;background:#fff}
.tkv2-map-wrap svg{width:100%;height:auto;display:block;direction:ltr;cursor:pointer}
.tkv2-map--ftn .tkv2-map-canvas{background:radial-gradient(ellipse 42% 38% at 50% 50%,#3d9a4a 0 70%,#2f7a3a 71% 100%)}
.tkv2-map--ftn svg text,.tkv2-map--ftn svg tspan{display:none!important}
.tkv2-map-hint{font-size:12px;color:var(--tkv2-sub);text-align:center;padding-top:6px}
/* #16 fix (16-09-2026, round 2): the brightness/saturate+black-outline attempt
   above was verified on staging to still leave several sections (21/27) hard to
   tell apart from their neighbours — filter:brightness on an already-light fill
   barely moves it, and the outline sits on the group's bounding box, not the
   actual section shape. Fix per spec: a real, strong fill + stroke directly on
   the highlighted section AND its child paths (the engine's SVG groups a
   <g data-id="S_...">-wrapped <path>, and `fill` does not automatically
   cascade onto SVG geometry the way normal CSS properties do onto text) —
   the site red at 55% opacity plus a solid 2px red stroke, so every one of the
   27 sections reads as clearly "selected" regardless of its own base colour. */
/* Paint-fix (19-09-2026 night, QA-london4 Findings 2-3): some stadium SVGs
   encode a seat block as <rect>/<polygon>/<ellipse>/<circle> instead of
   <path> (Selhurst Park's Main Stand/Arthur Wait Stand, scattered Tottenham/
   Villa Park sections) — target the section's shape child generically so
   these blocks highlight/grey exactly like every <path>-based one. */
.tkv2-map-wrap [data-tkv2-highlight="1"]>path,
.tkv2-map-wrap [data-tkv2-highlight="1"]>rect,
.tkv2-map-wrap [data-tkv2-highlight="1"]>polygon,
.tkv2-map-wrap [data-tkv2-highlight="1"]>ellipse,
.tkv2-map-wrap [data-tkv2-highlight="1"]>circle{
	stroke:#111!important;
	stroke-width:2.5px!important;
	opacity:1!important;
	paint-order:stroke;
}
/* Brief flash on top of the thick selection frame above (plan §4, 17-09-2026: "מסגרת עבה + הבהוב קצר"). */
@keyframes tkv2-flash{0%{filter:brightness(2.2)}100%{filter:brightness(1)}}
.tkv2-map-wrap [data-tkv2-highlight="1"].tkv2-flash{animation:tkv2-flash .6s ease}

/* ---------- map colouring by region filter (17-09-2026 plan §2/§3) ---------- */
.tkv2-map-wrap [data-tkv2-region]{transition:opacity .2s ease}
.tkv2-map-wrap [data-tkv2-region].tkv2-dim{opacity:.22}
.tkv2-map-wrap [data-tkv2-empty]{cursor:default;opacity:.55}
.tkv2-map-wrap .tkv2-region-text{cursor:pointer}
.tkv2-map-wrap .tkv2-region-text tspan{transition:fill .15s ease}
.tkv2-map-wrap .tkv2-region-text.active tspan{fill:var(--tkv2-red)!important;font-weight:900}
.tkv2-map-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding-top:6px}
.tkv2-map-row .tkv2-map-hint{padding-top:0;flex:1 1 auto;text-align:start}
#tkv2Root#tkv2Root .tkv2-region-reset{width:auto!important;min-height:32px;padding:0 12px!important;font-size:12px!important;font-weight:700!important;color:var(--tkv2-red)!important;border-color:var(--tkv2-red)!important;background:#fff!important;flex:0 0 auto}
.tkv2-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--tkv2-line)}
.tkv2-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tkv2-sub)}
.tkv2-legend-dot{width:11px;height:11px;border-radius:50%;flex:0 0 11px}

/* ---------- category list ---------- */
.tkv2-list-head{font-size:15px;font-weight:800;margin:4px 0 10px}
.tkv2-list{display:flex;flex-direction:column;gap:8px}
.tkv2-card{display:flex;align-items:center;gap:10px;min-height:64px;border:1.5px solid var(--tkv2-line);border-radius:14px;padding:0 14px;cursor:pointer;background:#fff;transition:.15s}
.tkv2-card:hover{border-color:#c9ccd8}
.tkv2-card.selected{border-color:var(--tkv2-red);background:#fdf1f1;box-shadow:0 0 0 2px rgba(201,32,47,.12)}
.tkv2-dot{width:14px;height:14px;border-radius:50%;flex:0 0 14px}
.tkv2-card-main{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;overflow:visible;row-gap:2px}
.tkv2-card-cat{flex:1 1 auto;min-width:0;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tkv2-card-avail{font-size:11px;color:var(--tkv2-red);font-weight:700;white-space:nowrap;flex:0 0 auto}
/* At narrow widths the category gets its own full-width line (free to wrap,
   no ellipsis); the small availability badge may sit underneath. */
@media (max-width:480px){
  .tkv2-card{padding:10px 14px;align-items:flex-start}
  .tkv2-card-main{flex-wrap:wrap;align-items:flex-start;row-gap:2px}
  .tkv2-card-cat{white-space:normal;overflow:visible;text-overflow:clip;flex-basis:100%}
  .tkv2-card-avail{flex-basis:auto}
}
.tkv2-card-price{text-align:left;flex:0 0 auto;padding-inline-start:6px}
.tkv2-card-unit{font-weight:900;font-size:15px;color:var(--tkv2-red);white-space:nowrap}
.tkv2-card-total{font-size:11px;color:var(--tkv2-sub);white-space:nowrap}
.tkv2-card-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--tkv2-line);flex:0 0 20px}
.tkv2-card.selected .tkv2-card-radio{border-color:var(--tkv2-red);background:radial-gradient(circle,var(--tkv2-red) 0 6px,#fff 7px)}

/* ---------- "יושבים ביחד" badge (plan §1, 17-09-2026) ---------- */
.tkv2-card-together{font-size:10px;font-weight:700;color:#fff;background:var(--tkv2-ink);border-radius:20px;padding:1px 7px;margin-inline-start:6px;white-space:nowrap;vertical-align:middle}

#tkv2Root#tkv2Root .tkv2-expander{display:block;width:100%!important;min-height:44px;margin-top:2px!important;background-color:var(--tkv2-bg)!important;border:1.5px dashed var(--tkv2-line)!important;color:var(--tkv2-sub)!important;font-weight:700!important;font-size:13px!important;border-radius:12px!important}

/* ---------- trust ---------- */
/* Owner 18-09-2026: certainty first and big, reviews line with a link, company line last.
   20-09-2026: purchase-mode box is the in-flow sibling immediately above #tkv2Sticky
   (chrome unchanged). Never position:fixed — map/list stay visible. Lead-mode box
   still follows .tkv2-lead-body and is untouched. */
.tkv2-trust{margin-top:16px;display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--tkv2-sub);background:#fff;border:1.5px solid #bfe6c8;border-radius:12px;padding:14px 16px}
.tkv2-list-col > .tkv2-trust{margin-top:0;margin-bottom:12px}
.tkv2-trust span{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tkv2-trust-main{font-size:17px;font-weight:800;color:#14532d;line-height:1.3}
.tkv2-trust-main::before{content:"✓";flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#15803d;color:#fff;font-size:14px;font-weight:900}
.tkv2-trust-reviews{font-weight:600;color:var(--tkv2-ink)}
#tkv2Root#tkv2Root .tkv2-trust-link{color:var(--tkv2-red)!important;font-weight:800;text-decoration:underline;white-space:nowrap}

/* ---------- form ---------- */
.tkv2-form{margin-top:18px;border:1px solid var(--tkv2-line);border-radius:14px;padding:16px;background:#fff;display:none}
.tkv2-form.open{display:block}
.tkv2-form h3{margin:0 0 12px;font-size:15px}
.tkv2-field{margin-bottom:12px}
.tkv2-field label{font-size:12px;color:var(--tkv2-sub);display:block;margin-bottom:4px}
.tkv2-field input[type=text],.tkv2-field input[type=tel],.tkv2-field input[type=email]{width:100%;min-height:48px;border:1.5px solid var(--tkv2-line);border-radius:10px;padding:0 12px;font-size:15px}
.tkv2-field input.err{border-color:var(--tkv2-red)}
.tkv2-err{color:var(--tkv2-red);font-size:12px;margin-top:4px;display:none}
.tkv2-err.show{display:block}
.tkv2-hint{color:var(--tkv2-sub);font-size:12px;margin-top:4px;display:none}
.tkv2-hint.show{display:block}
/* Coupon (owner request 18-09-2026): the input reuses .tkv2-field input[type=text]
   above as-is (no new rule needed); this only lays the input + apply button out in
   a row and gives the button (already styled by the #tkv2Root#tkv2Root button base
   rule, i.e. the same white/bordered secondary look used everywhere else) a height
   that matches the 48px input. No new colour is introduced anywhere in this block. */
.tkv2-coupon-row{display:flex;gap:8px;align-items:stretch}
.tkv2-coupon-row input{flex:1 1 auto;min-width:0}
#tkv2Root#tkv2Root .tkv2-coupon-apply{flex:0 0 auto;min-height:48px;padding:0 18px!important;white-space:nowrap}
.tkv2-terms{display:flex;align-items:flex-start;gap:8px;font-size:13px;margin:10px 0}
.tkv2-terms a{color:var(--tkv2-red);text-decoration:underline}
#tkv2Root#tkv2Root .tkv2-submit{display:block;width:100%!important;min-height:52px;background-color:var(--tkv2-red)!important;color:#fff!important;border:none!important;font-weight:800!important;font-size:16px!important;margin-top:6px!important}
#tkv2Root#tkv2Root .tkv2-submit[disabled]{opacity:.6;cursor:not-allowed}
.tkv2-submit .tkv2-lock{margin-inline-end:6px}
.tkv2-date-policy{font-size:12px;line-height:1.45;margin-top:8px;max-width:680px;text-shadow:0 1px 3px rgba(0,0,0,.9)}
/* Site's date-final flag (18-09-2026): final = green check, tentative = amber dot. */
.tkv2-date-policy.is-final::before{content:"¹3";display:inline-block;width:16px;height:16px;line-height:16px;text-align:center;border-radius:50%;background:#15803d;color:#fff;font-size:11px;font-weight:900;margin-inline-end:6px;text-shadow:none;vertical-align:1px}
.tkv2-date-policy.is-tentative::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#f59e0b;margin-inline-end:6px;vertical-align:1px}
/* Owner 18-09-2026 ("הקיטוב בפנים יכול להיות הרבה יותר יפה"): title / date /
   chips (category, qty) / total row — instead of five loose grey lines. */
.tkv2-order-summary{background:var(--tkv2-bg);border:1px solid var(--tkv2-line);border-radius:12px;display:block;margin:14px 0 10px;padding:14px}
.tkv2-os-title{display:block;font-size:17px;font-weight:800;line-height:1.3;color:var(--tkv2-ink)}
.tkv2-os-date{display:block;color:var(--tkv2-sub);font-size:13px;margin-top:2px}
.tkv2-os-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tkv2-os-chips:not(:has(.tkv2-os-chip:not(:empty))){display:none}
.tkv2-os-chip{background:#fff;border:1px solid var(--tkv2-line);border-radius:20px;padding:4px 10px;font-size:13px;font-weight:700;color:var(--tkv2-ink)}
.tkv2-os-chip:empty{display:none}
#tkv2SummaryTotal{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:6px;border-top:1px solid var(--tkv2-line);margin-top:12px;padding-top:10px;color:var(--tkv2-red);font-size:22px;font-weight:900}
#tkv2SummaryTotal:empty{display:none}
#tkv2SummaryTotal .tkv2-eur{display:inline;margin:0}
.tkv2-os-note{display:block;color:var(--tkv2-sub);font-size:12px;line-height:1.4;margin-top:6px}
.tkv2-handoff-state{background:#f4f6f8;border-radius:10px;color:#303742;font-size:15px;font-weight:700;margin:8px 0;padding:0;text-align:center}
.tkv2-handoff-state.show{padding:12px}
.tkv2-payment-trust{align-items:center;color:var(--tkv2-sub);display:flex;flex-direction:column;font-size:12px;gap:7px;line-height:1.4;margin-top:12px;text-align:center}
.tkv2-payment-secure{color:var(--tkv2-ink);font-weight:700}
.tkv2-card-logos{align-items:center;display:flex;gap:8px;justify-content:center}
.tkv2-card-logos img{height:22px!important;max-width:40px;width:auto!important}
.tkv2-card-logos span{background:#f0f2f5;border-radius:4px;color:#303742;font-size:11px;font-weight:700;padding:3px 6px}
/* NEW-1 fix (16-09-2026): now a standalone banner above #tkv2List (see
   content-tickets-v2.php), not text tucked inside the form, so it survives
   the form being closed by refreshListings() after a 409. */
/* NEW-7 fix (QA13, 16-09-2026): spec calls for a strong red/white alert, not
   the pale-pink "info" tone this used to render as — the 409 banner needs to
   read as an urgent block, not a passive note. Icon added via ::before so the
   JS's plain `el.textContent = msg` (serverError()) never has to know about it. */
.tkv2-server-err{color:#fff;background:#b3282d;border:1px solid #7a1220;border-radius:10px;padding:10px 14px;font-size:15px;font-weight:700;margin-bottom:12px;display:none}
.tkv2-server-err.show{display:block}
.tkv2-server-err.show::before{content:"⚠ ";}
.tkv2-modal-overlay.show{overflow:hidden}
body.tkv2-modal-open{overflow:hidden}

/* ---------- sticky bottom bar ---------- */
/* Compact bar (owner 18-09-2026): was 150px / ~25% of an iPhone screen. Now two short
   lines + a 42px button ≈ 62px. Label and € sit inline with the price; qty is its own line. */
.tkv2-sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--tkv2-line);box-shadow:0 -6px 20px rgba(15,17,21,.08);padding:8px 12px;display:none;align-items:center;justify-content:space-between;gap:10px}
/* !important: a site-wide bootstrap.min.css ships `.show{display:block!important}` which
   stacked the price above the button (measured 18-09-2026). Same-!important, higher
   specificity ⇒ flex wins and the bar is one row. */
.tkv2-sticky.show{display:flex!important}
.tkv2-sticky-total{font-size:15px;font-weight:800;line-height:1.2}
.tkv2-sticky-total small{display:block;font-weight:600;color:var(--tkv2-sub);font-size:11px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tkv2-sticky-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:4px;vertical-align:-1px}
.tkv2-sticky-total .tkv2-eur{display:inline;margin-top:0;margin-inline-start:6px}
#tkv2Root#tkv2Root .tkv2-sticky button{width:auto!important;min-height:42px;padding:0 16px!important;background-color:var(--tkv2-red)!important;color:#fff!important;border:none!important;font-weight:800!important;font-size:14px!important;white-space:nowrap}
#tkv2Root#tkv2Root .tkv2-sticky button[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- terms modal ---------- */
/* N6 fix (16-09-2026): the fixed site header is z-index:995 and the sticky
   bar/WhatsApp float above normal content too — z-index:100 put the modal
   BEHIND both on mobile. 10000 clears every other fixed/sticky layer on the
   page. */
.tkv2-modal-overlay{position:fixed;inset:0;background:rgba(10,12,18,.55);z-index:10000;display:none;align-items:flex-end;justify-content:center}
.tkv2-modal-overlay.show{display:flex!important} /* same bootstrap `.show{display:block!important}` collision as the sticky bar */
.tkv2-modal{background:#fff;border-radius:16px 16px 0 0;max-height:80vh;overflow:auto;width:100%;max-width:600px;padding:20px}
.tkv2-modal h4{margin:0 0 10px}
#tkv2Root#tkv2Root .tkv2-modal-close{display:block;width:100%!important;min-height:48px;background-color:#eee!important;color:var(--tkv2-ink)!important;border:none!important;font-weight:700!important;margin-top:14px!important}

/* ---------- SEO focus mode (plan §1, 16-09-2026) ---------- */
/* Once a category is picked and the form opens, the "אודות המשחק" / info
   cards / stadium / FAQ block collapses behind one muted toggle so the buyer
   is not scrolling past a wall of content while trying to pay. The markup
   itself is never removed from the DOM (still there for SEO/crawlers) — only
   visually collapsed via max-height+overflow, never `display:none`, so a
   crawler that ignores CSS still sees the full text. Scoped to this
   stylesheet only, which loads only on the gated V2 product. */
.tkv2-seo-collapsed{max-height:0;overflow:hidden;opacity:0;margin-top:0!important;margin-bottom:0!important;pointer-events:none;transition:max-height .25s ease,opacity .15s ease}
.tkv2-seo-toggle{display:none}
.tkv2-seo-toggle.show{display:block;width:100%;max-width:900px;margin:14px auto 0;padding:12px 16px;background:#fff;border:1.5px dashed var(--tkv2-line);border-radius:12px;color:var(--tkv2-sub);font-size:13px;font-weight:700;cursor:pointer;text-align:center}

/* ---------- desktop ---------- */
@media (min-width:1024px){
  .tkv2-map-hint{display:none} /* cosmetic fix (finding #6): touch-only hint had no reason to show on desktop */
  .tkv2-cols{flex-direction:row-reverse;align-items:flex-start}
  .tkv2-map-col{flex:0 0 46%;position:sticky;top:128px}
  .tkv2-list-col{flex:1;min-width:0}
  .tkv2-list{flex-wrap:nowrap}
  .tkv2-hero{max-height:none;min-height:220px}
  .tkv2-sticky{left:auto;right:auto;position:sticky;bottom:20px;margin-top:20px;border-radius:14px;border:1px solid var(--tkv2-line)}
}


/* ---------- Package 3: truthful availability + filter-only zoomable map ---------- */
.tkv2-map-wrap{position:relative;overflow:hidden}
.tkv2-map-tools{display:flex;gap:6px;align-items:center;justify-content:flex-start;margin-bottom:8px;direction:rtl}
#tkv2Root#tkv2Root .tkv2-map-tools button{min-height:36px!important;padding:0 11px!important;font-size:14px!important;background:#fff!important}
#tkv2Root#tkv2Root .tkv2-map-tools button:disabled{opacity:.4;cursor:not-allowed}
.tkv2-map-viewport{width:100%;max-width:100%;max-height:70vh;overflow:auto;overscroll-behavior:contain;border-radius:10px;background:#fff}
.tkv2-map-canvas{--tkv2-map-zoom:1;width:calc(100% * var(--tkv2-map-zoom));min-width:100%;transition:width .18s ease}
.tkv2-map-canvas svg{width:100%;height:auto;display:block;direction:ltr;cursor:pointer}
.tkv2-map-selection-label{display:none;margin-top:7px;border:2px solid var(--tkv2-red-dark);border-radius:8px;background:#fff;color:var(--tkv2-red-dark);font-size:13px;font-weight:900;padding:5px 9px;text-align:center}
.tkv2-map-selection-label.show{display:block}
.tkv2-map-wrap:fullscreen{background:#fff;padding:16px;overflow:auto}
.tkv2-map-wrap:fullscreen .tkv2-map-viewport{max-height:none;height:calc(100vh - 86px)}
.tkv2-map-fullscreen-fallback{position:fixed!important;inset:0!important;z-index:10001!important;border-radius:0!important;background:#fff!important;padding:14px!important;overflow:auto!important}
.tkv2-map-fullscreen-fallback .tkv2-map-viewport{max-height:none;height:calc(100vh - 86px)}
/* Region-filter context remains readable while nonmatching zones are muted. */
.tkv2-map-wrap [data-tkv2-region].tkv2-dim{opacity:.66}
/* Selected category keeps its OWN legend colour (owner ruling 18-09-2026: never a
   uniform red). The block stays its category fill; a thick dark frame + full opacity
   makes it pop against the greyed-out neighbours. This CSS layer intentionally does
   NOT set `fill` -- v2.js's highlightMap() now sets it INLINE per pick (paint fix,
   19-09-2026, qa-ftn-colours Finding 1: several stadiums group multiple fine
   categories under one coarse SVG section, so the SVG's own baked default fill is
   not always the picked category's colour -- JS must set the picked row's real
   colour explicitly, and restores the prior fill on deselect/re-pick). Do not add a
   `fill` declaration to this rule -- it would fight the inline style JS sets. */
.tkv2-map-wrap [data-tkv2-highlight="1"]>path,
.tkv2-map-wrap [data-tkv2-highlight="1"]>rect,
.tkv2-map-wrap [data-tkv2-highlight="1"]>polygon,
.tkv2-map-wrap [data-tkv2-highlight="1"]>ellipse,
.tkv2-map-wrap [data-tkv2-highlight="1"]>circle{stroke:#111!important;stroke-width:2.5px!important;opacity:1!important;paint-order:stroke}
.tkv2-map-wrap [data-tkv2-highlight="1"]>text{opacity:1!important}
/* Owner ruling 18-09-2026 (option A): once a category is chosen, every OTHER seat
   block greys out so the selected category (red + dark frame above) is unmistakable.
   Only the section's colour path greys; block-number text stays legible. Reversed by
   removing .tkv2-cat-picked when the selection clears. Coexists with region-dim opacity.
   Paint-fix (19-09-2026 night): generalized to every block shape (see #16 rule above). */
.tkv2-map-wrap.tkv2-cat-picked g.section:not([data-tkv2-highlight="1"])>path,
.tkv2-map-wrap.tkv2-cat-picked g.section:not([data-tkv2-highlight="1"])>rect,
.tkv2-map-wrap.tkv2-cat-picked g.section:not([data-tkv2-highlight="1"])>polygon,
.tkv2-map-wrap.tkv2-cat-picked g.section:not([data-tkv2-highlight="1"])>ellipse,
.tkv2-map-wrap.tkv2-cat-picked g.section:not([data-tkv2-highlight="1"])>circle{fill:#c9c9c4!important}
.tkv2-region-text tspan{font-size:12px!important;font-weight:800}
.tkv2-card.unavailable{cursor:not-allowed;background:#f1f2f4;border-color:#d7d9df;color:#747b86;box-shadow:none;opacity:1}
.tkv2-card.unavailable .tkv2-dot{filter:grayscale(1);opacity:.45}
.tkv2-card.unavailable .tkv2-card-together{background:#8a9099}
.tkv2-card-unavailable{flex-basis:100%;font-size:12px;font-weight:800;color:#676e78}
.tkv2-empty{padding:14px;color:var(--tkv2-sub);font-size:13px;border:1px dashed var(--tkv2-line);border-radius:10px}
#tkv2Root#tkv2Root .tkv2-clear-inline{padding:5px 9px!important;margin-inline-start:6px!important;color:var(--tkv2-red)!important;border-color:var(--tkv2-red)!important;font-size:12px!important}
@media(max-width:480px){
  /* 18-09-2026: overflow guard lives on the map/list body + quantity row, not on the root — the
     root clip cut the widened hero at the root's padding box (measured). Zoom x3 verified: no page overflow. */
  .tkv2{padding-inline:6px;max-width:100%;overflow-x:visible}
  .tkv2-body,.tkv2-qty{overflow-x:clip}
  .tkv2-map-wrap{padding:6px}
  .tkv2-map-col,.tkv2-list-col,.tkv2-cols{min-width:0;max-width:100%}
}


/* ---------- Package 4: comparison currency and compact layout ---------- */
.tkv2-eur{display:block;color:#737985!important;font-size:11px!important;font-weight:600!important;line-height:1.2;margin-top:1px;white-space:nowrap}
.tkv2-ils{font:inherit;color:inherit;white-space:nowrap}
.tkv2-from .tkv2-eur{font-size:12px!important;text-align:start}
.tkv2-card-price .tkv2-eur{text-align:left}
.tkv2-sticky-label{display:inline;color:var(--tkv2-sub);font-size:11px;font-weight:700;margin-inline-end:4px}
#tkv2SummaryTotal>span:first-child{display:block;margin-inline-end:auto;color:var(--tkv2-sub);font-size:13px;font-weight:700}
.tkv2-currency-note{color:var(--tkv2-sub);font-size:11px;line-height:1.35;margin-top:5px}
.tkv2-field input[type=text],.tkv2-field input[type=tel],.tkv2-field input[type=email]{font-size:16px!important}
/* 18-09-2026: the toggle lives OUTSIDE .tkv2 (theme prints .tiktik-seo as a sibling of #tkv2Root),
   so var(--tkv2-red) was undefined there and the theme's grey button skin won (measured live:
   bg rgb(148,165,172), white text, 58px tall — rule `.single-product #primary button:not(...)`
   !important in the theme's style.min.css). Literal colours + an #primary selector to outrank it. */
body.single-product #primary .tkv2-seo-toggle.show,html body .tkv2-seo-toggle.show{display:inline-block!important;width:auto!important;height:auto!important;min-height:0!important;line-height:1.4!important;max-width:none!important;margin:10px 6px 0!important;padding:4px 0!important;background:transparent!important;background-color:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:#c9202f!important;text-decoration:underline!important;font-size:13px!important;font-weight:700!important;text-align:start!important;text-transform:none!important}
body.single-product:has(#tkv2Root) #footer-credit{min-height:0!important;height:auto!important;padding:14px 16px!important;line-height:1.5!important}
@media(max-width:767px){
  /* Owner 18-09-2026: the theme lifts the WhatsApp bubble 176px on every product page (old
     checkout bar). Here it landed on the "1" / the map "+" on a real iPhone. Sit it just above
     the continue bar instead; it is detached anyway once a category is picked. */
  /* Owner 18-09-2026 16:30 ("למתוח עוד קצת אבל לא עד הסוף"): hero side gap 26px -> 12px on phones,
     rounded corners kept. 50% = container width, so the shift equals (gap - 12px) at any phone width. */
  body.single-product:has(#tkv2Root) .tkv2-hero{width:calc(100vw - 24px);margin-inline-start:calc(50% - 50vw + 12px)}
  /* 10px breathing room under the header as PADDING on the root, not margin on the hero: the margin
     collapsed through #tkv2Root/.product-center and exposed a darker strip (measured rgb 206-216 vs
     page 239) between the red header and the hero. Padding keeps the strip on the page grey. */
  body.single-product:has(#tkv2Root) .tkv2{padding-top:10px}
  /* Owner 18-09-2026 16:45: option A — image 65% (was 40%) with a lighter shade, mobile only until the
     desktop level is approved; 10px breathing room under the red header ("כמו מחובר, נחתך"). */
  /* Owner-approved 18-09-2026 17:30 (frontend-design pass): image 80%, text pinned to the bottom over
     the dark part of the gradient, league chip, one meta line, one short policy line. */
  body.single-product:has(#tkv2Root) .tkv2-hero{display:flex;flex-direction:column;justify-content:flex-end}
  body.single-product:has(#tkv2Root) .tkv2-hero img{opacity:.8}
  body.single-product:has(#tkv2Root) .tkv2-hero-shade{background:linear-gradient(180deg,rgba(6,10,20,.18) 0%,rgba(6,10,20,.22) 42%,rgba(6,10,20,.72) 72%,rgba(6,10,20,.94) 100%)}
  body.single-product:has(#tkv2Root) .tkv2-eyebrow{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);border-radius:20px;padding:2px 9px;font-size:11px;margin-bottom:8px;text-shadow:none}
  body.single-product:has(#tkv2Root) #tkv2Root#tkv2Root .tkv2-title{font-size:30px!important;line-height:1.15!important;margin-bottom:6px}
  body.single-product:has(#tkv2Root) .tkv2-meta{font-size:14px;font-weight:600;gap:6px 10px}
  body.single-product:has(#tkv2Root) .tkv2-meta span+span::before{content:"·";margin-inline-end:8px;opacity:.7}
  body.single-product:has(#tkv2Root) .tkv2-date-policy{font-size:11px;opacity:.85;margin-top:6px;line-height:1.35}
  /* 16px, not 64px: measured at a real Safari viewport (390x664) 64px still put it on the map's "+";
     the sticky bar never collides because the bubble is detached the moment a category is picked.
     Purchase mode only (:not(.tkv2--lead)): lead mode has no sticky bar, so the theme's default
     bubble position is left alone there instead of colliding with the lead form's own WhatsApp CTA. */
  body.single-product:has(#tkv2Root:not(.tkv2--lead)) .joinchat{bottom:16px!important}
  body.single-product:has(#tkv2Root) header.header{height:72px!important;min-height:72px!important;padding:3px 16px!important;overflow:visible}
  body.single-product:has(#tkv2Root) .header-spacer{height:72px!important}
  body.single-product:has(#tkv2Root) .header__left{height:38px!important;min-height:38px!important}
  body.single-product:has(#tkv2Root) .header__logo img{height:34px!important;width:auto!important;max-height:34px!important}
  body.single-product:has(#tkv2Root) .header-mobile-reviews{height:28px!important;min-height:0!important;padding:1px 0!important;margin:0!important}
  body.single-product:has(#tkv2Root) .tiktik-header-reviews-badge--mobile{height:26px!important;min-height:0!important;padding:2px 6px!important;font-size:11px!important;border-radius:7px!important}
  body.single-product:has(#tkv2Root) .tiktik-reviews-stars{font-size:11px!important}
  body.single-product:has(#tkv2Root) #primary .entry-content{padding-inline:6px!important;margin-inline:0!important;width:100%!important;max-width:100%!important}
  .tkv2{padding-bottom:24px}
  .tkv2:not(.tkv2--lead){padding-bottom:72px}
}
@media(min-width:1024px){
  body.single-product:has(#tkv2Root) .tiktik-header-reviews-badge--desktop{font-size:11px!important;padding:4px 7px!important;gap:4px!important}
  body.single-product:has(#tkv2Root) .tiktik-reviews-cta{visibility:collapse}
}

/* Date note under the ACF date label (owner 18-09-2026 evening) — all widths */
.tkv2-date-note{display:block;font-size:.92em;font-weight:500;opacity:.92;margin-top:2px;padding-inline-start:15px}
/* Desktop hero (owner-approved 18-09-2026 evening, preview r6/P-desktop.png) */
@media (min-width:1024px){
  /* Yehuda 18-09 evening: fix inside the existing template. */
  /* one grey + 24px of card above the hero instead of the cut edge */
  html body.single-product:has(#tkv2Root) .product{background:#efefef}
  html body.single-product:has(#tkv2Root) .product-center{margin-top:36px!important;padding-top:24px}
  /* bright photo: no dark wash; only a soft shade on the right, behind the text */
  html #tkv2Root .tkv2-hero{display:flex;flex-direction:column;justify-content:flex-start;min-height:260px}
  html #tkv2Root#tkv2Root .tkv2-hero img{opacity:1}
  html #tkv2Root .tkv2-hero-shade{background:linear-gradient(to left,rgba(6,10,20,.62) 0%,rgba(6,10,20,.35) 38%,rgba(6,10,20,0) 66%)}
  /* desktop text block: top-right, league chip -> title -> time/stadium -> date status */
  html #tkv2Root .tkv2-hero-body{padding:26px 32px;max-width:640px}
  html #tkv2Root .tkv2-eyebrow{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);border-radius:20px;padding:3px 12px;font-size:13px;font-weight:700;margin-bottom:12px;text-shadow:none}
  html #tkv2Root#tkv2Root .tkv2-title{font-size:36px!important;line-height:1.15!important;margin:0 0 10px}
  html #tkv2Root .tkv2-meta{font-size:16px;font-weight:600;gap:6px 10px}
  html #tkv2Root .tkv2-meta span+span::before{content:"·";margin-inline-end:10px;opacity:.75}
  html #tkv2Root .tkv2-date-policy{font-size:14px;font-weight:700;margin-top:12px}
  html #tkv2Root .tkv2-date-note{display:block;font-size:13px;font-weight:500;opacity:.92;margin-top:3px;padding-inline-start:15px}
}

/* Mobile: the date note adds a line; let the hero grow instead of clipping the league chip (max-height was 180px). */
@media(max-width:767px){body.single-product:has(#tkv2Root) .tkv2-hero{max-height:none;min-height:180px}}