/* =========================================================
   AIROBI — register.css (inscription magasin)
   Thème bleu · styles bouton/section/toast-error complétés
   + responsive mobile (480 / 420 / 360 · paysage · safe-areas)
   ========================================================= */

:root {
    --bg-start: #eef2f7; --bg-middle: #dce3ed; --bg-end: #e8ecf3;
    --surface: #ffffff;
    --primary: #1976d2; --primary-dark: #0d47a1;
    --text: #0d1b3e; --muted: #78909c;
    --border: #eceff1; --input-bg: #fafbfc;
    --shadow: rgba(15, 50, 100, 0.08);
}

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

html { min-height: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: linear-gradient(160deg, var(--bg-start) 0%, var(--bg-middle) 50%, var(--bg-end) 100%);
    background-attachment: fixed;          /* le dégradé ne saute pas au scroll iOS */
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh;
    min-height: 100dvh;                    /* vraie hauteur mobile (barre d'adresse) */
    padding: clamp(12px, 3vw, 18px);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

.login-container {
    width: min(100%, 430px);
    border-radius: 28px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 25px 60px rgba(15, 50, 100, 0.08), 0 4px 20px rgba(15, 50, 100, 0.04);
}

/* ---------- Illustration ---------- */
.illustration {
    position: relative; width: 100%; height: 220px;
    display: flex; justify-content: center; align-items: center;
    background: radial-gradient(circle at top left, rgba(255,255,255,0.72), transparent 38%),
        linear-gradient(180deg, #e8f4fd 0%, #c5e3f9 45%, #9ecff2 100%);
}
.illustration::before,
.illustration::after { content: ''; position: absolute; border-radius: 50%; opacity: 0.55; }
.illustration::before { width: 140px; height: 140px; right: -40px; top: 18px; background: rgba(255, 255, 255, 0.55); }
.illustration::after { width: 90px; height: 90px; left: 18px; bottom: -20px; background: rgba(255, 255, 255, 0.35); }

.logo-wrapper {
    width: 100px; height: 100px;
    display: flex; justify-content: center; align-items: center;
    padding: 15px; border-radius: 24px; background: var(--surface);
    box-shadow: 0 10px 30px rgba(15, 50, 100, 0.1); z-index: 1;
}
.logo-wrapper img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Formulaire ---------- */
.form-section { padding: 34px 30px 30px; }

.brand-tag {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 6px 16px; border-radius: 20px;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1565c0; font-size: 10px; font-weight: 800;
    letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 16px;
}

h1 {
    font-size: clamp(23px, 5.5vw, 28px);
    font-weight: 800; line-height: 1.1; margin-bottom: 8px; letter-spacing: -0.5px;
    color: var(--text);
}

.subtitle { color: #90a4ae; font-size: 14px; margin-bottom: 30px; font-weight: 500; line-height: 1.6; }

/* ---------- Champs ---------- */
.input-group { position: relative; margin-bottom: 16px; }
.input-group i {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: #b0bec5; font-size: 15px; pointer-events: none; transition: color 0.3s ease;
}
.input-group input {
    width: 100%;
    padding: 15px 16px 15px 44px;
    border: 2px solid var(--border); border-radius: 14px;
    background: var(--input-bg);
    font: inherit;
    font-size: 16px;          /* ⭐ 16px minimum : empêche le zoom auto iOS au focus */
    color: #37474f; outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    min-height: 52px;
}
.input-group input::placeholder { color: #b0bec5; }
.input-group input:focus {
    border-color: var(--primary); background: #ffffff;
    box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.08);
}
.input-group:focus-within i { color: var(--primary); }

/* Autofill Chrome : évite le fond jaune/bleu qui casse le design */
.input-group input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 60px var(--input-bg) inset;
    -webkit-text-fill-color: #37474f;
    transition: background-color 9999s ease-in-out 0s;
}

/* =========================================================
   ⭐ BOUTON — les DEUX classes stylées
   (.btn-login utilisé par le HTML · .btn-register gardé
   pour compat si d'autres pages l'utilisent)
   ========================================================= */
.btn-login,
.btn-register {
    width: 100%;
    min-height: 54px;
    padding: 0 18px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    font: 700 16px/1 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(13, 71, 161, 0.26);
    /* ⭐ flex : le spinner injecté par le JS sera centré */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.btn-login::after,
.btn-register::after {
    content: '';
    position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
    transition: left 0.55s ease;
}
.btn-login:hover:not(:disabled),
.btn-register:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(13, 71, 161, 0.32);
}
.btn-login:hover:not(:disabled)::after,
.btn-register:hover:not(:disabled)::after { left: 100%; }
.btn-login:active:not(:disabled),
.btn-register:active:not(:disabled) { transform: translateY(0); }

/* ⭐ état pendant le chargement (btn.disabled = true côté JS) */
.btn-login:disabled,
.btn-register:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
    box-shadow: 0 4px 18px rgba(13, 71, 161, 0.26);
}

/* =========================================================
   ⭐ SECTION "DÉJÀ UN MAGASIN" — les DEUX classes stylées
   (.register-section utilisé par le HTML · .login-link-section
   gardé pour compat)
   ========================================================= */
.register-section,
.login-link-section {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    text-align: center;
}
.register-section p,
.login-link-section p {
    color: var(--muted); font-size: 13.5px; font-weight: 500;
    margin-bottom: 10px; line-height: 1.5;
}
.register-section a,
.login-link-section a {
    color: var(--primary-dark); font-weight: 700; text-decoration: none;
    transition: color 0.2s ease; word-break: break-word;
}
.register-section a:hover,
.login-link-section a:hover { color: var(--primary); text-decoration: underline; }

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)); /* ⭐ au-dessus de la barre gesture iPhone */
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    padding: 14px 22px;
    background: linear-gradient(135deg, #0d1b3e, #1a237e);
    color: #fff; border-radius: 14px;
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13.5px; font-weight: 600;
    box-shadow: 0 12px 40px rgba(13, 27, 62, 0.32);
    opacity: 0; pointer-events: none;
    transition: transform 0.35s ease, opacity 0.35s ease;
    z-index: 1000;
    max-width: calc(100% - 32px);
    white-space: normal; text-align: center;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.toast i { color: #66bb6a; font-size: 16px; flex-shrink: 0; }

/* ⭐ Toast d'ERREUR — utilisé par showError() dans register.js */
.toast.error { background: linear-gradient(135deg, #b00020, #e91414); }
.toast.error i { color: #fff; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* ---------- Smartphones (≤ 520px) ---------- */
@media (max-width: 520px) {
    body { padding: 14px; }
    .login-container { border-radius: 24px; }
    .illustration { height: 200px; }
    .logo-wrapper { width: 92px; height: 92px; }
    .form-section { padding: 26px 22px 24px; }
    .subtitle { font-size: 13px; margin-bottom: 22px; }
    .input-group { margin-bottom: 14px; }
    .btn-login, .btn-register { min-height: 52px; font-size: 15px; }
    .toast { font-size: 12.5px; padding: 12px 16px; border-radius: 12px; }
}

/* ---------- Petits smartphones (≤ 420px) ---------- */
@media (max-width: 420px) {
    .illustration { height: 170px; }
    .logo-wrapper { width: 82px; height: 82px; }
    .form-section { padding: 22px 18px 20px; }
    .brand-tag { letter-spacing: 1.2px; font-size: 9px; }
    .register-section, .login-link-section { margin-top: 20px; padding-top: 18px; }
    .register-section p, .register-section a,
    .login-link-section p, .login-link-section a { font-size: 13px; }
}

/* ---------- Très petits smartphones (≤ 360px) ---------- */
@media (max-width: 360px) {
    body { padding: 10px; }
    .login-container { border-radius: 20px; }
    .illustration { height: 150px; }
    .logo-wrapper { width: 76px; height: 76px; }
    .form-section { padding: 18px 16px 18px; }
    .btn-login, .btn-register { min-height: 50px; font-size: 14.5px; }
    .subtitle,
    .register-section p, .register-section a,
    .login-link-section p, .login-link-section a { font-size: 12.5px; }
}

/* ---------- Téléphone en paysage (peu de hauteur) ---------- */
/* 5 champs + bouton = carte longue : on compacte tout */
@media (max-height: 620px) and (orientation: landscape) {
    body { align-items: flex-start; overflow-y: auto; }
    .illustration { height: 100px; }
    .logo-wrapper { width: 64px; height: 64px; padding: 10px; border-radius: 16px; }
    .form-section { padding: 16px 22px 18px; }
    .subtitle { margin-bottom: 14px; }
    .input-group { margin-bottom: 11px; }
    .input-group input { min-height: 46px; padding-top: 10px; padding-bottom: 10px; }
    .btn-login, .btn-register { min-height: 48px; margin-top: 4px; }
    .register-section, .login-link-section { margin-top: 14px; padding-top: 12px; }
}

/* ---------- Écrans tactiles : liens faciles à taper ---------- */
@media (hover: none) {
    .register-section a, .login-link-section a { padding: 6px 0; display: inline-block; }
}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}