/* ==========================================================================
   Okaabo — page de connexion
   Mise en page calquee sur la maquette de reference : carte flottante sur fond
   teinte, formulaire a gauche, panneau promotionnel a droite avec vagues,
   carte translucide et pastilles rondes.
   Palette derivee du logo : or #FACB25 -> orange #DE7C01, gris chaud #524E4B.
   Charge apres style.css, surcharge .auth-wrapper sans toucher au theme.
   ========================================================================== */

:root {
    --okb-gold-light: #FACB25;
    --okb-gold: #FAC31B;
    --okb-amber: #F3AC01;
    --okb-orange: #EE9C01;
    --okb-orange-deep: #DE7C01;
    --okb-charcoal: #524E4B;
    --okb-ink: #241F1B;
    --okb-muted: #8C837B;
    --okb-line: #EBE4DA;
    --okb-tint: #FDF3E0;
    --okb-font: "Poppins", "Roboto", system-ui, -apple-system, sans-serif;
}

/* ---------- fond + carte flottante ---------- */

.okb-auth.auth-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 28px 24px;
    background: var(--okb-tint);
    background-image: radial-gradient(120% 90% at 80% 10%, #FFF9EE 0%, var(--okb-tint) 60%);
}

.okb-auth.auth-wrapper,
.okb-auth.auth-wrapper * {
    font-family: var(--okb-font);
}

.okb-card {
    display: flex;
    width: min(1020px, 100%);
    min-height: min(600px, calc(100vh - 64px));
    background: #fff;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(122, 74, 0, .16), 0 2px 8px rgba(122, 74, 0, .06);
}

/* le formulaire a gauche, le panneau promo a droite */
.okb-auth .auth-wrapper-right {
    order: 1;
    flex: 1 1 48%;
    max-width: none;
    min-height: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 40px;
}

.okb-auth .auth-wrapper-left {
    order: 2;
    flex: 1 1 52%;
    width: auto;
    background: none;
    padding: 0;
    display: block;
}

@media (max-width: 991.98px) {
    .okb-auth.auth-wrapper { padding: 0; background: #fff; }
    .okb-card { border-radius: 0; box-shadow: none; min-height: 100vh; }
    .okb-auth .auth-wrapper-left { display: none; }
    .okb-auth .auth-wrapper-right { flex: 1 1 100%; padding: 40px 20px; }
}

/* ---------- colonne formulaire ---------- */

.okb-auth .auth-wrapper-form {
    max-width: 400px;
    width: 100%;
    margin: 0;
    transform: none;
}

.okb-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 34px;
}

.okb-brand img {
    height: 58px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    object-position: left center;
    flex: none;
}

.okb-brand__name {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--okb-ink);
    line-height: 1;
}

.okb-auth .auth-header .title {
    font-size: 23px;
    font-weight: 700;
    color: var(--okb-ink);
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0 0 6px;
}

.okb-auth .auth-header .title + div {
    color: var(--okb-muted);
    font-size: 14.5px;
    line-height: 1.55;
}

.okb-auth .auth-header .mb-5 { margin-bottom: 18px !important; }

.okb-auth .input-label {
    font-weight: 600;
    color: var(--okb-ink);
    font-size: 13.5px;
    margin-bottom: 6px;
}

/* Champs a angles adoucis (10px), pas en pilule : les trois champs
   email, mot de passe et captcha doivent etre identiques. */
.okb-auth .form-control,
.okb-auth .form-control-lg {
    height: 54px;
    padding: 0 22px;
    font-size: 14.5px;
    border-radius: 10px;
    border: 1.5px solid var(--okb-line);
    background: #fff;
    color: var(--okb-ink);
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.okb-auth .form-control::placeholder { color: #BDB4AA; }

.okb-auth .form-control:focus {
    border-color: var(--okb-amber);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(243, 172, 1, .15);
}

/* ---------- champ mot de passe ----------
   Le markup et l'attribut data-hs-toggle-password-options sont conserves tels
   quels : la bascule oeil continue de fonctionner. Seul l'habillage change,
   l'icone passe A L'INTERIEUR du champ au lieu d'etre collee a cote.        */

.okb-auth .input-group-merge {
    position: relative;
    display: block;
}

.okb-auth .input-group-merge .form-control {
    width: 100%;
    padding-right: 56px;
}

/* Une regle du theme, non identifiable dans les feuilles (absente de
   cssRules), imposait 5px a ce champ malgre un !important. On monte la
   specificite avec le type d'element et l'ID pour l'aligner sur les autres. */
.okb-auth .input-group-merge input.form-control,
.okb-auth .input-group-merge .js-toggle-password,
.okb-auth input#signupSrPassword {
    border-radius: 10px !important;
}

.okb-auth .input-group-merge .input-group-append {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 8px;
    display: flex;
    align-items: center;
    margin: 0;
    z-index: 4;
}

.okb-auth .input-group-merge .input-group-text {
    height: 38px;
    width: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #B0A69B;
    font-size: 17px;
    transition: color .16s ease, background-color .16s ease;
}

.okb-auth .input-group-merge .input-group-text:hover {
    color: var(--okb-orange-deep);
    background: #FFF6E6;
}

.okb-auth .input-group-merge .input-group-append > a { text-decoration: none; }

/* ---------- lien mot de passe oublie ---------- */

.okb-auth .d-flex.justify-content-between {
    margin-top: 14px !important;
    align-items: center;
}

.okb-auth .text-primary {
    color: var(--okb-orange-deep) !important;
    font-size: 13.5px;
    font-weight: 600;
}

.okb-auth .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--okb-amber);
    border-color: var(--okb-amber);
}

