/**
 * Export Pricing Calculator — VIBRANT PREMIUM THEME
 * Forest-Jungle Multi-Colour Edition  ·  v2.53.80
 *
 * Design language:
 *   🌲 Forest Green  = primary brand / actions
 *   🌊 Ocean Teal    = sea freight
 *   ✈️ Electric Blue  = air freight
 *   🌶  Amber/Orange  = spices / alerts
 *   🌸 Rose/Pink     = notifications / danger
 *   💛 Gold          = prices / value
 *   🔮 Violet        = AI / smart features
 */

/* ════════════════════════════════════════════════════════════════════
   0 · GOOGLE FONT IMPORT
   ════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@700;800;900&display=swap');

/* ════════════════════════════════════════════════════════════════════
   1 · CSS CUSTOM PROPERTIES (Design Tokens)
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* Forest Green */
  --g900:#1a330e; --g800:#1f3e13; --g700:#2E5A1C;
  --g600:#3D7924; --g500:#4C8C2B; --g400:#65a83e;
  --g300:#a3d98a; --g200:#c8eab4; --g100:#eef6ec; --g50:#f5fbf3;

  /* Ocean Teal */
  --t900:#134e4a; --t700:#0f766e; --t500:#14b8a6;
  --t300:#5eead4; --t100:#ccfbf1; --t50:#f0fdfa;

  /* Electric Blue */
  --b900:#1e3a8a; --b700:#1d4ed8; --b500:#3b82f6;
  --b300:#93c5fd; --b100:#dbeafe; --b50:#eff6ff;

  /* Amber / Spice */
  --a900:#78350f; --a700:#b45309; --a500:#f59e0b;
  --a300:#fcd34d; --a100:#fef3c7; --a50:#fffbeb;

  /* Rose */
  --r700:#be185d; --r500:#ec4899; --r300:#f9a8d4; --r50:#fdf2f8;

  /* Violet / AI */
  --v700:#6d28d9; --v500:#8b5cf6; --v200:#ddd6fe; --v50:#f5f3ff;

  /* Slate/Gray */
  --s950:#020617; --s900:#0f172a; --s800:#1e293b;
  --s700:#334155; --s600:#475569; --s500:#64748b;
  --s400:#94a3b8; --s300:#cbd5e1; --s200:#e2e8f0;
  --s100:#f1f5f9; --s50:#f8fafc;
}

/* ════════════════════════════════════════════════════════════════════
   2 · MISSING TAILWIND UTILITY CLASSES
   ════════════════════════════════════════════════════════════════════ */

