/**
 * Area Soci FLOG — Stili frontend (form login / reset password)
 *
 * Token estratti dal design Figma (flog.it):
 *   --flog-panchina  #4b7447  verde (titolo, pulsante)
 *   --flog-asfalto   #3d3d3d  testo, label, bordi input
 *   --flog-muro      #f4ebd0  crema (testo pulsante)
 *
 * Tipografia:
 *   Titolo:  Advercase Bold 40px
 *   Body:    Arial Narrow Regular 18px, letter-spacing 0.3px
 *   Bottoni: Space Mono Bold 16px uppercase
 */

:root {
    --flog-panchina: #4b7447;
    --flog-asfalto: #3d3d3d;
    --flog-muro: #f4ebd0;
}

/* Contenitore form: larghezza fissa centrata, gap verticale uniforme */
.flog-login-wrap {
    width: 100%;
    max-width: 512px;
    margin: 0 auto;
}

.flog-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
}

/* Titolo (se presente sopra il form) */
.flog-login-wrap .flog-title {
    font-family: "Advercase", Georgia, serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--flog-panchina);
    margin: 0 0 15px;
}

/* Campo: label sopra, input sotto */
.flog-field {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.flog-field label {
    font-family: "Arial Narrow", Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.3px;
    color: var(--flog-asfalto);
}

/* Input di testo / password */
.flog-form input[type="text"],
.flog-form input[type="password"],
.flog-form input[type="email"] {
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    padding: 13px 40px;
    border: 1px solid var(--flog-asfalto);
    border-radius: 0;
    background: transparent;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.3px;
    color: var(--flog-asfalto);
}

.flog-form input[type="text"]:focus,
.flog-form input[type="password"]:focus,
.flog-form input[type="email"]:focus {
    outline: none;
    border-color: var(--flog-panchina);
}

/* ---------------------------------------------------------------------------
   Campo password con toggle "mostra/nascondi"
--------------------------------------------------------------------------- */
.flog-password-wrap {
    position: relative;
    display: block;
}

/* L'input ha già padding 40px a destra: l'icona ci si inserisce senza
   sovrapporsi al testo digitato. */
.flog-password-toggle {
    position: absolute;
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--flog-asfalto);
    cursor: pointer;
    line-height: 1;
}

.flog-password-toggle[hidden] {
    display: none;
}

.flog-password-toggle:hover,
.flog-password-toggle[aria-pressed="true"] {
    color: var(--flog-panchina);
}

.flog-password-toggle:focus-visible {
    outline: 2px solid var(--flog-panchina);
    outline-offset: 2px;
}

/* Icona a occhio: mask SVG con currentColor, stessa tecnica dei notice.
   Non dipende da font o file esterni, quindi non può essere rimossa da
   plugin di ottimizzazione. */
.flog-eye {
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Stato "password visibile": occhio barrato */
.flog-eye-off {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

/* Nasconde l'occhio nativo di Edge/IE: altrimenti si vedrebbero due icone */
.flog-password-input::-ms-reveal,
.flog-password-input::-ms-clear {
    display: none;
}

/* Checkbox "Ricordami" */
.flog-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 18px;
    letter-spacing: 0.3px;
    color: var(--flog-asfalto);
}

.flog-remember input[type="checkbox"] {
    width: 13px;
    height: 15px;
    border: 1px solid var(--flog-asfalto);
    border-radius: 0;
    margin: 0;
}

/* Pulsante LOGIN */
.flog-btn {
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    padding: 13px 40px;
    border: none;
    border-radius: 0;
    background: var(--flog-panchina);
    color: #fff !important;
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
}

.flog-btn:hover {
    opacity: 0.9;
}

/* Variante link (conferme fuori dal form): un <a> non è block di default e
   erediterebbe il colore dei link del tema */
a.flog-btn,
a.flog-btn:hover,
a.flog-btn:focus,
a.flog-btn:visited {
    display: block;
    color: #fff !important;
    text-decoration: none;
}

.flog-success-action {
    margin: 0;
}

/* Link "Password dimenticata?" */
.flog-reset-link {
    margin: 0;
    text-align: center;
}

.flog-reset-link a {
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 18px;
    letter-spacing: 0.3px;
    color: var(--flog-asfalto);
    text-decoration: underline;
}

/* ===========================================================
 * Avvisi / Errori — token estratti dal design Figma
 *   Info        bg #c6eaf8  testo #2f3b59 (inchiostro)
 *   Successo    bg #d9f3d2  testo #4b7447 (panchina)
 *   Attenzione  bg #faf4d3  testo #806b25
 *   Errore      bg #f3c6c4  testo #b94040 (cabina)
 *
 * Markup atteso:
 *   <div class="flog-notice flog-notice-error">
 *     <span class="flog-notice-label">avviso errore:</span> Messaggio…
 *   </div>
 * Il prefisso (.flog-notice-label) è opzionale.
 * =========================================================== */
.flog-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 13px 40px;
    margin-bottom: 15px;
    /* corpo del messaggio */
    font-family: "Arial Narrow", Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0.3px;
}

/* Icona a sinistra: SVG via mask, eredita il colore (currentColor) della variante */
.flog-notice::before {
    content: "";
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}

/* Prefisso in evidenza: "avviso errore:" ecc. */
.flog-notice-label {
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}

.flog-notice-info {
    background: #c6eaf8;
    color: #2f3b59;
}

.flog-notice-info::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Ccircle cx='12' cy='7.5' r='0.7' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Ccircle cx='12' cy='7.5' r='0.7' fill='%23000'/%3E%3C/svg%3E");
}

.flog-notice-success {
    background: #d9f3d2;
    color: #4b7447;
}

.flog-notice-success::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.flog-notice-warning {
    background: #faf4d3;
    color: #806b25;
}

.flog-notice-warning::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 L22 20 L2 20 Z'/%3E%3Cline x1='12' y1='10' x2='12' y2='14'/%3E%3Ccircle cx='12' cy='17' r='0.7' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 L22 20 L2 20 Z'/%3E%3Cline x1='12' y1='10' x2='12' y2='14'/%3E%3Ccircle cx='12' cy='17' r='0.7' fill='%23000'/%3E%3C/svg%3E");
}

.flog-notice-error {
    background: #f3c6c4;
    color: #b94040;
}

.flog-notice-error::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   My Account — blocco dati socio (override my-account.php)
--------------------------------------------------------------------------- */
.flog-account-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e5e5;
}

.flog-account-welcome {
    margin: 0 0 0.25rem;
}

.flog-account-cf,
.flog-account-email,
.flog-account-phone {
    margin: 0;
    color: #555;
}

/* ---------------------------------------------------------------------------
   My Account — voci di menu navigazione
--------------------------------------------------------------------------- */
.woocommerce-MyAccount-navigation ul li a {
    color: var(--Panchina, #4B7447);
    font-family: "Space Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.024px;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   My Account — layout a due colonne (menu a sinistra, contenuto a destra)
--------------------------------------------------------------------------- */
.flog-account-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.flog-account-layout .woocommerce-MyAccount-navigation {
    flex: 0 0 260px;
    width: 260px;
}

.flog-account-layout .woocommerce-MyAccount-content {
    flex: 1 1 auto;
    min-width: 0;
}

.flog-account-layout .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 767px) {
    .flog-account-layout {
        flex-direction: column;
    }

    .flog-account-layout .woocommerce-MyAccount-navigation {
        flex-basis: auto;
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   My Account — blocco footer a tutta larghezza (fuori da .woocommerce)
--------------------------------------------------------------------------- */
.flog-account-footer {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-top: 100px;
}