/************ Cart Cards – canonical stylesheet *****************
   Keep all cart page styling in THIS file to avoid conflicts.
*****************************************************************/

:root{
  --spar:#4CBB17; /* 'Du sparer' in green */
  --brand:#1083fe;
  --bg:#fff;
  --text:#111;
  --muted:#666;
  --border:rgba(0,0,0,.08);
  --shadow:0 0px 0px rgba(0,0,0,.04);
  --radius:7px;
  --radius-sm:6px;
  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
}

/* ================================
  Layout grid
=================================== */
.wc-cart-grid{
  display:grid; grid-template-columns:1fr 360px; gap:var(--space-6); align-items:start;
}
@media (max-width: 992px){
  .wc-cart-grid{ grid-template-columns:1fr; }
}

/* ================================
  Coupon card
=================================== */
.wc-coupon-card{
  padding:var(--space-3); border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--bg); margin-bottom:var(--space-4);
  box-shadow:var(--shadow);
}
.wc-coupon-row{ display:flex; gap:var(--space-2); }
.wc-coupon-row .input-text{ flex:1; }

/* ===== Item cards ===== */
.wc-cart-cards{ display:grid; gap:var(--space-4); }

.cart-card{
  position:relative; display:grid;
  grid-template-columns:96px 1fr minmax(120px,160px) minmax(120px,160px);
  gap:var(--space-4); padding:var(--space-4);
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg); box-shadow:var(--shadow);
  color:var(--text);
}
.cart-card .remove{
  position:absolute; top:10px; bottom:20px; right:12px; text-decoration:none;
  font-size:20px; line-height:1; color:#777;
}
.cart-card .remove:hover{ color:var(--text); }
.cc-thumb img{ width:96px; height:auto; border-radius:8px; }
.cc-title{ margin:0 0 6px 0; font-size:16px; line-height:1.3; }
.cc-main .variation, .cc-main .wc-item-meta{ margin:6px 0 0 0; color:var(--muted); font-size:14px; }
.cc-qty .qty{ width:90px; }
.cc-prices{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:6px; }
.cc-price{ opacity:.8; }
.cc-subtotal{ font-weight:600; }

@media (max-width: 640px){
  .cart-card{
    grid-template-columns:84px 1fr;
    grid-template-areas:
      "thumb main"
      "qty prices";
  }
  .cc-thumb{ grid-area:thumb; }
  .cc-main{ grid-area:main; }
  .cc-qty{ grid-area:qty; }
  .cc-prices{ grid-area:prices; align-items:flex-start; }
}

/* ================================
  Actions
=================================== */
.cart-actions{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--space-4);
}
.cart-actions .button-outline{
  background:transparent; border:1px solid rgba(0,0,0,.2); color:inherit;
}

/* ================================
  Summary column (sticky)
=================================== */
.wc-summary{ position:sticky; top:80px; }
@media (max-width: 992px){ .wc-summary{ position:static; } }

