/* ─────────────────────────────────────────
   COINMALIN — login.css  (Mobile-First)
   ───────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap');

:root {
  --green-deep:    #0D3D2B;
  --green-primary: #1A6B46;
  --green-mid:     #2E8B57;
  --green-light:   #4DB87A;
  --green-pale:    #EAF5EE;
  --green-50:      #F2FAF5;
  --white:         #FFFFFF;
  --cream:         #F7F4EE;
  --gold:          #C8A855;
  --red:           #E53E3E;
  --text-dark:     #0A1F15;
  --text-body:     #2C4A38;
  --text-muted:    #6B8F7A;
  --text-light:    #A0BFB0;
  --border:        rgba(26,107,70,0.13);
  --border-focus:  rgba(46,139,87,0.55);
  --shadow-sm:     0 2px 12px rgba(13,61,43,0.07);
  --shadow-md:     0 8px 32px rgba(13,61,43,0.11);
  --shadow-lg:     0 24px 64px rgba(13,61,43,0.15);
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --font-d:'DM Serif Display', Georgia, serif;
  --font-b:'Plus Jakarta Sans', sans-serif;
  --t: 0.28s cubic-bezier(0.4,0,0.2,1);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-b);
  color:var(--text-body);
  background:var(--green-50);
  min-height:100%;
  min-height: -webkit-fill-available;
  -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input,select { font-family:inherit; }
.hidden { display:none !important; }

/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
.layout {
  display:flex;
  min-height:100vh;
  min-height: -webkit-fill-available;
}

/* ═══════════════════════════════════════
   PANEL GAUCHE — desktop uniquement
═══════════════════════════════════════ */
.panel { display:none; }

@media (min-width:960px) {
  .panel {
    display:flex;
    position:relative;
    width:44%;
    flex-shrink:0;
    overflow:hidden;
  }
  .panel__bg {
    position:absolute; inset:0; z-index:0;
  }
  .panel__bg img {
    width:100%; height:100%; object-fit:cover;
  }
  .panel__bg::after {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(
      to top,
      rgba(4,16,10,.62) 0%,
      rgba(4,16,10,.18) 50%,
      rgba(4,16,10,0) 80%
    );
  }
  .panel__inner {
    position:relative; z-index:2;
    display:flex; flex-direction:column; justify-content:space-between;
    padding:48px 52px;
    width:100%;
    animation:fadeLeft .8s ease both;
  }
  @keyframes fadeLeft {
    from { opacity:0; transform:translateX(-20px); }
    to   { opacity:1; transform:translateX(0); }
  }
  .panel__logo {
    font-family:var(--font-d); font-size:1.8rem;
    color:var(--white);
  }
  .panel__logo span { color:var(--green-light); }
  .panel__title {
    font-family:var(--font-d);
    font-size:clamp(2rem,3vw,2.8rem);
    font-weight:400; color:var(--white);
    line-height:1.12; letter-spacing:-.025em;
    margin-bottom:16px;
  }
  .panel__title em { font-style:italic; color:var(--green-light); }
  .panel__desc {
    font-size:15px; line-height:1.8;
    color:rgba(255,255,255,.62); margin-bottom:36px;
  }
  .panel__stats {
    display:flex; gap:28px;
  }
  .panel__stat { display:flex; flex-direction:column; gap:3px; }
  .panel__stat strong {
    font-family:var(--font-d); font-size:1.6rem;
    color:var(--white); font-weight:400;
  }
  .panel__stat span {
    font-size:11px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:rgba(255,255,255,.45);
  }
  .panel__testimonial {
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--r-lg); padding:24px 28px;
    backdrop-filter:blur(8px);
  }
  .panel__testimonial-quote {
    font-size:14px; line-height:1.75; font-style:italic;
    color:rgba(255,255,255,.78); margin-bottom:18px;
    position:relative; padding-left:18px;
  }
  .panel__testimonial-quote::before {
    content:'"'; position:absolute; left:0; top:-6px;
    font-family:var(--font-d); font-size:2rem;
    color:var(--green-light); opacity:.6; line-height:1;
  }
  .panel__testimonial-author {
    display:flex; align-items:center; gap:12px;
  }
  .panel__avatar {
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; color:var(--white); flex-shrink:0;
  }
  .panel__testimonial-author div strong {
    display:block; font-size:13px; font-weight:600; color:var(--white);
  }
  .panel__testimonial-author div span {
    font-size:12px; color:rgba(255,255,255,.45);
  }
}

