/* ═══════════════════════════════════════════════════════════════════════
 * FEF Cart Widget
 * A full inline WooCommerce cart. Every value is driven by a --fef-fc-* CSS
 * variable set inline on .fef-fc-widget by the PHP render() method, so the
 * Style tab controls flow straight through here. Sensible fallbacks are
 * baked in so the widget looks finished before a single control is touched.
 * ═══════════════════════════════════════════════════════════════════════ */

.fef-fc-widget,
.fef-fc-widget * { box-sizing: border-box; }

.fef-fc-widget {
  /* ── Container ── */
  --fef-fc-maxw: 100%;
  --fef-fc-minh: 0px;
  --fef-fc-bg: transparent;
  --fef-fc-bg-hover: transparent;
  --fef-fc-radius: 16px;
  --fef-fc-padding: 0;
  --fef-fc-transition: 250ms;
  --fef-fc-gap: 32px;
  --fef-fc-items-ratio: 62%;

  /* ── Items column ── */
  --fef-fc-li-bg: #ffffff;
  --fef-fc-li-radius: 14px;
  --fef-fc-li-padding: 20px;

  /* ── Summary column ── */
  --fef-fc-rs-bg: #f8fafc;
  --fef-fc-rs-radius: 14px;
  --fef-fc-rs-padding: 22px;
  --fef-fc-rs-sticky-top: 24px;

  /* ── Headings / header row ── */
  --fef-fc-sumtitle-color: #0f172a;
  --fef-fc-thead-bg: transparent;
  --fef-fc-thead-color: #64748b;
  --fef-fc-thead-border: #e2e8f0;
  --fef-fc-thead-border-w: 2px;

  /* ── Rows / cells ── */
  --fef-fc-row-bg: transparent;
  --fef-fc-row-bg-hover: rgba(15,23,42,.03);
  --fef-fc-row-alt-bg: #f8fafc;
  --fef-fc-cell-padding: 16px 12px;
  --fef-fc-row-radius: 0;
  --fef-fc-row-divider: #e2e8f0;
  --fef-fc-row-divider-w: 1px;
  --fef-fc-row-divider-style: solid;
  --fef-fc-col-divider: #eef2f6;
  --fef-fc-col-divider-w: 0px;

  /* ── Item elements ── */
  --fef-fc-thumb-size: 72px;
  --fef-fc-thumb-radius: 10px;
  --fef-fc-thumb-scale: 1.05;
  --fef-fc-name-color: #0f172a;
  --fef-fc-name-color-hover: #2563eb;
  --fef-fc-meta-color: #94a3b8;
  --fef-fc-price-color: #334155;
  --fef-fc-sub-color: #0f172a;

  /* ── Quantity ── */
  --fef-fc-qty-bg: #ffffff;
  --fef-fc-qty-color: #0f172a;
  --fef-fc-qty-border: #e2e8f0;
  --fef-fc-qty-radius: 10px;
  --fef-fc-qbtn-color: #64748b;
  --fef-fc-qbtn-bg: transparent;
  --fef-fc-qbtn-color-hover: #ffffff;
  --fef-fc-qbtn-bg-hover: #0f172a;

  /* ── Remove ── */
  --fef-fc-rem-size: 18px;
  --fef-fc-rem-color: #94a3b8;
  --fef-fc-rem-bg: transparent;
  --fef-fc-rem-color-hover: #ffffff;
  --fef-fc-rem-bg-hover: #ef4444;
  --fef-fc-rem-rotate: 0deg;
  --fef-fc-rem-pad: 8px;
  --fef-fc-rem-radius: 50%;

  /* ── Calculations ── */
  --fef-fc-calc-label: #475569;
  --fef-fc-calc-value: #0f172a;
  --fef-fc-calc-gap: 10px;
  --fef-fc-calc-divider: #e9eef4;
  --fef-fc-calc-divider-w: 1px;
  --fef-fc-sub-line-color: inherit;
  --fef-fc-disc-bg: rgba(22,163,74,.08);
  --fef-fc-disc-color: #16a34a;
  --fef-fc-disc-code: #15803d;
  --fef-fc-disc-pad: 8px 10px;
  --fef-fc-disc-radius: 8px;
  --fef-fc-tax-color: #64748b;
  --fef-fc-total-color: #0f172a;
  --fef-fc-total-bg: transparent;
  --fef-fc-total-border: #cbd5e1;
  --fef-fc-icon-color: #94a3b8;

  /* ── Coupon ── */
  --fef-fc-cin-bg: #ffffff;
  --fef-fc-cin-color: #0f172a;
  --fef-fc-cin-border: #cbd5e1;
  --fef-fc-cin-focus: #2563eb;
  --fef-fc-cin-height: 44px;
  --fef-fc-cin-radius: 10px;
  --fef-fc-cbtn-bg: #0f172a;
  --fef-fc-cbtn-color: #ffffff;
  --fef-fc-cbtn-bg-hover: #334155;
  --fef-fc-cbtn-color-hover: #ffffff;
  --fef-fc-cbtn-radius: 10px;
  --fef-fc-chip-bg: rgba(22,163,74,.10);
  --fef-fc-chip-color: #15803d;

  /* ── Validation ── */
  --fef-fc-valid-width: 100%;
  --fef-fc-valid-minh: 0px;
  --fef-fc-valid-pad: 8px 12px;
  --fef-fc-valid-radius: 8px;
  --fef-fc-valid-ok-bg: rgba(22,163,74,.10);
  --fef-fc-valid-ok-color: #15803d;
  --fef-fc-valid-err-bg: rgba(220,38,38,.10);
  --fef-fc-valid-err-color: #b91c1c;

  /* ── Checkout / secondary buttons ── */
  --fef-fc-co-bg: #16a34a;
  --fef-fc-co-color: #ffffff;
  --fef-fc-co-bg-hover: #15803d;
  --fef-fc-co-color-hover: #ffffff;
  --fef-fc-co-scale: 1;
  --fef-fc-co-radius: 12px;
  --fef-fc-co-pad: 15px 22px;
  --fef-fc-sec-bg: #ffffff;
  --fef-fc-sec-color: #0f172a;
  --fef-fc-sec-border: #cbd5e1;
  --fef-fc-sec-bg-hover: #f1f5f9;

  /* ── Notes / tooltip / highlight ── */
  --fef-fc-note-bg: rgba(37,99,235,.06);
  --fef-fc-note-color: #2563eb;
  --fef-fc-note-pad: 4px 8px;
  --fef-fc-note-radius: 6px;
  --fef-fc-tip-bg: #0f172a;
  --fef-fc-tip-color: #ffffff;
  --fef-fc-hl-bg: rgba(250,204,21,.16);
  --fef-fc-hl-border: #f59e0b;
  --fef-fc-hl-duration: 1600ms;

  /* ── WooCommerce notices ── */
  --fef-fc-wcn-bg: #ecfdf5;
  --fef-fc-wcn-color: #065f46;
  --fef-fc-wcn-accent: #16a34a;
  --fef-fc-wcn-pad: 12px 16px;
  --fef-fc-wcn-radius: 10px;
  --fef-fc-wcn-link: #065f46;

  /* ── Empty ── */
  --fef-fc-empty-icon-color: #cbd5e1;
  --fef-fc-empty-icon-size: 56px;
  --fef-fc-empty-color: #64748b;

  max-width: var(--fef-fc-maxw);
  min-height: var(--fef-fc-minh);
  margin-inline: auto;
  background: var(--fef-fc-bg);
  border-radius: var(--fef-fc-radius);
  padding: var(--fef-fc-padding);
  transition: background var(--fef-fc-transition) ease, box-shadow var(--fef-fc-transition) ease;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
}
.fef-fc-widget:hover { background: var(--fef-fc-bg-hover); }

