/*
 * Voila social auth buttons - v001.000.000 (T-108, Voila v5.00.104, 2026-10-28)
 * Full-width, responsive buttons for login and register (component x-social-auth-buttons).
 * Google button follows the Google Sign-In dark theme colours (#131314 / #8E918F / #E3E3E3).
 */
.v-social-auth {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: 100%;
    margin-top: 1.25rem;
}

.v-social-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 44px;
    padding: 0.625rem 1rem;
    border: 1px solid var(--v-border, rgba(255, 255, 255, 0.14));
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    color: var(--v-text, #f4f4f5);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.v-social-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

.v-social-btn:focus-visible {
    outline: 2px solid #8b7bff;
    outline-offset: 2px;
}

.v-social-btn__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.v-social-btn__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.v-social-btn__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v-social-btn__letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.75rem;
    font-weight: 800;
}

/* Google (dark theme) */
.v-social-btn--google {
    border-color: #8e918f;
    background: #131314;
    color: #e3e3e3;
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
    font-weight: 500;
}

.v-social-btn--google:hover {
    background: #1f1f20;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
}

/* Yahoo */
.v-social-btn--yahoo:hover {
    border-color: #6001d2;
}

/* Light theme */
html:not(.dark) .v-social-btn--google {
    border-color: #747775;
    background: #ffffff;
    color: #1f1f1f;
}

html:not(.dark) .v-social-btn--google:hover {
    background: #f8f9fa;
}

/* Divider between social buttons and the e-mail form (login page) */
.v-social-divider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--v-text-secondary, #a1a1aa);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.v-social-divider::before,
.v-social-divider::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px solid var(--v-border, rgba(255, 255, 255, 0.14));
}

@media (max-width: 380px) {
    .v-social-btn {
        font-size: 0.875rem;
        gap: 0.5rem;
        padding: 0.625rem 0.75rem;
    }
}