/* ════════════════════════════════════════════════════════════════════════════
   Build-A-Boat Quote Tool — shadcn/ui-inspired styling (plain CSS, scoped).
   Recreates the shadcn aesthetic (slate palette, 0.5rem radius, subtle borders,
   focus rings) without React. All tokens + components scoped under .bab-quote-tool
   so nothing leaks into the WordPress theme.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens (shadcn "slate" theme) ────────────────────────────────── */
/* Tokens are set on the outer root element (the plugin's mount point).
   The root has no bab-quote-tool class — tokens cascade into children. */
.bab-page-saved-builds.bab-page #main .container_wrap .container{
  max-width: 1600px !important;
  width: 100%;
  padding: 20px;
}

#top.avia-blank.bab-page #wrap_all {
  vertical-align: top !important;
}
.bab-page .bab-dash { padding-top: 50px; }

[data-bab-root],
.bab-summary-top,
.bab-quote-tool,
.bab-builds,
.bab-dealer-build,
.bab-dash {
  --bab-background: 0 0% 100%;
  --bab-foreground: 222.2 84% 4.9%;
  --bab-card: 0 0% 100%;
  --bab-muted: 210 40% 96.1%;
  --bab-muted-foreground: 215.4 16.3% 46.9%;
  --bab-primary: 222.2 47.4% 11.2%;
  --bab-primary-foreground: 210 40% 98%;
  --bab-border: 214.3 31.8% 91.4%;
  --bab-input: 214.3 31.8% 91.4%;
  --bab-ring: 222.2 84% 4.9%;
  --bab-radius: 0.5rem;
  --bab-destructive: 0 84.2% 60.2%;
}
/* Apply base typography to the whole tool area */
.bab-summary-top,
.bab-quote-tool {
  color: hsl(var(--bab-foreground));
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
/* .bab-quote-tool is the inner flex row (panel + steps). The outer root is unstyled. */
.bab-quote-tool { display: flex; gap: 24px; align-items: flex-start; }

/* Full-width summary slot that sits ABOVE the panel/steps flex row */
.bab-summary-top { width: 100%; margin-bottom: 20px; }

/* Card surfaces (shadcn Card: rounded-lg border bg-card shadow-sm) */
.bab-panel,
.bab-steps {
  background: hsl(var(--bab-card));
  border: 1px solid hsl(var(--bab-border));
  border-radius: var(--bab-radius);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
/* Left column: pricing panel stacked above the Dealer Program Discount box. The column
   owns the flex width + sticky positioning that used to live on .bab-panel. */
.bab-panel-col {
  flex: 0 0 38%;
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bab-panel {
  padding: 20px;
}
.bab-steps {
  flex: 1;
  padding: 24px;
}

/* ── Panel: image above tabs ─────────────────────────────────────────────── */
.bab-panel-image {
  width: 100%;
  border-radius: var(--bab-radius);
  margin-bottom: 16px;
  display: block;
}

/* ── Boat name caption ───────────────────────────────────────────────────── */
/* Engine (top, prominent) + boat title (below, muted). The engine span is rendered first in
   the DOM, so a plain column stack puts it on top. Before an engine is picked its span is
   empty and hidden, leaving just the (then-prominent) title. */
.bab-quote-tool .bab-boat-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 0 14px;
}
/* Selected engine model — the prominent line (was the boat-name style). */
.bab-quote-tool .bab-boat-engine {
  font-size: 16px;
  font-weight: 600;
  color: hsl(var(--bab-foreground));
}
/* Boat title — the secondary muted line (was the engine style). */
.bab-quote-tool .bab-boat-title {
  margin-top: 2px;
  font-weight: 400;
  color: hsl(var(--bab-muted-foreground));
}
/* Hide the engine line when empty (no engine picked yet) so it adds no gap; the title then
   reads as the single prominent line. */
.bab-quote-tool .bab-boat-engine:empty { display: none; }
/* When no engine is picked (container lacks .has-engine, toggled in renderPanel), promote the
   title back to the prominent style so it reads as the single main line. */
.bab-quote-tool .bab-boat-name:not(.has-engine) .bab-boat-title {
  font-size: 16px;
  font-weight: 600;
  color: hsl(var(--bab-foreground));
  margin-top: 0;
}

/* ── Tabs (shadcn Tabs: muted track, white active "pill") ────────────────── */
.bab-tabs {
  display: inline-flex;
  width: 100%;
  background: hsl(var(--bab-muted));
  border-radius: var(--bab-radius);
  padding: 4px;
  margin-bottom: 18px;
}
.bab-tab {
  flex: 1;
  text-align: center;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--bab-muted-foreground));
  cursor: pointer;
  border-radius: calc(var(--bab-radius) - 2px);
  transition: color .15s, background .15s, box-shadow .15s;
}
.bab-tab.is-active {
  background: hsl(var(--bab-background));
  color: hsl(var(--bab-foreground));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08);
}

/* ── Panel pricing rows ──────────────────────────────────────────────────── */
.bab-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin: 8px 0; }
.bab-row .pct { color: hsl(var(--bab-muted-foreground)); font-size: 12px; }
.bab-msrp { color: hsl(var(--bab-muted-foreground)); }
.bab-msrp .amount { text-decoration: line-through; color: hsl(var(--bab-destructive)); }
.bab-nap { font-weight: 700; font-size: 18px; }
.bab-divider { border: none; border-top: 1px solid hsl(var(--bab-border)); margin: 14px 0; }
.bab-field { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin: 10px 0; gap: 10px; }
.bab-quote-tool .bab-field > span:first-child { min-width: 0; }
.bab-quote-tool .bab-field > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.bab-profit { text-align: right; font-size: 12px; color: hsl(var(--bab-muted-foreground)); }
.bab-total {
  display: flex; justify-content: space-between;
  font-weight: 700; font-size: 18px;
  border-top: 1px solid hsl(var(--bab-border));
  padding-top: 14px; margin-top: 14px;
}

