:root{--av:var(--acc);--av-s:var(--acc-glow);--av-g:rgba(108,99,255,.35);--abg:#06060f;--ac:#0d0d1f;--ab:rgba(108,99,255,.22);--ab2:rgba(255,255,255,.07);--at:var(--tx);--at2:var(--tx2);--at3:var(--mu);--ar:var(--err);--ag:var(--ok);--ao:var(--warn)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}.auth-body{min-height:100vh;background:var(--abg);display:flex;align-items:flex-start;justify-content:center;padding:20px 16px 28px;position:relative;overflow-x:hidden;overflow-y:auto;font-family:'Poppins',sans-serif}.auth-body.auth-body-split{padding:0!important;align-items:stretch!important;overflow:hidden;height:100vh;max-height:100vh}@media(max-width:899px){.auth-body:not(.auth-body-split){padding:0}.auth-body.auth-body-split{overflow-y:auto;height:auto;max-height:none;overflow:auto}}.auth-body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 60% 50% at 20% 20%,rgba(108,99,255,.18) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 80% 80%,rgba(108,99,255,.12) 0%,transparent 60%),radial-gradient(ellipse 40% 30% at 60% 10%,rgba(255,77,109,.06) 0%,transparent 50%);pointer-events:none;z-index:0}.auth-body::after{content:'';position:fixed;inset:0;background-image:radial-gradient(circle,rgba(108,99,255,.15) 1px,transparent 1px);background-size:30px 30px;opacity:.35;pointer-events:none;z-index:0;animation:bgDrift 20s ease-in-out infinite alternate}@keyframes bgDrift{0%{transform:translate(0,0)}100%{transform:translate(6px,6px)}}.auth-wrapper{width:100%;max-width:520px;position:relative;z-index:1;padding-bottom:16px}@media(max-width:520px){.auth-wrapper{padding:0 0 16px}}.auth-logo{text-align:center;margin-bottom:16px}.auth-logo .logo-link{display:inline-flex;align-items:center;gap:10px;text-decoration:none}.auth-logo .logo-text{font-size:1.8rem;font-weight:900;color:var(--av);letter-spacing:-1px}.auth-logo .logo-text em{color:var(--at);font-style:normal}.auth-tagline{font-size:.77rem;color:var(--at3);margin-top:5px;letter-spacing:.3px}.auth-card{background:rgba(13,13,31,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(108,99,255,.22);border-radius:22px;padding:30px 28px;box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 32px 80px rgba(0,0,0,.55),0 0 60px rgba(108,99,255,.08);position:relative;overflow:visible}.auth-card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(108,99,255,.6),transparent);border-radius:1px}@media (max-width:479px){.auth-card{padding:24px 16px;border-radius:18px}}.auth-header{text-align:center;margin-bottom:22px}.auth-title{font-size:1.5rem;font-weight:600;color:var(--at);margin-bottom:5px;letter-spacing:-.3px}.auth-sub{font-size:.83rem;color:var(--at2);line-height:1.5}.alert{border-radius:12px;padding:12px 15px;font-size:.83rem;margin-bottom:16px;display:flex;align-items:flex-start;gap:9px;line-height:1.5}.alert-error{background:rgba(255,77,109,.1);border:1px solid rgba(255,77,109,.25);color:#fca5a5}.alert-success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);color:#86efac}.auth-form{display:flex;flex-direction:column;gap:13px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-group{display:flex;flex-direction:column;gap:5px}.form-label{font-size:.74rem;font-weight:700;color:var(--at2);display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.5px}.form-label img{width:12px;height:12px;filter:brightness(0) saturate(0) invert(1) opacity(.45);flex-shrink:0}.form-hint{font-size:.69rem;color:var(--at3);font-weight:400;text-transform:none;letter-spacing:0}.label-row{display:flex;align-items:center;justify-content:space-between}.forgot-link{font-size:.73rem;color:var(--av);text-decoration:none;font-weight:600;transition:color .15s}.forgot-link:hover{color:#a5a0ff}.form-input{width:100%;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);border-radius:11px;padding:11px 14px;font-size:.875rem;color:var(--at);font-family:'Poppins',sans-serif;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}.form-input::placeholder{color:var(--at3)}.form-input:focus{border-color:rgba(108,99,255,.6);background:rgba(108,99,255,.06);box-shadow:0 0 0 4px rgba(108,99,255,.12)}.form-group.has-error .form-input{border-color:rgba(255,77,109,.5);background:rgba(255,77,109,.04)}.form-error{font-size:.72rem;color:var(--ar);font-weight:600;display:flex;align-items:center;gap:4px}.field-wrap{position:relative;display:flex;align-items:center}.field-wrap .f-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;filter:brightness(0) saturate(0) invert(1) opacity(.3);pointer-events:none;z-index:2;transition:opacity .2s;flex-shrink:0}.field-wrap:focus-within .f-icon{opacity:.65}.field-wrap .form-input{padding-left:40px}.field-wrap .form-input.has-eye{padding-right:44px}.field-wrap .form-input.has-eyes{padding-right:76px}.eye-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;z-index:3;border-radius:6px;transition:background .15s}.eye-btn:hover{background:rgba(255,255,255,.06)}.eye-btn img{width:16px;height:16px;filter:brightness(0) saturate(0) invert(1) opacity(.3);display:block;transition:opacity .2s}.eye-btn:hover img,.eye-btn.active img{opacity:.75}.help-btn{position:absolute;right:38px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;z-index:3}.help-icon{width:18px;height:18px;border-radius:50%;background:rgba(245,158,11,.15);border:1.5px solid rgba(245,158,11,.45);color:#f59e0b;font-size:.65rem;font-weight:900;display:flex;align-items:center;justify-content:center;transition:all .2s;user-select:none;line-height:1}.help-btn:hover .help-icon,.help-btn.active .help-icon{background:rgba(245,158,11,.3);border-color:#f59e0b;box-shadow:0 0 8px rgba(245,158,11,.3)}.pwd-tooltip{position:fixed;z-index:99999;width:240px;background:rgb(22,20,48);border:1.5px solid rgba(108,99,255,.55);border-radius:14px;padding:14px 16px;box-shadow:0 24px 60px rgba(0,0,0,.98),0 0 0 1px rgba(255,255,255,.06) inset;display:none;opacity:0;transform:translateY(-6px);transition:opacity .18s,transform .18s;pointer-events:none;isolation:isolate}.pwd-tooltip.open{display:block;opacity:1;transform:translateY(0);pointer-events:auto}.pwd-tooltip-arrow{position:absolute;top:-6px;right:16px;width:11px;height:11px;background:#111128;border-left:1px solid rgba(108,99,255,.4);border-top:1px solid rgba(108,99,255,.4);transform:rotate(45deg)}.pwd-tooltip-title{font-size:.67rem;font-weight:800;color:#f59e0b;text-transform:uppercase;letter-spacing:.7px;margin-bottom:10px}.pwd-tooltip-list{list-style:none;display:flex;flex-direction:column;gap:7px}.pwd-tooltip-list li{display:flex;align-items:flex-start;gap:8px;font-size:.76rem;color:var(--at2);line-height:1.4}.t-dot{width:5px;height:5px;border-radius:50%;background:var(--av);flex-shrink:0;margin-top:5px}.pwd-tooltip-list li strong{color:var(--at);font-weight:700}.phone-wrap{display:flex;border:1.5px solid rgba(255,255,255,.08);border-radius:11px;overflow:hidden;background:rgba(255,255,255,.04);transition:border-color .2s,box-shadow .2s}.phone-wrap:focus-within{border-color:rgba(108,99,255,.6);box-shadow:0 0 0 4px rgba(108,99,255,.12)}.phone-flag{display:flex;align-items:center;gap:6px;padding:0 12px;border-right:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);white-space:nowrap;flex-shrink:0;user-select:none}.phone-flag .flag{font-size:1.1rem;line-height:1}.phone-flag .code{font-size:.82rem;font-weight:700;color:var(--at)}.phone-input{flex:1;background:transparent;border:none;outline:none;padding:11px 13px;font-size:.875rem;color:var(--at);font-family:'Poppins',sans-serif;min-width:0}.phone-input::placeholder{color:var(--at3)}.form-group.has-error .phone-wrap{border-color:rgba(255,77,109,.5)}.pwd-meter{margin-top:7px;display:none}.pwd-meter.visible{display:block}.pwd-bars{display:flex;gap:4px;margin-bottom:5px}.pwd-bar{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.07);transition:background .3s}.pwd-bar.weak{background:var(--ar)}.pwd-bar.medium{background:var(--ao)}.pwd-bar.good{background:var(--ag)}.pwd-label{font-size:.69rem;font-weight:700}.pwd-match{font-size:.72rem;font-weight:600;min-height:15px;margin-top:4px}.pwd-match.ok{color:var(--ag)}.pwd-match.err{color:var(--ar)}.form-checkbox-group{margin-top:-2px}.checkbox-label{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:.81rem;color:var(--at2);line-height:1.5}.checkbox-label input[type="checkbox"]{display:none}.checkbox-box{width:20px;height:20px;border:2px solid rgba(255,255,255,.14);border-radius:6px;flex-shrink:0;margin-top:1px;background:rgba(255,255,255,.04);transition:all .2s;position:relative}.checkbox-label:hover .checkbox-box{border-color:var(--av)}.checkbox-label input:checked~.checkbox-box{background:var(--av);border-color:var(--av)}.checkbox-label input:checked~.checkbox-box::after{content:'';position:absolute;top:3px;left:6px;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.checkbox-label a{color:var(--av);text-decoration:none;font-weight:600}.checkbox-label a:hover{color:#a5a0ff;text-decoration:underline}.btn-auth{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--av);color:#fff;border:none;border-radius:12px;padding:14px 24px;font-size:.93rem;font-weight:800;cursor:pointer;width:100%;font-family:'Poppins',sans-serif;margin-top:2px;letter-spacing:.2px;transition:all .25s;position:relative;overflow:hidden}.btn-auth::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 60%);opacity:0;transition:opacity .2s}.btn-auth:hover{background:#5a52e0;transform:translateY(-2px);box-shadow:0 8px 28px rgba(108,99,255,.45)}.btn-auth:hover::before{opacity:1}.btn-auth:active{transform:translateY(0)}.btn-auth:disabled{background:rgba(108,99,255,.35);cursor:not-allowed;transform:none;box-shadow:none}.btn-auth img{filter:brightness(0) invert(1);width:16px;height:16px;flex-shrink:0}.security-note{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;font-size:.71rem;color:var(--at3)}.security-note img{width:12px;height:12px;filter:brightness(0) saturate(0) invert(1) opacity(.3)}.auth-switch{text-align:center;margin-top:18px;font-size:.83rem;color:var(--at3)}.auth-switch a{color:var(--av);font-weight:700;text-decoration:none;margin-left:4px}.auth-switch a:hover{color:#a5a0ff}.auth-footer{text-align:center;margin-top:18px;font-size:.73rem;color:var(--at3);line-height:1.8}.auth-footer a{color:var(--at3);text-decoration:none}.auth-footer a:hover{color:var(--av)}.vep-wrap{text-align:center;padding:8px 0}.vep-icon{width:72px;height:72px;border-radius:50%;background:rgba(108,99,255,.12);border:2px solid rgba(108,99,255,.3);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;animation:vepPop .5s cubic-bezier(.34,1.56,.64,1)}@keyframes vepPop{from{transform:scale(0)}to{transform:scale(1)}}.vep-icon img{width:34px;height:34px;filter:brightness(0) saturate(100%) invert(50%) sepia(80%) saturate(400%) hue-rotate(220deg)}.vep-title{font-size:1.4rem;font-weight:800;color:var(--at);margin:0 0 8px;letter-spacing:-.3px}.vep-sub{font-size:.87rem;color:var(--at2);margin:0 0 22px;line-height:1.6}.vep-email-box{background:rgba(108,99,255,.09);border:1px solid rgba(108,99,255,.25);border-radius:10px;padding:11px 16px;display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;font-size:.86rem;font-weight:700;color:var(--av)}.vep-steps{text-align:left;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:16px 18px;margin-bottom:22px}.vep-step{display:flex;align-items:flex-start;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04)}.vep-step:last-child{border-bottom:none}.vep-step-num{width:24px;height:24px;border-radius:50%;background:var(--av);color:#fff;font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}.vep-step-text{font-size:.81rem;color:var(--at2);line-height:1.5}.vep-step-text strong{color:var(--at)}.vep-divider{border:none;border-top:1px solid rgba(255,255,255,.06);margin:20px 0}.vep-resend-label{font-size:.79rem;color:var(--at3);margin-bottom:11px}.vep-resend-form{display:flex;flex-direction:column;gap:8px}.vep-resend-input{width:100%;padding:11px 14px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);border-radius:10px;color:var(--at);font-family:'Poppins',sans-serif;font-size:.83rem;outline:none}.vep-resend-input:focus{border-color:rgba(108,99,255,.5)}.vep-resend-btn{padding:11px;border-radius:10px;background:rgba(108,99,255,.12);border:1px solid rgba(108,99,255,.3);color:var(--av);font-family:'Poppins',sans-serif;font-weight:700;font-size:.82rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:7px}.vep-resend-btn:hover{background:rgba(108,99,255,.22)}.vep-hint{font-size:.72rem;color:var(--at3);margin-top:14px;line-height:1.7}.loading-overlay{position:fixed;inset:0;background:rgba(6,6,15,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:99999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s ease}.loading-overlay.visible{opacity:1;pointer-events:all}.loading-box{display:flex;flex-direction:column;align-items:center;animation:lo-boxIn .45s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes lo-boxIn{from{transform:scale(.85) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.loading-ring{position:relative;width:96px;height:96px;margin-bottom:22px}.loading-ring-svg{width:96px;height:96px;transform:rotate(-90deg);animation:lo-spin 1.6s linear infinite}@keyframes lo-spin{to{transform:rotate(270deg)}}.ring-track{fill:none;stroke:rgba(108,99,255,.15);stroke-width:5}.ring-progress{fill:none;stroke:#6C63FF;stroke-width:5;stroke-linecap:round;stroke-dasharray:213.6;animation:lo-ringFill 1.6s ease-in-out infinite}@keyframes lo-ringFill{0%{stroke-dashoffset:200}50%{stroke-dashoffset:40}100%{stroke-dashoffset:200}}.loading-logo-inner{position:absolute;inset:10px;border-radius:50%;background:rgba(108,99,255,.1);border:1.5px solid rgba(108,99,255,.25);display:flex;align-items:center;justify-content:center;animation:lo-pulse 1.6s ease-in-out infinite}@keyframes lo-pulse{0%,100%{box-shadow:0 0 0 0 rgba(108,99,255,.35)}50%{box-shadow:0 0 0 10px rgba(108,99,255,0)}}.loading-logo-img{width:42px;height:42px;border-radius:9px}.loading-title{font-size:1.4rem;font-weight:900;color:#6C63FF;letter-spacing:3px;margin-bottom:14px}.loading-dots{display:flex;gap:7px;margin-bottom:20px}.loading-dots span{width:7px;height:7px;border-radius:50%;background:#6C63FF;opacity:.3;animation:lo-dot 1.2s ease-in-out infinite}.loading-dots span:nth-child(1){animation-delay:0s}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}@keyframes lo-dot{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1.2)}}.loading-step{font-size:.82rem;color:#a0a0c0;margin-bottom:20px;text-align:center;min-height:20px;transition:opacity .18s ease;letter-spacing:.2px}.loading-bar-track{width:220px;height:3px;background:rgba(108,99,255,.15);border-radius:99px;overflow:hidden;margin-bottom:22px}.loading-bar-fill{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#6C63FF,#a5a0ff);animation:lo-progress 5s cubic-bezier(.4,0,.2,1) forwards}@keyframes lo-progress{0%{width:0%}15%{width:25%}40%{width:55%}70%{width:78%}90%{width:90%}100%{width:95%}}.loading-secure{display:flex;align-items:center;gap:6px;font-size:.7rem;color:#50506a}.loading-secure svg{stroke:#50506a;flex-shrink:0}.reset-email-box{display:flex;align-items:center;gap:10px;background:rgba(108,99,255,.08);border:1px solid rgba(108,99,255,.22);border-radius:11px;padding:11px 14px;margin-bottom:2px}.reset-email-icon{width:32px;height:32px;border-radius:8px;background:rgba(108,99,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}.reset-email-icon svg{stroke:#818cf8}.reset-email-txt{font-size:.85rem;font-weight:600;color:#818cf8;word-break:break-all}.vep-wrap{text-align:center;padding:8px 0}.vep-icon{width:72px;height:72px;border-radius:50%;background:rgba(108,99,255,.12);border:2px solid rgba(108,99,255,.3);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}.vep-icon img{width:34px;height:34px;filter:brightness(0) saturate(100%) invert(50%) sepia(80%) saturate(400%) hue-rotate(220deg)}.vep-title{font-size:1.4rem;font-weight:800;color:#f0f0ff;margin:0 0 8px;letter-spacing:-.3px}.vep-sub{font-size:.88rem;color:#a0a0c0;margin:0 0 24px;line-height:1.6}.vep-email-box{background:rgba(108,99,255,.09);border:1px solid rgba(108,99,255,.25);border-radius:10px;padding:12px 18px;display:inline-flex;align-items:center;gap:8px;margin-bottom:28px;font-size:.88rem;font-weight:700;color:#6C63FF}.vep-email-box img{width:15px;height:15px;filter:brightness(0) saturate(100%) invert(50%) sepia(80%) saturate(400%) hue-rotate(220deg)}.vep-steps{text-align:left;background:#0e0e1c;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:18px 20px;margin-bottom:24px}.vep-step{display:flex;align-items:flex-start;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04)}.vep-step:last-child{border-bottom:none}.vep-step-num{width:24px;height:24px;border-radius:50%;background:#6C63FF;color:#fff;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}.vep-step-text{font-size:.82rem;color:#a0a0c0;line-height:1.5}.vep-step-text strong{color:#f0f0ff}.vep-divider{border:none;border-top:1px solid rgba(255,255,255,.06);margin:20px 0}.vep-resend-label{font-size:.8rem;color:#60607a;margin-bottom:12px}.vep-resend-form{display:flex;flex-direction:column;gap:8px}.vep-resend-input{width:100%;padding:11px 14px;background:#111125;border:1px solid rgba(255,255,255,.08);border-radius:9px;color:#f0f0ff;font-size:.84rem;outline:none;box-sizing:border-box}.vep-resend-btn{width:100%;padding:11px;border-radius:9px;background:rgba(108,99,255,.12);border:1px solid rgba(108,99,255,.3);color:#6C63FF;font-weight:700;font-size:.82rem;cursor:pointer;transition:all .2s}.vep-resend-btn:hover{background:rgba(108,99,255,.2)}.vep-hint{font-size:.72rem;color:#60607a;margin-top:14px;line-height:1.6}


/* ═══════════════════════════════════════════════════════════════
   DJIBOUTI SUUQ — AUTH SPLIT LAYOUT
   Design deux panneaux (gauche + droite) — Toutes les pages auth
   Extrait de register.php — Centralisé ici pour toutes les pages
   ═══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
   DJIBOUTI SUUQ — Register Pro — Full screen + Animations
══════════════════════════════════════════════════ */

/* ── Full-screen split layout ────────────────────────────── */
body.auth-body-split{
    padding:0!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    min-height:100vh;
    overflow:hidden;
}
body.auth-body-split::before,
body.auth-body-split::after{display:none!important}

.auth-wrapper.auth-split{
    width:100%;max-width:100%;min-height:100vh;
    display:grid;grid-template-columns:420px 1fr;
    position:relative;
}
@media(min-width:1600px){.auth-wrapper.auth-split{grid-template-columns:480px 1fr}}
@media(max-width:1200px){.auth-wrapper.auth-split{grid-template-columns:380px 1fr}}
@media(max-width:999px) {.auth-wrapper.auth-split{grid-template-columns:330px 1fr}}
@media(max-width:899px) {.auth-wrapper.auth-split{display:flex;flex-direction:column;min-height:100vh}}

/* ── LEFT PANEL ───────────────────────────────────────────── */
.auth-left-panel{
    background:linear-gradient(155deg,#0a0e1a 0%,#111535 50%,#0d1228 100%);
    border-right:1px solid rgba(108,99,255,.2);
    display:flex;align-items:center;justify-content:center;
    padding:52px 36px;position:relative;overflow:hidden;
    min-height:100vh;
}
/* Animated background */
.auth-left-panel::before{
    content:'';position:absolute;top:-100px;left:-100px;
    width:400px;height:400px;border-radius:50%;
    background:radial-gradient(circle,rgba(108,99,255,.25) 0%,transparent 70%);
    animation:alp-float1 8s ease-in-out infinite;pointer-events:none;
}
.auth-left-panel::after{
    content:'';position:absolute;bottom:-80px;right:-80px;
    width:320px;height:320px;border-radius:50%;
    background:radial-gradient(circle,rgba(139,92,246,.2) 0%,transparent 70%);
    animation:alp-float2 10s ease-in-out infinite;pointer-events:none;
}
@keyframes alp-float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-20px) scale(1.1)}}
@keyframes alp-float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-20px,30px) scale(1.08)}}