/* — Emerald — */
.bg-emerald-900{background-color:#064e3b!important} .bg-emerald-800{background-color:#065f46!important}
.bg-emerald-700{background-color:#047857!important} .bg-emerald-600{background-color:#059669!important}
.bg-emerald-500{background-color:#10b981!important} .bg-emerald-400{background-color:#34d399!important}
.bg-emerald-300{background-color:#6ee7b7!important} .bg-emerald-200{background-color:#a7f3d0!important}
.bg-emerald-100{background-color:#d1fae5!important} .bg-emerald-50{background-color:#ecfdf5!important}
.text-emerald-900{color:#064e3b!important} .text-emerald-800{color:#065f46!important}
.text-emerald-700{color:#047857!important} .text-emerald-600{color:#059669!important}
.text-emerald-500{color:#10b981!important} .text-emerald-400{color:#34d399!important}
.border-emerald-600{border-color:#059669!important} .border-emerald-400{border-color:#34d399!important}
.border-emerald-300{border-color:#6ee7b7!important} .border-emerald-200{border-color:#a7f3d0!important}
.border-emerald-100{border-color:#d1fae5!important}
.hover\:bg-emerald-700:hover{background-color:#047857!important}
.hover\:bg-emerald-600:hover{background-color:#059669!important}
.hover\:bg-emerald-100:hover{background-color:#d1fae5!important}
.hover\:bg-emerald-50:hover{background-color:#ecfdf5!important}
.shadow-emerald-600\/10{box-shadow:0 4px 24px rgba(5,150,105,.10)!important}
.shadow-emerald-600\/20{box-shadow:0 4px 24px rgba(5,150,105,.20)!important}

/* — Teal — */
.bg-teal-900{background-color:var(--t900)!important} .bg-teal-700{background-color:var(--t700)!important}
.bg-teal-500{background-color:var(--t500)!important} .bg-teal-100{background-color:var(--t100)!important}
.bg-teal-50{background-color:var(--t50)!important}
.text-teal-900{color:var(--t900)!important} .text-teal-800{color:#115e59!important}
.text-teal-700{color:var(--t700)!important} .text-teal-600{color:#0d9488!important}
.text-teal-500{color:var(--t500)!important}
.border-teal-600{border-color:#0d9488!important} .border-teal-500{border-color:var(--t500)!important}
.border-teal-400{border-color:#2dd4bf!important} .border-teal-300{border-color:var(--t300)!important}
.border-teal-200{border-color:#99f6e4!important}
.hover\:border-teal-300:hover{border-color:var(--t300)!important}
.hover\:bg-teal-50\/20:hover{background-color:rgba(240,253,250,.20)!important}
.ring-teal-50\/50{--tw-ring-color:rgba(240,253,250,.50)!important}

/* — Slate — */
.bg-slate-950{background-color:var(--s950)!important} .bg-slate-900{background-color:var(--s900)!important}
.bg-slate-800{background-color:var(--s800)!important} .bg-slate-700{background-color:var(--s700)!important}
.bg-slate-600{background-color:var(--s600)!important}
.bg-slate-200{background-color:var(--s200)!important} .bg-slate-100{background-color:var(--s100)!important}
.bg-slate-50{background-color:var(--s50)!important}
.text-slate-900{color:var(--s900)!important} .text-slate-800{color:var(--s800)!important}
.text-slate-700{color:var(--s700)!important} .text-slate-600{color:var(--s600)!important}
.text-slate-500{color:var(--s500)!important} .text-slate-400{color:var(--s400)!important}
.text-slate-300{color:var(--s300)!important}
.border-slate-200{border-color:var(--s200)!important} .border-slate-300{border-color:var(--s300)!important}
.hover\:bg-slate-50:hover{background-color:var(--s50)!important}
.hover\:bg-slate-100:hover{background-color:var(--s100)!important}
.hover\:bg-slate-200:hover{background-color:var(--s200)!important}
.hover\:text-slate-600:hover{color:var(--s600)!important}
.bg-slate-100\/50{background-color:rgba(241,245,249,.50)!important}
.border-slate-200\/50{border-color:rgba(226,232,240,.50)!important}
.border-slate-200\/60{border-color:rgba(226,232,240,.60)!important}

/* — Arbitrary / special — */
.z-\[999999\]{z-index:999999!important} .z-\[9999\]{z-index:9999!important} .z-\[99999\]{z-index:99999!important}
.bg-gray-950\/70{background-color:rgba(3,7,18,.70)!important}
.bg-gray-950\/80{background-color:rgba(3,7,18,.80)!important}
.bg-gray-900\/60{background-color:rgba(17,24,39,.60)!important}
.text-\[9px\]{font-size:9px!important} .text-\[10px\]{font-size:10px!important}
.text-\[11px\]{font-size:11px!important} .text-\[12px\]{font-size:12px!important}
.text-\[13px\]{font-size:13px!important}
.focus\:ring-green-50:focus{box-shadow:0 0 0 4px #f0fdf4!important}
.focus\:ring-4:focus{box-shadow:0 0 0 4px var(--tw-ring-color,#f0fdf4)!important}
.focus\:border-\[\#2E5A1C\]:focus{border-color:#2E5A1C!important}
.ring-green-50\/50{--tw-ring-color:rgba(240,253,244,.50)}

/* — Brand utilities — */
.bg-brand-500{background-color:var(--g700)!important} .bg-brand-600{background-color:var(--g800)!important}
.hover\:bg-brand-600:hover{background-color:var(--g800)!important}
.shadow-brand-500\/20{box-shadow:0 4px 24px rgba(46,90,28,.20)!important}

/* — Animation utilities — */
.backdrop-blur-md{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)!important}
.backdrop-blur-sm{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)!important}
.transition-all{transition:all .18s cubic-bezier(.4,0,.2,1)!important}
.transition-colors{transition:background-color .15s,color .15s,border-color .15s!important}
.transition-opacity{transition:opacity .15s ease!important}

/* ════════════════════════════════════════════════════════════════════
   3 · KEYFRAME ANIMATIONS
   ════════════════════════════════════════════════════════════════════ */
@keyframes ep-fade-in  { from{opacity:0;transform:translateY(12px) scale(.97)} to{opacity:1;transform:none} }
@keyframes ep-slide-up { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
@keyframes ep-bounce   { 0%,100%{transform:translateY(-8%)} 50%{transform:translateY(0)} }
@keyframes ep-spin     { to{transform:rotate(360deg)} }
@keyframes ep-shimmer  { 0%{background-position:200% center} 100%{background-position:-200% center} }
@keyframes ep-pulse-green {
  0%,100%{box-shadow:0 8px 32px rgba(46,90,28,.45)}
  50%     {box-shadow:0 8px 56px rgba(46,90,28,.75),0 0 0 6px rgba(46,90,28,.12)}
}
@keyframes ep-pulse-blue {
  0%,100%{box-shadow:0 8px 32px rgba(59,130,246,.40)}
  50%     {box-shadow:0 8px 56px rgba(59,130,246,.70),0 0 0 6px rgba(59,130,246,.12)}
}
@keyframes ep-glow-border {
  0%,100%{border-color:rgba(46,90,28,.30)}
  50%     {border-color:rgba(46,90,28,.80)}
}
@keyframes ep-float {
  0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)}
}

.animate-\[fadeIn_0\.2s_ease-out\]  { animation:ep-fade-in .22s cubic-bezier(.22,1,.36,1) both!important }
.animate-bounce                      { animation:ep-bounce 1.1s infinite!important }
.animate-spin                        { animation:ep-spin .8s linear infinite!important }

/* ════════════════════════════════════════════════════════════════════
   4 · ROOT WRAPPER
   ════════════════════════════════════════════════════════════════════ */
#export-pricing-root {
  font-family: 'Inter', 'Outfit', system-ui, sans-serif;
  /* Colourful gradient page background */
  background: linear-gradient(160deg,
    #f5fbf3 0%,
    #eef6ff 30%,
    #faf5ff 55%,
    #fff8f0 80%,
    #f0fdfa 100%);
  border-radius: 20px;
  min-height: 300px;
}

/* ════════════════════════════════════════════════════════════════════
   5 · HEADER / HERO BAR  (Real-Time Trade Intelligence bar)
   ════════════════════════════════════════════════════════════════════ */
/* Top info bar */
#export-pricing-root .bg-white.border.border-gray-200,
#export-pricing-root .bg-white.border-b {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 45%, #134e4a 100%) !important;
  border: none !important;
  border-radius: 16px !important;
  color: #fff !important;
}

/* Trade alert items */
#export-pricing-root .bg-amber-50, #export-pricing-root .bg-yellow-50 {
  background: linear-gradient(135deg,#fef9ee,#fff8e1) !important;
  border-left: 3px solid #f59e0b !important;
}

/* ════════════════════════════════════════════════════════════════════
   6 · SECTION CARDS — vibrant gradient borders + coloured headers
   ════════════════════════════════════════════════════════════════════ */

/* Generic card wrapper */
#export-pricing-root .bg-slate-50.border.border-slate-200.rounded-2xl,
#export-pricing-root .bg-white.border.border-gray-200.rounded-2xl,
#export-pricing-root .bg-white.border.border-slate-200.rounded-2xl {
  background: #fff !important;
  border: 1.5px solid transparent !important;
  background-clip: padding-box !important;
  box-shadow:
    0 0 0 1.5px rgba(46,90,28,.12),
    0 4px 24px rgba(46,90,28,.07),
    0 1px 4px rgba(0,0,0,.05) !important;
  transition: box-shadow .25s, transform .18s !important;
}
#export-pricing-root .bg-slate-50.border.border-slate-200.rounded-2xl:hover,
#export-pricing-root .bg-white.border.border-gray-200.rounded-2xl:hover {
  box-shadow:
    0 0 0 1.5px rgba(46,90,28,.28),
    0 8px 32px rgba(46,90,28,.12),
    0 2px 8px rgba(0,0,0,.07) !important;
  transform: translateY(-1px) !important;
}

/* Section h3 headers — coloured gradient pill */
#export-pricing-root h3.text-xs.font-black {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  font-weight: 900 !important;
  border-radius: 10px !important;
  padding: 9px 14px !important;
  border: none !important;
}

/* Transport header → electric indigo-to-green */
#export-pricing-root h3[class*="Sourcing Mode"] ,
h3[class*="text-xs font-black text-slate-800"]:first-of-type {
  background: linear-gradient(120deg,#eef6ec,#eff6ff) !important;
  border-left: 3px solid #4C8C2B !important;
}

/* Individual section header colours by text content using the data approach */
#export-pricing-root [id="step-2"] h3 {
  background: linear-gradient(120deg, #eff6ff, #e0f2fe) !important;
  border-left: 3px solid #3b82f6 !important;
  color: #1e3a8a !important;
}
#export-pricing-root [id="step-2"] h3:nth-of-type(2) {
  background: linear-gradient(120deg, #f0fdfa, #e0f2fe) !important;
  border-left: 3px solid #14b8a6 !important;
  color: #134e4a !important;
}

/* ════════════════════════════════════════════════════════════════════
   7 · PRODUCT CATEGORY FILTER PILLS
   ════════════════════════════════════════════════════════════════════ */

/* ALL active (forest green) */
#export-pricing-root button.bg-\[\#2E5A1C\],
#export-pricing-root button[style*="2E5A1C"],
#export-pricing-root button.bg-\[\#2e5a1c\] {
  background: linear-gradient(135deg,#1a330e,#2E5A1C,#4C8C2B) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(46,90,28,.40) !important;
  border: none !important;
  font-weight: 900 !important;
}

/* Category pill base style */
#export-pricing-root .flex.flex-wrap.gap-1\.5 button,
#export-pricing-root .flex.flex-wrap.gap-2 button {
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  transition: all .18s !important;
  border-radius: 99px !important;
  padding: 5px 14px !important;
  font-size: 11px !important;
}

/* Vegetables → fresh green */
#export-pricing-root button[class*="Vegetables"] ,
#export-pricing-root .ep-cat-vegetables {
  background: linear-gradient(135deg,#bbf7d0,#d1fae5) !important;
  color:#065f46 !important; border:1.5px solid #6ee7b7 !important;
}
/* Grains → warm amber */
#export-pricing-root .ep-cat-grains {
  background: linear-gradient(135deg,#fef3c7,#fde68a) !important;
  color:#92400e !important; border:1.5px solid #fcd34d !important;
}
/* Spices → fiery orange */
#export-pricing-root .ep-cat-spices {
  background: linear-gradient(135deg,#ffedd5,#fed7aa) !important;
  color:#9a3412 !important; border:1.5px solid #fdba74 !important;
}
/* Fruits → tropical pink-rose */
#export-pricing-root .ep-cat-fruits {
  background: linear-gradient(135deg,#fce7f3,#fbcfe8) !important;
  color:#9d174d !important; border:1.5px solid #f9a8d4 !important;
}
/* Herbs → lime */
#export-pricing-root .ep-cat-herbs {
  background: linear-gradient(135deg,#ecfccb,#d9f99d) !important;
  color:#3f6212 !important; border:1.5px solid #bef264 !important;
}
/* Sea Cargo → ocean teal */
#export-pricing-root .ep-cat-sea {
  background: linear-gradient(135deg,#ccfbf1,#99f6e4) !important;
  color:#134e4a !important; border:1.5px solid #5eead4 !important;
}

/* ════════════════════════════════════════════════════════════════════
   8 · TRANSPORT MODE BUTTONS
   ════════════════════════════════════════════════════════════════════ */

/* Air Freight ACTIVE */
#export-pricing-root .border-\[\#2E5A1C\].bg-\[\#eef6ec\],
#export-pricing-root .border-\[\#2E5A1C\].bg-\[\#eef6ec\].text-\[\#1a330e\] {
  background: linear-gradient(145deg,#eff6ff,#dbeafe,#e0f2fe) !important;
  border: 2px solid #3b82f6 !important;
  color: #1e3a8a !important;
  box-shadow: 0 0 0 4px rgba(59,130,246,.15), 0 4px 16px rgba(59,130,246,.20) !important;
}

/* Sea Freight ACTIVE */
#export-pricing-root .border-teal-500.bg-teal-50 {
  background: linear-gradient(145deg,#f0fdfa,#ccfbf1,#a7f3d0) !important;
  border: 2px solid #14b8a6 !important;
  color: #134e4a !important;
  box-shadow: 0 0 0 4px rgba(20,184,166,.15), 0 4px 16px rgba(20,184,166,.20) !important;
}

/* ════════════════════════════════════════════════════════════════════
   9 · UNIT COST BREAKDOWN — colour-coded rows
   ════════════════════════════════════════════════════════════════════ */

/* AI Smart Cost / Price breakdown section */
#export-pricing-root .bg-\[\#f5fbf3\] {
  background: linear-gradient(135deg,#f5fbf3,#eff6ff) !important;
}

/* Highlight the "AI SMART COST INTELLIGENCE" header */
#export-pricing-root div[class*="LIVE RATES"],
#export-pricing-root span[class*="LIVE RATES"] {
  background: linear-gradient(90deg,#10b981,#059669) !important;
  color:#fff !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}

/* ════════════════════════════════════════════════════════════════════
   10 · INPUT / FORM FIELDS — forest green focus
   ════════════════════════════════════════════════════════════════════ */
#export-pricing-root input,
#export-pricing-root select,
#export-pricing-root textarea {
  border-radius: 12px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #fff !important;
  transition: border-color .18s, box-shadow .18s !important;
}
#export-pricing-root input:focus,
#export-pricing-root select:focus,
#export-pricing-root textarea:focus {
  border-color: #2E5A1C !important;
  box-shadow: 0 0 0 3px rgba(46,90,28,.15), 0 1px 4px rgba(46,90,28,.10) !important;
  outline: none !important;
}

/* Product search bar — special treatment */
#product-search-input {
  background: linear-gradient(to right,#f5fbf3,#fff) !important;
  border: 1.5px solid #c8eab4 !important;
  font-size: 14px !important;
}
#product-search-input:focus {
  background: #fff !important;
  border-color: #2E5A1C !important;
  box-shadow: 0 0 0 4px rgba(46,90,28,.13), 0 2px 8px rgba(46,90,28,.10) !important;
}

/* ════════════════════════════════════════════════════════════════════
   11 · BUTTONS — vibrant hierarchy
   ════════════════════════════════════════════════════════════════════ */

/* Primary green buttons */
#export-pricing-root button.bg-\[\#2E5A1C\],
#export-pricing-root button[class*="bg-[#2E5A1C]"] {
  background: linear-gradient(135deg,#1a330e,#2E5A1C 50%,#4C8C2B) !important;
  box-shadow: 0 3px 14px rgba(46,90,28,.40) !important;
  color: #fff !important;
  font-weight: 900 !important;
}
#export-pricing-root button.bg-\[\#2E5A1C\]:hover {
  background: linear-gradient(135deg,#1f3e13,#3D7924) !important;
  box-shadow: 0 5px 20px rgba(46,90,28,.55) !important;
  transform: translateY(-1px) !important;
}

/* Rose / danger buttons */
#export-pricing-root button.bg-rose-500 {
  background: linear-gradient(135deg,#be185d,#ec4899) !important;
  box-shadow: 0 3px 12px rgba(236,72,153,.30) !important;
}
#export-pricing-root button.bg-rose-500:hover {
  background: linear-gradient(135deg,#9d174d,#db2777) !important;
  box-shadow: 0 5px 20px rgba(236,72,153,.45) !important;
  transform: translateY(-1px) !important;
}

/* Edit / secondary green */
#export-pricing-root button.bg-\[\#4C8C2B\],
#export-pricing-root button[class*="bg-emerald-600"] {
  background: linear-gradient(135deg,#065f46,#059669) !important;
  box-shadow: 0 3px 12px rgba(5,150,105,.30) !important;
}

/* ════════════════════════════════════════════════════════════════════
   12 · FLOATING ACTION BAR
   ════════════════════════════════════════════════════════════════════ */
#ep-float-bar {
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.18)) !important;
}

/* 🔵 Preview Invoice */
#ep-float-btn-preview {
  background: linear-gradient(135deg,#1d4ed8,#3b82f6,#60a5fa) !important;
  border: 1.5px solid rgba(255,255,255,.25) !important;
  box-shadow: 0 6px 28px rgba(59,130,246,.50), 0 2px 8px rgba(0,0,0,.15) !important;
  letter-spacing: .025em !important;
  animation: ep-pulse-blue 2.8s ease-in-out infinite !important;
}
#ep-float-btn-preview:hover {
  background: linear-gradient(135deg,#1e3a8a,#2563eb) !important;
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow: 0 12px 40px rgba(59,130,246,.65) !important;
  animation: none !important;
}

/* 🌲 Generate Proforma */
#ep-float-btn-generate {
  background: linear-gradient(135deg,#0a1f05,#1a330e,#2E5A1C,#4C8C2B) !important;
  border: 1.5px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 6px 28px rgba(46,90,28,.55), 0 2px 8px rgba(0,0,0,.15) !important;
  letter-spacing: .025em !important;
  animation: ep-pulse-green 3s ease-in-out infinite !important;
}
#ep-float-btn-generate:hover {
  background: linear-gradient(135deg,#1f3e13,#3D7924,#65a83e) !important;
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow: 0 14px 48px rgba(46,90,28,.70) !important;
  animation: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   13 · STATUS / BADGE PILLS — vibrant colours
   ════════════════════════════════════════════════════════════════════ */

/* LIVE badge */
#export-pricing-root [class*="LIVE"],
#export-pricing-root span[class*="bg-emerald-500"] {
  background: linear-gradient(90deg,#059669,#10b981) !important;
  color: #fff !important;
  font-weight: 900 !important;
  animation: ep-pulse-green 2s ease-in-out infinite !important;
}

/* AI badge */
#export-pricing-root [class*="bg-violet"],
#export-pricing-root [class*="bg-purple"] {
  background: linear-gradient(90deg,#6d28d9,#8b5cf6) !important;
  color: #fff !important;
}

/* Freight rate change indicators */
#export-pricing-root .text-red-500, #export-pricing-root .text-rose-500 {
  color: #e11d48 !important; font-weight: 800 !important;
}
#export-pricing-root .text-green-500, #export-pricing-root .text-emerald-500 {
  color: #059669 !important; font-weight: 800 !important;
}

/* ════════════════════════════════════════════════════════════════════
   14 · MODALS
   ════════════════════════════════════════════════════════════════════ */

/* Overlay backdrop */
.export-pricing-pi-modal-wrapper {
  background: rgba(2,6,23,.85) !important;
  backdrop-filter: blur(14px) saturate(1.5) !important;
}

/* Modal card entrance */
#export-pricing-root .fixed.inset-0 > div[class*="bg-white"] {
  box-shadow: 0 32px 80px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.10) !important;
}

/* Success modal icon */
#export-pricing-root .bg-emerald-100.animate-bounce {
  background: linear-gradient(135deg,#d1fae5,#a7f3d0) !important;
  border: 2px solid #34d399 !important;
  box-shadow: 0 4px 20px rgba(52,211,153,.40) !important;
}

/* Success "View Invoice" button */
#export-pricing-root button.bg-emerald-600 {
  background: linear-gradient(135deg,#065f46,#059669,#10b981) !important;
  box-shadow: 0 4px 18px rgba(5,150,105,.40) !important;
}
#export-pricing-root button.bg-emerald-600:hover {
  background: linear-gradient(135deg,#047857,#059669) !important;
  box-shadow: 0 6px 24px rgba(5,150,105,.55) !important;
  transform: translateY(-1px) !important;
}

/* ════════════════════════════════════════════════════════════════════
   15 · PROFORMA INVOICE PRINT AREA — clean elegant
   ════════════════════════════════════════════════════════════════════ */
.export-pricing-pi-modal-wrapper .bg-white {
  border-radius: 24px !important;
  box-shadow: 0 40px 100px rgba(0,0,0,.20) !important;
  overflow: hidden !important;
}

/* PI header banner */
.export-pricing-pi-modal-wrapper h2 {
  background: linear-gradient(135deg,#0f172a,#1a330e,#2E5A1C) !important;
  color: #fff !important;
  padding: 20px 28px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
   16 · TABLE — colour-striped rows
   ════════════════════════════════════════════════════════════════════ */
#export-pricing-root table {
  border-collapse: collapse !important;
  width: 100% !important;
}
#export-pricing-root table thead tr {
  background: linear-gradient(90deg, #f5fbf3, #eff6ff) !important;
  border-bottom: 2px solid #c8eab4 !important;
}
#export-pricing-root table thead th {
  color: #1a330e !important;
  font-weight: 900 !important;
  font-size: 9px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
#export-pricing-root table tbody tr:nth-child(even) {
  background: rgba(245,251,243,.55) !important;
}
#export-pricing-root table tbody tr:hover {
  background: linear-gradient(90deg,#eef6ec,#eff6ff) !important;
}
#export-pricing-root table tr.bg-\[\#f5fbf3\]\/60 {
  background: linear-gradient(90deg,#eef6ec,#f0fdf4) !important;
  border-top: 2px solid #65a83e !important;
}

/* ════════════════════════════════════════════════════════════════════
   17 · PRICE VALUE DISPLAY — golden highlights
   ════════════════════════════════════════════════════════════════════ */

/* Main quote total */
#export-pricing-root .text-\[\#2E5A1C\].font-black,
#export-pricing-root .text-\[\#2e5a1c\].font-black {
  background: linear-gradient(135deg, #1a330e, #2E5A1C, #65a83e) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 1px 0 rgba(46,90,28,.15)) !important;
}

/* ════════════════════════════════════════════════════════════════════
   18 · SCROLLBAR — forest green
   ════════════════════════════════════════════════════════════════════ */
#export-pricing-root ::-webkit-scrollbar { width:5px; height:5px }
#export-pricing-root ::-webkit-scrollbar-track { background:#f1f5f9; border-radius:99px }
#export-pricing-root ::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #4C8C2B, #2E5A1C);
  border-radius: 99px;
}
#export-pricing-root ::-webkit-scrollbar-thumb:hover { background: #1a330e }

/* ════════════════════════════════════════════════════════════════════
   19 · LIVE FREIGHT MARKET PULSE CARDS
   ════════════════════════════════════════════════════════════════════ */

/* Market pulse card wrapper */
#export-pricing-root .border.border-slate-100.rounded-xl,
#export-pricing-root .border.border-gray-100.rounded-xl {
  border: none !important;
  border-radius: 14px !important;
}

/* Sea Freight card */
#export-pricing-root div[class*="Sea Freight"],
#export-pricing-root div:has(> span:contains("Sea Freight")) {
  background: linear-gradient(135deg,#f0fdfa,#ccfbf1) !important;
  border-left: 3px solid #14b8a6 !important;
}

/* Air Cargo card */
#export-pricing-root div[class*="Air Cargo"] {
  background: linear-gradient(135deg,#eff6ff,#dbeafe) !important;
  border-left: 3px solid #3b82f6 !important;
}

/* ════════════════════════════════════════════════════════════════════
   20 · MASTER PRICE LIST TAB BUTTON
   ════════════════════════════════════════════════════════════════════ */
#export-pricing-root button:has(span[class*="Master"]),
#export-pricing-root button[class*="Master"] {
  background: linear-gradient(135deg,#eff6ff,#dbeafe) !important;
  border: 1.5px solid #93c5fd !important;
  color: #1e3a8a !important;
  box-shadow: 0 2px 10px rgba(59,130,246,.15) !important;
}

/* ════════════════════════════════════════════════════════════════════
   21 · REGULATORY / AI ADVICE SECTION
   ════════════════════════════════════════════════════════════════════ */

/* AI Predicted route badge */
#export-pricing-root [class*="AI Predicted"],
#export-pricing-root div:has(> span:contains("AI Predicted")) {
  background: linear-gradient(90deg,#f5f3ff,#ede9fe) !important;
  border: 1.5px solid #c4b5fd !important;
}

/* Certification chips */
#export-pricing-root [class*="bg-blue-50"],
#export-pricing-root [class*="bg-blue-100"] {
  background: linear-gradient(135deg,#eff6ff,#dbeafe) !important;
}
#export-pricing-root [class*="bg-amber-50"],
#export-pricing-root [class*="bg-yellow-50"] {
  background: linear-gradient(135deg,#fffbeb,#fef3c7) !important;
}
#export-pricing-root [class*="bg-red-50"],
#export-pricing-root [class*="bg-rose-50"] {
  background: linear-gradient(135deg,#fff1f2,#ffe4e6) !important;
}

/* ════════════════════════════════════════════════════════════════════
   22 · PRINT OVERRIDES
   ════════════════════════════════════════════════════════════════════ */
@media print {
  #ep-float-bar, #ep-float-btn-generate, #ep-float-btn-preview { display:none!important }
  .export-pricing-pi-modal-wrapper { background:#fff!important; backdrop-filter:none!important }
  #export-pricing-root { background:#fff!important }
}

/* ════════════════════════════════════════════════════════════════════
   23 · RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:640px) {
  #ep-float-bar { bottom:14px!important; right:10px!important; gap:7px!important }
  .ep-float-btn { padding:9px 13px!important; font-size:11.5px!important }
  #export-pricing-root { border-radius:12px!important }
}

/* ════════════════════════════════════════════════════════════════════
   24 · COMPATIBILITY COLORS (TYPO FALLBACKS)
   ════════════════════════════════════════════════════════════════════ */
.border-gray-255 { border-color: #d1d5db !important; }
.border-gray-150 { border-color: #e2e8f0 !important; }
.divide-gray-150 > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0 !important; }
.bg-gray-105 { background-color: #f8fafc !important; }
.hover\:bg-gray-150:hover { background-color: #f1f5f9 !important; }
.bg-indigo-150 { background-color: #e0e7ff !important; }
.text-indigo-850 { color: #312e81 !important; }
.text-emerald-255 { color: #34d399 !important; }
.bg-amber-105\/50 { background-color: rgba(254,243,199,0.5) !important; }
.bg-emerald-105\/50 { background-color: rgba(209,250,229,0.5) !important; }
.text-slate-550 { color: #475569 !important; }