/* ============================================================
   NV Commerce Core – Bundle Deals v0.5.0
   Nordic Precision Theme — Brand Guideline Compliant
   ============================================================
   Three distinct visual layouts:
     Variant A — Nordic Clean (teal accents, right-aligned prices)
     Variant B — Kaching Inline (horizontal price+badge, per-unit)
     Variant C — Bold Contrast (dark borders, left-aligned, black CTA)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700;800&display=swap');

/* ============================================================
   SHARED BASE — all variants inherit these
   ============================================================ */

.nvcc-bundle {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid #E6E8EC;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(17, 19, 24, 0.04);
  font-family: 'Manrope', -apple-system, sans-serif !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.nvcc-bundle__title {
  margin: 0 0 4px !important;
  color: #111318 !important;
  font-family: 'Sora', sans-serif !important;
  font-size: clamp(16px, 2.2vw, 20px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.nvcc-bundle__subtitle {
  margin: 0 0 10px !important;
  color: #5F6874 !important;
  font-family: 'Manrope', -apple-system, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.nvcc-deals {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.nvcc-deal {
  position: relative;
  border: 1px solid #E6E8EC;
  border-radius: 12px;
  background: #FFFFFF;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nvcc-deal.is-selected {
  border-color: #0F766E;
  box-shadow: 0 2px 10px rgba(17, 19, 24, 0.06);
  background: rgba(15, 118, 110, 0.04);
}

/* --- Deal head: compact grid layout --- */
.nvcc-deal__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
}

.nvcc-deal__radio-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nvcc-deal__radio-wrap input[type="radio"] {
  margin: 0;
  accent-color: #0F766E;
  width: 16px;
  height: 16px;
}

.nvcc-deal__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
}

.nvcc-deal__title {
  color: #111318 !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

.nvcc-deal__subtitle {
  color: #5F6874 !important;
  font-family: 'Manrope', -apple-system, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}

/* --- Discount percentage badge (inline, next to title) --- */
.nvcc-deal__pct-badge {
  display: inline-flex;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(15, 118, 110, 0.1);
  color: #0F766E !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  white-space: nowrap;
}

/* --- Label pill (e.g. Fri frakt) --- */
.nvcc-deal__label {
  display: inline-flex;
  width: max-content;
  padding: 2px 7px;
  border-radius: 9999px;
  background: rgba(15, 118, 110, 0.07);
  border: 1px solid rgba(15, 118, 110, 0.15);
  color: #0F766E !important;
  font-family: 'Manrope', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* --- Prices column --- */
.nvcc-deal__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
  white-space: nowrap;
}

.nvcc-deal__price-current {
  color: #111318 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.nvcc-deal__price-regular {
  color: #9CA3AF !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
  line-height: 1.2 !important;
}

/* --- Per-unit price --- */
.nvcc-deal__per-unit {
  color: #5F6874 !important;
  font-family: 'Manrope', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

/* --- Badge (e.g. Populärast) — centered to avoid price overlap --- */
.nvcc-deal__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 3px 12px;
  border-radius: 9999px;
  background: #0F766E;
  border: 2px solid #FFFFFF;
  color: #FFFFFF !important;
  font-family: 'Manrope', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Badge spacing — give room above the card for the centered badge */
.nvcc-deal:has(> .nvcc-deal__badge),
.nvcc-deal.nvcc-deal--has-badge {
  margin-top: 16px;
}

/* --- Variation mix selectors --- */
.nvcc-deal__mix {
  border-top: 1px solid #E6E8EC;
  padding: 10px 12px 12px;
}

/* Stack variation rows vertically */
.nvcc-deal__mix-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nvcc-deal__mix-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nvcc-deal__mix-row label {
  color: #5F6874 !important;
  font-family: 'Manrope', -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0;
  min-width: 20px;
}

/* --- Variation thumbnail --- */
.nvcc-deal__thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 2px solid #E6E8EC;
  object-fit: cover;
  flex-shrink: 0;
  background: #F5F5F5;
  transition: border-color 0.2s ease;
}

.nvcc-deal.is-selected .nvcc-deal__thumb {
  border-color: #0F766E;
}

.nvcc-deal__select {
  width: 100%;
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid #E6E8EC;
  background: #FFFFFF;
  color: #111318;
  font-family: 'Manrope', -apple-system, sans-serif !important;
  font-size: 13px;
  padding: 5px 8px;
}

.nvcc-deal__select:focus {
  border-color: #0F766E;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.12);
  outline: none;
}

/* --- CTA button --- */
.nvcc-bundle__submit.button,
.nvcc-bundle__submit.button.alt,
.woocommerce .nvcc-bundle__submit.button,
.woocommerce .nvcc-bundle__submit.button.alt {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: none;
  background: #0F766E !important;
  color: #FFFFFF !important;
  font-family: 'Manrope', -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 10px 24px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.nvcc-bundle__submit.button:hover,
.nvcc-bundle__submit.button.alt:hover,
.woocommerce .nvcc-bundle__submit.button:hover,
.woocommerce .nvcc-bundle__submit.button.alt:hover {
  background: #0B5E58 !important;
}

.nvcc-bundle__status {
  min-height: 16px;
  margin: 6px 0 0;
  color: #5F6874 !important;
  font-family: 'Manrope', -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.nvcc-bundle__status.is-error {
  color: #C2410C !important;
}

/* --- Urgency timer bar --- */
.nvcc-bundle__timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 7px 12px;
  border-radius: 8px;
  background: #FFF7ED;
  border: 1px solid #FDBA74;
  color: #C2410C !important;
  font-family: 'Manrope', -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.nvcc-bundle__timer-icon {
  font-size: 15px;
  line-height: 1;
}

.nvcc-bundle__timer-text {
  color: inherit !important;
}

.nvcc-bundle__timer-clock {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: center;
}

.nvcc-bundle__timer.is-expired {
  background: #FEF2F2;
  border-color: #FCA5A5;
  color: #991B1B !important;
}

.nvcc-bundle__timer[hidden] {
  display: none !important;
}

/* --- BOGO badge --- */
.nvcc-deal__bogo-badge {
  display: inline-flex;
  padding: 1px 6px;
  border-radius: 4px;
  background: #DBEAFE;
  color: #1D4ED8 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  white-space: nowrap;
}

/* ============================================================
   VARIANT A — Nordic Clean
   Default teal accent, right-aligned prices, clean cards
   ============================================================ */
/* (uses base styles above — no overrides needed) */

/* ============================================================
   VARIANT B — Kaching Inline
   Price + discount badge on same row as title,
   horizontal layout, per-unit price prominent,
   green accent, slightly rounded
   ============================================================ */
.nvcc-bundle--variant-b {
  border-radius: 12px;
  background: #FAFAFA;
  border-color: #E0E0E0;
}

.nvcc-bundle--variant-b .nvcc-deal {
  border-radius: 10px;
  border-color: #E0E0E0;
  background: #FFFFFF;
}

.nvcc-bundle--variant-b .nvcc-deal.is-selected {
  border-color: #1E8E5A;
  border-width: 2px;
  background: rgba(30, 142, 90, 0.04);
  box-shadow: none;
}

/* In Variant B, prices move inline with the title row */
.nvcc-bundle--variant-b .nvcc-deal__head {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  padding: 10px 12px;
}

.nvcc-bundle--variant-b .nvcc-deal__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
}

.nvcc-bundle--variant-b .nvcc-deal__title {
  font-size: 14px !important;
  grid-column: 1;
  grid-row: 1;
}

.nvcc-bundle--variant-b .nvcc-deal__subtitle {
  grid-column: 1;
  grid-row: 2;
  font-size: 12px !important;
}

.nvcc-bundle--variant-b .nvcc-deal__pct-badge {
  background: rgba(30, 142, 90, 0.1);
  color: #1E8E5A !important;
  font-size: 11px !important;
  padding: 1px 5px;
}

.nvcc-bundle--variant-b .nvcc-deal__label {
  background: rgba(30, 142, 90, 0.07);
  border-color: rgba(30, 142, 90, 0.15);
  color: #1E8E5A !important;
  font-size: 10px !important;
}

.nvcc-bundle--variant-b .nvcc-deal__prices {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.nvcc-bundle--variant-b .nvcc-deal__price-current {
  font-size: 16px !important;
  font-weight: 800 !important;
}

.nvcc-bundle--variant-b .nvcc-deal__price-regular {
  font-size: 11px !important;
}

.nvcc-bundle--variant-b .nvcc-deal__per-unit {
  font-size: 11px !important;
  color: #1E8E5A !important;
  font-weight: 600 !important;
}

.nvcc-bundle--variant-b .nvcc-deal__badge {
  background: #1E8E5A;
}

.nvcc-bundle--variant-b .nvcc-deal__radio-wrap input[type="radio"] {
  accent-color: #1E8E5A;
}

.nvcc-bundle--variant-b .nvcc-bundle__submit.button,
.nvcc-bundle--variant-b .nvcc-bundle__submit.button.alt,
.woocommerce .nvcc-bundle--variant-b .nvcc-bundle__submit.button,
.woocommerce .nvcc-bundle--variant-b .nvcc-bundle__submit.button.alt {
  background: #1E8E5A !important;
  border-radius: 10px;
}

.nvcc-bundle--variant-b .nvcc-bundle__submit.button:hover,
.nvcc-bundle--variant-b .nvcc-bundle__submit.button.alt:hover,
.woocommerce .nvcc-bundle--variant-b .nvcc-bundle__submit.button:hover,
.woocommerce .nvcc-bundle--variant-b .nvcc-bundle__submit.button.alt:hover {
  background: #167A4C !important;
}

.nvcc-bundle--variant-b .nvcc-deal__select:focus {
  border-color: #1E8E5A;
  box-shadow: 0 0 0 2px rgba(30, 142, 90, 0.12);
}

.nvcc-bundle--variant-b .nvcc-deal__thumb {
  border-color: #E0E0E0;
}

.nvcc-bundle--variant-b .nvcc-deal.is-selected .nvcc-deal__thumb {
  border-color: #1E8E5A;
}

.nvcc-bundle--variant-b .nvcc-bundle__timer {
  background: #F0FDF4;
  border-color: #86EFAC;
  color: #166534 !important;
}

.nvcc-bundle--variant-b .nvcc-deal__bogo-badge {
  background: rgba(30, 142, 90, 0.1);
  color: #1E8E5A !important;
}

/* ============================================================
   VARIANT C — Bold Contrast
   Dark borders, left-aligned prices under title,
   thick selected border, black CTA, minimal accent
   ============================================================ */
.nvcc-bundle--variant-c {
  background: #F5F5F0;
  border-color: #D4D4D0;
  border-radius: 10px;
}

.nvcc-bundle--variant-c .nvcc-deal {
  background: #FFFFFF;
  border-color: #D4D4D0;
  border-radius: 8px;
}

.nvcc-bundle--variant-c .nvcc-deal.is-selected {
  border-color: #111318;
  border-width: 2px;
  box-shadow: none;
  background: #FFFFFF;
}

/* In Variant C, prices go under the title (left-aligned) */
.nvcc-bundle--variant-c .nvcc-deal__head {
  grid-template-columns: auto minmax(0, 1fr);
  padding: 10px 12px;
}

.nvcc-bundle--variant-c .nvcc-deal__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}

.nvcc-bundle--variant-c .nvcc-deal__prices {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  grid-column: 2;
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}

.nvcc-bundle--variant-c .nvcc-deal__price-current {
  font-size: 15px !important;
  color: #111318 !important;
}

.nvcc-bundle--variant-c .nvcc-deal__price-regular {
  font-size: 12px !important;
  color: #9CA3AF !important;
}

.nvcc-bundle--variant-c .nvcc-deal__pct-badge {
  background: rgba(17, 19, 24, 0.08);
  color: #111318 !important;
}

.nvcc-bundle--variant-c .nvcc-deal__label {
  background: rgba(17, 19, 24, 0.06);
  border-color: rgba(17, 19, 24, 0.12);
  color: #111318 !important;
}

.nvcc-bundle--variant-c .nvcc-deal__badge {
  background: #111318;
}

.nvcc-bundle--variant-c .nvcc-deal__radio-wrap input[type="radio"] {
  accent-color: #111318;
}

.nvcc-bundle--variant-c .nvcc-deal__per-unit {
  color: #111318 !important;
  font-weight: 600 !important;
}

.nvcc-bundle--variant-c .nvcc-bundle__submit.button,
.nvcc-bundle--variant-c .nvcc-bundle__submit.button.alt,
.woocommerce .nvcc-bundle--variant-c .nvcc-bundle__submit.button,
.woocommerce .nvcc-bundle--variant-c .nvcc-bundle__submit.button.alt {
  background: #111318 !important;
  border-radius: 8px;
}

.nvcc-bundle--variant-c .nvcc-bundle__submit.button:hover,
.nvcc-bundle--variant-c .nvcc-bundle__submit.button.alt:hover,
.woocommerce .nvcc-bundle--variant-c .nvcc-bundle__submit.button:hover,
.woocommerce .nvcc-bundle--variant-c .nvcc-bundle__submit.button.alt:hover {
  background: #2D3038 !important;
}

.nvcc-bundle--variant-c .nvcc-deal__select:focus {
  border-color: #111318;
  box-shadow: 0 0 0 2px rgba(17, 19, 24, 0.08);
}

.nvcc-bundle--variant-c .nvcc-deal__thumb {
  border-color: #D4D4D0;
  border-radius: 4px;
}

.nvcc-bundle--variant-c .nvcc-deal.is-selected .nvcc-deal__thumb {
  border-color: #111318;
}

.nvcc-bundle--variant-c .nvcc-bundle__timer {
  background: #F5F5F0;
  border-color: #D4D4D0;
  color: #111318 !important;
}

.nvcc-bundle--variant-c .nvcc-deal__bogo-badge {
  background: rgba(17, 19, 24, 0.08);
  color: #111318 !important;
}

/* ============================================================
   MOBILE — Compact layout for all variants
   ============================================================ */
@media (max-width: 680px) {
  .nvcc-bundle {
    padding: 14px;
    margin-top: 10px;
    width: 100% !important;
    max-width: 100% !important;
  }

  .nvcc-bundle__title {
    font-size: 16px !important;
    margin-bottom: 2px !important;
  }

  .nvcc-bundle__subtitle {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }

  .nvcc-deals {
    gap: 6px;
    margin-bottom: 8px;
  }

  .nvcc-deal__head {
    padding: 8px 10px;
    gap: 6px;
  }

  .nvcc-deal__title {
    font-size: 14px !important;
  }

  .nvcc-deal__subtitle {
    font-size: 12px !important;
  }

  .nvcc-deal__price-current {
    font-size: 14px !important;
  }

  .nvcc-deal__price-regular {
    font-size: 11px !important;
  }

  .nvcc-deal__mix {
    padding: 8px 10px 10px;
  }

  /* Stack variation rows on mobile too */
  .nvcc-deal__mix-grid {
    flex-direction: column;
    gap: 6px;
  }

  .nvcc-deal__mix-row {
    gap: 6px;
  }

  .nvcc-deal__mix-row label {
    font-size: 11px !important;
    min-width: 16px;
  }

  .nvcc-deal__select {
    min-height: 34px;
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 6px;
  }

  .nvcc-bundle__submit.button,
  .nvcc-bundle__submit.button.alt,
  .woocommerce .nvcc-bundle__submit.button,
  .woocommerce .nvcc-bundle__submit.button.alt {
    min-height: 42px;
    font-size: 14px !important;
    padding: 8px 20px;
  }

  /* Badge: centered, with generous spacing on mobile */
  .nvcc-deal__badge {
    font-size: 10px !important;
    padding: 2px 10px;
    top: -9px;
    /* Keep centered from base — no right override */
  }

  .nvcc-deal:has(> .nvcc-deal__badge),
  .nvcc-deal.nvcc-deal--has-badge {
    margin-top: 18px;
  }

  .nvcc-deal__label {
    font-size: 10px !important;
    padding: 1px 5px;
  }

  .nvcc-deal__pct-badge {
    font-size: 10px !important;
    padding: 1px 4px;
  }

  /* Thumbnails: 42px on mobile — clearly visible */
  .nvcc-deal__thumb {
    width: 42px;
    height: 42px;
    border-radius: 6px;
  }

  .nvcc-bundle__timer {
    font-size: 12px !important;
    padding: 6px 10px;
  }
}

@media (max-width: 380px) {
  .nvcc-deal__mix-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Elementor container breakout — ensure bundle fills column
   ============================================================ */
.elementor-widget-container > .nvcc-bundle,
.elementor-widget-container .nvcc-bundle,
.elementor-shortcode > .nvcc-bundle,
.elementor-shortcode .nvcc-bundle,
.elementor-widget-shortcode .nvcc-bundle,
.elementor-widget-text-editor .nvcc-bundle,
.elementor-widget-woocommerce-add-to-cart .nvcc-bundle,
.woocommerce div.product .nvcc-bundle,
.e-con .nvcc-bundle,
.e-con-inner .nvcc-bundle {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.elementor-shortcode:has(> .nvcc-bundle),
.elementor-widget-shortcode .elementor-widget-container:has(.nvcc-bundle) {
  padding: 0 !important;
  width: 100% !important;
}

.elementor-widget-shortcode .elementor-widget-container,
.elementor-widget-text-editor .elementor-widget-container {
  overflow: visible;
}