/**
 * Firebase WordPress Authentication
 * Stili frontend
 */

.firebase-wordpress-auth-container {
    /*max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;*/
}

.login-form-header {
    text-align: center;
    margin-bottom: 25px;
    min-width: 400px;
}

.login-form-header h2 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

.login-form-header p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.form-actions .button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.button-primary {
    background-color: #0073aa;
    color: #fff;
}

.button-primary:hover {
    background-color: #005d87;
}

.form-actions a {
    color: #0073aa;
    text-decoration: none;
    font-size: 14px;
}

.form-actions a:hover {
    text-decoration: underline;
}

.login-separator {
    display: flex;
    align-items: center;
    margin: 25px 0;
    color: #888;
    font-size: 14px;
}

.login-separator::before,
.login-separator::after {
    content: "";
    flex: 1;
    border-top: 1px solid #ddd;
}

.login-separator span {
    padding: 0 15px;
}

.social-login-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.button-google,
.button-facebook {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.button-google {
    background-color: #fff;
    color: #333;
}

.button-google:hover {
    background-color: #f5f5f5;
}

.button-facebook {
    background-color: #3b5998;
    color: #fff;
}

.button-facebook:hover {
    background-color: #2d4373;
}

.icon-google,
.icon-facebook {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-size: contain;
}

.icon-google {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%23FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"/><path fill="%23FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"/><path fill="%234CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"/><path fill="%231976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"/></svg>');
}

.icon-facebook {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg>');
}

.login-footer {
    margin-top: 25px;
    text-align: center;
    font-size: 14px;
    color: #666;
}

.login-footer a {
    color: #0073aa;
    text-decoration: none;
}

.login-footer a:hover {
    text-decoration: underline;
}

.login-error {
    margin-bottom: 20px;
    display: none;
}

.error-message {
    padding: 10px 15px;
    background-color: #ffecec;
    border-left: 4px solid #ff5252;
    color: #333;
    font-size: 14px;
    border-radius: 4px;
}

.success-message {
    padding: 10px 15px;
    background-color: #e7f7e7;
    border-left: 4px solid #4caf50;
    color: #333;
    font-size: 14px;
    border-radius: 4px;
}

.firebase-back-link {
    text-align: center;
    margin-top: 40px;
    font-size: 14px;
}

.firebase-back-link a {
    color: #0073aa;
    text-decoration: none;
}

.firebase-back-link a:hover {
    text-decoration: underline;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #eee;
    border-top: 5px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }

/* Stile per mobile */
@media (max-width: 600px) {
    /*.firebase-wordpress-auth-container {
        padding: 10px;
    }*/
    
    .form-actions {
        flex-direction: column;
        gap: 15px;
    }
    
    .form-actions .button {
        width: 100%;
    }
}

/* .firebase-new-password-form {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
} */

/* .firebase-new-password-form h2 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 600;
    color: #333;
    text-align: center;
} */

/* .firebase-new-password-form p {
    margin: 0 0 25px;
    color: #666;
    font-size: 14px;
    text-align: center;
} */

/* .firebase-new-password-form .firebase-button {
    background-color: #0073aa;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.firebase-new-password-form .firebase-button:hover {
    background-color: #005d87;
}

.firebase-new-password-form .form-footer {
    margin-top: 25px;
    text-align: center;
    font-size: 14px;
    color: #666;
}

.firebase-new-password-form .form-footer a {
    color: #0073aa;
    text-decoration: none;
}

.firebase-new-password-form .form-footer a:hover {
    text-decoration: underline;
} */

/* Responsiveness per la nuova form */
@media (max-width: 600px) {
    /* .firebase-new-password-form {
        padding: 20px;
    } */
}



.barra-login {
    width: 100%;
    background: #23282d;
    color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 63px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
}

.barra-login .barra-btn {
    color: #fff;
    background: none;
    padding: 0px 15px;
    line-height: 32px;
    text-decoration: none;
    transition: background 0.2s ease;
}

/* .barra-login .barra-btn:hover {
    background: #0073aa; 
    color: #fff;
} */

.barra-utente-nome {
    margin-right: 10px;
    cursor: pointer;
}

.barra-icona {
    position: relative;
    cursor: pointer;
}

.icona-utente {
    vertical-align: middle;
    margin-right: 10px;
}

.barra-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #32373c;
    padding: 5px 0;
    min-width: 160px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 10000;
}

.barra-menu a {
    display: block;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
}

.barra-menu a:hover {
    background-color: #444;
}

.barra-menu.visibile {
    display: block;
}

.compact-box p {
  margin: 2px 0;
}