/* Payment step: company-design tokens only. Visible copy is supplied by i18n/DOM. */
#step-payment.payment-step-shell {
  --payment-surface: var(--brand-surface, var(--white));
  --payment-surface-muted: var(--brand-surface-muted, var(--ivory-mid));
  --payment-border: var(--brand-line, var(--line));
  --payment-accent: var(--brand-primary, var(--amethyst));
  --payment-accent-secondary: var(--brand-secondary, var(--payment-accent));
  --payment-accent-soft: var(--brand-primary-ghost, var(--amethyst-ghost));
  --payment-success: var(--brand-success, var(--success));
  --payment-warning: var(--brand-warning, var(--warning));
  --payment-danger: var(--brand-danger, var(--danger));
  --payment-section-padding: var(--public-density-section-padding-comfortable);
  --payment-layout-gap: var(--public-density-gap-comfortable);
  --payment-control-padding: var(--public-density-control-padding-comfortable);
  --payment-shell-inline: var(--public-density-shell-inline-comfortable);
  --payment-shell-block: var(--public-density-shell-block-comfortable);
  --public-section-padding: var(--payment-section-padding);
  --public-notice-padding-block: var(--public-space-sm);
  --public-notice-padding-inline: var(--public-space-md);
  /* Keep the shared step container name so canonical ActionBar compact rules remain reachable. */
  container-name: payment-step booking-step;
  container-type: inline-size;
}

#step-payment .content-header {
  padding:var(--payment-shell-block) var(--payment-shell-inline);
  border-bottom:1px solid var(--payment-border);
  background:linear-gradient(180deg,var(--payment-surface),var(--payment-surface-muted));
}
#step-payment .content-title {margin-top:0;}
#step-payment .payment-step-body {display:grid;gap:var(--payment-layout-gap);padding:var(--payment-shell-block) var(--payment-shell-inline);}
#step-payment .payment-summary-section,
#step-payment .payment-methods-section,
#step-payment .payment-legal-section,
#step-payment .bundle-section-card { margin:0; }

/* Compact booking recap */
#step-payment .payment-summary-section {padding-bottom:14px;}
#step-payment #booking-summary-details,
#step-payment .booking-summary {margin:0;padding:0;background:transparent;}
#step-payment .mini-recap {margin:0;border:0;border-radius:var(--radius-md);background:var(--payment-surface);box-shadow:none;}
#step-payment .mini-recap-header {padding:14px 0;border-bottom:1px solid var(--payment-border);}
#step-payment .mini-recap-meta {gap:12px 24px;padding:14px 0;border-bottom:1px solid var(--payment-border);}
#step-payment .mini-recap-price-block {padding:14px 0 0;}
#step-payment .mini-recap-total {display:none;}

