/* ==========================================================================
   CART, CHECKOUT & ORDERS — Commerce page styles.

   Table of contents (line numbers approximate; jump via your editor's
   outline to the matching `---------- HEADING` comment):

     CART PAGE                       L5    cart listing table + actions
     ORDER TOTAL SUMMARY             L122  subtotal/total block on cart
     CHECKOUT — LAYOUT               L141  /checkout grid + page chrome
     CHECKOUT — PANES                L183  pane headings + form fields
     CHECKOUT — ORDER SUMMARY SIDEBAR L264 right-rail sticky summary
     CHECKOUT — PROGRESS BAR         L300  step indicator
     CHECKOUT — COMPLETION           L335  thank-you page
     CHECKOUT — HIDE ADDRESS BOOK    L348  Stripe-only adjustments
     ORDER VIEW                      L357  user's past order detail
     EMPTY CART                      L427  empty-state message
     PAGE TITLE (utility pages)      L440  /cart, /checkout headings
     JQUERY UI DIALOG                L450  delete confirmation modal
     MOBILE (≤ 670px)                L562  responsive overrides
   ========================================================================== */

/* ---------- CART PAGE ---------- */

.view-commerce-cart-form {
  max-width: 800px;
}

.view-commerce-cart-form h2 {
  font-size: var(--h2-font-size);
  margin-bottom: var(--spacing-md);
}

/* Cart table */
.view-commerce-cart-form table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-lg);
}

.view-commerce-cart-form thead th {
  text-align: left;
  padding: var(--spacing-sm);
  border-bottom: var(--border-width-medium) solid var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  white-space: nowrap;
}

.view-commerce-cart-form tbody td {
  padding: var(--spacing-sm);
  border-bottom: var(--border-width-thin) solid var(--color-border-light);
  vertical-align: middle;
  font-size: var(--font-size-xs);
}

/* Item column — product title */
.view-commerce-cart-form .views-field-purchased-entity {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
}

/* Price columns */
.view-commerce-cart-form .views-field-unit-price__number,
.view-commerce-cart-form .views-field-total-price__number {
  white-space: nowrap;
}

.view-commerce-cart-form .views-field-total-price__number {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
}

/* Quantity input */
.view-commerce-cart-form .views-field-edit-quantity input[type="number"] {
  width: 4rem;
  padding: var(--spacing-xs);
  border: var(--input-border);
  border-radius: var(--input-border-radius);
  text-align: center;
  font-size: var(--font-size-xs);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* Remove button */
.view-commerce-cart-form .views-field-remove-button input[type="submit"],
.view-commerce-cart-form .delete-order-item {
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  cursor: pointer;
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs);
}

.view-commerce-cart-form .views-field-remove-button input[type="submit"]:hover,
.view-commerce-cart-form .delete-order-item:hover {
  color: var(--color-status-error-text);
  background: transparent;
}

/* Cart actions (Update / Checkout buttons) */
.view-commerce-cart-form .form-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: flex-end;
  padding-top: var(--spacing-md);
  border-top: var(--border-width-thin) solid var(--color-border-light);
}

/* Make the checkout button prominent */
.view-commerce-cart-form .form-actions input[name="checkout"] {
  background: var(--color-primary-btn);
  color: var(--color-white);
  border-color: var(--color-primary-btn);
  padding: 0.75rem 1.5rem;
  font-size: var(--font-size-sm);
}

.view-commerce-cart-form .form-actions input[name="checkout"]:hover {
  background: var(--color-primary-btn-hover);
  border-color: var(--color-primary-btn-hover);
}

/* Update cart button — secondary style */
.view-commerce-cart-form .form-actions input[name="submit"] {
  background: transparent;
  color: var(--color-primary-btn);
  border-color: var(--color-primary-btn);
}

.view-commerce-cart-form .form-actions input[name="submit"]:hover {
  background: var(--color-primary-btn);
  color: var(--color-white);
}

/* ---------- ORDER TOTAL SUMMARY ---------- */

