/* ========================================================================
   Etxea — Styles Système de Paiement
   assets/css/payment.css
   ======================================================================== */

/* ─── Dévis dynamique ────────────────────────────────────────────────────── */
.resa-devis {
  background:   var(--beige);
  border-left:  4px solid var(--rouge);
  padding:      24px;
  margin-top:   24px;
  border-radius: var(--rayon);
}

.devis-header {
  display:       flex;
  align-items:   center;
  gap:           8px;
  font-weight:   600;
  margin-bottom: 16px;
  font-size:     0.9rem;
  letter-spacing: 0.05em;
}

.devis-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         7px 0;
  font-size:       0.85rem;
  border-bottom:   1px solid rgba(0,0,0,0.06);
}

.devis-row span:first-child { color: #666; }
.devis-row span:last-child,
.devis-row strong { font-weight: 600; }

.devis-total {
  font-size:   0.95rem;
  font-weight: 700;
  padding:     10px 0;
  margin-top:  4px;
}

.devis-total span:last-child { color: var(--noir); font-size: 1.1rem; }

.devis-acompte {
  background:    rgba(192,57,43,0.06);
  margin:        0 -8px;
  padding:       10px 8px;
  border-radius: var(--rayon);
  border:        none;
}

.devis-acompte span:first-child { color: var(--rouge); font-weight: 600; }
.devis-acompte span:last-child  { color: var(--rouge); font-weight: 700; font-size: 1.1rem; }

.devis-note {
  font-size:  0.72rem;
  color:      #888;
  margin-top: 12px;
  font-style: italic;
  text-align: center;
}

/* ─── Indicateur d'étapes ────────────────────────────────────────────────── */
.step-indicator {
  display:       flex;
  align-items:   center;
  gap:           0;
  margin-bottom: 28px;
}

.step-dot {
  width:           32px;
  height:          32px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.8rem;
  font-weight:     700;
  flex-shrink:     0;
  background:      var(--beige);
  color:           #aaa;
  border:          2px solid var(--beige-fonce);
  transition:      all var(--transition);
}

.step-dot--active {
  background: var(--rouge);
  color:      var(--blanc);
  border-color: var(--rouge);
  box-shadow: 0 0 0 4px rgba(192,57,43,0.15);
}

.step-dot--done {
  background:  var(--vert);
  color:       var(--blanc);
  border-color: var(--vert);
}

.step-line {
  flex:       1;
  height:     2px;
  background: var(--beige-fonce);
}

.step-line--done { background: var(--vert); }

.step-title {
  font-family:   var(--font-titre);
  font-size:     1.4rem;
  margin-bottom: 8px;
}

.step-subtitle {
  font-size:     0.85rem;
  color:         #666;
  margin-bottom: 24px;
}

/* ─── Méthodes de paiement ───────────────────────────────────────────────── */
.payment-methods {
  display:       flex;
  flex-direction: column;
  gap:           12px;
  margin-bottom: 24px;
}

.pm-btn {
  width:        100%;
  display:      flex;
  align-items:  center;
  gap:          16px;
  padding:      18px 20px;
  background:   var(--blanc);
  border:       2px solid var(--beige-fonce);
  border-radius: var(--rayon);
  cursor:       pointer;
  text-align:   left;
  transition:   all var(--transition);
  font-family:  var(--font-body);
  position:     relative;
}

.pm-btn:hover {
  border-color: var(--rouge);
  background:   rgba(192,57,43,0.03);
  transform:    translateX(4px);
}

.pm-icon {
  font-size:  1.6rem;
  flex-shrink: 0;
  width:       40px;
  text-align:  center;
}

.pm-info {
  flex:       1;
  text-align: left;
}

.pm-info strong {
  display:     block;
  font-size:   0.9rem;
  font-weight: 600;
  color:       var(--noir);
  margin-bottom: 2px;
}

.pm-info span { font-size: 0.78rem; color: #888; }

.pm-badge {
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background:     var(--rouge);
  color:          var(--blanc);
  padding:        3px 10px;
  border-radius:  20px;
  flex-shrink:    0;
}

/* ─── Stripe card element ────────────────────────────────────────────────── */
.stripe-summary {
  background:    var(--beige);
  border-left:   3px solid var(--rouge);
  padding:       16px 20px;
  border-radius: var(--rayon);
  font-size:     0.9rem;
  line-height:   1.7;
  margin-bottom: 8px;
}

.stripe-card-element {
  padding:        14px 16px;
  border:         1px solid var(--beige-fonce);
  border-radius:  var(--rayon);
  background:     var(--blanc);
  transition:     border-color var(--transition);
  min-height:     44px;
}

.stripe-card-element.StripeElement--focus { border-color: var(--rouge); }

.stripe-errors {
  color:       var(--rouge);
  font-size:   0.82rem;
  margin-top:  8px;
  min-height:  20px;
  font-style:  italic;
}

.stripe-logos {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  margin-top:      16px;
  opacity:         0.6;
}

/* ─── Virement bancaire ──────────────────────────────────────────────────── */
.virement-card {
  background:    var(--blanc);
  border:        1px solid var(--beige-fonce);
  border-top:    4px solid var(--vert);
  border-radius: var(--rayon);
  overflow:      hidden;
  margin-bottom: 20px;
}

.virement-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         12px 20px;
  font-size:       0.88rem;
  border-bottom:   1px solid var(--beige);
  gap:             12px;
}

.virement-row span { color: #666; flex-shrink: 0; }
.virement-row strong { font-weight: 600; text-align: right; word-break: break-all; }

.virement-row--highlight {
  background: rgba(45,80,22,0.06);
}

.virement-row--highlight strong { color: var(--vert); font-size: 1.05rem; }

.virement-row--ref {
  background: rgba(192,57,43,0.04);
}

.virement-row--ref strong { color: var(--rouge); font-family: monospace; font-size: 1rem; }

.virement-copy-group {
  display:     flex;
  align-items: center;
  gap:         8px;
  justify-content: flex-end;
}

.btn-copy {
  background:   none;
  border:       1px solid var(--beige-fonce);
  border-radius: var(--rayon);
  padding:      4px 8px;
  cursor:       pointer;
  font-size:    0.8rem;
  transition:   all var(--transition);
  flex-shrink:  0;
}

.btn-copy:hover    { background: var(--rouge); border-color: var(--rouge); }
.btn-copy.copied   { background: var(--vert); border-color: var(--vert); }

.virement-notice {
  background:    rgba(255, 193, 7, 0.1);
  border-left:   3px solid #F59E0B;
  padding:       14px 16px;
  border-radius: var(--rayon);
  margin-bottom: 20px;
}

.virement-notice p { font-size: 0.82rem; line-height: 1.6; color: #666; }

/* ─── Espèces ────────────────────────────────────────────────────────────── */
.especes-card {
  background:    var(--beige);
  border-radius: var(--rayon);
  padding:       32px 24px;
  text-align:    center;
  margin-bottom: 20px;
}

.especes-icon { font-size: 3rem; margin-bottom: 12px; }

.especes-card p {
  font-size:     0.9rem;
  color:         #555;
  margin-bottom: 20px;
  line-height:   1.6;
}

.especes-montant {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  background:      var(--blanc);
  padding:         14px 20px;
  border-radius:   var(--rayon);
  margin-bottom:   12px;
}

.especes-montant span   { font-size: 0.85rem; color: #666; }
.especes-montant strong { font-size: 1.3rem; color: var(--rouge); font-weight: 700; }

.especes-note {
  font-size:  0.75rem;
  color:      #888;
  font-style: italic;
}

/* ─── Bouton retour ──────────────────────────────────────────────────────── */
.btn-retour {
  display:        block;
  width:          100%;
  margin-top:     12px;
  padding:        12px;
  background:     none;
  border:         1px solid var(--beige-fonce);
  border-radius:  var(--rayon);
  cursor:         pointer;
  font-family:    var(--font-body);
  font-size:      0.8rem;
  font-weight:    600;
  color:          #888;
  letter-spacing: 0.08em;
  transition:     all var(--transition);
}

.btn-retour:hover {
  border-color: var(--rouge);
  color:        var(--rouge);
}

/* ─── Confirmation finale ────────────────────────────────────────────────── */
.confirmation-card {
  text-align:    center;
  padding:       40px 24px;
  background:    var(--beige);
  border-radius: var(--rayon);
}

.confirm-icon {
  width:           72px;
  height:          72px;
  border-radius:   50%;
  background:      var(--vert);
  color:           var(--blanc);
  font-size:       2rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 20px;
  animation:       etxeaPopIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes etxeaPopIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.confirmation-card h3 {
  font-family:   var(--font-titre);
  font-size:     1.6rem;
  margin-bottom: 12px;
  color:         var(--noir);
}

.confirmation-card p {
  font-size:     0.9rem;
  color:         #666;
  line-height:   1.7;
  max-width:     380px;
  margin:        0 auto;
}

.confirm-details {
  background:    var(--blanc);
  border-radius: var(--rayon);
  padding:       16px 20px;
  margin-top:    20px;
  font-size:     0.85rem;
  text-align:    left;
  line-height:   1.8;
  color:         #555;
}