/**
 * cgp-calculator-residential.css
 *
 * Light-theme single-scroll design for [cgp_calculator_residential].
 * All rules scoped to .cgp-calculator-residential to avoid WP page bleed.
 *
 * v1.2.0 (2026-05-25) — unified design tokens shared with the survey:
 *   • Added --cgp-elev-1/2/3 shadow scale to replace the accidental
 *     three-tier shadow mix. elev-1 = flat cards (plan, cost, survey),
 *     elev-2 = raised/interactive, elev-3 = hero summary card only.
 *   • Added --cgp-r-btn (12px) — the calculator's canonical button
 *     radius. Pills (--cgp-r-pill) stay reserved for chips/badges.
 *   • Added --cgp-ok-soft-bg for success confirmation blocks.
 *   • Legacy --cgp-shadow-card / --cgp-shadow-elev kept as aliases
 *     so any inline JS references continue to resolve.
 *
 * @package charge-guide-platform
 * @version 1.3.9
 * @date    2026-06-03
 */

@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@300;400;500;600;700&family=Comfortaa:wght@400;500;600&display=swap');

/* ============================================================
 * Custom properties
 * ========================================================== */

.cgp-calculator-residential {
  --cgp-ink:            #0F2237;
  --cgp-ink-2:          #1A3354;
  --cgp-text:           #243C58;
  --cgp-text-2:         #5C708A;
  --cgp-text-3:         #8E9CAE;
  --cgp-text-4:         #B4BFCD;

  --cgp-blue:           #527FB3;
  --cgp-action:         #1665D8;
  --cgp-action-deep:    #0E4FB2;

  --cgp-ok-text:        #1A6F44;
  --cgp-ok-bg:          #E6F4EB;
  --cgp-ok-soft-bg:     #F1F8F4;
  --cgp-ok-border:      #B7DCC4;
  --cgp-ok-icon:        #2E9A5A;

  --cgp-white:          #FFFFFF;
  --cgp-tint:           #EAF2FC;
  --cgp-tint-soft:      #F4F8FD;
  --cgp-sky-grad:       linear-gradient(180deg, #F4F8FD 0%, #FFFFFF 100%);
  --cgp-border:         #E2E8F0;
  --cgp-border-soft:    #EDF1F6;
  --cgp-border-strong:  #C8D4E2;
  --cgp-border-blue:    #BFD4EC;

  /* Radius scale
   * r-card   — all card containers (summary, plan, cost, survey)
   * r-soft   — inputs, dropzones, nested soft surfaces
   * r-btn    — action buttons (Συνέχεια, Υποβολή, etc.)
   * r-pill   — chips, badges, the "Επόμενα βήματα" strip
   */
  --cgp-r-card:         18px;
  --cgp-r-soft:         12px;
  --cgp-r-btn:          12px;
  --cgp-r-pill:         9999px;

  /* Shadow scale — declared hierarchy
   * elev-1 — flat cards sitting on the page (plan, cost, survey)
   * elev-2 — raised/interactive surfaces
   * elev-3 — hero card; reserved for the result summary
   */
  --cgp-elev-1:         0 6px 22px rgba(15,34,55,.06), 0 1px 3px rgba(15,34,55,.04);
  --cgp-elev-2:         0 10px 30px rgba(15,34,55,.08), 0 2px 6px rgba(15,34,55,.05);
  --cgp-elev-3:         0 14px 40px rgba(15,34,55,.10), 0 2px 6px rgba(15,34,55,.04);
  --cgp-shadow-cta:     0 6px 20px rgba(22,101,216,.28), 0 1px 3px rgba(22,101,216,.20);

  /* Legacy aliases — do not use in new code */
  --cgp-shadow-card:    var(--cgp-elev-1);
  --cgp-shadow-elev:    var(--cgp-elev-3);

  --cgp-f-display:      'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cgp-f-soft:         'Comfortaa', 'Helvetica Neue', Arial, sans-serif;
  --cgp-f-body:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --cgp-t:              all 0.2s ease;
}

/* ============================================================
 * Base reset + root
 * ========================================================== */

.cgp-calculator-residential *,
.cgp-calculator-residential *::before,
.cgp-calculator-residential *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cgp-calculator-residential {
  font-family:              var(--cgp-f-body);
  font-size:                16px;
  background:               var(--cgp-white);
  color:                    var(--cgp-text);
  line-height:              1.55;
  -webkit-font-smoothing:   antialiased;
  text-rendering:           optimizeLegibility;
  position:                 relative;
}


/* ============================================================
 * Page shell
 * ========================================================== */

.cgp-res-page {
  width:     100%;
}

/* ============================================================
 * Intro
 * ========================================================== */

.cgp-res-intro { padding: 70px 0 36px; }

.cgp-res-intro-eyebrow {
  font-family:     var(--cgp-f-display);
  font-weight:     600;
  font-size:       13px;
  letter-spacing:  0.10em;
  text-transform:  uppercase;
  color:           var(--cgp-blue);
  margin-bottom:   14px;
}

.cgp-res-intro-title {
  font-family:    var(--cgp-f-display);
  font-weight:    700;
  font-size:      44px;
  line-height:    1.05;
  letter-spacing: -0.02em;
  color:          var(--cgp-ink);
  margin-bottom:  18px;
  max-width:      760px;
}

.cgp-res-intro-title em {
  font-style: normal;
  color:      var(--cgp-action);
}

.cgp-res-intro-lede {
  font-size:   17px;
  line-height: 1.55;
  color:       var(--cgp-text-2);
  max-width:   620px;
}

/* ============================================================
 * Step sections — progressive reveal
 * ========================================================== */

.cgp-res-step-section {
  padding:    64px 0;
  border-top: 1px solid var(--cgp-border-soft);
}

.cgp-res-step-section:first-of-type { border-top: 0; padding-top: 24px; }

.cgp-res-step-section.locked { display: none; }

.cgp-res-step-section.revealing,
.cgp-res-result-section.revealing {
  animation: cgp-reveal-up 0.55s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes cgp-reveal-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cgp-res-step-head {
  display:       flex;
  align-items:   baseline;
  gap:           22px;
  margin-bottom: 36px;
}

.cgp-res-step-index {
  font-family:    var(--cgp-f-display);
  font-weight:    300;
  font-size:      64px;
  line-height:    1;
  color:          var(--cgp-action);
  letter-spacing: -0.04em;
  flex-shrink:    0;
}

.cgp-res-step-title {
  font-family:    var(--cgp-f-display);
  font-weight:    700;
  font-size:      32px;
  line-height:    1.1;
  letter-spacing: -0.015em;
  color:          var(--cgp-ink);
  margin-bottom:  6px;
}

.cgp-res-step-lede {
  font-size:   15.5px;
  color:       var(--cgp-text-2);
  line-height: 1.5;
}

/* ============================================================
 * Field blocks
 * ========================================================== */

.cgp-res-field { margin-bottom: 34px; }

.cgp-res-field-label {
  font-family:   var(--cgp-f-display);
  font-weight:   600;
  font-size:     15px;
  color:         var(--cgp-ink);
  margin-bottom: 4px;
  line-height:   1.4;
  display:       flex;
  align-items:   center;
  gap:           8px;
}

.cgp-res-field-help {
  font-size:     13.5px;
  color:         var(--cgp-text-2);
  margin-bottom: 16px;
  line-height:   1.45;
}

/* ============================================================
 * Car hero stage — Step 1
 * ========================================================== */

.cgp-res-car-stage {
  position:      relative;
  background:    var(--cgp-sky-grad);
  border-radius: 20px;
  padding:       38px 32px 28px;
  overflow:      hidden;
  border:        1px solid var(--cgp-border-soft);
  margin-bottom: 44px;
}

.cgp-res-car-stage::before {
  content:        '';
  position:       absolute;
  left:           0; right: 0; bottom: 0;
  height:         70px;
  background:     linear-gradient(180deg, transparent, rgba(118,182,255,.10));
  pointer-events: none;
}

.cgp-res-car-hero {
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.cgp-res-car-hero svg {
  width:   100%;
  max-width: 460px;
  height:  auto;
  display: block;
  filter:  drop-shadow(0 22px 28px rgba(15,34,55,.18));
}

.cgp-res-car-switch-wrap {
  display:         flex;
  justify-content: center;
}

.cgp-res-car-switch {
  display:      inline-flex;
  background:   var(--cgp-white);
  border:       1px solid var(--cgp-border);
  border-radius: var(--cgp-r-pill);
  padding:      4px;
  margin:       22px auto 0;
  box-shadow:   var(--cgp-elev-1);
  z-index:      2;
}

.cgp-res-car-switch-btn {
  padding:        10px 24px;
  border:         0;
  background:     transparent;
  font-family:    var(--cgp-f-display);
  font-weight:    600;
  font-size:      14px;
  color:          var(--cgp-text-2);
  border-radius:  var(--cgp-r-pill);
  cursor:         pointer;
  transition:     var(--cgp-t);
  letter-spacing: 0.01em;
}

.cgp-res-car-switch-btn.active {
  background: var(--cgp-ink);
  color:      var(--cgp-white);
  box-shadow: 0 2px 8px rgba(15,34,55,.18);
}

.cgp-res-car-caption {
  text-align:  center;
  margin-top:  18px;
  position:    relative;
  z-index:     1;
}

.cgp-res-car-name {
  font-family:    var(--cgp-f-display);
  font-weight:    700;
  font-size:      22px;
  color:          var(--cgp-ink);
  letter-spacing: -0.01em;
}

.cgp-res-car-sub {
  font-size:  14px;
  color:      var(--cgp-text-2);
  margin-top: 2px;
}

/* ============================================================
 * Two-column input pair — Steps 1 & 2
 * ========================================================== */

.cgp-res-input-pair {
  display:   grid;
  grid-template-columns: 1fr 1fr;
  gap:       20px;
  align-items: stretch;
  margin-bottom: 36px;
}

.cgp-res-input-card {
  background:    var(--cgp-tint-soft);
  border-radius: var(--cgp-r-card);
  padding:       24px 22px 20px;
  display:       flex;
  flex-direction: column;
  gap:           10px;
}

.cgp-res-input-card-label {
  font-family:   var(--cgp-f-display);
  font-weight:   600;
  font-size:     15px;
  color:         var(--cgp-ink);
  line-height:   1.4;
  display:       flex;
  align-items:   center;
  gap:           7px;
}

.cgp-res-input-card-help {
  font-size:   13px;
  color:       var(--cgp-text-2);
  line-height: 1.45;
  margin-top:  -4px;
}

.cgp-res-input-card-fineprint {
  font-size:  12px;
  color:      var(--cgp-text-3);
  margin-top: auto;
  padding-top: 6px;
}

/* Slider modifier inside a card — removes extra margin */
.cgp-res-slider-wrap--card { margin-top: 0; }

/* Responsive — stack on narrow viewports */
@media (max-width: 820px) {
  .cgp-res-input-pair { grid-template-columns: 1fr; }
}

/* ============================================================
 * Preset answer row (● Category · value)
 * ========================================================== */

.cgp-res-preset-answer {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-family: var(--cgp-f-display);
  font-size:   14px;
  color:       var(--cgp-ink);
  line-height: 1;
}

.cgp-res-preset-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--cgp-action);
  flex-shrink:   0;
}

.cgp-res-preset-category {
  font-weight: 500;
  color:       var(--cgp-ink);
}

.cgp-res-preset-divider {
  color:      var(--cgp-text-3);
  font-weight: 400;
}

.cgp-res-preset-value {
  font-weight: 700;
  color:       var(--cgp-ink);
}

.cgp-res-preset-unit {
  font-weight: 400;
  color:       var(--cgp-text-2);
  font-size:   13px;
}

/* ============================================================
 * kVA hint nudge
 * ========================================================== */

.cgp-res-kva-hint {
  font-size:   12px;
  color:       var(--cgp-text-3);
  margin-top:  6px;
  line-height: 1.45;
}

.cgp-res-kva-hint--hidden { visibility: hidden; }

.cgp-res-kva-static-hint {
  font-size:   12px;
  color:       var(--cgp-text-3);
  margin-top:  10px;
  line-height: 1.45;
}


/* ============================================================
 * Info button anchor
 * ========================================================== */

.cgp-res-info-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  color:           var(--cgp-text-3);
  text-decoration: none;
  transition:      color 0.15s ease;
  line-height:     1;
}

