/* ── Variables (design tokens du projet) ──────────────────────────────────── */
:root {
  --bg:          #f8f7fa;
  --fg:          #3d3c4f;
  --card:        #ffffff;
  --primary:     #8a79ab;
  --primary-fg:  #f8f7fa;
  --secondary:   #dfd9ec;
  --accent:      #e6a5b8;
  --accent-fg:   #4b2e36;
  --muted:       #dcd9e3;
  --muted-fg:    #6b6880;
  --border:      #cec9d9;
  --destructive: #d95c5c;
  --chart3:      #77b8a1;
  --radius:      0.5rem;
  --shadow:      1px 2px 5px 1px rgba(0, 0, 0, 0.06);
  --font:        'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
  --font-mono:   'Fira Code', 'Courier New', monospace;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html, body {
  height: 100%;
}

body {
  font-family:            var(--font);
  background-color:       var(--bg);
  color:                  var(--fg);
  min-height:             100vh;
  line-height:            1.5;
  -webkit-font-smoothing: antialiased;
}

/* Masquer les éléments Alpine avant hydratation */
[x-cloak] { display: none !important; }

/* ── En-tête ──────────────────────────────────────────────────────────────── */
.header {
  position:      sticky;
  top:           0;
  background:    var(--card);
  border-bottom: 1px solid var(--border);
  z-index:       100;
  padding:       0 16px;
}

.header-inner {
  max-width:       480px;
  margin:          0 auto;
  height:          56px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.logo {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.logo-icon {
  width:           36px;
  height:          36px;
  background:      var(--secondary);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--primary);
  font-size:       18px;
}

.logo-text {
  font-weight: 700;
  font-size:   1.0625rem;
  color:       var(--fg);
}

.header-actions {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.btn-lang {
  background:    var(--secondary);
  color:         var(--primary);
  border:        none;
  border-radius: var(--radius);
  padding:       4px 10px;
  font-size:     0.75rem;
  font-weight:   700;
  cursor:        pointer;
  font-family:   var(--font);
  letter-spacing: 0.04em;
  transition:    background 0.15s;
}

.btn-lang:hover { background: var(--muted); }

.icon-btn {
  background:    transparent;
  border:        none;
  color:         var(--muted-fg);
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  padding:       6px;
  border-radius: var(--radius);
  transition:    background 0.15s, color 0.15s;
}

.icon-btn:hover { background: var(--muted); color: var(--fg); }

/* ── Notifications (toast) ────────────────────────────────────────────────── */
.toast {
  position:      fixed;
  bottom:        24px;
  left:          50%;
  transform:     translateX(-50%);
  padding:       10px 20px;
  border-radius: var(--radius);
  font-size:     0.875rem;
  font-weight:   500;
  z-index:       999;
  max-width:     90vw;
  text-align:    center;
  box-shadow:    var(--shadow);
  white-space:   nowrap;
}

.toast-error   { background: var(--destructive); color: white; }
.toast-success { background: var(--chart3);      color: white; }

/* ── Contenu principal ────────────────────────────────────────────────────── */
.main {
  max-width: 480px;
  margin:    0 auto;
  padding:   28px 16px 80px;
}

/* ── Bouton retour ────────────────────────────────────────────────────────── */
.btn-back {
  display:     flex;
  align-items: center;
  gap:         6px;
  background:  none;
  border:      none;
  color:       var(--muted-fg);
  cursor:      pointer;
  font-family: var(--font);
  font-size:   0.875rem;
  padding:     0 0 18px 0;
  transition:  color 0.15s;
}

.btn-back:hover { color: var(--fg); }

/* ── Carte générique ──────────────────────────────────────────────────────── */
.card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: calc(var(--radius) * 2);
  padding:       24px;
  box-shadow:    var(--shadow);
  margin-bottom: 16px;
}

.card-center {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  gap:             18px;
}

/* ── Icône badge ──────────────────────────────────────────────────────────── */
.icon-badge {
  width:           64px;
  height:          64px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.icon-badge--primary { background: var(--secondary);          color: var(--primary); }
.icon-badge--accent  { background: rgba(230, 165, 184, 0.18); color: #c97b93;        }
.icon-badge--success { background: rgba(119, 184, 161, 0.18); color: var(--chart3);  }

/* ── Typographie ──────────────────────────────────────────────────────────── */
.title {
  font-size:   1.25rem;
  font-weight: 700;
  color:       var(--fg);
  line-height: 1.3;
}

.subtitle {
  font-size:   0.875rem;
  color:       var(--muted-fg);
  line-height: 1.55;
}

.email-strong {
  display:     block;
  direction:   ltr;
  margin-top:  4px;
  color:       var(--primary);
  font-weight: 600;
  word-break:  break-all;
}

/* ── Formulaires ──────────────────────────────────────────────────────────── */
.form {
  width:           100%;
  display:         flex;
  flex-direction:  column;
  gap:             12px;
}

.input {
  width:         100%;
  padding:       12px 16px;
  border:        1px solid var(--border);
  border-radius: var(--radius);
  font-family:   var(--font);
  font-size:     1rem;
  color:         var(--fg);
  background:    var(--bg);
  outline:       none;
  transition:    border-color 0.15s, box-shadow 0.15s;
}

.input:focus {
  border-color: var(--primary);
  box-shadow:   0 0 0 3px rgba(138, 121, 171, 0.12);
}

.input::placeholder { color: var(--muted-fg); }

/* Champ OTP — grands chiffres centrés */
.otp-input {
  text-align:      center;
  font-size:       1.875rem;
  font-weight:     700;
  letter-spacing:  0.5em;
  color:           var(--primary);
  font-family:     var(--font-mono);
  padding-inline-start: calc(16px + 0.5em);
}

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         12px 24px;
  border-radius:   var(--radius);
  font-family:     var(--font);
  font-size:       0.9375rem;
  font-weight:     600;
  cursor:          pointer;
  border:          none;
  transition:      opacity 0.15s, background 0.15s;
  width:           100%;
  text-decoration: none;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--primary);
  color:      var(--primary-fg);
}

.btn-primary:hover:not(:disabled) { opacity: 0.88; }

.btn-outline {
  background: transparent;
  border:     1px solid var(--border);
  color:      var(--muted-fg);
}

.btn-outline:hover:not(:disabled) { background: var(--muted); }

.btn-sm { font-size: 0.8125rem; padding: 8px 16px; }

/* ── Indicateur de chargement ─────────────────────────────────────────────── */
.spinner {
  display:       inline-block;
  width:         18px;
  height:        18px;
  border:        2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation:     spin 0.6s linear infinite;
  flex-shrink:   0;
}

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

/* ── Carte de points (dashboard) ──────────────────────────────────────────── */
.card-points {
  background:  linear-gradient(135deg, #8a79ab 0%, #6e5fa0 100%);
  color:       white;
  border:      none;
  box-shadow:  0 4px 16px rgba(138, 121, 171, 0.35);
}

.card-points .btn-primary {
  background: rgba(255, 255, 255, 0.18);
  color:      white;
  border:     1px solid rgba(255, 255, 255, 0.28);
}

.card-points .btn-primary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.28);
  opacity:    1;
}

.card-points .btn-primary:disabled {
  opacity: 0.4;
}

.points-header {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  margin-bottom:   20px;
}

.points-label {
  font-size: 0.8125rem;
  opacity:   0.75;
}

.points-name {
  font-size:   1.25rem;
  font-weight: 700;
  margin-top:  2px;
}

.points-badge {
  background:    rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  padding:       10px 16px;
  display:       flex;
  align-items:   baseline;
  gap:           5px;
  min-width:     80px;
  justify-content: center;
}

.badge--accent {
  background: var(--accent);
}

.points-number {
  font-size:   2.25rem;
  font-weight: 800;
  line-height: 1;
}

.points-unit {
  font-size:   0.875rem;
  font-weight: 500;
}

/* ── Barre de progression des points ─────────────────────────────────────── */
.progress-section {
  margin-bottom: 18px;
}

.progress-track {
  height:        8px;
  background:    rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  overflow:      hidden;
  margin-bottom: 7px;
}

.progress-fill {
  height:        100%;
  background:    var(--accent);
  border-radius: 4px;
  transition:    width 0.6s ease;
  min-width:     4px;
}

.progress-labels {
  display:         flex;
  justify-content: space-between;
  font-size:       0.75rem;
  opacity:         0.78;
}

.text-accent { color: var(--accent); font-weight: 600; }

/* ── Valeur en MAD ────────────────────────────────────────────────────────── */
.points-mad {
  display:         flex;
  justify-content: space-between;
  font-size:       0.8125rem;
  opacity:         0.82;
  margin-bottom:   18px;
}

/* ── Titre de section ─────────────────────────────────────────────────────── */
.section-title {
  font-size:      0.8125rem;
  font-weight:    600;
  color:          var(--muted-fg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom:  10px;
  margin-top:     4px;
}

/* ── État vide ────────────────────────────────────────────────────────────── */
.empty-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             12px;
  padding:         40px 16px;
  color:           var(--muted-fg);
  text-align:      center;
  font-size:       0.875rem;
}

.empty-state svg { opacity: 0.35; }

/* ── Carte vente (historique) ─────────────────────────────────────────────── */
.card-vente {
  padding:  0;
  overflow: hidden;
}

.vente-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         14px 16px;
  cursor:          pointer;
  user-select:     none;
  transition:      background 0.15s;
}