.order-total-line {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.order-total-line__total {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  color: var(--color-text-heading);
  border-top: var(--border-width-medium) solid var(--color-dark);
  padding-top: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}

/* ---------- CHECKOUT — LAYOUT ---------- */

.layout-checkout-form {
  max-width: 900px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.layout-region-checkout-main {
  flex: 1 1 55%;
  min-width: 0;
}

.layout-region-checkout-secondary {
  flex: 0 0 260px;
  margin-top: var(--spacing-lg);
}

/* The sidebar contains an <h3>Order summary</h3> followed by our
   .checkout-order-summary template. Style them as one card. */
.layout-region-checkout-secondary > h3 {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md) 0;
}

.layout-region-checkout-secondary > .checkout-pane {
  padding: 0;
  margin: 0;
  background: none;
}

/* Footer (Continue button) sits under the main column */
.layout-region-checkout-footer {
  flex: 0 0 100%;
}

/* ---------- CHECKOUT — PANES ---------- */

/* Checkout panes — transparent on neutral grey background.
   No card backgrounds, so fieldset legends don't straddle a color boundary. */
.checkout-pane {
  margin: 0 0 var(--spacing-lg);
  padding: 0;
  border: 0 none;
  background: none;
}

fieldset.checkout-pane > legend {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  padding: 0;
  margin-bottom: var(--spacing-sm);
}

/* Nested fieldsets inside checkout panes (e.g. "Payment method") */
.checkout-pane fieldset {
  border: 0 none;
  padding: 0;
  margin: 0 0 var(--spacing-md);
}

.checkout-pane fieldset > legend {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  text-transform: none;
  padding: 0;
  margin-bottom: var(--spacing-xs);
}

/* Payment method radio buttons — inline with their labels */
.checkout-pane .form-type-radio,
.checkout-pane .form-type--radio {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.checkout-pane .form-type-radio input[type="radio"],
.checkout-pane .form-type--radio input[type="radio"] {
  margin: 0;
}

.checkout-pane .form-type-radio label,
.checkout-pane .form-type--radio label {
  margin: 0;
  font-weight: normal;
}

.layout-checkout-form .form-actions {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  padding-top: var(--spacing-md);
}

/* Checkout pane labels and text */
.checkout-pane label,
.checkout-pane .fieldset-legend,
.layout-checkout-form .form-item label {
  color: var(--color-text-heading);
}

.checkout-pane .description,
.layout-checkout-form .form-item .description {
  color: var(--color-text-primary);
  font-size: var(--font-size-2xs);
}

/* Checkout general text */
.layout-checkout-form,
.layout-checkout-form p {
  color: var(--color-text-primary);
}

/* ---------- CHECKOUT — ORDER SUMMARY SIDEBAR ---------- */

.checkout-order-summary {
  background: none;
  border: none;
  border-radius: 0;
  padding: var(--spacing-sm) 0 0;
  font-size: var(--font-size-xs);
}

.checkout-order-summary__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--spacing-xs) 0;
  border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.checkout-order-summary__name {
  color: var(--color-text-heading);
  font-weight: var(--font-weight-bold);
}

.checkout-order-summary__qty {
  color: var(--color-text-muted);
  font-size: var(--font-size-2xs);
  margin-left: var(--spacing-xs);
}

.checkout-order-summary__price {
  color: var(--color-text-primary);
  white-space: nowrap;
  margin-left: auto;
  padding-left: var(--spacing-sm);
}

/* ---------- CHECKOUT — PROGRESS BAR ---------- */

.checkout-progress {
  display: flex;
  gap: var(--spacing-sm);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-lg);
  font-size: var(--font-size-xs);
}

.checkout-progress li {
  color: var(--color-text-muted);
}

.checkout-progress li a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.checkout-progress li a:hover {
  color: var(--color-primary);
}

.checkout-progress .checkout-progress--step__current {
  color: var(--color-text-heading);
  font-weight: var(--font-weight-bold);
}

.checkout-progress li + li::before {
  content: "›";
  margin-right: var(--spacing-sm);
  color: var(--color-gray-300);
}

/* ---------- CHECKOUT — COMPLETION ---------- */

.checkout-complete {
  max-width: 600px;
  padding: var(--spacing-lg) 0;
}

.checkout-complete p {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed, 1.6);
}

/* ---------- CHECKOUT — HIDE ADDRESS BOOK ---------- */
/* Streaming service — no need to save billing addresses */

.field--name-field-copy-to-address-book,
.form-item--profile-billing-information-copy-to-address-book,
[data-drupal-selector*="address-book"] {
  display: none;
}

/* ---------- ORDER VIEW ---------- */

.commerce-order {
  max-width: 800px;
}

/* Fix date field highlight — remove any browser <time> or Views date styling */
.commerce-order .field--name-placed time,
.commerce-order .field--name-completed time,
.views-field-placed time,
.views-field-completed time,
.commerce-order time {
  background: none;
  color: inherit;
  padding: 0;
  border: none;
}

/* Order field layout */
.commerce-order .field {
  margin-bottom: var(--spacing-sm);
}

.commerce-order .field__label {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-xs);
}

.commerce-order .field__item {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

/* Order items table */
.commerce-order table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-md);
}

.commerce-order th {
  text-align: left;
  padding: var(--spacing-sm);
  border-bottom: var(--border-width-medium) solid var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
}

.commerce-order td {
  padding: var(--spacing-sm);
  border-bottom: var(--border-width-thin) solid var(--color-border-light);
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
}

