/* ===== CONFIGURATOR PAGE LAYOUT ===== */

.configurator-page {
  min-height: 100vh;
  background: #0f172a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Header */
.configurator-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.configurator-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 20px;
}

.configurator-header__back {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #94a3b8;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.configurator-header__back:hover {
  color: #fbbf24;
}

.configurator-header__back svg {
  width: 20px;
  height: 20px;
}

.configurator-header__brand {
  display: flex;
  align-items: center;
}

.configurator-header__logo {
  height: 32px;
  width: auto;
}

.configurator-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Main content */
.configurator-main {
  min-height: calc(100vh - 140px);
  padding: 0;
}

.configurator-wrapper {
  width: 100%;
}

/* Override solar-step to take full width/height */
.configurator-wrapper solar-water-heater-configurator {
  display: block;
  width: 100%;
}

/* Footer */
.configurator-footer {
  background: rgba(15, 23, 42, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 0;
}

.configurator-footer__inner {
  display: flex;
  justify-content: center;
  text-align: center;
}

.configurator-footer__text {
  color: #64748b;
  font-size: 0.85rem;
  margin: 0;
}

.configurator-footer__link {
  color: #fbbf24;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.configurator-footer__link:hover {
  color: #f59e0b;
}

/* ===== MODERN STEP STYLES - Override for standalone page ===== */

/* Hide the "Votre progression" sidebar */
.solar-progress-sidebar {
  display: none !important;
}

/* Center the whole configurator and give it a max width */
.configurator-page .solar-configurator {
  display: block;
  grid-template-columns: 1fr;
  max-width: none;
  padding: 0;
}

.configurator-page .solar-configurator__main,
.configurator-page .solar-configurator__main--plain {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Ensure all modern steps fill the screen properly */
.configurator-page .solar-step {
  min-height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 18px 24px;
  gap: 12px;
}

.configurator-page .solar-step > * {
  width: 100%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Make the white cards more prominent */
.configurator-page .solar-version-card,
.configurator-page .solar-capacity-card {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  padding: 18px 22px 16px;
  margin-bottom: 0;
  border-radius: 24px;
}

/* Payment step uses the same dark background and card layout as modern steps */
.solar-step[data-step-id="payment"] {
  background: linear-gradient(180deg, #1a2342 0%, #0f172a 100%);
}

.solar-step[data-step-id="payment"] .solar-section-card,
.solar-step[data-step-id="payment"] .solar-payment-panel,
.solar-step[data-step-id="payment"] .solar-configurator__customer {
  background: #ffffff;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  padding: 20px;
}

.solar-step[data-step-id="payment"] .solar-step__heading {
  display: none;
}

.solar-step[data-step-id="payment"] .solar-step__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.solar-step[data-step-id="payment"] .solar-payment-content {
  display: grid;
  gap: 12px;
}

.solar-step[data-step-id="payment"] .solar-payment-grid {
  display: grid;
  gap: 12px;
}

.solar-step[data-step-id="payment"] .solar-wizard-nav {
  display: none;
}

.solar-step[data-step-id="payment"] .solar-panel-footnote--amber {
  color: #92400e;
  font-size: 0.82rem;
}

.solar-step[data-step-id="payment"] .solar-panel-footnote--blue {
  color: #1d4ed8;
  font-size: 0.82rem;
}

.solar-step[data-step-id="payment"] .solar-version-nav {
  margin-top: 4px;
}

/* Plumbing setup popup - centered modal matching price popup */
.solar-compare-modal--plumbing {
  z-index: 140;
}

.solar-plumbing-modal {
  width: min(100%, 540px);
  max-height: min(88dvh, 720px);
  padding: 32px 28px 28px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(247, 170, 43, 0.08), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #fffdfa 100%);
  box-shadow: 0 34px 80px rgba(15, 23, 42, 0.24);
}

.solar-plumbing-modal__hero {
  display: grid;
  gap: 16px;
  text-align: center;
}

.solar-plumbing-modal__hero .solar-panel-badge {
  justify-self: center;
}

.solar-plumbing-modal__options {
  padding: 6px 0 4px;
}

.solar-plumbing-modal__options .solar-choice-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.solar-plumbing-modal__options .solar-choice-card {
  min-height: 120px;
  padding: 18px 16px;
  border-radius: 20px;
}

.solar-plumbing-modal__note {
  justify-content: center;
  margin: 0;
  font-size: 0.88rem;
  text-align: center;
}

/* Compact summary shown after a popup choice */
.solar-followup-summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffaf1 0%, #ffffff 100%);
  border: 1px solid rgba(247, 170, 43, 0.22);
  color: #7c4a0b;
  font-size: 0.9rem;
  font-weight: 600;
}

.solar-followup-summary__icon {
  width: 18px;
  height: 18px;
  color: #16a34a;
  flex-shrink: 0;
}

@media (max-width: 520px) {
  .solar-compare-modal--plumbing {
    place-items: center center;
    padding: 14px;
  }

  .solar-plumbing-modal {
    width: min(100%, 100vw);
    max-height: min(88dvh, 720px);
    padding: 26px 20px 22px;
    border-radius: 24px;
  }

  .solar-plumbing-modal__options .solar-choice-grid--two {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .solar-plumbing-modal__options .solar-choice-card {
    min-height: 96px;
    padding: 14px 14px;
    border-radius: 18px;
  }
}

/* Payment step modern header + progress overlay */
.solar-payment-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.solar-payment-header__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #f59e0b;
  background: #1a2342;
  color: #f59e0b;
  font-size: 1.2rem;
  font-weight: 700;
  flex-shrink: 0;
}

.solar-payment-header__title {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.solar-payment-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.solar-payment-progress__label {
  color: #fbbf24;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.solar-payment-progress__track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  min-width: 120px;
}

.solar-payment-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
  transition: width 0.3s ease;
}

/* Remove extra margin from compare button */
.solar-version-compare {
  margin-bottom: 0 !important;
}

/* Capacity cards adjustments for standalone page */
@media (min-width: 640px) {
  .configurator-page .solar-capacity-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .configurator-page .solar-capacity-cards {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Button styles for header */
.button--small {
  padding: 8px 16px;
  font-size: 0.85rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.button--small.button--ghost {
  background: transparent;
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.button--small.button--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* ===== DESKTOP FIT OVERRIDES ===== */

/* Hide only the upper-right radio dot of .solar-choice-card (not the bottom radio row) */
.configurator-page .solar-choice-card::after,
.configurator-page .solar-choice-card.is-selected::after,
.configurator-page .solar-version-option::after,
.configurator-page .solar-version-option.is-selected::after {
  display: none !important;
}

/* Remove padding that was reserved for the upper-right dot */
.configurator-page .solar-version-card__title-row,
.configurator-page .solar-version-card--technical .solar-version-card__title-row {
  padding-right: 0 !important;
}

@media (min-width: 641px) {
  /* Wider centered step content on desktop to reduce side gaps */
  .configurator-page .solar-step > * {
    max-width: 920px;
  }

  .configurator-page .solar-step[data-step-id="payment"] > * {
    max-width: 640px;
  }

  /* Keep wizard nav glued to the visible bottom area */
  .configurator-page .solar-step__body {
    flex: 0 1 auto;
  }

  .configurator-page .solar-wizard-nav {
    flex: 0 0 auto;
    padding-top: 12px;
  }

  /* Compact the white outer card */
  .configurator-page .solar-version-card,
  .configurator-page .solar-capacity-card {
    padding: 16px;
    margin-bottom: 0;
    border-radius: 24px;
    min-height: 0;
    gap: 12px;
  }

  /* Compact step header + intro */
  .configurator-page .solar-step__heading {
    margin-bottom: 8px;
  }

  .configurator-page .solar-step__index {
    min-width: 34px;
    min-height: 34px;
    font-size: 0.88rem;
  }

  .configurator-page .solar-step__meta {
    min-height: 30px;
    padding: 0 12px;
    font-size: 0.76rem;
  }

  .configurator-page .solar-step__body {
    gap: 12px;
  }

  /* Version option cards (version / filter / mixer) */
  .configurator-page .solar-version-option {
    padding: 12px 14px;
    gap: 8px;
    border-radius: 18px;
    min-height: 0;
    align-items: center;
    text-align: center;
  }

  .configurator-page .solar-version-option__icon {
    width: 76px;
    height: 76px;
  }

  .configurator-page .solar-version-option__icon svg,
  .configurator-page .solar-version-option__icon .solar-version-card__icon-svg {
    width: 40px;
    height: 40px;
  }

  .configurator-page .solar-version-option__icon .solar-choice-card__symbol-image--filter {
    width: 56px;
    height: 56px;
  }

  .configurator-page .solar-version-option__icon .solar-choice-card__symbol-image--mixer {
    width: 64px;
    height: 64px;
  }

  .configurator-page .solar-version-option__icon .solar-choice-card__symbol-image--electricity,
  .configurator-page .solar-version-option__icon .solar-choice-card__symbol-image--no-electricity,
  .configurator-page .solar-version-option__icon .solar-choice-card__symbol-image--plumbing,
  .configurator-page .solar-version-option__icon .solar-choice-card__symbol-image--no-plumbing,
  .configurator-page .solar-version-option__icon .solar-choice-card__symbol-image--wifi,
  .configurator-page .solar-version-option__icon .solar-choice-card__symbol-image--no-wifi {
    width: 64px;
    height: 64px;
  }

  .configurator-page .solar-version-option__content {
    text-align: center;
    align-items: center;
    gap: 4px;
  }

  .configurator-page .solar-version-option__title {
    font-size: 0.98rem;
  }

  .configurator-page .solar-version-option__subtitle {
    font-size: 0.78rem;
  }

  .configurator-page .solar-version-card__chips {
    gap: 6px;
    justify-items: center;
    width: 100%;
  }

  .configurator-page .solar-version-card__chip {
    min-height: 26px;
    padding: 0 10px;
    font-size: 0.74rem;
    justify-content: center;
    width: auto;
  }

  .configurator-page .solar-version-card__chip-icon {
    width: 13px;
    height: 13px;
  }

  /* Technical decision cards (wifi / electricity / plumbing / installation) */
  .configurator-page .solar-version-card--technical {
    min-height: 0;
    padding: 14px;
    gap: 10px;
  }

  .configurator-page .solar-version-card--technical .solar-version-card__header {
    min-height: 0;
    gap: 14px;
  }

  .configurator-page .solar-version-card--technical .solar-version-card__icon {
    width: 80px;
    height: 80px;
  }

  .configurator-page .solar-version-card--technical .solar-version-card__icon-svg {
    width: 40px;
    height: 40px;
  }

  .configurator-page .solar-version-card--technical .solar-version-card__icon .solar-choice-card__symbol-image--electricity,
  .configurator-page .solar-version-card--technical .solar-version-card__icon .solar-choice-card__symbol-image--no-electricity,
  .configurator-page .solar-version-card--technical .solar-version-card__icon .solar-choice-card__symbol-image--plumbing,
  .configurator-page .solar-version-card--technical .solar-version-card__icon .solar-choice-card__symbol-image--no-plumbing,
  .configurator-page .solar-version-card--technical .solar-version-card__icon .solar-choice-card__symbol-image--wifi,
  .configurator-page .solar-version-card--technical .solar-version-card__icon .solar-choice-card__symbol-image--no-wifi {
    width: 72px;
    height: 72px;
  }

  .configurator-page .solar-version-card--technical .solar-version-card__title-row strong {
    font-size: 1rem;
  }

  .configurator-page .solar-version-card--technical .solar-version-card__subtitle {
    font-size: 0.82rem;
  }

  /* Capacity cards */
  .configurator-page .solar-capacity-card {
    padding: 14px;
  }

  .configurator-page .solar-capacity-section__title {
    font-size: 1.1rem;
  }

  .configurator-page .solar-capacity-section__subtitle {
    font-size: 0.85rem;
    margin-bottom: 12px;
  }

  .configurator-page .solar-capacity-cards {
    gap: 10px;
    margin-bottom: 12px;
  }

  .configurator-page .solar-capacity-option {
    padding: 10px;
    gap: 8px;
  }

  .configurator-page .solar-capacity-option__symbol {
    width: 78px;
    height: 78px;
  }

  .configurator-page .solar-capacity-option__title {
    font-size: 0.98rem;
  }

  .configurator-page .solar-capacity-option__subtitle {
    font-size: 0.78rem;
  }

  /* Compact installation-city field group */
  .configurator-page .solar-field-group {
    padding: 16px;
    gap: 10px;
  }

  .configurator-page .solar-field-group__header h5 {
    font-size: 1.25rem;
  }

  .configurator-page .solar-field-group__header p {
    font-size: 0.88rem;
  }

  .configurator-page .solar-location-card--modern {
    padding: 12px;
  }

  .configurator-page .solar-input-shell--location {
    min-height: 46px;
  }

  /* Compact wizard nav buttons */
  .configurator-page .solar-wizard-nav__button,
  .configurator-page .solar-version-nav__btn {
    min-width: 140px;
    min-height: 38px;
    height: 38px;
    padding: 0 18px;
  }

  /* Reduce section title sizes */
  .configurator-page .solar-version-section__title,
  .configurator-page .solar-version-header__title {
    font-size: 1.25rem;
  }

  .configurator-page .solar-version-section__subtitle {
    font-size: 0.9rem;
    margin-bottom: 12px;
  }

  .configurator-page .solar-version-header {
    margin-bottom: 8px;
  }

  .configurator-page .solar-version-header__badge {
    width: 32px;
    height: 32px;
    font-size: 0.92rem;
  }

  .configurator-page .solar-version-progress {
    margin-bottom: 8px;
  }

  .configurator-page .solar-version-compare {
    margin-top: 8px;
    padding: 10px 14px;
    font-size: 0.82rem;
    min-height: 38px;
  }

  /* Step 3 (filter) specific compact overrides */
  .configurator-page .solar-version-card--filter .solar-version-option {
    padding: 12px;
    gap: 6px;
  }

  .configurator-page .solar-version-card--filter .solar-version-card__chips {
    gap: 6px;
    margin-top: 4px;
  }

  .configurator-page .solar-version-card--filter .solar-version-compare {
    margin-top: 10px;
  }
}