/**
 * Custom Webshop Tweaks for Lizzard — Frontend Stylesheet
 *
 * Architecture:
 *   1. Design tokens (CSS custom properties)
 *   2. Single product — dual-price block
 *   3. Single product — margin card
 *   4. Single product — variable product notice
 *   5. Product cards (loop)
 *   6. Cart / Checkout — tax display
 *   7. Distraction-free checkout
 *   8. Utility / misc
 *
 * All colours and sizes are defined as CSS custom properties at the top.
 * Override them in your theme's Additional CSS to restyle everything at once:
 *
 *   :root {
 *     --cst-brand: #0e3386;
 *     --cst-margin-color: #15803d;
 *   }
 *
 * @package CustomShopTweaks
 */

/* ============================================================================
   1. DESIGN TOKENS
   ========================================================================= */

:root {
  /* Brand / B2B accent */
  --cst-b2b-bg:          #eff6ff;
  --cst-b2b-border:      #bfdbfe;
  --cst-b2b-text:        #1e40af;
  --cst-b2b-dot:         #3b82f6;

  /* Margin / profit card */
  --cst-margin-bg:       #f0fdf4;
  --cst-margin-bg-2:     #dcfce7;
  --cst-margin-border:   #bbf7d0;
  --cst-margin-sep:      #86efac;
  --cst-margin-color:    #15803d;
  --cst-margin-label:    #166534;

  /* Retail price (shown struck-through for B2B) */
  --cst-retail-color:    var(--gz-color-base, #6b7280);
  --cst-retail-size:     0.875rem;

  /* Wholesale price */
  --cst-wholesale-color: var(--gz-color-dark, #111827);
  --cst-wholesale-size:  1.625rem;

  /* Unavailable badge */
  --cst-unavail-bg:      #fef3c7;
  --cst-unavail-border:  #fcd34d;
  --cst-unavail-text:    #92400e;

  /* Savings chip */
  --cst-savings-bg:      #dcfce7;
  --cst-savings-border:  #bbf7d0;
  --cst-savings-text:    #166534;

  /* Radii */
  --cst-r-sm:  6px;
  --cst-r-md:  10px;
  --cst-r-lg:  14px;
  --cst-r-pill: 9999px;

  /* Transitions */
  --cst-transition: 200ms ease;
}

/* ============================================================================
   2. SINGLE PRODUCT — DUAL-PRICE BLOCK
   ========================================================================= */

/* Glozin wraps the price in .glozin-product-price > .price.
   We set the inner layout here. */
.single-product .glozin-product-price .price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1;
}

/* The outer wrapper produced by rewrite_dual_price() */
.cst-dual-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

/* Each price row: label + value side by side */
.cst-dual-price__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.4;
}

/* ── Retail row ──────────────────────────────────────────────────────────── */

.cst-dual-price__row--retail {
  order: 1;
}

.cst-dual-price__label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cst-retail-color);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Retail price value — strike-through when a wholesale price follows */
.cst-dual-price__value--retail {
  font-size: var(--cst-retail-size);
  font-weight: 400;
  color: var(--cst-retail-color);
  white-space: nowrap;
}

/* Uses :has() to strike through the retail value only when a wholesale row
   follows. The original A+B C rule was removed — it targeted descendants of
   the wholesale row (which never contained .cst-dual-price__value--retail)
   and matched nothing. :has() is supported in Chrome 105+, Firefox 121+,
   Safari 15.4+; older browsers skip gracefully (no strikethrough). */
.cst-dual-price__row--retail:has(+ .cst-dual-price__row--wholesale)
.cst-dual-price__value--retail {
  text-decoration: line-through;
  text-decoration-color: var(--cst-retail-color);
  opacity: 0.75;
}

/* Remove spurious <br> WooCommerce sometimes injects */
.cst-dual-price__value--retail br { display: none; }

/* ── Wholesale row ───────────────────────────────────────────────────────── */

.cst-dual-price__row--wholesale {
  order: 2;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2px;
}

.cst-dual-price__row--wholesale .cst-dual-price__label {
  color: var(--cst-wholesale-color);
  font-weight: 600;
}

.cst-dual-price__value--wholesale {
  font-size: var(--cst-wholesale-size);
  font-weight: 700;
  color: var(--cst-wholesale-color);
  line-height: 1;
  letter-spacing: -0.01em;
}

@media (max-width: 767px) {
  .cst-dual-price__value--wholesale {
    font-size: 1.375rem;
  }
}