/* Payment method delete — style as a subtle action */
.commerce-order .payment-method-delete,
.commerce-order a[href*="delete"] {
  color: var(--color-text-muted);
  font-size: var(--font-size-2xs);
}

.commerce-order .payment-method-delete:hover,
.commerce-order a[href*="delete"]:hover {
  color: var(--color-status-error-text);
}

/* ---------- EMPTY CART ---------- */

.cart--empty {
  text-align: center;
  padding: var(--spacing-xl) 0;
  color: var(--color-text-muted);
}

.cart--empty p {
  font-size: var(--font-size-md);
  margin-bottom: var(--spacing-md);
}

/* ---------- PAGE TITLE (utility pages) ---------- */

.page-title {
  font-size: var(--h2-font-size);
  color: var(--color-text-heading);
  background: none;
  padding: 0;
  text-transform: none;
}

/* ---------- JQUERY UI DIALOG (delete confirmations, etc.) ---------- */
/* Commerce uses jQuery UI modals for delete forms. The dialog renders
   outside the normal page flow with its own titlebar and button pane. */

.ui-dialog {
  border: var(--border-width-thin) solid var(--color-border-light);
  border-radius: var(--border-radius-md);
  background: var(--color-bg-card);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  padding: 0;
  font-family: var(--font-family-base);
}

.ui-dialog .ui-dialog-titlebar {
  background: var(--color-bg-surface);
  border-bottom: var(--border-width-thin) solid var(--color-border-light);
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
  padding: var(--spacing-md);
}

.ui-dialog .ui-dialog-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  text-transform: none;
}

/* Close (X) button in dialog titlebar */
.ui-dialog .ui-dialog-titlebar-close {
  background: transparent;
  border: none;
  color: var(--color-gray-400);
  cursor: pointer;
  padding: var(--spacing-xs);
  position: absolute;
  right: var(--spacing-sm);
  top: var(--spacing-sm);
}

.ui-dialog .ui-dialog-titlebar-close:hover {
  color: var(--color-text-heading);
}

/* Remove the jQuery UI icon styling — use a simple × */
.ui-dialog .ui-dialog-titlebar-close .ui-icon {
  background-image: none;
  text-indent: 0;
  width: auto;
  height: auto;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon::before {
  content: "×";
  font-size: var(--font-size-lg);
}

/* Dialog content area */
.ui-dialog .ui-dialog-content {
  padding: var(--spacing-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

/* Dialog button pane (where Delete / Cancel buttons actually render) */
.ui-dialog .ui-dialog-buttonpane {
  background: var(--color-bg-surface);
  border-top: var(--border-width-thin) solid var(--color-border-light);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}

.ui-dialog .ui-dialog-buttonset {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
}

/* Style all dialog buttons with our button base */
.ui-dialog .ui-dialog-buttonset .ui-button {
  padding: var(--button-padding);
  border: var(--border-width-thin) solid transparent;
  border-radius: var(--button-border-radius);
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: var(--button-font-weight);
  cursor: pointer;
}

/* Primary action (Delete) — danger red */
.ui-dialog .ui-dialog-buttonset .ui-button:first-child {
  background: var(--color-status-error-text);
  border-color: var(--color-status-error-text);
  color: var(--color-white);
}

.ui-dialog .ui-dialog-buttonset .ui-button:first-child:hover {
  background: var(--color-status-error-hover);
  border-color: var(--color-status-error-hover);
}

/* Cancel button — subtle outline */
.ui-dialog .ui-dialog-buttonset .ui-button + .ui-button {
  background: transparent;
  border-color: var(--color-border-medium);
  color: var(--color-text-primary);
}

.ui-dialog .ui-dialog-buttonset .ui-button + .ui-button:hover {
  border-color: var(--color-text-heading);
  color: var(--color-text-heading);
}

/* ---------- MOBILE (≤ 670px) ---------- */

@media (max-width: 670px) {
  .layout-checkout-form {
    flex-direction: column;
  }

  .layout-region-checkout-secondary {
    flex: 1 1 100%;
  }

  /* Stack the cart table on small screens */
  .view-commerce-cart-form table,
  .view-commerce-cart-form thead,
  .view-commerce-cart-form tbody,
  .view-commerce-cart-form th,
  .view-commerce-cart-form td,
  .view-commerce-cart-form tr {
    display: block;
  }

  .view-commerce-cart-form thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .view-commerce-cart-form tbody tr {
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-sm);
  }

  .view-commerce-cart-form tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
    padding: var(--spacing-xs) 0;
  }

  .view-commerce-cart-form .form-actions {
    flex-direction: column;
  }

  .view-commerce-cart-form .form-actions input {
    width: 100%;
  }
}