/**
 * Cart and checkout readability.
 *
 * The site theme styles form buttons as small rounded shapes, which collapses
 * the cart's Remove button into a coloured square with its label invisible, and
 * leaves the line item table cramped and hard to scan.
 *
 * Layout rules below inherit the theme's own colours rather than impose new
 * ones, so they keep working if the theme changes.
 *
 * Type and text colour do not. The theme sets body text to #7A7A7A on its near
 * black background, which measures 4.05:1 and so falls below the 4.5:1 that
 * normal size text needs to be readable. That is what the shop reported as text
 * that is "really light and hard to read". These pages are the end of the same
 * purchase the configurator starts, so they follow the same specification it
 * does: Sora for headings and totals, Inter for everything else, and the same
 * text colours.
 *
 * Everything here is scoped to the cart and checkout paths. The rest of the site
 * is untouched.
 */

.path-cart,
.path-checkout {
  --ink: #F5F5F3;
  --ink-2: #C7CBD1;
  --muted: #9299A3;
  --accent-bright: #E5485D;
  --font-head: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/*
 * The theme's own body rule loads after this file, so setting colour on body
 * would lose. These select the page's content region instead, which is more
 * specific than the rule being corrected and still covers everything on it.
 */
.path-cart .main-content,
.path-checkout .main-content {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}

.path-cart .main-content h1,
.path-cart .main-content h2,
.path-checkout .main-content h1,
.path-checkout .main-content h2 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
}

/* Labels and values a customer reads to check their order. */
.path-cart .main-content label,
.path-checkout .main-content label,
.path-cart .cart-form td,
.path-checkout .checkout-pane td {
  color: var(--ink);
}

