/* =====================================================
   LOGIN PAGE (E-commerce Pro)
   ===================================================== */

main.main#app{
  --auth-border:#e9e9e9;
  --auth-muted:#6b7280;
  --auth-text:#111827;
  --auth-shadow:0 18px 50px rgba(0,0,0,.08);
  --auth-radius:14px;
}

/* spacing */
main.main#app .pt-50.pb-50{
  padding-top:48px !important;
  padding-bottom:56px !important;
}

/* cards */
main.main#app .login_wrap{
  background:#fff !important;
  border:1px solid var(--auth-border) !important;
  border-radius:var(--auth-radius) !important;
  box-shadow:var(--auth-shadow);
}

main.main#app .heading_s1 h3{
  margin-bottom:10px !important;
  font-size:1.35rem;
  font-weight:800;
  color:var(--auth-text);
}

main.main#app .font-sm{
  font-size:.92rem !important;
  color:var(--auth-muted) !important;
  line-height:1.55;
}

/* fields */
.auth-field{ position:relative; }
.auth-help{
  display:block;
  margin-top:6px;
  font-size:.82rem;
  color:var(--auth-muted);
}

.auth-field input[type="text"],
.auth-field input[type="password"],
.auth-field input[type="email"],
.auth-field input[type="tel"]{
  width:100%;
  height:46px;
  border-radius:12px;
  border:1px solid var(--auth-border);
  background:#fff;
  padding:10px 12px 10px 44px; /* place pour icône */
  font-size:.95rem;
  color:var(--auth-text);
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.auth-field input::placeholder{ color:#9ca3af; }
.auth-field input:focus{
  border-color:rgba(17,17,17,.35);
  box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* left icon */
.auth-field-icon{
  position:absolute;
  top:12px;
  left:12px;
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6b7280;
  z-index:2;
  pointer-events:none;
}

/* password toggle */
.auth-field--password input{ padding-right:44px; }
.auth-pass-toggle{
  position:absolute;
  top:8px;
  right:8px;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#111;
  cursor:pointer;
}
.auth-pass-toggle:hover{
  background:#f6f6f6;
}

/* CTA */
main.main#app .btn.btn-fill-out{
  height:46px;
  border-radius:12px;
  background:#111 !important;
  border-color:#111 !important;
  color:#fff !important;
  font-weight:800;
  letter-spacing:.2px;
  transition:transform .15s ease, background .15s ease, opacity .15s ease;
}
main.main#app .btn.btn-fill-out:hover{
  background:#000 !important;
  border-color:#000 !important;
  transform:translateY(-1px);
}
main.main#app .btn.btn-fill-out:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

/* links row */
main.main#app .login_footer{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
main.main#app .login_footer a.text-muted{
  color:var(--auth-muted) !important;
  text-decoration:none;
  font-size:.9rem;
}
main.main#app .login_footer a.text-muted:hover{
  color:#111 !important;
  text-decoration:underline;
}

/* =========================
   Divider desktop (middle)
   ========================= */
.auth-divider{
  width:1px;
  background:var(--auth-border);
  margin:0 auto;
  position:relative;
  height:100%;
}
.auth-divider::after{
  content:"OU";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  padding:6px 10px;
  font-size:.72rem;
  font-weight:900;
  color:#7b7b7b;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid var(--auth-border);
  border-radius:999px;
}

/* =========================
   Responsive
   ========================= */
@media (max-width:991px){
  main.main#app .login_wrap{
    box-shadow:0 12px 30px rgba(0,0,0,.06);
  }
  /* séparation horizontale entre les 2 blocs */
  main.main#app .col-lg-6 > .login_wrap{
    margin-top:18px;
    position:relative;
  }
  main.main#app .col-lg-6 > .login_wrap::before{
    content:"";
    position:absolute;
    top:-10px;
    left:12px;
    right:12px;
    height:1px;
    background:var(--auth-border);
  }
}

@media (max-width:575px){
  main.main#app .pt-50.pb-50{
    padding-top:28px !important;
    padding-bottom:36px !important;
  }
  main.main#app .heading_s1 h3{ font-size:1.2rem; }
  .auth-field input[type="text"],
  .auth-field input[type="password"],
  main.main#app .btn.btn-fill-out{
    height:44px;
  }
}

/* Bloc CTA inscription (quand le formulaire est fermé) */
.auth-register-cta{
  margin-top: 10px;
}

/* Optionnel: animation soft d’ouverture */
.auth-register-form{
  margin-top: 14px;
}

main.main#app .btn.btn-outline-dark{
  border-radius: 12px;
  height: 38px;
  padding: 0 .85rem;
  font-weight: 700;
}

/* =========================
   Mobile switch tabs
   ========================= */
.auth-mobile-switch{
  display:flex;
  gap:10px;
  padding:8px;
  border:1px solid var(--auth-border);
  border-radius:999px;
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.05);
}

