/* ============================================================
   Redesign visuel de la page "Candidature vendeur" (seller-application).
   Aucune structure/id/name/class existante n'est modifiée :
   uniquement de la présentation (CSS), scopée à cette page.
   Réutilise les mêmes variables et les mêmes règles déjà validées sur
   mp_seller_form_redesign.css (formulaire produit) et
   mp_seller_profile_redesign.css (profil vendeur) pour garder un style
   uniforme entre tous les formulaires vendeur.
   Nécessite :has() (Chrome/Edge/Safari 15.4+/Firefox 121+) — sans lui,
   tout fonctionne quand même, seul le regroupement Prénom/Nom sur une
   ligne en desktop ne s'applique pas (les champs restent l'un sous l'autre).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body#module-ets_marketplace-registration {
    --mp-bg: #fafafa;
    --mp-surface: #ffffff;
    --mp-ink: #111111;
    --mp-muted: #767676;
    --mp-border: #e4e4e2;
    --mp-border-soft: #eeeeec;
    --mp-tint: #f2f2f0;
    --mp-radius: 10px;
    --mp-shadow: 0 1px 2px rgba(17, 17, 17, .05);
}

body#module-ets_marketplace-registration,
body#module-ets_marketplace-registration input,
body#module-ets_marketplace-registration select,
body#module-ets_marketplace-registration textarea,
body#module-ets_marketplace-registration button,
body#module-ets_marketplace-registration label {
    font-family: 'Inter', system-ui, sans-serif;
}
body#module-ets_marketplace-registration .ets_mp_register_page {
    color: var(--mp-ink);
    background: var(--mp-bg);
    padding: 16px;
    border-radius: var(--mp-radius);
}

/* ---------- Carte du formulaire ---------- */
body#module-ets_marketplace-registration .panel {
    background: var(--mp-surface);
    border: 1px solid var(--mp-border-soft);
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    padding: 28px 28px 20px;
    max-width: 760px;
    margin: 0 auto;
}
body#module-ets_marketplace-registration #seller-register-form > h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 20px;
    text-align: center;
    color: var(--mp-ink);
}

/* ---------- Lignes de champs ---------- */
/* La section directe du form devient un conteneur flex : chaque champ est
   plein largeur par défaut, sauf Prénom/Nom qu'on place côte à côte en
   desktop (regroupement demandé pour une vue plus compacte). */
body#module-ets_marketplace-registration #seller-register-form > section {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
}
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0;
    padding: 14px 0;
}
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="first_name"]),
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="last_name"]) {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
}
@media (max-width: 600px) {
    body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="first_name"]),
    body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="last_name"]) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Empile label au-dessus du champ plutôt que la grille Bootstrap
   col-md-3 / col-md-9 côte à côte (même logique que le profil vendeur). */
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row > .col-md-3,
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row > .col-md-9,
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row > .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
}

/* ---------- Ordre des champs ----------
   Le conteneur (section) est en flex : on réordonne visuellement sans
   toucher au DOM/HTML via la propriété order. Valeurs non listées par
   l'utilisateur (mot de passe, téléphone, Instagram, CGV) placées à un
   endroit logique par défaut. */
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="shop_logo"]) { order: -100; }
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="seller_name"]),
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="first_name"]) { order: 10; }
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="last_name"]) { order: 11; }
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="seller_email"]),
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="email"]) { order: 20; }
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="password"]) { order: 21; }
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="shop_name"]) { order: 30; }
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(select[name="id_shop_category"]) { order: 40; }
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(textarea[name="shop_description"]) { order: 50; }
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="shop_address"]) { order: 60; }
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="shop_city"]) { order: 70; }
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(select[name="id_country"]) { order: 80; }
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="vat_number"]) { order: 90; }
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="siret"]) { order: 91; }
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="shop_phone"]) { order: 100; }
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="link_instagram"]) { order: 110; }
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(#ets_mp_temp_link_registration) { order: 120; }

/* Renommage des labels "Nom du shop / Spécialité / Bio-Description / Adresse" :
   fait proprement via les fichiers de traduction du module
   (modules/ets_marketplace/translations/fr.php), pas en CSS. */

/* ---------- Labels & champs ---------- */
body#module-ets_marketplace-registration .form-control-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
    color: var(--mp-ink);
}
body#module-ets_marketplace-registration .form-control-label:empty,
body#module-ets_marketplace-registration label.form-control-label.clearfix {
    display: none;
}
body#module-ets_marketplace-registration .col-md-12.clearfix {
    display: none;
}