/* ── Grid / layouts ── */
.fef-fc-grid {
  display: grid;
  gap: var(--fef-fc-gap);
  align-items: start;
}
/* Left / right (interchangeable via order) */
.fef-fc-items-left  .fef-fc-grid { grid-template-columns: var(--fef-fc-items-ratio) 1fr; }
.fef-fc-items-right .fef-fc-grid { grid-template-columns: 1fr var(--fef-fc-items-ratio); }
.fef-fc-items-right .fef-fc-col-items   { order: 2; }
.fef-fc-items-right .fef-fc-col-summary { order: 1; }
/* Top / bottom (interchangeable via order) */
.fef-fc-items-top    .fef-fc-grid,
.fef-fc-items-bottom .fef-fc-grid { grid-template-columns: 1fr; }
.fef-fc-items-bottom .fef-fc-col-items   { order: 2; }
.fef-fc-items-bottom .fef-fc-col-summary { order: 1; }

/* ── Columns ── */
.fef-fc-col-items {
  background: var(--fef-fc-li-bg);
  border-radius: var(--fef-fc-li-radius);
  padding: var(--fef-fc-li-padding);
}
.fef-fc-col-summary {
  background: var(--fef-fc-rs-bg);
  border-radius: var(--fef-fc-rs-radius);
  padding: var(--fef-fc-rs-padding);
}
.fef-fc-sticky .fef-fc-col-summary { position: sticky; top: var(--fef-fc-rs-sticky-top); }

/* ── Items: DIV + FLEX layout (no <table>) ──────────────────────────────
   The header row and every item row share the SAME flex column widths, so
   columns line up on desktop exactly like a table used to — but the whole
   thing restacks trivially on mobile with no display-swapping hacks.        */
.fef-fc-table-wrap { width: 100%; }
.fef-fc-table { width: 100%; }

.fef-fc-head,
.fef-fc-row { display: flex; align-items: center; }

.fef-fc-head {
  background: var(--fef-fc-thead-bg);
  border-bottom: var(--fef-fc-thead-border-w) solid var(--fef-fc-thead-border);
}
.fef-fc-hcell {
  padding: var(--fef-fc-cell-padding);
  color: var(--fef-fc-thead-color);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}

/* Every cell uses border-box so its padding is INCLUDED in the flex width —
   otherwise the padding is added on top and the row overflows the card. */
.fef-fc-head, .fef-fc-row { max-width: 100%; box-sizing: border-box; }
.fef-fc-cell, .fef-fc-hcell { box-sizing: border-box; }
/* Flush the outer edges so the row lines up with the card border. */
.fef-fc-head > :first-child, .fef-fc-row > :first-child { padding-left: 0; }
.fef-fc-head > :last-child,  .fef-fc-row > :last-child  { padding-right: 0; }

/* Shared column widths — one source of truth for header + cells.
   `flex: 0 1 <w>` lets the numeric columns shrink a little on tighter desktop
   widths instead of forcing horizontal overflow. */