/* VAT suffix inside wholesale price */
.cst-dual-price__value--wholesale .woocommerce-price-suffix,
.cst-dual-price__value--wholesale .cst-vat-suffix {
  font-size: 0.65em;
  font-weight: 500;
  opacity: 0.75;
  margin-left: 3px;
  vertical-align: baseline;
}

/* Variable product: slot for the savings badge (updated by JS) */
.cst-badge-slot {
  display: inline-flex;
  align-items: center;
}

.cst-badge-slot:empty { display: none; }

.cst-badge-slot__savings {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cst-savings-text);
  background: var(--cst-savings-bg);
  border: 1px solid var(--cst-savings-border);
  border-radius: var(--cst-r-pill);
  padding: 3px 9px;
}

/* Retail-only fallback (no wholesale pricing) */
.cst-dual-price--retail-only .cst-dual-price__row--retail {
  align-items: center;
  gap: 6px;
}

.cst-dual-price--retail-only .cst-dual-price__label {
  font-size: 0.75rem;
  color: var(--cst-retail-color);
  font-weight: 400;
}

.cst-dual-price--retail-only .cst-dual-price__value--retail {
  font-size: var(--cst-wholesale-size);
  font-weight: 700;
  color: var(--cst-wholesale-color);
  text-decoration: none;
  opacity: 1;
}

/* ============================================================================
   3. SINGLE PRODUCT — MARGIN CARD
   ========================================================================= */

.cst-margin-card {
  display: flex;
  align-items: stretch;
  margin-top: 12px;
  background: linear-gradient(135deg, var(--cst-margin-bg), var(--cst-margin-bg-2));
  border: 1px solid var(--cst-margin-border);
  border-radius: var(--cst-r-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--cst-transition), transform var(--cst-transition);
  pointer-events: none;
  max-width: 360px;
}

/* Visible state — set by PHP (static) or JS (dynamic) */
.cst-margin-card--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Empty state — variable product before variation is selected */
.cst-margin-card--empty {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

/* Hint text shown inside the empty placeholder */
.cst-margin-card__hint {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 0.75rem;
  color: var(--cst-margin-label);
  margin: 0;
  opacity: 0;
  transition: opacity var(--cst-transition);
}

.cst-margin-card--empty.cst-margin-card--variable {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  background: transparent;
  border: none;
}

.cst-margin-card--empty.cst-margin-card--variable .cst-margin-card__hint {
  opacity: 1;
}

/* Inner layout: two stats separated by a hairline */
.cst-margin-card__inner {
  display: flex;
  align-items: stretch;
  width: 100%;
}

/* Each stat column */
.cst-margin-card__stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 12px 20px;
  flex: 1;
}

/* Separator between stats */
.cst-margin-card__sep {
  width: 1px;
  background: var(--cst-margin-sep);
  flex-shrink: 0;
  margin: 10px 0;
}

/* Value (big number) */
.cst-margin-card__value {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--cst-margin-color);
  line-height: 1;
  letter-spacing: -0.01em;
}

.cst-margin-card__value--pct::after {
  content: '';
}

/* Label (small all-caps description) */
.cst-margin-card__key {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cst-margin-label);
  line-height: 1;
}

@media (max-width: 400px) {
  .cst-margin-card__stat {
    padding: 10px 14px;
  }
  .cst-margin-card__value {
    font-size: 1.125rem;
  }
}

/* ============================================================================
   4. SINGLE PRODUCT — VARIABLE PRODUCT WHOLESALE NOTICE
   ========================================================================= */

.cst-wholesale-notice {
  min-height: 0;
  margin-top: 8px;
  transition: opacity var(--cst-transition);
}

/* Unavailable badge */
.cst-unavailable-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cst-unavail-text);
  background: var(--cst-unavail-bg);
  border: 1px solid var(--cst-unavail-border);
  border-radius: var(--cst-r-pill);
  padding: 5px 12px;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
}

/* ============================================================================
   5. PRODUCT CARDS (SHOP LOOP)
   ========================================================================= */

/* Outer wrapper for the card price block */
.cst-card-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  line-height: 1;
}

/* Retail price on cards — struck through for B2B users with lower price */
.cst-card-price__retail {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--cst-retail-color);
  text-decoration: line-through;
  text-decoration-color: var(--cst-retail-color);
  opacity: 0.7;
  display: block;
}

/* Remove any <br> injected by WooCommerce */
.cst-card-price__retail br { display: none; }

/* B2B row: badge + price + savings */
.cst-card-price__b2b-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

/* B2B label pill */
.cst-card-price__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--cst-b2b-bg);
  border: 1px solid var(--cst-b2b-border);
  border-radius: var(--cst-r-sm);
  padding: 3px 7px 3px 5px;
  flex-shrink: 0;
}

