/* ════════════════════════════════════════════════════════════════════════════
   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; }
/* Totals-group divider: a touch more space above so the customer-pays section reads as its
   own group, separate from the dealer-cost/margin section above it. */
.bab-divider-totals { margin-top: 16px; }
.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 ──────────────────────────────────────────────────────────── */
/* Tablet / mobile: stack the panel + steps into a single column. The step card
   (.bab-steps) must be full-width and, as a flex item, be allowed to shrink so its
   children never force the page wider than the viewport (flex items default to
   min-width:auto, which lets wide tables/rows overflow). */
@media (max-width: 768px) {
  .bab-quote-tool { flex-direction: column; }
  .bab-panel-col { position: static; flex-basis: auto; width: 100%; min-width: 0; }
  .bab-customer-form { grid-template-columns: 1fr; }

  /* Right column full-width + shrinkable so its content can't cause horizontal scroll. */
  .bab-quote-tool .bab-steps {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Panel + steps padding trimmed a touch on small screens. */
  .bab-quote-tool .bab-steps { padding: 18px; }
  .bab-quote-tool .bab-panel { padding: 16px; }

  /* Let flex children of the step rows shrink below their content width so long
     option/color/summary labels wrap instead of overflowing. */
  .bab-quote-tool .bab-row-main { min-width: 0; }
  .bab-quote-tool .bab-row-main > span { min-width: 0; overflow-wrap: anywhere; }
  .bab-quote-tool .bab-engine { min-width: 0; }

  /* Summary rows: allow the value column to shrink and the label to wrap. */
  .bab-quote-tool .bab-summary-table { max-width: 100%; box-sizing: border-box; }
  .bab-quote-tool .bab-summary-value { min-width: 0; }

  /* Sliders / full-width inputs never exceed the card. */
  .bab-quote-tool .bab-slider,
  .bab-quote-tool .bab-length,
  .bab-quote-tool .bab-cf-textarea { max-width: 100%; box-sizing: border-box; }
}

/* Phone sizing: tighter padding + smaller fixed cells so everything fits a ~360px
   viewport with no horizontal overflow. */
@media (max-width: 480px) {
  .bab-quote-tool .bab-steps { padding: 14px; }
  .bab-quote-tool .bab-panel { padding: 14px; }

  /* Summary rows: tighter gap + smaller (max-, not fixed) value column so a long
     label + price wraps within the card instead of pushing it wide. */
  .bab-quote-tool .bab-summary-trow { gap: 8px; padding: 8px 2px; }
  .bab-quote-tool .bab-summary-value { min-width: 0; max-width: 45%; white-space: normal; }
  .bab-quote-tool .bab-summary-table { padding: 8px; }

  /* Color rows: keep the swatch, let the name wrap, keep the price on its own end. */
  .bab-quote-tool .bab-color-price { margin-left: 6px; }

  /* Step nav buttons: allow wrap so Back/Next don't overflow the card edge. */
  .bab-quote-tool .bab-step-nav { flex-wrap: wrap; }
}

/* ── 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; }
}

/* ── Saved-builds table: stacked cards on phones (<=600px) ─────────────────
   The 4-column data-table (Customer / Boat Model / Date / ⋮) is a scannable
   list, not a data grid, so on phones each <tr> becomes a labeled card instead
   of a table that scrolls sideways. thead is hidden; each <td> shows its column
   name via ::before from the data-label attribute set in rows_html() (so the
   AJAX-loaded tbody carries the labels too). Desktop is untouched — everything
   here is gated in this media query. */
@media (max-width: 600px) {
  /* Drop table semantics so cells stack. border:0 clears the desktop frame; the
     per-row card below provides the border/radius instead. */
  .bab-dash-table,
  .bab-dash-table tbody {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: 0;
  }
  .bab-dash-table thead { display: none; }

  /* Each row is a bordered card. */
  .bab-dash-table tbody tr {
    display: block;
    margin-bottom: 12px;
    padding: 4px 0;
    background: hsl(var(--bab-card));
    border: 1px solid hsl(var(--bab-border));
    border-radius: var(--bab-radius);
  }
  .bab-dash-table tbody tr:last-child { margin-bottom: 0; }
  /* Kill the desktop row-hover gray fill on touch screens: hover is sticky/meaningless
     on mobile, so a tapped card would keep a gray background. The card stays white. */
  .bab-dash-table tbody tr:hover td { background: transparent; }

  /* Each cell is a labeled row: label (::before) on the left, value on the right.
     Reset the desktop corner-radius rules (they targeted first/last CELLS, which
     no longer map to visual corners in card mode). */
  .bab-dash-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 14px !important;
    text-align: right;
    border-bottom: 1px solid hsl(var(--bab-border)) !important;
    border-radius: 0 !important;
  }
  .bab-dash-table tbody tr td:last-child { border-bottom: 0 !important; }
  .bab-dash-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 12px; font-weight: 600;
    color: hsl(var(--bab-muted-foreground));
    text-align: left;
  }
  /* Cells without a data-label (empty-state, actions) get no ::before slot. */
  .bab-dash-table tbody td:not([data-label])::before { content: none; }

  /* Actions cell: keep the ⋮ button right-aligned; its popover is anchored to
     .bab-dash-menu (right:0) so it stays inside the card. */
  .bab-dash-table tbody td.bab-dash-actions-col { justify-content: flex-end; }

  /* Empty-state row: plain full-width message, no card chrome. */
  .bab-dash-table tbody tr:has(> .bab-dash-empty) {
    border: 0; background: transparent; margin-bottom: 0;
  }
  .bab-dash-table tbody td.bab-dash-empty {
    display: block; text-align: center;
    border-bottom: 0 !important;
  }

  /* Pager: let the two halves wrap under each other on narrow screens instead of
     forcing the controls to overflow. */
  .bab-dash-pager-controls { margin-left: 0; gap: 12px 16px; flex-wrap: wrap; }

  /* Filterbar (mobile). Each desktop control keeps a fixed min-width wider than a phone
     column, so a single field overflows the row. On phones use a wrapping row with explicit
     two-up pairs: Search full-width; Dealer + Model dropdowns share a row (50% each); From +
     To dates share a row (50% each); Clear full-width. min-width:0 + flex-basis lets them fit.
     box-sizing keeps padding inside the 50% so pairs never overflow. */
  .bab-dash-filterbar {
    flex-direction: row; flex-wrap: wrap; align-items: stretch;
    gap: 10px; row-gap: 10px;
  }
  .bab-dash-filterbar > * {
    min-width: 0 !important; box-sizing: border-box !important; margin: 0 !important;
  }
  /* Full-width rows */
  .bab-dash-filterbar .bab-filter-search,
  .bab-dash-filterbar .bab-filter-clear {
    flex: 1 1 100% !important; width: 100% !important;
  }
  /* Paired rows: two per line. calc subtracts half the 10px gap from each 50% cell. */
  .bab-dash-filterbar .bab-filter-dealer,
  .bab-dash-filterbar .bab-filter-model,
  .bab-dash-filterbar .bab-filter-from,
  .bab-dash-filterbar .bab-filter-to {
    flex: 1 1 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    min-width: 0 !important;
  }
  /* Search height was rendering tall on mobile (type=search native decorations). Pin it to
     match the other controls and strip the native search styling. */
  .bab-dash-filterbar .bab-filter-search {
    height: 38px !important; min-height: 38px !important; max-height: 38px !important;
    -webkit-appearance: none !important; appearance: none !important;
  }
  .bab-dash-filterbar .bab-filter-search::-webkit-search-decoration,
  .bab-dash-filterbar .bab-filter-search::-webkit-search-cancel-button { -webkit-appearance: none !important; }
}