/* ── Form controls (shadcn Input / Select: h-10, rounded-md, ring on focus) ─ */
.bab-field input,
.bab-tff,
.bab-addl,
.bab-rebate,
.bab-markup,
.bab-length,
.bab-cf-select,
.bab-cf-textarea,
.bab-customer-form input {
  border: 1px solid hsl(var(--bab-input));
  border-radius: calc(var(--bab-radius) - 2px);
  background: hsl(var(--bab-background));
  color: hsl(var(--bab-foreground));
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.bab-field input,
.bab-tff,
.bab-addl,
.bab-rebate,
.bab-markup {
  width: 84px;
  padding: 6px 10px;
  font-size: 13px;
  text-align: right;
}
.bab-customer-form input,
.bab-length,
.bab-cf-select,
.bab-cf-textarea {
  width: 100%;
  padding: 9px 12px;
}

/* shadcn focus ring: 2px ring + offset, not a heavy shadow */
.bab-field input:focus,
.bab-tff:focus,
.bab-addl:focus,
.bab-rebate:focus,
.bab-markup:focus,
.bab-length:focus,
.bab-cf-select:focus,
.bab-cf-textarea:focus,
.bab-customer-form input:focus {
  outline: none;
  border-color: hsl(var(--bab-ring));
  box-shadow: 0 0 0 2px hsl(var(--bab-background)), 0 0 0 4px hsl(var(--bab-ring) / 0.4);
}
.bab-field input::placeholder,
.bab-cf-textarea::placeholder,
.bab-customer-form input::placeholder { color: hsl(var(--bab-muted-foreground)); }

/* Select chevron */
.bab-length,
.bab-cf-select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.bab-length { display: block; margin: 4px 0 12px; }
.bab-cf-textarea { resize: vertical; min-height: 72px; }

/* ── Theme-proofing: scoped !important overrides for number inputs (Fix 4) ── */
.bab-quote-tool .bab-field input,
.bab-quote-tool .bab-tff,
.bab-quote-tool .bab-addl,
.bab-quote-tool .bab-rebate,
.bab-quote-tool .bab-markup {
  width: 84px !important;
  border: 1px solid hsl(var(--bab-input)) !important;
  border-radius: calc(var(--bab-radius) - 2px) !important;
  background: hsl(var(--bab-background)) !important;
  color: hsl(var(--bab-foreground)) !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  text-align: right !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  appearance: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}
/* kill number spinners */
.bab-quote-tool .bab-field input::-webkit-outer-spin-button,
.bab-quote-tool .bab-field input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* ── Theme-proofing: scoped !important overrides for selects (Fix 5) ──────── */
.bab-quote-tool .bab-length,
.bab-quote-tool .bab-cf-select {
  border: 1px solid hsl(var(--bab-input)) !important;
  border-radius: calc(var(--bab-radius) - 2px) !important;
  background-color: hsl(var(--bab-background)) !important;
  color: hsl(var(--bab-foreground)) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  padding: 9px 36px 9px 12px !important;
  font-size: 14px !important;
  box-shadow: none !important;
  height: auto !important;
}

/* ── Theme-proofing: customer form inputs/select/textarea (Fix 6) ─────────── */
.bab-quote-tool .bab-customer-form input,
.bab-quote-tool .bab-cf-select,
.bab-quote-tool .bab-cf-textarea {
  width: 100% !important;
  border: 1px solid hsl(var(--bab-input)) !important;
  border-radius: calc(var(--bab-radius) - 2px) !important;
  background-color: hsl(var(--bab-background)) !important;
  color: hsl(var(--bab-foreground)) !important;
  padding: 9px 12px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}
.bab-quote-tool .bab-cf-select { padding-right: 36px !important; -webkit-appearance: none !important; appearance: none !important; }
.bab-quote-tool .bab-cf-textarea { resize: vertical !important; min-height: 72px !important; font-family: inherit !important; }

/* ── Theme-proofing: force consistent 40px height on all text inputs + country select ── */
/* (textarea keeps its min-height:72px — no fixed height applied to it)                  */
.bab-quote-tool .bab-customer-form input,
.bab-quote-tool .bab-cf-select {
  height: 40px !important;
  line-height: normal !important;
}

/* restore focus ring over the box-shadow:none !important overrides above */
.bab-quote-tool .bab-field input:focus,
.bab-quote-tool .bab-tff:focus,
.bab-quote-tool .bab-addl:focus,
.bab-quote-tool .bab-rebate:focus,
.bab-quote-tool .bab-markup:focus,
.bab-quote-tool .bab-length:focus,
.bab-quote-tool .bab-cf-select:focus,
.bab-quote-tool .bab-cf-textarea:focus,
.bab-quote-tool .bab-customer-form input:focus {
  box-shadow: 0 0 0 2px hsl(var(--bab-background)), 0 0 0 4px hsl(var(--bab-ring) / 0.4) !important;
}

/* Range slider — shadcn Slider look */
.bab-slider {
  width: 100%;
  margin: 10px 0;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: hsl(var(--bab-muted));
  cursor: pointer;
}
.bab-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: hsl(var(--bab-background));
  border: 2px solid hsl(var(--bab-primary));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
}
.bab-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 999px;
  background: hsl(var(--bab-background));
  border: 2px solid hsl(var(--bab-primary));
}

/* ── Step indicator + title ──────────────────────────────────────────────── */
.bab-step-indicator {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: hsl(var(--bab-muted-foreground)); margin-bottom: 4px;
}
.bab-step-title { margin: 0 0 18px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.bab-customer-details-heading { margin-top: 28px; }

/* ── Assignment choice (dealer-only, Step 4) ─────────────────────────────── */
.bab-assign {
  margin-top: 20px;
  padding: 14px 16px;
  background: hsl(var(--bab-muted));
  border: 1px solid hsl(var(--bab-border));
  border-radius: var(--bab-radius);
  margin-bottom: 15px;
}
.bab-assign-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: hsl(var(--bab-foreground));
}
.bab-assign-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 4px 0;
  cursor: pointer;
}
.bab-assign-opt input { cursor: pointer; }

/* ── Labels / sublabels ──────────────────────────────────────────────────── */
.bab-label { display: block; font-size: 13px; font-weight: 500; margin: 16px 0 6px; }
.bab-sublabel { font-size: 12px; color: hsl(var(--bab-muted-foreground)); margin-bottom: 6px; }

/* ── Option lists (engines, colors, packages, flooring, options) ─────────── */
.bab-engine-list {
  border: 1px solid hsl(var(--bab-border));
  border-radius: var(--bab-radius);
  margin-top: 6px;
  overflow: hidden;
}
.bab-engine {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid hsl(var(--bab-border));
  font-size: 14px; cursor: pointer; gap: 8px;
  transition: background 0.12s;
}
.bab-engine:last-child { border-bottom: none; }
.bab-engine:hover { background: hsl(var(--bab-muted)); }

