/**
 * inscription.css
 *
 * Styles du formulaire d'inscription vendeur [ecla_vendor_inscription].
 *
 * CORRECTIONS v1.3 :
 *  - #2a : Fond bleu-ciel + accents orange. Style professionnel.
 *          La page a un dégradé bleu-ciel. La carte flotte avec bordure orange.
 *  - #2b : Barre de progression + compteur coloré pour la description (30-300 chars).
 *  - #1  : Logo img (.ecla-inscription-logo-img) supporté dans l'en-tête.
 *
 * Mobile-first — desktop est la source unique de vérité.
 *
 * @package AlibabaNiger
 * @since   1.2.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   VARIABLES LOCALES
   ═══════════════════════════════════════════════════════════════════════════ */
#ecla-inscription-wrapper {
    --ins-sky       : #e3f2fd;
    --ins-blue      : #1565c0;
    --ins-blue-dark : #0d47a1;
    --ins-orange    : #ff9900;
    --ins-orange-dk : #e68800;
    --ins-white     : #ffffff;
    --ins-text      : #1a2744;
    --ins-muted     : #546e7a;
    --ins-border    : rgba(21,101,192,0.18);
    --ins-shadow    : 0 8px 40px rgba(13,71,161,0.15);
    --ins-radius    : 16px;
    --ins-input-bg  : #f5faff;
    --ins-input-bd  : #c5d8f0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. WRAPPER — fond dégradé bleu-ciel
   ═══════════════════════════════════════════════════════════════════════════ */

#ecla-inscription-wrapper {
    min-height   : 100vh;
    display      : flex;
    flex-direction : column;
    align-items  : center;
    padding      : 24px 12px 40px;
    box-sizing   : border-box;
    font-family  : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   Helvetica, Arial, sans-serif;
    color        : var(--ins-text);

    background   :
        radial-gradient( ellipse at 75% 0%,   rgba(255,153,0,0.10) 0%, transparent 55% ),
        radial-gradient( ellipse at 5% 100%,   rgba(21,101,192,0.12) 0%, transparent 55% ),
        linear-gradient( 145deg, var(--ins-sky) 0%, #e8f4fd 50%, #d6eaf8 100% );
    background-attachment : fixed;
}

#ecla-inscription-wrapper *,
#ecla-inscription-wrapper *::before,
#ecla-inscription-wrapper *::after {
    box-sizing : inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. MESSAGE GLOBAL (succès / erreur)
   ═══════════════════════════════════════════════════════════════════════════ */

.ecla-inscription-msg {
    width         : 100%;
    max-width     : 660px;
    padding       : 14px 18px;
    border-radius : 10px;
    margin-bottom : 16px;
    font-size     : 15px;
    line-height   : 1.5;
    display       : none;
}

.ecla-inscription-msg.ecla-msg-success {
    background : #e8f5e9;
    border     : 1px solid #a5d6a7;
    color      : #2e7d32;
}

.ecla-inscription-msg.ecla-msg-error {
    background : #fff3e0;
    border     : 1px solid var(--ins-orange);
    color      : #bf360c;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. CARTE — formulaire flottant
   ═══════════════════════════════════════════════════════════════════════════ */

.ecla-inscription-card {
    background    : var(--ins-white);
    border        : 1.5px solid var(--ins-border);
    border-top    : 4px solid var(--ins-orange);
    border-radius : var(--ins-radius);
    padding       : 32px 24px 28px;
    box-shadow    : var(--ins-shadow);
    width         : 100%;
    max-width     : 660px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. EN-TÊTE (logo + titre + sous-titre)
   ═══════════════════════════════════════════════════════════════════════════ */

.ecla-inscription-header {
    text-align    : center;
    margin-bottom : 28px;
    padding-bottom: 20px;
    border-bottom : 1px solid #e3f0fd;
}

.ecla-inscription-logo-link {
    display       : inline-block;
    margin-bottom : 12px;
    text-decoration : none;
}

.ecla-inscription-logo-img {
    max-height : 64px;
    max-width  : 200px;
    width      : auto;
    height     : auto;
    object-fit : contain;
}

.ecla-inscription-logo-icon {
    display       : block;
    font-size     : 42px;
    margin-bottom : 8px;
}

.ecla-inscription-title {
    color        : var(--ins-blue-dark);
    font-size    : 1.5rem;
    font-weight  : 800;
    margin       : 0 0 6px;
    line-height  : 1.25;
    letter-spacing: -0.01em;
}

.ecla-inscription-subtitle {
    color      : var(--ins-muted);
    font-size  : 14px;
    margin     : 0;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. FIELDSET — type de compte
   ═══════════════════════════════════════════════════════════════════════════ */

.ecla-fieldset {
    border        : 1.5px solid #c5d8f0;
    border-radius : 10px;
    padding       : 16px 18px;
    margin        : 0 0 22px;
    background    : #f0f7ff;
}

.ecla-fieldset legend {
    font-weight  : 700;
    font-size    : 14px;
    padding      : 0 8px;
    color        : var(--ins-blue-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. GROUPES DE CHAMPS
   ═══════════════════════════════════════════════════════════════════════════ */

#ecla-inscription-form .ecla-form-group {
    margin-bottom : 18px;
}

#ecla-inscription-form .ecla-form-group label {
    display       : flex;
    align-items   : center;
    flex-wrap     : wrap;
    gap           : 4px;
    font-weight   : 600;
    font-size     : 13.5px;
    margin-bottom : 7px;
    color         : var(--ins-blue-dark);
    line-height   : 1.4;
}

.ecla-required {
    color       : var(--ins-orange);
    margin-left : 1px;
    font-weight : 700;
}

.ecla-optional {
    color      : var(--ins-muted);
    font-size  : 12px;
    font-weight: 400;
}

/* Inputs et select */
#ecla-inscription-form input[type="text"],
#ecla-inscription-form input[type="email"],
#ecla-inscription-form input[type="tel"],
#ecla-inscription-form input[type="url"],
#ecla-inscription-form input[type="number"],
#ecla-inscription-form select,
#ecla-inscription-form textarea {
    display       : block;
    width         : 100%;
    padding       : 11px 14px;
    border        : 1.5px solid var(--ins-input-bd);
    border-radius : 8px;
    font-size     : 15px;
    font-family   : inherit;
    color         : var(--ins-text);
    background    : var(--ins-input-bg);
    transition    : border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s;
    appearance    : none;
    -webkit-appearance : none;
}

#ecla-inscription-form input:focus,
#ecla-inscription-form select:focus,
#ecla-inscription-form textarea:focus {
    outline      : none;
    border-color : var(--ins-orange);
    background   : #fff;
    box-shadow   : 0 0 0 3px rgba(255,153,0,0.18);
}

#ecla-inscription-form select {
    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 fill='%231565c0' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat   : no-repeat;
    background-position : right 14px center;
    padding-right       : 36px;
}

