/**
 * Estimator Pro – Frontend Styles (v5.1 with CSS Custom Properties)
 *
 * Every colour / spacing value is driven by CSS variables scoped to each
 * calculator wrapper (#dde-calc-123).  Inline <style> blocks set the per-
 * calculator values; fallbacks are listed here for safety.
 *
 * v5.1 – Step images, Flexbox side layouts, CSS Grid column control, responsive collapse
 */

/* ================================================================= *
 *  ROOT DEFAULTS (overridden per-calculator)
 * ================================================================= */
.dde-wrap {
  --dde-primary:   #2563eb;
  --dde-bg:        #ffffff;
  --dde-text:      #1e293b;
  --dde-border:    #e2e8f0;
  --dde-font:      inherit;
  --dde-font-size: 16px;
  --dde-padding:   28px;
  --dde-card-gap:  12px;

  font-family: var(--dde-font);
  font-size:   var(--dde-font-size);
  color:       var(--dde-text);
  max-width:   820px;
  margin:      0 auto;
}

/* ================================================================= *
 *  STEPS
 * ================================================================= */
.dde-step {
  background:    var(--dde-bg);
  border:        1px solid var(--dde-border);
  border-radius: 10px;
  padding:       var(--dde-padding);
  margin-bottom: var(--dde-card-gap);
  transition:    box-shadow .2s, opacity .3s, filter .3s;
}
.dde-step:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* ── Conditional Logic States ──────────────────────────────────── */
.dde-step.dde-hidden {
  display: none !important;
}
.dde-step.dde-disabled {
  opacity:        0.4;
  pointer-events: none;
  filter:         grayscale(0.4);
  position:       relative;
}

.dde-step-label {
  display:        flex;
  align-items:    center;
  gap:            12px;
  font-weight:    700;
  font-size:      1.1em;
  margin-bottom:  18px;
  color:          var(--dde-text);
}
.dde-step-description {
  margin:         -6px 0 16px;
  line-height:    1.4;
  color:          var(--dde-desc-color, #64748b) !important;
  font-size:      var(--dde-desc-font-size, 14px) !important;
}
.dde-step-num {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  border-radius:   50%;
  background:      var(--dde-primary);
  color:           #fff;
  font-size:       14px;
  font-weight:     700;
  flex-shrink:     0;
}

/* ================================================================= *
 *  RANGE SLIDER
 * ================================================================= */
.dde-slider-wrap {
  display:     flex;
  align-items: center;
  gap:         16px;
}
.dde-range {
  -webkit-appearance: none;
  appearance:         none;
  width:              100%;
  height:             8px;
  border-radius:      4px;
  background:         var(--dde-border);
  outline:            none;
}
.dde-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:              24px;
  height:             24px;
  border-radius:      50%;
  background:         var(--dde-primary);
  cursor:             pointer;
  border:             2px solid #fff;
  box-shadow:         0 1px 4px rgba(0,0,0,.2);
}
.dde-range::-moz-range-thumb {
  width:         24px;
  height:        24px;
  border-radius: 50%;
  background:    var(--dde-primary);
  cursor:        pointer;
  border:        2px solid #fff;
  box-shadow:    0 1px 4px rgba(0,0,0,.2);
}
.dde-range-val {
  min-width:   60px;
  text-align:  right;
  font-weight: 700;
  font-size:   1.15em;
  color:       var(--dde-primary);
}

/* ── Toggle Sub-Slider ─────────────────────────────────────────── */
.dde-sub-slider-wrap {
  margin-top:   16px;
  padding-top:  16px;
  border-top:   1px dashed var(--dde-border);
}

/* ================================================================= *
 *  STEP IMAGE & FLEX LAYOUT
 * ================================================================= */

/* ── Full-width step images (top / bottom) ────────────────────── */
.dde-step-image {
  display:       block;
  width:         100%;
  border-radius: 8px;
  object-fit:    cover;
}
.dde-step-image--top {
  margin-bottom: 16px;
}
.dde-step-image--bottom {
  margin-top: 16px;
}

/* ── Flexbox row for side-by-side image+content ───────────────── */
.dde-step-flex-row {
  display:   flex;
  gap:       20px;
  align-items: flex-start;
}
.dde-step-image-col {
  flex-shrink: 0;
}
.dde-step-image--side {
  width:         100%;
  height:        100%;
  object-fit:    cover;
  border-radius: 8px;
}
.dde-step-content-col {
  min-width: 0;           /* prevent flex child blowout */
}

