/* ---------------------------------------------------------------- *
 *  Social login buttons — production-grade styles matching the
 *  Google "Sign in with Google" guidelines and the Facebook
 *  "Continue with Facebook" guidelines as closely as practical.
 * ---------------------------------------------------------------- */

.vcc-social-login {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0 0 12px;
}

@media (min-width: 480px) {
    .vcc-social-login {
        grid-template-columns: 1fr 1fr;
    }
}

.vcc-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 42px;
    padding: 0 16px;
    border-radius: 6px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .15px;
    text-decoration: none !important;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.vcc-social-btn,
.vcc-social-btn:hover,
.vcc-social-btn:focus,
.vcc-social-btn:active,
.vcc-social-btn:visited {
    text-decoration: none !important;
}

.vcc-social-btn:focus-visible {
    outline: 2px solid #1a73e8;
    outline-offset: 2px;
}

.vcc-social-btn__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: block;
}

.vcc-social-btn__label {
    white-space: nowrap;
}

/* Google — white card per "Sign in with Google" guidelines */
.vcc-social-btn--google {
    background: #ffffff;
    color: #1f1f1f;
    border-color: #747775;
    font-weight: 500;
}

.vcc-social-btn--google:hover {
    background: #f8f9fa;
    border-color: #5f6368;
    box-shadow:
        0 1px 2px 0 rgba(60, 64, 67, .30),
        0 1px 3px 1px rgba(60, 64, 67, .15);
}

.vcc-social-btn--google:active {
    background: #e8eaed;
    box-shadow: none;
}

/* Facebook — solid blue per "Continue with Facebook" guidelines */
.vcc-social-btn--facebook {
    background: #1877F2;
    color: #ffffff;
    border-color: #1877F2;
    font-weight: 600;
}

.vcc-social-btn--facebook:hover {
    background: #166FE5;
    border-color: #166FE5;
    color: #ffffff;
}

.vcc-social-btn--facebook:active {
    background: #145DBF;
    border-color: #145DBF;
    color: #ffffff;
}

/* Dev mode marker — yellow ring + corner badge on real provider buttons
   when VCC_SOCIAL_DUMMY_ENABLED is on. Buttons render pixel-identical to
   their production look; only the ring + badge tell admins this is dev. */
.vcc-social-login--dev {
    padding: 14px 12px 8px;
    margin: 0 0 12px;
    border: 1px dashed #f0ad4e;
    border-radius: 8px;
    background: rgba(240, 173, 78, .06);
    position: relative;
}

.vcc-social-login--dev::before {
    content: 'DEV MODE — buttons bypass real OAuth';
    position: absolute;
    top: -10px;
    left: 12px;
    background: #f0ad4e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
}

.vcc-social-btn--dev {
    position: relative;
    box-shadow: 0 0 0 2px #f0ad4e;
}

.vcc-social-btn--dev:hover {
    box-shadow: 0 0 0 2px #ec971f;
}

/* "или" divider between social row and email/password */
.vcc-social-divider {
    position: relative;
    text-align: center;
    margin: 14px 0 10px;
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.vcc-social-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e5e5e5;
    z-index: 0;
}

.vcc-social-divider > span {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 0 10px;
}