/* ============================================================
   BiZZY — Faz 74 : stil fòm pataje (opt-in)
   ------------------------------------------------------------
   Pa gen anyen isit la ki aplike sou yon paj SAN klas ".fom-bizzy".
   Se sèlman aranjman vizyèl: okenn chan, validasyon, nòm (name=),
   id oswa lojik PHP/JS pa chanje.

   Klas yo:
     .fom-bizzy     rasin (sou yon <div>, <form> oswa .card) — chan won,
                    etikèt klè, zetwal wouj sou chan obligatwa
     .fom-paj       limite lajè a (880px) epi santre l sou laptop
     .fom-grid      kontenè chan yo: 1 kolòn sou telefòn, 2 kolòn sou
                    laptop. Tout sa ki pa .mb-field / .mb-3 pran tout lajè.
     .fom-plen      yon chan ki dwe pran tout lajè (tèks long, upload...)
     .fom-chwa-gwoup / .fom-chwa   chwa radio an gwo bouton
     .fom-lejand    ti fraz "jaden ki make * obligatwa"
   ============================================================ */

.fom-bizzy{
    --fom-fon:     #F4F5FA;   /* fon chan yo */
    --fom-kontou:  #E4E7F0;   /* bòdi chan yo */
    --fom-etik:    #3B3F54;   /* koulè etikèt yo */
    --fom-pla:     #9AA0B4;   /* placeholder */
    --fom-sifas:   #FFFFFF;
    --fom-tit:     #141A34;
    --fom-dous:    #6B7280;
    --fom-oranj:   #F5821F;
    --fom-wouj:    #DC2626;
}
/* Vandè yo gen yon mòd fonse (data-theme="dark" sou <html>). */
[data-theme="dark"] .fom-bizzy{
    --fom-fon:     #1E2438;
    --fom-kontou:  #2C3552;
    --fom-etik:    #C9CEDD;
    --fom-pla:     #7C849B;
    --fom-sifas:   #161B2C;
    --fom-tit:     #E5E7EB;
    --fom-dous:    #8B93A7;
}

/* ---------- Lajè sou laptop ---------- */
.fom-bizzy.fom-paj{ max-width: 880px; margin-left: auto; margin-right: auto; }

/* ---------- Kat yo ---------- */
.fom-bizzy .bizzy-card{ padding: 24px 20px 22px; border-radius: 18px; }
.fom-bizzy .bizzy-card > h2{
    font-size: 1.28rem; font-weight: 700; letter-spacing: -0.01em;
    color: var(--fom-tit); margin-bottom: 6px;
}
/* Tit ki pa gen ti sou-tit anba l: bay l plis espas anvan premye chan an */
.fom-bizzy .bizzy-card > h2:not(:has(+ .card-subtitle)){ margin-bottom: 20px; }
.fom-bizzy .fom-grid > hr{ margin: 6px 0 22px; }
.fom-bizzy .bizzy-card > .card-subtitle,
.fom-bizzy .bizzy-card > .form-hint{
    font-size: 0.86rem; color: var(--fom-dous); line-height: 1.45; margin-bottom: 22px;
}
@media (min-width: 720px){
    .fom-bizzy .bizzy-card{ padding: 32px 36px 30px; border-radius: 20px; }
    .fom-bizzy .bizzy-card > h2{ font-size: 1.5rem; }
}

