/* ==================================================================
 * Calculator v3 — "Stripe × Linear × Apple" Ultra-Modern Tech Aesthetic
 *
 * Design principles:
 *  1) Deep navy gradient background with animated orbs (Linear-style)
 *  2) Glassmorphism cards (Vercel / Figma style)
 *  3) Large display numbers with count-up animation
 *  4) Tactile micro-interactions (hover lift, focus pulse, success bloom)
 *  5) Orange (#FF6B00) preserved as the single brand accent
 *  6) 100% responsive: side-by-side on desktop, stacked on mobile
 * ================================================================== */

/* ===== 0. Tame legacy chrome when v3 is mounted ===== */
/* Hide the large legacy hero. Keep trust strip visible (tests need it) but
   restyle to blend with v3's dark palette. */
body:has(.lk-calc-v3) .lk-hero {
  display: none !important;
}
body:has(.lk-calc-v3) .lk-container {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
body:has(.lk-calc-v3) {
  background: #0A0E1A !important;
}
body:has(.lk-calc-v3) .lk-trust-strip {
  background: transparent !important;
  border: 0 !important;
  padding: 8px 24px !important;
  margin: 0 auto !important;
  max-width: 1280px !important;
  gap: 12px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}
body:has(.lk-calc-v3) .lk-trust-strip .lk-trust-card {
  background: rgba(18, 26, 46, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  color: rgba(203, 213, 225, 0.85) !important;
  font-size: 12px !important;
  box-shadow: none !important;
}
body:has(.lk-calc-v3) .lk-trust-strip .lk-trust-card b {
  color: #FF6B00 !important;
  margin-right: 6px !important;
}
body:has(.lk-calc-v3) .lk-trust-strip .lk-trust-check {
  background: #FF6B00 !important;
  color: #0A0E1A !important;
  width: 16px !important; height: 16px !important;
  min-width: 16px !important;
}

/* ===== 0b. ZERO-WHITE POLICY =====
   Nuke every leftover white background that legacy v2 stylesheets may inject
   into the quote page. Applies to BOTH desktop and mobile, default state,
   hover, focus, and autofill. The calculator must always feel dark-tech. */
body:has(.lk-calc-v3) input,
body:has(.lk-calc-v3) select,
body:has(.lk-calc-v3) textarea,
body:has(.lk-calc-v3) .lk-input,
body:has(.lk-calc-v3) .lk-select,
body:has(.lk-calc-v3) .lk-textarea,
body:has(.lk-calc-v3) .lk-pick-opt,
body:has(.lk-calc-v3) .lk-btn-secondary,
body:has(.lk-calc-v3) .lk-step-dot {
  background: rgba(0, 0, 0, 0.35) !important;
  color: var(--v3-text) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
}
body:has(.lk-calc-v3) input::placeholder,
body:has(.lk-calc-v3) textarea::placeholder {
  color: rgba(148, 163, 184, 0.65) !important;
}
/* Kill Chrome / Safari / Edge autofill tinting on every input in v3 */
body:has(.lk-calc-v3) input:-webkit-autofill,
body:has(.lk-calc-v3) input:-webkit-autofill:hover,
body:has(.lk-calc-v3) input:-webkit-autofill:focus,
body:has(.lk-calc-v3) input:-webkit-autofill:active,
body:has(.lk-calc-v3) textarea:-webkit-autofill,
body:has(.lk-calc-v3) select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(10, 14, 26, 0.96) inset !important;
  -webkit-text-fill-color: #F8FAFC !important;
  caret-color: #F8FAFC !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  transition: background-color 9999s ease-out, color 9999s ease-out !important;
}
/* Firefox autofill */
body:has(.lk-calc-v3) input:autofill {
  background: rgba(10, 14, 26, 0.96) !important;
  color: #F8FAFC !important;
  box-shadow: 0 0 0 1000px rgba(10, 14, 26, 0.96) inset !important;
}
/* Any legacy card surface that might sit under v3 content */
body:has(.lk-calc-v3) .lk-card,
body:has(.lk-calc-v3) .lk-section-card {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ===== 1. Color tokens (scoped to .lk-calc-v3) ===== */
.lk-calc-v3 {
  --v3-bg-deep:    #0A0E1A;
  --v3-bg-mid:     #0F1628;
  --v3-bg-panel:   #121A2E;
  --v3-border:     rgba(255, 255, 255, 0.08);
  --v3-border-hi:  rgba(255, 255, 255, 0.16);
  --v3-text:       #F8FAFC;
  --v3-text-soft:  #94A3B8;
  --v3-text-dim:   #64748B;
  --v3-accent:     #FF6B00;
  --v3-accent-hi:  #FFB84D;
  --v3-accent-gl:  rgba(245, 166, 35, 0.28);
  --v3-success:    #10B981;
  --v3-danger:     #F87171;
  --v3-glow-blue:  rgba(99, 102, 241, 0.18);
  --v3-glow-amber: rgba(245, 166, 35, 0.15);

  color: var(--v3-text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== 2. Full-page dark background with animated orbs ===== */
.lk-calc-v3-wrap {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 1200px 600px at 20% -10%, var(--v3-glow-blue) 0%, transparent 50%),
    radial-gradient(ellipse 900px 500px at 85% 10%, var(--v3-glow-amber) 0%, transparent 55%),
    linear-gradient(180deg, var(--v3-bg-deep) 0%, var(--v3-bg-mid) 100%);
  /* Clip horizontal overflow from the decorative orbs (::before / ::after
     positioned offscreen by design) but leave the vertical axis fully
     scrollable. Using `overflow: hidden` here would create a scrolling
     containing block that disables `position: sticky` on descendants —
     breaking the PC sticky quote panel. `overflow-x: clip` preserves the
     visual clipping without the sticky side-effect. */
  overflow-x: clip;
  overflow-y: visible;
  padding: 32px 24px 64px;
  box-sizing: border-box;
}

/* ---- Unblock sticky on PC ------------------------------------------------
   linkorae-v2.css (`html, body { overflow: auto }` at >=900px) makes <body>
   its own scroll container on desktop. When that happens, the *document*
   element is NOT the scroll root, and `position: sticky` inside <body>
   computes its offset against the body's scroll viewport — which, because
   the browser still scrolls <html>, visually "releases" and moves with the
   page. We override this ONLY when the v3 calculator is mounted so other
   v2 pages (index/services/etc.) keep their current behavior.
   The `.lk-calc-v3-wrap` ancestor selector guarantees this rule applies
   exclusively to the quote page where v3 is rendered.
--------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  html:has(.lk-calc-v3-wrap),
  body:has(.lk-calc-v3-wrap) {
    overflow: visible !important;
    height: auto !important;
  }
}
.lk-calc-v3-wrap::before,
.lk-calc-v3-wrap::after {
  content: "";
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
  pointer-events: none;
}
.lk-calc-v3-wrap::before {
  top: -150px; left: -100px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
  animation: v3-orb-drift-1 16s ease-in-out infinite;
}
.lk-calc-v3-wrap::after {
  bottom: -200px; right: -100px;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.18) 0%, transparent 70%);
  animation: v3-orb-drift-2 20s ease-in-out infinite;
}
@keyframes v3-orb-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(100px, 80px) scale(1.1); }
}
@keyframes v3-orb-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-80px, -60px) scale(1.15); }
}

/* ===== 3. Main grid layout: form (left) + live quote panel (right) ===== */
.lk-calc-v3-grid {
  position: relative; z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 1024px) {
  .lk-calc-v3-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ===== 4. Hero header ===== */
.lk-calc-v3-hero {
  grid-column: 1 / -1;
  text-align: center;
  margin: 24px 0 40px;
}
.lk-calc-v3-hero .lk-v3-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(245, 166, 35, 0.12);
  border: 1px solid rgba(245, 166, 35, 0.3);
  border-radius: 999px;
  color: var(--v3-accent-hi);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.lk-calc-v3-hero .lk-v3-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--v3-accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--v3-accent);
  animation: v3-pulse-dot 1.8s ease-in-out infinite;
}
@keyframes v3-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}
.lk-calc-v3-hero h1 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  background: linear-gradient(180deg, #fff 0%, #CBD5E1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lk-calc-v3-hero h1 .lk-v3-accent-word {
  background: linear-gradient(135deg, var(--v3-accent) 0%, var(--v3-accent-hi) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lk-calc-v3-hero p {
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--v3-text-soft);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ===== 5. Glass card (the base element) ===== */
.lk-v3-card {
  background: rgba(18, 26, 46, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--v3-border);
  border-radius: 20px;
  padding: 28px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.lk-v3-card + .lk-v3-card { margin-top: 20px; }
.lk-v3-card.is-focused {
  border-color: rgba(245, 166, 35, 0.4);
  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.08), 0 20px 48px -20px rgba(245, 166, 35, 0.25);
}

.lk-v3-card-head {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 6px;
}
.lk-v3-step-badge {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--v3-accent) 0%, var(--v3-accent-hi) 100%);
  color: #0A0E1A;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px var(--v3-accent-gl);
  flex-shrink: 0;
}
.lk-v3-card-head h2 {
  font-size: 20px; font-weight: 700;
  color: var(--v3-text);
  margin: 0;
  letter-spacing: -0.01em;
}
.lk-v3-card-desc {
  color: var(--v3-text-soft);
  font-size: 14px;
  margin: 0 0 22px 40px;
  line-height: 1.5;
}

/* ===== 6. Cargo picker — large tactile cards ===== */
.lk-v3-cargo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 640px) {
  .lk-v3-cargo-grid { grid-template-columns: 1fr; }
}
.lk-v3-cargo-card {
  position: relative;
  padding: 20px 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1.5px solid var(--v3-border);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: all .2s ease;
  overflow: hidden;
}
.lk-v3-cargo-card:hover {
  transform: translateY(-2px);
  border-color: var(--v3-border-hi);
  background: rgba(255, 255, 255, 0.04);
}
.lk-v3-cargo-card.active {
  border-color: var(--v3-accent);
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.12) 0%, rgba(245, 166, 35, 0.03) 100%);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.1), 0 12px 32px -16px var(--v3-accent-gl);
}
.lk-v3-cargo-card.active::after {
  content: "✓";
  position: absolute; top: 14px; right: 14px;
  width: 22px; height: 22px;
  background: var(--v3-accent);
  color: #0A0E1A;
  border-radius: 50%;
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.lk-v3-cargo-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.06);
}
.lk-v3-cargo-card.active .lk-v3-cargo-icon {
  background: rgba(245, 166, 35, 0.18);
}
.lk-v3-cargo-title {
  font-size: 15px; font-weight: 700;
  color: var(--v3-text);
  margin: 0 0 4px;
}
.lk-v3-cargo-sub {
  font-size: 12.5px;
  color: var(--v3-text-dim);
  line-height: 1.4;
}

