/* ═══════════════════════════════════════════════
   Solithium Solar Wizard — CSS
   Palette : vert solaire, anthracite, blanc cassé
   Police : Héritage du thème WordPress
═══════════════════════════════════════════════ */


:root {
  --sl-green:        #2e8b57;
  --sl-green-light:  #3cb371;
  --sl-green-pale:   #e8f5ee;
  --sl-sun:          #f5a623;
  --sl-sun-light:    #fef3dc;
  --sl-dark:         #1a2332;
  --sl-grey:         #5a6579;
  --sl-grey-light:   #edf0f4;
  --sl-border:       #d1d9e0;
  --sl-white:        #ffffff;
  --sl-red:          #d32f2f;
  --sl-shadow:       0 2px 12px rgba(0,0,0,.08);
  --sl-radius:       10px;
  --sl-radius-sm:    6px;
  --sl-transition:   .18s ease;
}

/* ── Conteneur principal ──────────────────── */
.slwiz-root {
  font-family: inherit;
  color: var(--sl-dark);
  max-width: 780px;
  margin: 0 auto;
  background: var(--sl-white);
  border-radius: var(--sl-radius);
  box-shadow: var(--sl-shadow);
  overflow: hidden;
}

[x-cloak] { display: none !important; }

/* ── En-tête ──────────────────────────────── */
.slwiz-header {
  background: var(--sl-dark);
  color: var(--sl-white);
  padding: 0;
}

.slwiz-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
}

.slwiz-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.slwiz-logo {
  font-size: 1.4rem;
  color: var(--sl-sun);
}

.slwiz-lang-toggle {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
}

.slwiz-lang-toggle button {
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.7);
  padding: .2rem .55rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: .8rem;
  transition: var(--sl-transition);
}

.slwiz-lang-toggle button.active,
.slwiz-lang-toggle button:hover {
  background: var(--sl-green);
  border-color: var(--sl-green);
  color: var(--sl-white);
}

/* ── Barre de progression ─────────────────── */
.slwiz-progress {
  background: rgba(255,255,255,.12);
  padding: .35rem 1.5rem .4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .78rem;
  color: rgba(255,255,255,.7);
}

.slwiz-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--sl-sun);
  border-radius: 2px;
  transition: width .4s ease;
}

/* ── Corps du wizard ──────────────────────── */
.slwiz-body {
  padding: 2rem 2rem 1.5rem;
  min-height: 380px;
}

/* ── Étapes (visibles/cachées via x-show) ── */
.slwiz-step h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 .6rem;
  color: var(--sl-dark);
}

.slwiz-step > p {
  color: var(--sl-grey);
  margin: 0 0 1.4rem;
  font-size: .95rem;
}

/* ── Accueil ──────────────────────────────── */
.slwiz-welcome {
  text-align: center;
  padding: 1.5rem 0 .5rem;
}

.slwiz-welcome-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.slwiz-welcome h1 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 .8rem;
  color: var(--sl-dark);
}

.slwiz-welcome p {
  color: var(--sl-grey);
  margin: 0 0 2rem;
  font-size: 1rem;
}

/* ── Cartes de choix ─────────────────────── */
.slwiz-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.8rem;
}

.slwiz-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
  padding: 1.3rem 1rem;
  border: 2px solid var(--sl-border);
  border-radius: var(--sl-radius);
  background: var(--sl-white);
  cursor: pointer;
  transition: var(--sl-transition);
}

.slwiz-card:hover {
  border-color: var(--sl-green-light);
  background: var(--sl-green-pale);
}

.slwiz-card.selected {
  border-color: var(--sl-green);
  background: var(--sl-green-pale);
  box-shadow: 0 0 0 3px rgba(46,139,87,.18);
}

.slwiz-card-icon { font-size: 1.8rem; }

.slwiz-card strong {
  font-size: .95rem;
  color: var(--sl-dark);
  font-weight: 600;
}

.slwiz-card small {
  font-size: .8rem;
  color: var(--sl-grey);
  line-height: 1.4;
}

