/* Auth-forms bottom row and switch-mode links (login/registration boxes) */
.mc-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
}

/* One button (default, no social login configured) spans the row.
   Two buttons (e.g. Sign in + Google) share it equally. Using :only-child
   instead of hardcoded widths means this keeps working whichever social
   login buttons are enabled/disabled server-side, with no extra markup. */
.mc-bottom .mc-btn {
    flex: 1;
    min-width: 0;
}

.mc-bottom .mc-btn:only-child {
    flex: 1 0 100%;
}

/* Google button: white/outlined per Google's branding guidelines for
   custom sign-in buttons (unlike a filled brand-color button). */
.mc-btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff !important;
    color: #3c4043 !important;
    border: 1px solid #dadce0 !important;
}

.mc-btn-google:hover {
    background: #f8f9fa !important;
    border-color: #d2d3d4 !important;
}

.mc-btn-google svg {
    flex: 0 0 auto;
}

.dark .mc-btn-google {
    background: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}

.dark .mc-btn-google:hover {
    background: #29374a !important;
    border-color: #5b6472 !important;
}

.mc-text-area {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.mc-text-area.mc-left-align {
    justify-content: flex-start;
    margin-left: 5px;
}

.mc-text-area .mc-text {
    margin: 0 5px;
}

.mc-text-area .mc-btn-login-box,
.mc-text-area .btn-registration-box,
.mc-text.mc-btn-login-box,
.mc-text.btn-registration-box {
    color: var(--mc-admin-secondary, #E03274);
    font-weight: bold;
    cursor: pointer; /* Add hand cursor */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mc-bottom {
        flex-wrap: wrap;
    }

    .mc-bottom .mc-btn {
        min-width: 120px;
    }
}

@media (max-width: 465px) {
    .mc-bottom .mc-btn {
        flex: 1 0 100%;
        height: 45px; /* Slightly taller for better touch targets */
    }

    /* Stack label above field instead of a fixed-width side label, so the
       input gets the full row width instead of being squeezed next to a
       ~150px label on narrow screens. Keep the label close to its input. */
    .mc-auth-forms .mc-input {
        display: block;
    }

    .mc-auth-forms .mc-input > span {
        display: block;
        width: auto;
        min-width: 0;
        margin-bottom: 6px;
    }

    .mc-auth-forms .mc-input > input {
        width: 100%;
    }

    /* Re-anchor the show/hide password icon to the input's own height now
       that it no longer shares a row with the label. */
    .mc-auth-forms .mc-input-password .mc-toggle-password {
        top: auto;
        bottom: 21px;
        transform: translateY(50%);
    }
}