/* Animated dots grid */
.auth-left-panel .alp-dots{
    position:absolute;inset:0;
    background-image:radial-gradient(circle,rgba(108,99,255,.2) 1px,transparent 1px);
    background-size:32px 32px;opacity:.4;pointer-events:none;
    animation:alp-dots-drift 20s linear infinite alternate;
}
@keyframes alp-dots-drift{from{background-position:0 0}to{background-position:16px 16px}}

/* Glowing line top */
.auth-left-panel .alp-glow-line{
    position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(108,99,255,.8),transparent);
    animation:alp-shimmer 3s ease-in-out infinite;
}
@keyframes alp-shimmer{0%,100%{opacity:.5}50%{opacity:1}}

@media(max-width:899px){.auth-left-panel{display:none}}

.auth-left-inner{position:relative;z-index:2;width:100%;max-width:360px;animation:alpIn .7s cubic-bezier(.22,.68,0,1.2) both}
@keyframes alpIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}

.auth-left-logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-bottom:40px}
.alp-logo-txt{font-size:1.55rem;font-weight:900;color:#f0f0ff;letter-spacing:-.03em}
.alp-logo-txt em{color:#f59e0b;font-style:normal}
.alp-headline{font-size:clamp(1.5rem,2.2vw,2rem);font-weight:900;color:#f8fafc;line-height:1.18;margin-bottom:12px;letter-spacing:-.02em}
.alp-headline em{background:linear-gradient(135deg,#a5b4fc 0%,#8b5cf6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:normal}
.alp-sub{font-size:.83rem;color:#64748b;line-height:1.75;margin-bottom:28px}
.alp-benefits{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
.alp-benefit{
    display:flex;align-items:flex-start;gap:13px;
    padding:12px;border-radius:12px;
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);
    transition:border-color .2s,background .2s;
    animation:alpBenIn .6s ease both;
}
.alp-benefit:nth-child(1){animation-delay:.15s}
.alp-benefit:nth-child(2){animation-delay:.25s}
.alp-benefit:nth-child(3){animation-delay:.35s}
@keyframes alpBenIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.alp-benefit:hover{border-color:rgba(108,99,255,.2);background:rgba(108,99,255,.05)}
.alp-benefit-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.alp-benefit-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.alp-benefit-title{font-size:.86rem;font-weight:700;color:#e2e8f0;margin-bottom:2px}
.alp-benefit-text{font-size:.74rem;color:#475569;line-height:1.5}
.alp-seller-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);color:#4ade80;font-size:.73rem;font-weight:700;padding:9px 14px;border-radius:10px}
.alp-seller-badge svg{width:13px;height:13px;stroke:currentColor;fill:none;flex-shrink:0}
.alp-stats{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px;
    animation:alpIn .7s .4s ease both;
}
.alp-stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:14px;text-align:center;transition:all .2s}
.alp-stat:hover{border-color:rgba(108,99,255,.3);background:rgba(108,99,255,.07);transform:translateY(-2px)}
.alp-stat-n{font-size:1.4rem;font-weight:900;color:#a5b4fc}
.alp-stat-l{font-size:.67rem;color:#475569;margin-top:2px}

/* ── RIGHT PANEL ──────────────────────────────────────────── */
.auth-right-panel{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:0;overflow-y:auto;overflow-x:hidden;min-height:100vh;height:100vh;
    background:radial-gradient(ellipse 60% 40% at 70% 30%,rgba(108,99,255,.09) 0%,transparent 65%),
               radial-gradient(ellipse 40% 30% at 30% 80%,rgba(139,92,246,.06) 0%,transparent 55%),
               #07090f;
    position:relative;
}
/* Animated subtle grid on right */
.auth-right-panel::before{
    content:'';position:absolute;inset:0;
    background-image:linear-gradient(rgba(108,99,255,.04) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(108,99,255,.04) 1px,transparent 1px);
    background-size:52px 52px;pointer-events:none;
    animation:grid-drift 25s ease-in-out infinite alternate;
}
@keyframes grid-drift{from{opacity:.6;transform:scale(1)}to{opacity:.3;transform:scale(1.02)}}

.auth-right-inner{
    width:100%;max-width:480px;padding:32px 24px;
    position:relative;z-index:1;
    animation:arpIn .6s .1s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes arpIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* ── All breakpoints ──────────────────────────── */
/* 320px — petit iPhone */
@media(max-width:360px){
    .auth-right-inner{padding:16px 12px 28px}
    .auth-header .auth-title{font-size:1.25rem}
    .auth-card{padding:20px 14px!important}
}
/* 361-480px — mobile standard */
@media(max-width:480px) and (min-width:361px){
    .auth-right-inner{padding:20px 14px 32px}
}
/* 481-767px — grand mobile / petit tablet */
@media(max-width:767px) and (min-width:481px){
    .auth-right-inner{padding:28px 24px 40px;max-width:480px}
}
/* Mobile général */
@media(max-width:899px){
    .auth-right-panel{
        min-height:auto;height:auto;overflow-y:auto;
        justify-content:flex-start!important;
        background:#06060f;
    }
    .auth-right-panel::before{display:none}
    .auth-right-inner{max-width:100%}
}
/* 900-1024px — tablette paysage */
@media(min-width:900px) and (max-width:1024px){
    .auth-right-inner{padding:28px 20px;max-width:460px}
}
/* 1025-1280px — laptop */
@media(min-width:1025px) and (max-width:1280px){
    .auth-right-inner{padding:36px 24px;max-width:470px}
}
/* 1600px+ — grand écran */
@media(min-width:1600px){
    .auth-right-inner{max-width:520px;padding:52px 32px}
}
/* 2560px+ — ultrawide */
@media(min-width:2560px){
    .auth-wrapper.auth-split{grid-template-columns:580px 1fr}
    .auth-right-inner{max-width:600px;padding:60px 40px}
}

.auth-right-panel .auth-card{width:100%;animation:cardIn .5s .2s ease both}.auth-right-panel .auth-card.auth-card{padding:22px 22px}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.auth-right-panel .auth-footer{margin-top:14px}

/* Mobile logo */
.auth-right-logo-mobile{display:none;text-align:center;margin-bottom:20px}
@media(max-width:899px){.auth-right-logo-mobile{display:block}}

/* ── FORM fields animations ───────────────────────────────── */
.auth-form .form-group{animation:fieldIn .4s ease both}
.auth-form .form-row{animation:fieldIn .4s ease both}
.auth-form .form-group:nth-child(1),.auth-form .form-row{animation-delay:.1s}
.auth-form .form-group:nth-child(2){animation-delay:.15s}
.auth-form .form-group:nth-child(3){animation-delay:.2s}
.auth-form .form-group:nth-child(4){animation-delay:.25s}
.auth-form .form-group:nth-child(5){animation-delay:.3s}
.auth-form .form-checkbox-group{animation-delay:.35s}
.auth-form .btn-auth{animation:fieldIn .4s .4s ease both}
@keyframes fieldIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Header animation */
.auth-header{animation:arpIn .5s ease both}

/* ── Input hover micro-animation ──────────────────────────── */
.form-input{transition:border-color .2s,box-shadow .2s,transform .15s}
.form-input:focus{transform:translateY(-1px)}
.phone-wrap:focus-within{transform:translateY(-1px)}

/* ── Button pulse on hover ────────────────────────────────── */
.btn-auth{position:relative;overflow:hidden}
.btn-auth::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
    transform:translateX(-100%);transition:transform .5s ease;
}
.btn-auth:hover::after{transform:translateX(100%)}
.btn-auth:hover{transform:translateY(-2px)!important}

/* ── Validation states ────────────────────────────────────── */
.form-group.field-ok .form-input,
.form-group.field-ok .phone-wrap{
    border-color:rgba(34,197,94,.45)!important;
    background:rgba(34,197,94,.04)!important;
}
.form-group.field-ok .f-icon{opacity:.9;filter:brightness(0) saturate(100%) invert(60%) sepia(70%) saturate(600%) hue-rotate(90deg)!important}
.field-ok-badge{font-size:.67rem;color:#22c55e;font-weight:600;display:flex;align-items:center;gap:3px;margin-top:3px}
.field-ok-badge svg{width:10px;height:10px;stroke:#22c55e;fill:none;stroke-width:3}

/* ── Password rules inline ────────────────────────────────── */
.pwd-rules-inline{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:rgba(255,255,255,.03);border-radius:10px;padding:10px 12px;margin-top:7px}
.pwd-rule{display:flex;align-items:center;gap:5px;font-size:.7rem;color:#4b5563;transition:color .2s}
.pwd-rule.ok{color:#22c55e}
.pwd-rule svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.5;flex-shrink:0}
.pwd-rule.ok svg{stroke:#22c55e}

/* ── Context banner ───────────────────────────────────────── */
.auth-context-banner{display:flex;align-items:center;gap:10px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);border-radius:11px;padding:11px 15px;margin-bottom:18px;font-size:.8rem;color:#4ade80;line-height:1.45}
.auth-context-banner svg{width:16px;height:16px;stroke:currentColor;fill:none;flex-shrink:0}

/* ── Mobile form-row: 2 columns on 360px+ ────────────────── */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:340px){.form-row{grid-template-columns:1fr;gap:8px}}

/* ── Light mode ───────────────────────────────────────────── */
[data-theme="light"] .auth-right-panel{background:#f1f3f8}
[data-theme="light"] .auth-right-panel::before{opacity:.15}
[data-theme="light"] .auth-left-panel{background:linear-gradient(155deg,#e8edf7 0%,#dce3f0 50%,#e4eaf5 100%)}
[data-theme="light"] .auth-left-inner *{color-scheme:light}
[data-theme="light"] .alp-headline{color:#1e1b4b}
[data-theme="light"] .alp-sub{color:#4b5563}
[data-theme="light"] .alp-benefit{background:rgba(255,255,255,.7);border-color:rgba(108,99,255,.1)}
[data-theme="light"] .alp-benefit-title{color:#111827}
[data-theme="light"] .alp-benefit-text{color:#6b7280}
[data-theme="light"] .alp-stat{background:rgba(255,255,255,.8);border-color:#e5e7eb}
[data-theme="light"] .alp-stat-n{color:#4f46e5}
[data-theme="light"] .alp-stat-l{color:#6b7280}
[data-theme="light"] .auth-card{background:rgba(255,255,255,.97)!important;border-color:rgba(108,99,255,.18)!important}
[data-theme="light"] .auth-title,[data-theme="light"] .auth-sub{color:#111827}
[data-theme="light"] .form-label{color:#374151!important}
[data-theme="light"] .form-input{background:#f8fafc!important;border-color:rgba(0,0,0,.1)!important;color:#111827!important}
[data-theme="light"] .form-input:focus{background:rgba(108,99,255,.04)!important}
[data-theme="light"] .form-input::placeholder{color:#9ca3af!important}
[data-theme="light"] .phone-wrap{background:#f8fafc!important;border-color:rgba(0,0,0,.1)!important}
[data-theme="light"] .phone-flag{border-right-color:rgba(0,0,0,.1)!important;background:rgba(0,0,0,.02)!important}
[data-theme="light"] .phone-flag .code{color:#374151!important}
[data-theme="light"] .phone-input{color:#111827!important}
[data-theme="light"] .phone-input::placeholder{color:#9ca3af!important}
[data-theme="light"] .pwd-rules-inline{background:rgba(0,0,0,.04)}
[data-theme="light"] .f-icon{filter:brightness(0) opacity(.4)!important}
[data-theme="light"] .security-note{color:#9ca3af}
[data-theme="light"] .auth-switch{color:#6b7280}
[data-theme="light"] .checkbox-label{color:#374151}
[data-theme="light"] .checkbox-box{border-color:rgba(0,0,0,.18)!important;background:rgba(0,0,0,.02)!important}
[data-theme="light"] .auth-footer a,[data-theme="light"] .auth-footer p{color:#9ca3af}


/* ═══════════════════════════════════════════════════════════
   DJIBOUTI SUUQ — Split layout overflow control
   Extrait de layouts/auth.php
   ═══════════════════════════════════════════════════════════ */

@media(min-width:900px){html{overflow:hidden;height:100%}body.auth-body-split{height:100vh;overflow:hidden}}
@media(max-width:899px){html,body{overflow-x:hidden;overflow-y:auto;height:auto}body.auth-body-split{height:auto;overflow-y:auto}}