/* ── 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; }
}

/* ── "Submit an issue or feedback" button + popup ────────────────────────── */
/* The dealer-tool slot sits after #bab-quote-root, so the button appears below the whole tool
   (below the Dealer Program Discount box). Stable across boat re-mounts — never moved into the tool. */
#bab-dealer-feedback-slot { margin-top: 16px; }
.bab-feedback { margin-top: 16px; }
.bab-feedback-open {
  display: inline-flex; align-items: center; white-space: nowrap; cursor: pointer;
  background: #0f172a !important; color: #ffffff !important;
  padding: 10px 18px; border-radius: var(--bab-radius);
  font-weight: 600; font-size: 14px; border: none; box-shadow: none;
}
.bab-feedback-open:hover { background: #1e293b !important; }
.bab-feedback-modal {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s;
}
.bab-feedback-modal.is-open { opacity: 1; visibility: visible; }
.bab-feedback-overlay { position: absolute; inset: 0; background: rgba(15,23,42,0.5); }
.bab-feedback-box {
  position: relative; background: #fff; border-radius: var(--bab-radius);
  width: min(560px, 92vw); max-height: 90vh; overflow-y: auto;
  padding: 24px 24px 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.bab-feedback-title { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: hsl(var(--bab-foreground)); }
.bab-feedback-close {
  position: absolute; top: 10px; right: 12px; border: none; background: none;
  font-size: 26px; line-height: 1; cursor: pointer; color: hsl(var(--bab-muted-foreground));
}
.bab-feedback-close:hover { color: hsl(var(--bab-foreground)); }
@media (prefers-reduced-motion: reduce) { .bab-feedback-modal { 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)); }
/* Section / column header row (Package / Flooring / Option + the "Discounted Price" column label),
   mirroring the PDF's tr.hdr: bold, a subtle shaded band that reads as a header. */
.bab-view-hdr td {
  background: hsl(var(--bab-muted) / 0.6);
  font-weight: 700;
  color: hsl(var(--bab-foreground));
  border-top: 1px solid hsl(var(--bab-border));
}
/* Option sub-group header (Optional Steering, Engine Rig, Bimini, ...) — matches the PDF: NO
   background fill, just bold black text nested under the "Option" section header (empty right cell). */
.bab-view-subhdr td {
  background: transparent;
  font-weight: 700;
  color: hsl(var(--bab-foreground));
  border-top: none;
}
@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; }