/* Bundle choice: one semantic component for single- and multi-pack flows. */
#step-payment .payment-bundle-region:empty,
#step-payment .payment-coupon-region.hidden {display:none;}
#step-payment .bundle-section-card {padding:var(--payment-section-padding);}
#step-payment .bundle-choice-panel,
#step-payment .compatible-bundle-selector {display:grid;gap:var(--payment-layout-gap);}
#step-payment .bundle-choice-header,
#step-payment .compatible-bundle-selector__header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
#step-payment .bundle-choice-identity,
#step-payment .compatible-bundle-selector__header {min-width:0;}
#step-payment .bundle-choice-kicker {
  display:block;
  margin-bottom:4px;
  color:var(--text-muted);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
}
#step-payment .bundle-choice-pack-name,
#step-payment .compatible-bundle-selector__title {
  margin:0;
  color:var(--payment-accent);
  font-family:var(--font-display);
  font-size:clamp(1.05rem,2vw,1.25rem);
  line-height:1.25;
}
#step-payment .compatible-bundle-selector__intro {
  margin:6px 0 0;
  color:var(--text-mid);
  font-size:.9rem;
  line-height:1.45;
}
#step-payment .bundle-choice-badges {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;}
#step-payment .bundle-choice-badge {
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border:1px solid color-mix(in srgb,var(--payment-success) 34%,var(--payment-border));
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--payment-success) 10%,var(--payment-surface));
  color:var(--payment-success);
  font-size:.78rem;
  font-weight:700;
}
#step-payment .bundle-choice-badge--muted {
  border-color:var(--payment-border);
  background:var(--payment-surface);
  color:var(--text-muted);
}
#step-payment .bundle-choice-intro {display:grid;gap:5px;}
#step-payment .bundle-choice-intro-title {display:block;color:var(--text-dark);font-size:.96rem;}
#step-payment .bundle-choice-intro-text {margin:0;color:var(--text-mid);font-size:.88rem;line-height:1.5;}
#step-payment .bundle-choice-fieldset,
#step-payment .compatible-bundle-selector__fieldset {min-width:0;margin:0;padding:0;border:0;}
#step-payment .bundle-choice-legend {
  width:100%;
  margin:0 0 10px;
  color:var(--text-dark);
  font-weight:800;
  font-size:.94rem;
}
#step-payment .bundle-choice-grid,
#step-payment .compatible-bundle-selector__list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
#step-payment .compatible-bundle-selector__list {grid-template-columns:1fr;}
#step-payment .bundle-choice-card,
#step-payment .compatible-bundle-choice {
  position:relative;
  display:grid;
  grid-template-columns:22px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  min-width:0;
  padding:var(--payment-control-padding);
}
#step-payment .bundle-choice-radio,
#step-payment .compatible-bundle-choice__radio {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
#step-payment .bundle-choice-marker,
#step-payment .compatible-bundle-choice__marker {width:22px;height:22px;}
#step-payment .bundle-choice-card.is-selected .bundle-choice-marker,
#step-payment .compatible-bundle-choice.is-selected .compatible-bundle-choice__marker {box-shadow:inset 0 0 0 5px var(--payment-surface);}
#step-payment .bundle-choice-copy,
#step-payment .compatible-bundle-choice__copy {display:grid;gap:4px;min-width:0;}
#step-payment .bundle-choice-title,
#step-payment .compatible-bundle-choice__title {font-size:.94rem;line-height:1.3;}
#step-payment .bundle-choice-description,
#step-payment .compatible-bundle-choice__description {font-size:.8rem;line-height:1.45;}
#step-payment .compatible-bundle-choice__meta {display:flex;flex-wrap:wrap;gap:4px 10px;color:var(--text-muted);font-size:.76rem;}
#step-payment .bundle-choice-amount,
#step-payment .compatible-bundle-choice__amount {display:grid;gap:2px;min-width:94px;text-align:right;}
#step-payment .bundle-choice-amount-label,
#step-payment .compatible-bundle-choice__amount-label {color:var(--text-mid);font-size:.72rem;line-height:1.25;}
#step-payment .bundle-choice-amount-value,
#step-payment .compatible-bundle-choice__amount-value {color:var(--payment-accent);font-size:1.08rem;line-height:1.15;}
#step-payment .compatible-bundle-selector__security {margin:0;color:var(--text-muted);font-size:.78rem;line-height:1.4;}
#step-payment .bundle-choice-details {margin:0;border-top:1px solid var(--payment-border);padding-top:10px;}
#step-payment .bundle-choice-details-summary {color:var(--payment-accent);font-size:.83rem;font-weight:750;cursor:pointer;}
#step-payment .bundle-choice-details-body {padding-top:10px;}
#step-payment .bundle-credit-details {display:grid;gap:9px;}
#step-payment .bundle-credit-detail-title {color:var(--text-dark);font-weight:800;font-size:.86rem;}
#step-payment .bundle-credit-detail-copy {color:var(--text-mid);font-size:.8rem;line-height:1.45;}
#step-payment .bundle-credit-protection {color:var(--text-muted);font-size:.74rem;line-height:1.4;}
#step-payment .bundle-status-hint {margin:0;font-size:.84rem;line-height:1.45;}
#step-payment .bundle-status-hint--muted {color:var(--text-muted);}
#step-payment .bundle-status-hint--warning {color:var(--payment-warning);}
#step-payment .bundle-secondary-action {
  justify-self:start;
  min-height:38px;
  padding:8px 14px;
  border:1px solid var(--payment-accent);
  border-radius:var(--radius-pill);
  background:var(--payment-surface);
  color:var(--payment-accent);
  font:inherit;
  font-weight:750;
  cursor:pointer;
}
#step-payment .bundle-payment-decision-notice {
  margin:0;
  font-size:.82rem;
  line-height:1.4;
}

