/* ==========================================================================
   richter2026 — checkout.css
   Shopping cart page and multi-step checkout. Milestone: 0.6

   Templates targeted (all in checkout/):
     cart.tpl          — cart table, coupon/shipping modules, totals
     checkout.tpl       — AJAX accordion skeleton
     login.tpl           — .left/.right two-column (new/returning customer)
     payment_address.tpl  — table.form (already in forms.css)
     shipping_address.tpl — table.form
     payment_method.tpl   — table.radio, textarea
     shipping_method.tpl  — table.radio, textarea
     register.tpl         — table.form
     guest.tpl            — table.form
     guest_shipping.tpl   — table.form
     confirm.tpl          — .checkout-product table, .payment

   Classes already covered in earlier milestone CSS files:
     table.form, table.radio, .buttons, .required, .error, .warning,
     .success, .attention, .help — all in forms.css / utilities.css
   ========================================================================== */

/* ---- Two-column cart layout (v1.12) -------------------------------------
   "the ajax search results don't match the overall look and feel" was
   a different bug (header.css); this one is "checkout/cart does not
   match the overall look and feel" + "it separates products from
   Zwischensumme/Summe with 'Was möchten Sie als nächstes tun' in
   between". Previously .cart-info, the coupon/shipping module,
   .cart-total, and .buttons were four separate full-width sections
   stacked vertically — a shopper had to scroll past the whole
   coupon/voucher/shipping-estimate block just to get from the product
   list to the total and checkout button. Restructured (cart.tpl) into
   a main column (products) + a sidebar that groups the coupon module,
   totals, and checkout button together — the standard "order summary"
   pattern, and a much shorter visual distance from products to
   checkout. */
.richter-cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-8);
  align-items: start;
}

.richter-cart-layout__main {
  min-width: 0;
}

.richter-cart-layout__sidebar {
  min-width: 0;
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

/* "Was möchten Sie als nächstes tun?" — compact treatment appropriate
   for a sidebar rather than the full-width section it used to be. */
.richter-cart-next h2 {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-3);
}

.richter-cart-next .content > p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.richter-cart-next table.radio {
  width: 100%;
}

.richter-cart-next table.radio td {
  padding: var(--space-1) 0;
  font-size: var(--font-size-sm);
}

.richter-cart-next table.radio label {
  font-size: var(--font-size-sm);
}

.richter-cart-next {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.richter-cart-next .cart-module .content input[type="text"] {
  width: 100%;
  max-width: none;
}

/* ---- Cart page: product table (.cart-info) ------------------------------ */

.cart-info {
  margin-bottom: var(--space-6);
}

.cart-info table {
  width: 100%;
  border-collapse: collapse;
}

.cart-info thead td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-border-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
}

.cart-info thead td.image { width: 80px; }
.cart-info thead td.quantity { width: 140px; text-align: center; }
.cart-info thead td.price,
.cart-info thead td.total { width: 120px; text-align: right; }
.cart-info thead td.model { width: 120px; }

.cart-info tbody td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.cart-info tbody td.image {
  width: 80px;
  padding: var(--space-3);
}

.cart-info tbody td.image img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: block;
}

.cart-info tbody td.name a {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
}

.cart-info tbody td.name a:hover {
  color: var(--color-primary);
}

