/* ERP H2H — registration app
   STG build: this app renders INSIDE the h2h-child Elementor event page, which
   does not define the demo theme's design tokens. The block below re-declares
   those tokens (scoped to #erph2h-reg so nothing leaks into the page) using the
   ERP HEADtoHEAD brand palette, plus the .btn button family the app markup uses.
   Everything below this block is the original, unchanged app styling. */
#erph2h-reg{
  --red:#b22b2e; --red-500:#991f22; --red-600:#7f1416; --red-700:#640c0e;
  --red-800:#4a0708; --red-900:#310305; --red-dark:#891518;
  --red-50:#fef2f2; --red-100:#fddada; --red-ultra:#ffe6e7;
  --ink:#372c2c; --ink-2:#433939; --muted:#5d5d5d; --muted-2:#746969;
  --line:#e7e1e1; --line-2:#f1efed;
  --white:#fff; --bg:#fff; --bg-soft:#faf7f7; --bg-2:#f4f1f1; --yellow:#f7e214;
  --r:14px; --r-lg:24px; --r-xl:32px; --pill:999px;
  --shadow:0 16px 32px rgba(45,20,20,.06);
  --shadow-md:0 18px 44px rgba(45,20,20,.10);
  --shadow-lg:0 36px 90px rgba(74,7,8,.22);
  --arrow-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 16 L16 8 M9.3 8 H16 V14.7' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --check-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 L10 17.5 L19 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color:var(--ink);
  /* the site's Urbanist face (enqueued by registration.php), with safe fallbacks */
  font-family:"Urbanist",Helvetica,Arial,sans-serif;
}
#erph2h-reg *{box-sizing:border-box}
/* brand button family (mirrors h2h-child's .c-btn look: pill, gradient-red, dark arrow circle) */
#erph2h-reg .btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;
  padding:14px 26px;border-radius:var(--pill);border:2px solid transparent;cursor:pointer;
  text-decoration:none;line-height:1;font-family:inherit;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
#erph2h-reg .btn__arrow{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;flex:none;background:var(--red-900);font-size:0;transition:transform .18s ease}
#erph2h-reg .btn__arrow::before{content:"";display:block;width:15px;height:15px;background:#fff;
  -webkit-mask-image:var(--arrow-mask);mask-image:var(--arrow-mask);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
#erph2h-reg .btn:hover{transform:translateY(-2px)}
#erph2h-reg .btn:hover .btn__arrow{transform:translate(2px,-2px)}
#erph2h-reg .btn--primary{background:var(--red);color:#fff;box-shadow:0 10px 26px rgba(178,43,46,.34)}
#erph2h-reg .btn--primary:hover{background:var(--red-500)}
#erph2h-reg .btn--outline{background:#fff;color:var(--red);border-color:var(--red-100)}
#erph2h-reg .btn--outline .btn__arrow{background:var(--red)}
#erph2h-reg .btn--outline:hover{border-color:var(--red);background:var(--red-50)}
#erph2h-reg .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
#erph2h-reg .btn:disabled .btn__arrow{transform:none}
/* focus-visible accessibility ring on buttons (WCAG 2.4.7) */
#erph2h-reg .btn:focus-visible,#erph2h-reg .reg-step-btn:focus-visible{outline:3px solid var(--red-900);outline-offset:2px}

/* ERP H2H — registration app (original styling) */
.reg-loading{padding:80px 0;text-align:center;color:var(--muted)}
.reg-wrap{max-width:1140px;margin:0 auto}

/* progress — restyled: connector line, readable inactive circles, masked SVG check */
#erph2h-reg .reg-progress{display:flex;align-items:center;gap:0;list-style:none;
  margin:0 0 32px;padding:0;flex-wrap:nowrap}