/* Optional detailed price comparison, collapsed by default in bundle choice. */
#step-payment .bundle-price-comparison {overflow-x:auto;}
#step-payment .bundle-price-comparison__table {width:100%;min-width:300px;border-collapse:collapse;font-size:.78rem;line-height:1.3;}
#step-payment .bundle-price-comparison__table th,
#step-payment .bundle-price-comparison__table td {padding:5px 6px;text-align:right;}
#step-payment .bundle-price-comparison__table th:first-child,
#step-payment .bundle-price-comparison__table td:first-child {text-align:left;}
#step-payment .bundle-price-comparison__table th {color:var(--text-muted);font-weight:800;}
#step-payment .bundle-price-comparison__table td {color:var(--text-dark);font-weight:650;}
#step-payment .bundle-price-comparison__adjustment td,
#step-payment .bundle-price-comparison__credit td {color:var(--payment-success);}
#step-payment .bundle-price-comparison__total td {border-top:1px solid var(--payment-border);font-weight:900;}
#step-payment .bundle-price-comparison__total td:last-child {color:var(--payment-accent);}
#step-payment .bundle-price-comparison__empty {color:var(--text-muted);}
#step-payment .bundle-price-comparison__note {margin:7px 0 0;color:var(--text-muted);font-size:.74rem;line-height:1.4;}

/* Coupon stays secondary. */
#step-payment .payment-coupon-region {margin:-2px 2px 0;}
#step-payment .coupon-toggle-link {color:var(--payment-accent);text-underline-offset:4px;}

/* Payment method selection. */
#step-payment .payment-methods-section {display:grid;gap:var(--payment-layout-gap);}
#step-payment .payment-method-info {margin:0;padding:0;border:0;background:transparent;}
#step-payment .payment-method-selector {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;}
#step-payment .payment-method-choice {
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:11px;
  align-items:start;
  min-height:var(--public-control-min-block);
  padding:var(--payment-control-padding);
  text-align:left;
}
#step-payment .payment-method-marker {margin-top:2px;}
#step-payment .payment-method-copy {display:grid;gap:5px;min-width:0;}
#step-payment .method-name {font-size:.98rem;line-height:1.25;}
#step-payment .method-description {font-size:.84rem;line-height:1.35;}
#step-payment .payment-method-panel:empty {display:none;}
#step-payment #stripe-container,
#step-payment .bank-transfer-box {padding:var(--payment-section-padding);border:1px solid var(--payment-border);border-radius:var(--radius-lg);background:var(--payment-surface-muted);}
#step-payment #payment-element {margin:0;padding:14px;border:1px solid var(--payment-border);border-radius:var(--radius-md);background:var(--payment-surface);}
#step-payment .payment-transfer-details {display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:14px 0;}
#step-payment .payment-transfer-details dt {font-weight:700;color:var(--text-muted);}
#step-payment .payment-transfer-details dd {margin:0;overflow-wrap:anywhere;}
#step-payment .payment-legal-section {display:grid;gap:var(--payment-layout-gap);background:var(--payment-surface-muted);}
#step-payment .payment-legal-section .checkbox-option,
#step-payment .payment-legal-section .checkbox-legal {align-items:flex-start;padding:8px 0;}

/* One dominant amount, adjacent to the real final action. */
#step-payment .payment-action-bar {
  position:sticky;
  bottom:0;
  z-index:12;
  /* Payment owns its three-zone action composition; shared button styling must not turn it back into flex. */
  display:grid !important;
  grid-template-columns:minmax(110px,auto) minmax(145px,auto) minmax(240px,1fr);
  grid-template-areas:"back amount action";
  gap:12px;
  align-items:center;
  padding:14px 28px;
  border-top:1px solid var(--payment-border);
  background:color-mix(in srgb,var(--payment-surface) 95%,transparent);
  box-shadow:0 -10px 28px color-mix(in srgb,var(--text-dark) 8%,transparent);
  backdrop-filter:blur(12px);
}
#step-payment .payment-action-bar #payment-back-btn-footer {grid-area:back;}
#step-payment .payment-action-summary {grid-area:amount;display:grid;gap:2px;min-width:0;padding:4px 8px;text-align:right;}
#step-payment .payment-action-summary__label {color:var(--text-muted);font-size:.72rem;font-weight:750;letter-spacing:.035em;text-transform:uppercase;}
#step-payment .payment-action-summary__amount {color:var(--payment-accent);font-size:clamp(1.42rem,3vw,1.9rem);line-height:1.05;font-weight:900;letter-spacing:-.025em;}
#step-payment[data-payment-amount-state="choice_required"] .payment-action-summary__amount {color:var(--text-muted);}
#step-payment .payment-action-bar #payment-submit-btn,
#step-payment .payment-action-bar #confirm-without-payment-btn {grid-area:action;}
#step-payment .payment-action-bar .btn {min-height:50px;margin:0;border-radius:var(--radius-pill);white-space:normal;line-height:1.25;}
#step-payment .payment-action-bar .btn-primary {background:var(--brand-gradient-primary,var(--payment-accent));box-shadow:var(--shadow-md);}
#step-payment .payment-action-bar .btn-tertiary {border:1px solid var(--payment-accent);color:var(--payment-accent);background:var(--payment-surface);}
#step-payment[data-selected-payment-method="card"] #confirm-without-payment-btn {display:none!important;}
#step-payment[data-selected-payment-method="on_site"] #payment-submit-btn,
#step-payment[data-selected-payment-method="bank_transfer"] #payment-submit-btn {display:none!important;}
#step-payment:not([data-selected-payment-method]) #payment-submit-btn,
#step-payment:not([data-selected-payment-method]) #confirm-without-payment-btn {display:none!important;}

