/* DIVSA premium component primitives — canonical UI ownership. */
:root{
  --tap-component-radius:18px;
  --tap-dialog-radius:24px;
  --tap-control-h:48px;
}

/* Buttons — Phase 9 canonical ownership.
 * Geometry, paint and interaction for every generic DIVSA button live here.
 * Vertical/page styles may size a local CTA, but must not redefine the global
 * primary/secondary/ghost/soft vocabulary. Visual Editor variables still win
 * through their scoped overrides. */
.tap-app .tap-btn{
  min-block-size:44px;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:var(--tap-btn-radius,12px);
  border:1px solid transparent;
  padding:var(--tap-btn-pad-y,10px) var(--tap-btn-pad-x,16px);
  font:inherit;
  font-weight:var(--tap-btn-weight,750);
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--dur-fast,.15s) var(--ease-out,ease),box-shadow var(--dur-fast,.15s) var(--ease-out,ease),border-color var(--dur-fast,.15s) var(--ease-out,ease),background-color var(--dur-fast,.15s) var(--ease-out,ease),filter var(--dur-fast,.15s) var(--ease-out,ease);
}
.tap-app .tap-btn:disabled{cursor:not-allowed;opacity:.58;transform:none;box-shadow:none}
.tap-app :is(.tap-btn-primary,.tap-btn-cta,.tap-btn-xl,.tap-btn-gold,.tap-btn-green,.tap-btn-sacred){
  background:var(--tap-cta-bg,var(--tap-primary));
  color:var(--tap-cta-text,var(--tap-on-primary));
  border-color:transparent;
  font-weight:800;
  box-shadow:0 8px 22px color-mix(in srgb,var(--tap-cta-bg,var(--tap-primary)) 20%,transparent);
}
.tap-app :is(.tap-btn-ghost,.tap-btn-secondary){
  background:var(--tap-card);
  color:var(--tap-brand-ink-safe,var(--tap-primary-deep));
  border-color:var(--tap-line);
}
.tap-app .tap-btn-soft{
  background:var(--tap-primary-soft);
  color:var(--tap-brand-ink-safe,var(--tap-primary-deep));
  border-color:color-mix(in srgb,var(--tap-primary) 18%,var(--tap-line));
}
/* WhatsApp keeps its channel colour; the shared system owns geometry only. */
.tap-app .tap-btn-wa{border-radius:var(--tap-btn-radius,12px);font-weight:var(--tap-btn-weight,750)}
.tap-app .tap-btn-block{inline-size:100%}
.tap-app .tap-btn:focus-visible{outline:3px solid var(--tap-focus);outline-offset:2px}
@media(hover:hover) and (pointer:fine){
  .tap-app .tap-btn:not(:disabled):hover{transform:translateY(-1px)}
  .tap-app :is(.tap-btn-primary,.tap-btn-cta,.tap-btn-xl,.tap-btn-gold,.tap-btn-green,.tap-btn-sacred):not(:disabled):hover{filter:brightness(1.05);box-shadow:0 10px 26px color-mix(in srgb,var(--tap-cta-bg,var(--tap-primary)) 24%,transparent)}
}

/* Cards */
.tap-component-card,.tap-app .tap-card{
  box-sizing:border-box;
  min-inline-size:0;
  background:var(--tap-card);
  border:1px solid var(--tap-line);
  border-radius:var(--tap-component-radius);
  box-shadow:var(--tap-shadow-sm);
}

/* Selection cards shared by participation/add-ons/payment choices. */
.tap-component-scope .tap-tier-card,
.tap-component-scope .tap-addon-card,
.tap-component-scope .tap-cst-payment-choice,
.tap-selection-card{
  box-sizing:border-box;
  min-inline-size:0;
  border:1px solid var(--tap-line);
  border-radius:16px;
  background:var(--tap-card);
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
.tap-component-scope .tap-tier-card,
.tap-component-scope .tap-addon-card{padding:14px 15px}
.tap-component-scope .tap-tier-card.is-sel,
.tap-component-scope .tap-addon-card.is-on,
.tap-selection-card[aria-checked="true"]{
  border-color:var(--tap-primary,var(--tap-purple));
  background:var(--tap-primary-soft);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tap-primary,var(--tap-purple)) 10%,transparent);
}
.tap-component-scope .tap-tiers,
.tap-component-scope .tap-addons-grid{display:grid;grid-template-columns:1fr;gap:10px;min-inline-size:0}
.tap-component-scope .tap-tier-card,.tap-component-scope .tap-addon-card{min-block-size:82px}

