/* ═══════════════════════════════════════════════════════
   SIFL Corporate Plan Builder — sifl-plan-builder.css
   Scoped to .sifl-pb-* · WordPress theme-resistant
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

/* ── CSS VARIABLES ── */
.sifl-pb-wrap,
.sifl-pb-modal-overlay {
  --navy: #1B3A6B;
  --navy-deep: #0F2447;
  --accent: #2E75B6;
  --accent-lt: #EEF5FB;
  --green: #1A6E44;
  --green-lt: #E6F5EE;
  --red: #C0392B;
  --bg: #F5F7FA;
  --white: #FFFFFF;
  --border: #DDE3ED;
  --text: #18263D;
  --muted: #64748B;
  --silver-bg: #EAECF0;
  --gold-bg: #FEF7E9;
  --plat-bg: #E6F5EE;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 4px rgba(27, 58, 107, 0.07), 0 4px 16px rgba(27, 58, 107, 0.05);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  box-sizing: border-box;
}

/* ── WRAP ── */
.sifl-pb-wrap {
  padding: 44px 24px 40px !important;
  color: var(--text) !important;
  background: none !important;
}

/* ── HEADER ── */
.sifl-pb-header {
  text-align: center;
  margin-bottom: 36px;
}

.sifl-pb-badge {
  display: block !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.sifl-pb-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: clamp(22px, 3.8vw, 36px) !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  line-height: 1.25 !important;
  margin: 0 0 11px !important;
  padding: 0 !important;
  letter-spacing: -0.01em !important;
}

.sifl-pb-subtitle {
  font-size: 14.5px !important;
  color: var(--muted) !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════
   TWO-COLUMN TOP ROW
═══════════════════════════════════════ */
.sifl-pb-wrap .sifl-pb-top-row {
  display: -ms-grid !important;
  display: grid !important;
  -ms-grid-columns: 1fr 14px 1fr !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
  -webkit-box-align: start !important;
  -ms-flex-align: start !important;
  align-items: start !important;
}

.sifl-pb-wrap .sifl-pb-top-row .sifl-pb-card {
  margin-bottom: 0 !important;
}

/* ═══════════════════════════════════════
   CARDS
═══════════════════════════════════════ */
.sifl-pb-wrap .sifl-pb-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 26px 28px !important;
  margin-bottom: 14px !important;
  -webkit-box-shadow: var(--shadow) !important;
  box-shadow: var(--shadow) !important;
}

/* ── CARD STEP LABEL ── */
.sifl-pb-wrap .sifl-pb-step-label {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 22px 0 !important;
  padding: 0 0 16px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  background: none !important;
}

/* ── REGION TOGGLE ── */
.sifl-pb-wrap .sifl-pb-region-toggle {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  margin-left: auto !important;
  background: #f0f4f8 !important;
  border-radius: 20px !important;
  padding: 3px !important;
  gap: 0 !important;
}

.sifl-pb-wrap .sifl-pb-region-btn {
  border: none !important;
  background: transparent !important;
  border-radius: 17px !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  cursor: pointer !important;
  transition: background 0.18s, color 0.18s !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}

.sifl-pb-wrap .sifl-pb-region-btn.active {
  background: var(--navy, #0d2d5e) !important;
  color: #fff !important;
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.18) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18) !important;
}

.sifl-pb-wrap .sifl-pb-region-btn:hover:not(.active) {
  background: #dde4ee !important;
  color: #374151 !important;
}

@media (max-width: 400px) {
  .sifl-pb-wrap .sifl-pb-region-btn {
    padding: 4px 10px !important;
    font-size: 11px !important;
  }
}

.sifl-pb-wrap .sifl-pb-step-num {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 50% !important;
  background: var(--navy) !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
}

.sifl-pb-wrap .sifl-pb-step-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ── COURSE GRID ── */
.sifl-pb-courses-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 9px !important;
}

