/**
 * Checkout form theming.
 *
 * Form element styles (labels, inputs, buttons, descriptions) are handled
 * globally in css/components/form.css. This file only contains checkout-specific
 * layout and component styles.
 */

/* ==========================================================================
   Checkout layout.
   ========================================================================== */

/* Replace Commerce float layout with grid. */
.layout-checkout-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .layout-checkout-form {
    grid-template-areas:
      "main sidebar"
      "footer footer";
  }

  .layout-checkout-form .layout-region-checkout-main {
    grid-area: main;
  }

  .layout-checkout-form .layout-region-checkout-secondary {
    grid-area: sidebar;
  }

  .layout-checkout-form .layout-region-checkout-footer {
    grid-area: footer;
  }
}

.layout-checkout-form .layout-region-checkout-main,
.layout-checkout-form .layout-region-checkout-secondary,
.layout-checkout-form .layout-region-checkout-footer {
  float: none;
  width: 100%;
}

/* ==========================================================================
   Fieldset card style.
   ========================================================================== */

.commerce-checkout-flow fieldset {
  border: var(--border);
  border-radius: 0.5rem;
  padding: 2rem;
  margin: 0;
  min-width: 0;
  box-sizing: border-box;
  background-color: var(--color-white);
}

.commerce-checkout-flow fieldset > legend {
  padding: 0;
  float: none;
  width: auto;
}

.commerce-checkout-flow fieldset > legend .fieldset-legend {
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  color: var(--color-heading);
  font-weight: 400;
}

/* ==========================================================================
   Login step.
   ========================================================================== */

/* Two-column layout. */
.checkout-pane-login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 768px) {
  .checkout-pane-login {
    grid-template-columns: 1fr;
  }
}

.checkout-pane-login .form-wrapper__login-option {
  width: 100%;
}

/* Forgot password link. */
.checkout-pane-login a[data-drupal-selector="edit-login-returning-customer-forgot-password"] {
  display: block;
  text-align: center;
  margin-top: 0.75rem;
  font-size: var(--font-size-small);
  color: var(--color-dark-grey);
  text-decoration: none;
}

.checkout-pane-login a[data-drupal-selector="edit-login-returning-customer-forgot-password"]:hover {
  color: var(--color-blue-tq-text);
  text-decoration: underline;
}

/* Hide picture upload field. */
.checkout-pane-login .form-item-login-register-user-picture-0 {
  display: none;
}

/* Password strength indicator. */
.checkout-pane-login .password-strength {
  margin-top: 0.5rem;
  font-size: var(--font-size-smaller);
  color: var(--color-dark-grey);
}

.checkout-pane-login .password-confirm {
  font-size: var(--font-size-smaller);
  color: var(--color-dark-grey);
}

/* ==========================================================================
   Order information step.
   ========================================================================== */

/* Payment information fieldset. */
.checkout-pane-payment-information {
  border: var(--border);
  border-radius: 0.5rem;
  padding: 2rem;
}

/* First name / Last name side by side. */
.checkout-pane-payment-information .address-container-inline {
  display: flex;
  gap: 1rem;
}

.checkout-pane-payment-information .address-container-inline .form-item {
  flex: 1;
}

/* Address fields container - flex wrap for inline pairs. */
#edit-payment-information-billing-information-address-0-address {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

#edit-payment-information-billing-information-address-0-address > .form-wrapper,
#edit-payment-information-billing-information-address-0-address > .form-item {
  width: 100%;
}

/* Town/City and Postal code side by side. */
#edit-payment-information-billing-information-address-0-address > .form-item-payment-information-billing-information-address-0-address-locality {
  flex: 2;
  width: auto;
}

#edit-payment-information-billing-information-address-0-address > .form-item-payment-information-billing-information-address-0-address-postal-code {
  flex: 1;
  width: auto;
}

/* ==========================================================================
   Order summary sidebar.
   ========================================================================== */

.layout-region-checkout-secondary h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  color: var(--color-heading);
  font-weight: 400;
  margin: 0 0 1rem;
}

.checkout-pane-order-summary {
  border: var(--border);
  border-radius: 0.5rem;
  padding: 1.25rem;
  background-color: var(--color-white);
}

.checkout-pane-order-summary table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  margin-bottom: 0;
}

.checkout-pane-order-summary table tr {
  border-bottom: none;
}

.checkout-pane-order-summary table tr + tr td {
  border-top: 1px solid var(--color-pale-grey);
  padding-top: 0.75rem;
}

.checkout-pane-order-summary table td {
  padding: 0.5rem 0.25rem;
  font-size: var(--font-size-small);
  font-family: var(--font-base);
  vertical-align: top;
  border: none;
}

.checkout-pane-order-summary .views-field-quantity {
  white-space: nowrap;
  color: var(--color-dark-grey);
  width: 2.5rem;
}

.checkout-pane-order-summary .views-field-total-price__number {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-blue-dk);
}

/* Hide stock availability and list price in order summary. */
.checkout-pane-order-summary .field--name-field-stock,
.checkout-pane-order-summary .field--name-list-price {
  display: none;
}

.checkout-pane-order-summary .views-field-purchased-entity .field--name-price {
  font-weight: 600;
  color: var(--color-heading);
}

/* Order summary totals. */
.checkout-pane-order-summary .view-footer {
  border-top: 1px solid var(--color-pale-grey);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}

.checkout-pane-order-summary .book-cart__totals {
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: 0;
}

.checkout-pane-order-summary .order-total-line {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  font-size: var(--font-size-small);
}

.checkout-pane-order-summary .order-total-line__total {
  font-weight: 700;
}

.checkout-pane-order-summary .order-total-line__total .order-total-line-value {
  color: var(--color-blue-dk);
  font-size: var(--font-size-medium);
}

/* Footer actions. */
.layout-region-checkout-footer {
  margin-top: 0.5rem;
}

.layout-region-checkout-footer .form-actions {
  margin: 0;
}