/* ======================================================================
   NovaStar H · Configurator Styles (single file) — v2025-10-05-024
   Scope: .desay-config-root
   Notes:
     • Comments marked [FONT] and [SPACING] show your primary controls.
     • No underlines anywhere in NovaStar UI.
   ====================================================================== */


/* ======================================================================
   0) TOKENS — tweak here first
   ====================================================================== */
.desay-config-root{
  /* [FONT] main sizes */
  --h-title-size: 0.95rem;
  --h-title-weight: 600;
  --h-subtitle-size: 0.80rem;
  --h-subtitle-weight: 400;
  --h-line-font-size: 0.80em;

  /* [SPACING] global rhythm */
  --h-wrap-gap: 28px;
  --h-left-gap: 12px;
  --h-card-pad: 16px;
  --h-card-margin: 12px;
  --h-line-vpad: 0.01rem;
  --h-line-hpad: 0.50rem;
  --h-preview-top-gap: 8px;

  /* colors */
  --h-blue: #3366FF;
  --h-orange: #ff6600;
  --h-card-bg: rgba(255,102,0,.025);
}


/* ======================================================================
   1) OUTER WRAP + LETTERBOX (Helix)
   ====================================================================== */
.desay-config-root .fam500-wrap{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:var(--h-wrap-gap);
  padding:12px;
  border-radius:10px;
  background:#fff;
  -webkit-backdrop-filter:saturate(1.05) blur(1.5px);
  backdrop-filter:saturate(1.05) blur(1.5px);
  align-items:start;
  isolation:isolate;
}
.sppb-section .desay-config-root#configurator,
.sppb-row-container .desay-config-root#configurator,
.sppb-row .desay-config-root#configurator,
.sppb-container .desay-config-root#configurator{
  margin-top:-32px !important;
  margin-bottom:-32px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}


/* ======================================================================
   2) LEFT GRID (inputs/info)
   ====================================================================== */
.desay-config-root .fam500-left{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--h-left-gap);
}
.desay-config-root .fam500-row{ grid-column:1 / -1; display:contents; }
.desay-config-root .box{ display:flex; flex-direction:column; }
.desay-config-root .box label{
  font-size:12px; color:#777; margin-bottom:6px;
}
.desay-config-root .inp{
  box-sizing:border-box; width:100%; height:48px; padding:12px 16px;
  border:1px solid #e9ecef; border-radius:8px; background:#fff; font:inherit; line-height:1;
}
.desay-config-root .inp[readonly]{ background:#fafafa; }
.desay-config-root .four{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--h-left-gap); }


/* ======================================================================
   3) TOOLBAR (currency, price, icons)
   ====================================================================== */
.desay-config-root .config-toolbar{
  grid-column: 1 / -1;
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 32px;

  /* ONE authority for BOTH swap icons */
  --swap-icon-size: 9px;
  --swap-icon-pad: 3px;

  /* THE only spacing token used between EVERY token in the currency row */
  --swap-gap: calc(var(--swap-icon-pad) * 2);
}

/* currency row is ONE inline-flex track */
.desay-config-root .config-toolbar .currency-cluster{
  display:inline-flex;
  align-items:center;
  gap: var(--swap-gap);
  white-space: nowrap;
}

/* middot must NOT carry its own margin (gap handles spacing) */
.desay-config-root .config-toolbar #avmCurrencyDot{
  opacity:.65;
  margin: 0;
  line-height:1;
  display:inline-block;
}

/* price range text */
.desay-config-root .config-toolbar .price-range{
  font-size: 14px;
  font-weight: 400;
  cursor: default;
  white-space: nowrap;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: var(--swap-gap);
}

/* range orange when CAD */
.desay-config-root .config-toolbar .price-range.cad{
  color: var(--h-orange);
}

.desay-config-root .config-toolbar .tool-btn{
  background: transparent;
  border: 0;
  padding: 0 3px;
  line-height: 1;
  cursor: pointer;
}

.desay-config-root .config-toolbar .tool-btn .tool-ico{
  color: var(--h-blue);
  transition: transform .12s ease, color .12s ease;
}

.desay-config-root .config-toolbar .tool-btn:hover .tool-ico{
  color: var(--h-orange);
  transform: translateY(-1px);
}

.desay-config-root .config-toolbar .toggleCurrency{
  background: transparent;
  border: 0;
  padding: 0;               /* critical: no edge padding */
  line-height: 1;
  display:inline-flex;
  align-items:center;
  gap: var(--swap-gap);      /* same gap as everything else */
}

.desay-config-root .config-toolbar .toggleCurrency .usd-part{
  color: var(--h-blue);
  text-decoration: none !important;
}

