/* ==========================================================================
   Cart Bliktud Section — sp-section-cart-bliktud-*
   Mobile-first. Desktop breakpoint: min-width 1024px.
   ========================================================================== */

/* Root section wrapper */
.sp-section-cart-bliktud {
  background: inherit;
  padding: 24px 16px;
  /* Opgave 7: match max-width used by all other Bliktud sections.
     --bs-desktop-section-max-width is defined in bliktud-superior-sections/assets/scss/style.scss
     as 1366px and enqueued globally via assets/css/style.min.css.
     NB: Astras .ast-container omslutter section og har max-width: 1240px på
     min-width: 922px. Selv om vi sætter max-width her, slår det ikke igennem
     fordi parent er smallere. Override af .ast-container nedenfor. */
  max-width: var(--bs-desktop-section-max-width, 1366px);
  margin-inline: auto;
}

/* ------------------------------------------------------------------
   Astras .ast-container max-width-override — KUN på content-området.
   Astra bruger .ast-container FLERE steder (header, content, evt. footer).
   Forrige version targettede alle .ast-container på cart-siden, hvilket
   også gjorde headeren 1366px bred (forkert — headeren skal være fuld
   bredde med Astras egen header-styling, kun content-bredden skal øges).

   Ny selector: #content > .ast-container — direct child af main content-
   wrapper. Specificitet:
     - body.x #content > .ast-container = 1,2,0
     - Astras .ast-container          = 0,1,0
   Vinder uden at ramme header/footer.

   Fallback: .site-content > .ast-container (nogle Astra-versioner).
   ------------------------------------------------------------------ */
@media (min-width: 922px) {
  body.woocommerce-cart #content > .ast-container,
  body.page-template-sp-template-bs_cart #content > .ast-container,
  body[class*="bs_cart"] #content > .ast-container,
  body[class*="bs_cart"] .site-content > .ast-container {
    max-width: var(--bs-desktop-section-max-width, 1366px);
  }
}

/* ------------------------------------------------------------------
   Empty cart
   ------------------------------------------------------------------ */
.sp-section-cart-bliktud-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 16px;
  text-align: center;
}

.sp-section-cart-bliktud-empty-message {
  font-size: 1.125rem;
  color: var(--bs-color-base-80, #453f2e);
  margin: 0;
}

/* ------------------------------------------------------------------
   Two-column layout (grid)
   Mobile: single column — summary flows below items.
   Desktop (≥ 1024px): items left + sticky summary-column right.
   ------------------------------------------------------------------ */
.sp-section-cart-bliktud-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .sp-section-cart-bliktud-layout {
    grid-template-columns: 1fr 360px;
  }
}

/* ------------------------------------------------------------------
   Cart items column
   ------------------------------------------------------------------ */
.sp-section-cart-bliktud-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ------------------------------------------------------------------
   Individual cart item row — grid (Opgave 4 + opfølgning)
   Mobile: single column stack.
   Desktop (≥ 768px):
     standard items: image | body | qty | actions    (4 kolonner)
     profile items:  image | body | actions          (3 kolonner — ingen qty)
   ------------------------------------------------------------------ */
.sp-section-cart-bliktud-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--bs-color-base-30, #e5e0d4);
  background: #fff;
}

.sp-section-cart-bliktud-item:last-child {
  border-bottom: none;
}

@media (min-width: 768px) {
  .sp-section-cart-bliktud-item--standard {
    /* 4 kolonner: image | body | qty | actions */
    grid-template-columns: auto 1fr auto auto;
    align-items: start;
  }
  .sp-section-cart-bliktud-item--profile {
    /* 3 kolonner: image | body | actions */
    grid-template-columns: auto 1fr auto;
    align-items: start;
  }
}

/* Qty kolonne (kun standard items) — qty-controls + stykpris stacked */
.sp-section-cart-bliktud-item-qty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding-top: 0.25rem;
}

/* Item thumbnail */
.sp-section-cart-bliktud-item-image {
  flex: 0 0 80px;
  width: 80px;
  height: auto;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bs-color-base-10, #f5f0e3);
}