.sifl-pb-course-item {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 13px 15px !important;
  cursor: pointer !important;
  -webkit-transition: border-color 0.14s, box-shadow 0.14s, background 0.14s !important;
  transition: border-color 0.14s, box-shadow 0.14s, background 0.14s !important;
  position: relative !important;
  background: var(--white) !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

.sifl-pb-course-item:hover {
  border-color: var(--accent) !important;
  -webkit-box-shadow: 0 2px 10px rgba(46, 117, 182, 0.10) !important;
  box-shadow: 0 2px 10px rgba(46, 117, 182, 0.10) !important;
}

.sifl-pb-course-item.selected {
  border-color: var(--accent) !important;
  background: var(--accent-lt) !important;
}

.sifl-pb-course-item.selected .sifl-pb-check {
  opacity: 1 !important;
  -webkit-transform: scale(1) !important;
  transform: scale(1) !important;
}

.sifl-pb-check {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 19px !important;
  height: 19px !important;
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  opacity: 0 !important;
  -webkit-transform: scale(0.4) !important;
  transform: scale(0.4) !important;
  -webkit-transition: opacity 0.16s, -webkit-transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  transition: opacity 0.16s, transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.sifl-pb-course-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 0 8px 0 !important;
  padding-right: 22px !important;
  line-height: 1.4 !important;
}

.sifl-pb-course-meta {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

.sifl-pb-course-tag {
  font-size: 10px !important;
  font-weight: 600 !important;
  background: var(--bg) !important;
  color: var(--muted) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  letter-spacing: 0.03em !important;
}

.sifl-pb-course-price {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
}

/* ── COURSE PAGINATION NAV ── */
.sifl-pb-wrap .sifl-pb-course-nav {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--border) !important;
}

.sifl-pb-wrap .sifl-pb-course-nav-left {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  gap: 10px !important;
}

.sifl-pb-wrap .sifl-pb-course-arrow {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 6px !important;
  background: var(--white) !important;
  cursor: pointer !important;
  font-size: 13px !important;
  color: var(--navy) !important;
  -webkit-transition: border-color 0.13s, background 0.13s !important;
  transition: border-color 0.13s, background 0.13s !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.sifl-pb-wrap .sifl-pb-course-arrow:hover:not(:disabled) {
  border-color: var(--accent) !important;
  background: var(--accent-lt) !important;
}

.sifl-pb-wrap .sifl-pb-course-arrow:disabled {
  opacity: 0.32 !important;
  cursor: not-allowed !important;
}

.sifl-pb-wrap .sifl-pb-course-page {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  min-width: 38px !important;
  text-align: center !important;
  font-family: 'DM Sans', sans-serif !important;
}

.sifl-pb-wrap .sifl-pb-show-all-btn {
  background: none !important;
  border: none !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
  cursor: pointer !important;
  padding: 0 !important;
  text-decoration: underline !important;
  -webkit-text-decoration-color: transparent !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 3px !important;
  -webkit-transition: color 0.13s, -webkit-text-decoration-color 0.13s !important;
  transition: color 0.13s, text-decoration-color 0.13s !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.sifl-pb-wrap .sifl-pb-show-all-btn:hover {
  color: var(--navy) !important;
  -webkit-text-decoration-color: var(--navy) !important;
  text-decoration-color: var(--navy) !important;
}

/* ── PARTICIPANTS SLIDER ── */
.sifl-pb-pax-row {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

.sifl-pb-pax-number {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 50px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  line-height: 1 !important;
  min-width: 60px !important;
  -webkit-transition: -webkit-transform 0.13s !important;
  transition: transform 0.13s !important;
}

.sifl-pb-pax-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin: 0 0 7px 0 !important;
}

.sifl-pb-tier-badge {
  display: inline-block !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 4px 13px !important;
  border-radius: 100px !important;
  letter-spacing: 0.03em !important;
  -webkit-transition: all 0.22s !important;
  transition: all 0.22s !important;
  font-family: 'DM Sans', sans-serif !important;
}

.sifl-pb-tier-badge.tier-standard {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

.sifl-pb-tier-badge.tier-silver {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%) !important;
  color: #1e293b !important;
  border: 1px solid #94a3b8 !important;
  box-shadow: 0 2px 6px rgba(148, 163, 184, 0.2) !important;
}

.sifl-pb-tier-badge.tier-gold {
  background: linear-gradient(135deg, #fef08a 0%, #eab308 100%) !important;
  color: #422006 !important;
  border: 1px solid #ca8a04 !important;
  box-shadow: 0 3px 8px rgba(234, 179, 8, 0.25) !important;
}

.sifl-pb-tier-badge.tier-plat {
  background: linear-gradient(135deg, #1e293b 0%, #020617 100%) !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.35) !important;
}

/* ── PARTICIPANT SLIDER ── */

/*
  Track zone gradient key (based on 1–100 range):
    Standard  1–9   →  0%–9%   of track  : #d1d5db (gray)
    Silver   10–49  →  9%–49%  of track  : #94a3b8 (slate)
    Gold     50–99  → 49%–99%  of track  : #f59e0b (amber)
    Platinum   100  → 99%–100% of track  : #1e293b (navy)
*/

/* Outer wrapper — overflow visible so thumb/dots can bleed slightly */
.sifl-pb-slider-outer {
  position: relative !important;
  height: 44px !important;
  margin-bottom: 10px !important;
  overflow: visible !important;
}

/* Both track layers share the same zone gradient and geometry */
.sifl-pb-track-bg,
.sifl-pb-track-fill {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  height: 8px !important;
  border-radius: 100px !important;
  -webkit-transform: translateY(-50%) !important;
  transform: translateY(-50%) !important;
}

/* Muted background — shows all zones at reduced opacity */
.sifl-pb-track-bg {
  width: 100% !important;
  background: linear-gradient(
    to right,
    rgba(209, 213, 219, 0.55)  0%,  rgba(209, 213, 219, 0.55)  9%,
    rgba(148, 163, 184, 0.45)  9%,  rgba(148, 163, 184, 0.45) 49%,
    rgba(245, 158,  11, 0.35) 49%,  rgba(245, 158,  11, 0.35) 99%,
    rgba( 30,  41,  59, 0.40) 99%,  rgba( 30,  41,  59, 0.40) 100%
  ) !important;
  z-index: 0 !important;
}

/* Active fill — same gradient at full saturation, width driven by JS */
.sifl-pb-track-fill {
  width: 0% !important;
  background: linear-gradient(
    to right,
    #d1d5db  0%,  #d1d5db  9%,
    #94a3b8  9%,  #94a3b8 49%,
    #f59e0b 49%,  #f59e0b 99%,
    #1e293b 99%,  #1e293b 100%
  ) !important;
  z-index: 1 !important;
  -webkit-transition: width 0.05s linear !important;
  transition: width 0.05s linear !important;
}

/* Native range input — transparent, sits on top for all interaction */
.sifl-pb-range-native {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 10 !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Custom thumb — white circle, border color driven by JS class */
.sifl-pb-slider-thumb {
  position: absolute !important;
  top: 50% !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 2.5px solid #d1d5db !important;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14), 0 0 0 3px rgba(209, 213, 219, 0.20) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14), 0 0 0 3px rgba(209, 213, 219, 0.20) !important;
  -webkit-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
  z-index: 5 !important;
  pointer-events: none !important;
  -webkit-transition: border-color 0.2s, -webkit-box-shadow 0.2s !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.sifl-pb-slider-thumb.thumb-slv {
  border-color: #94a3b8 !important;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14), 0 0 0 4px rgba(148, 163, 184, 0.20) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14), 0 0 0 4px rgba(148, 163, 184, 0.20) !important;
}

.sifl-pb-slider-thumb.thumb-gld {
  border-color: #f59e0b !important;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14), 0 0 0 4px rgba(245, 158, 11, 0.22) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14), 0 0 0 4px rgba(245, 158, 11, 0.22) !important;
}

.sifl-pb-slider-thumb.thumb-plt {
  border-color: #1e293b !important;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20), 0 0 0 4px rgba(30, 41, 59, 0.18) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20), 0 0 0 4px rgba(30, 41, 59, 0.18) !important;
}

/* ── HOTSPOT MARKERS ── */
.sifl-pb-hotspot {
  position: absolute !important;
  top: 50% !important;
  -webkit-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
  z-index: 6 !important;
  cursor: help !important;
  outline: none !important;
}

/* Pulse ring (visible when tier is unlocked / "passed") */
.sifl-pb-hs-ring {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  -webkit-transform: translate(-50%, -50%) scale(0) !important;
  transform: translate(-50%, -50%) scale(0) !important;
  opacity: 0 !important;
  -webkit-transition: opacity 0.25s, -webkit-transform 0.25s !important;
  transition: opacity 0.25s, transform 0.25s !important;
  pointer-events: none !important;
}

/* Dot — border-only by default, fills when passed */
.sifl-pb-hs-dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 2px solid #d1d5db !important;
  -webkit-transition: background 0.2s, border-color 0.2s, -webkit-transform 0.2s !important;
  transition: background 0.2s, border-color 0.2s, transform 0.2s !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Silver hotspot colours */
.sifl-hs-slv .sifl-pb-hs-dot  { border-color: #94a3b8 !important; }
.sifl-hs-slv .sifl-pb-hs-ring { background: rgba(148, 163, 184, 0.22) !important; }
.sifl-hs-slv.passed .sifl-pb-hs-dot {
  background: #94a3b8 !important;
  border-color: #94a3b8 !important;
}
.sifl-hs-slv.passed .sifl-pb-hs-ring {
  -webkit-transform: translate(-50%, -50%) scale(1) !important;
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
}

/* Gold hotspot colours */
.sifl-hs-gld .sifl-pb-hs-dot  { border-color: #f59e0b !important; }
.sifl-hs-gld .sifl-pb-hs-ring { background: rgba(245, 158, 11, 0.20) !important; }
.sifl-hs-gld.passed .sifl-pb-hs-dot {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
}
.sifl-hs-gld.passed .sifl-pb-hs-ring {
  -webkit-transform: translate(-50%, -50%) scale(1) !important;
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
}

/* Platinum hotspot colours */
.sifl-hs-plt .sifl-pb-hs-dot  { border-color: #1e293b !important; }
.sifl-hs-plt .sifl-pb-hs-ring { background: rgba(30, 41, 59, 0.18) !important; }
.sifl-hs-plt.passed .sifl-pb-hs-dot {
  background: #1e293b !important;
  border-color: #1e293b !important;
}
.sifl-hs-plt.passed .sifl-pb-hs-ring {
  -webkit-transform: translate(-50%, -50%) scale(1) !important;
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
}

/* Scale the dot up on hover */
.sifl-pb-hotspot:hover .sifl-pb-hs-dot,
.sifl-pb-hotspot:focus .sifl-pb-hs-dot {
  -webkit-transform: scale(1.35) !important;
  transform: scale(1.35) !important;
}

/* ── HOTSPOT TOOLTIP ── */
.sifl-pb-hs-tip {
  position: absolute !important;
  bottom: calc(100% + 14px) !important;
  left: 50% !important;
  -webkit-transform: translateX(-50%) translateY(5px) !important;
  transform: translateX(-50%) translateY(5px) !important;
  background: var(--navy-deep) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 11px 15px !important;
  min-width: 150px !important;
  text-align: center !important;
  font-family: 'DM Sans', sans-serif !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0 !important;
  -webkit-transition: opacity 0.18s, -webkit-transform 0.18s !important;
  transition: opacity 0.18s, transform 0.18s !important;
  z-index: 30 !important;
  -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
}

/* Arrow */
.sifl-pb-hs-tip::after {
  content: '' !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  -webkit-transform: translateX(-50%) !important;
  transform: translateX(-50%) !important;
  border: 6px solid transparent !important;
  border-top-color: var(--navy-deep) !important;
}

/* Show on hover/focus */
.sifl-pb-hotspot:hover .sifl-pb-hs-tip,
.sifl-pb-hotspot:focus .sifl-pb-hs-tip {
  opacity: 1 !important;
  -webkit-transform: translateX(-50%) translateY(0) !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Platinum tooltip flips to the left to avoid overflow */
.sifl-hs-tip-flip {
  left: auto !important;
  right: 0 !important;
  -webkit-transform: translateX(0) translateY(5px) !important;
  transform: translateX(0) translateY(5px) !important;
}
.sifl-hs-tip-flip::after {
  left: auto !important;
  right: 10px !important;
  -webkit-transform: none !important;
  transform: none !important;
}
.sifl-pb-hotspot:hover .sifl-hs-tip-flip,
.sifl-pb-hotspot:focus .sifl-hs-tip-flip {
  -webkit-transform: translateX(0) translateY(0) !important;
  transform: translateX(0) translateY(0) !important;
}

/* Tooltip content */
.sifl-pb-hs-name {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 3px !important;
}

.sifl-pb-hs-disc {
  display: block !important;
  font-style: normal !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #fbbf24 !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
}

.sifl-hs-slv .sifl-pb-hs-disc { color: #cbd5e1 !important; }
.sifl-hs-plt .sifl-pb-hs-disc { color: #94a3b8 !important; }

.sifl-pb-hs-range {
  display: block !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 400 !important;
}

/* ── TIER ZONE LABELS ── */
.sifl-pb-tier-labels {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 1fr !important;
  gap: 6px !important;
  margin-top: 12px !important;
}

/* Base card — inactive state */
.sifl-pb-tl {
  padding: 14px 13px 13px !important;
  border-radius: 10px !important;
  border: 1.5px solid #D4D9E2 !important;
  background: var(--white) !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  -webkit-transition: background 0.3s, border-color 0.3s, -webkit-box-shadow 0.3s !important;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s !important;
  cursor: default !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Tier colour dot */
.sifl-pb-tl::before {
  content: '' !important;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  margin-bottom: 9px !important;
  -webkit-transition: background 0.3s, -webkit-transform 0.3s !important;
  transition: background 0.3s, transform 0.3s !important;
}
.sifl-tl-std::before { background: #cbd5e1 !important; }
.sifl-tl-slv::before { background: #94a3b8 !important; }
.sifl-tl-gld::before { background: #f59e0b !important; }
.sifl-tl-plt::before { background: #475569 !important; }

/* Tier name */
.sifl-pb-tl b {
  display: block !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  margin-bottom: 3px !important;
  -webkit-transition: color 0.3s, font-size 0.3s !important;
  transition: color 0.3s, font-size 0.3s !important;
}

/* Participant range */
.sifl-pb-tl span {
  display: block !important;
  font-size: 10.5px !important;
  color: var(--muted) !important;
  opacity: 0.55 !important;
  font-weight: 400 !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
  -webkit-transition: color 0.3s, opacity 0.3s !important;
  transition: color 0.3s, opacity 0.3s !important;
}

/* Discount % */
.sifl-pb-tl i {
  display: block !important;
  font-style: normal !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  -webkit-transition: color 0.3s, font-size 0.3s, font-weight 0.3s !important;
  transition: color 0.3s, font-size 0.3s, font-weight 0.3s !important;
}

/* ════════════════════════════════════════
   ACTIVE / PREMIUM CARD STATES
   Standard → Silver → Gold → Platinum
   each step richer, darker, more premium
════════════════════════════════════════ */

/* ── STANDARD: clean cool-gray ── */
.sifl-tl-std.active {
  background: linear-gradient(150deg, #f8fafc 0%, #eef1f5 100%) !important;
  border-color: #94a3b8 !important;
  -webkit-box-shadow: 0 2px 12px rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 2px 12px rgba(148, 163, 184, 0.18) !important;
}
.sifl-tl-std.active::before {
  background: #94a3b8 !important;
  -webkit-transform: scale(1.2) !important;
  transform: scale(1.2) !important;
}
.sifl-tl-std.active b   { color: #334155 !important; font-size: 13px !important; }
.sifl-tl-std.active span { opacity: 0.65 !important; color: #64748b !important; }
.sifl-tl-std.active i   { color: #475569 !important; font-size: 13px !important; font-weight: 700 !important; }

/* ── SILVER: cool metallic silver ── */
.sifl-tl-slv.active {
  background: linear-gradient(150deg, #f1f5f9 0%, #dde5ef 45%, #c8d4e2 100%) !important;
  border-color: #94a3b8 !important;
  -webkit-box-shadow: 0 4px 16px rgba(100, 116, 139, 0.20) !important;
  box-shadow: 0 4px 16px rgba(100, 116, 139, 0.20) !important;
}
.sifl-tl-slv.active::before {
  background: #64748b !important;
  -webkit-transform: scale(1.2) !important;
  transform: scale(1.2) !important;
}
.sifl-tl-slv.active b   { color: #1e293b !important; font-size: 13px !important; }
.sifl-tl-slv.active span { opacity: 0.7 !important; color: #475569 !important; }
.sifl-tl-slv.active i   { color: #334155 !important; font-size: 14px !important; font-weight: 700 !important; }

/* Silver gloss sweep */
.sifl-tl-slv.active::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(110deg,
    transparent 25%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 75%) !important;
  -webkit-transform: translateX(-100%) !important;
  transform: translateX(-100%) !important;
  -webkit-animation: sifl-card-gloss 4s ease-in-out infinite !important;
  animation: sifl-card-gloss 4s ease-in-out infinite !important;
  pointer-events: none !important;
}

/* ── GOLD: warm amber luxury ── */
.sifl-tl-gld.active {
  background: linear-gradient(150deg, #fffbeb 0%, #fef3c7 40%, #fde68a 80%, #fcd34d 100%) !important;
  border-color: #f59e0b !important;
  -webkit-box-shadow: 0 4px 20px rgba(245, 158, 11, 0.28) !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.28) !important;
}
.sifl-tl-gld.active::before {
  background: #d97706 !important;
  -webkit-transform: scale(1.2) !important;
  transform: scale(1.2) !important;
}
.sifl-tl-gld.active b   { color: #78350f !important; font-size: 13px !important; }
.sifl-tl-gld.active span { opacity: 0.7 !important; color: #92400e !important; }
.sifl-tl-gld.active i   { color: #b45309 !important; font-size: 15px !important; font-weight: 800 !important; }

/* Gold gloss sweep — brighter, faster */
.sifl-tl-gld.active::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(110deg,
    transparent 25%,
    rgba(255, 255, 255, 0.60) 50%,
    transparent 75%) !important;
  -webkit-transform: translateX(-100%) !important;
  transform: translateX(-100%) !important;
  -webkit-animation: sifl-card-gloss 3s ease-in-out infinite !important;
  animation: sifl-card-gloss 3s ease-in-out infinite !important;
  pointer-events: none !important;
}

/* ── PLATINUM: dark premium black-card feel ── */
.sifl-tl-plt.active {
  background: linear-gradient(150deg, #2d3f58 0%, #1a2a42 50%, #0f1e30 100%) !important;
  border-color: #0f172a !important;
  -webkit-box-shadow: 0 6px 24px rgba(15, 23, 42, 0.40) !important;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.40) !important;
}
.sifl-tl-plt.active::before {
  background: rgba(203, 213, 225, 0.55) !important;
  -webkit-transform: scale(1.2) !important;
  transform: scale(1.2) !important;
}
.sifl-tl-plt.active b   { color: #f1f5f9 !important; font-size: 13px !important; }
.sifl-tl-plt.active span { opacity: 1 !important; color: rgba(203, 213, 225, 0.60) !important; }
.sifl-tl-plt.active i   { color: #e2e8f0 !important; font-size: 15px !important; font-weight: 800 !important; }

/* Platinum subtle shimmer */
.sifl-tl-plt.active::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(110deg,
    transparent 25%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 75%) !important;
  -webkit-transform: translateX(-100%) !important;
  transform: translateX(-100%) !important;
  -webkit-animation: sifl-card-gloss 5s ease-in-out infinite 1s !important;
  animation: sifl-card-gloss 5s ease-in-out infinite 1s !important;
  pointer-events: none !important;
}

@keyframes sifl-card-gloss {
  0%   { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
  45%  { -webkit-transform: translateX(200%);  transform: translateX(200%);  }
  100% { -webkit-transform: translateX(200%);  transform: translateX(200%);  }
}

/* ── SUMMARY STATS ── */
.sifl-pb-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 22px !important;
}

.sifl-pb-stat {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 16px !important;
}

.sifl-pb-stat-label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 5px 0 !important;
  text-transform: uppercase !important;
  font-family: 'DM Sans', sans-serif !important;
}

.sifl-pb-stat-value {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  line-height: 1.1 !important;
}

.sifl-pb-stat-disc {
  color: var(--green) !important;
}

/* ── BREAKDOWN TABLE ── */
.sifl-pb-breakdown {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13.5px !important;
}

.sifl-pb-breakdown td {
  padding: 9px 0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--border) !important;
  background: none !important;
}

.sifl-pb-breakdown td:last-child {
  text-align: right !important;
}

.sifl-pb-breakdown tr:last-child td {
  border-bottom: none !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding-top: 13px !important;
}

.sifl-pb-strike {
  text-decoration: line-through !important;
  color: var(--muted) !important;
  font-size: 11.5px !important;
  margin-right: 5px !important;
}

/* ── SAVINGS BAR ── */
.sifl-pb-savings-bar {
  display: none;
  background: var(--green-lt) !important;
  border: 1px solid rgba(26, 110, 68, 0.15) !important;
  border-left: 3px solid var(--green) !important;
  border-radius: var(--radius-sm) !important;
  padding: 11px 15px !important;
  font-size: 13px !important;
  color: var(--green) !important;
  font-weight: 600 !important;
  margin-top: 16px !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* ── CTA BUTTON ── */
.sifl-pb-cta-btn {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 15px 24px !important;
  background: var(--navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  -webkit-transition: background 0.16s, -webkit-transform 0.16s, -webkit-box-shadow 0.16s !important;
  transition: background 0.16s, transform 0.16s, box-shadow 0.16s !important;
  letter-spacing: 0.02em !important;
  margin-top: 8px !important;
  text-decoration: none !important;
}

.sifl-pb-cta-btn:hover:not(:disabled) {
  background: var(--navy-deep) !important;
  -webkit-transform: translateY(-1px) !important;
  transform: translateY(-1px) !important;
  -webkit-box-shadow: 0 6px 22px rgba(27, 58, 107, 0.26) !important;
  box-shadow: 0 6px 22px rgba(27, 58, 107, 0.26) !important;
}

.sifl-pb-cta-btn:disabled {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.sifl-pb-btn-arrow {
  font-size: 17px !important;
  -webkit-transition: -webkit-transform 0.15s !important;
  transition: transform 0.15s !important;
}

.sifl-pb-cta-btn:hover:not(:disabled) .sifl-pb-btn-arrow {
  -webkit-transform: translateX(4px) !important;
  transform: translateX(4px) !important;
}

/* ── FOOTER NOTE ── */
.sifl-pb-footer-note {
  text-align: center !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  margin-top: 18px !important;
  line-height: 1.8 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* ═══════════════════════════════════════
   MODAL
═══════════════════════════════════════ */
.sifl-pb-modal-overlay {
  display: none;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background: rgba(8, 16, 36, 0.52) !important;
  z-index: 999999 !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  -webkit-backdrop-filter: blur(3px) !important;
  backdrop-filter: blur(3px) !important;
  padding: 20px !important;
}

.sifl-pb-modal-overlay.open {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.sifl-pb-modal {
  background: #fff !important;
  border-radius: var(--radius) !important;
  width: 100% !important;
  max-width: 480px !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
  -webkit-box-shadow: 0 20px 60px rgba(0, 0, 0, 0.20) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.20) !important;
  -webkit-animation: sifl-slide-up 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  animation: sifl-slide-up 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes sifl-slide-up {
  from {
    -webkit-transform: translateY(18px);
    transform: translateY(18px);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

.sifl-pb-modal-header {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
  -webkit-box-align: flex-start !important;
  -ms-flex-align: flex-start !important;
  align-items: flex-start !important;
  padding: 22px 24px 18px !important;
  border-bottom: 1px solid var(--border) !important;
}

.sifl-pb-modal-eyebrow {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--accent) !important;
  text-transform: uppercase !important;
  margin: 0 0 5px 0 !important;
  font-family: 'DM Sans', sans-serif !important;
}

.sifl-pb-modal-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
}

.sifl-pb-modal-close {
  background: none !important;
  border: none !important;
  font-size: 15px !important;
  cursor: pointer !important;
  color: var(--muted) !important;
  width: 32px !important;
  height: 32px !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  -webkit-transition: background 0.13s, color 0.13s !important;
  transition: background 0.13s, color 0.13s !important;
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.sifl-pb-modal-close:hover {
  background: var(--bg) !important;
  color: var(--text) !important;
}

.sifl-pb-modal-body {
  padding: 22px 24px 26px !important;
}

.sifl-pb-plan-pill {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 13px 15px !important;
  margin-bottom: 20px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.9 !important;
  font-family: 'DM Sans', sans-serif !important;
}

.sifl-pb-plan-pill strong {
  color: var(--navy) !important;
}

.sifl-pb-form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.sifl-pb-field {
  margin-bottom: 14px !important;
}

.sifl-pb-form-grid .sifl-pb-field {
  margin-bottom: 0 !important;
}

.sifl-pb-field label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-family: 'DM Sans', sans-serif !important;
}

.sifl-pb-req {
  color: var(--accent) !important;
}

.sifl-pb-opt {
  font-weight: 400 !important;
  opacity: 0.7 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.sifl-pb-field input,
.sifl-pb-field input[type="text"],
.sifl-pb-field input[type="email"] {
  display: block !important;
  width: 100% !important;
  padding: 10px 13px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13.5px !important;
  color: var(--text) !important;
  background: #fff !important;
  -webkit-transition: border-color 0.13s, -webkit-box-shadow 0.13s !important;
  transition: border-color 0.13s, box-shadow 0.13s !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.sifl-pb-field input:focus {
  border-color: var(--accent) !important;
  -webkit-box-shadow: 0 0 0 3px rgba(46, 117, 182, 0.10) !important;
  box-shadow: 0 0 0 3px rgba(46, 117, 182, 0.10) !important;
}

.sifl-pb-field input.sifl-error {
  border-color: var(--red) !important;
  -webkit-box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08) !important;
}

.sifl-pb-err {
  font-size: 12px !important;
  color: var(--red) !important;
  margin-bottom: 14px !important;
  display: none;
  font-weight: 600 !important;
  font-family: 'DM Sans', sans-serif !important;
}

.sifl-pb-submit-btn {
  display: block !important;
  width: 100% !important;
  padding: 13px !important;
  background: var(--navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  -webkit-transition: background 0.15s !important;
  transition: background 0.15s !important;
  margin-bottom: 12px !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.sifl-pb-submit-btn:hover {
  background: var(--navy-deep) !important;
}

.sifl-pb-submit-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.sifl-pb-modal-note {
  text-align: center !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  line-height: 1.7 !important;
  font-family: 'DM Sans', sans-serif !important;
  margin: 0 !important;
}

/* ── SUCCESS STATE ── */
.sifl-pb-success {
  text-align: center !important;
  padding: 40px 24px 34px !important;
}

.sifl-pb-success-icon {
  font-size: 46px !important;
  margin-bottom: 16px !important;
  display: block !important;
}

.sifl-pb-success h3 {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}

.sifl-pb-success p {
  font-size: 14px !important;
  color: var(--muted) !important;
  line-height: 1.7 !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

.sifl-pb-success-sub {
  font-size: 11.5px !important;
  opacity: 0.7 !important;
}

.sifl-pb-close-btn {
  padding: 10px 28px !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  cursor: pointer !important;
  -webkit-transition: background 0.13s !important;
  transition: background 0.13s !important;
  color: var(--text) !important;
}

.sifl-pb-close-btn:hover {
  background: var(--border) !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
  .sifl-pb-wrap .sifl-pb-top-row {
    grid-template-columns: 1fr !important;
    -ms-grid-columns: 1fr !important;
  }

  .sifl-pb-wrap .sifl-pb-top-row .sifl-pb-card {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 640px) {
  .sifl-pb-wrap {
    padding: 28px 16px 24px !important;
  }

  .sifl-pb-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .sifl-pb-form-grid {
    grid-template-columns: 1fr !important;
  }

  .sifl-pb-wrap .sifl-pb-card {
    padding: 20px 16px !important;
  }

  .sifl-pb-pax-number {
    font-size: 40px !important;
  }

  .sifl-pb-tier-track {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }

  .sifl-pb-tier-seg {
    text-align: left !important;
  }

  /* Courses: horizontal scroll chips on mobile */
  #sifl-step1 {
    overflow: hidden !important;
  }

  .sifl-pb-courses-grid {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 10px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    /* fade-out right edge to hint scroll */
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%) !important;
    mask-image: linear-gradient(to right, black 85%, transparent 100%) !important;
  }

  .sifl-pb-courses-grid::-webkit-scrollbar {
    display: none !important;
  }

  .sifl-pb-course-item {
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
    width: 148px !important;
    min-width: 148px !important;
    padding: 11px 13px !important;
  }

  /* Tier labels: show only the active card on mobile */
  .sifl-pb-tier-labels {
    display: block !important;
  }

  .sifl-pb-tl {
    display: none !important;
  }

  .sifl-pb-tl.active {
    display: block !important;
    /* Full-width active card with a left accent bar instead of top border */
    border-top: 1px solid #C8D0DC !important;
    border-left: 3px solid transparent !important;
    padding: 12px 14px !important;
  }

  .sifl-tl-std.active { border-left-color: #94a3b8 !important; background: linear-gradient(150deg, #f8fafc, #eef1f5) !important; }
  .sifl-tl-slv.active { border-left-color: #64748b !important; background: linear-gradient(150deg, #f1f5f9, #dde5ef) !important; }
  .sifl-tl-gld.active { border-left-color: #f59e0b !important; background: linear-gradient(150deg, #fffbeb, #fde68a) !important; }
  .sifl-tl-plt.active { border-left-color: #334155 !important; background: linear-gradient(150deg, #2d3f58, #0f1e30) !important; }

  /* Lay out the active card content horizontally on mobile */
  .sifl-pb-tl.active {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Hide the dot — left border replaces it as the tier colour indicator */
  .sifl-pb-tl.active::before {
    display: none !important;
  }

  .sifl-pb-tl.active b {
    font-size: 13px !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
  }

  .sifl-pb-tl.active span {
    margin-bottom: 0 !important;
    opacity: 0.7 !important;
    white-space: nowrap !important;
  }

  .sifl-pb-tl.active i {
    margin-left: auto !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  /* Platinum mobile — ensure legible text on dark gradient */
  .sifl-tl-plt.active b   { color: #f1f5f9 !important; }
  .sifl-tl-plt.active span { color: rgba(203, 213, 225, 0.65) !important; opacity: 1 !important; }
  .sifl-tl-plt.active i   { color: #e2e8f0 !important; }
}