.fef-fc-h-thumb,    .fef-fc-cell-thumb    { flex: 0 0 calc(var(--fef-fc-thumb-size) + 16px); width: calc(var(--fef-fc-thumb-size) + 16px); }
.fef-fc-h-name,     .fef-fc-cell-name     { flex: 1 1 auto; min-width: 0; }
.fef-fc-h-price,    .fef-fc-cell-price    { flex: 0 1 110px; width: 110px; text-align: right; }
.fef-fc-h-qty,      .fef-fc-cell-qty      { flex: 0 0 128px; width: 128px; }
.fef-fc-h-subtotal, .fef-fc-cell-subtotal { flex: 0 1 120px; width: 120px; text-align: right; }
.fef-fc-h-remove,   .fef-fc-cell-remove   { flex: 0 0 56px;  width: 56px; }
.fef-fc-h-price, .fef-fc-h-subtotal { text-align: right; }
.fef-fc-h-qty { text-align: center; }

.fef-fc-row { background: var(--fef-fc-row-bg);
  border-bottom: var(--fef-fc-row-divider-w) var(--fef-fc-row-divider-style) var(--fef-fc-row-divider); }
.fef-fc-row:last-child { border-bottom: 0; }
.fef-fc-widget[data-rowhover="1"] .fef-fc-row { transition: background .18s ease; }
.fef-fc-widget[data-rowhover="1"] .fef-fc-row:hover { background: var(--fef-fc-row-bg-hover); }
.fef-fc-row-alt { background: var(--fef-fc-row-alt-bg); }

.fef-fc-cell { padding: var(--fef-fc-cell-padding); min-width: 0; }
.fef-fc-cell + .fef-fc-cell { border-left: var(--fef-fc-col-divider-w) solid var(--fef-fc-col-divider); }
.fef-fc-cell-qty    { display: flex; align-items: center; justify-content: center; }
/* Keep the remove button hard against the right edge and never wider than its column. */
.fef-fc-cell-remove { display: flex; align-items: center; justify-content: flex-end; }

.fef-fc-row-busy { opacity: .55; pointer-events: none; }
.fef-fc-row-removing { opacity: 0; transform: translateX(12px); transition: opacity .25s ease, transform .25s ease; }

/* ── Thumbnail ── */
.fef-fc-thumb { display: inline-block; overflow: hidden; border-radius: var(--fef-fc-thumb-radius); }
.fef-fc-thumb img {
  width: var(--fef-fc-thumb-size); height: var(--fef-fc-thumb-size);
  object-fit: cover; display: block; border-radius: var(--fef-fc-thumb-radius);
  transition: transform .3s ease;
}
.fef-fc-thumb:hover img { transform: scale(var(--fef-fc-thumb-scale)); }

/* ── Name / meta / note ── */
.fef-fc-name {
  color: var(--fef-fc-name-color); font-weight: 600; text-decoration: none; line-height: 1.35;
  transition: color .18s ease;
}
.fef-fc-name:hover { color: var(--fef-fc-name-color-hover); }
.fef-fc-meta { margin-top: 4px; font-size: 12px; color: var(--fef-fc-meta-color); }
.fef-fc-meta p { margin: 0; }
.fef-fc-note {
  display: inline-block; margin-top: 6px;
  background: var(--fef-fc-note-bg); color: var(--fef-fc-note-color);
  padding: var(--fef-fc-note-pad); border-radius: var(--fef-fc-note-radius);
  font-size: 12px; font-weight: 500;
}

/* ── Price / subtotal ── */
.fef-fc-price { color: var(--fef-fc-price-color); }
.fef-fc-subtotal { color: var(--fef-fc-sub-color); font-weight: 600; }
.fef-fc-price del, .fef-fc-subtotal del { opacity: .55; font-weight: 400; }

/* ── Quantity stepper ── */
.fef-fc-qty {
  display: inline-flex; align-items: center;
  background: var(--fef-fc-qty-bg);
  border: 1px solid var(--fef-fc-qty-border);
  border-radius: var(--fef-fc-qty-radius);
  overflow: hidden;
}
.fef-fc-qbtn {
  border: 0; cursor: pointer; width: 34px; height: 36px; line-height: 1;
  font-size: 18px; font-weight: 600;
  color: var(--fef-fc-qbtn-color); background: var(--fef-fc-qbtn-bg);
  transition: background .15s ease, color .15s ease;
}
.fef-fc-qbtn:hover { color: var(--fef-fc-qbtn-color-hover); background: var(--fef-fc-qbtn-bg-hover); }
.fef-fc-qnum { min-width: 34px; text-align: center; color: var(--fef-fc-qty-color); font-weight: 600; }

