/* ═══════════════════════════════════════════════════
   Smart Offers Engine — Frontend CSS v2.4
   Cart & Checkout only
═══════════════════════════════════════════════════ */

/* ── Panel container ─────────────────────────────── */
.soe-panel-tr td { padding:0 !important; border:none !important; }

.soe-panel {
  border-radius:14px;
  overflow:hidden;
  border:1px solid #e4e4e7;
  box-shadow:0 4px 24px rgba(0,0,0,.08);
  margin-bottom:4px;
  font-family:inherit;
}

/* ── Panel header ────────────────────────────────── */
.soe-panel-head {
  display:flex;
  align-items:center;
  gap:9px;
  padding:13px 16px;
  background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
  color:#fff;
}
.soe-ph-icon { font-size:1.2em; }
.soe-ph-title {
  flex:1;
  font-weight:700;
  font-size:.88em;
  letter-spacing:.3px;
  text-transform:uppercase;
}
.soe-ph-badge {
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.2);
  padding:2px 10px;
  border-radius:20px;
  font-size:.72em;
  font-weight:700;
}

/* ── Panel body ──────────────────────────────────── */
.soe-panel-body { padding:8px; background:#fafafa; }

/* ── Individual offer row ────────────────────────── */
.soe-or {
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 13px;
  border-radius:10px;
  border:1.5px solid #e4e4e7;
  background:#fff;
  margin-bottom:7px;
  transition:border-color .18s, box-shadow .18s, background .18s;
  position:relative;
}
.soe-or:last-child { margin-bottom:0; }
.soe-or:hover {
  border-color:#a78bfa;
  box-shadow:0 2px 12px rgba(139,92,246,.12);
}
.soe-or-on {
  border-color:#22c55e !important;
  background:linear-gradient(135deg,#f0fdf4,#fafff9) !important;
  box-shadow:0 2px 12px rgba(34,197,94,.1) !important;
}

/* Applied tick ribbon */
.soe-or-on::before {
  content:'';
  position:absolute;
  top:0; right:0;
  width:0; height:0;
  border-style:solid;
  border-width:0 28px 28px 0;
  border-color:transparent #22c55e transparent transparent;
  border-radius:0 10px 0 0;
}
.soe-or-on::after {
  content:'✓';
  position:absolute;
  top:2px; right:3px;
  font-size:.6em;
  color:#fff;
  font-weight:900;
}

/* ── Icon ────────────────────────────────────────── */
.soe-or-icon-wrap {
  flex-shrink:0;
  width:38px;
  height:38px;
  border-radius:10px;
  background:linear-gradient(135deg,#ede9fe,#ddd6fe);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2em;
  overflow:hidden;
}
.soe-or-on .soe-or-icon-wrap {
  background:linear-gradient(135deg,#dcfce7,#bbf7d0);
}
/* Font Awesome icons inside offer icon wrap */
.soe-or-icon-wrap i {
  font-size:1.1em;
  color:#7c3aed;
}
.soe-or-on .soe-or-icon-wrap i { color:#16a34a; }
/* Image icons */
.soe-offer-img-icon {
  width:38px !important;
  height:38px !important;
  object-fit:cover;
  border-radius:10px;
}

/* ── Body text ───────────────────────────────────── */
.soe-or-body { flex:1; min-width:0; }
.soe-or-name {
  font-weight:700;
  font-size:.84em;
  color:#0f172a;
  line-height:1.3;
  margin-bottom:2px;
}
.soe-or-desc {
  font-size:.74em;
  color:#64748b;
  line-height:1.4;
  margin-bottom:4px;
}

/* Coupon code chip */
.soe-or-code {
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:#fff8f0;
  border:1px dashed #f97316;
  border-radius:6px;
  padding:3px 8px;
  margin-top:3px;
  margin-bottom:4px;
}
.soe-code-icon { font-size:.8em; }
.soe-code-val {
  font-family:monospace;
  font-size:.78em;
  font-weight:700;
  color:#ea580c;
  background:none;
  border:none;
  padding:0;
}

/* ── BOGO progress ───────────────────────────────── */
.soe-bogo-progress-wrap { margin-top:5px; }
.soe-bogo-progress-text {
  font-size:.74em;
  color:#475569;
  line-height:1.5;
  margin-bottom:5px;
}
.soe-bogo-progress-text strong { color:#7c3aed; }
.soe-bogo-bar-track {
  height:6px;
  background:#e2e8f0;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:3px;
}
.soe-bogo-bar-fill {
  height:100%;
  background:linear-gradient(90deg,#8b5cf6,#a78bfa);
  border-radius:10px;
  transition:width .4s ease;
  min-width:6px;
}
.soe-bogo-bar-label {
  font-size:.67em;
  color:#94a3b8;
  text-align:right;
}
.soe-bogo-ready {
  font-size:.76em;
  color:#16a34a;
  font-weight:600;
  margin-top:5px;
  padding:4px 8px;
  background:#f0fdf4;
  border-radius:6px;
  border:1px solid #bbf7d0;
}

/* ── Timer ───────────────────────────────────────── */
.soe-or-timer {
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
}
.soe-timer-fire { font-size:.85em; }
.soe-inline-timer {
  display:inline-flex;
  align-items:center;
  gap:2px;
}
.soe-tu {
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  background:#1e293b;
  border-radius:4px;
  padding:2px 5px;
  min-width:22px;
}
.soe-tn {
  font-size:.68em;
  font-weight:800;
  color:#fbbf24;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.soe-tl {
  font-size:.48em;
  color:rgba(255,255,255,.7);
  text-transform:uppercase;
  line-height:1;
}
.soe-tsep {
  color:#94a3b8;
  font-size:.75em;
  font-weight:800;
  margin-bottom:6px;
}
.soe-timer-expired { color:#ef4444; font-size:.75em; font-weight:700; }

/* ── Right column ────────────────────────────────── */
.soe-or-right {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  flex-shrink:0;
  min-width:80px;
}

.soe-or-val {
  font-weight:800;
  font-size:.84em;
  white-space:nowrap;
  line-height:1.2;
}
.soe-val-disc { color:#7c3aed; }
.soe-val-free {
  color:#16a34a;
  background:#f0fdf4;
  border:1px solid #bbf7d0;
  border-radius:20px;
  padding:2px 8px;
  font-size:.76em;
}

/* Tags */
.soe-tag-applied {
  font-size:.72em;
  color:#16a34a;
  font-weight:700;
  white-space:nowrap;
}
.soe-tag-auto {
  font-size:.68em;
  background:#ede9fe;
  color:#7c3aed;
  border-radius:20px;
  padding:3px 9px;
  font-weight:700;
  white-space:nowrap;
}
.soe-tag-need {
  font-size:.67em;
  background:#fff7ed;
  color:#ea580c;
  border:1px dashed #fed7aa;
  border-radius:20px;
  padding:3px 8px;
  font-weight:600;
  white-space:nowrap;
}

.soe-applied-wrap {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}

/* Buttons */
.soe-apply-btn {
  background:linear-gradient(135deg,#7c3aed,#8b5cf6);
  color:#fff;
  border:none;
  padding:7px 16px;
  border-radius:20px;
  font-weight:700;
  font-size:.76em;
  cursor:pointer;
  transition:all .18s;
  white-space:nowrap;
  letter-spacing:.2px;
  box-shadow:0 2px 8px rgba(124,58,237,.3);
}
.soe-apply-btn:hover {
  background:linear-gradient(135deg,#6d28d9,#7c3aed);
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(124,58,237,.4);
}
.soe-apply-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }

.soe-remove-btn {
  background:none;
  border:1px solid #e2e8f0;
  color:#94a3b8;
  padding:4px 10px;
  border-radius:20px;
  font-size:.7em;
  cursor:pointer;
  transition:all .18s;
  white-space:nowrap;
}
.soe-remove-btn:hover {
  background:#fef2f2;
  border-color:#fca5a5;
  color:#ef4444;
}

/* ── Panel footer ────────────────────────────────── */
.soe-panel-footer {
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 16px;
  background:linear-gradient(135deg,#f0fdf4,#dcfce7);
  border-top:1px solid #bbf7d0;
  font-size:.82em;
  color:#166534;
}
.soe-footer-icon { font-size:1.1em; }
.soe-panel-footer strong { color:#15803d; }

/* ── Cart totals rows ────────────────────────────── */
.soe-totals-row th,
.soe-totals-row td {
  font-size:.88em !important;
  padding:6px 0 !important;
  color:#7c3aed;
}
.soe-deduct { color:#ea580c !important; font-weight:700 !important; }

.soe-totals-bogo th,
.soe-totals-bogo td {
  font-size:.88em !important;
  padding:6px 0 !important;
  color:#16a34a;
}
.soe-free-val { font-weight:700; }

.soe-savings-total th,
.soe-savings-total td {
  color:#16a34a !important;
  font-weight:800 !important;
  font-size:.93em !important;
  padding:8px 0 !important;
}

/* ── BOGO nudge banner ───────────────────────────── */
.soe-bogo-nudge {
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 18px;
  background:linear-gradient(135deg,#1e293b,#0f172a);
  border-left:4px solid #fbbf24;
  border-radius:10px;
  margin-bottom:16px;
  font-size:.86em;
  color:#e2e8f0;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
}
.soe-bn-emoji { font-size:1.4em; flex-shrink:0; }
.soe-bogo-nudge strong { color:#fbbf24; }

/* ── Free item badges in cart table ─────────────── */
.soe-free-tag {
  display:inline-block;
  background:linear-gradient(135deg,#22c55e,#16a34a); /* soe-free-tag */
  color:#fff;
  padding:2px 10px;
  border-radius:20px;
  font-size:.74em;
  font-weight:700;
  letter-spacing:.2px;
}
.soe-free-badge {
  display:inline-block;
  background:#f0fdf4;
  color:#16a34a;
  border:1px solid #bbf7d0;
  padding:2px 9px;
  border-radius:10px;
  font-size:.72em;
  font-weight:600;
  margin-left:5px;
}
.soe-free-note { font-size:.72em; color:#94a3b8; margin-left:6px; }

/* ── Toast notifications ─────────────────────────── */
#soe-toasts {
  position:fixed;
  top:24px;
  right:24px;
  z-index:999999;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}
.soe-toast {
  background:#fff;
  border-radius:12px;
  padding:12px 18px;
  box-shadow:0 8px 32px rgba(0,0,0,.15);
  border-left:4px solid #22c55e;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.87em;
  font-weight:600;
  color:#0f172a;
  min-width:240px;
  max-width:340px;
  animation:soeSlideIn .28s ease;
  pointer-events:auto;
}
.soe-toast-error   { border-color:#ef4444; }
.soe-toast-info    { border-color:#8b5cf6; }
.soe-toast-warning { border-color:#f97316; }
@keyframes soeSlideIn  { from{transform:translateX(110%);opacity:0} to{transform:none;opacity:1} }
@keyframes soeSlideOut { to{opacity:0;transform:translateX(20px)} }

/* ── Checkout panel ──────────────────────────────── */
.soe-checkout-panel {
  background:#fff;
  border:1px solid #e4e4e7;
  border-radius:14px;
  margin-bottom:24px;
  box-shadow:0 4px 24px rgba(0,0,0,.07);
  overflow:hidden;
}
.soe-cp-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  background:linear-gradient(135deg,#0f172a,#1e293b);
  color:#fff;
  cursor:pointer;
  user-select:none;
}
.soe-cp-head-left { display:flex; align-items:center; gap:8px; font-size:.9em; }
.soe-cp-meta { display:flex; align-items:center; gap:8px; }
.soe-cp-cnt {
  background:#22c55e;
  padding:2px 10px;
  border-radius:20px;
  font-size:.72em;
  font-weight:700;
}
.soe-cp-arrow { font-size:1em; transition:transform .2s; }
.soe-cp-body { padding:8px; background:#fafafa; }

.soe-cp-offer {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:11px 13px;
  border:1.5px solid #e4e4e7;
  border-radius:10px;
  margin-bottom:7px;
  background:#fff;
  transition:all .18s;
}
.soe-cp-offer:hover { border-color:#a78bfa; }
.soe-cp-on { border-color:#22c55e !important; background:#f0fdf4 !important; }
.soe-cp-left { display:flex; gap:10px; flex:1; min-width:0; align-items:flex-start; }
.soe-cp-icon-wrap {
  width:34px; height:34px;
  border-radius:8px;
  background:linear-gradient(135deg,#ede9fe,#ddd6fe);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15em; flex-shrink:0;
}
.soe-cp-on .soe-cp-icon-wrap { background:linear-gradient(135deg,#dcfce7,#bbf7d0); }
.soe-cp-info { display:flex; flex-direction:column; gap:2px; }
.soe-cp-info strong { font-size:.85em; color:#0f172a; }
.soe-cp-info span   { font-size:.76em; color:#64748b; }
.soe-cp-code-chip {
  display:inline-flex; align-items:center; gap:4px;
  border:1px dashed #f97316; color:#ea580c;
  padding:2px 7px; border-radius:5px;
  font-size:.7em; font-weight:700; margin-top:2px;
  font-family:monospace; background:#fff8f0;
}
.soe-cp-right { display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0; min-width:82px; }
.soe-cp-disc { font-weight:800; font-size:.85em; white-space:nowrap; }
.soe-cp-disc-neg { color:#7c3aed; }
.soe-cp-disc-free { color:#16a34a; }

/* ── Shortcode widgets ───────────────────────────── */
.soe-countdown-widget {
  padding:20px 24px;
  border-radius:14px;
  text-align:center;
  margin:12px 0;
}
.soe-countdown-dark     { background:linear-gradient(135deg,#0f172a,#1e293b); color:#fff; }
.soe-countdown-light    { background:#f8faff; border:1px solid #e4e4e7; color:#0f172a; }
.soe-countdown-gradient { background:linear-gradient(135deg,#7c3aed,#a78bfa); color:#fff; }
.soe-cw-header { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:10px; }
.soe-cw-icon   { font-size:2em; }
.soe-cw-title  { font-size:1.25em; font-weight:800; }
.soe-cw-desc   { font-size:.85em; opacity:.8; margin:0 0 14px; }
.soe-cw-timer  { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px; }
.soe-cw-timer .soe-tu   { min-width:56px; padding:12px 8px; border-radius:10px; }
.soe-cw-timer .soe-tn   { font-size:1.7em; }
.soe-cw-timer .soe-tl   { font-size:.6em; }
.soe-cw-timer .soe-tsep { font-size:1.4em; margin-bottom:14px; opacity:.5; }
.soe-countdown-dark     .soe-tu { background:rgba(255,255,255,.1); }
.soe-countdown-light    .soe-tu { background:#1e293b; }
.soe-countdown-gradient .soe-tu { background:rgba(255,255,255,.2); }
.soe-banner-widget {
  display:inline-flex; align-items:center; gap:9px;
  background:linear-gradient(135deg,#7c3aed,#a78bfa);
  color:#fff; padding:11px 22px; border-radius:50px;
  font-weight:700; box-shadow:0 4px 16px rgba(124,58,237,.35);
}

/* ── Responsive ──────────────────────────────────── */
@media(max-width:640px){
  .soe-or { flex-wrap:wrap; }
  .soe-or-right {
    width:100%;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    margin-top:6px;
    padding-top:6px;
    border-top:1px solid #f1f5f9;
  }
  .soe-apply-btn { padding:6px 20px; }
  .soe-cw-timer .soe-tu { min-width:42px; }
  .soe-cw-timer .soe-tn { font-size:1.3em; }
}