/* The checkout page (WooCommerce block checkout), 0.7.40.
 *
 * The practice, 8 Oct 2026: "the subscription page looks very bland. The boxes
 * to fill out should stand out. They need to be in bold." So every box a
 * patient types in gets a solid 2px black border and bold text, every label is
 * bold, each section title carries the practice's red rule, the order summary
 * sits in its own bold box, and the pay button is the same solid red as the
 * CHECK IN and Submit buttons on the intake form.
 *
 * Loaded only on the checkout page, after WooCommerce's block styles and the
 * theme's reset.css. The borders carry !important because the theme's reset
 * (hello-elementor) styles inputs at the same weight as WooCommerce does and
 * whichever file loads last would otherwise win (27 Sep lesson). The card
 * number boxes themselves are GoDaddy's iframes and cannot be styled from
 * here.
 *
 * Usability (9 Oct): red is the practice's colour for "go" (the pay button)
 * and WooCommerce's colour for "wrong" (a box with .has-error), so a box that
 * merely has the cursor in it is NOT outlined red -- a soft grey ring says
 * "you are here" and only an error paints a border red. A label resting
 * inside an empty box is a hint, so it sits a shade lighter than the typed
 * answer it turns into once the box is active. */

.wc-block-checkout .wc-block-components-form input:not([type="checkbox"]):not([type="radio"]),
.wc-block-checkout .wc-block-components-form select,
.wc-block-checkout .wc-block-components-form textarea,
.wc-block-checkout .wc-block-components-combobox .components-combobox-control__input,
.wc-block-checkout .wc-block-components-select .components-custom-select-control__button,
.wc-block-checkout .wc-block-components-select select {
  border: 2px solid #111 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  background: #fff !important;
  color: #111 !important;
  font-weight: 700 !important;
}
/* The box grows with the text (usability 9 Oct: at 150-200% text WooCommerce's
 * fixed 50px box put the typed answer on top of its label). Padding and line
 * height in em, so a bigger font gets a taller box, never a collision. */
.wc-block-checkout .wc-block-components-text-input input:not([type="checkbox"]):not([type="radio"]) {
  height: auto !important;
  min-height: 50px !important;
  padding: 1.5em 0.75em 0.5em !important;
  line-height: 1.4 !important;
}
.wc-block-checkout .wc-block-components-text-input label {
  line-height: 1.375 !important;
}
.wc-block-checkout .wc-block-components-text-input:not(.is-active) label {
  top: 50% !important;
}
.wc-block-checkout .wc-block-components-form select,
.wc-block-checkout .wc-block-components-select select,
.wc-block-checkout .wc-block-components-select .components-custom-select-control__button {
  min-height: 44px !important;
}
.wc-block-checkout .wc-block-components-form input:focus,
.wc-block-checkout .wc-block-components-form select:focus,
.wc-block-checkout .wc-block-components-form textarea:focus,
.wc-block-checkout .wc-block-components-combobox .components-combobox-control__input:focus {
  border-color: #111 !important;
  outline: 3px solid rgba(17, 17, 17, 0.35) !important;
  outline-offset: 2px;
}
.wc-block-checkout .wc-block-components-form .has-error input:not([type="checkbox"]):not([type="radio"]),
.wc-block-checkout .wc-block-components-form .has-error select:not([hidden]),
.wc-block-checkout .wc-block-components-form .has-error textarea:not([hidden]) {
  border-color: #d82729 !important;
}
.wc-block-checkout .wc-block-components-text-input label,
.wc-block-checkout .wc-block-components-combobox label,
.wc-block-checkout .wc-block-components-select label,
.wc-block-checkout .wc-block-components-form .components-base-control__label,
.wc-block-checkout .wc-block-components-checkbox label {
  font-weight: 700 !important;
  color: #222 !important;
}
.wc-block-checkout .wc-block-components-text-input:not(.is-active) label {
  font-weight: 600 !important;
  color: #555 !important;
}
.wc-block-checkout .wc-block-components-checkbox label {
  line-height: 1.4 !important;
  min-height: 44px;
  align-items: center !important;
}
.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
  border: 2px solid #111 !important;
  width: 22px;
  height: 22px;
}
.wc-block-checkout .wc-block-components-checkbox.has-error .wc-block-components-checkbox__input[type="checkbox"] {
  border-color: #d82729 !important;
}
.wc-block-checkout .wc-block-components-checkbox.has-error label {
  color: #d82729 !important;
}

.wc-block-checkout .wc-block-components-checkout-step__title {
  font-size: 1.35em !important;
  font-weight: 800 !important;
  color: #111 !important;
  border-bottom: 3px solid #d82729 !important;
  padding-bottom: 8px !important;
  margin-bottom: 14px !important;
}
.wc-block-checkout .wc-block-components-checkout-step__description {
  color: #333 !important;
  font-weight: 600;
}

/* The order summary: its own bold box, bold lines, the total in red. */
.wc-block-checkout .wc-block-checkout__sidebar {
  border: 2px solid #111 !important;
  border-radius: 10px !important;
  padding: 16px !important;
  background: #fff !important;
}
.wc-block-checkout .wc-block-components-totals-item,
.wc-block-checkout .wc-block-components-order-summary-item__description,
.wc-block-checkout .wc-block-components-order-summary__button-text,
.wc-block-checkout .wc-block-components-checkout-order-summary__title-text {
  font-weight: 700 !important;
  color: #111 !important;
}
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-weight: 800 !important;
  color: #d82729 !important;
}

/* Payment choices and the pay button. A card choice is ONE box: the accordion
 * wrapper carries the border and the label inside it carries none (two
 * borders drew a box inside a box, usability 9 Oct). A plain radio list, with
 * no accordion, borders each choice itself. */
.wc-block-checkout .wc-block-components-radio-control__label,
.wc-block-checkout .wc-block-components-radio-control__label-group {
  font-weight: 700 !important;
  color: #111 !important;
}
.wc-block-checkout .wc-block-components-radio-control-accordion-option,
.wc-block-checkout .wc-block-components-radio-control:not(.wc-block-components-radio-control-accordion) > .wc-block-components-radio-control__option {
  border: 2px solid #111 !important;
  border-radius: 8px !important;
  margin: 0 0 10px !important;
}
.wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
  border: 0 !important;
  margin: 0 !important;
  padding-left: 48px !important;
}
.wc-block-checkout .wc-block-components-radio-control:not(.wc-block-components-radio-control-accordion) > .wc-block-components-radio-control__option {
  padding-left: 48px !important;
}
.wc-block-checkout .wc-block-components-checkout-place-order-button,
.wc-block-checkout .wc-block-components-checkout-place-order-button:hover,
.wc-block-checkout .wc-block-components-checkout-place-order-button:focus {
  background: #d82729 !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 800 !important;
  font-size: 1.15em !important;
  min-height: 52px !important;
  width: 100% !important;
  max-width: 100% !important;
}
.wc-block-checkout .wc-block-components-checkout-place-order-button:focus-visible {
  outline: 3px solid #111 !important;
  outline-offset: 3px;
}
.wc-block-checkout .wc-block-components-notice-banner.is-error {
  border: 2px solid #d82729 !important;
  font-weight: 700;
}