/* ═══════════════════════════════════════════════════════════
   UNIDET v2 — Formulaire de dépôt : Validation & UX
   Fichier : /unidet-v2/deposit/assets/deposit-form.css
   ═══════════════════════════════════════════════════════════ */

/* ─── Alignement montant + devise ─── */
#unidet-creance-form .unidet-depot-amount {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
}
#unidet-creance-form .unidet-depot-amount input[type="text"],
#unidet-creance-form .unidet-depot-amount select {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
#unidet-creance-form .unidet-depot-amount input[type="text"] {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 14px !important;
}
#unidet-creance-form .unidet-depot-amount select {
    flex: 0 0 auto !important;
    padding: 0 32px 0 14px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-position: right 10px center !important;
}

/* ─── Compactage Section 1 ─── */
#unidet-creance-form .unidet-section1-grid { gap: 10px 12px !important; }
#unidet-creance-form .unidet-error-msg:empty,
#unidet-creance-form .unidet-phone-msg:empty { display: none !important; }
#unidet-creance-form .unidet-error-msg:not(:empty),
#unidet-creance-form .unidet-phone-msg:not(:empty) {
    margin-top: 4px !important;
    line-height: 1.3 !important;
}

/* ─── Messages d'erreur inline ─── */
#unidet-creance-form .ud-inline-error {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 5px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #DC2626 !important;
    line-height: 1.35 !important;
}
#unidet-creance-form .ud-inline-error::before {
    content: '⚠' !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
}

/* ─── États inputs ─── */
#unidet-creance-form input.ud-error,
#unidet-creance-form textarea.ud-error,
#unidet-creance-form select.ud-error {
    border-color: #DC2626 !important;
    background-color: #FEF2F2 !important;
}
#unidet-creance-form input.ud-success,
#unidet-creance-form textarea.ud-success,
#unidet-creance-form select.ud-success {
    border-color: #10B981 !important;
    background-color: #F0FDF4 !important;
}

/* ─── Shake animation ─── */
@keyframes udShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}
#unidet-creance-form .ud-shake {
    animation: udShake 0.35s ease !important;
}

/* ─── Highlight du 1er champ en erreur ─── */
@keyframes udHighlight {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
    50% { box-shadow: 0 0 0 6px rgba(220,38,38,0.18); }
}
#unidet-creance-form .ud-highlight {
    animation: udHighlight 1.6s ease !important;
}

/* ─── Bouton "Réinitialiser les préférences" ─── */
#unidet-creance-form .unidet-reset-prefs {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 10px !important;
    background: #fff !important;
    border: 1px solid #E5E9F0 !important;
    border-radius: 7px !important;
    color: #64748B !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    margin-left: auto !important;
}
#unidet-creance-form .unidet-reset-prefs:hover {
    background: #FEF2F2 !important;
    border-color: #FECACA !important;
    color: #DC2626 !important;
}
#unidet-creance-form .unidet-reset-prefs svg {
    width: 12px !important;
    height: 12px !important;
    stroke: currentColor !important;
}

/* ─── Popup récap erreurs ─── */
.ud-errors-modal {
    text-align: left !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
.ud-errors-modal h3 {
    margin: 0 0 4px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0A0E17 !important;
    text-align: center !important;
}
.ud-errors-modal .ud-errors-sub {
    margin: 0 0 16px !important;
    font-size: 13px !important;
    color: #64748B !important;
    text-align: center !important;
    line-height: 1.5 !important;
}
.ud-errors-modal .ud-errors-list {
    max-height: 280px !important;
    overflow-y: auto !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.ud-errors-modal .ud-errors-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    background: #FEF2F2 !important;
    border-left: 3px solid #DC2626 !important;
    border-radius: 0 8px 8px 0 !important;
    margin-bottom: 6px !important;
    font-size: 12.5px !important;
    color: #7F1D1D !important;
    line-height: 1.45 !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
}
.ud-errors-modal .ud-errors-list li:hover {
    background: #FEE2E2 !important;
}
.ud-errors-modal .ud-errors-list li .ud-err-icon {
    font-weight: 800 !important;
    flex-shrink: 0 !important;
}
.ud-errors-modal .ud-errors-list li .ud-err-text strong {
    font-weight: 800 !important;
    color: #991B1B !important;
    display: block !important;
    margin-bottom: 1px !important;
}

/* ═══════════════════════════════════════════════════════════
   🎯 FIX — Masquer les messages d'erreur VIDES
   ═══════════════════════════════════════════════════════════ */

#unidet-creance-form .unidet-error-msg:not([data-active="1"]),
#unidet-creance-form .unidet-phone-msg:not([data-active="1"]) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#unidet-creance-form .unidet-error-msg[data-active="1"] {
    display: block !important;
    visibility: visible !important;
    margin-top: 4px !important;
    line-height: 1.35 !important;
}

/* ═══════════════════════════════════════════════════════════
   🎯 FIX — Trigger Pays : fond blanc, cohérent avec les autres champs
   ═══════════════════════════════════════════════════════════ */

#unidet-creance-form .unidet-country-trigger,
#unidet-creance-form .unidet-country-trigger:hover,
#unidet-creance-form .unidet-country-trigger:focus,
#unidet-creance-form .unidet-country-trigger:focus-visible,
#unidet-creance-form .unidet-country-trigger:active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #0A0E17 !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 9px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    text-align: left !important;
}
#unidet-creance-form .unidet-country-trigger:focus,
#unidet-creance-form .unidet-country-trigger:focus-visible {
    border-color: #0A0E17 !important;
    box-shadow: 0 0 0 3px rgba(10, 14, 23, 0.07) !important;
    outline: none !important;
}
#unidet-creance-form .unidet-country-trigger-flag {
    font-size: 18px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}
