/* WooCommerce's checkout drawn as nopCommerce's (theme.md, 3.6). checkout.css styles the page,
   the numbered sections and the sidebar it shares with nopCommerce's markup; these rules cover
   what only WooCommerce's markup has. Fields are the theme's `inputs` (inc/checkout.php). */

.checkout-data {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* «Returning customer?»: the sign-in, folded above the checkout. */
.checkout-login__toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--tap-target);
  font-size: var(--font-size-sm);
  list-style: none;
  cursor: pointer;
}

/* Safari draws the disclosure triangle from its own pseudo-element. */
.checkout-login__toggle::-webkit-details-marker {
  display: none;
}

.checkout-login[open] > .checkout-login__toggle {
  margin-bottom: var(--space-md);
}

.checkout-login form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.checkout-login .tooltip {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.checkout-login .login-options {
  grid-column: 1 / -1;
  justify-content: space-between;
}

.checkout-login .forgot-password a {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  text-underline-offset: var(--space-3xs);
}

/* Every section is open, so its title reads as the active step's. */
.checkout-flow .opc .step-title {
  color: var(--color-ink);
}

/* A section holds its fields, then the next group (delivery: the address, then the notes). */
.opc .step,
.woocommerce-shipping-fields,
.woocommerce-additional-fields,
.place-order {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* WooCommerce draws a field row as a paragraph. */
.form-row.inputs {
  margin: 0;
}

.woocommerce-input-wrapper {
  display: block;
}

.inputs label .optional {
  color: var(--color-muted);
  font-weight: var(--font-weight-regular);
}

.inputs.woocommerce-invalid input,
.inputs.woocommerce-invalid select,
.inputs.woocommerce-invalid .styled-select__trigger {
  border-color: var(--color-danger);
}

.checkout-inline-error-message {
  margin: 0;
  color: var(--color-danger);
  font-size: var(--font-size-xs);
}

/* The shipping address shows while «ship to a different address» is ticked, before WooCommerce's
   script runs and without it; the script then slides it on each change. */
.woocommerce-shipping-fields:has(#ship-to-different-address-checkbox:not(:checked)) .shipping_address {
  display: none;
}

.shipping_address {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

#payment {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Only the chosen payment method's description shows; WooCommerce's script slides the next one in. */
.wc_payment_method:not(:has(> .method-name > input:checked)) > .payment_box {
  display: none;
}

.payment_box > :first-child {
  margin-top: 0;
}

.payment_box > :last-child {
  margin-bottom: 0;
}

/* The delivery row of the summary: the chosen method's name, or a choice between methods. */
.woocommerce-shipping-methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-shipping-methods li {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2xs);
}

/* The terms' wording is one label beside its box: it wraps beside the box, not under it. */
.terms-of-service label {
  flex: 1 1 0;
  min-width: 0;
}