.cst-card-price__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cst-b2b-dot);
  flex-shrink: 0;
}

.cst-card-price__badge-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cst-b2b-text);
  line-height: 1;
}

/* Wholesale price on card */
.cst-card-price__wholesale {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cst-wholesale-color);
  line-height: 1;
}

.cst-card-price__wholesale .woocommerce-price-suffix,
.cst-card-price__wholesale .cst-vat-suffix {
  font-size: 0.65em;
  font-weight: 500;
  opacity: 0.7;
  margin-left: 2px;
}

/* Savings chip on card */
.cst-card-savings {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cst-savings-text);
  background: var(--cst-savings-bg);
  border: 1px solid var(--cst-savings-border);
  border-radius: var(--cst-r-pill);
  padding: 2px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Glozin product card uses .glozin-product-price; override layout there */
.woocommerce ul.products li.product .cst-card-price {
  width: 100%;
}

/* Ensure Glozin's price wrapper doesn't conflict */
.woocommerce ul.products li.product .price .cst-card-price__b2b-row {
  margin-top: 2px;
}

/* ============================================================================
   6. CART / CHECKOUT — TAX DISPLAY
   ========================================================================= */

/* Hide WooCommerce's default "includes tax" label globally;
   we render it ourselves (controlled) for B2B users only. */
.woocommerce-cart   .cart_totals            .includes_tax,
.woocommerce-checkout .shop_table           .includes_tax,
.woocommerce-checkout-review-order-table    .includes_tax {
  display: none;
}

/* Re-enable for B2B users */
body.cst-b2b-user.woocommerce-cart    .cart_totals  .includes_tax,
body.cst-b2b-user.woocommerce-checkout .shop_table  .includes_tax,
body.cst-b2b-user .woocommerce-checkout-review-order-table .includes_tax {
  display: inline-block;
}

/* Coupon toggle emphasis */
.woocommerce-info .showcoupon {
  font-weight: 600;
  color: var(--gz-color-primary, #0e3386);
}

/* ============================================================================
   7. DISTRACTION-FREE CHECKOUT
   ========================================================================= */

/* Hide navigational chrome */
.glozin-distraction-free-checkout #site-header .header-main__nav,
.glozin-distraction-free-checkout #site-header .header-bottom,
.glozin-distraction-free-checkout #site-header .header-mobile-main__nav,
.glozin-distraction-free-checkout #topbar,
.glozin-distraction-free-checkout #site-footer,
.glozin-distraction-free-checkout .glozin-breadcrumb-navigation-wrapper {
  display: none !important;
}

/* Minimal trust footer */
.cst-checkout-footer {
  border-top: 1px solid var(--gz-border-color, #e5e7eb);
  padding: 28px 24px;
  margin-top: 20px;
}

.cst-checkout-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cst-checkout-footer__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.cst-checkout-footer__nav a {
  font-size: 0.8125rem;
  color: var(--gz-color-base, #374151);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--cst-transition);
}

.cst-checkout-footer__nav a:hover {
  color: var(--gz-color-dark, #111827);
}

.cst-checkout-footer__sep {
  font-size: 0.75rem;
  color: var(--gz-color-base, #374151);
  opacity: 0.35;
}

.cst-checkout-footer__copy {
  font-size: 0.75rem;
  color: var(--gz-color-base, #374151);
  opacity: 0.55;
  margin: 0;
}

/* Email field separator */
#billing_email_field {
  padding-bottom: 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--gz-border-color, #e5e7eb);
}

/* ============================================================================
   8. UTILITY / MISC
   ========================================================================= */

/* Product model display */
.cst-product-model {
  display: block;
  font-size: 0.875rem;
  color: var(--gz-color-base, #374151);
  margin-bottom: 4px;
}

/* ============================================================================
   9. MINIMUM ORDER NOTICE (SLIDE CART)
   ========================================================================= */

/*
 * Sits between the subtotal and the action buttons via the
 * woocommerce_widget_shopping_cart_before_buttons hook.
 * Refreshes automatically with WooCommerce's AJAX fragment system.
 *
 * Visual hierarchy (not-met state):
 *   1. Header: "Minimumbestelling" label + % badge          ← orientation
 *   2. Progress bar (amber fill)                            ← visual progress
 *   3. "Nog nodig" + remaining amount (hero — largest text) ← key number
 *   4. "€XX van €500" (secondary)                          ← context
 *
 * Met state: green full bar + ✓ confirmation.
 *
 * Section 9b: disabled-look for the "Afrekenen" checkout button when the
 * minimum is not met. Uses the CSS adjacent-sibling selector — works because
 * .cst-min-order-notice is the immediate preceding sibling of the buttons <p>.
 */

/* ── Shared wrapper ──────────────────────────────────────────────────────── */

.cst-min-order-notice {
  margin: 0 0 6px;
  padding: 12px 14px 10px;
  border-radius: 10px;
  border: 1.5px solid transparent;
}

/* ── NOT MET — amber warning card ───────────────────────────────────────── */

.cst-min-order-notice--unmet {
  background: #fef3c7;
  border-color: #fbbf24;
}

/* Row 1 — header */
.cst-min-order-notice__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cst-min-order-notice__title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #92400e;
  line-height: 1;
}

.cst-min-order-notice__badge {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #78350f;
  background: #fde68a;
  border: 1px solid #fbbf24;
  border-radius: 9999px;
  padding: 2px 8px;
  line-height: 1.4;
  white-space: nowrap;
}

/* Row 2 — progress bar */
.cst-min-order-bar {
  width: 100%;
  height: 8px;
  background: #fde68a;
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 10px;
}

.cst-min-order-bar__fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%);
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1),
              background 250ms ease;
  min-width: 6px;
}

/* Row 3 — remaining amount (hero) */
.cst-min-order-remaining {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 5px;
}

.cst-min-order-remaining__label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #b45309;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
}

.cst-min-order-remaining__amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: #92400e;
  line-height: 1;
  letter-spacing: -0.02em;
}