/* ── Champs de formulaire ─────────────────── */
.slwiz-field {
  margin-bottom: 1.1rem;
}

.slwiz-field > label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: .35rem;
  color: var(--sl-dark);
}

.slwiz-input,
.slwiz-select,
.slwiz-textarea {
  width: 100%;
  padding: .55rem .8rem;
  border: 1.5px solid var(--sl-border);
  border-radius: var(--sl-radius-sm);
  font-size: .95rem;
  color: var(--sl-dark);
  background: var(--sl-white);
  transition: border-color var(--sl-transition);
  box-sizing: border-box;
}

.slwiz-input:focus,
.slwiz-select:focus,
.slwiz-textarea:focus {
  outline: none;
  border-color: var(--sl-green);
  box-shadow: 0 0 0 3px rgba(46,139,87,.12);
}

.slwiz-input-sm {
  width: auto;
  min-width: 80px;
}

.slwiz-inline-fields {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.slwiz-inline-fields .slwiz-field {
  flex: 1;
  min-width: 120px;
}

.slwiz-hint {
  font-size: .82rem;
  color: var(--sl-grey);
  margin-top: .35rem;
}

/* ── Mois ─────────────────────────────────── */
.slwiz-months-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .4rem;
}

.slwiz-month-btn {
  padding: .35rem .75rem;
  border: 1.5px solid var(--sl-border);
  border-radius: 20px;
  background: var(--sl-white);
  font-size: .85rem;
  cursor: pointer;
  transition: var(--sl-transition);
}

.slwiz-month-btn.selected {
  background: var(--sl-green);
  border-color: var(--sl-green);
  color: var(--sl-white);
}

/* ── Slider range ─────────────────────────── */
.slwiz-range-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.slwiz-range {
  flex: 1;
  accent-color: var(--sl-green);
  cursor: pointer;
}

.slwiz-range-val {
  min-width: 60px;
  text-align: right;
  font-weight: 600;
  color: var(--sl-green);
}

/* ── Groupes d'appareils ──────────────────── */
.slwiz-appliances-list {
  margin-bottom: 1rem;
}

.slwiz-appliance-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem;
  border: 1px solid var(--sl-grey-light);
  border-radius: var(--sl-radius-sm);
  margin-bottom: .5rem;
  flex-wrap: wrap;
  background: var(--sl-grey-light);
}

.slwiz-appliance-row .slwiz-input:first-child {
  flex: 2;
  min-width: 120px;
}

.slwiz-appliance-fields {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.slwiz-appliance-daily {
  font-size: .82rem;
  color: var(--sl-green);
  font-weight: 600;
  white-space: nowrap;
}

.slwiz-btn-remove {
  background: transparent;
  border: none;
  color: var(--sl-grey);
  cursor: pointer;
  font-size: 1rem;
  padding: .2rem .4rem;
  border-radius: 4px;
  transition: var(--sl-transition);
}

.slwiz-btn-remove:hover {
  background: #fdecea;
  color: var(--sl-red);
}

/* ── Ajout rapide ─────────────────────────── */
.slwiz-quick-add {
  margin: .8rem 0 1rem;
}

.slwiz-quick-add label {
  font-size: .82rem;
  color: var(--sl-grey);
  display: block;
  margin-bottom: .4rem;
}

.slwiz-quick-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.slwiz-btn-chip {
  padding: .25rem .65rem;
  border: 1px solid var(--sl-green-light);
  border-radius: 16px;
  background: var(--sl-green-pale);
  color: var(--sl-green);
  font-size: .8rem;
  cursor: pointer;
  transition: var(--sl-transition);
}

.slwiz-btn-chip:hover {
  background: var(--sl-green);
  color: var(--sl-white);
}

/* ── Total journalier ─────────────────────── */
.slwiz-total-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--sl-sun-light);
  border: 1px solid #f5e0b0;
  border-radius: var(--sl-radius-sm);
  padding: .65rem 1rem;
  margin: 1rem 0;
  font-size: .9rem;
}

.slwiz-total-bar strong {
  color: var(--sl-sun);
  font-size: 1rem;
}