.cart-info tbody td.name small {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.cart-info tbody td.name .stock {
  color: var(--color-warning);
  font-size: var(--font-size-xs);
}

.cart-info tbody td.quantity {
  text-align: center;
  white-space: nowrap;
}

.cart-info tbody td.quantity input[type="text"] {
  width: 44px;
  text-align: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
}

/* Update qty button (input[type=image]) and remove link */
.cart-info tbody td.quantity input[type="image"] {
  vertical-align: middle;
  opacity: 0.6;
  cursor: pointer;
}

.cart-info tbody td.quantity input[type="image"]:hover {
  opacity: 1;
}

.cart-info tbody td.quantity a img {
  vertical-align: middle;
  opacity: 0.5;
}

.cart-info tbody td.quantity a:hover img {
  opacity: 1;
}

.cart-info tbody td.price,
.cart-info tbody td.total {
  text-align: right;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* ---- Cart coupon/voucher/reward/shipping panels (.cart-module) ---------- */

.cart-module {
  margin-bottom: var(--space-6);
}

.cart-module .content {
  padding: var(--space-4) 0;
}

.cart-module .content p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.cart-module .content input[type="text"] {
  width: 220px;
}

/* Shipping estimator table */
.cart-module #shipping table td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  vertical-align: middle;
  font-size: var(--font-size-sm);
}

/* ---- Cart totals (.cart-total) -----------------------------------------
   v1.12: now lives inside .richter-cart-layout__sidebar instead of
   spanning the full page width — no longer needs to right-align
   itself within a wide row, it just fills its sidebar column. */
.cart-total {
  margin-bottom: 0;
}

.cart-total table#total {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cart-total table#total td {
  padding: var(--space-3) var(--space-5);
}

.cart-total table#total td.right {
  text-align: right;
}

/* Total row (bold, larger text via inline style in the template) */
.cart-total table#total tr:last-child td {
  border-top: 1px solid var(--color-border-strong);
  background: var(--color-bg-subtle);
}

/* Checkout/continue-shopping buttons, scoped to the cart sidebar only
   (.buttons is shared across cart/checkout/account elsewhere, so this
   doesn't touch its default side-by-side layout on those other
   pages). Checkout is the prominent, full-width action; continue
   shopping is a plain secondary link underneath it. */
.richter-cart-layout__sidebar .buttons {
  flex-direction: column-reverse;
  align-items: stretch;
  gap: var(--space-3);
  padding: 0;
  margin-bottom: 0;
}

.richter-cart-layout__sidebar .buttons .right,
.richter-cart-layout__sidebar .buttons .center {
  margin: 0;
  text-align: center;
}

.richter-cart-layout__sidebar .buttons .right .button {
  display: flex;
  width: 100%;
  height: 52px;
  font-size: var(--font-size-md);
}

.richter-cart-layout__sidebar .buttons .center .button {
  background: none;
  color: var(--color-text-muted);
  box-shadow: none;
  text-decoration: underline;
}

.richter-cart-layout__sidebar .buttons .center .button:hover {
  background: none;
  color: var(--color-primary);
  transform: none;
  box-shadow: none;
}

/* ---- Checkout accordion (.checkout) ------------------------------------- */

/* Checkout page layout: accordion steps (main) + sticky order summary
   (sidebar). The steps used to sit alone in a 720px column, leaving the
   right half of the page empty. Same 360px sidebar as the cart page. */
.richter-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-8);
  align-items: start;
}

.richter-checkout-layout__main {
  min-width: 0;
}

.checkout {
  max-width: none;
}

/* Each accordion step */
.checkout > div {
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Step heading — the "strip" button users click to navigate back */
.checkout-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-subtle);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  cursor: default;
}

/* The JS-appended "modify" link inside .checkout-heading */
.checkout-heading a {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-primary);
  cursor: pointer;
}

.checkout-heading a:hover {
  text-decoration: underline;
}

/* Step content panel — slid open/closed by jQuery in checkout.tpl */
.checkout-content {
  padding: var(--space-5);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

/* Active step: slightly elevated appearance */
.checkout > div:has(.checkout-content:not([style*="display: none"])) {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* ---- Login panel inside checkout (.left / .right two-column) ------------ */

.checkout-content .left,
.checkout-content .right {
  display: inline-block;
  vertical-align: top;
  width: 48%;
  padding-right: var(--space-5);
}

.checkout-content .left h2,
.checkout-content .right h2 {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-3);
}

.checkout-content .left p,
.checkout-content .right p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.checkout-content .left label b,
.checkout-content .right label b {
  font-weight: var(--font-weight-medium);
}

.checkout-content .right {
  border-left: 1px solid var(--color-border);
  padding-left: var(--space-5);
  padding-right: 0;
}

.checkout-content .right b {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-1);
}