#erph2h-reg .reg-progress li{display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  font-weight:600;font-size:.9rem;color:var(--muted);background:none;padding:0;border-radius:0}
#erph2h-reg .reg-progress li:not(:last-child)::after{content:"";flex:1;height:2px;margin:0 12px;
  background:var(--line);border-radius:2px;transition:background .2s ease}
#erph2h-reg .reg-progress li.is-done:not(:last-child)::after{background:var(--red)}

#erph2h-reg .reg-progress__n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  flex:none;font-size:.85rem;font-weight:700;line-height:1;
  background:#fff;border:2px solid var(--line);color:var(--muted)}

/* current: solid red disc, white number, soft halo */
#erph2h-reg .reg-progress li.is-current{color:var(--ink);font-weight:700}
#erph2h-reg .reg-progress li.is-current .reg-progress__n{background:var(--red);border-color:var(--red);
  color:#fff;box-shadow:0 0 0 4px var(--red-ultra)}

/* done: red disc + white masked tick (no raw glyph baseline issues) */
#erph2h-reg .reg-progress li.is-done{color:var(--red)}
#erph2h-reg .reg-progress li.is-done .reg-progress__n{background:var(--red);border-color:var(--red);
  color:transparent;font-size:0}
#erph2h-reg .reg-progress li.is-done .reg-progress__n::before{content:"";width:14px;height:14px;
  background:#fff;-webkit-mask-image:var(--check-mask);mask-image:var(--check-mask);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}

/* narrow columns: keep the numbered track, drop the labels */
@media(max-width:640px){
  #erph2h-reg .reg-progress li{font-size:0;gap:0}
  #erph2h-reg .reg-progress li:not(:last-child)::after{margin:0 8px}
  #erph2h-reg .reg-progress__n{font-size:.85rem}
  #erph2h-reg .reg-progress li.is-done .reg-progress__n{font-size:0}
}

.reg-layout{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start}
.reg-main{min-width:0}
.reg-step h2{font-size:1.9rem;margin-bottom:6px}
.reg-sub{color:var(--muted);margin-bottom:24px}
/* Extra breathing room between the "Your details" intro and the first fields
   (Linda, 7 Jul) — only fires on the payer step, the one place a field grid
   directly follows the sub-heading. */
.reg-sub + .reg-grid{margin-top:16px}
.reg-h3{margin:28px 0 14px;font-size:1.2rem}

