/* =========================================================
   CM — Woo Blocks Cart/Checkout (Carl Martin dark theme)
   Targets: .wc-block-cart, .wc-block-checkout (Blocks)
   ========================================================= */

/* ---------- Base tokens (fallbacks) ---------- */
:root{
  --cm-woo-bg: var(--cm-basic-bg, #0b0d10);
  --cm-woo-panel: rgba(255,255,255,.06);
  --cm-woo-border: rgba(255,255,255,.14);
  --cm-woo-border-2: rgba(255,255,255,.22);
  --cm-woo-text: rgba(234,240,255,.92);
  --cm-woo-muted: rgba(234,240,255,.70);

  --cm-woo-radius: 18px;
  --cm-woo-radius-sm: 12px;

  --cm-woo-primary-bg: var(--cm-btn-primary-bg, #7c2bff);
  --cm-woo-primary-text: var(--cm-btn-primary-text, #fff);
}

/* ---------- Page canvas / typography ---------- */
.wc-block-cart,
.wc-block-checkout{
  color: var(--cm-woo-text);
}

.wc-block-cart a,
.wc-block-checkout a{
  color: rgba(255,255,255,.92);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.wc-block-cart a:hover,
.wc-block-checkout a:hover{
  color:#fff;
}

.wc-block-cart h1, .wc-block-cart h2, .wc-block-cart h3,
.wc-block-checkout h1, .wc-block-checkout h2, .wc-block-checkout h3{
  color:#fff;
}

/* ---------- Panels / wrappers ---------- */
.wc-block-cart .wc-block-components-sidebar,
.wc-block-checkout .wc-block-components-sidebar{
  background: var(--cm-woo-bg);
  border: 1px solid var(--cm-woo-border);
  border-radius: var(--cm-woo-radius);
  padding: 22px;
}

.wc-block-cart .wc-block-components-totals-wrapper,
.wc-block-checkout .wc-block-components-totals-wrapper{
  background: transparent;
  border: 0;
}

.wc-block-cart .wc-block-cart__main,
.wc-block-checkout .wc-block-checkout__main{
  background: transparent;
}

/* ---------- Buttons (Blocks) ---------- */
/* Base button look */
.wc-block-components-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button{
  border-radius: 999px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border: 1px solid transparent !important;
  min-height: 44px !important;
  padding: 12px 18px !important;
  text-decoration: none !important; /* IMPORTANT: no underline on buttons */
}

/* Primary CTA (match single-product ATC) */
.wc-block-components-button.wc-block-components-button__primary,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background: var(--cm-woo-primary-bg) !important;
  color: var(--cm-woo-primary-text) !important;
  border: 0 !important;

  box-shadow: 0 18px 40px #00000059 !important;
  text-shadow: 0 1px 2px #00000059 !important;

  min-height: 50px !important;
  padding: 14px 24px !important;

  transform: none !important;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease !important;
}

.wc-block-components-button.wc-block-components-button__primary:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 50px #00000073 !important;
  filter: brightness(1.02) !important;
  text-decoration: none !important;
}

.wc-block-components-button.wc-block-components-button__primary:active,
.wc-block-cart__submit-button:active,
.wc-block-components-checkout-place-order-button:active{
  transform: translateY(0) !important;
  box-shadow: 0 16px 34px #00000066 !important;
}

.wc-block-components-button.wc-block-components-button__primary:disabled,
.wc-block-cart__submit-button:disabled,
.wc-block-components-checkout-place-order-button:disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ---------- Inputs (text/select/textarea) ---------- */
.wc-block-components-text-input input,
.wc-block-components-form-control input,
.wc-block-components-form-control select,
.wc-block-components-form-control textarea{
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  border: 1px solid var(--cm-woo-border) !important;
  border-radius: var(--cm-woo-radius-sm) !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
}

.wc-block-components-text-input input::placeholder,
.wc-block-components-form-control input::placeholder,
.wc-block-components-form-control textarea::placeholder{
  color: rgba(255,255,255,.45) !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-form-control input:focus,
.wc-block-components-form-control select:focus,
.wc-block-components-form-control textarea:focus{
  outline: none !important;
  border-color: rgba(119,227,255,.55) !important;
  box-shadow: 0 0 0 3px rgba(119,227,255,.12) !important;
}

.wc-block-components-text-input label,
.wc-block-components-form-control label{
  color: var(--cm-woo-muted) !important;
  font-weight: 700 !important;
}

/* ---------- Notices / validation ---------- */
.wc-block-components-notice-banner,
.wc-block-components-notices__notice{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--cm-woo-border) !important;
  border-radius: var(--cm-woo-radius-sm) !important;
  color: var(--cm-woo-text) !important;
}

.wc-block-components-validation-error{
  color: rgba(255,180,180,.95) !important;
}

/* ---------- Cart items ---------- */
.wc-block-cart-items__row{
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* Product title link: no underline by default, underline on hover */
.wc-block-cart-item__product a{
  text-decoration: none;
  color: #fff;
}
.wc-block-cart-item__product a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Item meta text */
.wc-block-cart-item__variation,
.wc-block-cart-item__meta{
  color: var(--cm-woo-muted) !important;
}

/* Prices */
.wc-block-components-product-price,
.wc-block-formatted-money-amount{
  color: #fff !important;
  font-weight: 900 !important;
}

/* ---------- Qty selector (Blocks) ---------- */
.wc-block-components-quantity-selector{
  border-radius: 999px !important;
  border: 1px solid var(--cm-woo-border) !important;
  background: rgba(255,255,255,.06) !important;
  overflow: hidden;
}

.wc-block-components-quantity-selector__button{
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  min-height: 34px !important;
  width: 38px !important;
  padding: 0 !important;
  opacity: .9;
}

.wc-block-components-quantity-selector__button:hover{
  opacity: 1;
  background: rgba(255,255,255,.08) !important;
}

.wc-block-components-quantity-selector__input{
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 44px !important;
}

/* ---------- Coupon / promotion panel ---------- */
.wc-block-components-panel{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--cm-woo-radius) !important;
}

.wc-block-components-panel__button{
  color: #fff !important;
  font-weight: 900 !important;
}

/* ---------- Shipping options ---------- */
.wc-block-components-shipping-rates-control__package{
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

/* ---------- Remove (Bin icon) — single clean implementation ---------- */
/* Make sure the ROW is the containing block + reserve room on left */
.wc-block-cart-items__row,
.wc-block-cart-item,
.wc-block-cart-items__row > .wc-block-cart-item__wrap,
.wc-block-cart-items__row > .wc-block-cart-item{
  position: relative !important;
}

.wc-block-cart-items__row,
.wc-block-cart-item{
  padding-left: 42px !important; /* room for icon */
}

/* Button */
.wc-block-cart-item__remove-link{
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;

  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;

  font-size: 0 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: .85 !important;
  z-index: 5 !important;

  border-radius: 10px;
  transition: background .15s ease, transform .12s ease, opacity .15s ease;
}

.wc-block-cart-item__remove-link:hover{
  opacity: 1 !important;
  background: rgba(255,255,255,.08) !important;
  transform: scale(1.05);
}

/* SVG mask icon */
.wc-block-cart-item__remove-link::before{
  content: "";
  width: 16px;
  height: 16px;
  background: #ffffffb3;

  -webkit-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path d='M3 6h18' stroke='black' stroke-width='2' fill='none'/>\
  <path d='M8 6V4h8v2' stroke='black' stroke-width='2' fill='none'/>\
  <path d='M6 6l1 14h10l1-14' stroke='black' stroke-width='2' fill='none'/>\
  <path d='M10 11v6M14 11v6' stroke='black' stroke-width='2' fill='none'/>\
  </svg>") no-repeat center / contain;

  mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path d='M3 6h18' stroke='black' stroke-width='2' fill='none'/>\
  <path d='M8 6V4h8v2' stroke='black' stroke-width='2' fill='none'/>\
  <path d='M6 6l1 14h10l1-14' stroke='black' stroke-width='2' fill='none'/>\
  <path d='M10 11v6M14 11v6' stroke='black' stroke-width='2' fill='none'/>\
  </svg>") no-repeat center / contain;
}

.wc-block-cart-item__remove-link:hover::before{
  background:#fff;
}

/* ---------- Mobile polish ---------- */
@media (max-width: 780px){
  .wc-block-cart .wc-block-components-sidebar,
  .wc-block-checkout .wc-block-components-sidebar{
    padding: 18px;
    border-radius: 16px;
  }

  .wc-block-components-button,
  .wc-block-components-checkout-place-order-button{
    min-height: 46px !important;
  }
}
/* =========================================================
   CM — CHECKOUT POLISH (Blocks)
   ========================================================= */

/* 1) Sticky order summary (desktop) */
@media (min-width: 960px){
  .wc-block-checkout .wc-block-components-sidebar{
    position: sticky;
    top: 110px; /* justér til din header-højde */
    align-self: start;
  }
}

/* 2) Checkout sections as panels */
.wc-block-checkout .wc-block-components-checkout-step{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--cm-woo-radius);
  padding: 18px;
  margin-bottom: 16px;
}

/* 3) Payment methods: card feel */
.wc-block-checkout .wc-block-components-radio-control__option{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 12px 12px;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.wc-block-checkout .wc-block-components-radio-control__option:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

/* 4) Shipping rates: tighten + card */
.wc-block-checkout .wc-block-components-shipping-rates-control__package{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
.wc-block-checkout .wc-block-components-shipping-rates-control__option{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 12px;
}

/* 5) Strong but clean focus ring */
.wc-block-checkout :is(a, button, input, select, textarea):focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(119,227,255,.18) !important;
  border-color: rgba(119,227,255,.55) !important;
}

/* 6) Notices/validation polish */
.wc-block-checkout .wc-block-components-notice-banner,
.wc-block-checkout .wc-block-components-notices__notice{
  padding: 12px 14px !important;
}
.wc-block-checkout .wc-block-components-notice-banner__content{
  font-weight: 650 !important;
}
.wc-block-checkout .wc-block-components-validation-error{
  background: rgba(255,120,120,.10);
  border: 1px solid rgba(255,120,120,.22);
  border-radius: 12px;
  padding: 10px 12px;
}

/* 7) Coupon accordion polish */
.wc-block-checkout .wc-block-components-panel__button{
  text-decoration: none !important;
  opacity: .92;
}
.wc-block-checkout .wc-block-components-panel__button:hover{
  opacity: 1;
}
/* =========================================================
   CHECKOUT — Desktop field grid
   ========================================================= */

@media (min-width: 960px){

  /* Billing form grid */
  .wc-block-checkout .wc-block-components-address-form{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* Full width fields */
  .wc-block-checkout .wc-block-components-address-form .wc-block-components-text-input:nth-child(1), /* Country */
  .wc-block-checkout .wc-block-components-address-form .wc-block-components-text-input:nth-child(4), /* Address */
  .wc-block-checkout .wc-block-components-address-form .wc-block-components-text-input:nth-last-child(1) /* Phone */
  {
    grid-column: span 2;
  }

}
/* =========================================================
   CHECKOUT — Order summary hierarchy
   ========================================================= */

.wc-block-checkout .wc-block-components-totals-item{
  padding: 6px 0;
}

.wc-block-checkout .wc-block-components-totals-item__value{
  font-weight: 800;
}

.wc-block-checkout .wc-block-components-totals-item--total{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.wc-block-checkout .wc-block-components-totals-item--total 
.wc-block-components-totals-item__value{
  font-size: 20px;
  font-weight: 900;
}
/* =========================================================
   CHECKOUT — Payment section emphasis
   ========================================================= */

.wc-block-checkout .wc-block-components-checkout-step--payment-method{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--cm-woo-radius);
  padding: 18px;
  margin-top: 18px;
}
/* =========================================================
   CHECKOUT — Error banner refinement
   ========================================================= */

.wc-block-checkout .wc-block-components-notice-banner.is-error{
  background: rgba(255,70,70,.08) !important;
  border: 1px solid rgba(255,70,70,.25) !important;
}
.wc-block-checkout .wc-block-components-checkout-step__title{
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 14px;
}
/* Country/Region (Woo Blocks) — force dark select */
.wc-block-checkout select#billing-country.wc-block-components-select__select{
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  border: 1px solid var(--cm-woo-border, rgba(255,255,255,.14)) !important;
  border-radius: var(--cm-woo-radius-sm, 12px) !important;
  box-shadow: none !important;
}

/* Hvis den hvide "flade" kommer fra wrapperen */
.wc-block-checkout .wc-block-components-select-control,
.wc-block-checkout .wc-block-components-select-control__control,
.wc-block-checkout .wc-block-components-select-control__control:where(:not(.is-open)){
  background: rgba(255,255,255,.06) !important;
  border-color: var(--cm-woo-border, rgba(255,255,255,.14)) !important;
  border-radius: var(--cm-woo-radius-sm, 12px) !important;
}
/* Checkout — Country/Region label */
.wc-block-checkout label.wc-blocks-components-select__label{
  color: #000 !important;
}
/* ============================================
   CM — CHECKOUT MINIMAL (Blocks)
   ============================================ */

.wc-block-checkout .wc-block-components-sidebar,
.wc-block-cart .wc-block-components-sidebar{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}

.wc-block-checkout .wc-block-components-checkout-step{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: none !important;
  padding: 16px !important;
}

.wc-block-checkout .wc-block-components-checkout-step__title{
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  margin-bottom: 10px !important;
}

.wc-block-components-text-input input,
.wc-block-components-form-control input,
.wc-block-components-form-control select,
.wc-block-components-form-control textarea{
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.14) !important;
}

.wc-block-components-label,
.wc-block-components-text-input label,
.wc-block-components-form-control label{
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  opacity: .85 !important;
}

/* Keep CTA premium but “clean” */
.wc-block-components-button.wc-block-components-button__primary,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  box-shadow: 0 14px 34px rgba(0,0,0,.45) !important;
  transform: none !important;
}
.wc-block-components-button.wc-block-components-button__primary:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{
  transform: none !important;
  filter: brightness(1.03) !important;
}