.checkout-content .right input[type="text"],
.checkout-content .right input[type="password"] {
  display: block;
  width: 100%;
  max-width: 320px;
  margin-bottom: var(--space-3);
}

/* v1.21 bugfix — "the gaps between text and input fields are too
   wide, for all steps" (screenshot: a large gap specifically between
   the email input and the "Passwort:" label beneath it, on the
   checkout login panel). The most likely explanation, consistent with
   this project's whole history of un-neutralized legacy spacing: a
   <br> tag between label and field, left over from an old template
   convention this project has run into before — its default line
   height/margin isn't something the margin-bottom rule above (which
   only targets the input itself) touches at all, and would fully
   explain a gap this large and this consistent. Neutralizing <br>
   spacing broadly across the checkout flow (not just this specific
   login panel) in case the same pattern shows up in other steps, per
   "for all steps" in the report — real spacing is fully controlled by
   this stylesheet's own margins either way, so removing whatever a
   stray <br> would otherwise contribute doesn't lose anything
   intentional. */
.checkout-content br {
  display: none;
}

.checkout-content label {
  margin-bottom: var(--space-1);
}

/* ---- Confirm step: order summary table (.checkout-product) -------------- */

.checkout-product {
  margin-bottom: var(--space-5);
}

.checkout-product table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.checkout-product thead td {
  padding: var(--space-2) var(--space-3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.checkout-product tbody td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.checkout-product tbody td.name a {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.checkout-product tfoot td {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-strong);
}

.checkout-product tfoot td.price {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.checkout-product td.quantity,
.checkout-product td.price,
.checkout-product td.total { text-align: right; }

/* ---- Payment info block (.payment inside confirm.tpl) ------------------- */

.payment {
  padding: var(--space-4);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ---- Responsive --------------------------------------------------------- */

/* ---- Order summary sidebar (#checkout-summary, checkout/summary) -------- */

.checkout-summary {
  min-width: 0;
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.checkout-summary[hidden] {
  display: none;
}

/* The toggle bar is only used on small screens */
.checkout-summary__toggle {
  display: none;
}

.checkout-summary__heading {
  font-size: var(--font-size-md);
  margin: 0 0 var(--space-4);
}

.checkout-summary__count {
  font-weight: var(--font-weight-regular, 400);
  color: var(--color-text-muted);
}

.checkout-summary__items {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.checkout-summary__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.checkout-summary__item:first-child {
  padding-top: 0;
}

.checkout-summary__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Vouchers have no thumbnail: use the full width for the description */
.checkout-summary__item:not(:has(.checkout-summary__thumb)) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.checkout-summary__thumb {
  display: block;
  width: 48px;
  height: 48px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.checkout-summary__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.checkout-summary__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: var(--font-size-sm);
}

.checkout-summary__name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.checkout-summary__option,
.checkout-summary__qty {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.checkout-summary__line {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.checkout-summary__totals {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.checkout-summary__totals td {
  padding: var(--space-1) 0;
}

.checkout-summary__totals td:last-child {
  text-align: right;
  white-space: nowrap;
}

/* Last row = grand total */
.checkout-summary__totals tr:last-child td {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-strong);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.checkout-summary__note {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.checkout-summary__edit {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
}

/* ---- Address steps: two-column field grid ------------------------------- */

/* Shipping/payment address steps use table.form (label | input rows).
   Inside the wider checkout column: label above input, two fields per row.
   Company, tax IDs and the street lines span both columns, so the pairs
   become first/last name, postcode/city and country/state. Rows that
   country-zone.js / form-toggles.js show or hide use style.display = ''
   or 'none', which works with any display value. */
.checkout-content table.form,
.checkout-content table.form tbody {
  display: block;
  width: 100%;
}

.checkout-content table.form {
  margin-bottom: var(--space-4);
}

.checkout-content table.form tbody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
}

.checkout-content table.form tr {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.checkout-content table.form td,
.checkout-content table.form tr td:first-child {
  display: block;
  width: auto;
  padding: 0;
}

.checkout-content table.form input.large-field,
.checkout-content table.form select.large-field {
  max-width: none;
}

.checkout-content table.form tr:has([name="company"]),
.checkout-content table.form tr:has([name="company_id"]),
.checkout-content table.form tr:has([name="tax_id"]),
.checkout-content table.form tr:has([name="address_1"]),
.checkout-content table.form tr:has([name="address_2"]) {
  grid-column: 1 / -1;
}

@media (max-width: 991px) {
  /* Single column; the summary becomes a collapsible bar above the steps */
  .richter-checkout-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .richter-checkout-layout__sidebar {
    order: -1;
  }

  .checkout-summary {
    position: static;
    padding: 0;
  }

  .checkout-summary__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: 0;
    font: inherit;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
  }

  .checkout-summary__toggle::after {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-left: var(--space-2);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
  }

  .checkout-summary:not(.is-collapsed) .checkout-summary__toggle::after {
    transform: rotate(-135deg);
  }

  .checkout-summary__sum {
    margin-left: auto;
    font-weight: var(--font-weight-bold);
  }

  .checkout-summary__body {
    padding: 0 var(--space-4) var(--space-4);
  }

  .checkout-summary.is-collapsed .checkout-summary__body {
    display: none;
  }

  /* the toggle already shows title + count */
  .checkout-summary__heading {
    display: none;
  }

  /* Checkout content: make the login two-column narrower on tablet
     so fields don't get too squished before the 767px full collapse */
  .checkout-content .left,
  .checkout-content .right {
    padding-right: var(--space-3);
  }

  .checkout-content .right {
    padding-left: var(--space-3);
  }

  /* Cart: sidebar stacks below the product list rather than sitting
     beside it — not enough width left for a comfortable 360px
     sidebar once the page's own column padding is accounted for. */
  .richter-cart-layout {
    grid-template-columns: 1fr;
  }

  .richter-cart-layout__sidebar {
    position: static;
  }
}

@media (max-width: 767px) {
  .cart-info thead { display: none; }

  .cart-info tbody tr {
    display: block;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  .cart-info tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: auto;
    border: none;
    padding: var(--space-1) 0;
  }

  .cart-info tbody td::before {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    content: attr(data-label);
    flex-shrink: 0;
  }

  /* Empty cells (e.g. model of a gift voucher) would only show a lone label */
  .cart-info tbody td:empty {
    display: none;
  }

  /* Image: the desktop column rules (width 80px, 12px padding) must not
     apply here, and there is no label to show. */
  .cart-info tbody td.image {
    justify-content: flex-start;
    width: auto;
    padding: var(--space-1) 0 var(--space-3);
  }

  .cart-info tbody td.image::before,
  .cart-info tbody td.name::before {
    display: none;
  }

  /* Name: the cell holds several children (link, stock mark, option list).
     As a flex row they were spread over separate columns, so lay it out
     as a normal block. The product name needs no "Bezeichnung" label. */
  .cart-info tbody td.name {
    display: block;
    padding-bottom: var(--space-2);
    font-size: var(--font-size-base);
  }

  .cart-info tbody td.name > div {
    margin-top: var(--space-1);
  }

  /* Quantity: input, update and remove icons stay together on the right
     while the label sits on the left. */
  .cart-info tbody td.quantity {
    justify-content: flex-end;
    gap: var(--space-2);
  }

  .cart-info tbody td.quantity::before {
    margin-right: auto;
  }

  .cart-total {
    justify-content: stretch;
  }

  .cart-total table#total {
    width: 100%;
  }

  .checkout-content .left,
  .checkout-content .right {
    display: block;
    width: 100%;
    padding-right: 0;
    margin-bottom: var(--space-5);
  }

  .checkout-content .right {
    border-left: none;
    border-top: 1px solid var(--color-border);
    padding-left: 0;
    padding-top: var(--space-5);
  }
}

/* Phones: one field per row in the address steps */
@media (max-width: 599px) {
  .checkout-content table.form tbody {
    grid-template-columns: minmax(0, 1fr);
  }
}