/* tiers */
.reg-tiers{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.reg-tier{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;transition:.18s;background:#fff}
.reg-tier.is-active{border-color:var(--red);box-shadow:0 10px 30px rgba(178,43,46,.12)}
.reg-tier__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.reg-tier__head h3{font-size:1.25rem;margin:0;display:flex;align-items:center;gap:10px}
.reg-badge{background:var(--red-50);color:var(--red);font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;padding:4px 10px;border-radius:var(--pill)}
.reg-tier__price{margin:8px 0 2px;font-size:1.4rem;font-weight:800;color:var(--ink)}
.reg-tier__price small{font-size:.8rem;font-weight:500;color:var(--muted)}
.reg-tier__net{margin:0;color:var(--muted);font-size:.9rem}
.reg-tier__desc{margin:14px 0 0;color:var(--ink-2);font-size:.95rem}

.reg-stepper{display:flex;align-items:center;gap:6px;flex:none}
.reg-step-btn{width:40px;height:40px;border-radius:12px;border:0;background:var(--red);color:#fff;
  font-size:1.4rem;line-height:1;cursor:pointer;transition:.15s;display:grid;place-items:center}
.reg-step-btn:hover{background:var(--red-500)}
.reg-step-btn:disabled{background:var(--bg-2);color:var(--muted);cursor:not-allowed}
.reg-qty{min-width:34px;text-align:center;font-weight:800;font-size:1.2rem}

.reg-promo label{display:block;margin-bottom:6px;font-weight:600;color:var(--ink-2);font-size:.9rem}
.reg-promo__row{display:flex;gap:10px;max-width:380px}
.reg-promo__row input{flex:1}
.reg-promo__apply{white-space:nowrap;padding:0 22px}
.reg-promo__msg{display:block;margin-top:6px;font-size:.88rem;color:var(--muted)}
.reg-promo__msg.is-ok{color:#1a7f37;font-weight:600}
.reg-promo__msg.is-err{color:var(--red);font-weight:600}
.reg-copypayer{font-size:.9rem}
.reg-summary__discount{color:#1a7f37!important;font-weight:600}

/* fields */
.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.reg-field{display:flex;flex-direction:column;gap:6px}
.reg-field.reg-col-half{grid-column:span 1}
.reg-field:not(.reg-col-half){grid-column:1 / -1}
.reg-label{font-weight:600;color:var(--ink-2);font-size:.92rem}
.req{color:var(--red)}
.reg-field input,.reg-field select,.reg-promo input{height:46px;padding:0 14px;border:1.5px solid var(--line);
  border-radius:10px;font:inherit;font-size:1rem;background:#fff;color:var(--ink);width:100%}
.reg-field input[type=checkbox]{height:auto;padding:0}
.reg-field input:focus,.reg-field select:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px var(--red-ultra)}
.reg-hint{color:var(--muted);font-size:.82rem}
.reg-checks{display:flex;flex-wrap:wrap;gap:10px}
.reg-check{display:flex;align-items:flex-start;gap:8px;font-size:.95rem;color:var(--ink-2);cursor:pointer}
.reg-check input{width:auto;margin-top:3px;flex:none}
.reg-check__text{flex:1;min-width:0} /* text+links flow as one sentence (bare text nodes columnise in flex) */

/* payer */
.reg-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:18px}
.reg-radios{display:flex;gap:12px;margin-top:10px}
.reg-radio{display:flex;align-items:center;gap:8px;padding:12px 18px;border:1.5px solid var(--line);
  border-radius:var(--pill);cursor:pointer;font-weight:600;color:var(--ink-2)}
.reg-radio.is-on{border-color:var(--red);background:var(--red-50);color:var(--red)}

/* attendees */
.reg-att{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px;margin-bottom:18px;background:#fff}
.reg-att__head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.reg-att__head h3{margin:0;font-size:1.2rem}
.reg-att__head h3 span{color:var(--muted);font-weight:600;font-size:.9rem;margin-left:6px}
.reg-copy{padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;font:inherit;color:var(--ink-2);background:#fff}

/* review — Places + Payer side by side, Attendees full width (no cramped 3-up) */
.reg-review{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:22px}
.reg-review__box{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0}
.reg-review__box--attendees{grid-column:1 / -1}
.reg-review__box h3{font-size:1rem;margin:0 0 10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2)}
.reg-review__box p{margin:0;font-size:.95rem;color:var(--ink-2);overflow-wrap:anywhere}
.reg-review__box ul,.reg-review__box ol{margin:0;padding-left:0;list-style:none;font-size:.95rem;color:var(--ink-2)}
.reg-review__box ol{padding-left:18px;list-style:decimal}
.reg-review__box ol li{display:list-item;padding:3px 0;overflow-wrap:anywhere}
.reg-review__box ul li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;overflow-wrap:anywhere}
.reg-review__box ul li>span{white-space:nowrap} /* never break €369.00 mid-number; the label wraps instead */
.reg-review__discount{color:#1a7f37;font-weight:600}
.reg-consent{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.reg-consent .reg-check input{margin-top:4px} /* centre the box on the first text line */
.reg-consent .reg-check__text{line-height:1.55}
.reg-consent .reg-vet{margin-top:2px}
.reg-vet{margin:0;color:var(--muted);font-size:.85rem}
.reg-error{color:var(--red);font-weight:600;margin:0 0 12px;min-height:1px}

/* nav */
.reg-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:26px}

/* summary aside */
.reg-summary{position:sticky;top:90px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--shadow)}
.reg-summary h3{font-size:1.1rem;margin:0 0 14px}
.reg-summary__empty{color:var(--muted);font-size:.95rem}
.reg-summary__lines{list-style:none;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--line)}
.reg-summary__lines li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:.95rem;color:var(--ink-2)}
.reg-sum-line{display:flex;flex-direction:column;font-weight:600}
.reg-sum-line small{color:var(--muted);font-weight:400;font-size:.8rem;margin-top:1px}
.reg-summary__totals div{display:flex;justify-content:space-between;padding:4px 0;color:var(--muted);font-size:.95rem}
.reg-summary__total{border-top:1px solid var(--line);margin-top:6px;padding-top:10px!important;color:var(--ink)!important;
  font-weight:800;font-size:1.2rem!important}
.reg-summary__meta{margin:16px 0 0;color:var(--muted);font-size:.85rem}
.reg-summary__entity{margin:8px 0 0;color:var(--red);font-size:.82rem;font-weight:600}

@media(max-width:1020px){
  .reg-grid{grid-template-columns:1fr} /* half-columns get too cramped beside the 340px aside below ~1020px */
}
@media(max-width:900px){
  .reg-layout{grid-template-columns:1fr}
  .reg-summary{position:static;order:-1}
  .reg-review{grid-template-columns:1fr}
}

/* ============================================================
   Cards-first redesign (view === 'cards') + integration polish
   ============================================================ */

/* (The grey-box neutralisation now lives in the theme's erph2h-registration.css so
   it applies in BOTH booking and pre-register modes — that stylesheet always loads
   with the mode-gate, whereas this app CSS only loads in booking mode.) */

/* ----- cards-first landing ----- */
#erph2h-reg .reg-landing{max-width:1140px;margin:0 auto}
#erph2h-reg .reg-landing__head{text-align:center;max-width:680px;margin:0 auto 40px}
#erph2h-reg .reg-landing__eyebrow{display:inline-block;font-weight:700;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
#erph2h-reg .reg-landing__head h2{font-size:2.1rem;font-weight:600;letter-spacing:-.02em;
  line-height:1.2;color:var(--ink);margin:0 0 10px}
