/**
 * Clanto Login - Common Styles
 * Stili condivisi tra tutti i moduli per evitare duplicazioni
 */

/* ========================================
   VARIABILI CSS
   ======================================== */
:root {
    --clantol-primary: #2271b1;
    --clantol-primary-hover: #135e96;
    --clantol-border: #dcdcde;
    --clantol-text: #1d2327;
    --clantol-text-muted: #646970;
    --clantol-bg: #fff;
    --clantol-bg-hover: #f6f7f7;
    --clantol-error-bg: #fcf0f1;
    --clantol-error-border: #d63638;
    --clantol-radius: 4px;
    --clantol-gap: 10px;
}

/* ========================================
   SEPARATORI
   ======================================== */
.clantol-separator,
.clantol-social-divider,
.clantol-oauth-separator,
.clantol-magic-link-separator {
    text-align: center;
    position: relative;
    margin: 20px 0;
    color: var(--clantol-text-muted);
    font-size: 13px;
    font-weight: 500;
}

.clantol-separator::before,
.clantol-social-divider::before,
.clantol-oauth-separator::before,
.clantol-magic-link-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--clantol-border);
}

.clantol-separator span,
.clantol-social-divider span,
.clantol-oauth-separator span,
.clantol-magic-link-separator span {
    background: var(--clantol-bg);
    padding: 0 15px;
    position: relative;
}

/* ========================================
   PULSANTI BASE
   ======================================== */
.clantol-btn,
.clantol-social-button,
.clantol-login-button,
button.clantol-social-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--clantol-gap);
    padding: 10px 15px;
    border: 1px solid var(--clantol-border);
    border-radius: var(--clantol-radius);
    background: var(--clantol-bg);
    color: var(--clantol-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    width: 100%;
}

.clantol-btn:hover,
.clantol-social-button:hover,
.clantol-login-button:hover,
button.clantol-social-button:hover {
    background: var(--clantol-bg-hover);
    border-color: #c3c4c7;
    color: var(--clantol-text);
}

.clantol-btn svg,
.clantol-social-button svg,
.clantol-login-button svg {
    flex-shrink: 0;
}

/* ========================================
   CONTAINER PULSANTI
   ======================================== */
.clantol-buttons,
.clantol-login-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--clantol-gap);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
.clantol-input,
.clantol-2fa-code-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--clantol-border);
    border-radius: var(--clantol-radius);
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.clantol-input:focus,
.clantol-2fa-code-input:focus {
    border-color: var(--clantol-primary);
    outline: none;
    box-shadow: 0 0 0 1px var(--clantol-primary);
}

/* ========================================
   MESSAGGI ERRORE
   ======================================== */
.clantol-error {
    background: var(--clantol-error-bg);
    border-left: 4px solid var(--clantol-error-border);
    padding: 12px;
    margin-bottom: 20px;
}

.clantol-error p {
    margin: 0;
    color: var(--clantol-error-border);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.clantol-text-center {
    text-align: center;
}

.clantol-mt-20 {
    margin-top: 20px;
}

.clantol-mb-20 {
    margin-bottom: 20px;
}

.clantol-hidden {
    display: none !important;
}

.clantol-flex {
    display: flex;
}

.clantol-flex-column {
    flex-direction: column;
}

.clantol-gap-10 {
    gap: 10px;
}