/* ── Remove ── */
.fef-fc-remove {
  border: 0; cursor: pointer;
  color: var(--fef-fc-rem-color); background: var(--fef-fc-rem-bg);
  padding: var(--fef-fc-rem-pad); border-radius: var(--fef-fc-rem-radius);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.fef-fc-remove svg { width: var(--fef-fc-rem-size); height: var(--fef-fc-rem-size); display: block; }
.fef-fc-remove:hover {
  color: var(--fef-fc-rem-color-hover); background: var(--fef-fc-rem-bg-hover);
  transform: rotate(var(--fef-fc-rem-rotate));
}

/* ── Summary title ── */
.fef-fc-summary-title {
  margin: 0 0 14px; color: var(--fef-fc-sumtitle-color);
  font-size: 18px; font-weight: 700; line-height: 1.3;
}

/* ═══════════════ Calculations ═══════════════ */
.fef-fc-calc { display: flex; flex-direction: column; gap: var(--fef-fc-calc-gap); margin: 4px 0 16px; }
.fef-fc-calc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: var(--fef-fc-calc-gap);
  border-bottom: var(--fef-fc-calc-divider-w) solid var(--fef-fc-calc-divider);
}
.fef-fc-calc-row:last-child { border-bottom: 0; padding-bottom: 0; }
.fef-fc-calc-label { color: var(--fef-fc-calc-label); display: inline-flex; align-items: center; gap: 7px; }
.fef-fc-calc-value { color: var(--fef-fc-calc-value); font-weight: 600; white-space: nowrap; }
.fef-fc-calc-icon { display: inline-flex; color: var(--fef-fc-icon-color); }
.fef-fc-calc-icon svg, .fef-fc-calc-icon i { width: 1em; height: 1em; font-size: 15px; }

/* Subtotal line */
.fef-fc-calc-subtotal .fef-fc-calc-value { color: var(--fef-fc-sub-line-color); }

/* Discount line — highlighted so savings read louder */
.fef-fc-calc-discount {
  background: var(--fef-fc-disc-bg);
  padding: var(--fef-fc-disc-pad);
  border-radius: var(--fef-fc-disc-radius);
  border-bottom: 0 !important;
}
.fef-fc-calc-discount .fef-fc-calc-label { color: var(--fef-fc-disc-color); font-weight: 600; }
.fef-fc-calc-discount .fef-fc-calc-code {
  margin-left: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--fef-fc-disc-code); background: rgba(255,255,255,.6);
  padding: 1px 6px; border-radius: 5px;
}
.fef-fc-calc-value-neg { color: var(--fef-fc-disc-color) !important; }

/* Tax lines */
.fef-fc-calc-tax .fef-fc-calc-label,
.fef-fc-calc-tax .fef-fc-calc-value { color: var(--fef-fc-tax-color); }

/* Grand total */
.fef-fc-calc-total {
  margin-top: 4px; padding-top: 12px;
  border-top: 2px solid var(--fef-fc-total-border);
  border-bottom: 0 !important;
  background: var(--fef-fc-total-bg);
  border-radius: var(--fef-fc-disc-radius);
}
.fef-fc-calc-total .fef-fc-calc-label { color: var(--fef-fc-total-color); font-weight: 700; }
.fef-fc-calc-total .fef-fc-calc-value { color: var(--fef-fc-total-color); font-weight: 800; font-size: 19px; }

/* ═══════════════ Coupon + validation ═══════════════ */
.fef-fc-coupon-box { margin-bottom: 16px; }
.fef-fc-coupon-row { display: flex; gap: 8px; }
.fef-fc-coupon-input {
  flex: 1 1 auto; min-width: 0;
  height: var(--fef-fc-cin-height);
  background: var(--fef-fc-cin-bg); color: var(--fef-fc-cin-color);
  border: 1px solid var(--fef-fc-cin-border); border-radius: var(--fef-fc-cin-radius);
  padding: 0 14px; font-size: 14px; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fef-fc-coupon-input:focus {
  border-color: var(--fef-fc-cin-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fef-fc-cin-focus) 18%, transparent);
}
.fef-fc-coupon-apply {
  flex: 0 0 auto; cursor: pointer; border: 0;
  height: var(--fef-fc-cin-height); padding: 0 18px;
  background: var(--fef-fc-cbtn-bg); color: var(--fef-fc-cbtn-color);
  border-radius: var(--fef-fc-cbtn-radius); font-weight: 600; font-size: 14px;
  transition: background .15s ease, color .15s ease;
}
.fef-fc-coupon-apply:hover { background: var(--fef-fc-cbtn-bg-hover); color: var(--fef-fc-cbtn-color-hover); }
.fef-fc-coupon-apply:disabled { opacity: .6; cursor: default; }

/* Validation message — its own box (width / min-height / bg per state) */
.fef-fc-validation {
  display: none; margin-top: 10px;
  width: var(--fef-fc-valid-width); min-height: var(--fef-fc-valid-minh);
  padding: var(--fef-fc-valid-pad); border-radius: var(--fef-fc-valid-radius);
  font-size: 13px; font-weight: 500; line-height: 1.4;
  align-items: center;
}
.fef-fc-validation.fef-fc-valid-show { display: flex; }
.fef-fc-valid-ok  { background: var(--fef-fc-valid-ok-bg);  color: var(--fef-fc-valid-ok-color); }
.fef-fc-valid-err { background: var(--fef-fc-valid-err-bg); color: var(--fef-fc-valid-err-color); }