/* Single-select (shadcn-style accent: neutral bg + left accent bar; the price
   span stays right-aligned because the indicator is positioned, not a flex child) */
.bab-engine.bab-single { position: relative; }
.bab-engine.bab-single.is-selected {
  background: hsl(var(--bab-muted));
  font-weight: 600;
  box-shadow: inset 3px 0 0 0 hsl(var(--bab-primary));
}

/* Multi-select (shadcn Checkbox look) */
.bab-row-main { display: inline-flex; align-items: center; gap: 8px; }
.bab-check-indicator {
  display: inline-flex; flex-shrink: 0;
  width: 16px; height: 16px;
  border: 1px solid hsl(var(--bab-primary) / 0.6);
  border-radius: 4px;
  background: hsl(var(--bab-background));
  align-items: center; justify-content: center;
  margin-right: 0;
  transition: background 0.12s, border-color 0.12s;
}
.bab-engine.bab-multi.is-selected .bab-check-indicator {
  background: hsl(var(--bab-primary));
  border-color: hsl(var(--bab-primary));
}
.bab-engine.bab-multi.is-selected .bab-check-indicator::after {
  content: '';
  width: 9px; height: 5px;
  border-left: 2px solid hsl(var(--bab-primary-foreground));
  border-bottom: 2px solid hsl(var(--bab-primary-foreground));
  transform: rotate(-45deg) translateY(-1px);
}
.bab-engine.bab-multi.is-selected { background: hsl(var(--bab-muted)); font-weight: 500; }

/* Single-select radio indicator (shadcn RadioGroup look): a round version of the
   checkbox box, filling with a center dot when the row is selected. */
.bab-radio-indicator {
  display: inline-flex; flex-shrink: 0;
  width: 16px; height: 16px;
  border: 1px solid hsl(var(--bab-primary) / 0.6);
  border-radius: 50%;
  background: hsl(var(--bab-background));
  align-items: center; justify-content: center;
  transition: border-color 0.12s;
}
.bab-engine.bab-single.is-selected .bab-radio-indicator {
  border-color: hsl(var(--bab-primary));
}
.bab-engine.bab-single.is-selected .bab-radio-indicator::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: hsl(var(--bab-primary));
}

/* ── Color groups (Step 2) ───────────────────────────────────────────────── */
.bab-color-group { margin-bottom: 20px; }
.bab-color-group-name { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.bab-color-swatch { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; flex-shrink: 0; margin-right: 8px; border: 1px solid hsl(var(--bab-border)); }
/* Inside a .bab-row-main the 8px flex gap already spaces the swatch, so drop its own margin. */
.bab-row-main .bab-color-swatch { margin-right: 0; }
.bab-color-group .bab-engine{
  justify-content: flex-start;
}
/* Dimmed = the tier not currently chosen. Stays clickable: clicking a color here
   switches to this tier (the paired group's pick is cleared in the click handler). */
.bab-color-group.is-disabled { opacity: 0.6; cursor: pointer; }
.bab-color-disabled-note { font-size: 12px; color: hsl(var(--bab-muted-foreground)); margin: 2px 0 8px; }
.bab-color-price { margin-left: 8px; font-size: 12px; font-weight: 600; color: hsl(var(--bab-foreground)); white-space: nowrap; }


/* ── Option groups (Step 3) ──────────────────────────────────────────────── */
.bab-option-group { margin-bottom: 20px; }

/* ── Buttons (shadcn Button: default / outline / disabled) ───────────────── */
.bab-step-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 12px; }

.bab-back,
.bab-next,
.bab-submit {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px;
  border-radius: calc(var(--bab-radius) - 2px);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background .15s, opacity .15s, box-shadow .15s;
}
.bab-back {
  background: hsl(var(--bab-background));
  color: hsl(var(--bab-foreground));
  border: 1px solid hsl(var(--bab-input));
}
.bab-back:hover { background: hsl(var(--bab-muted)); }
.bab-next, .bab-submit {
  background: hsl(var(--bab-primary));
  color: hsl(var(--bab-primary-foreground));
  border: 1px solid transparent;
  margin-left: auto;
}
.bab-next:hover, .bab-submit:hover { background: hsl(var(--bab-primary) / 0.9); }
.bab-next-disabled, .bab-next:disabled, .bab-submit:disabled {
  opacity: 0.5; cursor: not-allowed;
}
.bab-back:focus-visible,
.bab-next:focus-visible,
.bab-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--bab-background)), 0 0 0 4px hsl(var(--bab-ring) / 0.4);
}

/* ── Hint text ───────────────────────────────────────────────────────────── */
.bab-hint { font-size: 13px; color: hsl(var(--bab-destructive)); margin: 8px 0; }

/* ── Customer form ───────────────────────────────────────────────────────── */
.bab-customer-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.bab-customer-form .full { grid-column: 1 / -1; }

/* ── Skeleton loaders (shimmer placeholders while data loads) ────────────── */
.bab-sk {
  position: relative;
  overflow: hidden;
  background: hsl(var(--bab-muted));
  border-radius: calc(var(--bab-radius) - 2px);
}
.bab-sk::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, hsl(var(--bab-background) / 0.6), transparent);
  animation: bab-shimmer 1.4s ease-in-out infinite;
}
@keyframes bab-shimmer {
  100% { transform: translateX(100%); }
}
.bab-sk-line    { height: 14px; margin: 10px 0; }
.bab-sk-image   { width: 100%; aspect-ratio: 16 / 10; margin-bottom: 16px; border-radius: var(--bab-radius); }
.bab-sk-tabs    { width: 100%; height: 38px; margin-bottom: 18px; border-radius: var(--bab-radius); }
.bab-sk-total   { width: 100%; height: 26px; margin-top: 16px; }
.bab-sk-title   { width: 55%; height: 22px; margin: 6px 0 18px; }
.bab-sk-field   { width: 100%; height: 40px; margin: 6px 0 16px; }
.bab-sk-row     { width: 100%; height: 44px; margin: 8px 0; }
.bab-sk-divider { border-top: 1px solid hsl(var(--bab-border)); margin: 14px 0; }
@media (prefers-reduced-motion: reduce) {
  .bab-sk::after { animation: none; }
}