.vente-header:hover { background: var(--bg); }

.vente-meta {
  display:        flex;
  flex-direction: column;
  gap:            3px;
}

.vente-date  { font-size: 0.875rem; font-weight: 500; }
.vente-count { font-size: 0.75rem;  color: var(--muted-fg); }

.vente-right {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.vente-total {
  font-weight: 700;
  color:       var(--primary);
  font-size:   0.9375rem;
}

.vente-arrow {
  color:      var(--muted-fg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.vente-arrow.open { transform: rotate(180deg); }

.vente-detail {
  border-top: 1px solid var(--border);
  padding:    12px 16px;
  background: var(--bg);
}

.vente-ligne {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       0.8125rem;
  color:           var(--muted-fg);
  padding:         5px 0;
  border-bottom:   1px solid var(--border);
}

.vente-ligne:last-child { border-bottom: none; }

.vente-ligne-nom { font-weight: 500; color: var(--fg); }

/* ── Écran remise : solde + slider ────────────────────────────────────────── */
.redeem-balance {
  width:           100%;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       0.875rem;
  padding:         10px 14px;
  background:      var(--bg);
  border-radius:   var(--radius);
  border:          1px solid var(--border);
}

.slider-group {
  width:           100%;
  display:         flex;
  flex-direction:  column;
  gap:             10px;
}

.slider-label-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       0.875rem;
  font-weight:     500;
}

.text-primary { color: var(--primary); font-weight: 700; }

.slider {
  width:         100%;
  appearance:    none;
  height:        6px;
  border-radius: 3px;
  background:    var(--secondary);
  outline:       none;
  cursor:        pointer;
}

.slider::-webkit-slider-thumb {
  appearance:    none;
  width:         22px;
  height:        22px;
  border-radius: 50%;
  background:    var(--primary);
  cursor:        pointer;
  box-shadow:    0 2px 6px rgba(138, 121, 171, 0.45);
  transition:    transform 0.1s;
}

.slider::-webkit-slider-thumb:hover { transform: scale(1.12); }

.slider::-moz-range-thumb {
  width:         22px;
  height:        22px;
  border-radius: 50%;
  background:    var(--primary);
  border:        none;
  cursor:        pointer;
}

.slider-bounds {
  display:         flex;
  justify-content: space-between;
  font-size:       0.75rem;
  color:           var(--muted-fg);
}

/* ── Aperçu du montant de remise ──────────────────────────────────────────── */
.remise-preview {
  width:           100%;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  background:      var(--secondary);
  border-radius:   var(--radius);
  padding:         14px 18px;
}

.remise-label { font-size: 0.875rem; color: var(--muted-fg); }

.remise-montant {
  font-size:   1.625rem;
  font-weight: 800;
  color:       var(--primary);
}

.hint {
  font-size:  0.75rem;
  color:      var(--muted-fg);
  text-align: center;
  width:      100%;
}

/* ── Carte du code généré ─────────────────────────────────────────────────── */
.card-code {
  border: 2px solid var(--primary);
}

.code-box {
  display:       flex;
  align-items:   center;
  gap:           12px;
  background:    var(--secondary);
  border-radius: var(--radius);
  padding:       16px 18px;
  width:         100%;
}

.code-text {
  flex:           1;
  font-size:      1.5rem;
  font-weight:    800;
  letter-spacing: 0.14em;
  color:          var(--primary);
  font-family:    var(--font-mono);
  text-align:     center;
  direction:      ltr;
  word-break:     break-all;
}

.btn-copy {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       8px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--muted-fg);
  flex-shrink:   0;
  transition:    color 0.15s, border-color 0.15s;
}

.btn-copy:hover { color: var(--primary); border-color: var(--primary); }

.code-meta {
  width:           100%;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             8px;
}

.code-montant-block {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.code-montant-label { font-size: 0.75rem; color: var(--muted-fg); }

.code-montant-valeur {
  font-size:   1.25rem;
  font-weight: 700;
  color:       var(--primary);
}

/* ── Minuterie ────────────────────────────────────────────────────────────── */
.timer {
  display:         flex;
  align-items:     center;
  gap:             6px;
  background:      var(--bg);
  border:          1px solid var(--border);
  border-radius:   100px;
  padding:         7px 14px;
  font-size:       1rem;
  font-weight:     700;
  color:           var(--primary);
  font-variant-numeric: tabular-nums;
  font-family:     var(--font-mono);
  white-space:     nowrap;
  flex-shrink:     0;
}

.timer--urgent {
  border-color: var(--destructive);
  color:        var(--destructive);
  animation:    pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* ── Instructions ─────────────────────────────────────────────────────────── */
.instructions {
  width:         100%;
  background:    var(--bg);
  border-radius: var(--radius);
  border:        1px solid var(--border);
  padding:       14px 16px;
  text-align:    start;
}

.instructions-titre {
  font-size:     0.8125rem;
  font-weight:   600;
  margin-bottom: 10px;
  color:         var(--fg);
}

.instructions-liste {
  display:            flex;
  flex-direction:     column;
  gap:                7px;
  padding-inline-start: 20px;
}

.instructions-liste li {
  font-size:   0.8125rem;
  color:       var(--muted-fg);
  line-height: 1.5;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  .code-text        { font-size: 1.25rem; }
  .points-number    { font-size: 1.875rem; }
  .remise-montant   { font-size: 1.375rem; }
}