.path-cart .cart-form,
.path-checkout .cart-form {
  margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------------- the table */

.path-cart .cart-form table,
.path-checkout .checkout-pane table {
  width: 100%;
  border-collapse: collapse;
}

.path-cart .cart-form th,
.path-cart .cart-form td {
  padding: 0.85rem 0.9rem;
  vertical-align: middle;
  /* The theme borders all four sides of a cell at full strength, which draws a
     heavy grid over the order. Only the line between rows is wanted. */
  border: 0;
  border-bottom: 1px solid currentColor;
  border-bottom-color: color-mix(in srgb, currentColor 18%, transparent);
}

.path-cart .cart-form th {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* The item name carries the row, so let it take the space. */
.path-cart .cart-form td:first-child {
  width: 45%;
  font-weight: 600;
}

.path-cart .cart-form .field--name-product-id a {
  text-decoration: none;
}

/* Money lines up when it is right aligned and evenly spaced. */
.path-cart .cart-form td:nth-child(2),
.path-cart .cart-form td:last-child,
.path-cart .cart-form th:nth-child(2),
.path-cart .cart-form th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.path-cart .cart-form td:last-child {
  font-weight: 600;
}

/* ------------------------------------------------------------ the controls */

.path-cart .cart-form input[type="number"] {
  width: 4.5rem;
  padding: 0.4rem 0.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/*
 * Buttons.
 *
 * The theme gives every button the same classes but they end up different
 * heights, because each sits in its own flex container that stretches to its
 * own content. Update cart came out at 52px and Checkout at 32px, side by side.
 *
 * Rather than chase where each height comes from, both are given the same
 * padding and line height so they match by construction. The theme's own look,
 * a red fill with rounded corners, is kept: only the sizing is normalised.
 */
.path-cart .cart-form .form-actions .button,
.path-cart .cart-form .form-actions input[type="submit"],
.path-checkout .form-actions .button,
.path-checkout .form-actions input[type="submit"] {
  height: auto;
  min-height: 0;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

/*
 * The Remove button.
 *
 * The theme means this to be an icon button. Its commerce.css sets a 50 by 50
 * box with "text-indent: -9999px", which pushes the word "Remove" off screen so
 * a background icon can show through. The icon does not render here, leaving a
 * coloured square with no label and nothing to tell the customer what it does.
 *
 * The selector below deliberately mirrors the theme's own, which is more
 * specific than a plain class would be. Matching its shape wins on specificity
 * without resorting to !important, and it stops working loudly rather than
 * silently if the theme changes that markup.
 */
.path-cart .view-commerce-cart-form .views-table tbody .views-field-remove-button input[type="submit"],
.path-cart .cart-form .delete-order-item {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0.4rem 0.85rem;
  border-radius: 15px;
  font-size: 0.85rem;
  line-height: 1.25;
  text-indent: 0;
  overflow: visible;
  white-space: nowrap;
  background: transparent;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 40%, transparent);
  color: inherit;
  opacity: 0.85;
}

.path-cart .view-commerce-cart-form .views-table tbody .views-field-remove-button input[type="submit"]:hover,
.path-cart .view-commerce-cart-form .views-table tbody .views-field-remove-button input[type="submit"]:focus-visible,
.path-cart .cart-form .delete-order-item:hover,
.path-cart .cart-form .delete-order-item:focus-visible {
  opacity: 1;
  border-color: currentColor;
}

/* --------------------------------------------------------------- the totals */

/*
 * Two containers, because Commerce renders the same lines differently in the two
 * places. The cart puts them in the order's total_price field; the checkout puts
 * them in a summary pane. Selecting only one of them, as this file did, silently
 * left the cart's totals unstyled.
 */
.path-cart .field--name-total-price,
.path-checkout .field--name-total-price {
  margin-left: auto;
  max-width: 22rem;
  font-variant-numeric: tabular-nums;
}

.path-cart .field--name-total-price .order-total-line,
.path-checkout .field--name-total-price .order-total-line {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.35rem 0;
}

.path-cart .field--name-total-price .order-total-line__total,
.path-checkout .field--name-total-price .order-total-line__total {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-bright);
  /* A neutral rule, not a red underline: the total is red, and a border drawn in
     currentColor would follow it. */
  border-top: 1px solid var(--muted);
  margin-top: 0.35rem;
  padding-top: 0.6rem;
}

/* ------------------------------------------------------------------ actions */

.path-cart .cart-form .form-actions,
.path-checkout .form-actions {
  display: flex;
  flex-wrap: wrap;
  /* Without this the buttons stretch to their container rather than sitting at
     their own height, which is how they ended up different sizes. */
  align-items: center;
  gap: 0.7rem;
  justify-content: flex-end;
  margin-top: 1.2rem;
}

/* -------------------------------------------------------------------- checkout */

/*
 * The checkout is a stack of panes with an order summary beside them. Untouched,
 * the panes run together with nothing to separate one step from the next, and
 * the summary sits below everything on wide screens where there is room for it
 * alongside.
 */
.path-checkout .checkout-pane {
  margin-bottom: 1.6rem;
}

.path-checkout .checkout-pane legend,
.path-checkout .checkout-pane .fieldset-legend {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 0.8rem;
}

/* Fields need room to be filled in on a phone as well as a desktop. */
.path-checkout .checkout-pane input[type="text"],
.path-checkout .checkout-pane input[type="email"],
.path-checkout .checkout-pane input[type="tel"],
.path-checkout .checkout-pane select {
  width: 100%;
  max-width: 26rem;
  padding: 0.55rem 0.65rem;
}

.path-checkout .checkout-pane .form-item {
  margin-bottom: 0.9rem;
}

.path-checkout .checkout-pane label {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

/*
 * The theme leaves these white with near black text, which is the only light
 * surface left anywhere in the purchase once the rest of it is dark. Deliberately
 * limited to the fields Drupal renders itself: the card number and expiry are an
 * iframe belonging to the payment provider and are styled through its own
 * options, not from here.
 */
.path-checkout .checkout-pane input[type="text"],
.path-checkout .checkout-pane input[type="email"],
.path-checkout .checkout-pane input[type="tel"],
.path-checkout .checkout-pane select {
  font-family: var(--font-body);
  /* Never below 16px: a phone zooms the page when a smaller field takes focus. */
  font-size: 16px;
  background: #0F1216;
  border: 1px solid #333944;
  border-radius: 4px;
  color: var(--ink);
}

.path-checkout .checkout-pane input::placeholder {
  color: var(--muted);
}

/*
 * The delivery choice. These are the only radios on the page and they carry a
 * price, so they get room rather than being a cramped list.
 */
.path-checkout [class*="shipping"] .form-radios .form-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0;
  margin-bottom: 0;
}

.path-checkout [class*="shipping"] .form-radios label {
  margin-bottom: 0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* The browser default is blue, which is the one colour on the page that belongs
   to nothing else on it. */
.path-checkout input[type="radio"],
.path-checkout input[type="checkbox"],
.path-cart input[type="checkbox"] {
  accent-color: var(--accent-bright);
}

/* ------------------------------------------------------- the order summary */

.path-checkout .checkout-pane-order-summary {
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 4px;
  padding: 1rem 1.1rem;
}

.path-checkout .checkout-pane-order-summary .order-total-line,
.path-checkout .checkout-pane-order-summary .order-summary__total {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.3rem 0;
  font-variant-numeric: tabular-nums;
}

/* The summary lists every line, so keep it quieter than the form beside it. */
.path-checkout .checkout-pane-order-summary .views-row,
.path-checkout .checkout-pane-order-summary tr {
  font-size: 0.9rem;
}

/* --------------------------------------------------------------- narrow screens */

@media (max-width: 34rem) {
  .path-cart .cart-form th:nth-child(2),
  .path-cart .cart-form td:nth-child(2) {
    display: none;
  }
  .path-cart .cart-form td:first-child {
    width: auto;
  }
  .path-cart .cart-form th,
  .path-cart .cart-form td {
    padding: 0.6rem 0.4rem;
  }
}