/* ITT Heal — booking PAYMENT surface (index.html step 4, #credit-card-section).

   Extracted verbatim from the inline style attributes that used to live on these
   elements, and from the seven properties showStripeError()/clearStripeError() in
   js/booking-client.js used to set and unset one at a time. Every value here is a
   byte-for-byte copy of what it replaced: this file is a no-op on computed styles,
   proven by a getComputedStyle diff at 344 / 768 / 1920 in three states each.

   Pattern follows the sibling that already got this fix — pay.html + css/pay-page.css
   (.pay-page__card-errors). css/shared-payment.css is deliberately NOT reused: it is
   linked by no page, and its .itt-payment-element draws exactly the border / padding /
   background that index.html records as the double-box bug this surface had removed.

   Cascade audit (grepped, not assumed): #payment-element, #payment-error and
   #card-info-label carry NO other rule anywhere in legacy/css/*.css or in index.html's
   own <style> block. The only id rules in that block touching this subtree are
   `#credit-card-section { margin: 0.5rem 0 !important }` and
   `#credit-card-section > div { margin: 0.75rem 0 !important; padding: 0.75rem !important }`
   — both already beat the inline styles being removed here (an !important author rule
   outranks a normal inline declaration), so their outcome is unchanged either way. */

/* Card section wrapper. display is ALSO written inline by JS
   (booking-client.js updatePaymentMethodUI / onWalletApplyToggle) to toggle the
   section; that inline write still wins over this class, so the toggle is unchanged.
   This rule only supplies the initial shown state the markup used to hard-code. */
.booking-payment__card-section {
  display: block;
}

/* The two anonymous wrappers between the section and the Stripe mount. The outer
   one's margin/padding are overridden by the `#credit-card-section > div` !important
   rule noted above; the inner one is a grandchild and that selector does not reach
   it. Both classes reproduce the inline declaration they replace, so the cascade
   outcome is identical either way. */
.booking-payment__fields {
  margin: 1rem 0;
}

.booking-payment__field-group {
  margin-bottom: 1rem;
}

/* "Payment method" heading. A <span>, not a <label>; it is the aria-labelledby
   target for the mount below, so the id stays. */
.booking-payment__card-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--sage-700);
  font-size: 0.9rem;
}

/* Stripe Payment Element mount. NO border / border-radius / padding / background of
   its own, deliberately: js/shared-payment-element.js styles Stripe's own accordion
   tabs at the same colour, width and radius, so framing here draws a second identical
   box with no contrast step between them. min-height / width / box-sizing are layout
   guards, not framing, and are kept. No max-width — a previous 320px cap guillotined
   the expanded accordion and had to be deleted. */
.booking-payment__element {
  min-height: 50px;
  font-size: 16px;
  line-height: 1.4;
  box-sizing: border-box;
  width: 100%;
}

/* Payment error live region (role="alert" aria-live="assertive"). Base = resting
   state: empty, reserving 20px so nothing jumps when an error lands. */
.booking-payment__error {
  color: #dc2626;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  min-height: 20px;
}

/* Shown state — the red box showStripeError() used to build property by property. */
.booking-payment__error--shown {
  display: block;
  padding: 0.75rem;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  margin-top: 0.5rem;
}

/* Cleared state. MUST stay declared after --shown: the two are mutually exclusive in
   JS, but equal specificity means source order is what decides if they ever overlap.

   margin-top: 0 is not cosmetic and is not a slip — it reproduces the old behaviour
   exactly. clearStripeError() set style.marginTop = '', which deleted the STATIC
   inline margin-top: 0.5rem along with the one showStripeError() had written, so a
   cleared #payment-error computed margin-top: 0px, not 0.5rem. The element is
   display:none in this state so nothing moves; the declaration is here to keep the
   computed-style diff empty rather than to change layout. */
.booking-payment__error--cleared {
  display: none;
  margin-top: 0;
}