/* View-modal skeleton: mirrors the detail layout (image + info head, then rows). */
.bab-view-sk-head { display: flex; gap: 24px; margin-bottom: 22px; }
.bab-view-sk-img { flex: 0 0 45%; aspect-ratio: 16 / 11; }
.bab-view-sk-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.bab-view-sk-trow { width: 100%; height: 20px; margin: 12px 0; }
@media (max-width: 600px) {
  .bab-view-sk-head { flex-direction: column; gap: 16px; }
  .bab-view-sk-img { flex-basis: auto; }
}

/* ── Summary / Review (Step 4 — customer-facing, inside right column above form) ── */

/* Summary card container — lives inside .bab-steps on step 4, directly above the form.
   Remove the outer card border so it doesn't double up with the .bab-steps card border;
   keep a bottom separator only, for a clean transition into the form below. */
.bab-summary {
  border: none;
  border-bottom: 1px solid hsl(var(--bab-border));
  border-radius: 0;
  padding: 4px 0 20px;
  background: transparent;
  box-shadow: none;
  margin-bottom: 20px;
}

/* Title heading */
.bab-summary-title {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: hsl(var(--bab-foreground));
}

/* Subtitle (boat + engine) */
/* Hidden on-screen per client (redundant with the panel's boat name/engine). Kept in the DOM
   and unchanged in the PDF / email / saved-builds views, which build their own subtitle. */
.bab-summary-subtitle {
  display: none;
  font-size: 13px;
  color: hsl(var(--bab-muted-foreground));
  margin: 0 0 16px;
}

/* Full-width table of rows — no outer border (the .bab-summary card already provides it) */
.bab-summary-table {
  width: 100%;
  overflow: hidden;
  background: hsl(var(--bab-card));
  border: 1px solid hsl(var(--bab-border));
  border-radius: var(--bab-radius);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  padding: 10px;
}

/* Each row — no per-row bottom border on regular items for a cleaner look */
.bab-summary-trow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
  font-size: 14px;
  gap: 12px;
}

.bab-row.bab-msrp{
  border-top: 1px solid #e0e0e0;
  padding-top: 10px;
}

.bab-summary-header .bab-summary-label{
  font-weight: 600;
}

/* Label column: can wrap, takes available space */
.bab-summary-label {
  color: hsl(var(--bab-foreground)) !important;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

/* Value column: right-aligned, never wraps, min width so numbers align */
.bab-summary-value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  min-width: 120px;
  color: hsl(var(--bab-foreground));
  flex-shrink: 0;
}

/* Header rows (Package/Price, Option/Price) — light separator above each section */
.bab-summary-header {
  background: transparent;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--bab-muted-foreground));
  border-top: 1px solid hsl(var(--bab-border));
  padding-top: 12px;
  margin-top: 4px;
}
.bab-summary-header .bab-summary-label,
.bab-summary-header .bab-summary-value {
  color: hsl(var(--bab-muted-foreground));
}

/* Total rows (Total MSRP / Customer Pays) — clear separator + bold standout */
.bab-summary-total {
  font-weight: 700;
  font-size: 15px;
  border-top: 2px solid hsl(var(--bab-border)) !important;
  padding-top: 10px;
  margin-top: 6px;
}

/* Starts a totals block WITHOUT the bold/large total styling. Used on the Order tab, where the
   first totals row (Base Dealer Cost) is not the final figure but still needs to break away from
   the option groups above it. */
.bab-summary-sepstart {
  border-top: 2px solid hsl(var(--bab-border)) !important;
  padding-top: 10px;
  margin-top: 6px;
}

/* Spacing between summary card and customer form */
.bab-customer-form-section {
  margin-top: 0;
}

/* Confirm button (same primary style as .bab-next) */
.bab-confirm {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px;
  border-radius: calc(var(--bab-radius) - 2px);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  background: hsl(var(--bab-primary));
  color: hsl(var(--bab-primary-foreground));
  border: 1px solid transparent;
  margin-left: auto;
  transition: background .15s, opacity .15s, box-shadow .15s;
}
.bab-confirm:hover { background: hsl(var(--bab-primary) / 0.9); }
.bab-confirm:disabled { opacity: 0.5; cursor: not-allowed; }
.bab-confirm:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--bab-background)), 0 0 0 4px hsl(var(--bab-ring) / 0.4);
}

/* ── Form validation ───────────────────────────────────────────────────────── */
/* Invalid fields: light-red fill + red border + soft red glow, so they clearly
   stand out. Applies to text inputs, selects, the date picker, and textareas. */
.bab-quote-tool .bab-input-error,
.bab-quote-tool input.bab-input-error,
.bab-quote-tool select.bab-input-error,
.bab-quote-tool textarea.bab-input-error {
  border-color: hsl(var(--bab-destructive)) !important;
  background-color: hsl(var(--bab-destructive) / 0.06) !important;
  box-shadow: 0 0 0 3px hsl(var(--bab-destructive) / 0.18) !important;
}
/* Order Type radio group: when invalid, outline the whole group (the radios
   themselves are too small to read as an error). */
.bab-radio-group.bab-input-error {
  border: 1px solid hsl(var(--bab-destructive)) !important;
  background-color: hsl(var(--bab-destructive) / 0.06);
  box-shadow: 0 0 0 3px hsl(var(--bab-destructive) / 0.18);
  border-radius: calc(var(--bab-radius) - 2px);
  padding: 8px 12px;
  min-height: 0;
}
.bab-validation-msg {
  color: hsl(var(--bab-destructive));
  font-size: 13px;
  font-weight: 500;
  margin: 12px 0;
  padding: 8px 12px;
  background-color: hsl(var(--bab-destructive) / 0.06);
  border: 1px solid hsl(var(--bab-destructive) / 0.35);
  border-radius: calc(var(--bab-radius) - 2px);
}

/* ── Boat image inside the summary card (print-only; hidden on screen) ──── */
.bab-summary-image {
  display: none;
}