/* ===== 7. Input fields (minimal, floating label) ===== */
.lk-v3-field { margin-bottom: 16px; }
.lk-v3-field:last-child { margin-bottom: 0; }
.lk-v3-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lk-v3-row3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 640px) {
  .lk-v3-row2, .lk-v3-row3 { grid-template-columns: 1fr 1fr; }
  .lk-v3-row3 > *:first-child { grid-column: span 2; }
}
.lk-v3-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--v3-text-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.lk-v3-label .lk-v3-label-hint {
  font-size: 11px;
  color: var(--v3-text-dim);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.lk-v3-label .req { color: var(--v3-accent); margin-left: 2px; }

.lk-v3-input {
  width: 100%; box-sizing: border-box;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--v3-border);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--v3-text);
  font-size: 15px; font-weight: 500;
  font-family: inherit;
  transition: all .2s ease;
  outline: none;
}
.lk-v3-input::placeholder { color: var(--v3-text-dim); font-weight: 400; }
.lk-v3-input:hover { border-color: var(--v3-border-hi); }
.lk-v3-input:focus {
  border-color: var(--v3-accent);
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.12);
}
.lk-v3-input.has-error {
  border-color: var(--v3-danger);
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.12);
}
/* Hide spinner on ALL number inputs inside the V3 calculator.
   Customers type numbers directly — no plus/minus clicking.
   (2025-01-04: extended from .lk-v3-input to cover .lk-v3-input-sm
   which is used by the Box Dimensions grid L/W/H/qty fields.) */