/* ── Sélecteur d'autonomie ────────────────── */
.slwiz-autonomy-buttons {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.slwiz-day-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .8rem 1.2rem;
  border: 2px solid var(--sl-border);
  border-radius: var(--sl-radius);
  background: var(--sl-white);
  cursor: pointer;
  transition: var(--sl-transition);
  min-width: 70px;
}

.slwiz-day-btn strong { font-size: 1.5rem; color: var(--sl-dark); }
.slwiz-day-btn small  { font-size: .75rem; color: var(--sl-grey); }

.slwiz-day-btn.selected {
  border-color: var(--sl-green);
  background: var(--sl-green-pale);
}

/* ── Cases à cocher ──────────────────────── */
.slwiz-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.slwiz-checkbox {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  cursor: pointer;
  padding: .35rem .65rem;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-sm);
  transition: var(--sl-transition);
}

.slwiz-checkbox:hover,
.slwiz-checkbox:has(input:checked) {
  background: var(--sl-green-pale);
  border-color: var(--sl-green);
}

/* ── Groupes de sections ──────────────────── */
.slwiz-group {
  background: var(--sl-grey-light);
  border-radius: var(--sl-radius);
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}

.slwiz-group h3 {
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 .8rem;
  color: var(--sl-dark);
}

/* ── Chargement ───────────────────────────── */
.slwiz-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  gap: 1.2rem;
  color: var(--sl-grey);
}

.slwiz-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid var(--sl-grey-light);
  border-top-color: var(--sl-green);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

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

/* ── Teaser ───────────────────────────────── */
.slwiz-teaser h2 {
  text-align: center;
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
}

.slwiz-teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .9rem;
  margin-bottom: 1.8rem;
}

.slwiz-teaser-card {
  background: var(--sl-green-pale);
  border: 1px solid #b2d8c4;
  border-radius: var(--sl-radius);
  padding: 1rem;
  text-align: center;
}

.slwiz-teaser-icon { font-size: 1.6rem; margin-bottom: .4rem; }
.slwiz-teaser-label { font-size: .78rem; color: var(--sl-grey); }
.slwiz-teaser-value { font-size: 1.1rem; font-weight: 700; color: var(--sl-green); margin-top: .25rem; }

/* ── Barrière d'inscription ───────────────── */
.slwiz-register-gate {
  border: 2px dashed var(--sl-green-light);
  border-radius: var(--sl-radius);
  padding: 1.5rem;
  background: var(--sl-green-pale);
}

.slwiz-gate-message {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: 1.2rem;
}

.slwiz-gate-message span { font-size: 1.5rem; }
.slwiz-gate-message p { margin: 0; color: var(--sl-grey); font-size: .95rem; line-height: 1.5; }

.slwiz-form { display: flex; flex-direction: column; gap: .1rem; }
.slwiz-form .slwiz-field > small { font-size: .78rem; color: var(--sl-grey); }
.slwiz-privacy { font-size: .78rem; color: var(--sl-grey); margin: .4rem 0 .8rem; }

/* ── Solutions ────────────────────────────── */
.slwiz-solutions { margin-bottom: 1.5rem; }

.slwiz-solution-group {
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  padding: 1rem 1.2rem;
  margin-bottom: .9rem;
  background: var(--sl-white);
}

.slwiz-solution-group h3 {
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 .7rem;
  color: var(--sl-dark);
}

.slwiz-select-product {
  background: var(--sl-grey-light);
  font-weight: 500;
}

/* ── Spécifications produit ───────────────── */
.slwiz-product-specs {
  margin-top: .8rem;
  background: var(--sl-grey-light);
  border-radius: var(--sl-radius-sm);
  padding: .8rem 1rem;
}

.slwiz-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .2rem .5rem;
  margin: 0;
  font-size: .82rem;
}

.slwiz-specs dt { color: var(--sl-grey); }
.slwiz-specs dd { margin: 0; font-weight: 600; color: var(--sl-dark); }

.slwiz-spec-note {
  margin: .6rem 0 0;
  font-size: .82rem;
  color: var(--sl-grey);
}

