/*
 * Payment page overrides — scoped to /payment/[slug]
 *
 * The classes used by the payment page (.qbo-bg, .pricing-summary,
 * .customer-information-form, .info-label, .chekcbox-wrapper, .button-step,
 * .step_header, .health-record-list, .main-price-row, .total-row,
 * .extra-price-row, .terms-label, .terms-link, .button-step, .button.full-width,
 * etc.) live in production's global stylesheet (webflow-all-pages.css), which
 * we intentionally do NOT load — see /webflow/CLAUDE.md.
 *
 * This file restores the production rules verbatim for those classes so that
 * the React payment page renders pixel-for-pixel like production. Loaded
 * AFTER webflow-page-purchase-quickbooks-payment.css so it wins.
 *
 * NOTE: Rules are scoped to descendants of <main> on the payment page only,
 * to avoid bleeding into other pages.
 */

/* ----- Step header (back button + Payment title row) ----- */
/* Use CSS grid with 3 equal columns so the h1 always sits dead-center
 * regardless of whether the back button or the right-side spacer are
 * present (PaymentBackButton renders null when there's no history). */
main .step_header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 2.5rem;
}

main .step_header > :first-child {
  justify-self: start;
}

main .step_header h1 {
  margin: 0;
  text-align: center;
  justify-self: center;
}

main .step_header > :last-child {
  justify-self: end;
}

main .button-step {
  border: 1px solid #1239ff;
  color: #1239ff;
  border-radius: 5px;
  flex-direction: row;
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 103px;
  padding-top: 17px;
  padding-bottom: 17px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: 0.2s;
  display: flex;
}

main .button-step:hover {
  background-color: #1239ff;
  color: #ffffff;
}

main .button-step.hide-btn-step {
  display: none;
}

/* ----- The grey card wrapper ----- */
main .qbo-bg {
  border-radius: 0.75rem;
  background-color: #f4f5f8;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
  padding: 40px 30px;
  display: flex;
}

/* ----- Pricing summary (rows live inside) ----- */
main .pricing-summary {
  margin-top: 2rem;
  margin-bottom: 2rem;
  width: 100%;
}

main .pricing-summary h4 {
  margin: 0 0 0.5rem 0;
}

main .main-price-row,
main .extra-price-row {
  justify-content: space-between;
  margin-top: 10px;
  display: flex;
}

main .extra-price-row {
  margin-bottom: 0;
}

main .total-row {
  border-top: 1px solid rgba(33, 33, 33, 0.35);
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  font-weight: 600;
  display: flex;
}

/* ----- "Understand your statement" bullet list ----- */
main .health-record-list {
  gap: 0.5rem;
  flex-flow: column;
  margin-top: 20px;
  padding-left: 0;
  display: flex;
  list-style: none;
}

main .health-record-list li {
  list-style: none;
}

main .list-bullet {
  flex: 0 0 auto;
}

main .d-flex {
  display: flex;
}

main .d-flex.flex-align-top {
  justify-content: flex-start;
  align-items: flex-start;
}

main .d-flex.gap-tiny {
  gap: 0.5rem;
}

/* ----- Form wrapper (white card under the content) ----- */
main .payment-form {
  margin-top: 1.5rem;
  width: 100%;
}

main .customer-information-form {
  border-radius: 0.75rem;
  background-color: #ffffff;
  border: 0.5px solid rgba(33, 33, 33, 0.32);
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 40px;
  padding: 30px 50px 40px;
  font-size: 21px;
  line-height: 1.5;
  display: flex;
  box-shadow: 0 5px 75px rgba(29, 53, 71, 0.1);
}

/* The .w-form wrapper inside the customer-information-form should be 100% */
main .customer-information-form .w-form {
  width: 100%;
}

main .customer-information-form form {
  width: 100%;
}

/* Each field-row div in the form */
main #Customer-Information-QBO-Purchase > div {
  width: 100%;
  margin-bottom: 0.5rem;
}

/* ----- Form labels and required-asterisk styling ----- */
main .info-label {
  font-size: 1rem;
  display: block;
  margin-bottom: 5px;
  font-weight: 700;
}

main .required-star {
  color: #ed1b24;
  margin-right: 2px;
}

main .label-extra {
  color: rgba(0, 0, 0, 0.64);
  font-weight: 400;
  margin-left: 4px;
}

/* ----- Inputs override Webflow defaults to match production ----- */
main .info-input,
main #Customer-Information-QBO-Purchase .w-input,
main #Customer-Information-QBO-Purchase .w-select {
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  margin-bottom: 10px;
  border: 1px solid #cccccc;
  border-radius: 0;
  background-color: #ffffff;
  font-size: 14px;
  color: #333333;
  display: block;
  line-height: 20px;
  vertical-align: middle;
}

main #Customer-Information-QBO-Purchase .w-select {
  background-color: #f3f3f3;
}

/* ----- Terms checkboxes ----- */
main .chekcbox-wrapper {
  gap: 0.5rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  margin-bottom: 0.5rem;
}

main .terms-label {
  margin-bottom: 0;
  font-size: 1rem;
}

main .terms-link {
  color: #1239ff;
  font-weight: 600;
  text-decoration: underline;
}

/* The margin-bottom margin-medium wrapper around checkboxes */
main .customer-information-form .margin-bottom.margin-medium {
  width: 100%;
  margin: 1rem 0;
}

/* ----- Submit button (full-width blue) ----- */
main .button.full-width {
  width: 100%;
  background-color: #1239ff;
  color: #ffffff;
  border: 1px solid #1239ff;
  border-radius: 6px;
  padding: 8px 20px;
  height: 42px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}

main .button.full-width:hover {
  background-color: #0e2dd6;
  border-color: #0e2dd6;
}

main .button.full-width:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ----- Footer note inside the form card ----- */
main .customer-information-form .text-size-medium {
  width: 100%;
  margin-top: 1rem;
  font-size: 14px;
  color: #6b7280;
}

main .customer-information-form .text-size-medium a {
  color: #1239ff;
  text-decoration: underline;
}

/* ----- Headings inside the qbo card ----- */
main .qbo-bg .text-align-center {
  text-align: center;
}

main .qbo-bg .text-align-center h3 {
  margin: 0 0 1rem 0;
}

main .qbo-bg .text-align-center p {
  margin: 0 0 1rem 0;
}

main .qbo-bg h3.text-align-center.text-weight-semibold {
  text-align: center;
  font-weight: 600;
  margin-top: 1.5rem;
}

main .qbo-bg .text-size-medium.text-weight-medium {
  margin-top: 1.25rem;
  font-weight: 500;
}

/* margin-bottom utility resets used inside text-align-center wrapper */
main .margin-bottom.margin-xsmall {
  margin: 0 0 1rem 0;
}