/* ── Responsive: collapse side layouts to column on mobile ────── */
@media (max-width: 768px) {
  .dde-step-flex-row {
    flex-direction: column !important;
  }
  .dde-step-image-col {
    flex:      0 0 100% !important;
    max-width: 100% !important;
  }
  .dde-step-content-col {
    flex:      0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ================================================================= *
 *  RADIO CARD GRID
 * ================================================================= */
.dde-cards-grid,
.dde-toggle-wrap {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:                   var(--dde-card-gap);
}
.dde-toggle-wrap {
  grid-template-columns: 1fr 1fr;
  max-width: 300px;
}

.dde-radio-card {
  position:      relative;
  border:        2px solid var(--dde-border);
  border-radius: 10px;
  padding:       14px 10px;
  text-align:    center;
  cursor:        pointer;
  transition:    border-color .2s, box-shadow .2s, transform .15s;
  background:    var(--dde-bg);
}
.dde-radio-card:hover {
  border-color: var(--dde-primary);
  transform:    translateY(-2px);
  box-shadow:   0 4px 14px rgba(0,0,0,.08);
}
.dde-radio-card.dde-card-selected {
  border-color: var(--dde-primary);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--dde-primary) 20%, transparent);
}
.dde-radio-card input[type="radio"],
.dde-radio-card input[type="checkbox"] {
  position: absolute;
  opacity:  0;
  pointer-events: none;
}
.dde-card-img {
  display:       block;
  width:         100%;
  /* height is set via inline style from Design Settings (default 90px) */
  object-fit:    cover;
  border-radius: 6px;
  margin-bottom: 8px;
}
.dde-card-label {
  display:     block;
  font-weight: 600;
  font-size:   0.92em;
  color:       var(--dde-text);
}
.dde-card-description {
  margin-top:   6px;
  line-height:  1.4;
  color:        var(--dde-desc-color, #64748b) !important;
  font-size:    var(--dde-desc-font-size, 14px) !important;
}

/* ================================================================= *
 *  LEAD FORM
 * ================================================================= */
.dde-lead-section {
  margin-top: var(--dde-card-gap);
}
.dde-lead-form {
  background:    var(--dde-bg);
  border:        1px solid var(--dde-border);
  border-radius: 10px;
  padding:       var(--dde-padding);
}
.dde-lead-form h3 {
  margin:      0 0 18px;
  font-size:   1.25em;
  font-weight: 700;
  color:       var(--dde-text);
}
.dde-form-field {
  margin-bottom: 14px;
}
.dde-form-field label {
  display:       block;
  font-weight:   600;
  margin-bottom: 5px;
  font-size:     0.93em;
  color:         var(--dde-text);
}
.dde-req { color: #e11d48; }

.dde-form-field input,
.dde-form-field textarea {
  width:         100%;
  padding:       10px 14px;
  border:        1px solid var(--dde-border);
  border-radius: 6px;
  font-size:     var(--dde-font-size);
  font-family:   var(--dde-font);
  color:         var(--dde-text);
  background:    #fff;
  box-sizing:    border-box;
  transition:    border-color .2s;
}
.dde-form-field input:focus,
.dde-form-field textarea:focus {
  border-color: var(--dde-primary);
  outline:      none;
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--dde-primary) 15%, transparent);
}

.dde-submit-btn {
  display:        inline-block;
  padding:        13px 32px;
  background:     var(--dde-primary);
  color:          #fff;
  font-size:      1em;
  font-weight:    700;
  border:         none;
  border-radius:  8px;
  cursor:         pointer;
  transition:     background .2s, transform .15s;
  width:          100%;
  margin-top:     6px;
}
.dde-submit-btn:hover {
  filter:    brightness(1.1);
  transform: translateY(-1px);
}
.dde-submit-btn:disabled {
  opacity: .6;
  cursor:  not-allowed;
}

.dde-form-error {
  margin-top:    10px;
  color:         #dc2626;
  font-weight:   600;
  font-size:     .92em;
}

/* ================================================================= *
 *  PRICE RESULT
 * ================================================================= */
.dde-price-result {
  background:    var(--dde-bg);
  border:        2px solid var(--dde-primary);
  border-radius: 12px;
  padding:       var(--dde-padding);
  text-align:    center;
  margin-top:    var(--dde-card-gap);
}
.dde-price-result h3 {
  margin:      0 0 12px;
  font-weight: 700;
  color:       var(--dde-text);
}
.dde-price-range,
.dde-price-display {
  font-size:   2em;
  font-weight: 800;
  color:       var(--dde-primary);
}
.dde-price-note {
  margin-top: 10px;
  font-size:  .88em;
  opacity:    .7;
}

/* ================================================================= *
 *  RESPONSIVE
 * ================================================================= */
@media (max-width: 768px) {
  /* Radio grids: collapse forced columns to 2 on tablets */
  .dde-cards-grid[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .dde-wrap {
    --dde-padding: 16px;
  }
  .dde-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
  /* Force 1 column for explicitly-set grids on small screens */
  .dde-cards-grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .dde-price-range,
  .dde-price-display {
    font-size: 1.5em;
  }
}