.cgp-res-info-btn:hover { color: var(--cgp-action); }

.cgp-res-info-btn svg {
  display: block;
  fill:    none;
  stroke:  currentColor;
}

/* ============================================================
 * Cable inner — disabled state + mode row
 * ========================================================== */

.cgp-res-cable-inner {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.cgp-res-cable-inner--disabled {
  opacity:        0.35;
  pointer-events: none;
}

.cgp-res-cable-mode-row {
  margin-bottom: 4px;
}

/* ============================================================
 * Estimated mode — range chips + message + unknown button
 * ========================================================== */

.cgp-res-cable-range-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cgp-res-cable-est-msg {
  font-size:   13.5px;
  color:       var(--cgp-text-2);
  line-height: 1.5;
  margin:      0;
}

.cgp-res-cable-unknown-btn {
  background:      none;
  border:          none;
  padding:         0;
  font-family:     var(--cgp-f-display);
  font-size:       13px;
  color:           var(--cgp-text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor:          pointer;
  align-self:      flex-start;
  transition:      color 0.15s ease;
  line-height:     1;
}

.cgp-res-cable-unknown-btn:hover { color: var(--cgp-action); }

/* ============================================================
 * Chips (kW + kVA)
 * ========================================================== */

.cgp-res-chips {
  display:     flex;
  flex-wrap:   wrap;
  gap:         10px;
  align-items: flex-end;
}

.cgp-res-chip {
  padding:        11px 22px;
  border-radius:  var(--cgp-r-pill);
  border:         1.5px solid var(--cgp-border);
  background:     var(--cgp-white);
  font-family:    var(--cgp-f-display);
  font-size:      14px;
  font-weight:    600;
  color:          var(--cgp-text);
  cursor:         pointer;
  transition:     var(--cgp-t);
  line-height:    1;
  min-width:      56px;
  text-align:     center;
}

.cgp-res-chip:hover  { border-color: var(--cgp-border-strong); color: var(--cgp-ink); }

.cgp-res-chip.selected {
  border-color: var(--cgp-action);
  background:   var(--cgp-tint);
  color:        var(--cgp-action-deep);
  box-shadow:   0 0 0 4px rgba(22,101,216,.10);
}

/* kVA grouped layout */
.cgp-res-kva-row {
  display:     flex;
  flex-wrap:   wrap;
  gap:         28px;
  align-items: flex-start;
}

.cgp-res-kva-group {
  display:     flex;
  flex-direction: row;
  align-items: center;
  gap:         10px;
}

.cgp-res-kva-group-label {
  font-family:    var(--cgp-f-display);
  font-size:      12px;
  font-weight:    500;
  color:          var(--cgp-text-3);
  letter-spacing: 0.02em;
  white-space:    nowrap;
  min-width:      70px;
  opacity:        0.75;
}

.cgp-res-kva-chips {
  display: flex;
  gap:     8px;
}

/* ============================================================
 * Sliders
 * ========================================================== */

.cgp-res-slider-wrap { margin-top: 8px; }

.cgp-calculator-residential input[type="range"] {
  width:              100%;
  height:             4px;
  border-radius:      4px;
  appearance:         none;
  -webkit-appearance: none;
  background:         var(--cgp-border);
  outline:            none;
  cursor:             pointer;
  margin:             0;
}

.cgp-calculator-residential input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:       22px;
  height:      22px;
  border-radius: 50%;
  background:  var(--cgp-action);
  cursor:      pointer;
  border:      4px solid var(--cgp-white);
  box-shadow:  0 2px 8px rgba(22,101,216,.45);
}

.cgp-calculator-residential input[type="range"]::-moz-range-thumb {
  width:       22px;
  height:      22px;
  border-radius: 50%;
  background:  var(--cgp-action);
  cursor:      pointer;
  border:      4px solid var(--cgp-white);
  box-shadow:  0 2px 8px rgba(22,101,216,.45);
}

/* Slider track with floating bubble */
.cgp-res-slider-track {
  position:    relative;
  padding-top: 42px;
}

.cgp-res-slider-bubble {
  position:       absolute;
  top:            0;
  left:           50%;
  transform:      translateX(-50%);
  background:     var(--cgp-ink);
  color:          #fff;
  font-family:    var(--cgp-f-display);
  font-size:      11px;
  font-weight:    700;
  padding:        6px 14px;
  border-radius:  var(--cgp-r-pill);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space:    nowrap;
  opacity:        0;
  transition:     opacity 0.2s ease;
  pointer-events: none;
  z-index:        1;
}

.cgp-res-slider-bubble::after {
  content:      '';
  position:     absolute;
  bottom:       -4px;
  left:         50%;
  transform:    translateX(-50%) rotate(45deg);
  width:        9px;
  height:       9px;
  background:   var(--cgp-ink);
  border-bottom-right-radius: 2px;
}

.cgp-res-slider-track.dragging .cgp-res-slider-bubble { opacity: 1; }

/* ============================================================
 * House cards — Step 3
 * ========================================================== */

.cgp-res-house-cards {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   14px;
}

.cgp-res-house-card {
  border:          1.5px solid var(--cgp-border);
  border-radius:   var(--cgp-r-card);
  padding:         22px 14px 18px;
  text-align:      center;
  cursor:          pointer;
  background:      var(--cgp-white);
  transition:      var(--cgp-t);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             14px;
  position:        relative;
  user-select:     none;
}

.cgp-res-house-card:hover {
  border-color: var(--cgp-border-strong);
  box-shadow:   0 4px 14px rgba(15,34,55,.09);
}

.cgp-res-house-card.selected {
  border-color: var(--cgp-action);
  background:   var(--cgp-tint-soft);
  box-shadow:   0 0 0 4px rgba(22,101,216,.10);
}

.cgp-res-house-art {
  width:           100%;
  height:          88px;
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
}

.cgp-res-house-art svg {
  width:     auto;
  height:    100%;
  max-width: 100%;
}

.cgp-res-house-label {
  font-family: var(--cgp-f-display);
  font-weight: 700;
  font-size:   15px;
  color:       var(--cgp-ink);
}

.cgp-res-house-sub {
  font-size:   12.5px;
  color:       var(--cgp-text-2);
  line-height: 1.35;
  margin-top:  -8px;
}

/* ============================================================
 * Postcode input shell
 * ========================================================== */

.cgp-res-input-shell-wrap { max-width: 240px; }

.cgp-res-input-shell {
  display:       flex;
  align-items:   center;
  gap:           8px;
  height:        46px;
  border:        1.5px solid var(--cgp-border);
  border-radius: var(--cgp-r-soft);
  padding:       0 14px;
  background:    var(--cgp-white);
  transition:    var(--cgp-t);
}

.cgp-res-input-shell:focus-within {
  border-color: var(--cgp-action);
  box-shadow:   0 0 0 4px rgba(22,101,216,.10);
}

.cgp-res-input-shell input {
  flex:        1;
  border:      0;
  outline:     0;
  font-family: var(--cgp-f-display);
  font-size:   16px;
  font-weight: 600;
  color:       var(--cgp-ink);
  background:  transparent;
  min-width:   0;
  height:      100%;
}

.cgp-res-input-shell input::placeholder {
  color:       var(--cgp-text-4);
  font-weight: 500;
}

.cgp-res-input-suffix {
  font-family: var(--cgp-f-display);
  font-size:   13px;
  color:       var(--cgp-text-3);
  font-weight: 500;
}

/* ============================================================
 * Consent toggle
 * ========================================================== */

.cgp-res-consent-row {
  display:     flex;
  align-items: flex-start;
  gap:         12px;
  font-size:   13.5px;
  color:       var(--cgp-text-2);
  line-height: 1.55;
  margin-top:  12px;
  cursor:      pointer;
  user-select: none;
}

.cgp-res-cbox {
  width:            20px;
  height:           20px;
  border-radius:    5px;
  border:           1.5px solid var(--cgp-action);
  background:       var(--cgp-action);
  flex-shrink:      0;
  margin-top:       1px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  transition:       var(--cgp-t);
}

.cgp-res-cbox.off {
  background:   var(--cgp-white);
  border-color: var(--cgp-border-strong);
}

.cgp-res-cbox svg { stroke: var(--cgp-white); fill: none; }
.cgp-res-cbox.off svg { display: none; }

/* ============================================================
 * Result section
 * ========================================================== */

.cgp-res-result-section {
  padding:    72px 0 96px;
  margin-top: 28px;
}

.cgp-res-result-section.locked { display: none; }

.cgp-res-result-inner {
  width:     100%;
}

.cgp-res-result-eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  background:     var(--cgp-white);
  border:         1px solid var(--cgp-ok-border);
  color:          var(--cgp-ok-text);
  padding:        7px 14px;
  border-radius:  var(--cgp-r-pill);
  font-family:    var(--cgp-f-display);
  font-weight:    600;
  font-size:      12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom:  16px;
}