/* Textarea description */
#ecla-vendor-description {
    resize     : vertical;
    min-height : 100px;
}

/* Erreurs inline */
.ecla-field-error {
    color      : #c0392b;
    font-size  : 12px;
    margin     : 5px 0 0;
    min-height : 16px;
    display    : none;
    line-height: 1.4;
}

/* ── Statut nom disponible (debounce) ── */
.ecla-field-status {
    font-size   : 12px;
    display     : inline-block;
    margin-left : 4px;
}

.ecla-field-status.ecla-status-ok    { color: #2e7d32; font-weight: 600; }
.ecla-field-status.ecla-status-error { color: #c0392b; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   7. CHECKBOXES PERSONNALISÉES (type de compte + politique)
   ═══════════════════════════════════════════════════════════════════════════ */

.ecla-checkbox-label {
    display     : flex;
    align-items : flex-start;
    gap         : 10px;
    cursor      : pointer;
    font-weight : 400;
    font-size   : 14px;
    line-height : 1.5;
    color       : var(--ins-text);
    padding     : 8px 10px;
    border-radius: 8px;
    transition  : background 0.15s;
    margin-bottom: 4px;
}

.ecla-checkbox-label:hover { background: #f0f7ff; }

.ecla-checkbox-label input[type="checkbox"] {
    width        : 18px;
    height       : 18px;
    min-width    : 18px;
    margin-top   : 2px;
    accent-color : var(--ins-orange);
    cursor       : pointer;
}

/* ── Bouton géolocalisation ── */
.ecla-form-group--geo { margin-bottom: 18px; }

.ecla-geo-btn {
    background    : var(--ins-input-bg);
    border        : 1.5px solid var(--ins-input-bd);
    border-radius : 8px;
    padding       : 10px 16px;
    font-size     : 14px;
    font-family   : inherit;
    cursor        : pointer;
    color         : var(--ins-blue);
    font-weight   : 600;
    display       : inline-flex;
    align-items   : center;
    gap           : 6px;
    transition    : background 0.2s, border-color 0.2s;
}

.ecla-geo-btn:hover {
    background   : #e3f0ff;
    border-color : var(--ins-blue);
}

.ecla-geo-status {
    font-size   : 12px;
    color       : var(--ins-muted);
    display     : none;
    margin-left : 8px;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. DESCRIPTION — BARRE DE PROGRESSION + COMPTEUR (CORRECTION #2b)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ligne compteur + hint au-dessus du textarea */
.ecla-desc-counter-bar {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    margin-bottom   : 5px;
}

.ecla-desc-hint {
    font-size  : 12px;
    color      : var(--ins-muted);
    font-style : italic;
}

.ecla-desc-counter {
    font-size   : 12.5px;
    font-weight : 700;
    color       : var(--ins-muted);
    transition  : color 0.2s;
    min-width   : 50px;
    text-align  : right;
}

/* Couleurs dynamiques du compteur (gérées par JS via classes) */
.ecla-desc-counter.is-too-short { color: #c0392b; }  /* < 30 chars */
.ecla-desc-counter.is-ok        { color: #2e7d32; }  /* 30–270 chars */
.ecla-desc-counter.is-warning   { color: #e67e22; }  /* 270–300 chars */
.ecla-desc-counter.is-full      { color: #c0392b; }  /* 300 chars atteint */

/* Barre de progression */
.ecla-desc-progress-track {
    height        : 4px;
    background    : #e0ecf8;
    border-radius : 2px;
    margin-bottom : 8px;
    overflow      : hidden;
}

.ecla-desc-progress-fill {
    height        : 100%;
    width         : 0%;
    background    : var(--ins-orange);
    border-radius : 2px;
    transition    : width 0.2s ease, background 0.2s;
}

/* Couleurs dynamiques de la barre (gérées par JS) */
.ecla-desc-progress-fill.is-too-short { background: #ef9a9a; }
.ecla-desc-progress-fill.is-ok        { background: var(--ins-orange); }
.ecla-desc-progress-fill.is-warning   { background: #ffb74d; }
.ecla-desc-progress-fill.is-full      { background: #c0392b; }

/* ═══════════════════════════════════════════════════════════════════════════
   9. BOUTON SUBMIT
   ═══════════════════════════════════════════════════════════════════════════ */

.ecla-form-submit {
    margin-top : 10px;
    text-align : center;
}

#ecla-inscription-submit {
    display        : block;
    width          : 100%;
    background     : linear-gradient( 135deg, var(--ins-orange) 0%, #ffb733 100% );
    color          : #fff;
    border         : none;
    border-radius  : 10px;
    padding        : 14px 24px;
    font-size      : 16px;
    font-weight    : 700;
    font-family    : inherit;
    cursor         : pointer;
    transition     : background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    letter-spacing : 0.02em;
    text-align     : center;
    box-shadow     : 0 4px 14px rgba(255,153,0,0.35);
}

#ecla-inscription-submit:hover:not(:disabled) {
    background : linear-gradient( 135deg, var(--ins-orange-dk) 0%, var(--ins-orange) 100% );
    transform  : translateY(-2px);
    box-shadow : 0 6px 20px rgba(255,153,0,0.42);
}

#ecla-inscription-submit:active:not(:disabled) {
    transform  : translateY(0);
    box-shadow : 0 2px 8px rgba(255,153,0,0.25);
}

#ecla-inscription-submit:disabled,
#ecla-inscription-submit[aria-disabled="true"] {
    background : #ccc;
    color      : #666;
    cursor     : not-allowed;
    opacity    : 0.7;
    transform  : none;
    box-shadow : none;
}

.ecla-form-note {
    margin-top : 10px;
    font-size  : 12px;
    color      : var(--ins-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. POLITIQUE DE CONFIDENTIALITÉ
   ═══════════════════════════════════════════════════════════════════════════ */

.ecla-form-group--policy {
    padding       : 12px 14px;
    background    : #f0f7ff;
    border-radius : 8px;
    border        : 1px solid #c5d8f0;
    margin-top    : 4px;
}

.ecla-form-group--policy a {
    color           : var(--ins-blue);
    text-decoration : underline;
    font-weight     : 600;
}

.ecla-form-group--policy a:hover {
    color : var(--ins-orange);
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. DARK MODE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
    /* Uniquement si la dark mode JS (.dark-mode) est gérée côté marketplace.
       Sur la page inscription, la dark mode n'est pas activée par défaut. */
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. RESPONSIVE MOBILE (≤ 640px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

    #ecla-inscription-wrapper {
        padding    : 12px 8px 32px;
        background-attachment : scroll;
    }

    .ecla-inscription-card {
        border-radius : 12px;
        padding       : 22px 14px 20px;
    }

    .ecla-inscription-logo-img { max-height: 48px; }

    .ecla-inscription-title { font-size: 1.25rem; }

    #ecla-inscription-form input,
    #ecla-inscription-form select,
    #ecla-inscription-form textarea {
        font-size : 16px; /* Prevent zoom on iOS */
    }

    .ecla-gallery-active-img { max-height: 200px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. RESPONSIVE DESKTOP (≥ 769px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {

    #ecla-inscription-wrapper { padding: 40px 0 60px; }

    .ecla-inscription-card {
        padding    : 44px 52px 40px;
        max-width  : 680px;
    }

    .ecla-inscription-logo-img { max-height: 72px; }

    #ecla-inscription-submit {
        display   : inline-block;
        width     : auto;
        min-width : 260px;
    }

    #ecla-inscription-form input,
    #ecla-inscription-form select {
        padding   : 12px 15px;
        font-size : 15.5px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. ACCESSIBILITÉ — prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    #ecla-inscription-submit,
    .ecla-geo-btn,
    .ecla-checkbox-label,
    .ecla-desc-progress-fill,
    .ecla-desc-counter,
    #ecla-inscription-form input,
    #ecla-inscription-form select,
    #ecla-inscription-form textarea {
        transition : none;
    }
}