/* Applied-coupon chips */
.fef-fc-coupons { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.fef-fc-coupon {
  display: flex; align-items: center; gap: 8px;
  background: var(--fef-fc-chip-bg); color: var(--fef-fc-chip-color);
  padding: 7px 10px; border-radius: 8px; font-size: 13px;
}
.fef-fc-coupon-tag { flex: 0 0 auto; }
.fef-fc-coupon-code { font-weight: 700; letter-spacing: .03em; }
.fef-fc-coupon-saved { margin-left: auto; font-weight: 600; }
.fef-fc-coupon-x {
  flex: 0 0 auto; cursor: pointer; border: 0; background: transparent;
  color: currentColor; opacity: .6; display: inline-flex; padding: 2px; border-radius: 4px;
}
.fef-fc-coupon-x svg { width: 14px; height: 14px; display: block; }
/* No hover animation — static to avoid flicker. */
.fef-fc-coupon-x:disabled { opacity: .35; cursor: default; }

/* ═══════════════ Buttons ═══════════════ */
.fef-fc-checkout {
  display: block; width: 100%; text-align: center; cursor: pointer;
  text-decoration: none; border: 0; box-sizing: border-box;
  background: var(--fef-fc-co-bg); color: var(--fef-fc-co-color);
  padding: var(--fef-fc-co-pad); border-radius: var(--fef-fc-co-radius);
  font-weight: 700; font-size: 15px; line-height: 1.2;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.fef-fc-checkout:hover { background: var(--fef-fc-co-bg-hover); color: var(--fef-fc-co-color-hover); }

.fef-fc-items-footer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.fef-fc-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  text-decoration: none; box-sizing: border-box;
  background: var(--fef-fc-sec-bg); color: var(--fef-fc-sec-color);
  border: 1px solid var(--fef-fc-sec-border); border-radius: 10px;
  padding: 10px 16px; font-weight: 600; font-size: 14px;
  transition: background .15s ease, border-color .15s ease;
}
.fef-fc-btn-secondary:hover { background: var(--fef-fc-sec-bg-hover); }
.fef-fc-continue-wrap { margin-top: 16px; }

/* ═══════════════ Empty state ═══════════════ */
.fef-fc-empty { text-align: center; padding: 40px 20px; }
.fef-fc-empty-icon { color: var(--fef-fc-empty-icon-color); margin-bottom: 12px; }
.fef-fc-empty-icon svg, .fef-fc-empty-icon i {
  width: var(--fef-fc-empty-icon-size); height: var(--fef-fc-empty-icon-size);
  font-size: var(--fef-fc-empty-icon-size);
}
.fef-fc-empty-msg { color: var(--fef-fc-empty-color); font-size: 16px; margin-bottom: 16px; }
.fef-fc-is-empty .fef-fc-col-summary,
.fef-fc-is-empty .fef-fc-items-footer,
.fef-fc-is-empty .fef-fc-continue-wrap { display: none; }
.fef-fc-is-empty .fef-fc-head { display: none; }

/* ═══════════════ Highlight pulse ═══════════════ */
.fef-fc-row-highlight { position: relative; }
@keyframes fef-fc-pulse {
  0%   { background: var(--fef-fc-hl-bg); box-shadow: inset 3px 0 0 var(--fef-fc-hl-border); }
  100% { background: transparent;         box-shadow: inset 3px 0 0 transparent; }
}
.fef-fc-row.fef-fc-pulse { animation: fef-fc-pulse var(--fef-fc-hl-duration) ease-out 1; }

/* Tooltip (native title enhanced only where tips enabled) */
.fef-fc-widget[data-tips="1"] [title] { cursor: help; }

/* ═══════════════ Two-step ═══════════════ */
.fef-fc-twostep .fef-fc-col-summary[hidden] { display: none; }
.fef-fc-step-2 .fef-fc-continue-wrap { display: none; }

/* ═══════════════ WooCommerce notices ═══════════════ */
.fef-fc-wcnotices .woocommerce-notices-wrapper:empty { display: none; }
.fef-fc-wcnotices .woocommerce-message,
.fef-fc-wcnotices .woocommerce-info,
.fef-fc-wcnotices .woocommerce-error li,
.fef-fc-wcnotices .woocommerce-message li {
  list-style: none; margin: 0 0 10px;
  background: var(--fef-fc-wcn-bg); color: var(--fef-fc-wcn-color);
  border-left: 4px solid var(--fef-fc-wcn-accent);
  padding: var(--fef-fc-wcn-pad); border-radius: var(--fef-fc-wcn-radius);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.fef-fc-wcnotices .woocommerce-message::before,
.fef-fc-wcnotices .woocommerce-info::before { display: none; }
.fef-fc-wcnotices .woocommerce-message a,
.fef-fc-wcnotices .woocommerce-info a,
.fef-fc-wcnotices .wc-forward { color: var(--fef-fc-wcn-link); }
.fef-fc-wcnotices .button, .fef-fc-wcnotices .wc-forward {
  margin-left: auto; font-size: 13px; text-decoration: underline;
}
.fef-fc-wcn-inline { margin-bottom: 14px; }
.fef-fc-wcn-above  { margin-bottom: 18px; }
/* Fixed strips */
.fef-fc-wcn-fixed { position: fixed; left: 0; right: 0; z-index: 9999; padding: 12px 18px; pointer-events: none; }
.fef-fc-wcn-fixed .woocommerce-notices-wrapper { max-width: 720px; margin: 0 auto; pointer-events: auto; }
.fef-fc-wcn-fixed .woocommerce-message { box-shadow: 0 8px 30px rgba(2,6,23,.18); }
.fef-fc-wcn-top    { top: 0; }
.fef-fc-wcn-bottom { bottom: 0; }

/* ═══════════════ Responsive / stacked ═══════════════ */
@media (max-width: 880px) {
  .fef-fc-grid { grid-template-columns: 1fr !important; }
  .fef-fc-col-items,
  .fef-fc-col-summary { order: initial; }
}
/* ── Mobile: each item becomes a self-contained card ──────────────────────
   Because the cells are now real <div>s, we just switch the flex row to a
   block stack. Thumbnail floats top-left; name + variation + note sit beside
   it; price / quantity / subtotal become full-width label:value rows; the
   remove button floats in the top-right corner. All colours come from the
   widget's own CSS variables, so the Style tab still drives everything.      */
@media (max-width: 767px) {
  .fef-fc-head { display: none; }

  .fef-fc-row {
    display: block;
    position: relative;
    padding: 16px;
    margin-bottom: 14px;
    background: var(--fef-fc-row-bg);
    border: 1px solid var(--fef-fc-row-divider) !important;
    border-radius: var(--fef-fc-row-radius, 14px);
    overflow: hidden;
  }
  .fef-fc-row:last-child { margin-bottom: 0; }

  .fef-fc-cell { display: block; width: auto; padding: 0; border-left: 0 !important; }

  /* Row 1 — thumbnail (left) + name / variation / note (right). */
  .fef-fc-cell-thumb { float: left; width: 72px; margin: 0 12px 12px 0; }
  .fef-fc-thumb, .fef-fc-thumb img { width: 72px; height: 72px; }
  .fef-fc-cell-name { overflow: hidden; margin-bottom: 12px; padding-right: 36px; }
  .fef-fc-cell-name .fef-fc-name { display: block; font-size: 15px; }

  /* Rows 2–4 — full-width label : value lines. */
  .fef-fc-cell-price,
  .fef-fc-cell-qty,
  .fef-fc-cell-subtotal {
    clear: both;
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; text-align: left;
  }
  .fef-fc-cell-price { padding-top: 11px; border-top: 1px solid var(--fef-fc-row-divider); }
  .fef-fc-cell-qty,
  .fef-fc-cell-subtotal { padding-top: 9px; }

  .fef-fc-cell-price::before,
  .fef-fc-cell-qty::before,
  .fef-fc-cell-subtotal::before {
    content: attr(data-label);
    color: var(--fef-fc-meta-color);
    font-size: 13px; font-weight: 500;
  }
  .fef-fc-cell[data-label=""]::before { content: none; }

  .fef-fc-subtotal { font-weight: 700; font-size: 1.05em; }

  /* Remove floats in the card's top-right corner. */
  .fef-fc-cell-remove {
    position: absolute; top: 14px; right: 14px;
    width: auto; padding: 0; text-align: right; z-index: 2;
  }
}

/* Very small phones: tighten the card + thumbnail. */
@media (max-width: 380px) {
  .fef-fc-row { padding: 13px; }
  .fef-fc-cell-thumb { width: 60px; margin-right: 10px; }
  .fef-fc-thumb, .fef-fc-thumb img { width: 60px; height: 60px; }
  .fef-fc-cell-name { padding-right: 32px; }
}

/* Elementor editor: keep the widget visible even before hover/interaction */
.elementor-editor-active .fef-fc-widget { min-height: 120px; }
/* ═══════════════════════════════════════════════════════════════════════
 * ADD-ON: shipping line, FREE badge, per-icon styling, featured coupon,
 * state selector, plus animation/hover polish.
 * Variables (with fallbacks) so the Style tab drives everything.
 * ═══════════════════════════════════════════════════════════════════════ */
.fef-fc-widget{
  --fef-fc-ship-color:#334155;
  --fef-fc-ship-method:#94a3b8;
  --fef-fc-free-bg:#dcfce7;
  --fef-fc-free-color:#15803d;
  --fef-fc-icon-size:15px;
  --fef-fc-icon-subtotal:var(--fef-fc-icon-color);
  --fef-fc-icon-discount:#16a34a;
  --fef-fc-icon-tax:var(--fef-fc-icon-color);
  --fef-fc-icon-shipping:#2563eb;
  --fef-fc-icon-total:var(--fef-fc-icon-color);
  --fef-fc-feat-bg:#f0fdf4;
  --fef-fc-feat-border:#16a34a;
  --fef-fc-feat-title:#0f172a;
  --fef-fc-feat-code:#15803d;
  --fef-fc-feat-badge-bg:#dcfce7;
  --fef-fc-feat-badge-color:#166534;
  --fef-fc-feat-btn-bg:#16a34a;
  --fef-fc-feat-btn-color:#ffffff;
  --fef-fc-feat-applied-bg:rgba(22,163,74,.08);
  --fef-fc-feat-applied-color:#15803d;
  --fef-fc-state-label:#475569;
  --fef-fc-state-bg:#ffffff;
  --fef-fc-state-color:#0f172a;
  --fef-fc-state-border:#cbd5e1;
  --fef-fc-state-icon:#2563eb;
}

/* ── Per-line icon colour + size (each individually themeable) ── */
.fef-fc-calc-icon{ font-size:var(--fef-fc-icon-size); }
.fef-fc-calc-icon svg,.fef-fc-calc-icon i{ width:1em; height:1em; font-size:var(--fef-fc-icon-size); }
.fef-fc-calc-subtotal .fef-fc-calc-icon{ color:var(--fef-fc-icon-subtotal); }
.fef-fc-calc-discount .fef-fc-calc-icon{ color:var(--fef-fc-icon-discount); }
.fef-fc-calc-tax      .fef-fc-calc-icon{ color:var(--fef-fc-icon-tax); }
.fef-fc-calc-shipping .fef-fc-calc-icon{ color:var(--fef-fc-icon-shipping); }
.fef-fc-calc-total    .fef-fc-calc-icon{ color:var(--fef-fc-icon-total); }

/* Subtle icon lift when the summary row is hovered */
/* Static — no hover lift on calc icons (kept simple, no flicker). */

/* ── Shipping line ── */
.fef-fc-calc-shipping .fef-fc-calc-value{ color:var(--fef-fc-ship-color); }
.fef-fc-ship-method{
  margin-left:6px; font-size:11px; font-weight:600; color:var(--fef-fc-ship-method);
}
.fef-fc-ship-prompt{ color:#f59e0b; font-weight:600; font-size:13px; }

/* FREE badge — celebratory */
.fef-fc-ship-free-badge{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--fef-fc-free-bg); color:var(--fef-fc-free-color);
  font-weight:800; letter-spacing:.03em; font-size:12px;
  padding:4px 10px; border-radius:999px;
}
.fef-fc-free-spark{ display:inline-block; }
@keyframes fef-fc-pop{ 0%{transform:scale(.4);opacity:0} 70%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }
@keyframes fef-fc-spin{ to{transform:rotate(360deg)} }

/* ── Featured coupon strip ── */
.fef-fc-featured-wrap{ margin:0 0 16px; }
.fef-fc-featured{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border-radius:12px;
}
.fef-fc-feat-offer{
  background:var(--fef-fc-feat-bg);
  border:2px dashed var(--fef-fc-feat-border);
}
.fef-fc-feat-body{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:120px; }
.fef-fc-feat-title{ font-weight:600; font-size:13px; color:var(--fef-fc-feat-title); }
.fef-fc-feat-code{
  font-weight:800; letter-spacing:.04em; font-size:13px; color:var(--fef-fc-feat-code);
  font-family:ui-monospace,Menlo,Consolas,monospace;
}
.fef-fc-feat-badge{
  flex:0 0 auto; font-weight:800; font-size:13px;
  background:var(--fef-fc-feat-badge-bg); color:var(--fef-fc-feat-badge-color);
  border-radius:8px; padding:6px 10px; white-space:nowrap;
}
.fef-fc-feat-btn{
  flex:0 0 auto; cursor:pointer; border:0;
  background:var(--fef-fc-feat-btn-bg); color:var(--fef-fc-feat-btn-color);
  font-weight:700; font-size:13px; padding:9px 16px; border-radius:9px;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.fef-fc-feat-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(22,163,74,.28); filter:brightness(1.05); }
.fef-fc-feat-btn:active{ transform:translateY(0); }
.fef-fc-feat-btn:disabled{ opacity:.6; cursor:default; }

.fef-fc-feat-applied{
  background:var(--fef-fc-feat-applied-bg); color:var(--fef-fc-feat-applied-color);
}
.fef-fc-feat-check{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:var(--fef-fc-feat-applied-color); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
}
.fef-fc-feat-applied .fef-fc-feat-title{ color:var(--fef-fc-feat-applied-color); }
.fef-fc-feat-applied .fef-fc-feat-code{ color:var(--fef-fc-feat-applied-color); }


/* ── State selector ── */
.fef-fc-ship-select{ margin:0 0 16px; }
.fef-fc-ship-select-label{
  display:flex; align-items:center; gap:7px; margin-bottom:6px;
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--fef-fc-state-label);
}
.fef-fc-ship-select-label svg,.fef-fc-ship-select-label i{ color:var(--fef-fc-state-icon); width:1em; height:1em; }
.fef-fc-ship-select-control{ position:relative; }
.fef-fc-state{
  width:100%; height:44px; padding:0 38px 0 14px;
  background:var(--fef-fc-state-bg); color:var(--fef-fc-state-color);
  border:1px solid var(--fef-fc-state-border); border-radius:10px;
  font-size:14px; cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.fef-fc-state:focus{ outline:none; border-color:var(--fef-fc-state-icon);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--fef-fc-state-icon) 18%, transparent); }