/* ── Total du panier ──────────────────────── */
.slwiz-cart-total {
  background: var(--sl-dark);
  color: var(--sl-white);
  border-radius: var(--sl-radius);
  padding: 1.2rem 1.5rem;
  margin-top: 1rem;
}

.slwiz-cart-lines {
  border-bottom: 1px solid rgba(255,255,255,.15);
  margin-bottom: .8rem;
  padding-bottom: .8rem;
}

.slwiz-cart-line {
  display: flex;
  justify-content: space-between;
  font-size: .88rem;
  color: rgba(255,255,255,.75);
  padding: .25rem 0;
}

.slwiz-cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.slwiz-cart-total-amount {
  font-size: 1.4rem;
  color: var(--sl-sun);
}

.slwiz-cart-success {
  background: var(--sl-green-pale);
  color: var(--sl-green);
  border-radius: var(--sl-radius-sm);
  padding: .7rem 1rem;
  font-size: .9rem;
  margin-bottom: .8rem;
}

.slwiz-cart-success a {
  color: var(--sl-green);
  font-weight: 700;
}

/* ── Navigation ───────────────────────────── */
.slwiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sl-grey-light);
}

/* ── Boutons ──────────────────────────────── */
.slwiz-btn-primary {
  background: var(--sl-green);
  color: var(--sl-white);
  border: none;
  border-radius: var(--sl-radius-sm);
  padding: .65rem 1.4rem;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--sl-transition);
}

.slwiz-btn-primary:hover:not(:disabled) {
  background: var(--sl-green-light);
}

.slwiz-btn-primary:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.slwiz-btn-primary.slwiz-btn-large {
  padding: .85rem 2rem;
  font-size: 1rem;
  width: 100%;
  margin-top: .5rem;
}

.slwiz-btn-secondary {
  background: transparent;
  color: var(--sl-grey);
  border: 1.5px solid var(--sl-border);
  border-radius: var(--sl-radius-sm);
  padding: .65rem 1.2rem;
  font-size: .9rem;
  cursor: pointer;
  transition: var(--sl-transition);
}

.slwiz-btn-secondary:hover {
  background: var(--sl-grey-light);
  border-color: var(--sl-grey);
}

/* ── Erreur ───────────────────────────────── */
.slwiz-error {
  background: #fdecea;
  color: var(--sl-red);
  border: 1px solid #f5c6cb;
  border-radius: var(--sl-radius-sm);
  padding: .6rem .9rem;
  font-size: .88rem;
  margin: .6rem 0;
}

/* ── Responsive ──────────────────────────── */
@media (max-width: 520px) {
  .slwiz-body { padding: 1.2rem 1rem 1rem; }
  .slwiz-cards { grid-template-columns: 1fr 1fr; }
  .slwiz-teaser-grid { grid-template-columns: 1fr 1fr; }
  .slwiz-specs { grid-template-columns: 1fr; }
  .slwiz-appliance-row { flex-direction: column; align-items: flex-start; }
  .slwiz-appliance-row .slwiz-input:first-child { width: 100%; }
  .slwiz-autonomy-buttons { gap: .5rem; }
  .slwiz-day-btn { min-width: 56px; padding: .6rem .8rem; }
}

/* ═══════════════════════════════════════════════
   ACCESSOIRES (étape 11)
═══════════════════════════════════════════════ */
.slwiz-accessories-group {
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  padding: 1rem 1.2rem;
  margin-bottom: .9rem;
  background: var(--sl-white);
}

.slwiz-accessories-group h3 {
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 .35rem;
  color: var(--sl-dark);
}

.slwiz-accessories-desc {
  font-size: .83rem;
  color: var(--sl-grey);
  margin: 0 0 .9rem;
}

.slwiz-accessories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .65rem;
}

.slwiz-acc-card {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .7rem .85rem;
  border: 1.5px solid var(--sl-border);
  border-radius: var(--sl-radius-sm);
  background: var(--sl-grey-light);
  cursor: pointer;
  transition: var(--sl-transition);
}

