/* ===== EAGLE READY MIX — UNIFIED BUTTON DESIGN SYSTEM ===== */
/* Single source of truth for all button styles (Rule 15 & 16) */
/* Design: Dark Navy with Red Neon Glow Pulse */

/* ===== BASE CLASS ===== */
.erm-btn {
    display: inline-block;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* ===== PRIMARY — DARK NAVY WITH RED NEON GLOW ===== */
/* Used for: Submit, Send, Calculate, Start Quote — all main actions */
.erm-btn-red,
.erm-btn-dark {
    background-color: #2c3e50;
    color: #fff;
    border: 2px solid #d32f2f;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 0 12px rgba(211, 47, 47, 0.25),
        0 0 25px rgba(211, 47, 47, 0.12);
    animation: erm-glow-pulse 2.5s ease-in-out infinite;
}

.erm-btn-red:hover,
.erm-btn-dark:hover {
    background-color: #d32f2f;
    transform: translateY(-2px);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.15),
        0 0 20px rgba(211, 47, 47, 0.5),
        0 0 40px rgba(211, 47, 47, 0.3),
        0 0 60px rgba(211, 47, 47, 0.12);
}

.erm-btn-red:active,
.erm-btn-dark:active {
    transform: translateY(1px);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 8px rgba(211, 47, 47, 0.2);
}

/* ===== TERTIARY — OUTLINE / RESET (disabled by default) ===== */
/* Starts grayed out and non-interactive until .is-active is added via JS */
.erm-btn-outline {
    background: transparent;
    color: #b0b8c0;
    border: 2px solid #c8d0d8;
    box-shadow: none;
    cursor: default;
    opacity: 0.5;
    pointer-events: none;
}

/* Active state — activated when user has entered data */
.erm-btn-outline.is-active {
    color: #2c3e50;
    border-color: #2c3e50;
    cursor: pointer;
    opacity: 1;
    pointer-events: auto;
}

.erm-btn-outline.is-active:hover {
    background-color: #2c3e50;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(44, 62, 80, 0.22);
}

.erm-btn-outline.is-active:active {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(44, 62, 80, 0.12);
}

/* ===== LAYOUT MODIFIERS ===== */
.erm-btn-full {
    width: 100%;
}

.erm-btn-pill {
    border-radius: 30px;
}

/* ===== NEON GLOW PULSE ANIMATION ===== */
@keyframes erm-glow-pulse {

    0%,
    100% {
        box-shadow:
            0 4px 6px rgba(0, 0, 0, 0.1),
            0 0 12px rgba(211, 47, 47, 0.25),
            0 0 25px rgba(211, 47, 47, 0.12);
    }

    50% {
        box-shadow:
            0 4px 6px rgba(0, 0, 0, 0.1),
            0 0 18px rgba(211, 47, 47, 0.4),
            0 0 35px rgba(211, 47, 47, 0.2),
            0 0 50px rgba(211, 47, 47, 0.08);
    }
}