/* ── Print (show ONLY the customer-facing summary; hide everything else) ─── */
@media print {
  /* Tight page margins so content fits on one page */
  @page { margin: 12mm; }

  /* Hide all page content by default (catches theme headings, nav, footer, etc.) */
  body * { visibility: hidden !important; }
  /* Reveal the summary and all its descendants */
  #bab-quote-root .bab-summary,
  #bab-quote-root .bab-summary * { visibility: visible !important; }
  /* Position summary at the very top of the printed page — no leading whitespace */
  #bab-quote-root .bab-summary {
    position: absolute !important;
    left: 0; top: 0; width: 100% !important;
    border: none !important; box-shadow: none !important; padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
  }
  /* Compact title — no top margin so image sits right at the top */
  #bab-quote-root .bab-summary-title {
    font-size: 16px !important;
    margin: 0 0 4px !important;
  }
  #bab-quote-root .bab-summary-subtitle {
    font-size: 11px !important;
    margin: 0 0 8px !important;
  }
  /* Tighter rows to keep everything on one page */
  #bab-quote-root .bab-summary-trow {
    padding: 4px 8px !important;
  }
  /* Boat image: show in print (it lives inside .bab-summary, already revealed above) */
  .bab-summary-image {
    display: block !important;
    max-width: 260px !important;
    height: auto;
    margin: 0 auto 8px !important;
  }
  /* Defense in depth: keep dealer-only figures hidden even inside summary */
  .bab-dealer-only { visibility: hidden !important; }
}

/* ── Color swatch click cursor ───────────────────────────────────────────── */
.bab-quote-tool .bab-color-swatch { cursor: pointer; }

/* ── Image popup (Fix 3) ─────────────────────────────────────────────────── */
.bab-image-popup {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.7);
  z-index: 99999;
  align-items: center; justify-content: center;
  padding: 24px;
}
.bab-image-popup-inner { position: relative; max-width: 90vw; max-height: 90vh; }
.bab-image-popup-inner img { max-width: 90vw; max-height: 90vh; border-radius: 8px; display: block; box-shadow: 0 10px 40px rgba(0,0,0,0.4); }
.bab-image-popup-close {
  position: absolute; top: -14px; right: -14px;
  width: 32px; height: 32px; border-radius: 999px;
  background: #fff; border: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: #0f172a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .bab-quote-tool { flex-direction: column; }
  .bab-panel-col { position: static; flex-basis: auto; width: 100%; }
  .bab-customer-form { grid-template-columns: 1fr; }
}

/* ── Build detail view (shared) ──────────────────────────────────────────── */
.bab-builds { max-width: 1100px; margin: 0 auto; color: hsl(var(--bab-foreground)); }
.bab-builds-newbtn {
  display: inline-flex; align-items: center; white-space: nowrap;
  /* Solid hex (not just the token) so the WP theme can't wash out the link color. */
  background: #0f172a !important; color: #ffffff !important;
  padding: 10px 18px; border-radius: var(--bab-radius);
  font-weight: 600; font-size: 14px; text-decoration: none !important;
  border: none; box-shadow: none;
}
.bab-builds-newbtn:hover { background: #1e293b !important; color: #ffffff !important; opacity: 1; }
.bab-builds-back { text-decoration: none; font-weight: 500; color: hsl(var(--bab-foreground)); }
.bab-builds-detail-body { background: hsl(var(--bab-card)); padding: 8px 0; }

/* ── Dealer dashboard (shadcn-style: sidebar + content, soft borders) ─────── */
.bab-dash {
  position: relative; display: block;
  max-width: 100%; margin: 0 auto;
  color: hsl(var(--bab-foreground));
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.bab-dash-topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 24px;
}
.bab-dash-topbar-text { min-width: 0; }
.bab-dash-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.bab-dash-intro {
  margin: 8px 0 0; max-width: 760px;
  font-size: 14px; line-height: 1.55; color: hsl(var(--bab-muted-foreground));
}
.bab-dash-newbtn-wrap { flex: 0 0 auto; }
.bab-dash-body { display: flex; gap: 24px; align-items: flex-start; }

/* Sidebar */
.bab-dash-sidebar {
  flex: 0 0 240px;
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 24px;
}
.bab-dash-navitem {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left;
  padding: 10px 12px; border: none; background: transparent; cursor: pointer;
  border-radius: var(--bab-radius);
  font-size: 14px; font-weight: 500; color: hsl(var(--bab-muted-foreground));
  font-family: inherit;
  transition: background .12s, color .12s;
}
.bab-dash-navitem:hover { background: hsl(var(--bab-muted)); color: hsl(var(--bab-foreground)); }
.bab-dash-navitem.is-active { background: hsl(var(--bab-muted)); color: hsl(var(--bab-foreground)); font-weight: 600; }
.bab-dash-navlabel { line-height: 1.3; }
.bab-dash-count {
  flex: 0 0 auto;
  min-width: 22px; text-align: center;
  padding: 1px 8px; border-radius: 999px;
  background: hsl(var(--bab-background)); border: 1px solid hsl(var(--bab-border));
  font-size: 12px; font-weight: 600; color: hsl(var(--bab-muted-foreground));
}
.bab-dash-navitem.is-active .bab-dash-count {
  background: hsl(var(--bab-primary)); color: hsl(var(--bab-primary-foreground)); border-color: transparent;
}

/* Content + panels. min-height on the CONTENT column (not the whole .bab-dash)
   gives a stable floor so switching between a tall section and a short one
   doesn't jump the page or leave odd space above/below the dashboard. */
.bab-dash-content { flex: 1; min-width: 0; min-height: 50vh; }
.bab-dash-panel { display: none; }
.bab-dash-panel.is-active { display: block; }
.bab-dash-panel-head { margin-bottom: 16px; }
.bab-dash-panel-title { margin: 0 0 4px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.bab-dash-panel-desc { margin: 0; font-size: 13px; color: hsl(var(--bab-muted-foreground)); }

/* Table — shadcn data-table: single hairline frame with rounded corners, NO
   vertical cell borders, hairline row dividers only.
   border-collapse:separate (not collapse) so the table's own border-radius renders;
   border-spacing:0 keeps cells flush. We deliberately do NOT use overflow:hidden
   (it would clip the ⋮ popup) — the radius lives on the table element + corner cells. */
.bab-dash-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: hsl(var(--bab-card));
  border: 1px solid hsl(var(--bab-border));
  border-radius: var(--bab-radius);
}
/* Kill any theme-applied cell borders; we control dividers ourselves. */
.bab-dash-table th,
.bab-dash-table td {
  border-top: 0 !important; border-left: 0 !important; border-right: 0 !important;
}
/* shadcn header: full-width muted fill, rounded top corners, 13px medium. */
.bab-dash-table thead th {
  text-align: left; font-size: 13px; font-weight: 500;
  color: hsl(var(--bab-muted-foreground));
  height: 44px; padding: 8px 16px; vertical-align: middle;
  background: hsl(var(--bab-muted) / 0.6);
  border-bottom: 1px solid hsl(var(--bab-border)) !important;
  white-space: nowrap;
}
.bab-dash-table thead th:first-child { border-top-left-radius: calc(var(--bab-radius) - 1px); }
.bab-dash-table thead th:last-child { border-top-right-radius: calc(var(--bab-radius) - 1px); }
.bab-dash-table th.bab-dash-actions-col { text-align: right; width: 48px; }
/* shadcn rows: 13px, hairline divider between rows; no divider under the last row
   (the table's own border closes it off) so the bottom radius stays clean. */
.bab-dash-table tbody td {
  padding: 8px 16px; font-size: 13px; line-height: 1.45;
  border-bottom: 1px solid hsl(var(--bab-border)) !important;
  vertical-align: middle;
}
.bab-dash-table tbody tr:last-child td { border-bottom: 0 !important; }
.bab-dash-table tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--bab-radius) - 1px); }
.bab-dash-table tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--bab-radius) - 1px); }
.bab-dash-table tbody tr:hover td { background: hsl(var(--bab-muted) / 0.4); }
.bab-dash-date { color: hsl(var(--bab-muted-foreground)); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bab-dash-actions-col { text-align: right; white-space: nowrap; }
.bab-dash-table .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.bab-dash-empty { color: hsl(var(--bab-muted-foreground)); padding: 16px 12px !important; }

/* ── Row actions dropdown (⋮ → shadcn-style popover menu) ─────────────────── */
.bab-dash-menu { position: relative; display: inline-block; text-align: left; }
.bab-dash-menubtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: transparent; border: none; border-radius: calc(var(--bab-radius) - 2px);
  color: hsl(var(--bab-foreground)); cursor: pointer;
  transition: background .12s;
}
.bab-dash-menubtn:hover,
.bab-dash-menu.is-open .bab-dash-menubtn { background: hsl(var(--bab-muted)); }
.bab-dash-menubtn:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--bab-background)), 0 0 0 4px hsl(var(--bab-ring) / 0.4); }
.bab-dash-menubtn svg { display: block; }