#unidet-creance-form .unidet-country-trigger-label {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0A0E17 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#unidet-creance-form .unidet-country-trigger-label.is-placeholder {
    color: #94A3B8 !important;
    font-weight: 500 !important;
}
#unidet-creance-form .unidet-country-trigger-arrow {
    width: 0 !important;
    height: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 6px solid #64748B !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s !important;
}
#unidet-creance-form .unidet-country-wrapper.is-open .unidet-country-trigger-arrow {
    transform: rotate(180deg) !important;
}

/* Select natif caché (déjà aria-hidden mais on le verrouille) */
#unidet-creance-form select.unidet-country-native-select {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Dropdown pays : mêmes codes visuels */
#unidet-creance-form .unidet-country-dropdown {
    background: #fff !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(10, 14, 23, 0.12) !important;
    margin-top: 6px !important;
    overflow: hidden !important;
    z-index: 50 !important;
}
#unidet-creance-form .unidet-country-search {
    width: 100% !important;
    padding: 10px 14px !important;
    border: none !important;
    border-bottom: 1px solid #F1F5F9 !important;
    background: #F8FAFC !important;
    color: #0A0E17 !important;
    font-size: 13px !important;
    outline: none !important;
}
#unidet-creance-form .unidet-country-list {
    max-height: 260px !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 4px !important;
    list-style: none !important;
}
#unidet-creance-form .unidet-country-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: #0A0E17 !important;
    transition: background 0.12s !important;
}
#unidet-creance-form .unidet-country-item:hover {
    background: #FEFCF7 !important;
}
#unidet-creance-form .unidet-country-item.is-selected {
    background: #FEF3C7 !important;
    font-weight: 700 !important;
}
#unidet-creance-form .unidet-country-item-flag {
    font-size: 17px !important;
    flex-shrink: 0 !important;
}
#unidet-creance-form .unidet-country-item-name {
    flex: 1 !important;
    min-width: 0 !important;
}
#unidet-creance-form .unidet-country-item-check {
    opacity: 0 !important;
    color: #C9A227 !important;
    font-weight: 900 !important;
}
#unidet-creance-form .unidet-country-item.is-selected .unidet-country-item-check {
    opacity: 1 !important;
}

/* 🎯 Select devise avec drapeau image */
.udep-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.udep-select-flag {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 15px;
    border-radius: 2px;
    object-fit: cover;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.udep-select-wrapper .udep-select {
    padding-left: 44px !important;   /* place pour le drapeau */
}

/* ═══════════════════════════════════════════════════════════
   🎯 FIX — Placeholder du téléphone TOUJOURS visible (même au focus)
   ═══════════════════════════════════════════════════════════ */

#unidet-creance-form .unidet-phone-wrapper .iti input[type="tel"]::placeholder,
#unidet-creance-form .unidet-phone-wrapper input.unidet-tel-input::placeholder {
    color: #94A3B8 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

/* ⭐ LE FIX : bloque la disparition au focus */
#unidet-creance-form .unidet-phone-wrapper .iti input[type="tel"]:focus::placeholder,
#unidet-creance-form .unidet-phone-wrapper input.unidet-tel-input:focus::placeholder {
    color: #94A3B8 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Bloque aussi les couleurs WebKit qui peuvent s'appliquer */
#unidet-creance-form .unidet-phone-wrapper .iti input[type="tel"]::-webkit-input-placeholder {
    color: #94A3B8 !important;
    opacity: 1 !important;
}

#unidet-creance-form .unidet-phone-wrapper .iti input[type="tel"]::-moz-placeholder {
    color: #94A3B8 !important;
    opacity: 1 !important;
}

#unidet-creance-form .unidet-phone-wrapper .iti input[type="tel"],
#unidet-creance-form .unidet-phone-wrapper input.unidet-tel-input {
    padding: 0 14px 0 38px !important;   /* ⬅️ 88px (8px de moins) */
}

/* ═══════════════════════════════════════════════════════════
   🎯 Note commission — visible en permanence
   ═══════════════════════════════════════════════════════════ */
.unidet-offre-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin: 14px 0 18px;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.55;
    color: #1E40AF;
}

.unidet-offre-note-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    background: #3B82F6;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    font-style: italic;
    flex-shrink: 0;
    margin-top: 1px;
    font-family: Georgia, serif;
}

.unidet-offre-note-text {
    flex: 1;
    min-width: 0;
    color: #1E40AF;
}

.unidet-offre-note-text strong {
    color: #1E3A8A;
    font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════
   🎯 NUCLEAR FIX — Force l'affichage des champs en erreur
   Une règle quelque part fait `display:none` sur .ud-error
   → on la bat avec cette déclaration ultra-spécifique
   ═══════════════════════════════════════════════════════════ */

html body #unidet-creance-form input.ud-error,
html body #unidet-creance-form input.unidet-input-error,
html body #unidet-creance-form textarea.ud-error,
html body #unidet-creance-form textarea.unidet-input-error,
html body #unidet-creance-form select.ud-error,
html body #unidet-creance-form select.unidet-input-error {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 46px !important;
    width: 100% !important;
    position: static !important;
    overflow: visible !important;
    clip-path: none !important;
}

/* 🎯 Et pour être sûr : tous les inputs texte ont un display garanti */
html body #unidet-creance-form input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="file"]):not([type="submit"]),
html body #unidet-creance-form textarea {
    display: block !important;
    visibility: visible !important;
}

/* Et leurs parents ne doivent pas être en overflow:hidden */
html body #unidet-creance-form .unidet-depot-field {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
}