#step-payment .bundle-choice-card:focus-within,
#step-payment .compatible-bundle-choice:focus-within,
#step-payment .bundle-secondary-action:focus-visible,
#step-payment .coupon-toggle-link:focus-visible {
  outline:2px solid var(--payment-accent);
  outline-offset:3px;
}

@container payment-step (max-width: 52rem) {
  #step-payment .payment-method-selector {grid-template-columns:1fr;}
  #step-payment .bundle-choice-grid {grid-template-columns:1fr;}
  #step-payment .payment-action-bar {
    grid-template-columns:auto minmax(8rem,auto) minmax(13.75rem,1fr);
  }
}

@container payment-step (max-width: 36rem) {
  #step-payment.payment-step-shell {
    --payment-section-padding: var(--public-density-section-padding-compact);
    --payment-layout-gap: var(--public-density-gap-compact);
    --payment-control-padding: var(--public-density-control-padding-compact);
    --payment-shell-inline: var(--public-density-shell-inline-compact);
    --payment-shell-block: var(--public-density-shell-block-compact);
    --public-notice-padding-block: var(--public-space-xs);
    --public-notice-padding-inline: var(--public-space-sm);
  }
  #step-payment .payment-summary-section {padding-bottom:var(--public-space-sm);}
  #step-payment .mini-recap-header,
  #step-payment .mini-recap-meta {padding:var(--public-space-sm) 0;}
  #step-payment .mini-recap-price-block {padding:var(--public-space-sm) 0 0;}
  #step-payment .mini-recap-meta {grid-template-columns:1fr;gap:var(--public-space-sm);}
  #step-payment .bundle-choice-header,
  #step-payment .compatible-bundle-selector__header {display:grid;gap:var(--public-space-xs);}
  #step-payment .bundle-choice-badges {justify-content:flex-start;}
  #step-payment .bundle-choice-card,
  #step-payment .compatible-bundle-choice {grid-template-columns:22px minmax(0,1fr);gap:var(--public-space-sm);}
  #step-payment .bundle-choice-amount,
  #step-payment .compatible-bundle-choice__amount {grid-column:2;min-width:0;text-align:left;}
  #step-payment .payment-method-selector {gap:var(--public-space-sm);}
  #step-payment .payment-method-copy {gap:var(--public-space-2xs);}
  #step-payment .payment-method-choice {min-height:0;}
  #step-payment .payment-legal-section .checkbox-option,
  #step-payment .payment-legal-section .checkbox-legal {padding:var(--public-space-2xs) 0;}
  #step-payment .payment-action-bar {
    grid-template-columns:1fr;
    grid-template-areas:"amount" "action" "back";
    padding:var(--public-space-sm) var(--payment-shell-inline);
  }
  #step-payment .payment-action-summary {padding:0;text-align:left;}
  #step-payment .payment-action-bar .btn {width:100%;min-height:var(--public-control-min-block);}
}

@media (prefers-reduced-motion:reduce) {
  #step-payment .payment-method-choice,
  #step-payment .bundle-choice-card,
  #step-payment .compatible-bundle-choice {transition:none;}
}