.lk-v3-input[type="number"]::-webkit-outer-spin-button,
.lk-v3-input[type="number"]::-webkit-inner-spin-button,
.lk-v3-input-sm[type="number"]::-webkit-outer-spin-button,
.lk-v3-input-sm[type="number"]::-webkit-inner-spin-button,
.lk-v3-box input[type="number"]::-webkit-outer-spin-button,
.lk-v3-box input[type="number"]::-webkit-inner-spin-button,
.lk-calc-v3-wrap input[type="number"]::-webkit-outer-spin-button,
.lk-calc-v3-wrap input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.lk-v3-input[type="number"],
.lk-v3-input-sm[type="number"],
.lk-v3-box input[type="number"],
.lk-calc-v3-wrap input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Kill Chrome / Safari autofill white/yellow background on ALL v3 inputs.
   This was the real source of the “white boxes” inside the dark calculator. */
.lk-v3-input:-webkit-autofill,
.lk-v3-input:-webkit-autofill:hover,
.lk-v3-input:-webkit-autofill:focus,
.lk-v3-input:-webkit-autofill:active,
.lk-v3-box-input-wrap .lk-v3-input-sm:-webkit-autofill,
.lk-v3-fba-combo input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.35) inset !important;
  -webkit-text-fill-color: var(--v3-text) !important;
  caret-color: var(--v3-text);
  transition: background-color 9999s ease-out;
}