#erph2h-reg .reg-landing__head p{color:var(--muted);font-size:1rem;line-height:1.5;margin:0}

#erph2h-reg .reg-pgrid{display:grid;grid-template-columns:1fr;gap:18px;align-items:stretch;max-width:420px;margin:0 auto}

#erph2h-reg .reg-pcard{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-xl);padding:36px 30px;box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
#erph2h-reg .reg-pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
#erph2h-reg .reg-pcard--featured{border:2px solid var(--red);box-shadow:0 24px 60px rgba(178,43,46,.16)}
#erph2h-reg .reg-pcard--featured:hover{transform:translateY(-5px);box-shadow:0 28px 66px rgba(178,43,46,.20)}

#erph2h-reg .reg-pcard__badge{position:absolute;top:-13px;left:30px;background:var(--red);color:#fff;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:6px 14px;border-radius:var(--pill)}
#erph2h-reg .reg-pcard__name{font-size:1.3rem;font-weight:600;letter-spacing:-.01em;
  color:var(--ink);margin:4px 0 18px}
#erph2h-reg .reg-pcard__price{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
#erph2h-reg .reg-pcard__amount{font-size:2.9rem;font-weight:800;letter-spacing:-.03em;
  line-height:1;color:var(--ink)}
#erph2h-reg .reg-pcard__per{font-size:.85rem;font-weight:500;color:var(--muted)}
#erph2h-reg .reg-pcard__net{margin:0 0 16px;color:var(--muted);font-size:.9rem}
#erph2h-reg .reg-pcard__net strong{color:var(--ink-2)}
#erph2h-reg .reg-pcard__desc{flex:1;margin:0 0 24px;color:var(--ink-2);font-size:.95rem;line-height:1.5}
#erph2h-reg .reg-pcard__btn{width:100%;justify-content:center}