/* Champ "Introduction" retiré du formulaire (non requis côté BO : pas
   d'astérisque affiché avant ce changement). */
body#module-ets_marketplace-registration .form-group.row:has(textarea[name="message_to_administrator"]) {
    display: none !important;
}
body#module-ets_marketplace-registration input[type="text"].form-control,
body#module-ets_marketplace-registration input[type="email"].form-control,
body#module-ets_marketplace-registration input[type="password"].form-control,
body#module-ets_marketplace-registration input[type="tel"].form-control,
body#module-ets_marketplace-registration select.form-control,
body#module-ets_marketplace-registration textarea.form-control {
    border: 1px solid var(--mp-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 14.5px;
    padding: 10px 12px;
    width: 100%;
}
body#module-ets_marketplace-registration input[type="text"].form-control:focus,
body#module-ets_marketplace-registration input[type="email"].form-control:focus,
body#module-ets_marketplace-registration input[type="password"].form-control:focus,
body#module-ets_marketplace-registration input[type="tel"].form-control:focus,
body#module-ets_marketplace-registration select.form-control:focus,
body#module-ets_marketplace-registration textarea.form-control:focus {
    border-color: var(--mp-ink) !important;
}
body#module-ets_marketplace-registration input.form-control:disabled {
    background: var(--mp-tint) !important;
    color: var(--mp-muted);
}
body#module-ets_marketplace-registration textarea.form-control { min-height: 92px; resize: vertical; }

/* Aide sous "Introduction" */
body#module-ets_marketplace-registration .form-control-comment {
    font-size: 12.5px;
    color: var(--mp-muted);
    margin-top: -4px;
}

/* ---------- Logo de la boutique : même format que /seller-profile
   (avatar rond centré en tête de formulaire), avec une icône par défaut
   tant qu'aucune photo n'est choisie. mp_seller_registration_redesign.js
   affiche un aperçu de l'image sélectionnée en posant la variable CSS
   --mp-logo-preview (aucune balise <img> n'existe dans ce template
   vendeur : on ne l'ajoute donc pas et on simule l'avatar en CSS). */
/* Prefixé par "#seller-register-form > section >" pour être au moins aussi
   spécifique que la règle générique .form-group.row (qui a déjà 2 ID :
   body#module-... ET #seller-register-form) — sans ça, son align-items:flex-start
   gagne quand même et décale le logo à gauche au lieu de le centrer. */
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="shop_logo"]) {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 16px 26px !important;
    border-bottom: 1px solid var(--mp-border-soft);
}
body#module-ets_marketplace-registration .form-group.row:has(input[name="shop_logo"]) > label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}
body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row:has(input[name="shop_logo"]) > .col-md-9 {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
}
body#module-ets_marketplace-registration .form-group.row:has(input[name="shop_logo"]) > .col-md-9::before {
    content: "";
    display: block;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    margin: 0 auto 14px;
    background-color: var(--mp-tint);
    background-image: var(--mp-logo-preview, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='%23c7c7c4'/%3E%3Cpath d='M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7' fill='%23c7c7c4'/%3E%3C/svg%3E"));
    background-size: var(--mp-logo-bg-size, 56px 56px);
    background-position: center;
    background-repeat: no-repeat;
    border: 4px solid #fff;
    box-shadow: 0 0 0 1px var(--mp-border), 0 6px 18px rgba(17,17,17,.10);
}
body#module-ets_marketplace-registration .form-group.row:has(input[name="shop_logo"]) .ets_upload_file_custom {
    margin-top: 0;
}
body#module-ets_marketplace-registration .form-group.row:has(input[name="shop_logo"]) .desc {
    max-width: 300px;
    margin: 10px auto 0;
}

/* Ville / Code postal déjà en flex inline dans le template : on garde,
   on empile juste en dessous de 420px. */