/* ===== 8. FBA Combobox ===== */
.lk-v3-combo { position: relative; }
.lk-v3-combo-input {
  padding-right: 40px;
}
.lk-v3-combo-caret {
  position: absolute; top: 50%; right: 14px;
  transform: translateY(-50%);
  color: var(--v3-text-dim);
  pointer-events: none;
  transition: transform .2s ease;
}
.lk-v3-combo.open .lk-v3-combo-caret { transform: translateY(-50%) rotate(180deg); color: var(--v3-accent); }
.lk-v3-combo-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: rgba(18, 26, 46, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--v3-border-hi);
  border-radius: 12px;
  max-height: 280px; overflow-y: auto;
  z-index: 50;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  display: none;
  padding: 6px;
}
.lk-v3-combo.open .lk-v3-combo-menu { display: block; }
.lk-v3-combo-menu-head {
  padding: 10px 12px 8px;
  font-size: 11px;
  color: var(--v3-text-dim);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lk-v3-combo-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease;
}
.lk-v3-combo-opt:hover,
.lk-v3-combo-opt.active {
  background: rgba(245, 166, 35, 0.12);
}
.lk-v3-combo-opt-code {
  font-size: 14px; font-weight: 700;
  color: var(--v3-text);
  font-family: "SF Mono", "JetBrains Mono", monospace;
  letter-spacing: 0.02em;
}
.lk-v3-combo-opt-region {
  font-size: 12px;
  color: var(--v3-text-soft);
  flex: 1;
  margin-left: 10px;
}
.lk-v3-combo-opt-tag {
  font-size: 11px;
  padding: 3px 7px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #A5B4FC;
  border-radius: 4px;
  font-weight: 600;
}
.lk-v3-combo-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--v3-text-dim);
  font-size: 13px;
}
/* Address line inside each dropdown option (full width second row) */
.lk-v3-combo-opt {
  flex-wrap: wrap;
}
.lk-v3-combo-opt-addr {
  flex: 0 0 100%;
  margin-top: 4px;
  font-size: 11px;
  color: var(--v3-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "SF Mono", "JetBrains Mono", monospace;
  letter-spacing: 0.01em;
}

/* Warehouse address confirmation card — shown below the combobox once a
 * valid FBA code is selected. Makes it obvious WHERE the cargo is being
 * shipped to, which builds trust before pricing. */
.lk-v3-fba-addr-card {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.10), rgba(245, 166, 35, 0.04));
  border: 1px solid rgba(245, 166, 35, 0.35);
  animation: v3FadeIn 0.25s ease;
}
@keyframes v3FadeIn { from { opacity: 0; transform: translateY(-4px);} to { opacity: 1; transform: translateY(0);} }
.lk-v3-fba-addr-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.lk-v3-fba-addr-icon { font-size: 16px; }
.lk-v3-fba-addr-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--v3-accent);
}
.lk-v3-fba-addr-code {
  margin-left: auto;
  font-size: 12px; font-weight: 800;
  font-family: "SF Mono", "JetBrains Mono", monospace;
  padding: 2px 8px;
  background: var(--v3-accent);
  color: #1E293B;
  border-radius: 4px;
}
.lk-v3-fba-addr-body {
  padding: 8px 0;
  border-top: 1px dashed rgba(245, 166, 35, 0.25);
  border-bottom: 1px dashed rgba(245, 166, 35, 0.25);
}
.lk-v3-fba-addr-street {
  font-size: 14px; font-weight: 600;
  color: var(--v3-text);
  margin-bottom: 2px;
}
.lk-v3-fba-addr-city {
  font-size: 12px;
  color: var(--v3-text-soft);
}
.lk-v3-fba-addr-foot {
  margin-top: 6px;
  font-size: 11px;
  color: var(--v3-text-dim);
}
.lk-v3-fba-addr-foot strong {
  color: var(--v3-text);
  font-family: "SF Mono", "JetBrains Mono", monospace;
}
.lk-v3-fba-addr-note { color: var(--v3-text-dim); font-style: italic; }

/* ===== 9. Ship speed cards ===== */
.lk-v3-ship-stack {
  display: flex; flex-direction: column; gap: 10px;
}
.lk-v3-ship-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1.5px solid var(--v3-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s ease;
  position: relative;
}
.lk-v3-ship-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.lk-v3-ship-card:hover {
  border-color: var(--v3-border-hi);
  background: rgba(255, 255, 255, 0.04);
}
.lk-v3-ship-card.active {
  border-color: var(--v3-accent);
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.1) 0%, rgba(245, 166, 35, 0.02) 100%);
}
.lk-v3-ship-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--v3-text-dim);
  flex-shrink: 0;
  transition: all .2s ease;
  position: relative;
}
.lk-v3-ship-card.active .lk-v3-ship-dot {
  border-color: var(--v3-accent);
  background: var(--v3-accent);
  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.2);
}
.lk-v3-ship-card.active .lk-v3-ship-dot::after {
  content: ""; position: absolute; inset: 4px;
  background: #0A0E1A;
  border-radius: 50%;
}
.lk-v3-ship-body { flex: 1; min-width: 0; }
.lk-v3-ship-name {
  font-size: 15px; font-weight: 700;
  color: var(--v3-text);
  margin-bottom: 2px;
}
.lk-v3-ship-tag {
  font-size: 12.5px;
  color: var(--v3-text-soft);
}
.lk-v3-ship-time {
  font-size: 12px; font-weight: 600;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--v3-border);
  border-radius: 6px;
  color: var(--v3-text-soft);
  font-family: "SF Mono", "JetBrains Mono", monospace;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.lk-v3-ship-card.active .lk-v3-ship-time {
  background: rgba(245, 166, 35, 0.15);
  border-color: rgba(245, 166, 35, 0.35);
  color: var(--v3-accent-hi);
}

/* ===== 10. Multi-box accordion ===== */
.lk-v3-boxes { display: flex; flex-direction: column; gap: 10px; }
.lk-v3-box {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--v3-border);
  border-radius: 12px;
  padding: 14px 16px;
  position: relative;
}
.lk-v3-box-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--v3-text-soft);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lk-v3-box-remove {
  background: transparent;
  border: 0;
  width: 24px; height: 24px;
  color: var(--v3-text-dim);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  border-radius: 6px;
  transition: all .15s ease;
}
.lk-v3-box-remove:hover {
  background: rgba(248, 113, 113, 0.15);
  color: var(--v3-danger);
}
.lk-v3-box-vol {
  font-size: 11px;
  color: var(--v3-accent-hi);
  font-family: "SF Mono", "JetBrains Mono", monospace;
  padding: 2px 8px;
  background: rgba(245, 166, 35, 0.1);
  border-radius: 4px;
}
.lk-v3-box-grid {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 1fr;
  gap: 8px;
  align-items: center;
}
@media (max-width: 520px) {
  .lk-v3-box-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}