.fef-fc-state:disabled{ opacity:.6; cursor:wait; }
.fef-fc-state-spinner{
  position:absolute; right:12px; top:50%; width:16px; height:16px; margin-top:-8px;
  border:2px solid rgba(100,116,139,.35); border-top-color:#334155; border-radius:50%;
  animation:fef-fc-spin .7s linear infinite; pointer-events:none;
}

/* value flash when a total updates after a recalc */
@keyframes fef-fc-flash{ 0%{background:rgba(37,99,235,.12)} 100%{background:transparent} }
.fef-fc-calc-value.fef-fc-flash{ animation:fef-fc-flash .8s ease-out 1; border-radius:4px; }

/* ═══════════════════════════════════════════════════════════════════════
 * ADD-ON 2: header block, banner, summary-constrain (top/bottom),
 * table border framing, qty size, variation label/value.
 * ═══════════════════════════════════════════════════════════════════════ */
.fef-fc-widget{
  --fef-fc-banner-w:100%;
  --fef-fc-banner-radius:10px;
  --fef-fc-htitle-color:#0f172a;
  --fef-fc-hdesc-color:#64748b;
  --fef-fc-sum-width:100%;
  --fef-fc-sum-minh:0px;
  --fef-fc-sum-align:center;
  --fef-fc-table-border:#e2e8f0;
  --fef-fc-table-border-w:1px;
  --fef-fc-table-radius:12px;
  --fef-fc-qbtn-size:34px;
  --fef-fc-apply-pad:0 18px;
}

