/* ═══════════════════════════════════════════════════════════════════════════
   DDT BUILDER CSS - PRODUCTION
   Version: 2025-12-17-U
   File: ddt-builder.prod.css
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Colors */
  --ddt-accent:#d11118;
  --ddt-accent-dark:#b91c1c;
  --ddt-accent-ink:#ffffff;
  --ddt-ink:#0f172a;
  --ddt-muted:#6b7280;
  --ddt-border:#e5e7eb;
  --ddt-surface:#ffffff;
  --ddt-surface-muted:#f7f7f7;
  --ddt-radius:12px;
  
  /* ==========================================================================
     TYPOGRAPHY TOKENS - Shared across /builder and /review-builder
     Use these for consistent sizing, weights, and spacing.
     ========================================================================== */
  --ddt-font-base:0.9375rem;       /* 15px - base body text */
  --ddt-font-sm:0.8125rem;         /* 13px - disclaimers, small labels */
  --ddt-font-xs:0.75rem;           /* 12px - fine print */
  --ddt-font-lg:1rem;              /* 16px - card headings */
  --ddt-font-xl:1.125rem;          /* 18px - section headings */
  --ddt-font-2xl:1.5rem;           /* 24px - large totals */
  --ddt-line-height:1.5;
  --ddt-line-height-tight:1.3;
}

/* Layout wrappers */
/* FIX: Added line-height:1.5 for stable mobile typography baseline */
.ddt-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:var(--ddt-ink);max-width:1200px;margin:0 auto;line-height:1.5}
.ddt-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
@media (max-width:980px){ .ddt-grid{grid-template-columns:1fr} }

/* =============================================================================
   FIX 1 & 2: UNIFIED .ddt-card CLASS
   This is the SINGLE shared card style used across /builder and /review-builder:
   - Top stats card (#ddt-base, #ddt-weight container)
   - Bottom total price card (.price-box)
   - "What happens next" disclaimer cards
   - Build summary card on /review-builder
   ============================================================================= */
.ddt-card{
  background:#ffffff;
  border:1px solid #e7e5e4;
  border-radius:16px;
  padding:16px;
  margin-bottom:12px;
}

/* =============================================================================
   UNIFIED .ddt-summary STYLING (2025-12-17-M)
   The running summary on /builder (div.ddt-summary) must match
   the summary on /review-builder (#ddt-review-summary-card.ddt-card).
   Both now use the same .ddt-card base styling + receipt summary classes.
   ============================================================================= */
.ddt-summary{
  /* Match .ddt-card exactly */
  background:#ffffff;
  border:1px solid #e7e5e4;
  border-radius:16px;
  padding:16px;
  min-height:0 !important;
  height:auto !important;
}

/* Remove any margin/padding overrides that were too aggressive */
.ddt-summary #ddt-lineitems{
  margin:0;
  padding:0;
}

/* Stats display (if using legacy #ddt-base, #ddt-weight, #ddt-total) */
.ddt-summary #ddt-base,
.ddt-summary #ddt-weight,
.ddt-summary #ddt-total{
  font-size:var(--ddt-font-lg);
  font-weight:700;
  color:var(--ddt-ink);
  line-height:1.3;
}

/* =============================================================================
   LEGACY CLEANUP (2025-12-17-M)
   Remove ALL extra borders/lines from legacy markup that may exist
   ============================================================================= */
/* Remove legacy .ddt-lines borders */
.ddt-summary .ddt-lines,
.ddt-summary .ddt-lines .line,
.ddt-summary .line,
.ddt-summary hr,
#ddt-lineitems .line,
#ddt-lineitems hr{
  border:none !important;
  border-bottom:none !important;
  border-top:none !important;
}

.muted{color:var(--ddt-muted);font-size:var(--ddt-font-sm)}
.ddt-disabled{opacity:.55;filter:grayscale(15%)}

/* =============================================================================
   TOP STATS HEADER - HIDDEN (2025-12-17-O)
   The "Starting at / Est. weight" box is removed from /builder.
   Weight is now shown in the sticky/desktop total bars instead.
   ============================================================================= */
.ddt-stats-header,
.ddt-summary-stats-top,
#ddt-top-stats{
  display: none !important;
}

/* Hide the legacy stats elements that show zeros on load */
#ddt-base,
#ddt-weight,
.ddt-summary > .muted:first-child,
.ddt-summary > p:first-child{
  /* Only hide if parent is the legacy top stats box, not the receipt summary */
}

/* If there's a standalone container for these, hide it */
.ddt-summary:has(#ddt-base):has(#ddt-weight):not(:has(#ddt-lineitems)){
  display: none !important;
}

/* =============================================================================
   CTA CARD (Total price + Review button on /builder, submit area on /review)
   Unified styling for action areas across both pages.
   ============================================================================= */
