/* --- Styles Globaux du Plugin Agence Maritale Niger --- */

/* Préfixe "im-" pour éviter les conflits */

/* Palette de couleurs */
:root {
    --im-rose: #E91E63;
    --im-vert-clair: #A8E6CF;
    --im-bleu-ciel: #BDE4F4;
    --im-blanc: #FFFFFF;
    --im-gris-fonce: #333;
    --im-gris-clair: #f4f4f4;
}

/* Styles pour les pages de formulaires (Inscription, Connexion) */
.im-form-container {
    background: linear-gradient(135deg, var(--im-vert-clair), var(--im-bleu-ciel));
    padding: 2em;
    border-radius: 15px;
    max-width: 800px;
    margin: 2em auto;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    color: var(--im-gris-fonce);
}

/* [FIX-CSS-02] Mobile-first : adaptation du conteneur de formulaire sur petit écran.
 * Desktop (> 768px) reste la source de vérité. Ces surcharges réduisent le padding
 * et les marges sur mobile pour éviter le débordement et optimiser l'espace tactile. */
@media (max-width: 768px) {
    .im-form-container {
        padding: 1.4em 1.2em;
        margin: 1em auto;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
}

@media (max-width: 480px) {
    .im-form-container {
        padding: 1.1em 0.9em;
        margin: 0.5em auto;
        border-radius: 8px;
        box-shadow: none; /* Supprime l'ombre sur très petit écran — gain de rendu */
    }

    /* Champs de formulaire : taille de police plus grande (≥ 16px) pour éviter
     * le zoom automatique de Safari iOS lors du focus sur un <input> */
    .im-form-field input[type="text"],
    .im-form-field input[type="email"],
    .im-form-field input[type="password"],
    .im-form-field input[type="tel"],
    .im-form-field select,
    .im-form-field textarea {
        font-size: 16px;
    }
}

.im-form-container h4 {
    color: var(--im-rose);
    text-align: center;
    margin-bottom: 1.5em;
    font-weight: bold;
}

.im-form-field {
    margin-bottom: 1.5em;
}

.im-form-field label {
    display: block;
    margin-bottom: 0.5em;
    color: var(--im-rose);
    font-weight: 600;
}

.im-form-field input[type="text"],
.im-form-field input[type="email"],
.im-form-field input[type="password"],
.im-form-field input[type="tel"],
.im-form-field select,
.im-form-field textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: var(--im-blanc);
    box-sizing: border-box;
    transition: border-color 0.3s;
    color: #333;
}

/* Style pour la première option (placeholder) des listes déroulantes */
.im-form-field select:required:invalid {
    color: #757575; /* Une couleur grise pour le placeholder, plus visible */
}
.im-form-field option {
    color: #333; /* Couleur de texte normale pour les autres options */
}

/* Conteneur pour le champ mot de passe pour positionner l'icône */
.im-password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
/* L'input prend toute la largeur sauf l'espace pour le bouton oeil */
.im-password-wrapper input[type="password"],
.im-password-wrapper input[type="text"] {
    padding-right: 48px;
    width: 100%;
}
/* Fix #3 — Bouton oeil SVG : remplace dashicons, zero dépendance admin */
.im-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #757575;
    background: none;
    border: none;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.2s ease;
    line-height: 1;
    /* Dashicons (rétrocompatibilité ancien template) */
    font-size: 20px;
}
.im-password-toggle:hover,
.im-password-toggle:focus {
    color: var(--im-rose);
    outline: none;
}
/* Icône SVG dans le bouton */
.amn-eye-icon {
    width: 20px;
    height: 20px;
    display: block;
    pointer-events: none;
    stroke: currentColor;
}

.im-form-field input:focus,
.im-form-field select:focus,
.im-form-field textarea:focus {
    border-color: var(--im-rose);
    outline: none;
}

.im-form-field textarea {
    min-height: 120px;
    resize: vertical;
}

.im-form-field .im-field-description {
    font-size: 0.85em;
    color: #555;
    margin-top: 5px;
}

.im-word-counter {
    font-size: 0.9em;
    margin-top: 5px;
    font-weight: bold;
    transition: color 0.3s ease-in-out;
}
.im-word-counter-error {
    color: #c0392b; /* Rouge pour l'erreur */
}
.im-word-counter-success {
    color: #27ae60; /* Vert pour le succès */
}

.im-form-field .im-error-message {
    color: #D32F2F;
    font-size: 0.9em;
    margin-top: 5px;
    display: none; /* Affiché via JS */
}

/* Styles pour les boutons */
.im-button,
.im-form-container button {
    background-color: var(--im-rose);
    color: var(--im-blanc);
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s, transform 0.2s;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

.im-button:hover,
.im-form-container button:hover {
    background-color: #C2185B;
    transform: translateY(-2px);
}

.im-button-save {
    background-color: #4CAF50; /* Vert pour sauvegarder */
}
.im-button-save:hover {
    background-color: #388E3C;
}