/*
 * Ultimate Member Login Button Override Styles
 *
 * This stylesheet is loaded very late (priority 999) to ensure it overrides
 * any conflicting styles for Ultimate Member buttons.
 *
 * HIERARCHY:
 * - Submit buttons (input[type=submit]) = PRIMARY action = Gradient teal, solid
 * - Link buttons (a.um-button) = SECONDARY action = Outlined, white bg
 *
 * This creates clear visual distinction: one dominant action per form.
 */

/* ========================================
   PRIMARY BUTTONS (Submit - the main action)
   Gradient teal background, white text
   ======================================== */
.um input[type=submit].um-button,
.um input[type=submit].um-button:focus,
.um input[type=submit],
.um .um-form input[type=submit] {
    background: var(--gradient-primary-button) !important;
    color: var(--color-white) !important;
    border: 2px solid transparent !important; /* Match secondary button border width for equal height */
    letter-spacing: 0.025em !important;
    box-shadow: 0 4px 15px var(--color-primary-transparent-02) !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    line-height: 1 !important; /* Normalize across input and anchor elements */
    vertical-align: middle !important;
}

.um input[type=submit].um-button:hover,
.um input[type=submit]:hover,
.um .um-form input[type=submit]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 7px 20px var(--color-primary-transparent-03) !important;
    color: var(--color-white) !important;
    background: var(--gradient-primary-button) !important;
    border: 2px solid transparent !important;
    box-sizing: border-box !important;
}

/* ========================================
   SECONDARY BUTTONS (Link buttons - alternate actions)
   White background, teal border, teal text
   ======================================== */
.um a.um-button,
.um a.um-button.um-disabled:active,
.um a.um-button.um-disabled:focus,
.um a.um-button.um-disabled:hover,
.um .um-form a.um-button {
    background: var(--color-white) !important;
    color: var(--color-primary-medium) !important;
    border: 2px solid var(--color-primary-medium) !important;
    letter-spacing: 0.025em !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    line-height: 1 !important; /* Normalize across input and anchor elements */
    vertical-align: middle !important;
}

.um a.um-button:hover,
.um .um-form a.um-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px var(--color-primary-transparent-02) !important;
    color: var(--color-white) !important;
    background: var(--color-primary-medium) !important;
    border: 2px solid var(--color-primary-medium) !important;
    box-sizing: border-box !important;
}

/* ========================================
   Alternative button class (if used)
   ======================================== */
.um-form .um-button.um-alt,
.um .um-button.um-secondary {
    background: var(--color-white) !important;
    color: var(--color-primary-medium) !important;
    border: 2px solid var(--color-primary-medium) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.um-form .um-button.um-alt:hover,
.um .um-button.um-secondary:hover {
    background: var(--color-primary-medium) !important;
    color: var(--color-white) !important;
    border: 2px solid var(--color-primary-medium) !important;
    box-sizing: border-box !important;
}