/**
 * Formulaires de compte partages (connexion / inscription / mot de passe oublie)
 *
 * Habillage du markup rendu par inc/woocommerce/parts/login-forms.php.
 * Ce partiel est la source UNIQUE du formulaire : il est rendu a la fois dans
 * la popup site-wide et sur /mon-compte/. Son habillage doit donc vivre dans
 * un fichier charge dans LES DEUX branches d'enqueue — c'est ce fichier.
 * login-modal.css ne garde que le dialogue lui-meme, login-register.css la
 * coque de page et les pages mot de passe.
 *
 * Toutes les regles sont scopees sous `.pg-login-forms` pour deux raisons :
 * garantir qu'elles ne debordent jamais sur le reste du site (le fichier est
 * charge sur toutes les pages visiteur), et passer devant les regles
 * `.pg-login-card ...` de login-register.css, qui est charge APRES celui-ci
 * et gagnerait sinon a specificite egale.
 *
 * @package TT_Expert_Child
 */

/* ── Vues ──────────────────────────────────────────────────── */

/* Les vues inactives sont masquees par l'attribut `hidden` cote PHP puis JS :
   la regle garantit qu'aucun display posterieur ne les revele. */
.pg-login-forms .pg-login-view[hidden] {
    display: none;
}

.pg-login-forms .pg-login-view__title {
    margin: 0 0 6px;
    /* Reserve la place du bouton de fermeture de la popup. Neutre sur la page
       compte, ou la carte est plus large que le texte du titre. */
    padding-right: 32px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pg-dark);
}

.pg-login-forms .pg-login-view__sub {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pg-grey);
}

/* ── Bloc social et separateur ─────────────────────────────── */

/* Les surcharges du bouton Nextend vivent dans login-register.css sous
   `.pg-social-login` (charge dans les deux contextes). On ne regle ici que
   l'insertion du bloc dans le flux du formulaire. */
.pg-login-forms .pg-social-login,
.pg-login-forms .pg-login-social {
    margin-bottom: 0;
}

/* Receptacle de la vue inscription : le bloc social y est deplace par le JS.
   Tant qu'il est vide il ne doit occuper aucune place. */
.pg-login-forms .pg-login-social--slot:empty {
    display: none;
}

.pg-login-forms .pg-login-separator {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
}

.pg-login-forms .pg-login-separator::before,
.pg-login-forms .pg-login-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--pg-border-light);
}

.pg-login-forms .pg-login-separator span {
    font-size: 13px;
    font-weight: 500;
    color: var(--pg-grey-light);
    text-transform: lowercase;
}

/* ── Champs ────────────────────────────────────────────────── */

.pg-login-forms form {
    margin: 0;
    padding: 0;
}

.pg-login-forms .pg-login-field {
    margin: 0 0 14px;
    padding: 0;
}

.pg-login-forms .pg-login-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pg-dark);
}

.pg-login-forms .pg-login-field label .required {
    color: var(--pg-error);
    text-decoration: none;
}

/* Selecteur volontairement descendant de `.pg-login-field` : il faut passer
   devant `.pg-login-card input[type="..."]` de login-register.css, charge
   ensuite, sinon les champs n'auraient pas la meme taille dans les deux
   contextes. */
.pg-login-forms .pg-login-field input[type="text"],
.pg-login-forms .pg-login-field input[type="email"],
.pg-login-forms .pg-login-field input[type="tel"],
.pg-login-forms .pg-login-field input[type="password"] {
    width: 100%;
    padding: 11px 12px;
    box-sizing: border-box;
    border: 1px solid var(--pg-border-light);
    border-radius: var(--pg-radius-sm);
    background: var(--pg-white);
    color: var(--pg-dark);
    /* 16px minimum : en dessous, iOS zoome automatiquement sur le champ actif
       et casse le cadrage (popup recadree, page compte deportee). */
    font-size: 16px;
    /* Hauteur de cible tactile minimale recommandee. Elle sert aussi de
       reference au bouton « afficher le mot de passe », qui se cale sur la
       hauteur du champ : sans plancher commun, les deux se decalent d'un ou
       deux pixels selon la police chargee. */
    min-height: 44px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pg-login-forms .pg-login-field input[type="text"]:focus,
.pg-login-forms .pg-login-field input[type="email"]:focus,
.pg-login-forms .pg-login-field input[type="tel"]:focus,
.pg-login-forms .pg-login-field input[type="password"]:focus {
    outline: none;
    border-color: var(--pg-galaxy);
    box-shadow: 0 0 0 3px var(--pg-galaxy-light);
}

/* Bouton « afficher le mot de passe » injecte par WooCommerce : carre bleu
   parasite hors charte, masque dans les deux contextes. Le notre le remplace
   ci-dessous. */
.pg-login-forms .show-password-input {
    display: none;
}

/* ── Bouton « afficher le mot de passe » ───────────────────── */

/* Le bouton est positionne DANS le champ : le bloc sert de repere. La classe
   `--has-reveal` est posee par login-forms.js, jamais par PHP, pour que la
   reservation d'espace n'existe que si le bouton est reellement utilisable. */
.pg-login-forms .pg-login-field--password {
    position: relative;
}

/* Sans JS le bouton ne bascule rien : login-forms.js pose `is-ready`, c'est
   la seule condition d'affichage. Couvre aussi le cas ou le partiel rend le
   bouton avec l'attribut `hidden`. */
.pg-login-forms .pg-login-reveal:not(.is-ready),
.pg-login-forms .pg-login-reveal[hidden] {
    display: none;
}

/* Le texte saisi ne doit jamais passer sous l'icone : 44px de bouton + 8px
   de respiration. S'applique aussi au type `text`, puisque le champ change
   de type une fois le mot de passe revele. */
.pg-login-forms .pg-login-field--has-reveal input[type="password"],
.pg-login-forms .pg-login-field--has-reveal input[type="text"] {
    padding-right: 52px;
}

.pg-login-forms .pg-login-reveal {
    /* Cale sur le bas du bloc, donc sur le bas du champ : le libelle occupe
       le haut du bloc et sa hauteur varie avec la longueur du texte. */
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44x44 minimum : la clientele est agee, une icone plus petite est
       inatteignable au doigt. */
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--pg-radius-sm);
    background: none;
    color: var(--pg-grey-medium);
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.pg-login-forms .pg-login-reveal svg {
    /* L'icone reste petite au centre d'une cible large : le SVG herite de la
       couleur de l'etat courant. */
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    pointer-events: none;
}

.pg-login-forms .pg-login-reveal:hover {
    color: var(--pg-dark);
    background: var(--pg-galaxy-light);
}

/* Anneau interieur : un contour exterieur deborderait du champ et serait
   rogne par la carte de la popup. */
.pg-login-forms .pg-login-reveal:focus-visible {
    outline: 2px solid var(--pg-galaxy);
    outline-offset: -2px;
    color: var(--pg-galaxy);
}

/* Mot de passe visible : etat distinct et permanent, pour qu'on sache d'un
   coup d'oeil que le mot de passe est en clair a l'ecran. */
.pg-login-forms .pg-login-reveal.is-revealed {
    color: var(--pg-galaxy);
    background: var(--pg-galaxy-light-bg);
}

.pg-login-forms .pg-login-reveal.is-revealed:hover {
    color: var(--pg-galaxy-hover);
    background: var(--pg-galaxy-light-hover);
}

/* Cases a cocher ajoutees par les hooks WooCommerce (newsletter, CGV…). */
.pg-login-forms .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    color: var(--pg-grey);
}

