/* ============================================================
   Login Popup — Uses glp-wizard-* from global CSS
   ============================================================ */

/* Position centered (not inside overlay flex, standalone positioned) */
#cg-popup-container.cg-login-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    width: 90%;
    max-width: 440px;
}

/* UM form overrides to match wizard design */
.cg-login-popup .um-form-field {
    width: 100%;
    border: 1px solid var(--glp-border, #e8ecf1) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: all 0.15s !important;
    background: var(--glp-card, #fff) !important;
    color: var(--glp-text, #1a1a2e) !important;
}

.cg-login-popup .um-form-field:focus {
    border-color: var(--glp-brand, #D74709) !important;
    box-shadow: 0 0 0 3px rgba(215, 71, 9, 0.08) !important;
}

.cg-login-popup .um-field-label label {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--glp-text, #1a1a2e) !important;
    margin-bottom: 7px !important;
}

.cg-login-popup .um-field {
    margin-bottom: 16px;
}

.cg-login-popup .um-field-checkbox-option {
    font-size: 14px;
    color: var(--glp-text, #1a1a2e);
}

/* Prevent body scroll */
body.cg-popup-active,
body.glp-wizard-active {
    overflow: hidden;
}

/* Mobile */
@media (max-width: 480px) {
    #cg-popup-container.cg-login-popup {
        max-width: 95%;
    }
}