.bab-dash-menupop {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 50;
  min-width: 160px; padding: 4px;
  background: hsl(var(--bab-card)); color: hsl(var(--bab-foreground));
  border: 1px solid hsl(var(--bab-border)); border-radius: var(--bab-radius);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  display: none;
}
.bab-dash-menu.is-open .bab-dash-menupop { display: block; }
.bab-dash-menuitem {
  display: block; width: 100%; box-sizing: border-box;
  padding: 7px 10px; border-radius: calc(var(--bab-radius) - 2px);
  font-size: 14px; font-weight: 400; line-height: 1.3;
  color: hsl(var(--bab-foreground)) !important;
  text-decoration: none !important; cursor: pointer;
  transition: background .1s;
}
.bab-dash-menuitem:hover { background: hsl(var(--bab-muted)); color: hsl(var(--bab-foreground)) !important; }

/* ── Pager — shadcn data-table footer ────────────────────────────────────── */
.bab-dash-pager {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  margin-top: 18px; font-size: 14px; color: hsl(var(--bab-muted-foreground));
}
.bab-dash-pager-count { white-space: nowrap; }
.bab-dash-pager-controls { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.bab-dash-pager-pos { font-weight: 500; color: hsl(var(--bab-foreground)); white-space: nowrap; }

/* Rows-per-page select. High-specificity + !important so the WP/Enfold theme's
   own `select` styles (native spinner / tall height) can't win. */
.bab-dash-pager-rpp { display: flex; align-items: center; gap: 8px; }
.bab-dash-pager-rpp-label { font-weight: 500; color: hsl(var(--bab-foreground)); white-space: nowrap; }
.bab-dash .bab-dash-pager select.bab-filter-perpage {
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  box-sizing: border-box !important;
  height: 36px !important; min-height: 36px !important;
  width: auto !important; min-width: 72px !important; max-width: 90px !important;
  margin: 0 !important;
  padding: 0 32px 0 12px !important;
  border: 1px solid hsl(var(--bab-border)) !important;
  border-radius: calc(var(--bab-radius) - 2px) !important;
  background-color: hsl(var(--bab-background)) !important;
  color: hsl(var(--bab-foreground)) !important;
  font-size: 13px !important; font-family: inherit !important; font-weight: 400 !important;
  line-height: normal !important; text-align: left !important;
  cursor: pointer !important; vertical-align: middle !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 10px center !important;
  box-shadow: none !important;
}
.bab-dash .bab-dash-pager select.bab-filter-perpage:focus {
  outline: none !important;
  border-color: hsl(var(--bab-ring)) !important;
  box-shadow: 0 0 0 2px hsl(var(--bab-background)), 0 0 0 4px hsl(var(--bab-ring) / 0.4) !important;
}

/* Nav: square bordered icon buttons (« ‹ › ») */
.bab-dash-pager-nav { display: inline-flex; align-items: center; gap: 6px; }
.bab-dash-pgbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; box-sizing: border-box;
  border: 1px solid hsl(var(--bab-border));
  border-radius: calc(var(--bab-radius) - 2px);
  background: hsl(var(--bab-background));
  color: hsl(var(--bab-foreground)) !important;
  font-size: 16px; line-height: 1; text-decoration: none !important;
  transition: background .12s, border-color .12s;
}
a.bab-dash-pgbtn:hover { background: hsl(var(--bab-muted)); }
.bab-dash-pgbtn.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

@media (max-width: 782px) {
  .bab-dash-body { flex-direction: column; }
  .bab-dash-sidebar {
    flex-basis: auto; width: 100%; position: static;
    flex-direction: row; flex-wrap: wrap;
  }
  .bab-dash-navitem { width: auto; }
  .bab-dash-topbar { flex-direction: column; }
}