.lk-v3-box-input-wrap {
  position: relative;
}
.lk-v3-box-input-wrap .lk-v3-input-sm {
  width: 100%; box-sizing: border-box;
  padding: 10px 28px 10px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--v3-border);
  border-radius: 8px;
  color: var(--v3-text);
  font-size: 14px; font-weight: 600;
  font-family: "SF Mono", "JetBrains Mono", monospace;
  outline: none;
  transition: all .15s ease;
}
.lk-v3-box-input-wrap .lk-v3-input-sm:focus {
  border-color: var(--v3-accent);
  background: rgba(0, 0, 0, 0.45);
}
.lk-v3-box-input-wrap::after {
  content: attr(data-unit);
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--v3-text-dim);
  pointer-events: none;
  font-family: "SF Mono", monospace;
}
.lk-v3-box-add {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1.5px dashed rgba(245, 166, 35, 0.4);
  color: var(--v3-accent-hi);
  padding: 12px 18px;
  min-height: 48px;
  border-radius: 12px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
  margin-top: 10px;
  align-self: flex-start;
}
.lk-v3-box-add:hover {
  background: rgba(245, 166, 35, 0.08);
  border-color: var(--v3-accent);
  border-style: solid;
}
.lk-v3-box-add svg { width: 16px; height: 16px; }
.lk-v3-box-add:disabled { opacity: 0.4; cursor: not-allowed; }

.lk-v3-vol-summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  margin-top: 12px;
  background: linear-gradient(90deg, rgba(245, 166, 35, 0.08) 0%, rgba(245, 166, 35, 0.02) 100%);
  border: 1px solid rgba(245, 166, 35, 0.2);
  border-radius: 10px;
  font-size: 13px;
  color: var(--v3-text-soft);
}
.lk-v3-vol-summary b {
  color: var(--v3-accent-hi);
  font-family: "SF Mono", "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 700;
}

/* ===== 11. 💎 LIVE QUOTE PANEL — THE HERO ===== */
/* Default (shared) panel chrome. Positioning is PC-only — see media query
   below. Mobile/tablet (≤1024px) keep the panel in normal flow because the
   grid collapses to one column and stacking is the right UX there.         */
.lk-v3-quote-panel {
  background: linear-gradient(165deg, rgba(30, 41, 65, 0.7) 0%, rgba(18, 26, 46, 0.85) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--v3-border-hi);
  border-radius: 24px;
  padding: 28px;
  overflow: hidden;
}

/* ---- PC-ONLY sticky-in-viewport behavior ---------------------------------
   On desktop (≥1025px, matching the grid breakpoint above), the quote panel
   sticks to the top of the viewport so the user can see the live price while
   scrolling the (sometimes tall) form on the left. Internal scroll is enabled
   so the panel itself doesn't overflow the viewport on small laptops.

   Implementation note: for `position: sticky` to stay pinned across the full
   page scroll, the containing block (the grid row cell) must be AT LEAST as
   tall as the left column. The grid already declares `align-items: start`,
   which is correct — we just need the panel itself NOT to use `align-self:
   start`, because that would cap its cell height at its own intrinsic
   height and the sticky element would "release" when the user scrolls past
   that height. Instead we wrap the panel in a full-height grid cell by
   letting it stretch (default), and keep the panel's own box tight via
   max-height + overflow.
--------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  /* Override the grid's `align-items: start` JUST for the panel's cell so
     the cell stretches to match the left form column. The left-hand form
     column keeps `align-items: start` via a specific selector if needed,
     but here we target the panel directly since grids auto-fit each cell. */
  .lk-calc-v3-grid { align-items: stretch; }
  .lk-v3-quote-panel {
    position: sticky;
    top: 32px;
    max-height: calc(100vh - 64px);          /* never taller than viewport */
    overflow-y: auto;                        /* internal scroll if content exceeds */
    overscroll-behavior: contain;            /* don't bubble scroll to page */
    /* Vertical alignment: sit at top of stretched cell */
    align-self: start;
  }
  /* Scrollbar polish (WebKit). Keeps the glassy look even when scrolling. */
  .lk-v3-quote-panel::-webkit-scrollbar { width: 6px; }
  .lk-v3-quote-panel::-webkit-scrollbar-thumb {
    background: rgba(245, 166, 35, 0.35);
    border-radius: 3px;
  }
  .lk-v3-quote-panel::-webkit-scrollbar-track { background: transparent; }
}
.lk-v3-quote-panel::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--v3-accent-gl) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.6;
}
.lk-v3-quote-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34D399;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
  position: relative; z-index: 1;
}
.lk-v3-quote-badge::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--v3-success);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--v3-success);
  animation: v3-pulse-dot 1.6s ease-in-out infinite;
}
.lk-v3-quote-panel.is-pending .lk-v3-quote-badge {
  background: rgba(100, 116, 139, 0.12);
  border-color: rgba(100, 116, 139, 0.3);
  color: var(--v3-text-soft);
}
.lk-v3-quote-panel.is-pending .lk-v3-quote-badge::before {
  background: var(--v3-text-dim);
  box-shadow: none;
  animation: none;
}

.lk-v3-quote-label {
  font-size: 12px;
  color: var(--v3-text-soft);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  position: relative; z-index: 1;
}

.lk-v3-quote-big {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 4px;
  position: relative; z-index: 1;
  min-height: 80px;
}

/* Pending state should never look like an empty quote card.
   Keep the real text value as “—” for compatibility/tests, but visually
   replace the blank-feeling price area with a premium quote-unlock prompt. */
