/**
 * Checkout — tone down EDD's default chrome.
 *
 * EDD's block checkout is styled for a light theme: its borders are hardcoded
 * to #eee, which on this dark background reads as a set of bright white boxes
 * rather than the quiet dividers they're meant to be. Nothing here changes
 * layout or markup — it only re-tones borders and surfaces onto the brand
 * palette.
 *
 * Every rule is scoped with `body.edd-checkout` and mirrors EDD's own selector
 * chain. That's heavier than it looks like it needs to be, and deliberately
 * so: the checkout block enqueues its stylesheet during rendering, after both
 * wp_enqueue_scripts and wp_print_styles, so it always prints last no matter
 * what we declare as a dependency. Winning on specificity is the only stable
 * option here — relying on source order breaks silently.
 */

/**
 * The plugin declares this on :root, so redefining it retones every border
 * derived from it — cart outline, row dividers, fieldset edges — without
 * listing each selector and inviting drift when the plugin adds another. A
 * plain `:root` suffices because ours is the later of the two declarations.
 *
 * It doubles as a surface colour on secondary buttons and gateway hover
 * states. A translucent white serves both roles on a dark background: as a
 * border it's a hairline, as a fill a subtle lift — the same relationship #eee
 * had against white.
 */
:root {
  --edd-blocks-light-grey: var(--mb-border, rgba(255, 255, 255, 0.12));
}

/* The cart is the one element that benefits from being a distinct container,
   so it keeps its outline and picks up the store list's radius. */
body.edd-checkout .wp-block-edd-checkout #edd_checkout_cart {
  overflow: hidden;
  border-radius: var(--mb-radius-sm, 0.5rem);
}

/**
 * The form fieldsets lose theirs entirely.
 *
 * A bordered fieldset renders its legend as a notch cut through the top edge —
 * the broken rectangle around "Personal Info". That detail earns its keep in a
 * dense form where several fieldsets compete, but here each section is already
 * separated by its heading and generous spacing, so the border is decoration
 * that pulls the eye off the fields.
 *
 * Padding goes with it: left alone it would indent the inputs relative to the
 * cart above them, which is the misalignment the border was concealing.
 */
body.edd-checkout .wp-block-edd-checkout #edd_purchase_form .edd-blocks-form {
  border: none;
  padding: 0;
}

/* Restores the vertical rhythm the removed padding was providing. */
body.edd-checkout .wp-block-edd-checkout #edd_purchase_form p + .edd-blocks-form {
  margin-top: var(--mb-space-md, 1.5rem);
}

/* Hardcoded #ddd, so the variable above doesn't reach it. */
body.edd-checkout .wp-block-edd-checkout #edd_purchase_form .edd-button-secondary,
body.edd-checkout .wp-block-edd-checkout .edd-button-secondary {
  border-color: var(--mb-border, rgba(255, 255, 255, 0.12));
  color: var(--mb-text-primary, #fff);
}

/**
 * Inputs ship with no colour of their own and fall back to the browser's white
 * field, which is then the brightest thing on the page. Matched to the border
 * treatment above so the form reads as one surface.
 */
body.edd-checkout .wp-block-edd-checkout #edd_purchase_form .edd-blocks-form input[type='text'],
body.edd-checkout .wp-block-edd-checkout #edd_purchase_form .edd-blocks-form input[type='email'],
body.edd-checkout .wp-block-edd-checkout #edd_purchase_form .edd-blocks-form input[type='tel'],
body.edd-checkout .wp-block-edd-checkout #edd_purchase_form .edd-blocks-form input[type='password'],
body.edd-checkout .wp-block-edd-checkout #edd_purchase_form .edd-blocks-form select,
body.edd-checkout .wp-block-edd-checkout #edd_purchase_form .edd-blocks-form textarea {
  background: var(--mb-bg-tertiary, #1c2230);
  border: 0.0625rem solid var(--mb-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--mb-radius-sm, 0.5rem);
  color: var(--mb-text-primary, #fff);
  padding: 0.625rem 0.75rem;
}

body.edd-checkout .wp-block-edd-checkout #edd_purchase_form input::placeholder,
body.edd-checkout .wp-block-edd-checkout #edd_purchase_form textarea::placeholder {
  color: var(--mb-text-tertiary, rgba(255, 255, 255, 0.48));
}

/* The focus ring is the one border here that should be loud — it's the only
   signal of where keyboard input is going. */
body.edd-checkout .wp-block-edd-checkout #edd_purchase_form input:focus-visible,
body.edd-checkout .wp-block-edd-checkout #edd_purchase_form select:focus-visible,
body.edd-checkout .wp-block-edd-checkout #edd_purchase_form textarea:focus-visible {
  border-color: var(--mb-accent, #3b82f6);
  outline: 0.125rem solid var(--mb-accent, #3b82f6);
  outline-offset: 0.0625rem;
}

/* EDD sets these to #666, tuned for a white page. */
body.edd-checkout .edd-description,
body.edd-checkout .edd-required-fields-notice {
  color: var(--mb-text-tertiary, rgba(255, 255, 255, 0.48));
}