/* Shared 3D press mechanic */
.btn-google, .btn-facebook {
    border: none;
    border-radius: 6px;
    padding: 11px 24px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
    top: 0;
    transition: top 0.1s, box-shadow 0.1s, background 0.1s;
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
    color: #fff;
}

    .btn-google svg, .btn-facebook svg {
        flex-shrink: 0;
    }

/* Google */
.btn-google {
    background: linear-gradient(180deg, #4f8ef7 0%, #1a65e0 100%);
    box-shadow: 0 4px 6px rgba(14,63,163,0.6), 0 8px 12px rgba(14,63,163,0.2);
    font-family: 'Google Sans', Roboto, sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
}

    .btn-google:hover {
        background: linear-gradient(180deg, #5f9aff 0%, #2471f0 100%);
    }

    .btn-google:active {
        background: linear-gradient(180deg, #1a65e0 0%, #1a65e0 100%);
        box-shadow: 0 1px 3px rgba(14,63,163,0.4), 0 2px 6px rgba(14,63,163,0.15);
        top: 3px;
    }

/* Facebook */
.btn-facebook {
    background: linear-gradient(180deg, #2d8cf0 0%, #1565c0 100%);
    box-shadow: 0 4px 6px rgba(12,62,135,0.6), 0 8px 12px rgba(12,62,135,0.2);
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
}

    .btn-facebook:hover {
        background: linear-gradient(180deg, #3d9aff 0%, #1877f2 100%);
    }

    .btn-facebook:active {
        background: linear-gradient(180deg, #1565c0 0%, #1565c0 100%);
        box-shadow: 0 1px 3px rgba(12,62,135,0.4), 0 2px 6px rgba(12,62,135,0.15);
        top: 3px;
    }