.pg-login-forms .woocommerce-privacy-policy-text {
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--pg-grey);
}

.pg-login-forms .woocommerce-privacy-policy-text p {
    margin: 0;
}

.pg-login-forms .woocommerce-privacy-policy-text a {
    color: var(--pg-galaxy);
    text-decoration: underline;
}

/* Encart affiche quand WooCommerce genere le mot de passe cote serveur. */
.pg-login-forms .pg-login-auto-password {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: var(--pg-radius-sm);
    background: var(--pg-bg-light);
    font-size: 13px;
    line-height: 1.5;
    color: var(--pg-grey);
}

/* ── Messages ──────────────────────────────────────────────── */

.pg-login-forms .pg-login-error,
.pg-login-forms .pg-login-success {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: var(--pg-radius-sm);
    font-size: 13px;
    line-height: 1.5;
}

.pg-login-forms .pg-login-error[hidden],
.pg-login-forms .pg-login-success[hidden] {
    display: none;
}

.pg-login-forms .pg-login-error {
    background: var(--pg-notice-error-bg);
    border-left: 3px solid var(--pg-error);
    color: var(--pg-error);
}

.pg-login-forms .pg-login-success {
    background: var(--pg-notice-success-bg);
    border-left: 3px solid var(--pg-success);
    color: var(--pg-dark);
}

/* ── Bouton principal ──────────────────────────────────────── */

/* Apparence unique : la vue inscription est desormais une vue a part entiere,
   son bouton est l'action principale de l'ecran au meme titre que celui de la
   connexion. L'ancien fond sombre de `.pg-register-btn` (qui distinguait une
   carte secondaire empilee, disparue) n'a plus de raison d'etre.
   Le selecteur descendant passe devant `.pg-login-btn` de login-register.css. */
.pg-login-forms .pg-login-submit {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 13px 16px;
    box-sizing: border-box;
    border: none;
    border-radius: var(--pg-radius-sm);
    background: var(--pg-galaxy);
    color: var(--pg-white);
    font-size: 16px;
    font-family: inherit;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
}

.pg-login-forms .pg-login-submit:hover {
    background: var(--pg-galaxy-hover);
}

.pg-login-forms .pg-login-submit[disabled],
.pg-login-forms .pg-login-submit.is-busy {
    background: var(--pg-grey-medium);
    cursor: progress;
}

/* ── Liens de bascule entre vues ───────────────────────────── */

/* Le partiel rend un <button> en popup et un <a> sur la page compte : les deux
   portent `.pg-login-link` et doivent etre visuellement identiques, d'ou la
   remise a plat des styles par defaut du bouton ET du lien. */
.pg-login-forms .pg-login-link {
    display: inline;
    padding: 0;
    background: none;
    border: none;
    color: var(--pg-galaxy);
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.pg-login-forms .pg-login-link:hover {
    color: var(--pg-galaxy-hover);
    text-decoration: underline;
}

/* Ligne « Pas encore de compte ? Creer un compte » sous le formulaire. */
.pg-login-forms .pg-login-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pg-grey);
}

/* « Mot de passe oublie ? » : aligne a droite sous le champ mot de passe,
   dans les deux contextes. */
.pg-login-forms .pg-login-forgot-wrapper {
    margin: -4px 0 14px;
    text-align: right;
}

/* ── Responsive (jusqu'a 320px) ────────────────────────────── */

@media (max-width: 360px) {
    .pg-login-forms .pg-login-view__title {
        font-size: 18px;
    }

    .pg-login-forms .pg-login-separator {
        gap: 10px;
        margin: 16px 0;
    }

    .pg-login-forms .pg-login-submit {
        padding: 12px 12px;
        font-size: 15px;
    }
}