.okb-auth .custom-control-label { font-size: 13.5px; }

/* ---------- bouton principal ---------- */

.okb-auth .btn--primary,
.okb-auth #signInBtn {
    height: 54px;
    background: linear-gradient(135deg, var(--okb-gold) 0%, var(--okb-orange-deep) 100%);
    border: none;
    border-radius: 27px;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .01em;
    box-shadow: 0 12px 24px rgba(222, 124, 1, .28);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.okb-auth .btn--primary:hover,
.okb-auth #signInBtn:hover {
    filter: saturate(1.06);
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(222, 124, 1, .34);
    color: #fff;
}

.okb-auth .btn--primary:focus-visible,
.okb-auth #signInBtn:focus-visible {
    outline: 3px solid rgba(243, 172, 1, .5);
    outline-offset: 2px;
}

/* etat de chargement : le libelle s'efface, un anneau tourne a sa place */
.okb-auth #signInBtn { position: relative; }

.okb-auth #signInBtn.is-loading {
    pointer-events: none;
    color: transparent !important;
    transform: none;
}

.okb-auth #signInBtn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    animation: okb-spin .7s linear infinite;
}

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

/* On ralentit plutot que de supprimer : le spinner reste le seul retour visuel. */
@media (prefers-reduced-motion: reduce) {
    .okb-auth #signInBtn.is-loading::after { animation-duration: 2s; }
}

/* ---------- captcha ----------
   Le bloc est genere par le gabarit d'origine avec des classes Bootstrap
   (row / col-6). On l'aligne sur les champs en pilule sans toucher au markup. */

.okb-auth #reload-captcha {
    margin: 18px 0 0 !important;
    padding: 0 !important;
    align-items: center;
    gap: 10px;
}

.okb-auth #reload-captcha > div {
    padding: 0 !important;
    max-width: none;
    flex: 1 1 0;
}

.okb-auth #custome_recaptcha {
    height: 48px;
    border: 1.5px solid var(--okb-line) !important;
    border-radius: 10px;
    padding: 0 20px;
    font-size: 14px;
}

.okb-auth #reload-captcha .bg-white {
    background: #FFF9EE !important;
    border: 1.5px solid var(--okb-line);
    border-radius: 10px;
    overflow: hidden;
    align-items: center;
    padding: 0 6px 0 10px;
    height: 48px;
}

.okb-auth #reload-captcha .bg-white img {
    height: 34px;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.okb-auth .capcha-spin {
    padding: 0 6px !important;
    display: grid;
    place-items: center;
    color: var(--okb-orange-deep);
    cursor: pointer;
}

.okb-auth .auto-fill-data-copy {
    margin-top: 22px;
    padding: 14px 16px;
    background: #FFF9EE;
    border: 1px solid rgba(243, 172, 1, .28);
    border-radius: 16px;
    font-size: 13px;
}

.okb-foot {
    margin-top: 18px;
    font-size: 12.5px;
    color: #B3AAA1;
}

/* ---------- panneau promotionnel ---------- */

.okb-cta {
    position: relative;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background: linear-gradient(150deg, var(--okb-gold-light) 0%, var(--okb-amber) 48%, var(--okb-orange-deep) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 40px;
}

.okb-waves {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* carte translucide */
.okb-glass {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 520px;
    border-radius: 26px;
    background: rgba(255, 255, 255, .17);
    border: 1px solid rgba(255, 255, 255, .28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 30px 36px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 20px 50px rgba(122, 74, 0, .16);
}

.okb-glass__title {
    color: #fff;
    font-size: clamp(26px, 2.5vw, 36px);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -.02em;
    margin: 0 0 12px;
    text-wrap: balance;
    text-shadow: 0 2px 12px rgba(122, 74, 0, .22);
}

.okb-glass__text {
    color: rgba(255, 255, 255, .95);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
    max-width: 38ch;
}

.okb-glass__art {
    width: 112%;
    max-width: none;
    height: auto;
    display: block;
    align-self: center;
    margin: 18px -6% -18px;
    filter: drop-shadow(0 18px 26px rgba(122, 74, 0, .26));
    animation: okb-float 6s ease-in-out infinite;
}

@keyframes okb-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
    .okb-glass__art { animation: none; }
}

/* pastilles rondes flottantes */
.okb-badge {
    position: absolute;
    z-index: 3;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    text-align: center;
    line-height: 1.15;
    box-shadow: 0 16px 34px rgba(122, 74, 0, .26);
}

.okb-badge__value {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: var(--okb-orange-deep);
}

.okb-badge__label {
    display: block;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--okb-muted);
}

.okb-badge--tr { top: 12%; inset-inline-end: 6%; }
.okb-badge--bl { bottom: 9%; inset-inline-start: 3%; }

@media (max-width: 1199.98px) {
    .okb-badge { display: none; }
    .okb-glass { padding: 34px 28px 0; }
}