.sp-section-cart-bliktud-item-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.sp-section-cart-bliktud-item-image-placeholder {
  width: 100%;
  height: 100%;
  background: var(--bs-color-base-20, #edeade);
}

/* Klikbart produkt-billede — wrapper-link omkring <img> / placeholder.
   line-height:0 forhindrer baseline-spacing under billedet (uden dette
   introducerer <a>-elementet en linje-højde der skubber layout). */
.sp-section-cart-bliktud-item-image-link {
  display: block;
  text-decoration: none;
  line-height: 0;
}

.sp-section-cart-bliktud-item-image-link:hover,
.sp-section-cart-bliktud-item-image-link:focus {
  text-decoration: none;
}

@media (min-width: 640px) {
  .sp-section-cart-bliktud-item-image {
    flex: 0 0 200px;
    width: 200px;
    height: auto;
  }
}

/* Item body: title + details only (qty-controls moved to actions column) */
.sp-section-cart-bliktud-item-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sp-section-cart-bliktud-item-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.sp-section-cart-bliktud-item-title a {
  color: var(--bs-color-base-100, #1a1710);
  text-decoration: none;
}

.sp-section-cart-bliktud-item-title a:hover {
  text-decoration: underline;
}

/* Detail lines (profile product info) */
.sp-section-cart-bliktud-item-detail {
  font-size: 0.875rem;
  color: var(--bs-color-base-80, #453f2e);
  margin: 0;
  line-height: 1.4;
}

.sp-section-cart-bliktud-item-detail strong {
  font-weight: 600;
}

/* Variant label */
.sp-section-cart-bliktud-item-variant {
  font-size: 0.875rem;
  color: var(--bs-color-base-60, #8a7e68);
  margin: 0;
}

.sp-section-cart-bliktud-item-variant-label {
  font-weight: 600;
}

/* ------------------------------------------------------------------
   Item actions column (Opgave 4)
   Right column: remove + qty-controls (standard only) + price
   ------------------------------------------------------------------ */
.sp-section-cart-bliktud-item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  min-width: 160px;
}

/* Remove (×) button — now inside actions column */
.sp-section-cart-bliktud-item-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--bs-color-base-60, #8a7e68);
  padding: 2px 4px;
  border-radius: 2px;
  transition: color 0.15s ease;
  align-self: flex-end;
}

.sp-section-cart-bliktud-item-remove:hover {
  color: var(--bs-color-base-100, #1a1710);
}

/* Quantity +/- controls */
.sp-section-cart-bliktud-qty-controls {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--bs-color-base-30, #e5e0d4);
  border-radius: 4px;
  overflow: hidden;
  height: 36px;
}

.sp-section-cart-bliktud-qty-controls button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 10px;
  height: 100%;
  color: var(--bs-color-base-100, #1a1710);
  transition: background 0.1s ease;
}

.sp-section-cart-bliktud-qty-controls button:hover {
  background: var(--bs-color-base-10, #f5f0e3);
}

.sp-section-cart-bliktud-qty-controls input[type="number"] {
  width: 44px;
  border: none;
  text-align: center;
  font-size: 0.9375rem;
  height: 100%;
  padding: 0 4px;
  color: var(--bs-color-base-100, #1a1710);
  background: transparent;
  -moz-appearance: textfield;
}

.sp-section-cart-bliktud-qty-controls input[type="number"]::-webkit-inner-spin-button,
.sp-section-cart-bliktud-qty-controls input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Price block — right-aligned in actions column */
.sp-section-cart-bliktud-item-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.sp-section-cart-bliktud-item-price-regular {
  text-decoration: line-through;
  color: var(--bs-color-base-60, #8a7e68);
  font-size: 0.875rem;
}

/* Stykpris-visning — kun på standard-items (profile-products har ikke variabel qty) */
.sp-section-cart-bliktud-item-price-unit {
  font-size: 0.8125rem;
  color: var(--bs-color-base-60, #8a7e68);
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
}

.sp-section-cart-bliktud-item-price-unit-label {
  font-weight: 500;
}

/* Line-total span — updated via JS after qty/remove AJAX */
.sp-section-cart-bliktud-item-line-total {
  font-weight: 600;
  color: var(--bs-color-base-100, #1a1710);
}

/* ------------------------------------------------------------------
   Summary column wrapper (Opgave 5)
   Wraps aside + payment-icons + mail-btn. Sticky applied here so all
   three elements scroll together — previously only the aside was sticky.
   ------------------------------------------------------------------ */
.sp-section-cart-bliktud-summary-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .sp-section-cart-bliktud-summary-column {
    /* IKKE sticky — brugerens valg. Bliktuds header er allerede sticky og
       glider ind over ORDRE-boksen når man scroller. Boksen forbliver i normal
       document-flow og scroller op med resten af kurv-indholdet. */
    align-self: start;
  }
}

/* ------------------------------------------------------------------
   ORDRE summary aside (right column) — grey box only
   ------------------------------------------------------------------ */
.sp-section-cart-bliktud-summary {
  background: var(--bs-color-base-10, #f5f0e3);
  padding: 1.5rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-section-cart-bliktud-summary-title {
  font-family: var(--bs-font-header, inherit);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--bs-color-base-100, #1a1710);
  margin: 0 0 2px;
  text-transform: uppercase;
}

.sp-section-cart-bliktud-summary-subtitle {
  font-size: 0.8125rem;
  color: var(--bs-color-base-60, #8a7e68);
  margin: 0;
}

/* Summary price lines */
.sp-section-cart-bliktud-summary-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bs-color-base-30, #e5e0d4);
}

.sp-section-cart-bliktud-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.9375rem;
  color: var(--bs-color-base-80, #453f2e);
  gap: 8px;
}

/* Total row */
.sp-section-cart-bliktud-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--bs-color-base-100, #1a1710);
  gap: 8px;
}

.sp-section-cart-bliktud-summary-total strong {
  font-weight: 700;
}

/* VAT sub-line */
.sp-section-cart-bliktud-summary-vat {
  font-size: 0.8125rem;
  color: var(--bs-color-base-60, #8a7e68);
  margin-top: -6px;
}

/* Checkout CTA button — full width */
.sp-section-cart-bliktud-checkout-btn {
  display: flex;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

/* ------------------------------------------------------------------
   Opgave 6: Padding override for .wc-proceed-to-checkout
   Astra (and WooCommerce core) ship a rule:
     .woocommerce-cart .wc-proceed-to-checkout { padding: 1em 0; zoom: 1; }
   Specificitet: 0,2,0
   Our selector below reaches 0,3,0 — wins without !important.
   ------------------------------------------------------------------ */
/* Specificitet (0,3,0) overstyrer Astras (0,2,0) regel for .wc-proceed-to-checkout */
.sp-section-cart-bliktud .sp-section-cart-bliktud-summary .wc-proceed-to-checkout {
  padding: 7px 0 0;
  zoom: initial;
}

/* ------------------------------------------------------------------
   Payment icons row (now OUTSIDE the grey box)
   Centreret horisontalt under ORDRE-boksen.
   ------------------------------------------------------------------ */
.sp-section-cart-bliktud-payment-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sp-section-cart-bliktud-payment-icon {
  max-height: 28px;
  width: auto;
  display: block;
}

/* Send to email button — full width, outline-style via bs-button-secondary */
.sp-section-cart-bliktud-mail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

/* AJAX error feedback */
.sp-section-cart-bliktud-error {
  background: #fdecea;
  color: #c0392b;
  border: 1px solid #e74c3c;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 0.875rem;
  margin-top: 8px;
}

/* ------------------------------------------------------------------
   (Skeleton-pattern fjernet: nye priser beregnes nu client-side via
   data-unit-price × qty + data-amount-delta-applikation, så UI'et
   opdateres ØJEBLIKKELIGT uden vente-tilstand. AJAX-kald fyrer stadig
   i baggrunden for at gemme cart-state, men ingen visuel "loading".)
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Modal: Send to email
   ------------------------------------------------------------------ */
.sp-section-cart-bliktud-mail-modal {
  border: none;
  border-radius: 8px;
  padding: 0;
  max-width: 500px;
  width: calc(100vw - 32px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.sp-section-cart-bliktud-mail-modal::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.sp-section-cart-bliktud-mail-modal-inner {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.sp-section-cart-bliktud-mail-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--bs-color-base-20, #edeade);
  gap: 12px;
}

.sp-section-cart-bliktud-mail-modal-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
  color: var(--bs-color-base-100, #1a1710);
}

.sp-section-cart-bliktud-mail-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--bs-color-base-60, #8a7e68);
  padding: 2px 4px;
  border-radius: 2px;
  transition: color 0.15s ease;
}

.sp-section-cart-bliktud-mail-modal-close:hover {
  color: var(--bs-color-base-100, #1a1710);
}

.sp-section-cart-bliktud-mail-modal-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px;
}

.sp-section-cart-bliktud-mail-modal-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bs-color-base-80, #453f2e);
}

.sp-section-cart-bliktud-mail-modal-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bs-color-base-30, #e5e0d4);
  border-radius: 4px;
  font-size: 1rem;
  color: var(--bs-color-base-100, #1a1710);
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.sp-section-cart-bliktud-mail-modal-input:focus {
  outline: none;
  border-color: var(--bs-color-action-100, #000);
}

.sp-section-cart-bliktud-mail-modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--bs-color-base-20, #edeade);
}

/* ------------------------------------------------------------------
   Modal status-besked (succes/fejl)
   Vises mellem input og footer. Default skjult via [hidden]-attr;
   JS toggler hidden + modifier-klasse (--success/--error/--info).
   ------------------------------------------------------------------ */
.sp-section-cart-bliktud-mail-modal-status {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
  line-height: 1.4;
  border: 1px solid transparent;
}

.sp-section-cart-bliktud-mail-modal-status--success {
  background: #e8f5e9;
  color: #1b5e20;
  border-color: #66bb6a;
}

.sp-section-cart-bliktud-mail-modal-status--error {
  background: #fdecea;
  color: #c0392b;
  border-color: #e74c3c;
}

.sp-section-cart-bliktud-mail-modal-status--info {
  background: #f5f0e3;
  color: #453f2e;
  border-color: #e5e0d4;
}

/* Send-knap disabled-state under AJAX-request */
.sp-section-cart-bliktud-mail-modal [data-submit-mail][disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}