/* ---------- Grid: 1 kolòn telefòn / 2 kolòn laptop ---------- */
.fom-bizzy .fom-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 0;
    align-items: start;
}
@media (min-width: 720px){
    .fom-bizzy .fom-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fom-bizzy .fom-grid > *{ grid-column: 1 / -1; min-width: 0; }
@media (min-width: 720px){
    .fom-bizzy .fom-grid > .mb-field:not(.fom-plen),
    .fom-bizzy .fom-grid > .mb-3:not(.fom-plen){ grid-column: auto; }
}
.fom-bizzy .mb-field{ margin-bottom: 20px; }
.fom-bizzy .mb-3{ margin-bottom: 20px !important; }  /* Bootstrap mete !important sou .mb-3 */
.fom-bizzy .fom-grid > .btn{ margin-top: 4px; }
.fom-bizzy .mb-field > .form-hint{ margin-top: 7px; }

/* ---------- Etikèt, zetwal obligatwa ---------- */
.fom-bizzy .form-label{
    display: block; font-size: 0.9rem; font-weight: 600; color: var(--fom-etik);
    margin-bottom: 8px; line-height: 1.3;
}
.fom-bizzy .mb-field:has(input[required], select[required], textarea[required]) > .form-label:first-child::after,
.fom-bizzy .mb-3:has(input[required], select[required], textarea[required]) > .form-label:first-child::after{
    content: " *"; color: var(--fom-wouj); font-weight: 700;
}
.fom-bizzy .fom-lejand{
    margin: 14px 16px 0; font-size: 0.78rem; color: var(--fom-dous);
}
.fom-bizzy .fom-lejand b{ color: var(--fom-wouj); }
@media (min-width: 992px){
    .fom-bizzy .fom-lejand,
    .fom-bizzy .wizard-progress-wrap{ margin-left: 32px; margin-right: 32px; }
}

/* ---------- Chan yo ---------- */
.fom-bizzy .form-control,
.fom-bizzy .form-select{
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    font-size: 1rem;               /* 16px: iPhone pa zoume sou chan an */
    line-height: 1.35;
    color: var(--fom-tit);
    background-color: var(--fom-fon);
    border: 1px solid var(--fom-kontou);
    border-radius: 14px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.fom-bizzy textarea.form-control{ min-height: 112px; resize: vertical; }
.fom-bizzy .form-control::placeholder{ color: var(--fom-pla); opacity: 1; }
.fom-bizzy .form-control:focus,
.fom-bizzy .form-select:focus{
    background-color: var(--fom-sifas);
    border-color: var(--fom-oranj);
    box-shadow: 0 0 0 4px rgba(245,130,31,0.16);
    outline: 0;
}
/* Lis dewoulan: flèch klè, fon blan (tankou foto a) */
.fom-bizzy select.form-control,
.fom-bizzy select.form-select{
    -webkit-appearance: none; appearance: none;
    background-color: var(--fom-sifas);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    padding-right: 44px;
}
.fom-bizzy input[type="file"].form-control{ padding: 10px 14px; }

/* ---------- Ti tèks (endikasyon) ---------- */
.fom-bizzy .form-hint{ font-size: 0.78rem; line-height: 1.45; color: var(--fom-dous); }

/* ---------- Chwa radio an gwo bouton ---------- */
.fom-bizzy .fom-chwa-gwoup{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px;
}
.fom-bizzy .fom-chwa{
    position: relative; display: flex; align-items: center; gap: 10px; margin: 0;
    min-height: 50px; padding: 10px 14px; cursor: pointer;
    font-size: 0.9rem; font-weight: 600; line-height: 1.3; color: var(--fom-tit);
    background: var(--fom-fon); border: 1px solid var(--fom-kontou); border-radius: 14px;
    transition: border-color .15s ease, background-color .15s ease;
}
.fom-bizzy .fom-chwa input{ width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--fom-oranj); margin: 0; }
.fom-bizzy .fom-chwa:has(input:checked){ border-color: var(--fom-oranj); background: rgba(245,130,31,0.10); }
.fom-bizzy .fom-chwa:has(input:focus-visible){ box-shadow: 0 0 0 4px rgba(245,130,31,0.16); }

/* ---------- Bouton navigasyon asistan lan ---------- */
.fom-bizzy .wizard-nav{ margin-top: 6px; }
@media (min-width: 720px){
    .fom-bizzy .wizard-nav{ justify-content: flex-end; }
    .fom-bizzy .wizard-nav > button{ min-width: 170px; }
}

/* ---------- Ka espesyal: paj ki deja gen yon (*) wouj nan tèks la ---------- */
.fom-bizzy .form-label:has(> .text-danger)::after{ content: none !important; }

/* ---------- Bouton "montre modpas" (je) sou chan modpas ---------- */
.fom-bizzy .password-toggle{ position: relative; }
.fom-bizzy .password-toggle .form-control{ padding-right: 46px; }
.fom-bizzy .password-toggle .toggle-btn{
    top: auto; bottom: 13px; right: 12px; transform: none;
    width: 28px; height: 24px; padding: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    color: var(--fom-dous); background: none; border: 0;
}

/* ---------- Chwa Fi / Gason / Pa presize ---------- */
.fom-bizzy .sexe-switch{ gap: 10px; }
.fom-bizzy .sexe-switch label{
    min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 14px; font-size: 0.9rem; font-weight: 600;
    background: var(--fom-fon); border: 1px solid var(--fom-kontou); color: var(--fom-etik);
}
.fom-bizzy .sexe-switch input[type="radio"]:checked + label{
    border-color: var(--fom-oranj); color: var(--fom-oranj); background: rgba(245,130,31,0.10);
}

/* ---------- Bwat PIN opsyonèl + chan dezaktive ---------- */
.fom-bizzy .pin-inscription-box{ border-radius: 14px; background: var(--fom-fon); border-color: var(--fom-kontou); }
.fom-bizzy .form-control:disabled{ opacity: .6; cursor: not-allowed; }

/* ---------- Variant: .password-wrapper (securite.php, koneksyon_sekirite.php) ---------- */
.fom-bizzy .password-wrapper{ position: relative; }
.fom-bizzy .password-wrapper .form-control{ padding-right: 46px; }

/* Dènye chan nan yon kat: pa gen espas anba (pa double ak padding kat la) */
.fom-bizzy .bizzy-card > .mb-field:last-child,
.fom-bizzy .bizzy-card > .mb-3:last-child{ margin-bottom: 0 !important; }

/* ---------- Variant konpak (.fom-kont): paj ki gen lòt kat nan menm estil (ex: kòmand) ---------- */
.fom-bizzy.fom-kont .bizzy-card{ padding: 20px 18px; border-radius: 16px; }
.fom-bizzy.fom-kont .bizzy-card > h2{ font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; letter-spacing: 0; }