.cgp-res-result-eyebrow svg { stroke: var(--cgp-ok-icon); fill: none; }

.cgp-res-result-title {
  font-family:    var(--cgp-f-display);
  font-weight:    700;
  font-size:      40px;
  line-height:    1.05;
  letter-spacing: -0.02em;
  color:          var(--cgp-ink);
  margin-bottom:  10px;
  max-width:      760px;
}

.cgp-res-result-lede {
  font-size:     16px;
  color:         var(--cgp-text-2);
  margin-bottom: 32px;
  max-width:     600px;
}

/* Summary hero card — elev-3 (the only elev-3 in the entire surface) */
.cgp-res-summary-card {
  background:    var(--cgp-white);
  border:        1px solid var(--cgp-border-soft);
  border-radius: var(--cgp-r-card);
  padding:       36px 40px;
  display:       grid;
  grid-template-columns: 1.1fr 1fr;
  gap:           28px;
  align-items:   center;
  box-shadow:    var(--cgp-elev-3);
  margin-bottom: 22px;
  overflow:      hidden;
}

.cgp-res-summary-art {
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.cgp-res-summary-art svg {
  width:   100%;
  max-width: 360px;
  height:  auto;
  filter:  drop-shadow(0 18px 24px rgba(15,34,55,.16));
}

.cgp-res-summary-line {
  font-family:    var(--cgp-f-display);
  font-weight:    700;
  font-size:      28px;
  line-height:    1.2;
  color:          var(--cgp-ink);
  letter-spacing: -0.015em;
  margin-bottom:  12px;
}

.cgp-res-summary-line em {
  font-style: normal;
  color:      var(--cgp-action);
}

.cgp-res-summary-sub {
  font-family:    var(--cgp-f-display);
  font-size:      15px;
  font-weight:    500;
  color:          var(--cgp-text-2);
  margin-top:     10px;
  letter-spacing: -0.005em;
  line-height:    1.4;
}

/* Cost card — elev-1 (flat tier, same as plan and survey cards) */
.cgp-res-cost-card {
  background:    var(--cgp-white);
  border:        1px solid var(--cgp-border);
  border-radius: var(--cgp-r-card);
  padding:       22px 24px;
  display:       flex;
  flex-direction: row;
  align-items:   stretch;
  gap:           22px;
  margin-bottom: 22px;
  box-shadow:    var(--cgp-elev-1);
}

.cgp-res-cost-right {
  display:         flex;
  flex-direction:  column;
  align-items:     flex-end;
  justify-content: space-between;
  flex-shrink:     0;
  min-width:       160px;
  padding-left:    22px;
  border-left:     1px solid var(--cgp-border-soft);
}

.cgp-res-cost-location {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-family: var(--cgp-f-display);
  font-size:   13px;
  font-weight: 600;
  color:       var(--cgp-ink);
  background:  var(--cgp-tint-soft);
  border:      1px solid var(--cgp-border-soft);
  border-radius: var(--cgp-r-pill);
  padding:     6px 12px;
  white-space: nowrap;
}

.cgp-res-cost-location svg {
  stroke:     var(--cgp-action);
  flex-shrink: 0;
}

.cgp-res-cost-text {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.cgp-res-cost-eyebrow {
  font-family:    var(--cgp-f-display);
  font-weight:    600;
  font-size:      11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--cgp-text-3);
  margin-bottom:  8px;
}

.cgp-res-cost-amount {
  font-family:    var(--cgp-f-display);
  font-weight:    700;
  font-size:      30px;
  color:          var(--cgp-ink);
  user-select:    none;
  line-height:    1.05;
  margin-bottom:  8px;
  letter-spacing: 0.04em;
}

/* Used by output.js */
.cgp-res-cost-blurred {
  filter:         blur(7px);
  -webkit-filter: blur(7px);
}

.cgp-res-cost-includes { margin-top: 10px; }
.cgp-res-cost-includes-label {
  font-size:     12px;
  font-weight:   600;
  color:         var(--cgp-text-2);
  margin-bottom: 6px;
  font-family:   var(--cgp-f-display);
}
.cgp-res-cost-includes-list {
  list-style:     none;
  padding:        0;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            5px;
}
.cgp-res-cost-includes-list li {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   13px;
  color:       var(--cgp-text-2);
  font-family: var(--cgp-f-display);
}

.cgp-res-cost-includes-list li::before {
  content:     '';
  width:       18px;
  height:      18px;
  min-width:   18px;
  border-radius: 50%;
  background:  var(--cgp-ok-icon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12 L10 17 L20 7'/%3E%3C/svg%3E") center/10px no-repeat;
  flex-shrink: 0;
}

.cgp-res-includes-check { display: none; }

.cgp-res-cost-includes-list li sup {
  margin-left:    -1px;
  font-size:      0.65em;
  vertical-align: super;
  line-height:    0;
}

.cgp-res-cost-est-note {
  margin:      12px 0 0;
  font-size:   0.78rem;
  line-height: 1.5;
  color:       var(--cgp-ink-muted, #6b7a8d);
}

/* VAT pricing lines */
.cgp-res-cost-vat-incl {
  display: block; font-family: var(--cgp-f-display);
  font-size: 13px; font-weight: 500; color: var(--cgp-text-3);
  margin-top: 3px; line-height: 1.3;
}
.cgp-res-cost-vat-excl {
  display: block; font-family: var(--cgp-f-display);
  font-size: 12px; font-weight: 400; color: var(--cgp-text-3);
  margin-top: 2px; line-height: 1.3;
}
/* Installation time */
.cgp-res-install-time {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--cgp-f-display); font-size: 12px; font-weight: 400;
  color: var(--cgp-text-3); margin-top: 6px; white-space: nowrap;
}
.cgp-res-install-time svg { stroke: var(--cgp-text-3); flex-shrink: 0; }

.cgp-res-cost-footnote {
  font-family: var(--cgp-f-display);
  font-size:   12px;
  color:       var(--cgp-text-3);
  margin-top:  8px;
}

.cgp-res-btn--primary {
  background:      var(--cgp-action);
  color:           var(--cgp-white);
  border-color:    var(--cgp-action);
  box-shadow:      var(--cgp-shadow-cta);
  border-radius:   var(--cgp-r-btn);
  padding:         14px 26px;
  font-family:     var(--cgp-f-display);
  font-size:       15px;
  font-weight:     600;
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  cursor:          pointer;
  text-decoration: none;
  transition:      var(--cgp-t);
  border:          1.5px solid transparent;
  line-height:     1;
  letter-spacing:  0.005em;
  margin-top:      16px;
  align-self:      flex-start;
}

.cgp-res-btn--primary:hover {
  background:   var(--cgp-action-deep);
  border-color: var(--cgp-action-deep);
}

.cgp-res-tech-params {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-top:     14px;
}

.cgp-res-tech-params .cgp-res-preset-answer {
  gap: 6px;
}

.cgp-res-tech-primary .cgp-res-tech-kw-text {
  font-weight: 700;
  color:       var(--cgp-ink);
}

.cgp-res-tech-params .cgp-res-preset-answer:not(.cgp-res-tech-primary) {
  font-size: 13px;
  opacity:   0.80;
}


/* ============================================================
 * Plan card — abstract install diagram (elev-1, flat tier)
 * ========================================================== */

.cgp-res-plan-card {
  background:                 var(--cgp-white);
  border:                     1px solid var(--cgp-border-soft);
  border-radius:              var(--cgp-r-card);
  padding:                    22px 24px;
  margin-bottom:              24px;
  box-shadow:                 var(--cgp-elev-1);
  overflow-x:                 auto;
  -webkit-overflow-scrolling: touch;
}

.cgp-res-plan-footnote {
  font-family: var(--cgp-f-display);
  font-size:   12px;
  color:       var(--cgp-text-3);
  margin-top:  14px;
  line-height: 1.5;
  padding-top: 4px;
}

.cgp-res-plan-head { margin-bottom: 16px; }

.cgp-res-plan-eyebrow {
  font-family:    var(--cgp-f-display);
  font-weight:    600;
  font-size:      11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--cgp-blue);
  margin-bottom:  6px;
}


.cgp-res-plan-nodes {
  display:               grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items:           center;
  gap:                   0;
}

@media (max-width: 540px) {
  .cgp-res-plan-nodes {
    grid-template-columns: 1fr;
    grid-template-rows:    auto;
    justify-items:         center;
  }

  .cgp-res-plan-connector {
    display:         flex;
    justify-content: center;
    align-items:     center;
    width:           100%;
    padding:         8px 0;
  }

  .cgp-res-plan-connector::before {
    display: none;
  }

  .cgp-res-plan-connector-line {
    display: none;
  }

  .cgp-res-plan-connector-label {
    font-size:     10px;
    font-weight:   600;
    color:         var(--cgp-text-2);
    background:    var(--cgp-tint-soft);
    border:        1px solid var(--cgp-border);
    border-radius: 4px;
    padding:       2px 8px;
    white-space:   nowrap;
    margin:        0;
    line-height:   1.4;
  }

  .cgp-res-plan-node {
    min-width: unset;
    width:     100%;
  }
}

.cgp-res-plan-node {
  min-width:       90px;
  text-align:      center;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             8px;
  padding:         0 4px;
}

.cgp-res-plan-icon-wrap {
  color:   var(--cgp-action);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cgp-res-plan-svg {
  width:   80px;
  height:  80px;
  display: block;
}

.cgp-res-plan-node-label {
  font-family:    var(--cgp-f-display);
  font-weight:    700;
  font-size:      13px;
  color:          var(--cgp-ink);
  letter-spacing: -0.005em;
  line-height:    1.3;
  text-align:     center;
}

.cgp-res-plan-connector {
  min-width:      60px;
  padding:        0;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
}

.cgp-res-plan-connector-line {
  width:      100%;
  border-top: 2px dashed #cbd5e1;
}

.cgp-res-plan-connector-label {
  font-size:    10px;
  font-weight:  600;
  color:        var(--cgp-text-2);
  background:   var(--cgp-tint-soft);
  border:       1px solid var(--cgp-border);
  border-radius: 4px;
  padding:      2px 5px;
  white-space:  nowrap;
  margin-top:   6px;
  display:      block;
  text-align:   center;
}


/* ============================================================
 * CTA row
 * ========================================================== */

.cgp-res-cta-row {
  display:     flex;
  gap:         12px;
  flex-wrap:   wrap;
  align-items: center;
}

.cgp-res-btn {
  border-radius:  var(--cgp-r-btn);
  padding:        14px 26px;
  font-family:    var(--cgp-f-display);
  font-size:      15px;
  font-weight:    600;
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  cursor:         pointer;
  text-decoration: none;
  transition:     var(--cgp-t);
  border:         1.5px solid transparent;
  line-height:    1;
  letter-spacing: 0.005em;
}

.cgp-res-btn-primary {
  background:   var(--cgp-action);
  color:        var(--cgp-white);
  border-color: var(--cgp-action);
  box-shadow:   var(--cgp-shadow-cta);
}

.cgp-res-btn-primary:hover {
  background:   var(--cgp-action-deep);
  border-color: var(--cgp-action-deep);
  box-shadow:   0 6px 24px rgba(22,101,216,.38), 0 1px 3px rgba(22,101,216,.22);
}

.cgp-res-btn-dark {
  background:   var(--cgp-ink);
  color:        var(--cgp-white);
  border-color: var(--cgp-ink);
}

.cgp-res-btn-dark:hover { background: var(--cgp-ink-2); border-color: var(--cgp-ink-2); }

.cgp-res-btn-ghost {
  background:   var(--cgp-white);
  color:        var(--cgp-ink);
  border-color: var(--cgp-border-strong);
}

.cgp-res-btn-ghost:hover { border-color: var(--cgp-ink-2); }

.cgp-res-btn-outline {
  background:   transparent;
  color:        var(--cgp-action);
  border-color: var(--cgp-action);
}

.cgp-res-btn-outline:hover {
  background:   var(--cgp-tint);
  border-color: var(--cgp-action-deep);
  color:        var(--cgp-action-deep);
}

/* ============================================================
 * Loading + error — used by output.js showLoading / showError
 * ========================================================== */

.cgp-res-loading {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             14px;
  padding:         60px 20px;
  color:           var(--cgp-text-2);
  font-size:       13px;
}

.cgp-res-spinner {
  width:         26px;
  height:        26px;
  border:        2px solid var(--cgp-border-strong);
  border-top-color: var(--cgp-action);
  border-radius: 50%;
  animation:     cgp-res-spin .7s linear infinite;
}

@keyframes cgp-res-spin { to { transform: rotate(360deg); } }

.cgp-res-error {
  padding:       16px 20px;
  border-radius: var(--cgp-r-soft);
  background:    rgba(192,57,43,.08);
  border:        1px solid rgba(192,57,43,.25);
  color:         #C0392B;
}

.cgp-res-error strong {
  display:        block;
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom:  6px;
}

.cgp-res-error p { margin: 0; font-size: 13px; }

/* ============================================================
 * Frozen form state — after submit
 * ========================================================== */

.cgp-res-step-section.cgp-res-frozen {
  opacity:        0.55;
  pointer-events: none;
}

.cgp-res-step-section.cgp-res-frozen input,
.cgp-res-step-section.cgp-res-frozen button {
  pointer-events: none;
}

/* Reset button */
.cgp-res-btn-reset {
  background:      none;
  border:          none;
  padding:         0;
  font-family:     var(--cgp-f-display);
  font-size:       13px;
  font-weight:     500;
  color:           var(--cgp-text-2);
  text-decoration: none;
  cursor:          pointer;
  margin-left:     auto;
  display:         flex;
  align-items:     center;
  gap:             6px;
  transition:      color 0.15s ease;
  line-height:     1;
}

.cgp-res-btn-reset:hover { color: var(--cgp-ink); }
/* ============================================================
 * Responsive
 * ========================================================== */

@media (max-width: 820px) {
  .cgp-res-page          { width: 100%; }
  .cgp-res-intro         { padding: 40px 0 24px; }
  .cgp-res-intro-title   { font-size: 30px; }
  .cgp-res-step-section  { padding: 44px 0; }
  .cgp-res-car-switch-btn { padding: 10px 14px; white-space: nowrap; }
  .cgp-res-step-head     { gap: 14px; }
  .cgp-res-step-index    { font-size: 44px; }
  .cgp-res-step-title    { font-size: 24px; }
  .cgp-res-summary-card  { grid-template-columns: 1fr; padding: 28px; }
  .cgp-res-summary-art svg { max-width: 280px; }
  .cgp-res-plan-card     { padding: 16px; }
  .cgp-res-house-cards   { grid-template-columns: 1fr; }
  .cgp-res-result-section { padding: 48px 0 64px; }
  .cgp-res-result-title  { font-size: 28px; }
  .cgp-res-cost-card     { flex-direction: column; }
  .cgp-res-cost-right    { border-left: none; border-top: 1px solid var(--cgp-border-soft); padding-left: 0; padding-top: 16px; align-items: flex-start; min-width: 0; }
  .cgp-res-result-inner  { width: 100%; }
}

/* ============================================================
 * Step footer (Συνέχεια / submit buttons)
 * ========================================================== */

.cgp-res-step-footer {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.cgp-res-btn:disabled,
.cgp-res-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
 * Step 3 footer — button left, consent right
 * ========================================================== */

.cgp-res-step-footer--step3 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  margin-top: 32px;
}

.cgp-res-step-footer--step3 .cgp-res-consent-row {
  margin-top: 0;
  font-size: 12.5px;
  color: var(--cgp-text-2);
}

/* ============================================================
 * Scoped overrides — prevent double borders on composite inputs
 * ========================================================== */

.cgp-calculator-residential .cgp-res-cable-input-inline input[type="number"],
.cgp-calculator-residential .cgp-res-cable-input-inline input {
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
}

.cgp-calculator-residential .cgp-res-input-shell input[type="text"],
.cgp-calculator-residential .cgp-res-input-shell input {
  border: none;
  outline: none;
  background: transparent;
}

/* ============================================================
 * Drag diagram — cable length
 * ========================================================== */

/* Diagram container */
.cgp-res-drag-diagram {
  position:        relative;
  display:         flex;
  flex-direction:  row;
  align-items:     stretch;
  gap:             0;
  padding:         16px 20px 44px;
  background:      var(--cgp-tint-soft);
  border:          1px solid var(--cgp-border-blue);
  border-radius:   var(--cgp-r-card);
  min-height:      130px;
  overflow:        visible;
  user-select:     none;
}

/* Left node — blue dot + label */
.cgp-res-drag-left-node {
  position:    relative;
  width:       80px;
  flex-shrink: 0;
  align-self:  stretch;
  z-index:     2;
}

.cgp-res-drag-dot {
  position:      absolute;
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
  width:         12px;
  height:        12px;
  border-radius: 50%;
  background:    var(--cgp-action);
  flex-shrink:   0;
}

.cgp-res-drag-left-node .cgp-res-drag-node-label {
  position:    absolute;
  top:         calc(50% + 12px);
  left:        0;
  right:       0;
  text-align:  center;
  font-family: var(--cgp-f-display);
  font-size:   11px;
  font-weight: 600;
  color:       var(--cgp-text-2);
  white-space: normal;
  word-break:  break-word;
  line-height: 1.3;
}

/* Track — dashed line */
.cgp-res-drag-track {
  flex:           1;
  position:       relative;
  align-self:     stretch;
  min-width:      0;
  pointer-events: auto;
}

.cgp-res-drag-track-line {
  position:       absolute;
  top:            50%;
  left:           0;
  right:          0;
  height:         0;
  border-top:     2px dashed var(--cgp-blue);
  opacity:        0.45;
  transform:      translateY(-50%);
  pointer-events: none;
}

/* Charger — absolutely positioned, vertically centered in diagram */
.cgp-res-drag-charger {
  position:       absolute;
  top:            50%;
  transform:      translateY(-50%);
  left:           90px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
  cursor:         grab;
  z-index:        3;
  transition:     left 0.12s ease;
}

.cgp-res-drag-charger.dragging {
  transition: none;
  cursor:     grabbing;
}

.cgp-res-drag-charger .cgp-res-drag-node-label {
  transform:   none;
  margin-top:  4px;
  white-space: nowrap;
}

/* Charger rectangle — vertical column */
.cgp-res-drag-charger-rect {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
  background:     var(--cgp-white);
  border:         2px solid var(--cgp-action);
  border-radius:  var(--cgp-r-soft);
  padding:        8px 10px 6px;
  box-shadow:     var(--cgp-elev-1);
  cursor:         grab;
  min-width:      58px;
}

.cgp-res-drag-charger-rect:active { cursor: grabbing; }

.cgp-res-drag-emoji {
  font-size:      18px;
  line-height:    1;
  pointer-events: none;
}

/* Distance input */
.cgp-res-drag-input {
  width:           40px;
  font-family:     var(--cgp-f-display);
  font-size:       15px;
  font-weight:     700;
  color:           var(--cgp-ink);
  text-align:      center;
  background:      transparent;
  border:          none;
  outline:         none;
  padding:         0;
  -moz-appearance: textfield;
  cursor:          text;
}

.cgp-res-drag-input::-webkit-outer-spin-button,
.cgp-res-drag-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cgp-res-drag-input-unit {
  font-family: var(--cgp-f-display);
  font-size:   11px;
  color:       var(--cgp-text-3);
  font-weight: 500;
}

.cgp-res-drag-node-label {
  font-family: var(--cgp-f-display);
  font-size:   11px;
  font-weight: 600;
  color:       var(--cgp-text-2);
  white-space: normal;
  word-break:  break-word;
  text-align:  center;
  line-height: 1.3;
  max-width:   78px;
}

/* Scoped — prevent double border on drag input */
.cgp-calculator-residential .cgp-res-drag-diagram input[type="number"],
.cgp-calculator-residential .cgp-res-drag-input {
  border:     none;
  outline:    none;
  box-shadow: none;
  background: transparent;
}

/* ============================================================
 * Limit message (token wall in Step 3)
 * ========================================================== */

.cgp-res-limit-msg {
  margin-top:     16px;
  display:        flex;
  flex-direction: column;
  gap:            12px;
  max-width:      480px;
}

.cgp-res-limit-text {
  font-family: var(--cgp-f-display);
  font-size:   15px;
  color:       var(--cgp-text-2);
  margin:      0;
  line-height: 1.5;
}

/* ============================================================
 * Reveal card — inside .cgp-res-plan-card
 * ========================================================== */

.cgp-res-reveal-card {
  border-top:  1px solid var(--cgp-border);
  margin-top:  20px;
  padding-top: 20px;
}

/* Shared headline across all states */
.cgp-res-reveal-headline {
  font-family:   var(--cgp-f-display);
  font-size:     14px;
  font-weight:   400;
  color:         var(--cgp-text-2);
  line-height:   1.45;
  margin:        0 0 14px;
}

.cgp-res-reveal-headline strong {
  font-weight: 600;
}

/* State 1 & 3 share the primary button — no extra rules needed */

/* State 2 — insufficient */
.cgp-res-reveal-shortfall-line {
  font-family: var(--cgp-f-display);
  font-size:   13px;
  color:       var(--cgp-text-2);
  margin:      0 0 16px;
  line-height: 1.5;
}

.cgp-res-reveal-shortfall-sep {
  color: var(--cgp-text-3);
}

/* State 3 — revealed/confirmed */
.cgp-res-reveal-confirmed {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  margin-bottom: 16px;
}

.cgp-res-reveal-check {
  flex-shrink: 0;
  margin-top:  2px;
  color:       var(--cgp-ok-icon);
}

.cgp-res-reveal-confirmed-title {
  font-family: var(--cgp-f-display);
  font-size:   15px;
  font-weight: 600;
  color:       var(--cgp-ink);
  margin:      0 0 3px;
}

.cgp-res-reveal-confirmed-date {
  font-family: var(--cgp-f-display);
  font-size:   13px;
  color:       var(--cgp-text-2);
  margin:      0;
}

/* Button icon alignment */
.cgp-res-reveal-icon {
  flex-shrink: 0;
}

/* Download button — disabled placeholder state */
.cgp-res-reveal-btn-download:disabled,
.cgp-res-reveal-btn-download[disabled] {
  opacity: 0.45;
  cursor:  not-allowed;
  pointer-events: none;
}

/* Reveal card CTAs — dark style, not dominant blue */
.cgp-res-reveal-card .cgp-res-btn-primary {
  background:   var(--cgp-ink);
  border-color: var(--cgp-ink);
  box-shadow:   none;
  font-size:    14px;
  padding:      11px 22px;
}

.cgp-res-reveal-card .cgp-res-btn-primary:hover {
  background:   var(--cgp-ink-2);
  border-color: var(--cgp-ink-2);
  box-shadow:   none;
}

/* ============================================================
 * Entry points — balanced two-lane (partner code + standalone)
 *
 * Shared by EP1 (intro recall panel) and EP2 (step 3 footer).
 * Re-skinned to the calculator's own token system: input-shell
 * fields, r-card/r-soft radii, --cgp-action blue, tint surfaces.
 * The two lanes carry equal visual weight; the partner lane is
 * always visible and self-qualifying (no "or" divider, no toggle).
 * ========================================================== */

/* ── EP1 teaser row — collapsed state in the intro ──────────────── */
/* No borders (they made the sentence read as one big link) and the CTA
   is welded to the lead-in instead of pinned to the far right, so the
   action never detaches. Wraps left-aligned on narrow screens. */
.cgp-res-recall-row {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     baseline;
    justify-content: flex-start;
    gap:             4px 8px;
    padding:         0;
    margin:          18px 0 4px;
}
.cgp-res-recall-text {
    font-size:   14.5px;
    color:       var(--cgp-text-2);
    line-height: 1.5;
}
.cgp-res-recall-cta {
    font-family:     var(--cgp-f-display);
    font-size:       14.5px;
    font-weight:     600;
    color:           var(--cgp-action);
    background:      none;
    border:          0;
    padding:         0;
    line-height:     1.5;
    cursor:          pointer;
    user-select:     none;
    text-decoration: none;
    transition:      color 0.15s ease;
}
.cgp-res-recall-cta:hover {
    color:                 var(--cgp-action-deep);
    text-decoration:       underline;
    text-underline-offset: 3px;
}

/* EP1 expandable panel wrapper */
.cgp-res-recall-panel {
    padding: 8px 0 4px;
}

/* ── Two-lane grid — equal columns, stacks on narrow ────────────── */
.cgp-res-entry {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   16px;
    align-items:           stretch;
}
@media (max-width: 720px) {
    .cgp-res-entry { grid-template-columns: 1fr; }
}

/* ── Lane card — shared shell ───────────────────────────────────── */
.cgp-res-lane {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    background:     var(--cgp-tint-soft);
    border:         1px solid var(--cgp-border-soft);
    border-radius:  var(--cgp-r-card);
    padding:        20px 20px 18px;
}
/* Partner lane — gentle accent so it reads as the referral path,
   without changing its size or prominence (stays balanced). */
.cgp-res-lane--partner {
    border-color: var(--cgp-border-blue);
}

/* Lane header — icon chip + label */
.cgp-res-lane-head {
    display:        flex;
    align-items:    center;
    gap:            10px;
    font-family:    var(--cgp-f-display);
    font-weight:    700;
    font-size:      15px;
    color:          var(--cgp-ink);
    letter-spacing: -0.005em;
}
.cgp-res-lane-ico {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           30px;
    height:          30px;
    border-radius:   var(--cgp-r-pill);
    flex-shrink:     0;
}
.cgp-res-lane--partner   .cgp-res-lane-ico { background: var(--cgp-tint); color: var(--cgp-action); }
.cgp-res-lane--standalone .cgp-res-lane-ico { background: #EEF1F6; color: var(--cgp-ink-2); }
.cgp-res-lane-ico svg { display: block; stroke: currentColor; fill: none; }

/* Lane supporting / perk line */
.cgp-res-lane-perk {
    font-size:   13px;
    line-height: 1.5;
    color:       var(--cgp-text-2);
    margin:      0;
}

/* Lane body — fills the lane so the action can be bottom-pinned. Both
   lanes pin their primary action to the bottom edge, so the partner
   PIN+submit row and the standalone button sit on the same baseline
   across the row, regardless of how much copy sits above. */
.cgp-res-lane-body {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            12px;
}
/* Partner lane: hint + PIN/submit row pinned to the bottom. */
.cgp-res-lane-foot {
    margin-top:     auto;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}
/* Standalone lane: its single button pinned to the bottom. */
.cgp-res-lane--standalone .cgp-res-lane-btn-full { margin-top: auto; }

/* Field label + input-shell reuse */
.cgp-res-lane-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}
.cgp-res-lane-field-label {
    font-family:    var(--cgp-f-display);
    font-size:      12px;
    font-weight:    600;
    color:          var(--cgp-text-2);
    letter-spacing: 0.01em;
}

/* PIN + submit share one row */
.cgp-res-lane-pin-row {
    display:     flex;
    gap:         10px;
    align-items: flex-end;
}
.cgp-res-lane-pin-row .cgp-res-lane-field { flex: 1; min-width: 0; }
.cgp-res-input-shell--pin input { letter-spacing: 0.3em; }

/* Lane action buttons — matched to input-shell height */
.cgp-res-lane-submit {
    height:      46px;
    padding:     0 18px;
    white-space: nowrap;
    flex-shrink: 0;
}
.cgp-res-lane-btn-full {
    width:           100%;
    height:          46px;
    justify-content: center;
}

/* Hint under the partner fields */
.cgp-res-lane-hint {
    font-size:   11.5px;
    color:       var(--cgp-text-3);
    line-height: 1.45;
    margin:      0;
}

/* ── EP2 logged-in layout ───────────────────────────────────────────
 * For signed-in users the offer is the single dominant action and the
 * partner-code lane is demoted to a collapsible secondary path. app.js
 * adds .cgp-res-entry--auth to #cgp-res-ep2 and toggles .code-open on
 * the wrapper. Guests never get these classes, so they keep the
 * balanced two-lane layout untouched. */
.cgp-res-ep2-wrap {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

/* Collapse to a single column and strip the standalone lane's card
   chrome so it reads as a plain primary button. */
.cgp-res-entry--auth {
    grid-template-columns: 1fr;
}
.cgp-res-entry--auth .cgp-res-lane-authhide { display: none; }
.cgp-res-entry--auth .cgp-res-lane--standalone {
    background: transparent;
    border:     0;
    padding:    0;
}
.cgp-res-entry--auth .cgp-res-lane--standalone .cgp-res-lane-body { gap: 0; }

/* "Have a dealer code?" toggle — quiet text link, centred under the
   offer button. Shown only for logged-in users (app.js). */
.cgp-res-dealer-toggle {
    align-self:      center;
    background:      none;
    border:          0;
    padding:         2px 6px;
    font-family:     var(--cgp-f-display);
    font-size:       12.5px;
    font-weight:     500;
    color:           var(--cgp-text-2);
    cursor:          pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition:      color 0.15s ease;
}
.cgp-res-dealer-toggle:hover { color: var(--cgp-action); }

/* When the partner code is expanded, de-emphasise the offer button so
   the two CTAs never compete for the click. */
.cgp-res-ep2-wrap.code-open #cgp-res-step3-submit {
    background:   var(--cgp-white);
    color:        var(--cgp-text-2);
    border-color: var(--cgp-border-strong);
    box-shadow:   none;
}
.cgp-res-ep2-wrap.code-open #cgp-res-step3-submit:hover {
    background:   var(--cgp-white);
    border-color: var(--cgp-ink-2);
    color:        var(--cgp-ink);
}
.cgp-res-ep2-wrap.code-open #cgp-res-step3-submit svg { opacity: 0.5; }

/* ── Mobile fit — keep stacked lanes inside the viewport ────────────
 * The lanes already collapse to one column at 720px; tighten padding
 * and guarantee nothing overflows horizontally on small phones. The
 * PIN + Συνεχίστε row stays inline (PIN is only 4 digits) but is
 * allowed to wrap as a last resort on very narrow screens. */
@media (max-width: 720px) {
    .cgp-res-lane { padding: 16px 16px 16px; gap: 10px; }
    .cgp-res-lane-perk { font-size: 12.5px; }
}
@media (max-width: 400px) {
    .cgp-res-lane-pin-row { flex-wrap: wrap; }
    .cgp-res-lane-pin-row .cgp-res-lane-submit { width: 100%; }
}

@media (max-width: 720px) {
  .cgp-res-entry {
    grid-template-columns: minmax(0, 1fr);
  }

  .cgp-res-lane {
    min-width: 0;
    padding: 16px;
    gap: 10px;
  }

  .cgp-res-lane-submit {
    white-space: normal;
  }
}

@media (max-width: 400px) {
  .cgp-res-lane-pin-row {
    flex-wrap: wrap;
  }

  .cgp-res-lane-pin-row .cgp-res-lane-submit {
    width: 100%;
  }
}

/* ==========================================================================
   Reveal zone — BOM details panel
   ========================================================================== */

.cgp-res-details-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    border-top: 1px solid var(--cgp-border);
    background: var(--cgp-surface, #fff);
    margin-top: 12px;
}

.cgp-res-details-panel--open {
    max-height: 2000px;
}

.cgp-res-bom-root {
    padding: 16px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cgp-res-bom-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cgp-res-bom-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cgp-accent, #2563eb);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--cgp-border);
    margin-bottom: 2px;
}

.cgp-res-bom-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 2px 0;
}

.cgp-res-bom-qty {
    font-size: 12px;
    font-weight: 600;
    color: var(--cgp-text-2);
    min-width: 24px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.cgp-res-bom-label {
    font-size: 13px;
    color: var(--cgp-text);
    line-height: 1.4;
}

.cgp-res-bom-empty {
    padding: 12px 0;
    font-size: 13px;
    color: var(--cgp-text-3);
}

.cgp-res-reveal-btn-toggle {
    margin-top: 12px;
    font-size: 13px;
}

/* ==========================================================================
   Reveal zone — partner CTA state (free user)
   ========================================================================== */

.cgp-res-reveal-cta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cgp-res-reveal-cta-icon {
    flex-shrink: 0;
    color: var(--cgp-text-2);
    margin-top: 1px;
}

.cgp-res-reveal-cta-text {
    font-size: 13px;
    color: var(--cgp-text-2);
    line-height: 1.5;
}

.cgp-res-reveal-cta-link {
    color: var(--cgp-action, #2563eb);
    text-decoration: none;
    font-size: 13px;
}

.cgp-res-reveal-cta-link:hover {
    text-decoration: underline;
}