.slwiz-acc-card:hover {
  border-color: var(--sl-green-light);
  background: var(--sl-green-pale);
}

.slwiz-acc-card.selected {
  border-color: var(--sl-green);
  background: var(--sl-green-pale);
  box-shadow: 0 0 0 2px rgba(46,139,87,.15);
}

.slwiz-acc-card input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--sl-green);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.slwiz-acc-card-body {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  flex: 1;
}

.slwiz-acc-name {
  font-size: .88rem;
  font-weight: 600;
  color: var(--sl-dark);
  line-height: 1.3;
}

.slwiz-acc-price {
  font-size: .82rem;
  color: var(--sl-green);
  font-weight: 700;
}

/* ── Barre sous-total (entre solutions et étape 12) ── */
.slwiz-subtotal-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--sl-dark);
  color: var(--sl-white);
  border-radius: var(--sl-radius-sm);
  padding: .8rem 1.2rem;
  margin: 1rem 0 .5rem;
  font-size: .9rem;
}

.slwiz-subtotal-amount {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--sl-sun);
}

/* ═══════════════════════════════════════════════
   SERVICES & LIVRAISON (étape 12)
═══════════════════════════════════════════════ */
.slwiz-services-section {
  margin-bottom: 1.4rem;
}

.slwiz-services-section h3 {
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 .75rem;
  color: var(--sl-dark);
}

/* Cartes de service (installer / delivery) — version compacte */
.slwiz-cards-sm {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.slwiz-cards-sm .slwiz-card {
  padding: .9rem .75rem;
}

.slwiz-cards-sm .slwiz-card-icon {
  font-size: 1.4rem;
}

/* Grande case à cocher (callback) */
.slwiz-checkbox-large {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  font-size: .95rem;
  padding: .75rem 1rem;
  border: 1.5px solid var(--sl-border);
  border-radius: var(--sl-radius-sm);
  background: var(--sl-grey-light);
  transition: var(--sl-transition);
  user-select: none;
}

.slwiz-checkbox-large:hover,
.slwiz-checkbox-large:has(input:checked) {
  border-color: var(--sl-green);
  background: var(--sl-green-pale);
}

.slwiz-checkbox-large input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--sl-green);
  flex-shrink: 0;
}

/* Récapitulatif commande */
.slwiz-order-summary {
  background: var(--sl-grey-light);
  border-radius: var(--sl-radius);
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}

.slwiz-order-summary h3 {
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 .75rem;
  color: var(--sl-dark);
}

.slwiz-summary-lines {
  border-bottom: 1px solid var(--sl-border);
  padding-bottom: .6rem;
  margin-bottom: .6rem;
}

.slwiz-summary-line {
  display: flex;
  justify-content: space-between;
  font-size: .86rem;
  color: var(--sl-grey);
  padding: .2rem 0;
}

.slwiz-summary-line strong {
  color: var(--sl-dark);
}

.slwiz-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: .95rem;
}

.slwiz-summary-total-amount {
  font-size: 1.3rem;
  color: var(--sl-sun);
}

/* Note de confirmation */
.slwiz-confirm-note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .82rem;
  color: var(--sl-grey);
  margin: .5rem 0 1rem;
  padding: .6rem .8rem;
  background: var(--sl-sun-light);
  border-radius: var(--sl-radius-sm);
}

.slwiz-confirm-note span { font-size: 1rem; flex-shrink: 0; }

/* Succès de la soumission */
.slwiz-quote-success {
  background: var(--sl-green-pale);
  border: 1px solid #b2d8c4;
  border-radius: var(--sl-radius);
  padding: 1.5rem;
  text-align: center;
}

.slwiz-quote-success .slwiz-success-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: .8rem;
}

.slwiz-quote-success p {
  color: var(--sl-green);
  font-size: 1rem;
  margin: 0;
  font-weight: 600;
}

@media (max-width: 520px) {
  .slwiz-accessories-grid { grid-template-columns: 1fr; }
  .slwiz-cards-sm { grid-template-columns: 1fr 1fr; }
}