.desay-config-root .config-toolbar .toggleCurrency .cad-part{
  color: var(--h-orange);
  text-decoration: none !important;
}

/* icons: NO padding — spacing comes from flex gap only */
.desay-config-root .config-toolbar i.fas.fa-right-left{
  display:inline-block;
  color: var(--h-blue);
  font-size: var(--swap-icon-size);
  padding: 0;               /* critical */
  margin: 0;
  line-height: 1;
  vertical-align: middle;
  opacity: 1;
}

/* #priceRange is a flex row with the SAME gap */
.desay-config-root .config-toolbar #priceRange{
  display:inline-flex;
  align-items:center;
  gap: var(--swap-gap);
}

/* dash wrapper: no padding/margins, just the icon */
.desay-config-root .config-toolbar #priceRange .dash{
  display:inline-flex;
  align-items:center;
  padding:0;
  margin:0;
  opacity:1;
}

/* hint icon (JS removes it, but keep safe if it ever exists) */
.desay-config-root .config-toolbar .avm-hint{
  color: var(--h-blue);
  padding: 0 3px;
  font-size: 12px;
  vertical-align: middle;
  transition: color .12s ease;
}
.desay-config-root .config-toolbar .avm-hint:hover{
  color: var(--h-orange);
}


/* ======================================================================
   4) CHASSIS PILLS (no underline; centered FA schlix)
   ====================================================================== */
.desay-config-root .pitches{
  grid-column:1 / -1; margin:4px 0 8px; display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}
.desay-config-root .pitches .pitch-link{
  position:relative; background:transparent; border:0; padding:0 2px 12px;
  cursor:pointer; font:inherit; font-weight:400; letter-spacing:.01em; text-decoration:none;
}
.desay-config-root .pitches .pitch-link .txt{ text-decoration:none; }
.desay-config-root .pitches .sep{ opacity:.45; margin:0 2px; user-select:none; pointer-events:none; }
.desay-config-root .pitches .pitch-link i.fab.fa-schlix{
  position:absolute; left:50%; bottom:-2px; transform:translateX(-50%) translateY(4px);
  font-size:12px; line-height:1; opacity:0; color:currentColor; pointer-events:none;
  transition:opacity .16s ease, transform .18s ease;
}
.desay-config-root .pitches .pitch-link.active .txt{ color:var(--h-blue); }
.desay-config-root .pitches .pitch-link.active i.fab.fa-schlix{ color:var(--h-blue); opacity:.95; transform:translateX(-50%) translateY(0); }
.desay-config-root .pitches .pitch-link:hover i.fab.fa-schlix{ color:var(--h-blue); opacity:.7; }
.desay-config-root .pitches .pitch-link:focus-visible{ outline:2px solid rgba(0,0,0,.25); outline-offset:2px; border-radius:6px; }


/* ======================================================================
   5) VARIANT CARDS (shell, headings, subtitle)
   ====================================================================== */
.desay-config-root .variant-results{ align-self:start; }
.desay-config-root .variant-results .variant-block{
  position:relative; background:var(--h-card-bg) !important; border-radius:10px;
  padding:var(--h-card-pad);
  margin-bottom:var(--h-card-margin);
  color:#222; box-shadow:0 10px 28px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.07) inset;
}
.desay-config-root .variant-title{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:var(--h-title-size);
  font-weight:var(--h-title-weight);
  letter-spacing:.01em; margin-bottom:2px; color:#111;
}
.desay-config-root .variant-subtitle{
  margin:0 0 6px;
  font-size:var(--h-subtitle-size);
  font-weight:var(--h-subtitle-weight);
  line-height:1.2; color:#6b7280;
}
.desay-config-root .variant-divider{ border:0; border-top:1px solid rgba(0,0,0,.08); margin:8px 0 10px; }


/* ======================================================================
   6) LINES (uniform/tight)
   ====================================================================== */
.desay-config-root .variant-line{
  display:flex !important; align-items:center; justify-content:space-between;
  gap:0 !important; column-gap:0 !important;
  padding:var(--h-line-vpad) var(--h-line-hpad);
  margin:2px 0 !important; padding-left:0 !important;
  grid-template-columns:none !important;
  font-size:var(--h-line-font-size);
}
.desay-config-root .variant-line .line-left{ display:inline-flex !important; align-items:center; gap:.45rem !important; margin:0 !important; }
.desay-config-root .variant-line .line-left .line-name{
  cursor:pointer; transition:color .12s ease; text-decoration:none;
}
.desay-config-root .variant-line .line-left .line-name:hover{ color:var(--h-orange); }