.auth-mobile-switch .auth-tab{
  flex:1;
  height:42px;
  border-radius:999px;
  border:0;
  background:transparent;
  font-weight:800;
  font-size:.95rem;
  color:#6b7280;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}

.auth-mobile-switch .auth-tab.active{
  background:#111;
  color:#fff;
}

.auth-mobile-switch .auth-tab:active{
  transform:scale(.98);
}


/* =========================
   Register form refinements
   ========================= */

.auth-form--register .form-label,
.auth-form--register .auth-label{
  font-size:.82rem;
  color:#374151;
  margin-bottom:.35rem;
}

.auth-form--register input[type="text"],
.auth-form--register input[type="password"],
.auth-form--register input[type="email"],
.auth-form--register input[type="tel"],
.auth-form--register .form-control,
.auth-form--register .form-select{
  border-radius:12px;
  border:1px solid var(--auth-border);
  height:46px;
  font-size:.95rem;
  color:var(--auth-text);
  box-shadow:none;
}

.auth-form--register .form-control:focus,
.auth-form--register .form-select:focus,
.auth-form--register input:focus{
  border-color:rgba(17,17,17,.35);
  box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* civilité chips */
.auth-civility{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.auth-civility-item{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
  user-select:none;
  font-weight:800;
  font-size:.92rem;
  color:#6b7280;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.auth-civility-item input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.auth-civility-item.active{
  background:#111;
  border-color:#111;
  color:#fff;
}

.auth-civility-item:active{
  transform:scale(.98);
}

/* address block */
.auth-address{
  padding-top:6px;
}

.auth-address h6{
  font-size:.95rem;
  font-weight:800;
  color:#111827;
}

/* a little spacing tuning */
.auth-form--register .row{
  --bs-gutter-y: 12px;
}

/* =========================
   REGISTER CARD (pro)
   ========================= */
.auth-card--register .auth-card-head h3{
  margin:0 0 6px !important;
}
.auth-subtitle{
  margin:0 0 18px !important;
  color: var(--auth-muted);
  font-size: .92rem;
  line-height: 1.55;
}

/* labels + inputs unifiés */
.auth-label{
  font-size:.82rem;
  font-weight:700;
  color:#374151;
  margin-bottom:6px;
}
.auth-input{
  border-radius:12px !important;
  border:1px solid var(--auth-border) !important;
  height:46px;
  box-shadow:none !important;
}
.auth-input:focus{
  border-color:rgba(17,17,17,.35) !important;
  box-shadow:0 0 0 4px rgba(17,17,17,.08) !important;
}

/* chips civilité */
.auth-civility{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.auth-civility-item{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--auth-border);
  background:#fff;
  cursor:pointer;
  user-select:none;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.auth-civility-item input{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}
.auth-civility-item span{
  font-weight:700;
  font-size:.88rem;
  color:#111827;
}
.auth-civility-item:hover{
  transform:translateY(-1px);
  border-color:rgba(17,17,17,.25);
}
.auth-civility-item.active{
  background:#111;
  border-color:#111;
}
.auth-civility-item.active span{
  color:#fff;
}

/* =========================
   Accordéon Adresse
   ========================= */
.auth-accordion{
  width:100%;
  border:1px solid var(--auth-border);
  background:#fff;
  border-radius:14px;
  padding:12px 12px;
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap:2px 10px;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.auth-accordion:hover{
  border-color:rgba(17,17,17,.25);
  box-shadow:0 10px 24px rgba(0,0,0,.05);
}
.auth-accordion-title{
  font-weight:800;
  color:#111827;
  font-size:.95rem;
}
.auth-accordion-optional{
  font-weight:600;
  font-size:.78rem;
  color: var(--auth-muted);
  margin-left:6px;
}
.auth-accordion-meta{
  grid-column:1 / 2;
  font-size:.82rem;
  color: var(--auth-muted);
}
.auth-accordion-icon{
  grid-column:2 / 3;
  grid-row:1 / 3;
  align-self:center;
  justify-self:end;
  transition: transform .18s ease;
  color:#111827;
}
.auth-accordion-icon.open{
  transform: rotate(180deg);
}

.auth-accordion-panel{
  margin-top:10px;
  border:1px dashed rgba(0,0,0,.08);
  background:#fafafa;
  border-radius:14px;
  padding:12px;
}

/* terms + note */
.auth-terms{
  padding:10px 0;
}
.auth-note{
  margin:10px 0 0;
  font-size:.85rem;
  color: var(--auth-muted);
  text-align:center;
}

/* mobile */
@media (max-width:575px){
  .auth-accordion{
    padding:10px;
  }
  .auth-civility{
    gap:8px;
  }
  .auth-civility-item{
    height:36px;
    padding:0 12px;
  }
}