.lk-v3-quote-panel.is-pending .lk-v3-quote-big {
  align-items: center;
  min-height: 104px;
  margin: 8px 0 12px;
  padding: 18px 18px 18px 64px;
  border: 1px solid rgba(245, 166, 35, 0.20);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(245, 166, 35, 0.10), rgba(255, 255, 255, 0.035)),
    radial-gradient(circle at 18% 20%, rgba(245, 166, 35, 0.22), transparent 34%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 46px rgba(0,0,0,0.18);
}

.lk-v3-quote-panel.is-pending .lk-v3-quote-big::before {
  content: "↯";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--v3-accent), var(--v3-accent-hi));
  color: #111827;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 10px 28px rgba(245,166,35,0.30);
}

.lk-v3-quote-panel.is-pending .lk-v3-quote-big::after {
  content: "Unlock instant DDP quote\a Add destination ZIP, weight, and box size to activate live pricing.";
  white-space: pre-line;
  color: var(--v3-text);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.lk-v3-quote-panel.is-pending .lk-v3-quote-currency,
.lk-v3-quote-panel.is-pending .lk-v3-quote-value,
.lk-v3-quote-panel.is-pending .lk-v3-quote-unit {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}
.lk-v3-quote-currency {
  font-size: 28px; font-weight: 700;
  color: var(--v3-text-soft);
  letter-spacing: -0.02em;
  padding-top: 8px;
}
.lk-v3-quote-value {
  font-size: clamp(56px, 8vw, 84px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #fff 0%, #E2E8F0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.lk-v3-quote-value.is-bumping {
  transform: scale(1.05);
}
.lk-v3-quote-unit {
  font-size: 18px; font-weight: 700;
  color: var(--v3-text-soft);
  margin-left: 4px;
  padding-bottom: 14px;
}
.lk-v3-quote-panel.is-pending .lk-v3-quote-value {
  background: linear-gradient(180deg, #475569 0%, #334155 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.6;
}
.lk-v3-quote-panel.is-loading .lk-v3-quote-value {
  animation: v3-shimmer 1.4s ease-in-out infinite;
}
@keyframes v3-shimmer {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.lk-v3-quote-rmb {
  font-size: 13px;
  color: var(--v3-text-dim);
  margin-bottom: 20px;
  position: relative; z-index: 1;
  font-family: "SF Mono", monospace;
}

.lk-v3-quote-zone {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 20px;
  position: relative; z-index: 1;
}
.lk-v3-quote-zone .lk-v3-zone-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--v3-border);
  color: var(--v3-text-soft);
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
}

.lk-v3-quote-panel hr {
  border: 0;
  height: 1px;
  background: var(--v3-border);
  margin: 20px 0;
  position: relative; z-index: 1;
}

.lk-v3-quote-lines {
  display: flex; flex-direction: column; gap: 10px;
  position: relative; z-index: 1;
}

/* Breakdown lock card (anon users only) */
.lk-v3-breakdown-lock {
  position: relative; z-index: 1;
  text-align: center;
  padding: 18px 18px 20px;
  border: 1px dashed rgba(245, 166, 35, 0.28);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(245,166,35,0.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.04));
}
.lk-v3-breakdown-lock-icon {
  width: 34px; height: 34px;
  margin: 0 auto 10px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--v3-accent), var(--v3-accent-hi));
  color: #111827;
  box-shadow: 0 10px 24px rgba(245,166,35,0.28);
}
.lk-v3-breakdown-lock-icon svg { width: 18px; height: 18px; }
.lk-v3-breakdown-lock-title {
  font-size: 14px;
  font-weight: 800;
  color: #F8FAFC;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.lk-v3-breakdown-lock-sub {
  font-size: 12.5px;
  color: #CBD5E1;
  line-height: 1.5;
}
.lk-v3-quote-line {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
}
.lk-v3-quote-line .k {
  color: var(--v3-text-soft);
}
.lk-v3-quote-line .v {
  color: var(--v3-text);
  font-weight: 600;
  font-family: "SF Mono", "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
}
.lk-v3-quote-line.is-surcharge .k::before {
  content: "+ ";
  color: var(--v3-accent);
  font-weight: 700;
}
.lk-v3-quote-line.is-total {
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px dashed var(--v3-border);
  font-size: 14px;
}
.lk-v3-quote-line.is-total .k { color: var(--v3-text); font-weight: 700; }
.lk-v3-quote-line.is-total .v { color: var(--v3-accent-hi); font-size: 16px; }

.lk-v3-quote-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 16px 24px;
  margin-top: 20px;
  background: linear-gradient(135deg, var(--v3-accent) 0%, var(--v3-accent-hi) 100%);
  border: 0;
  border-radius: 14px;
  color: #0A0E1A;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 12px 32px -8px var(--v3-accent-gl);
  position: relative; z-index: 1;
  letter-spacing: -0.01em;
}
.lk-v3-quote-cta:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px -8px var(--v3-accent-gl);
  filter: brightness(1.08);
}
.lk-v3-quote-cta:active:not(:disabled) { transform: translateY(0); }
.lk-v3-quote-cta:disabled {
  background: rgba(100, 116, 139, 0.2);
  color: var(--v3-text-dim);
  cursor: not-allowed;
  box-shadow: none;
}
.lk-v3-quote-cta svg { width: 18px; height: 18px; }