.cst-min-order-remaining__amount .woocommerce-Price-currencySymbol {
  font-size: 0.8em;
  vertical-align: 0.1em;
}

/* Row 4 — current / target (secondary) */
.cst-min-order-amounts {
  font-size: 0.75rem;
  color: #b45309;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.8;
}

.cst-min-order-amounts__current {
  font-weight: 600;
}

.cst-min-order-amounts__sep {
  opacity: 0.6;
  font-size: 0.6875rem;
}

.cst-min-order-amounts__target {
  font-weight: 500;
}

/* ── MET state — green success card ─────────────────────────────────────── */

.cst-min-order-notice--met {
  background: #f0fdf4;
  border-color: #86efac;
  padding: 10px 14px;
}

.cst-min-order-notice--met .cst-min-order-bar {
  background: #dcfce7;
  margin-bottom: 8px;
}

.cst-min-order-notice--met .cst-min-order-bar__fill {
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%);
}

.cst-min-order-notice__met {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #166534;
  margin: 0;
  line-height: 1.4;
}

.cst-min-order-notice__check {
  font-size: 0.9375rem;
  color: #16a34a;
  flex-shrink: 0;
}

/* ── Shake animation (checkout blocked by JS) ────────────────────────────── */

@keyframes cst-min-order-shake {
  0%,  100% { transform: translateX(0);    }
  15%        { transform: translateX(-5px); }
  35%        { transform: translateX(5px);  }
  55%        { transform: translateX(-4px); }
  75%        { transform: translateX(4px);  }
  90%        { transform: translateX(-2px); }
}

.cst-min-order-notice--shake {
  animation: cst-min-order-shake 0.5s ease;
}

.cst-min-order-notice--shake .cst-min-order-bar__fill {
  background: linear-gradient(90deg, #dc2626 0%, #f87171 100%);
}

/* ── 9b. Disabled-look for "Afrekenen" when minimum not met ─────────────── */
/*
 * The notice div is the IMMEDIATE preceding sibling of the buttons <p>,
 * so the CSS adjacent-sibling selector (+) works perfectly here.
 *
 * We do NOT set pointer-events:none — cst-frontend.js must be able to
 * intercept the click to play the shake animation and scroll to the notice.
 * The visual treatment (gray, dimmed, not-allowed cursor) communicates
 * "disabled" without actually making the element unclickable.
 */

.cst-min-order-notice--unmet + p.woocommerce-mini-cart__buttons a.checkout,
.cst-min-order-notice--unmet + .woocommerce-mini-cart__buttons a.checkout {
  background-color: #6b7280 !important;
  border-color:     #6b7280 !important;
  color:            #e5e7eb !important;
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Kill Glozin's hover transform + colour change when button is "disabled" */
.cst-min-order-notice--unmet + p.woocommerce-mini-cart__buttons a.checkout:hover,
.cst-min-order-notice--unmet + .woocommerce-mini-cart__buttons a.checkout:hover {
  background-color: #6b7280 !important;
  border-color:     #6b7280 !important;
  color:            #e5e7eb !important;
  opacity: 0.65;
  transform: none !important;
  filter: none !important;
}