/* ================================================================
   Partenaire — Formulaire d'inscription
   Cible : #partenaire-reg-form  (form-register.php)
================================================================ */

/* ── Reset ciblé ────────────────────────────────────────────── */
.partenaire-form-wrap *,
.partenaire-form-wrap *::before,
.partenaire-form-wrap *::after {
    box-sizing: border-box;
}

/* ── Conteneur ──────────────────────────────────────────────── */
.partenaire-form-wrap {
    width: 100%;
    padding-top: 4rem;
}

/* ── Notices succès / erreur ────────────────────────────────── */
.partenaire-form-notice {
    padding: 14px 18px;
    border-radius: 4px;
    margin-bottom: 18px;
    font-size: 15px;
    font-weight: 600;
}
.partenaire-form-notice--success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.partenaire-form-notice--error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ── Ligne de champ : 3 colonnes ─────────────────────────────
   [label-fr]  [input/select/upload]  [label-ar]
─────────────────────────────────────────────────────────────── */
.part-field {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    gap: 0 16px;
    margin-bottom: 10px;
}

/* ── Labels ─────────────────────────────────────────────────── */
.part-label {
    font-size: 14px;
    line-height: 1.4;
    color: #222;
}
.part-label--fr {
    text-align: left;
}
.part-label--ar {
    text-align: right;
    direction: rtl;
    font-family: 'Cairo', sans-serif;
}
.part-required {
    color: #e74c3c;
}

/* ── Inputs & selects ───────────────────────────────────────── */
#partenaire-reg-form input[type="text"],
#partenaire-reg-form input[type="email"],
#partenaire-reg-form input[type="tel"],
#partenaire-reg-form select {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    background: #f0f0f0;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

/* Flèche select custom */
#partenaire-reg-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FF4D10' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 14px) center;
    padding-right: 36px;
    cursor: pointer;
}

#partenaire-reg-form input:focus,
#partenaire-reg-form select:focus {
    outline: none;
}



/* ── Champ logo / photo ─────────────────────────────────────── */
.part-field--logo {
    align-items: flex-start;
}

.part-logo-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Zone de preview = le bouton d'upload visible dans la capture */
.part-logo-preview {
    width: 100%;
    height: 42px;
    background: #f0f0f0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

/* Icône upload SVG en fond */
.part-logo-preview:not(:has(img)) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Fallback pour navigateurs sans :has() */
.part-logo-preview:empty {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.part-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Masquer le vrai input file logo */
#part-logo-input {
    display: none;
}

/* Masquer le label "Choisir une image" — le clic se fait via la preview */
.part-logo-btn {
    display: none;
}

/* ── Champ wilaya prise en charge ────────────────────────────
   Le select est dans la colonne centrale.
   Les tags s'affichent en dessous, alignés sur la colonne centrale.
─────────────────────────────────────────────────────────────── */
.part-field:has(#part-prwilaya-select) {
    align-items: flex-start;
    padding-top: 2px;
}

/* Wrapper pour aligner select + tags dans la colonne centrale */
.part-field:has(#part-prwilaya-select) > select {
    /* select généré par partenaire_wilaya_select() sans wrapper */
    width: 100%;
}

.part-wilaya-tags {
    /* occupe toute la colonne centrale, en dessous du select */
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* Tags × Chlef × Laghouat */
.part-wil-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #333;
}

.part-wil-tag button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #FF4D10;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
}

/* ── Upload fichiers (documents) ─────────────────────────────── */
.part-file-upload {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Masquer l'input natif */
.part-file-upload input[type="file"] {
    display: none;
}

/* Bouton upload stylisé = pleine largeur avec icône */
.part-file-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    background: #f0f0f0;
    border-radius: 4px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: background-color 0.15s;
}

.part-file-btn:hover {
    background-color: #e4e4e4;
}

/* Nom du fichier sélectionné (masqué, non visible dans la capture) */
.part-file-name {
    display: none;
}

/* ── Bouton soumettre ────────────────────────────────────────── */
.part-field--submit {
    grid-template-columns: 1fr 2fr 1fr;
    margin-top: 8px;
}

/* Positionner le bouton dans la colonne centrale + droite */
.part-submit-btn {
    grid-column: 1 / 4;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 12px 32px;
    background: #FF4D10;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.part-submit-btn:hover {
    background: #e03d00;
}

.part-submit-btn__ar {
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
}

/* Loader */
.part-loading {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.part-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #ddd;
    border-top-color: #FF4D10;
    border-radius: 50%;
    animation: part-spin 0.7s linear infinite;
}
@keyframes part-spin { to { transform: rotate(360deg); } }

/* Message de validation */
.part-validation-msg {
    grid-column: 2;
    color: #e74c3c;
    font-size: 15px;
    font-weight: 600;
    margin: 15px 0 15px;
    text-align: center;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 680px) {
    .part-field {
        grid-template-columns: 1fr;
        gap: 4px;
        margin-bottom: 14px;
    }
    .part-label--ar {
        text-align: left;
        direction: ltr;
        order: -1; /* label AR en premier sur mobile si souhaité, sinon supprimer */
    }
    .part-wilaya-tags {
        grid-column: 1;
    }
    .part-field--submit {
        grid-template-columns: 1fr;
    }
    .part-submit-btn {
        grid-column: 1;
        justify-self: stretch;
        justify-content: center;
    }
}

/* ── Wilaya prise en charge ──────────────────────────────────── */
.part-wilprise-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.part-wilprise-wrap select {
    width: 100%;
}
.part-wilaya-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.part-wil-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    color: #333;
}
.part-wil-tag button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #FF4D10;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
}

/* ── reCAPTCHA ──────────────────────────────────────────────── */
.part-field--captcha {
    grid-template-columns: 1fr;
    margin-top: 6px;
    margin-bottom: 4px;
}
.part-field--captcha .g-recaptcha {
    display: flex;
    justify-content: center;
}