/* ── Build detail modal (View) — smooth fade + scale, centered ───────────── */
.bab-dash-modal {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.bab-dash-modal.is-open { opacity: 1; visibility: visible; }
.bab-dash-modal-overlay {
  position: absolute; inset: 0;
  background: rgb(15 23 42 / 0.55);
  backdrop-filter: blur(2px);
}
.bab-dash-modal-box {
  position: relative; z-index: 1;
  width: 100%; max-width: 720px; max-height: 90vh; overflow: auto;
  background: hsl(var(--bab-card));
  border: 1px solid hsl(var(--bab-border));
  border-radius: var(--bab-radius);
  box-shadow: 0 20px 50px -12px rgb(0 0 0 / 0.35);
  padding: 24px;
  transform: translateY(-8px) scale(0.98);
  transition: transform .2s cubic-bezier(.16,1,.3,1);
}
.bab-dash-modal.is-open .bab-dash-modal-box { transform: translateY(0) scale(1); }
.bab-dash-modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; line-height: 1;
  border: none; background: transparent; cursor: pointer;
  font-size: 24px; color: hsl(var(--bab-muted-foreground));
  border-radius: var(--bab-radius);
}
.bab-dash-modal-close:hover { background: hsl(var(--bab-muted)); color: hsl(var(--bab-foreground)); }
.bab-dash-modal-loading { padding: 40px 0; text-align: center; color: hsl(var(--bab-muted-foreground)); }
@media (prefers-reduced-motion: reduce) {
  .bab-dash-modal, .bab-dash-modal-box { transition: none; }
}

/* ── Build View popup (dedicated shadcn view — NOT the PDF) ───────────────── */
.bab-view { color: hsl(var(--bab-foreground)); font-size: 14px; }
/* 50/50: left column = boat image, right column = customer + dealer stacked. */
.bab-view-head { display: flex; gap: 24px; align-items: stretch; margin-bottom: 24px; }
.bab-view-col { flex: 1 1 50%; min-width: 0; }
.bab-view-col-img { display: flex; align-items: flex-start; }
.bab-view-img {
  width: 100%; height: auto; display: block;
  border: 1px solid hsl(var(--bab-border)); border-radius: var(--bab-radius);
}
.bab-view-col-info { display: flex; flex-direction: column; gap: 16px; }
.bab-view-cust { font-size: 14px; line-height: 1.6; color: hsl(var(--bab-muted-foreground)); }
.bab-view-name { font-size: 16px; font-weight: 700; color: hsl(var(--bab-foreground)); margin-bottom: 2px; }
.bab-view-dealer {
  display: flex; flex-direction: column; gap: 2px;
  background: hsl(var(--bab-muted)); border: 1px solid hsl(var(--bab-border));
  border-radius: var(--bab-radius); padding: 14px 16px;
  font-size: 13px; color: hsl(var(--bab-muted-foreground));
}
.bab-view-dealer-cap { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: hsl(var(--bab-muted-foreground)); }
.bab-view-dealer-name { font-size: 15px; font-weight: 600; color: hsl(var(--bab-foreground)); margin-bottom: 4px; }
.bab-view-sumtitle { margin: 0 0 2px; font-size: 16px; font-weight: 600; }
.bab-view-subtitle { margin: 0 0 12px; font-size: 13px; color: hsl(var(--bab-muted-foreground)); }
.bab-view-table {
  width: 100%; table-layout: fixed; border-collapse: collapse;
  border: 1px solid hsl(var(--bab-border)); border-radius: var(--bab-radius); overflow: hidden;
}
.bab-view-table td {
  padding: 10px 14px; font-size: 14px; vertical-align: top;
  border-bottom: 1px solid hsl(var(--bab-border));
  overflow-wrap: break-word; word-break: normal;
}
.bab-view-table tr:last-child td { border-bottom: none; }
/* Label column is the WIDER one (~58%) so long option labels don't wrap to many
   lines; the value column takes the rest. */
.bab-view-lbl { width: 58%; }
/* Value column is right-aligned for everything (descriptions + prices) and wraps
   naturally. Removed the old fixed 160px + nowrap that crammed long option
   descriptions into a narrow column and stretched the table. */
.bab-view-val { text-align: right; }
.bab-view-msrp .bab-view-val,
.bab-view-rebate .bab-view-val,
.bab-view-money .bab-view-val,
.bab-view-total .bab-view-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bab-view-msrp td { border-bottom: none; padding-bottom: 0; }
.bab-view-struck { text-decoration: line-through; color: hsl(var(--bab-muted-foreground)); }
.bab-view-total td { background: hsl(var(--bab-muted) / 0.4); font-size: 15px; font-weight: 700; }
/* Starts the totals block: a rule separates it from the option rows above, without the bold/
   shaded styling of .bab-view-total (the first totals row is not the final figure). */
.bab-view-sepstart td { border-top: 2px solid hsl(var(--bab-border)); }
@media (max-width: 560px) {
  .bab-view-head { flex-direction: column; gap: 16px; }
  .bab-view-col { flex-basis: auto; }
}

/* ── Dealer Build Tool (portal) ──────────────────────────────────────────── */
.bab-dealer-build { max-width: 1100px; margin: 0 auto; color: hsl(var(--bab-foreground)); }
.bab-dealer-warning {
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  color: hsl(var(--bab-destructive));
  background: hsl(var(--bab-destructive) / 0.08);
  border: 1px solid hsl(var(--bab-destructive) / 0.35);
  border-radius: var(--bab-radius);
  padding: 14px 18px;
  margin-bottom: 20px;
}
/* Public link (left) + Clear button (right) on one row. */
.bab-dealer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 16px;
}
.bab-dealer-public-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--bab-primary));
  text-decoration: none;
}
.bab-dealer-public-link:hover { text-decoration: underline; }
/* Clear sits at the right; muted by default (destructive intent shows on hover). */
.bab-dealer-clear {
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--bab-muted-foreground));
  cursor: pointer;
}
.bab-dealer-clear:hover { color: hsl(var(--bab-destructive)); text-decoration: underline; }

/* All values !important — the WP theme heavily styles input/select and would
   otherwise win (gray fill, full width, native chrome). */