/* Canonical dialog / bottom sheet */
html.tap-noscroll,body.tap-dialog-open{overflow:hidden;overscroll-behavior:none}
.tap-dialog-overlay{
  position:fixed;
  inset:0;
  z-index:var(--tap-layer-backdrop);
  display:flex;
  justify-content:center;
  align-items:flex-end;
  background:var(--tap-overlay);
  backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity .18s ease;
}
.tap-dialog-overlay.is-open{opacity:1}
.tap-dialog{
  position:relative;
  z-index:var(--tap-layer-dialog);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  inline-size:100%;
  max-inline-size:100%;
  max-block-size:min(92dvh,820px);
  margin:0;
  background:var(--tap-card);
  color:var(--tap-ink);
  border-radius:26px 26px 0 0;
  box-shadow:var(--tap-shadow-lg);
  overflow:hidden;
  transform:translateY(18px);
  transition:transform .22s cubic-bezier(.22,1,.36,1);
}
.tap-dialog-overlay.is-open .tap-dialog{transform:translateY(0)}
.tap-dialog-handle{inline-size:44px;block-size:5px;border-radius:99px;background:var(--tap-line);margin:10px auto 4px;flex:none}
.tap-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-inline-size:0;padding:10px 16px 8px;flex:none}
.tap-dialog-title{flex:1 1 auto;min-inline-size:0;overflow-wrap:anywhere;font-family:var(--tap-font-heading);font-size:20px;line-height:1.2;font-weight:700;margin:0;color:var(--tap-ink)}
.tap-dialog-close{display:grid;place-items:center;inline-size:42px;block-size:42px;flex:none;border:0;border-radius:50%;background:var(--tap-surface-2);color:var(--tap-ink);font-size:24px;line-height:1;cursor:pointer}
.tap-dialog-note{margin:0;padding:0 16px 10px;color:var(--tap-muted);font-size:14px;line-height:1.45}
/* `overflow: <x> <y>` — this read `auto hidden`, i.e. scroll sideways, clip
   vertically. It is the scroller for every dialog and bottom sheet, and the
   dialog itself is capped at min(92dvh,820px) with overflow:hidden, so any
   sheet taller than the viewport lost everything below the fold with no way to
   reach it: the add-ons list, the participation tiers, the OTP sheet. The two
   words were simply the wrong way round. */
.tap-dialog-body{min-inline-size:0;min-block-size:0;overflow:hidden auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:4px 16px 10px}
.tap-dialog-footer{display:flex;flex-wrap:wrap;gap:10px;min-inline-size:0;padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px));flex:none;background:var(--tap-card)}
.tap-dialog-footer:empty{display:none}
.tap-dialog-footer>.tap-btn{flex:1 1 180px;min-inline-size:0;min-block-size:52px}
.tap-dialog :where(input,select,textarea){max-inline-size:100%;box-sizing:border-box}
.tap-dialog :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--tap-focus);outline-offset:2px}

@media(min-width:768px){
  .tap-dialog-overlay{align-items:center;padding:24px}
  .tap-dialog{inline-size:min(760px,calc(100vw - 48px));max-inline-size:760px;max-block-size:min(86dvh,800px);border-radius:var(--tap-dialog-radius);box-shadow:var(--tap-shadow-lg);transform:translateY(8px) scale(.985)}
  .tap-dialog-overlay.is-open .tap-dialog{transform:translateY(0) scale(1)}
  .tap-dialog[data-size="sm"]{max-inline-size:480px}
  .tap-dialog[data-size="lg"]{max-inline-size:900px}
  .tap-dialog-handle{display:none}
  .tap-dialog-header{padding:18px 20px 10px}
  .tap-dialog-title{font-size:22px}
  .tap-dialog-close{inline-size:40px;block-size:40px;font-size:22px}
  .tap-dialog-note{padding:0 20px 12px}
  .tap-dialog-body{padding:4px 20px 12px}
  .tap-dialog-footer{padding:12px 20px 20px}
}
@media(prefers-reduced-motion:reduce){.tap-dialog-overlay,.tap-dialog,.tap-app .tap-btn,.tap-selection-card{transition:none}}