.lk-v3-quote-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
  position: relative; z-index: 1;
}
.lk-v3-trust-item {
  text-align: center;
  font-size: 11px;
  color: var(--v3-text-dim);
  line-height: 1.4;
}
.lk-v3-trust-item b {
  display: block;
  color: var(--v3-text);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 2px;
}

/* ===== 12. Tell Us About You (inline small card) ===== */
.lk-v3-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) { .lk-v3-about { grid-template-columns: 1fr; } }

/* ===== 13. Error alert ===== */
.lk-v3-alert {
  padding: 12px 16px;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 10px;
  color: #FCA5A5;
  font-size: 13px;
  margin-top: 14px;
  display: flex; align-items: flex-start; gap: 10px;
}
.lk-v3-alert::before {
  content: "⚠";
  flex-shrink: 0;
  font-size: 14px;
}

/* ===== 14. Welcome chip for authed users ===== */
.lk-v3-welcome {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 12px;
  margin-bottom: 20px;
  font-size: 13px;
}
.lk-v3-welcome .dot {
  width: 8px; height: 8px;
  background: var(--v3-success);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--v3-success);
}
.lk-v3-welcome .txt { color: var(--v3-text); font-weight: 500; }
.lk-v3-welcome .txt b { color: var(--v3-accent-hi); }

/* ===== 15. Result overlay (full quote + gate) ===== */
.lk-v3-result {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  overflow-y: auto;
  animation: v3-fade-in .3s ease;
}
.lk-v3-result.show { display: flex; }
@keyframes v3-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lk-v3-result-card {
  width: 100%; max-width: 560px;
  background: linear-gradient(165deg, rgba(30, 41, 65, 0.95) 0%, rgba(18, 26, 46, 0.98) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid var(--v3-border-hi);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
  animation: v3-slide-up .4s cubic-bezier(.2, .8, .2, 1);
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes v3-slide-up {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.lk-v3-result-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--v3-border);
  color: var(--v3-text-soft);
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.lk-v3-result-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--v3-text);
}
.lk-v3-result-check {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--v3-success) 0%, #059669 100%);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.3);
  animation: v3-check-pop .5s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes v3-check-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
.lk-v3-result-check svg { width: 28px; height: 28px; color: #fff; }
.lk-v3-result h2 {
  text-align: center;
  font-size: 24px; font-weight: 800;
  color: var(--v3-text);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.lk-v3-result-sub {
  text-align: center;
  font-size: 14px;
  color: var(--v3-text-soft);
  margin-bottom: 28px;
}
.lk-v3-result-price {
  text-align: center;
  margin-bottom: 24px;
}
.lk-v3-result-price .num {
  font-size: 64px; font-weight: 800;
  color: var(--v3-accent-hi);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lk-v3-result-price .cur { font-size: 20px; color: var(--v3-text-soft); margin-right: 4px; }
.lk-v3-result-price .unit { font-size: 16px; color: var(--v3-text-soft); margin-left: 6px; font-weight: 700; }

.lk-v3-result-book {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--v3-accent) 0%, var(--v3-accent-hi) 100%);
  border: 0;
  border-radius: 14px;
  color: #0A0E1A;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 12px 32px -8px var(--v3-accent-gl);
  margin-top: 20px;
}
.lk-v3-result-book:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/* ===== 16. Gate (Notion/Figma style, dark) ===== */
.lk-v3-gate {
  padding: 4px 0;
}
.lk-v3-gate h3 {
  text-align: center;
  font-size: 24px; font-weight: 800;
  color: #F8FAFC;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.lk-v3-gate-sub {
  text-align: center;
  font-size: 14px;
  color: #CBD5E1;
  line-height: 1.55;
  margin-bottom: 24px;
}
.lk-v3-gate-sub b {
  color: var(--v3-accent-hi);
  font-weight: 800;
}

/* Google button — DARK glassmorphic, NOT white. Icon stays brand-coloured. */
.lk-v3-gate-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  color: #F8FAFC;
  font-size: 14.5px; font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}
.lk-v3-gate-google:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border-color: rgba(255,255,255,0.22);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.lk-v3-gate-google svg {
  background: #fff;
  border-radius: 4px;
  padding: 2px;
  width: 20px; height: 20px;
}

.lk-v3-gate-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0;
  color: #94A3B8;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lk-v3-gate-divider::before, .lk-v3-gate-divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}
.lk-v3-gate-email-label {
  display: block;
  font-size: 11.5px;
  color: #CBD5E1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
/* email input inside gate — ensure no white flash */
.lk-v3-gate #lk-gate-email {
  background: rgba(0,0,0,0.35);
  color: #F8FAFC;
}
.lk-v3-gate #lk-gate-email::placeholder { color: #64748B; }
.lk-v3-gate-continue {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 13px 16px;
  margin-top: 10px;
  background: var(--v3-accent);
  background: linear-gradient(135deg, var(--v3-accent) 0%, var(--v3-accent-hi) 100%);
  border: 0;
  border-radius: 12px;
  color: #0A0E1A;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
  box-shadow: 0 8px 20px -6px var(--v3-accent-gl);
}
.lk-v3-gate-continue:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.lk-v3-gate-continue:disabled { opacity: 0.5; cursor: not-allowed; }
.lk-v3-gate-err {
  margin-top: 8px;
  font-size: 12px;
  color: #FCA5A5;
  display: none;
}
.lk-v3-gate-err.show { display: block; }
.lk-v3-gate-foot {
  display: flex; justify-content: space-between;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
}
.lk-v3-gate-foot a {
  color: #CBD5E1;
  text-decoration: none;
  transition: color .15s ease;
}
.lk-v3-gate-foot a:hover { color: var(--v3-accent-hi); }
.lk-v3-gate-privacy {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--v3-border);
  font-size: 11.5px;
  color: var(--v3-text-dim);
  text-align: center;
  line-height: 1.5;
}
.lk-v3-gate-privacy svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }

/* ===== 17. Mobile sticky bottom CTA (small screens only) ===== */
.lk-v3-mobile-cta {
  display: none;
}
@media (max-width: 1024px) {
  .lk-v3-quote-panel { position: static; top: auto; }
}
@media (max-width: 640px) {
  .lk-calc-v3-wrap { padding: 16px 14px 120px; }
  .lk-v3-card { padding: 20px 18px; border-radius: 16px; }
  .lk-v3-quote-panel { padding: 22px 20px; border-radius: 20px; }
  .lk-v3-mobile-cta {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; left: 12px; right: 12px; bottom: 12px;
    padding: 12px 14px 12px 18px;
    background: linear-gradient(165deg, rgba(30, 41, 65, 0.95) 0%, rgba(18, 26, 46, 0.98) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid var(--v3-border-hi);
    border-radius: 16px;
    z-index: 40;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  }
  .lk-v3-mobile-cta-label { font-size: 11px; color: var(--v3-text-dim); letter-spacing: 0.08em; text-transform: uppercase; }
  .lk-v3-mobile-cta-val {
    font-size: 22px; font-weight: 800;
    color: var(--v3-accent-hi);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }
  .lk-v3-mobile-cta-btn {
    padding: 12px 20px;
    min-height: 48px;
    background: linear-gradient(135deg, var(--v3-accent) 0%, var(--v3-accent-hi) 100%);
    border: 0;
    border-radius: 12px;
    color: #0A0E1A;
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
  }
}

/* ===== 18. Loading skeleton (subtle shimmer) ===== */
.lk-v3-skel {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%);
  background-size: 200% 100%;
  animation: v3-skel 1.4s ease-in-out infinite;
  border-radius: 6px;
  color: transparent;
}
@keyframes v3-skel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* =============================================================
 * V3 CALC INPUT READABILITY HARD-FIX (2025-01-04)
 * Forces dark-mode text on every input inside the V3 calculator,
 * regardless of Chrome autofill, dark-mode UA overrides, etc.
 * ============================================================= */
.lk-v3-root { color-scheme: dark; }

.lk-v3-root .lk-v3-input,
.lk-v3-root input.lk-v3-input,
.lk-v3-root textarea.lk-v3-input,
.lk-v3-root select.lk-v3-input,
.lk-v3-root .lk-v3-combo-input {
  background-color: rgba(0, 0, 0, 0.25) !important;
  color: var(--v3-text) !important;
  caret-color: var(--v3-accent) !important;
  -webkit-text-fill-color: var(--v3-text) !important;
}

.lk-v3-root .lk-v3-input::placeholder,
.lk-v3-root input.lk-v3-input::placeholder,
.lk-v3-root .lk-v3-combo-input::placeholder {
  color: var(--v3-text-dim) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--v3-text-dim) !important;
}

.lk-v3-root .lk-v3-input:focus,
.lk-v3-root input.lk-v3-input:focus {
  background-color: rgba(0, 0, 0, 0.35) !important;
  color: var(--v3-text) !important;
  -webkit-text-fill-color: var(--v3-text) !important;
  border-color: var(--v3-accent) !important;
}

/* Chrome autofill neutralisation (prevents white / yellow paint) */
.lk-v3-root .lk-v3-input:-webkit-autofill,
.lk-v3-root .lk-v3-input:-webkit-autofill:hover,
.lk-v3-root .lk-v3-input:-webkit-autofill:focus,
.lk-v3-root .lk-v3-combo-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #121A2E inset !important;
  -webkit-text-fill-color: var(--v3-text) !important;
  caret-color: var(--v3-accent) !important;
  transition: background-color 99999s ease-in-out 0s;
  border-color: var(--v3-border) !important;
}

/* Error state */
.lk-v3-root .lk-v3-input.has-error,
.lk-v3-root .lk-v3-input[aria-invalid="true"] {
  background-color: rgba(248,113,113,0.08) !important;
  color: #FECACA !important;
  -webkit-text-fill-color: #FECACA !important;
  border-color: var(--v3-danger) !important;
}

/* Stray inputs inside V3 calc that forgot the .lk-v3-input class */
.lk-v3-root input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.lk-v3-root textarea,
.lk-v3-root select {
  background-color: rgba(0, 0, 0, 0.25);
  color: var(--v3-text);
  caret-color: var(--v3-accent);
}
.lk-v3-root input::placeholder,
.lk-v3-root textarea::placeholder {
  color: var(--v3-text-dim);
  opacity: 1;
}

/* Number inputs — force dark + remove spinners */
.lk-v3-root input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.lk-v3-root input[type="number"]::-webkit-outer-spin-button,
.lk-v3-root input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}