.ddt-cta-card{
  background:var(--ddt-surface);
  border:1px solid var(--ddt-border);
  border-radius:var(--ddt-radius);
  padding:0.75rem 1rem;
  display:flex;flex-direction:column;gap:0.5rem;
}
/* Row with total + button */
.ddt-cta-card .cta-row{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
}
.ddt-cta-card .cta-total{display:flex;align-items:baseline;gap:0.375rem}
.ddt-cta-card .cta-label{font-size:var(--ddt-font-sm);color:var(--ddt-muted);font-weight:600}
.ddt-cta-card .cta-amount{font-size:var(--ddt-font-2xl);font-weight:800;color:var(--ddt-accent)}
.ddt-cta-card .cta-actions{flex-shrink:0}
/* Disclaimer below */
.ddt-cta-card .cta-disclaimer{
  font-size:var(--ddt-font-xs);color:var(--ddt-muted);line-height:var(--ddt-line-height-tight);
  margin:0;
}

/* =============================================================================
   FIX 2: BOTTOM TOTAL PRICE CARD (.price-box)
   Now uses same styling as .ddt-card for visual consistency with /review-builder.
   ============================================================================= */
.price-box{
  background:#ffffff;
  border:1px solid #e7e5e4;
  border-radius:16px;
  padding:16px;
  display:flex;flex-direction:column;gap:8px;
}
.price-box .price-box-top{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
}
.price-box .actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.price-box .ddt-review-disclaimer{
  font-size:var(--ddt-font-sm);
  color:#57534e;
  margin:0;
  line-height:1.5;
  width:100%;
}
.total-label{font-size:var(--ddt-font-sm);color:#57534e;font-weight:600;margin-right:6px}
.total{font-weight:800;font-size:var(--ddt-font-2xl);color:var(--ddt-accent)}

/* Primary button: STRONG brand red, clearly clickable */
.btn-primary{
  background:var(--ddt-accent-dark);color:#fff;border:0;border-radius:var(--ddt-radius);
  padding:0.625rem 1.125rem;font-size:var(--ddt-font-base);font-weight:700;cursor:pointer;
  transition:background .15s ease,box-shadow .15s ease;
  box-shadow:0 2px 8px rgba(185,28,28,0.25);
}
.btn-primary:hover{background:#991b1b;box-shadow:0 4px 12px rgba(153,27,27,0.35)}
.btn-primary:focus{outline:2px solid #991b1b;outline-offset:2px}
.btn-primary[disabled]{background:#d1d5db;color:#9ca3af;box-shadow:none;cursor:not-allowed}
.btn-ghost{background:var(--ddt-surface);color:var(--ddt-ink);border:1px solid var(--ddt-border);border-radius:12px;padding:.7rem 1rem;font-weight:600;cursor:pointer}
.btn-ghost:hover{background:var(--ddt-surface-muted)}

/* LEGACY .ddt-lines .line - REMOVED (2025-12-17-M)
   Was causing extra dashed borders on /builder summary.
   Summary now uses unified .ddt-summary-row classes. */

/* Progress */
.ddt-progress{background:#fff;border:1px solid var(--ddt-border);border-radius:var(--ddt-radius);padding:.75rem 1rem;margin-top:.75rem}
.ddt-progress .steps{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.ddt-progress .step{color:var(--ddt-muted);font-weight:600}
.ddt-progress .step.active{color:var(--ddt-ink)}
.ddt-progress .step.done{color:var(--ddt-accent)}
.ddt-progress .bar{margin-top:.5rem;height:8px;border-radius:999px;background:#f0f0f0;overflow:hidden}
.ddt-progress .bar .bar-fill{height:100%;background:var(--ddt-accent);width:0}

/* Model pills */
.model-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:.5rem}
@media (max-width:980px){ .model-grid{grid-template-columns:1fr} }
label.model-pill{display:flex;gap:.65rem;align-items:flex-start;border:1px solid var(--ddt-border);border-radius:14px;padding:.85rem 1rem;background:#fff;cursor:pointer}
label.model-pill:hover{background:#fafafa}
label.model-pill input{margin:0 .25rem 0 0;transform:scale(1.15);accent-color:var(--ddt-accent);flex:0 0 auto}
/* FIX: Increased line-height from 1.2 to 1.4 to prevent text cramping on mobile */
label.model-pill > div{line-height:1.4;min-width:auto}
label.model-pill .sub{margin-top:2px;font-size:.9rem;color:var(--ddt-muted)}

/* =============================================================================
   MODEL DETAILS PANEL (2025-12-17-U)
   Expandable panel showing model description and floorplan link
   ============================================================================= */
.model-pill-wrap{display:flex;flex-direction:column;gap:0}
.model-pill-wrap label.model-pill{border-radius:14px}
.model-pill-wrap:has(.ddt-model-details:not([hidden])) label.model-pill{
  border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent;
}
.model-pill-content{flex:1;min-width:0}
.model-pill-name{font-weight:600;color:#111827}

/* View details link */
.ddt-model-details-link{
  display:inline-block;margin-top:6px;
  font-size:.8rem;color:#3b82f6;text-decoration:none;cursor:pointer;
}
.ddt-model-details-link:hover{text-decoration:underline;color:#2563eb}

/* Details panel */
.ddt-model-details{
  background:#f9fafb;border:1px solid #e5e7eb;border-top:none;
  border-radius:0 0 14px 14px;padding:12px 14px;
  animation:ddtSlideDown 0.2s ease-out;
}
@keyframes ddtSlideDown{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}
.ddt-model-details[hidden]{display:none !important}

/* Description text */
.ddt-model-desc{font-size:.875rem;line-height:1.5;color:#374151;margin-bottom:12px}
.ddt-model-desc:last-child{margin-bottom:0}

/* Floorplan section */
.ddt-model-floorplan{margin-top:8px;padding-top:10px;border-top:1px solid #e5e7eb}
.ddt-floorplan-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.875rem;font-weight:600;color:#3b82f6;text-decoration:none;
  padding:8px 12px;background:#eff6ff;border-radius:6px;
  transition:background .15s;
}
.ddt-floorplan-link:hover{background:#dbeafe;text-decoration:none}
.ddt-floorplan-icon{font-size:1rem}
.ddt-model-floorplan-img{
  max-width:100%;height:auto;max-height:120px;
  border-radius:6px;border:1px solid #e5e7eb;
}

/* Mobile adjustments */
@media (max-width:640px){
  .ddt-model-details{
    padding:10px 12px;
    overflow:visible !important;max-height:none !important;height:auto !important;
  }
  .ddt-model-desc{font-size:.8125rem}
  .ddt-floorplan-link{font-size:.8125rem;padding:6px 10px}
}

/* =============================================================================
   FLOORPLAN VIEWER COMPONENT (2025-12-17-U)
   Reusable component for PDF and image floorplans
   ============================================================================= */
.ddt-floorplan-viewer{margin-top:8px;padding-top:10px;border-top:1px solid #e5e7eb}
.ddt-floorplan-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ddt-floorplan-row--image{flex-direction:column;align-items:flex-start}
.ddt-floorplan-icon-wrap{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;background:#fef2f2;border-radius:8px;flex-shrink:0;
}
.ddt-floorplan-icon-svg{color:#dc2626}
.ddt-floorplan-title{font-size:.875rem;font-weight:500;color:#374151;flex:1;min-width:0}
.ddt-floorplan-btn{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.8125rem;font-weight:600;text-decoration:none;
  padding:6px 12px;border-radius:6px;cursor:pointer;
  transition:background .15s,border-color .15s;
  border:1px solid transparent;
}
.ddt-floorplan-open{background:#3b82f6;color:#fff;border-color:#3b82f6}
.ddt-floorplan-open:hover{background:#2563eb;border-color:#2563eb}
.ddt-floorplan-preview{background:#fff;color:#3b82f6;border-color:#3b82f6}
.ddt-floorplan-preview:hover{background:#eff6ff}

/* Image thumbnail */
.ddt-floorplan-thumb-link{display:block;position:relative;cursor:pointer}
.ddt-floorplan-thumb{
  max-width:100%;width:auto;max-height:100px;border-radius:8px;
  border:1px solid #e5e7eb;transition:box-shadow .15s;
}
.ddt-floorplan-thumb-link:hover .ddt-floorplan-thumb{box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.ddt-floorplan-zoom-hint{display:block;font-size:.75rem;color:#6b7280;margin-top:4px}

/* Modal iframe for PDF preview */
.ddt-floorplan-iframe{
  width:100%;height:70vh;min-height:400px;border:none;border-radius:8px;
  background:#f9fafb;
}

/* Mobile adjustments for floorplan viewer */
@media (max-width:640px){
  .ddt-floorplan-row{gap:8px}
  .ddt-floorplan-btn{padding:8px 14px;font-size:.875rem;flex:1;justify-content:center}
  .ddt-floorplan-title{flex-basis:100%;order:-1;margin-bottom:4px}
  .ddt-floorplan-thumb{max-height:80px}
  .ddt-floorplan-iframe{height:50vh;min-height:300px}
}

/* =============================================================================
   REVIEW PAGE - MODEL DETAILS PANEL (2025-12-17-V)
   Expandable panel showing model description and floorplan on review page
   ============================================================================= */
.ddt-review-model-details{
  margin:12px 0;padding:10px 14px;background:#fafafa;border-radius:10px;
  border:1px solid #e5e7eb;
}
.ddt-review-model-details-toggle{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.875rem;font-weight:600;color:#3b82f6;text-decoration:none;
  cursor:pointer;
}
.ddt-review-model-details-toggle:hover{color:#2563eb;text-decoration:underline}
.ddt-toggle-icon{font-size:.75rem;transition:transform .15s;display:inline-block}
.ddt-review-model-details-content{
  margin-top:12px;padding-top:12px;border-top:1px solid #e5e7eb;
  animation:ddtSlideDown 0.2s ease-out;
}
.ddt-review-model-details-content[hidden]{display:none !important}
.ddt-review-model-desc{font-size:.875rem;line-height:1.55;color:#374151;margin-bottom:12px}
.ddt-review-model-desc:last-child{margin-bottom:0}

/* Mobile: Ensure no nested scroll */
@media (max-width:768px){
  .ddt-review-model-details{overflow:visible !important;max-height:none !important;height:auto !important}
  .ddt-review-model-details-content{overflow:visible !important;max-height:none !important;height:auto !important}
  .ddt-review-model-desc{font-size:.8125rem}
}

/* =============================================================================
   MOBILE-ONLY: Guarantee NO nested scrolling on /review-builder (2025-12-17-W)
   
   ROOT CAUSE: WordPress theme containers or page templates often have
   overflow:auto or max-height on mobile, creating nested scroll containers.
   
   FIX: Target common WordPress parent containers on the review page and
   force them to use visible overflow, allowing natural page scroll.
   ============================================================================= */
@media (max-width:768px){
  /* Parent container fixes - force natural page scroll */
  body.ddt-review-page .entry-content,
  body.ddt-review-page .post-content,
  body.ddt-review-page .page-content,
  body.ddt-review-page .site-content,
  body.ddt-review-page .content-area,
  body.ddt-review-page article,
  body.ddt-review-page main,
  body.ddt-review-page #content,
  body.ddt-review-page #primary,
  body.ddt-review-page .elementor-widget-container,
  body.ddt-review-page .wpb_wrapper,
  body.ddt-review-page .vc_column-inner,
  body.ddt-review-page .fl-module-content{
    overflow:visible !important;
    overflow-x:visible !important;
    overflow-y:visible !important;
    max-height:none !important;
    height:auto !important;
    -webkit-overflow-scrolling:auto !important;
  }
  
  /* Forminator form container fix */
  body.ddt-review-page .forminator-custom-form,
  body.ddt-review-page .forminator-ui,
  body.ddt-review-page .forminator-row,
  body.ddt-review-page .forminator-col{
    overflow:visible !important;
    max-height:none !important;
    height:auto !important;
  }
}

/* =============================================================================
   UNIFIED PRIMARY CTA STYLING (2025-12-17-AB)
   
   Ensures the "Submit Build Request" button on the review page matches
   the "Review My Trailer" CTA on the builder page exactly.
   
   Colors: #ef4444 (base) -> #dc2626 (hover) -> #b91c1c (active)
   ============================================================================= */
body.ddt-review-page .forminator-button-submit,
body.ddt-review-page button[type="submit"],
body.ddt-review-page input[type="submit"],
body.ddt-review-page .forminator-button{
  background:#ef4444 !important;
  color:#ffffff !important;
  border:none !important;
  border-radius:10px !important;
  padding:0.9rem 1.5rem !important;
  font-weight:800 !important;
  font-size:1rem !important;
  box-shadow:0 6px 18px rgba(239,68,68,.3) !important;
  cursor:pointer !important;
  transition:all 0.15s ease !important;
  text-transform:none !important;
  letter-spacing:normal !important;
}

body.ddt-review-page .forminator-button-submit:hover,
body.ddt-review-page button[type="submit"]:hover,
body.ddt-review-page input[type="submit"]:hover,
body.ddt-review-page .forminator-button:hover{
  background:#dc2626 !important;
  box-shadow:0 8px 24px rgba(239,68,68,.4) !important;
  transform:translateY(-1px);
}

body.ddt-review-page .forminator-button-submit:active,
body.ddt-review-page button[type="submit"]:active,
body.ddt-review-page input[type="submit"]:active,
body.ddt-review-page .forminator-button:active{
  background:#b91c1c !important;
  transform:translateY(0);
}

body.ddt-review-page .forminator-button-submit:disabled,
body.ddt-review-page button[type="submit"]:disabled,
body.ddt-review-page input[type="submit"]:disabled,
body.ddt-review-page .forminator-button:disabled{
  background:#e5e7eb !important;
  color:#9ca3af !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
  transform:none !important;
}

body.ddt-review-page .forminator-button-submit.forminator-button-loading,
body.ddt-review-page .forminator-button.forminator-button-loading{
  background:#b91c1c !important;
  opacity:0.8;
}

/* =============================================================================
   FORMINATOR FORM LAYOUT - COMPLETE REBUILD (2025-12-17-AF)
   ============================================================================= */

/* Reset */
body.ddt-review-page .forminator-custom-form,
body.ddt-review-page .forminator-custom-form *{box-sizing:border-box !important}
body.ddt-review-page .forminator-custom-form{max-width:100% !important;padding:0 !important;margin:0 !important}

/* Grid rows */
body.ddt-review-page .forminator-row{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:20px !important;
  margin:0 0 20px 0 !important;
  padding:0 !important;
  width:100% !important;
}
body.ddt-review-page .forminator-row:last-child{margin-bottom:0 !important}

/* Columns */
body.ddt-review-page .forminator-col{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  float:none !important;
}
body.ddt-review-page .forminator-col-12,
body.ddt-review-page .forminator-row > .forminator-col:only-child{grid-column:1 / -1 !important}

/* Field containers - exclude hidden fields */
body.ddt-review-page .forminator-field:not(.forminator-field-hidden):not(.forminator-hidden){
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

/* Hidden fields must stay invisible (2025-12-17-AL) */
body.ddt-review-page .forminator-field-hidden,
body.ddt-review-page .forminator-hidden,
body.ddt-review-page input[type="hidden"]{
  display:none !important;
  visibility:hidden !important;
  position:absolute !important;
  left:-9999px !important;
  width:0 !important;
  height:0 !important;
}

/* Labels - always above input */
body.ddt-review-page .forminator-label,
body.ddt-review-page .forminator-field > label,
body.ddt-review-page .forminator-field-label{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:baseline !important;
  gap:0 !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  font-size:0.9375rem !important;
  font-weight:600 !important;
  color:#374151 !important;
  line-height:1.4 !important;
}
body.ddt-review-page .forminator-label > span:first-child,
body.ddt-review-page .forminator-label-title{display:inline !important;margin:0 !important;padding:0 !important}

/* Required asterisk - inline */
body.ddt-review-page .forminator-required,
body.ddt-review-page .forminator-label .forminator-required,
body.ddt-review-page .forminator-field .forminator-required,
body.ddt-review-page span.forminator-required{
  display:inline !important;
  color:#ef4444 !important;
  font-weight:700 !important;
  font-size:inherit !important;
  line-height:inherit !important;
  margin:0 0 0 3px !important;
  padding:0 !important;
  vertical-align:baseline !important;
}

/* Label description (texting only) - inline muted */
body.ddt-review-page .forminator-label-description,
body.ddt-review-page .forminator-description,
body.ddt-review-page .forminator-field-description,
body.ddt-review-page .forminator-label small{
  display:inline !important;
  font-size:0.8125rem !important;
  font-weight:400 !important;
  color:#6b7280 !important;
  margin:0 0 0 6px !important;
  padding:0 !important;
  line-height:inherit !important;
}

/* Input fields - consistent height */
body.ddt-review-page .forminator-input,
body.ddt-review-page .forminator-input-with-icon input,
body.ddt-review-page .forminator-name--field input,
body.ddt-review-page .forminator-email--field input,
body.ddt-review-page .forminator-phone--field input,
body.ddt-review-page input.forminator-input,
body.ddt-review-page input[type="text"],
body.ddt-review-page input[type="email"],
body.ddt-review-page input[type="tel"],
body.ddt-review-page input[type="number"]{
  display:block !important;
  width:100% !important;
  height:48px !important;
  padding:12px 16px !important;
  font-size:1rem !important;
  font-family:inherit !important;
  line-height:1.5 !important;
  color:#111827 !important;
  background:#fff !important;
  border:1px solid #d1d5db !important;
  border-radius:8px !important;
  box-shadow:none !important;
  transition:border-color 0.15s ease,box-shadow 0.15s ease !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}
body.ddt-review-page input:focus,
body.ddt-review-page .forminator-input:focus{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 3px rgba(239,68,68,0.15) !important;
  outline:none !important;
}

/* Textarea */
body.ddt-review-page .forminator-textarea,
body.ddt-review-page textarea{
  display:block !important;
  width:100% !important;
  min-height:120px !important;
  padding:12px 16px !important;
  font-size:1rem !important;
  font-family:inherit !important;
  line-height:1.5 !important;
  color:#111827 !important;
  background:#fff !important;
  border:1px solid #d1d5db !important;
  border-radius:8px !important;
  resize:vertical !important;
  box-shadow:none !important;
}
body.ddt-review-page textarea:focus{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 3px rgba(239,68,68,0.15) !important;
  outline:none !important;
}

/* Select */
body.ddt-review-page .forminator-select,
body.ddt-review-page select{
  display:block !important;
  width:100% !important;
  height:48px !important;
  padding:12px 40px 12px 16px !important;
  font-size:1rem !important;
  color:#111827 !important;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center !important;
  border:1px solid #d1d5db !important;
  border-radius:8px !important;
  cursor:pointer !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}

/* Checkbox - horizontal */
body.ddt-review-page .forminator-field-checkbox,
body.ddt-review-page .forminator-checkbox,
body.ddt-review-page .forminator-field.forminator-field-consent{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  gap:12px !important;
  padding:4px 0 !important;
}
body.ddt-review-page .forminator-checkbox input[type="checkbox"],
body.ddt-review-page input[type="checkbox"]{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  margin:2px 0 0 0 !important;
  padding:0 !important;
  flex-shrink:0 !important;
  accent-color:#ef4444 !important;
  cursor:pointer !important;
}
body.ddt-review-page .forminator-checkbox .forminator-checkbox-label,
body.ddt-review-page .forminator-checkbox-label,
body.ddt-review-page .forminator-consent-description{
  display:block !important;
  flex:1 !important;
  font-size:0.9375rem !important;
  font-weight:400 !important;
  line-height:1.5 !important;
  color:#374151 !important;
  margin:0 !important;
  padding:0 !important;
}

/* Error states */
body.ddt-review-page .forminator-has_error input,
body.ddt-review-page .forminator-has_error textarea,
body.ddt-review-page .forminator-has_error select{border-color:#ef4444 !important}
body.ddt-review-page .forminator-error-message{
  display:block !important;
  color:#ef4444 !important;
  font-size:0.8125rem !important;
  font-weight:500 !important;
  margin:4px 0 0 0 !important;
  padding:0 !important;
}

/* Submit area */
body.ddt-review-page .forminator-button-wrapper,
body.ddt-review-page .forminator-pagination-submit{
  grid-column:1 / -1 !important;
  margin:24px 0 0 0 !important;
  padding:0 !important;
}

/* Remove floats/clearfix */
body.ddt-review-page .forminator-col::before,
body.ddt-review-page .forminator-col::after,
body.ddt-review-page .forminator-row::before,
body.ddt-review-page .forminator-row::after{display:none !important;content:none !important}
body.ddt-review-page .forminator-field > br,
body.ddt-review-page .forminator-label > br{display:none !important}

/* Mobile - single column */
@media (max-width:640px){
  body.ddt-review-page .forminator-row{grid-template-columns:1fr !important;gap:16px !important}
  body.ddt-review-page .forminator-col{grid-column:1 / -1 !important}
  body.ddt-review-page .forminator-input,
  body.ddt-review-page input[type="text"],
  body.ddt-review-page input[type="email"],
  body.ddt-review-page input[type="tel"],
  body.ddt-review-page select{height:48px !important;font-size:16px !important}
  body.ddt-review-page .forminator-label{font-size:0.875rem !important}
  body.ddt-review-page .forminator-label-description{font-size:0.75rem !important}
}

/* Mobile responsive */
@media (max-width:640px){
  body.ddt-review-page .forminator-row{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  body.ddt-review-page .forminator-col{
    grid-column:1 / -1 !important;
  }
  body.ddt-review-page .forminator-input,
  body.ddt-review-page input[type="text"],
  body.ddt-review-page input[type="email"],
  body.ddt-review-page input[type="tel"],
  body.ddt-review-page textarea,
  body.ddt-review-page select{
    padding:10px 12px !important;
    font-size:16px !important;
  }
  body.ddt-review-page .forminator-label{
    font-size:0.8125rem !important;
  }
}

/* Option groups */
.ddt-group{background:#fff;border:1px solid #eee;border-radius:12px;padding:12px 12px 6px;margin-top:.5rem}
.ddt-group h5{font-size:1rem;margin:0 0 .4rem}
.ddt-row{display:flex;gap:.6rem;align-items:center;padding:8px 10px;border-radius:10px}
.ddt-row:hover{background:#fafafa}
/* FIX: flex:1 allows label to take available space; min-width:auto prevents character-level breaking */
.ddt-row label{flex:1;min-width:auto}
.ddt-row .price{min-width:90px;text-align:right}

/* =============================================================================
   INLINE THUMBNAILS REMOVED (2025-12-17-AE)
   
   Images now appear ONLY inside the details panel (View Details click).
   This keeps option rows clean and text-only for better scannability.
   ============================================================================= */

/* =============================================================================
   COLOR SWATCHES FOR OPTIONS (2025-12-17-U)
   Displays small color swatch beside option labels (e.g., Graphic Color)
   ============================================================================= */
.ddt-color-swatch{
  display:inline-block;
  width:20px;
  height:20px;
  border-radius:4px;
  border:2px solid #e5e7eb;
  flex-shrink:0;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
  transition:border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
/* Selected state - prominent ring */
.ddt-row.ddt-option-with-swatch input:checked + .ddt-color-swatch{
  border-color:#2563eb;
  box-shadow:0 0 0 2px #2563eb, inset 0 1px 2px rgba(0,0,0,0.1);
  transform:scale(1.1);
}
/* Hover state */
.ddt-row.ddt-option-with-swatch:hover .ddt-color-swatch{
  border-color:#9ca3af;
}
/* Row styling for swatch options */
.ddt-row.ddt-option-with-swatch .ddt-option{
  align-items:center;
  gap:12px;
}
.ddt-row.ddt-option-with-swatch .ddt-option-label{
  flex:1;
  min-width:0;
}
/* Selected row highlight */
.ddt-row.ddt-option-with-swatch:has(input:checked){
  background:#eff6ff;
  border-color:#bfdbfe;
}
/* Desktop: slightly larger swatches */
@media (min-width:641px){
  .ddt-color-swatch{width:24px;height:24px;border-radius:5px}
}
/* Mobile: ensure clean wrapping */
@media (max-width:640px){
  .ddt-row.ddt-option-with-swatch{padding:10px 12px}
  .ddt-row.ddt-option-with-swatch .ddt-option{gap:10px}
  .ddt-color-swatch{width:18px;height:18px}
}

/* Options column + sticky summary */
.ddt-options-col{display:flex;flex-direction:column;gap:.35rem;max-height:none}
#ddt-options { display:block !important; visibility:visible !important; }
@media (min-width:980px){ .ddt-summary{position:sticky;top:16px} }

/* =============================================================================
   MOBILE TYPOGRAPHY FIX (~390px iPhone width)
   CAUSE: Text was cramping/stacking due to:
     1. Tight line-height (1.2) causing vertical overlap
     2. Input font-size <16px triggering iOS auto-zoom
   CHANGES: Increased line-heights, ensured 16px inputs on mobile.
   NOTE: Do NOT use overflow-wrap:anywhere — causes character-level fragmentation.
   ============================================================================= */
@media (max-width:640px){
  /* Prevent iOS auto-zoom on input focus by ensuring 16px font-size */
  .ddt-wrap input,.ddt-wrap select,.ddt-wrap textarea{font-size:16px}
  /* Button text: allow natural word wrapping only */
  .btn-primary,.btn-ghost{white-space:normal;line-height:1.4}
  /* Progress steps: allow natural word wrapping */
  .ddt-progress .step{white-space:normal}
}

/* =============================================================================
   BUILD SUMMARY CARD (/review-builder - shows selected model + options)
   Displayed above the form so users can review their selections.
   ============================================================================= */
.ddt-build-summary-card{
  background:var(--ddt-surface);
  border:1px solid var(--ddt-border);
  border-radius:var(--ddt-radius);
  padding:1rem;
  margin-bottom:1rem;
  font-size:var(--ddt-font-base);
}
.ddt-build-summary-card h3{
  font-size:var(--ddt-font-lg);font-weight:700;color:var(--ddt-ink);
  margin:0 0 0.75rem;display:flex;align-items:center;gap:0.5rem;
}
.ddt-build-summary-card .summary-stats{
  display:flex;flex-wrap:wrap;gap:0.5rem 1.25rem;margin-bottom:0.75rem;
  font-size:var(--ddt-font-sm);
}
.ddt-build-summary-card .summary-stats .stat{display:flex;gap:0.25rem}
.ddt-build-summary-card .summary-stats .stat-label{color:var(--ddt-muted)}
.ddt-build-summary-card .summary-stats .stat-value{font-weight:600;color:var(--ddt-ink)}
.ddt-build-summary-card .summary-stats .stat-value.accent{color:var(--ddt-accent);font-weight:700}
.ddt-build-summary-card .options-list{
  margin:0;padding-left:1.25rem;font-size:var(--ddt-font-sm);color:var(--ddt-ink);
  line-height:1.6;
}
.ddt-build-summary-card .options-list li{margin-bottom:0.125rem}

/* =============================================================================
   UNIFIED RECEIPT-STYLE SUMMARY (2025-12-17-K)
   Same component used on BOTH /builder and /review-builder for consistency.
   Rendered by DDT.renderReceiptSummary()
   ============================================================================= */

/* Receipt header - used when showHeader: true */
.ddt-receipt-header {
  font-size: 1rem;
  font-weight: 700;
  color: #292524;
  margin: 0 0 12px;
  line-height: 1.3;
}

/* Edit build button on /review-builder (2025-12-17-Q) */
.ddt-edit-build-btn {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 10px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #44403c;
  background: #f5f5f4;
  border: 1px solid #d6d3d1;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.ddt-edit-build-btn:hover {
  background: #e7e5e4;
  border-color: #a8a29e;
}

/* Summary panel wrapper */
#ddt-lineitems {
  background: transparent;
  padding: 0;
}

/* Section grouping - NO per-section borders (2025-12-17-M)
   Only the .ddt-summary-total has a top border (the single divider above total) */
.ddt-summary-section {
  padding: 12px 0;
  border: none;
}
.ddt-summary-section:first-child {
  padding-top: 0;
}

/* Section titles (Base, Selected Options) */
.ddt-summary-section-title {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

/* Each line item row - 2-column layout */
.ddt-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 6px 0;
}
.ddt-summary-row--base {
  padding: 4px 0;
}
.ddt-summary-row--empty {
  padding: 2px 0;
}

/* Label column (left) */
.ddt-summary-label {
  flex: 1;
  min-width: 0;
  font-size: var(--ddt-font-base);
  font-weight: 500;
  color: #1f2937;
  line-height: 1.4;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
.ddt-summary-label--muted {
  color: #9ca3af;
  font-style: italic;
  font-weight: 400;
}

/* Amount column (right) - tabular numbers for alignment */
.ddt-summary-amount {
  flex: 0 0 auto;
  font-size: var(--ddt-font-base);
  font-weight: 600;
  color: #111827;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ddt-summary-amount--zero {
  color: #9ca3af;
  font-weight: 500;
}

/* ─── TOTAL SECTION ─── Visually dominant with heavier border */
.ddt-summary-total {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 2px solid #e5e7eb;
}
.ddt-summary-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.ddt-summary-total-label {
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
}
.ddt-summary-total-amount {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--ddt-accent-dark);
  font-variant-numeric: tabular-nums;
}
.ddt-summary-subnote {
  font-size: var(--ddt-font-xs);
  color: #9ca3af;
  margin-top: 6px;
  text-align: right;
}

/* Empty state */
.ddt-summary-empty {
  padding: 20px 0;
  text-align: center;
  color: #9ca3af;
  font-size: var(--ddt-font-base);
}

/* Options section styling (2025-12-17-AP)
   REMOVED: max-height + overflow-y: auto that caused nested scrolling.
   Options now stack naturally and scroll with the page on both /builder and /review-builder.
   This fixes mobile UX where users were accidentally scrolling inside the summary. */
.ddt-summary-section--options {
  /* No max-height or overflow constraints - flows naturally with page */
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  padding-right: 0;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .ddt-summary-section { padding: 10px 0; }
  .ddt-summary-section-title { font-size: 0.625rem; margin-bottom: 6px; }
  .ddt-summary-row { gap: 12px; padding: 5px 0; }
  .ddt-summary-label { font-size: 0.875rem; }
  .ddt-summary-amount { font-size: 0.875rem; }
  .ddt-summary-total { margin-top: 10px; padding-top: 12px; }
  .ddt-summary-total-label { font-size: 0.9375rem; }
  .ddt-summary-total-amount { font-size: 1.25rem; }
  /* No max-height on mobile - natural page scroll */
}

/* =============================================================================
   NOTICE CARDS (disclaimers, info blocks) - consistent across pages
   ============================================================================= */
.ddt-notice{
  background:var(--ddt-surface-muted);
  border:1px solid var(--ddt-border);
  border-radius:var(--ddt-radius);
  padding:0.75rem 1rem;
  font-size:var(--ddt-font-sm);
  color:var(--ddt-muted);
  line-height:var(--ddt-line-height);
  margin-bottom:0.75rem;
}
.ddt-notice strong{color:var(--ddt-ink);font-weight:600}

/* =============================================================================
   REVIEW PAGE ELEMENTS - ALWAYS VISIBLE (including mobile)
   These elements are injected via JS on /review-builder.
   Ensure they remain visible and readable on all screen sizes.
   
   REMOVED in 2025-12-17-L:
   - #ddt-review-top-disclaimer (duplicate, removed in 2025-12-17-K)
   - #ddt-build-summary-card (wrong ID, should use #ddt-review-summary-card)
   ============================================================================= */
#ddt-submit-disclaimer,
#ddt-review-summary-card{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  max-height:none !important;
  overflow:visible !important;
}
/* Hide deprecated summary card ID if it somehow appears */
#ddt-build-summary-card{
  display:none !important;
}

/* =============================================================================
   FIX: NESTED SCROLLING ON /review-builder MOBILE (2025-12-17-S)
   
   PROBLEM: .ddt-summary-section--options has max-height + overflow-y:auto which
            creates a nested scrollbar inside the summary card on mobile. This is
            intentional on /builder (sidebar needs to stay compact), but on
            /review-builder the summary should scroll naturally with the page.
   
   SOLUTION: Remove max-height/overflow constraints from the options section
             when inside the review summary card (#ddt-review-summary-card).
   ============================================================================= */
#ddt-review-summary-card .ddt-summary-section--options{
  max-height: none !important;
  overflow-y: visible !important;
  overflow: visible !important;
  -webkit-overflow-scrolling: auto;
}

/* =============================================================================
   MOBILE-ONLY: Guarantee NO nested scrolling on /review-builder (2025-12-17-T)
   
   Explicit overrides to ensure the summary card and all child wrappers
   use natural page scrolling on mobile, NOT internal scroll containers.
   
   DEFENSIVE: Uses multiple selector patterns for maximum compatibility.
   ============================================================================= */
@media (max-width:768px){
  /* ─── DEFENSIVE RULE: Prevent any scroll behavior on summary card ─── */
  #ddt-review-summary-card,
  #ddt-review-summary-card *{
    overscroll-behavior: auto !important;
  }
  
  /* The summary card itself - no scroll container */
  #ddt-review-summary-card{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: auto !important;
    position: relative !important;
  }
  
  /* The options section inside the card - no scroll container */
  #ddt-review-summary-card .ddt-summary-section--options{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
  }
  
  /* Any .ddt-card wrapper on review page - no scroll container */
  #ddt-review-summary-card.ddt-card{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* All child elements - prevent scroll traps */
  #ddt-review-summary-card .ddt-summary-section,
  #ddt-review-summary-card .ddt-receipt-header,
  #ddt-review-summary-card .ddt-summary-row{
    overflow: visible !important;
    max-height: none !important;
  }
  
  /* Ensure the card spans full width on mobile */
  #ddt-review-summary-card{
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px;
  }
}

/* Add bottom margin on mobile so sticky footer doesn't cover disclaimers */
@media (max-width:640px){
  #ddt-submit-disclaimer{margin-bottom:100px}
}

/* =============================================================================
   MOBILE WORD-FRAGMENTATION FIX (HARD OVERRIDE)
   
   PROBLEM: "Camera System" was rendering as "camer/a/syste/m" on iPhone.
   CAUSE: overflow-wrap:anywhere and word-break:break-word cause character-level
          breaks when flex containers squeeze content.
   
   SOLUTION: Force normal word-break on all builder option labels, buttons, and
             selectable text. Words wrap ONLY at spaces, never mid-word.
             If "Camera System" must wrap, it becomes:
               Camera
               System
             ...never character fragments.
   
   SCOPE: Builder UI only (options, labels, buttons, pills). Does not affect
          long-form content or paragraphs.
   ============================================================================= */
.ddt-option-label,
.ddt-row label,
.ddt-row .ddt-option,
label.model-pill,
label.model-pill > div,
.btn-primary,
.btn-ghost,
#ddt-review,
#ddt-sticky-total__cta,
#ddt-desktop-total__cta,
.ddt-lines .line span,
.ddt-summary-label,
.ddt-summary-section-title{
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
}

/* =============================================================================
   OLD STICKY ELEMENTS - HIDDEN (2025-12-17-E)
   Replaced by #ddt-sticky-total (new mobile-only sticky footer)
   ============================================================================= */
#ddt-sticky,
#ddt-mini-total,
#ddt-sticky-review,
#ddt-mini-review,
#ddt-sticky-disclaimer{
  display:none !important;
}