.cart_totals.wc-summary-card{
  padding:var(--space-5); border:1px solid var(--border);
  border-radius:var(--radius); background:var(--bg); box-shadow:var(--shadow);
}
.cart_totals.wc-summary-card > h2{
  margin:0 0 var(--space-4) 0; font-size:18px;
}
/* ====================================================
  Totals list: label | value with right-aligned values
======================================================== */
.wc-totals{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.wc-totals-row{
  display:grid; grid-template-columns:1fr auto; column-gap:12px; align-items:center;
}
.wc-totals-row .label{ min-width:0; }
.wc-totals-row .value{ justify-self:end; text-align:right; white-space:nowrap; }
.wc-totals-row.order-total{ border-top:1px solid var(--border); padding-top:14px; font-weight:700; }

/* ====================================================
  Shipping block spans full width under label
======================================================== */
.wc-totals-row.shipping .value{
  grid-column:1 / -1; justify-self:stretch; text-align:left;
}
.wc-totals-row.shipping .woocommerce-shipping-methods{ margin:0; padding-left:1rem; }
.wc-totals-row.shipping .woocommerce-shipping-destination{ margin:.5rem 0 0 0; opacity:.85; }

/* ====================================================
  Subtler discount styling (still readable)
======================================================== */
.wc-totals-row.discount .label{opacity:.8; }
.wc-totals-row.discount .value{ opacity:.8; text-align:right;}

/* ====================================================
  Checkout button spacing
======================================================== */
.cart_totals .checkout-button{ width:100%; margin-top:30px; }

/* ====================================================
   Notices (optional tidy)
======================================================== */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info{
  border-radius:12px;
}
/* ====================================================
   MOBILE: stop item cards overflowing to the right
======================================================== */
.woocommerce-cart .cart-card{ box-sizing:border-box; }
.woocommerce-cart .cc-main, .woocommerce-cart .cc-prices{ min-width:0; }
.woocommerce-cart .cc-title, .woocommerce-cart .cc-title a{ word-break:break-word; overflow-wrap:anywhere; }
@media (max-width:640px){
  .woocommerce-cart .cart-card{ grid-template-columns:84px minmax(0,1fr); } /* allow the text column to shrink */
}

/* ====================================================
   DESKTOP: long coupon labels wrap, values stay right-aligned
======================================================== */
.woocommerce-cart .wc-totals-row{ align-items:start; }                  /* top-align multi-line rows */
.woocommerce-cart .wc-totals-row .label{ min-width:0; overflow-wrap:anywhere; }
.woocommerce-cart .wc-totals-row .value{
  justify-self:end; text-align:right; white-space:nowrap; align-self:start;
}

/* ====================================================
   DESKTOP: add space under the remove (×) button
======================================================== */
@media (min-width:641px){
  .woocommerce-cart .cart-card{ padding-top: calc(var(--space-4) + 10px); }
}

/* ====================================================
   Put VAT line under the total and align it
======================================================== */
.woocommerce-cart .wc-totals-row.order-total .includes_tax{
  display:block; margin-top:4px; text-align:right; white-space:nowrap; font-weight: normal;
}

/* ====================================================
   Sale styling in cart
======================================================== */
.woocommerce-cart .cc-price del,
.woocommerce-cart .cc-subtotal del{opacity:.6; margin-right:6px}
.woocommerce-cart .cc-price ins,
.woocommerce-cart .cc-subtotal ins{font-weight:700; text-decoration:none}

/* ====================================================
   Qty is fixed at 1: don't show duplicate amounts
======================================================== */
.woocommerce-cart .cc-subtotal{display:none}

/* ====================================================
   Focus visibility (a11y)
======================================================== */
.cart-card a:focus-visible,
.cart-actions .button:focus-visible,
.cart_totals .button:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}

/* ====================================================
   Sale styling (unit price only)
======================================================== */
.woocommerce-cart .cc-price del{opacity:.6; margin-right:6px}
.woocommerce-cart .cc-price ins{font-weight:700; text-decoration:none}

/* ====================================================
   Savings row in totals
======================================================== */
.woocommerce-cart .wc-totals-row.savings .label{ color:var(--spar); font-weight:600; margin-top:20px; }
.woocommerce-cart .wc-totals-row.savings .value{ color:var(--spar); font-weight:600; margin-top:20px; }

/* ====================================================
   Samlet row in totals
======================================================== */
.woocommerce-cart .wc-totals-row.subtotal .label{ font-weight:600; margin-top:10px; }
.woocommerce-cart .wc-totals-row.subtotal .value{ font-weight:600; margin-top:10px; }