/* Auth content lives inside the canonical dialog; no separate modal geometry. */
.tap-auth-dialog .tap-dialog-body{padding-top:14px}
.tap-auth-dialog .tap-modal-inner{padding:0;min-inline-size:0}
.tap-auth-dialog .tap-modal-inner h3{margin:0 0 8px;font-size:clamp(22px,4vw,26px);line-height:1.2}
.tap-auth-dialog .tap-modal-inner p{color:var(--tap-muted);font-size:14px;line-height:1.5}
.tap-auth-dialog .tap-x{position:absolute;inset-block-start:14px;inset-inline-end:14px;z-index:2;display:grid;place-items:center;inline-size:42px;block-size:42px;border:0;border-radius:50%;background:var(--tap-surface-2);color:var(--tap-ink);font-size:24px;cursor:pointer}
.tap-auth-dialog .tap-modal-grip{inline-size:44px;block-size:5px;margin:0 auto 16px;border-radius:99px;background:var(--tap-line)}
.tap-auth-dialog .tap-input{inline-size:100%;min-block-size:48px;margin-block:6px 12px}
.tap-auth-dialog .tap-guest-note{margin-top:14px}
@media(min-width:768px){.tap-auth-dialog .tap-modal-grip{display:none}.tap-auth-dialog .tap-dialog-body{padding:24px}.tap-auth-dialog .tap-x{inset-block-start:16px;inset-inline-end:16px}}

/* Consultation flows use the canonical dialog as their only geometry owner. */
.tap-consult-dialog .tap-dialog-body{padding:0}
.tap-dialog .tap-cst-sheet{inline-size:100%;max-inline-size:none;max-block-size:none;overflow:visible;border-radius:0;background:transparent;animation:none}
@media(min-width:768px){.tap-dialog .tap-cst-ctas{flex-direction:row}}

/* Canonical button interaction and sizing. */
.tap-app .tap-btn{position:relative;-webkit-tap-highlight-color:transparent}
.tap-app .tap-btn:not(:disabled):active{transform:scale(.98)}
.tap-app .tap-btn-sm{min-block-size:44px;padding:8px 13px;font-size:13px}
.tap-app .tap-btn-xl{min-block-size:54px;padding:14px 22px;font-size:16px}
.tap-app .tap-btn[aria-busy="true"]{cursor:progress;pointer-events:none}
.tap-app .tap-btn[aria-busy="true"]::before{content:"";inline-size:1em;block-size:1em;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:tapComponentSpin .7s linear infinite}
@keyframes tapComponentSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.tap-app .tap-btn[aria-busy="true"]::before{animation-duration:1.4s}}

/* Phase 8 — presentation belongs to CSS, not renderer style attributes. */
.tap-loading-label{margin-block-start:var(--tap-space-3);color:var(--tap-muted);font-size:var(--tap-fs-sm)}
.tap-guest-checkout-intro{margin-block-end:18px;color:var(--tap-muted);font-size:14px;line-height:1.55}
.tap-guest-checkout-saved{margin-block-start:10px;color:var(--tap-muted);font-size:11px;text-align:center}
.tap-auth-dialog .tap-auth-guest-note{margin-block-start:14px;padding-block-start:14px;border-block-start:1px solid var(--tap-line);text-align:center}
.tap-auth-dialog .tap-auth-guest-copy{margin-block-end:6px;color:var(--tap-muted);font-size:12px}
.tap-auth-dialog .tap-auth-filters{padding:0 0 14px}
.tap-auth-dialog .tap-auth-expiry{margin:8px 0 0;color:var(--tap-muted);font-size:13px;text-align:center}
.tap-auth-dialog .tap-auth-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-block-start:10px;text-align:center}
.tap-state-icon{margin-block-end:var(--tap-space-3)}

/* v8.6.29 Bulk Content Studio: public editorial sections used by native place pages. */
.tap-public-content-section{margin-block:clamp(24px,4vw,48px);min-inline-size:0}
.tap-public-content-section>h2{margin:0 0 12px}
.tap-public-content-section :is(p,li){overflow-wrap:anywhere}
.tap-public-content-section .tap-faq-item{border-block-start:1px solid var(--tap-line);padding-block:10px}
.tap-public-content-section .tap-faq-item summary{cursor:pointer;font-weight:700}
.tap-public-content-section .tap-faq-a{padding-block-start:8px;color:var(--tap-muted)}