/* quantity capsule + icons */
.desay-config-root .variant-line .avm-qty{
  display:inline-flex; align-items:center; gap:8px;
  padding:3px 6px; border:1px solid #e5e7eb; border-radius:999px; background:#fff;
}
.desay-config-root .variant-line .avm-qty .sep{ opacity:.55; }
.desay-config-root .variant-line .avm-qty i{
  font-size:13px; line-height:1; transition:transform .12s ease, color .12s ease; color:#222;
}
.desay-config-root .variant-line .avm-qty i:hover{ color:var(--h-blue); transform:translateY(-1px); }


/* ======================================================================
   7) TOTALS + SEPARATORS
   ====================================================================== */
.desay-config-root .avm-subhr{ border:0; border-top:1px solid #eceff3; margin:.35rem 0 !important; }
.desay-config-root .avm-divider-total{ border:0; border-top:1px dashed #e5e7eb; margin:.55rem 0 .25rem !important; }
.desay-config-root .variant-line.total{ font-weight:600; }
.desay-config-root .variant-block .priceNumber.cad{ color:var(--h-orange); }


/* ======================================================================
   8) PREVIEW PANE (blank on load)
   ====================================================================== */
.desay-config-root .avm-preview{
  grid-column:1 / -1;
  margin-top:var(--h-preview-top-gap);
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  padding:8px; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.desay-config-root .avm-preview img{ max-width:100%; max-height:100%; display:block; object-fit:contain; }


/* ======================================================================
   9) NOVASTAR: NO UNDERLINES ANYWHERE
   ====================================================================== */
.desay-config-root .pitches .pitch-link,
.desay-config-root .pitches .pitch-link .txt,
.desay-config-root .pitches .pitch-link.active .txt,
.desay-config-root .variant-results a,
.desay-config-root a{ text-decoration:none !important; }


/* Keep warranty “included” right-aligned next to the price */
.desay-config-root #wCycle{ justify-content:flex-start; }
.desay-config-root #wCycle #wIncTxt{
  margin-left:auto;
  text-align:right;
  min-width:4.5em;
}


/* ======================================================================
   10) DESAY : RELOCATE FROM CONFIGURATOR
   ====================================================================== */
.desay-config-root .seed-orange::placeholder{color:#ff6600;opacity:1}
.desay-config-root .seed-orange{border-color:#ff6600;background:#fff3e9}

.desay-config-root .variant-line:hover .line-name{color:#ff6600;text-shadow:0 0 6px rgba(255,102,0,.2)}
.desay-config-root .variant-line.total .line-left .line-name{font-weight:600}

.desay-config-root #linesInput .ship-quote{display:none}
.desay-config-root #linesInput .variant-line.ship-on .ship-quote{display:inline-block}

.desay-config-root #linesCompare .ship-quote{display:none}
.desay-config-root #linesCompare .variant-line.is-compare-on .ship-quote{display:inline-block}

.desay-config-root #linesCompare .variant-line.is-compare-on .line-name{color:inherit;text-shadow:none}

.desay-config-root .avm-preview img{opacity:1;transition:opacity .28s ease-in}

.desay-config-root .variant-block{border:1px solid #e9ecef;border-radius:12px}

.desay-config-root .var-option.selected{
  box-shadow:
    0 0 0 2px rgba(255,102,0,.22),
    0 14px 26px rgba(0,0,0,.06);
}

.desay-config-root .inp{font-size:14px;line-height:1.25}

.desay-config-root .lab-w,.desay-config-root .lab-h{display:flex;align-items:center;gap:6px}
.desay-config-root .label-chevrons{display:inline-flex;gap:6px}
.desay-config-root .label-chevrons .chev{font:inherit;color:inherit;background:transparent;border:0;padding:0 2px;line-height:1;cursor:pointer;transition:text-shadow .12s ease,color .12s ease}
.desay-config-root .label-chevrons .chev:hover{color:#ff6600;text-shadow:0 0 6px rgba(255,102,0,.8)}

.desay-config-root .avm-qty[data-ind="check"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:22px;
  border:1px solid #e9ecef;
  border-radius:999px;
  background:#fff;
  flex:0 0 auto;
  margin-right:8px;
}
.desay-config-root .avm-qty[data-ind="check"] .avm-ind{
  font-size:14px;
  line-height:1;
  color:#6c757d;
  transition:color .12s ease, text-shadow .12s ease;
}
.desay-config-root .variant-line.active .avm-qty[data-ind="check"] .avm-ind{
  color:#ff6600;
  text-shadow:0 0 6px rgba(255,102,0,.18);
}

.desay-config-root #linesCompare .variant-line{cursor:pointer}


/* ======================================================================
   12) DESAY : EOF
   ====================================================================== */