/* ====================================================
   Print basics
======================================================== */
@media print{
  .wc-summary{ position:static; }
  .cart-card, .wc-summary-card{ box-shadow:none; border-color:#ccc; }
}

/* ====================================================
   Media small screens
======================================================== */
@media (max-width:640px){
  /* full-bleed lane with equal padding left/right */
  .woocommerce-cart .wc-coupon-card,
  .woocommerce-cart .wc-cart-cards,
  .woocommerce-cart .cart-actions,
  .woocommerce-cart .cart_totals.wc-summary-card{
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

/* ====================================================
   Ensure text column can shrink, no overflow
======================================================== */
  .woocommerce-cart .cart-card{ grid-template-columns:84px minmax(0,1fr); box-sizing:border-box; }
  .woocommerce-cart .cc-main, .woocommerce-cart .cc-prices{ min-width:0; }
}

/* ====================================================
   Mobile: make the ORDER OVERVIEW (totals) sit evenly edge-to-edge
======================================================== */
@media (max-width:640px){
  /* Pull the summary lane out to the edges, but keep comfy inner padding */
  .woocommerce-cart .wc-summary{
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    box-sizing: border-box;
  }
/* Ensure the card itself doesn’t add extra outer margins */
  .woocommerce-cart .cart_totals.wc-summary-card{
    margin: 0;
    box-sizing: border-box;
  }
}

@media (max-width:640px){
  .woocommerce-cart .wc-cart-grid{
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* ====================================================
   Hide Update Cart button
======================================================== */
.woocommerce-cart .cart-actions button[name="update_cart"] {
    display: none !important;
}

/* ====================================================
   Hide the custom "Continue shopping" link in .cart-actions
======================================================== */
.woocommerce-cart .cart-actions a.continue-shopping {
    display: none !important;
}

/* ====================================================
   Collapse row of update cart and continue shopping
======================================================== */
.woocommerce-cart .cart-actions {
    gap: 0;            /* if using flex gap */
    margin: 0;         /* remove extra spacing */
    padding: 0;
}

/* ====================================================
   Work on the "coupon" row only
======================================================== */
.woocommerce-cart .wc-totals-row.discount .value {
  display: inline-flex;       /* lay out the children (amount + link) */
  align-items: center;
  gap: 8px;
  font-size: 0;               /* hide the bare text (including the leading "-") */
  white-space: nowrap;
}

/* ====================================================
   Restore normal sizing for the actual elements inside
======================================================== */
.woocommerce-cart .wc-totals-row.discount .value .woocommerce-Price-amount,
.woocommerce-cart .wc-totals-row.discount .value .woocommerce-remove-coupon {
  font-size: 1.0625rem;            /* match your body font size as needed */
  line-height: 1.4;
}

/* ====================================================
   Put the remove link before the amount
======================================================== */
.woocommerce-cart .wc-totals-row.discount .value .woocommerce-remove-coupon {
  order: -1;
}

/* ====================================================
   Re-insert the minus sign before the amount that we hid with font-size:0
======================================================== */
.woocommerce-cart .wc-totals-row.discount .value .woocommerce-Price-amount::before {
  content: "−";
  margin-right: 4px;
  display: inline-block;
}

/* ====================================================
   Reset link styling
======================================================== */
.woocommerce-cart .wc-totals-row.discount .woocommerce-remove-coupon {
  color: red !important;
  font-weight: 400;
  text-decoration: none;
  position: relative;
}

/* ====================================================
   Stack the value (amount) and the Fjern link vertically
======================================================== */
.woocommerce-cart .wc-totals-row.discount .value {
  display: flex;
  flex-direction: column;    /* stack vertically */
  align-items: flex-end;     /* align to the right */
  gap: 2px;                  /* little space between amount and Fjern */
}

/* ====================================================
   Ensure amount sits on top
======================================================== */
.woocommerce-cart .wc-totals-row.discount .value .woocommerce-Price-amount {
  order: -1;
}

/* ====================================================
   Custom Fjern link
======================================================== */

.woocommerce-cart .wc-totals-row.discount .woocommerce-remove-coupon {
  visibility: hidden; /* hide original */
  position: relative;
}

/* ====================================================
   Re-insert Fjern cleanly under the amount
======================================================== */
.woocommerce-cart .wc-totals-row.discount .woocommerce-remove-coupon::before {
  content: "fjern";
  color: #cc0000;
  font-weight: 500;
  font-size: 0.8333rem;
  visibility: visible;
  position: static; /* normal flow so it sits under amount */
  margin-left:5px;
}

/* ====================================================
   Hover: darker red + underline
======================================================== */
.woocommerce-cart .wc-totals-row.discount .woocommerce-remove-coupon:hover::before {
  color: #cc0000;
  text-decoration: underline;
}

/* ====================================================
   Two-line price block
======================================================== */
.woocommerce-cart .elf-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* right-align within the cell */
  line-height: 1.2;
}

/* ====================================================
   Top line (regular price) appearance when visible
======================================================== */
.woocommerce-cart .elf-price-regular del {
  opacity: 0.6;
}

/* ====================================================
   Spacer for non-sale items: keep line height without showing text
======================================================== */
.woocommerce-cart .elf-price-regular.elf-placeholder {
  opacity: 0;             /* invisible but keeps space */
  height: 1.2em;          /* match line-height to reserve exactly one line */
}

/* ====================================================
   Bottom line (current price) emphasis
======================================================== */
.woocommerce-cart .elf-price-current ins {
  text-decoration: none;  /* keep sale price clean */
  font-weight: 600;
}

/* ====================================================
   Bold the bottom/current price on all items
======================================================== */
.woocommerce-cart .elf-price-current {
  font-weight: 600;
}

/* ====================================================
   Keep sale price clean (no underline) and inherit bold
======================================================== */
.woocommerce-cart .elf-price-current ins {
  text-decoration: none;
  font-weight: inherit;
}

/* ====================================================
   Move unit price a bit left inside its cell
======================================================== */
.woocommerce-cart .elf-price {
  margin-right: 16px;   /* adjust to taste (e.g. 6–16px) */
}

/* ====================================================
   Cart: hide the header in the totals box
======================================================== */
.woocommerce-cart .wc-summary__title,
.woocommerce-cart .cart_totals > h2,
.woocommerce-cart .wc-summary h2,
.woocommerce-cart .wc-summary h3 {
  display: none !important;
}