/* #12 — title + description */
.fef-fc-header-block{ margin:0 0 18px; }
.fef-fc-header-title{ margin:0 0 6px; color:var(--fef-fc-htitle-color); font-size:24px; font-weight:800; line-height:1.2; }
.fef-fc-header-desc{ color:var(--fef-fc-hdesc-color); font-size:14px; line-height:1.55; }

/* #9 — banner image */
.fef-fc-banner{ margin:14px 0; }
.fef-fc-banner-img{ max-width:var(--fef-fc-banner-w); height:auto; display:block; border-radius:var(--fef-fc-banner-radius); }

/* #10 — constrain summary column width/height/align on top/bottom layouts */
.fef-fc-items-top .fef-fc-col-summary,
.fef-fc-items-bottom .fef-fc-col-summary{
  width:var(--fef-fc-sum-width); max-width:100%;
  min-height:var(--fef-fc-sum-minh);
  margin-left:auto; margin-right:auto;
}
.fef-fc-items-top .fef-fc-grid,
.fef-fc-items-bottom .fef-fc-grid{ justify-items:var(--fef-fc-sum-align); }
.fef-fc-items-top .fef-fc-col-items,
.fef-fc-items-bottom .fef-fc-col-items{ width:100%; justify-self:stretch; }

/* #11 — table border framing + selective internal borders */
/* Outer frame: round the whole table like a card */
.fef-fc-widget[data-outerborder="1"] .fef-fc-table-wrap{
  border:var(--fef-fc-table-border-w) solid var(--fef-fc-table-border);
  border-radius:var(--fef-fc-table-radius);
  overflow:hidden;
}
/* Toggle horizontal row borders */
.fef-fc-widget[data-rowborders="0"] .fef-fc-cell{ border-bottom:0 !important; }
/* Toggle vertical column borders (overrides the col-divider control cleanly) */
.fef-fc-widget[data-colborders="1"] .fef-fc-cell + .fef-fc-cell{
  border-left:1px solid var(--fef-fc-col-divider, #eef2f6);
}
.fef-fc-widget[data-colborders="0"] .fef-fc-cell + .fef-fc-cell{ border-left:0; }

/* #5 — quantity button size */
.fef-fc-qbtn{ width:var(--fef-fc-qbtn-size); height:calc(var(--fef-fc-qbtn-size) + 2px); }
/* #5 — apply button padding */
.fef-fc-coupon-apply{ padding:var(--fef-fc-apply-pad); }

/* #13 — variation attribute label / value (separately toggleable) */
.fef-fc-meta{ display:flex; flex-wrap:wrap; gap:4px 10px; }
.fef-fc-meta-item{ font-size:12px; color:var(--fef-fc-meta-color); }
.fef-fc-meta-label{ font-weight:600; }
.fef-fc-meta-value{ }

/* #2 — shipping unavailable message tone */
.fef-fc-ship-none .fef-fc-ship-prompt{ color:#f59e0b; }

/* Summary dividers (below state dropdown & below coupon area) */
.fef-fc-summary-divider{
  border:0; height:0;
  border-top:var(--fef-fc-sdiv-thick,1px) solid var(--fef-fc-sdiv-color,#e2e8f0);
  margin:var(--fef-fc-sdiv-gap,16px) 0;
}
/* The delegated FEF_Coupons featured card sits above the coupon input */
.fef-fc-featured-wrap{ margin:0 0 14px; }
.fef-fc-featured-wrap .fef-featured-coupon{ margin:0; }
/* ═══════════════════════════════════════════════════════════════════════
   THEME / WOOCOMMERCE ISOLATION  — fixes inherited "pink" buttons & borders
   ─────────────────────────────────────────────────────────────────────────
   Same problem as the cart-button widget: the checkout / coupon / quantity /
   remove controls and the coupon input are plain <button>/<input>/<select>
   elements that inherit WooCommerce's default button colour (#a46497 "pink"),
   theme link colours and default borders wherever a Style-tab control is left
   empty (empty variable -> dropped declaration -> theme value wins). These
   rules neutralise inherited appearance and give every colour a clean neutral
   fallback that the Style-tab variables still override. No !important, so the
   per-instance Style output keeps priority.
   ═══════════════════════════════════════════════════════════════════════ */
.fef-fc-widget button,
.fef-fc-widget input,
.fef-fc-widget select,
.fef-fc-widget textarea {
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
  text-shadow: none;
}
.fef-fc-widget .fef-fc-checkout     { background: var(--fef-fc-co-bg, #111827);  color: var(--fef-fc-co-color, #ffffff); }
.fef-fc-widget .fef-fc-coupon-apply { background: var(--fef-fc-cbtn-bg, #111827); color: var(--fef-fc-cbtn-color, #ffffff); }
.fef-fc-widget .fef-fc-btn-secondary{ background: var(--fef-fc-sec-bg, transparent); color: var(--fef-fc-sec-color, inherit); }
.fef-fc-widget .fef-fc-coupon-input { background: var(--fef-fc-cin-bg, #ffffff); color: var(--fef-fc-cin-color, inherit); }
.fef-fc-widget .fef-fc-qbtn         { background: var(--fef-fc-qbtn-bg, transparent); color: var(--fef-fc-qbtn-color, inherit); }
.fef-fc-widget .fef-fc-remove       { background: var(--fef-fc-rem-bg, transparent); color: var(--fef-fc-rem-color, inherit); }
.fef-fc-widget .fef-fc-name         { color: var(--fef-fc-name-color, inherit); text-decoration: none; }
.fef-fc-widget .fef-fc-state        { background: var(--fef-fc-state-bg, #ffffff); color: var(--fef-fc-state-color, inherit); }