/* ═══════════════════════════════════════
   MAIN (formulaire)
═══════════════════════════════════════ */
.main {
  flex:1;
  display:flex; flex-direction:column;
  background:var(--white);
  min-height:100vh;
  min-height:-webkit-fill-available;
  overflow-y:auto;
}

/* Top bar mobile */
.main__topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);
}
.main__back {
  width:40px; height:40px; border-radius:50%;
  border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); transition:all var(--t);
}
.main__back:hover { border-color:var(--border-focus); color:var(--green-deep); }
.main__logo {
  font-family:var(--font-d); font-size:1.45rem;
  color:var(--green-deep);
}
.main__logo span { color:var(--green-primary); }

@media (min-width:960px) {
  .main__topbar { display:none; }
}

/* Inner scrollable area */
.main__inner {
  flex:1;
  padding:32px 24px 24px;
  max-width:480px;
  width:100%;
  margin:0 auto;
  animation:fadeUp .5s ease both;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

@media (min-width:960px) {
  .main__inner {
    padding:52px 48px 32px;
    display:flex; flex-direction:column; justify-content:center;
    max-width:520px;
  }
}

.main__footer {
  display:flex; align-items:center; justify-content:center;
  gap:10px; padding:20px;
  font-size:12px; color:var(--text-light);
  border-top:1px solid var(--border);
}
.main__footer a { color:var(--text-muted); transition:color var(--t); }
.main__footer a:hover { color:var(--green-primary); }

/* ═══════════════════════════════════════
   AUTH TABS
═══════════════════════════════════════ */
.auth-tabs {
  display:flex;
  background:var(--green-50);
  border-radius:50px;
  padding:4px;
  margin-bottom:28px;
}
.auth-tab {
  flex:1; padding:12px;
  border-radius:50px;
  font-size:14px; font-weight:500;
  color:var(--text-muted);
  transition:all var(--t);
}
.auth-tab--active {
  background:var(--white);
  color:var(--green-deep);
  font-weight:600;
  box-shadow:var(--shadow-sm);
}

/* ═══════════════════════════════════════
   FORM HEAD
═══════════════════════════════════════ */
.form-head { margin-bottom:24px; }
.form-head__title {
  font-family:var(--font-d);
  font-size:clamp(1.7rem,5vw,2.2rem);
  font-weight:400; color:var(--text-dark);
  margin-bottom:6px; line-height:1.2;
}
.form-head__title em { font-style:normal; }
.form-head__sub {
  font-size:14px; color:var(--text-muted); font-weight:400;
}

/* ═══════════════════════════════════════
   METHOD TOGGLE
═══════════════════════════════════════ */
.method-toggle {
  display:flex; gap:8px; margin-bottom:20px;
}
.method-btn {
  display:flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:50px;
  border:1.5px solid var(--border);
  font-size:13px; font-weight:500; color:var(--text-muted);
  transition:all var(--t); background:var(--white);
}
.method-btn:hover { border-color:var(--border-focus); color:var(--text-body); }
.method-btn--active {
  background:var(--green-pale);
  border-color:var(--green-primary);
  color:var(--green-deep);
  font-weight:600;
}

/* ═══════════════════════════════════════
   FIELDS
═══════════════════════════════════════ */
form { display:flex; flex-direction:column; gap:18px; }

.field-row {
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
@media (max-width:400px) {
  .field-row { grid-template-columns:1fr; }
}

.field-group { display:flex; flex-direction:column; gap:7px; }

.field-label {
  font-size:12px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-muted);
}
.field-label-row {
  display:flex; align-items:center; justify-content:space-between;
}
.field-forgot {
  font-size:12px; font-weight:600;
  color:var(--green-primary); transition:color var(--t);
}
.field-forgot:hover { color:var(--green-deep); }

/* Input wrap */
.field-input-wrap {
  display:flex; align-items:center;
  background:var(--green-50);
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color var(--t), box-shadow var(--t), background var(--t);
  min-height:52px;
}
.field-input-wrap:focus-within {
  border-color:var(--green-mid);
  box-shadow:0 0 0 3.5px rgba(46,139,87,.12);
  background:var(--white);
}
.field-input-wrap.error {
  border-color:var(--red);
  box-shadow:0 0 0 3.5px rgba(229,62,62,.1);
}

/* Prefix (+237) */
.field-prefix {
  display:flex; align-items:center; gap:6px;
  padding:0 12px 0 14px;
  font-size:14px; font-weight:600; color:var(--text-body);
  border-right:1.5px solid var(--border);
  white-space:nowrap; flex-shrink:0;
  background:var(--white);
  height:100%;
}
.field-flag { width:18px; height:auto; border-radius:2px; }

/* Icon left */
.field-icon {
  padding:0 12px 0 14px;
  color:var(--text-light); flex-shrink:0;
  display:flex; align-items:center;
}

/* Input */
.field-input {
  flex:1; border:none; outline:none; background:transparent;
  font-size:15px; font-weight:400; color:var(--text-dark);
  padding:14px 14px 14px 12px;
  min-width:0;
}
.field-input::placeholder { color:var(--text-light); font-weight:400; }

/* Eye button */
.field-eye {
  padding:0 14px;
  color:var(--text-light);
  display:flex; align-items:center;
  transition:color var(--t);
  flex-shrink:0;
  min-width:44px; min-height:44px; justify-content:center;
}
.field-eye:hover { color:var(--text-body); }

.field-error {
  font-size:12px; font-weight:500;
  color:var(--red); min-height:16px;
}

/* ── PASSWORD STRENGTH ── */
.pwd-strength {
  display:flex; align-items:center; gap:10px; padding-top:2px;
}
.pwd-strength__bars {
  display:flex; gap:4px;
}
.pwd-bar {
  width:28px; height:3px; border-radius:2px;
  background:var(--border); transition:background var(--t);
}
.pwd-bar.weak   { background:#E53E3E; }
.pwd-bar.fair   { background:#D97706; }
.pwd-bar.good   { background:#2E8B57; }
.pwd-bar.strong { background:var(--green-primary); }
.pwd-strength__label {
  font-size:11px; font-weight:600;
  color:var(--text-light); transition:color var(--t);
}

/* ── REMEMBER ── */
.remember-row {
  display:flex; align-items:flex-start; gap:10px;
  cursor:pointer; user-select:none; margin-top:4px;
}
.remember-row input { display:none; }
.remember-box {
  width:20px; height:20px; min-width:20px; border-radius:5px;
  border:1.5px solid var(--border); background:var(--white);
  transition:all var(--t); display:flex; align-items:center; justify-content:center;
  margin-top:1px; position:relative;
}
.remember-row input:checked + .remember-box {
  background:var(--green-primary); border-color:var(--green-primary);
}
.remember-row input:checked + .remember-box::after {
  content:''; position:absolute;
  width:11px; height:6px;
  border-left:2px solid white; border-bottom:2px solid white;
  transform:rotate(-45deg) translateY(-1px);
}
.remember-label {
  font-size:13px; font-weight:400; color:var(--text-body); line-height:1.55;
}
.inline-link { color:var(--green-primary); font-weight:500; }

/* ── SUBMIT BUTTON ── */
.btn-submit {
  width:100%; padding:17px;
  background:var(--green-primary);
  color:var(--white);
  border-radius:var(--r-md);
  font-size:15px; font-weight:600;
  transition:all var(--t);
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px;
  box-shadow:0 4px 18px rgba(26,107,70,.26);
  margin-top:4px;
}
.btn-submit:hover:not(:disabled) {
  background:var(--green-deep);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(26,107,70,.34);
}
.btn-submit:active { transform:translateY(0); }
.btn-submit:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.btn-submit__spinner { display:flex; align-items:center; }
.spin-path { animation:spin .75s linear infinite; }
@keyframes spin {
  from { stroke-dasharray:1,200; stroke-dashoffset:0; }
  to   { stroke-dasharray:89,200; stroke-dashoffset:-135; }
}

/* ── FORM ERROR GLOBAL ── */
.form-error {
  display:flex; align-items:center; gap:10px;
  background:#FEF2F2; border:1px solid rgba(229,62,62,.25);
  border-radius:var(--r-sm); padding:13px 16px;
  font-size:13px; font-weight:500; color:#991B1B;
  animation:shake .4s ease;
}
@keyframes shake {
  0%,100%{ transform:translateX(0) }
  20%{ transform:translateX(-6px) }
  40%{ transform:translateX(6px) }
  60%{ transform:translateX(-4px) }
  80%{ transform:translateX(4px) }
}

/* ── SÉPARATEUR ── */
.sep {
  display:flex; align-items:center; gap:14px;
  margin:20px 0;
}
.sep::before,.sep::after {
  content:''; flex:1; height:1px; background:var(--border);
}
.sep span {
  font-size:12px; font-weight:500; color:var(--text-light);
  white-space:nowrap;
}

/* ── SOCIAL BUTTONS ── */
.social-btns { display:flex; gap:12px; margin-bottom:20px; }
.social-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:14px;
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  font-size:14px; font-weight:500; color:var(--text-body);
  background:var(--white);
  transition:all var(--t);
  min-height:52px;
}
.social-btn:hover {
  border-color:var(--border-focus);
  color:var(--green-deep);
  background:var(--green-50);
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}
.social-btn:active { transform:translateY(0); }

/* ── SWITCH ── */
.form-switch {
  text-align:center; font-size:14px; color:var(--text-muted);
}
.form-switch__link {
  color:var(--green-primary); font-weight:600;
  transition:color var(--t); margin-left:4px;
}
.form-switch__link:hover { color:var(--green-deep); }

/* ── MERCHANT LINK ── */
.merchant-link {
  display:flex; align-items:center; gap:14px;
  background:var(--green-50);
  border:1.5px solid var(--border);
  border-radius:var(--r-md); padding:16px 18px;
  margin-top:20px; transition:all var(--t);
}
.merchant-link:hover {
  border-color:var(--green-mid);
  background:var(--green-pale);
  transform:translateX(3px);
}
.merchant-link__icon {
  width:40px; height:40px; border-radius:var(--r-sm);
  background:var(--green-pale); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--green-primary); flex-shrink:0;
}
.merchant-link__body { flex:1; }
.merchant-link__body strong {
  display:block; font-size:14px; font-weight:600;
  color:var(--text-dark); margin-bottom:2px;
}
.merchant-link__body span {
  font-size:12px; color:var(--text-muted);
}
.merchant-link > svg { color:var(--text-light); flex-shrink:0; }

/* ══════════════════════════════════════
   OTP PHONE — VÉRIFICATION NUMÉRO
══════════════════════════════════════ */
.otp-send-btn {
  margin-top: 8px;
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 11px 16px;
  background: var(--green-pale); color: var(--green-primary);
  border: 1.5px solid var(--green-primary); border-radius: var(--r-md);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.2s; justify-content: center;
}
.otp-send-btn:hover:not(:disabled) {
  background: var(--green-primary); color: #fff;
}
.otp-send-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.otp-send-btn--sent {
  background: #EAF5EE; color: var(--green-primary);
  border-color: var(--green-mid);
}

.otp-box {
  margin-top: 12px;
  background: #F7FBFA; border: 1.5px solid #C3DFD4;
  border-radius: var(--r-md); padding: 16px;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

.otp-box__header {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--green-primary); font-weight: 600;
  margin-bottom: 14px;
}

.otp-inputs {
  display: flex; gap: 8px; justify-content: center;
  margin-bottom: 12px;
}
.otp-digit {
  width: 42px; height: 50px;
  border: 2px solid #C3DFD4; border-radius: 10px;
  text-align: center; font-size: 22px; font-weight: 700;
  color: var(--text-dark); background: #fff;
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
  font-family: monospace; caret-color: transparent;
}
.otp-digit:focus {
  border-color: var(--green-primary);
  box-shadow: 0 0 0 3px rgba(26,107,70,0.12);
}
.otp-digit.otp-digit--error { border-color: #E53E3E; }
.otp-digit.otp-digit--ok    { border-color: var(--green-primary); background: #EAF5EE; }

.otp-box__footer {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 6px;
}
.otp-verified {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: var(--green-primary);
  background: #D4EDDA; padding: 4px 10px; border-radius: 20px;
}
.otp-error {
  font-size: 12px; font-weight: 600; color: #E53E3E;
}
.otp-resend {
  font-size: 12px; color: var(--text-muted); background: none;
  border: none; cursor: pointer; padding: 0; text-decoration: underline;
  transition: color 0.2s;
}
.otp-resend:not(:disabled) { color: var(--green-primary); }
.otp-resend:disabled { color: var(--text-light); text-decoration: none; cursor: not-allowed; }