@media (max-width: 420px) {
    body#module-ets_marketplace-registration .form-group.row:has(input[name="shop_city"]) > [style*="display:flex"] {
        flex-wrap: wrap;
    }
    body#module-ets_marketplace-registration .form-group.row:has(input[name="shop_city"]) input {
        flex: 1 1 100% !important;
    }
}

/* ---------- Upload logo (bouton "Choose file") ----------
   front.css (vendeur) pose `.custom-file-label, .custom-file-label::after {
   position:absolute; ...}` + `padding-right:85px !important` : les deux
   enfants de .ets_upload_file_custom se retrouvent hors flux et le
   conteneur s'effondre. Même correctif que sur le profil vendeur. */
body#module-ets_marketplace-registration .ets_upload_file_custom {
    position: relative;
    display: inline-flex;
}
body#module-ets_marketplace-registration .custom-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
body#module-ets_marketplace-registration .custom-file-label {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
    text-overflow: clip !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 0;
    line-height: normal;
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 999px !important;
    background: var(--mp-tint) !important;
    box-shadow: none !important;
    color: var(--mp-ink);
    cursor: pointer;
    z-index: 1;
}
body#module-ets_marketplace-registration .custom-file-label::after {
    position: static !important;
    content: "Choisir un fichier";
    font-size: 13px;
    font-weight: 600;
    background: transparent !important;
    color: var(--mp-ink) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
}
body#module-ets_marketplace-registration .custom-file-label:hover { background: var(--mp-border) !important; }
body#module-ets_marketplace-registration .desc {
    font-size: 12px;
    color: var(--mp-muted);
    margin-top: 8px;
}
body#module-ets_marketplace-registration .desc.desc-warning {
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 8px;
}
body#module-ets_marketplace-registration .ets_mp_radio_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}
body#module-ets_marketplace-registration .ets_mp_radio_list label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--mp-ink);
    font-weight: 400;
    cursor: pointer;
    margin: 0;
}

/* ---------- Case à cocher CGV ---------- */
body#module-ets_marketplace-registration .form-group.row:has(#ets_mp_temp_link_registration) label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--mp-ink);
    font-weight: 400;
    cursor: pointer;
}
body#module-ets_marketplace-registration #ets_mp_temp_link_registration {
    margin-top: 3px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--mp-ink);
    cursor: pointer;
}

/* ---------- Bouton Submit ---------- */
body#module-ets_marketplace-registration .form-footer {
    display: flex;
    padding-top: 18px;
    margin-top: 6px;
    border-top: 1px solid var(--mp-border-soft);
}
body#module-ets_marketplace-registration .form-footer > .col-md-3 {
    display: none;
}
body#module-ets_marketplace-registration .form-footer > .col-md-9 {
    flex: 0 0 100%;
    max-width: 100%;
}
body#module-ets_marketplace-registration .btn.form-control-submit {
    background: var(--mp-ink) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 22px !important;
    font-weight: 600;
    font-size: 14.5px;
    float: none !important;
}
body#module-ets_marketplace-registration .btn.form-control-submit:hover { background: #000 !important; }
@media (max-width: 600px) {
    body#module-ets_marketplace-registration .btn.form-control-submit { width: 100%; }
}

/* ---------- Mobile ----------
   Rapproché d'une appli mobile : liste de champs plus compacte
   (moins d'espace vertical entre les lignes) mais des champs plus
   grands/faciles à toucher (hauteur d'input augmentée, et 16px pour
   éviter le zoom automatique iOS au focus). */
@media (max-width: 767px) {
    body#module-ets_marketplace-registration .ets_mp_register_page {
        padding: 10px;
    }
    body#module-ets_marketplace-registration .panel {
        padding: 20px 16px 16px;
    }
    body#module-ets_marketplace-registration #seller-register-form > section > .form-group.row {
        padding: 8px 0;
    }
    body#module-ets_marketplace-registration input[type="text"].form-control,
    body#module-ets_marketplace-registration input[type="email"].form-control,
    body#module-ets_marketplace-registration input[type="password"].form-control,
    body#module-ets_marketplace-registration input[type="tel"].form-control,
    body#module-ets_marketplace-registration select.form-control {
        padding: 14px 14px;
        font-size: 16px;
    }
    body#module-ets_marketplace-registration textarea.form-control {
        padding: 14px 14px;
        font-size: 16px;
    }
}