#erph2h-reg .reg-landing__note{margin:28px auto 0;max-width:680px;text-align:center;
  color:var(--muted);font-size:.88rem;line-height:1.5}

/* cards grid — count-aware + responsive. 3 cards stay a clean 3-up (unchanged);
   4 cards (the "1 Day Only" option on) become a tidy 4-up on wide desktop, a clean
   2×2 on mid widths, and a single centred column on mobile — no orphan card. */
@media(min-width:861px){
  #erph2h-reg .reg-pgrid{gap:24px;max-width:none;margin:0}
  #erph2h-reg .reg-pgrid--3{grid-template-columns:repeat(3,1fr)}
  #erph2h-reg .reg-pgrid--4{grid-template-columns:repeat(2,1fr)}
  #erph2h-reg .reg-landing--count-4{max-width:820px;margin:0 auto}
}
@media(min-width:1120px){
  #erph2h-reg .reg-pgrid--4{grid-template-columns:repeat(4,1fr)}
  #erph2h-reg .reg-landing--count-4{max-width:1240px}
  #erph2h-reg .reg-pgrid--4 .reg-pcard{padding:30px 24px}
  #erph2h-reg .reg-pgrid--4 .reg-pcard__amount{font-size:2.5rem}
}
@media(max-width:860px){
  #erph2h-reg .reg-landing__head h2{font-size:1.7rem}
}

/* ----- "back to tickets" link (wizard step 0) ----- */
#erph2h-reg .reg-backlink{display:inline-flex;align-items:center;gap:4px;background:none;border:0;
  cursor:pointer;font:inherit;font-weight:600;font-size:.92rem;color:var(--red);padding:0;margin:0 0 18px}
#erph2h-reg .reg-backlink:hover{color:var(--red-500)}
#erph2h-reg .reg-backlink:focus-visible{outline:3px solid var(--red-900);outline-offset:2px;border-radius:6px}

/* ----- wizard view: calm white panel on the pink section ----- */
#erph2h-reg .reg-main{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px;box-shadow:var(--shadow)}
@media(max-width:560px){ #erph2h-reg .reg-main{padding:22px} }

/* ----- alignment -----
   The Elementor text-editor widget forces text-align:center on the whole app
   (its "align: center" setting), but the app was built left-aligned, so short
   lines like "€200 + €46 VAT" centre inside their column and look indented.
   Restore left as the base, then deliberately centre only the section titles,
   the order-summary title and the pricing cards. */
#erph2h-reg{text-align:left}
#erph2h-reg .reg-step > h2,
#erph2h-reg .reg-step > .reg-sub,
#erph2h-reg .reg-summary > h3,
#erph2h-reg .reg-pcard,
#erph2h-reg .reg-landing__note{text-align:center}

/* Powered-by-Stripe reassurance under the Pay button (Linda #11). */
#erph2h-reg .reg-stripe{display:flex;align-items:center;justify-content:center;gap:7px;margin:14px 0 0;font-size:.82rem;line-height:1.4;color:#6b6b6b;text-align:center}
#erph2h-reg .reg-stripe__lock{flex:none;color:#635bff}
#erph2h-reg .reg-stripe__brand{font-weight:700;color:#635bff}

/* ----- mobile polish: tidy tier rows + full-width stacked nav buttons ----- */
@media(max-width:560px){
  /* stack the qty stepper under the name/price so the text gets full width */
  #erph2h-reg .reg-tier__head{flex-direction:column;align-items:stretch;gap:12px}
  #erph2h-reg .reg-stepper{align-self:flex-start}
  /* nav buttons: full-width, primary on top — not pushed to the right */
  #erph2h-reg .reg-nav{flex-direction:column-reverse;gap:12px}
  #erph2h-reg .reg-nav > .btn{width:100%;justify-content:center}
  #erph2h-reg .reg-nav > span{display:none}
}