.bab-dash-filterbar {
  display: flex !important; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px;
}
.bab-dash-filterbar input,
.bab-dash-filterbar select {
  height: 38px !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  width: auto !important;
  border: 1px solid hsl(var(--bab-input)) !important;
  border-radius: calc(var(--bab-radius) - 2px) !important;
  background: hsl(var(--bab-background)) !important;
  color: hsl(var(--bab-foreground)) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
.bab-dash-filterbar input::placeholder { color: hsl(var(--bab-muted-foreground)) !important; }
.bab-dash-filterbar input:focus,
.bab-dash-filterbar select:focus {
  outline: none !important;
  border-color: hsl(var(--bab-ring)) !important;
  box-shadow: 0 0 0 2px hsl(var(--bab-background)), 0 0 0 4px hsl(var(--bab-ring) / 0.35) !important;
}
.bab-dash-filterbar .bab-filter-search { flex: 1 1 240px !important; min-width: 180px; }
/* select needs its own chevron back (appearance:none removed the native one) + room for it */
.bab-dash-filterbar .bab-filter-model {
  min-width: 200px;
  padding-right: 34px !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}
.bab-dash-filterbar .bab-filter-from,
.bab-dash-filterbar .bab-filter-to { min-width: 150px; }
.bab-dash-filterbar .bab-filter-clear {
  height: 38px !important; margin: 0 !important; padding: 0 16px !important;
  cursor: pointer; font-size: 14px !important; font-weight: 500 !important; width: auto !important;
  border: 1px solid hsl(var(--bab-border)) !important;
  border-radius: calc(var(--bab-radius) - 2px) !important;
  background: hsl(var(--bab-card)) !important; color: hsl(var(--bab-foreground)) !important;
  box-shadow: none !important;
}
.bab-dash-filterbar .bab-filter-clear:hover { background: hsl(var(--bab-muted)) !important; }

/* ── Order Submission fields layout ──────────────────────────────────────── */
/* Each section is a bordered card (matches the tool's panel/steps card aesthetic). */
.bab-order-card {
  background: hsl(var(--bab-card));
  border: 1px solid hsl(var(--bab-border));
  border-radius: var(--bab-radius);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  padding: 18px 20px;
  margin: 0 0 16px;
}
.bab-order-card > .bab-step-title { margin-top: 0; margin-bottom: 12px; }
.bab-order-card .bab-order-row:last-child { margin-bottom: 0; }
.bab-order-card .bab-of-field:last-child { margin-bottom: 0; }

/* Two-column rows (Order Type | Delivery Date) and (Terms | Finance); stack on mobile. */
.bab-order-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin: 0 0 16px; }
.bab-order-col { min-width: 0; }
/* Order Type + Delivery Date are both plain .bab-label fields — normalize their top
   margin so the two columns line up. */
.bab-order-type .bab-label,
.bab-order-delivery .bab-label { margin: 0 0 6px; }
.bab-radio-group { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; min-height: 40px; }
.bab-order-type .bab-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin: 0; }

.bab-order-details { margin: 0; }
.bab-order-details .bab-order-row { margin: 0; }   /* nested Terms|Finance row owns no extra margin */
.bab-order-disclaimer { font-size: 12px; color: hsl(var(--bab-muted-foreground)); line-height: 1.5; margin: 12px 0 0; }
.bab-of-field { display: flex; flex-direction: column; min-width: 0; margin-bottom: 12px; }
.bab-of-field .bab-label { margin-bottom: 4px; }

/* Shared input styling for the new order fields (date, PO text, Terms/Finance selects),
   matching the customer-form inputs but without the oversized default margins. */
.bab-quote-tool .bab-of-input {
  width: 100% !important; box-sizing: border-box !important;
  height: 40px; padding: 9px 12px !important; margin: 0 !important;
  border: 1px solid hsl(var(--bab-input)) !important;
  border-radius: calc(var(--bab-radius) - 2px) !important;
  background: hsl(var(--bab-background)) !important;
  color: hsl(var(--bab-foreground)) !important;
  font-size: 14px !important; font-family: inherit !important;
  box-shadow: none !important;
}
.bab-quote-tool .bab-of-input:focus {
  outline: none !important;
  border-color: hsl(var(--bab-ring)) !important;
  box-shadow: 0 0 0 2px hsl(var(--bab-background)), 0 0 0 4px hsl(var(--bab-ring) / 0.4) !important;
}
/* Selects get the chevron + no native appearance. */
.bab-quote-tool .bab-of-select {
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  cursor: pointer; padding-right: 36px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* Customer Details accordion (sits inside a .bab-order-card, so no own margin). */
.bab-cust-accordion .bab-customer-details-heading { margin-top: 0; }
.bab-cust-acc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bab-cust-accordion .bab-cust-body { margin-top: 14px; }
.bab-cust-edit { background: transparent; border: 1px solid hsl(var(--bab-border)); border-radius: calc(var(--bab-radius) - 2px); padding: 4px 14px; font-size: 13px; font-weight: 500; cursor: pointer; }
.bab-cust-edit:hover { background: hsl(var(--bab-muted)); }
.bab-cust-summary { color: hsl(var(--bab-muted-foreground)); font-size: 14px; margin-top: 4px; }

@media (max-width: 600px) {
  .bab-order-row { grid-template-columns: 1fr; gap: 12px; }
}

/* Dealer Program Discount box (dealer tool only). */
/* Standalone card below the panel (spacing owned by .bab-panel-col gap). */
.bab-price-overrides {
  border: 1px solid hsl(var(--bab-border));
  border-radius: var(--bab-radius);
  background: hsl(var(--bab-card));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  padding: 16px 18px;
}
.bab-po-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.bab-po-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.bab-po-field label { font-size: 12px; font-weight: 500; }
.bab-quote-tool .bab-po-additional {
  width: 100% !important; height: 34px; box-sizing: border-box;
  padding: 6px 10px !important; text-align: left !important;
  border: 1px solid hsl(var(--bab-input)) !important; border-radius: calc(var(--bab-radius) - 2px) !important;
  background: hsl(var(--bab-background)) !important; font-size: 13px !important; margin: 0 !important;
}
.bab-po-note { font-size: 11px; color: hsl(var(--bab-muted-foreground)); line-height: 1.45; margin: 0 0 10px; }
.bab-po-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bab-po-save {
  background: #0f172a; color: #fff; border: 1px solid #0f172a;
  border-radius: calc(var(--bab-radius) - 2px); padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.bab-po-saved { font-size: 12px; color: #15803d; font-weight: 500; }