/**
 * Popup de connexion / inscription / mot de passe oublie — DIALOGUE UNIQUEMENT
 *
 * Ce fichier n'est charge que lorsque la popup est rendue. Il ne doit donc
 * contenir QUE ce qui est propre au dialogue : voile, positionnement, feuille
 * mobile, animations, bouton de fermeture, verrou de defilement.
 *
 * L'habillage du formulaire lui-meme (titres, champs, boutons, erreurs, liens
 * de bascule, separateur) vit dans login-forms.css, charge aussi bien ici que
 * sur /mon-compte/ : le formulaire vient du meme partiel PHP dans les deux cas
 * et doit avoir exactement la meme apparence. Ne rien redefinir ici qui existe
 * la-bas, sous peine de faire diverger a nouveau les deux contextes.
 *
 * @package TT_Expert_Child
 */

/* ── Racine ────────────────────────────────────────────────── */

/* Repli sans JS : le PHP rend la popup avec l'attribut `hidden`, la regle
   ci-dessous garantit qu'aucun display posterieur ne la revele. */
.pg-login-modal[hidden] {
    display: none;
}

.pg-login-modal {
    position: fixed;
    inset: 0;
    z-index: var(--pg-z-login-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.pg-login-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--pg-overlay);
    animation: pgLoginModalFade 0.18s ease-out;
}

/* ── Boite de dialogue ─────────────────────────────────────── */

.pg-login-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 440px;
    /* dvh : sur mobile la barre d'URL et le clavier virtuel modifient la
       hauteur visible, vh resterait fige et cacherait le bas du formulaire. */
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--pg-white);
    border-radius: var(--pg-radius-md);
    box-shadow: var(--pg-shadow-md);
    animation: pgLoginModalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Le dialogue porte tabindex="-1" : c'est le repli de focus quand il ne
   contient aucun element focusable. Sans anneau visible impose, mais on garde
   un contour au clavier pour ne pas perdre le reperage. */
.pg-login-modal__dialog:focus {
    outline: none;
}

.pg-login-modal__dialog:focus-visible {
    outline: 2px solid var(--pg-galaxy);
    outline-offset: -2px;
}

.pg-login-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--pg-radius-sm);
    color: var(--pg-grey-medium);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.pg-login-modal__close:hover {
    background: var(--pg-light-grey);
    color: var(--pg-dark);
}

.pg-login-modal__close svg {
    width: 16px;
    height: 16px;
    display: block;
}

.pg-login-modal__body {
    padding: 32px 28px 28px;
}

/* ── Mobile : feuille pleine largeur ancree en bas ─────────── */

@media (max-width: 600px) {
    .pg-login-modal {
        align-items: flex-end;
        padding: 0;
    }

    .pg-login-modal__dialog {
        max-width: none;
        /* Hauteur souple : le dialogue ne prend que la place necessaire mais
           defile en interne des que le clavier virtuel reduit la fenetre. */
        max-height: 92dvh;
        border-radius: var(--pg-radius-md) var(--pg-radius-md) 0 0;
        animation-name: pgLoginModalUp;
    }

    .pg-login-modal__body {
        padding: 28px 20px calc(24px + env(safe-area-inset-bottom));
    }
}

/* Sous 360px les marges laterales du corps deviennent couteuses. */
@media (max-width: 360px) {
    .pg-login-modal__body {
        padding: 24px 16px calc(20px + env(safe-area-inset-bottom));
    }
}

/* ── Animations ────────────────────────────────────────────── */

@keyframes pgLoginModalFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pgLoginModalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

@keyframes pgLoginModalUp {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pg-login-modal__backdrop,
    .pg-login-modal__dialog {
        animation: none;
    }
}