/**
 * CTM Glow Button Effect
 * Aplica el efecto de borde brillante animado a todos los botones del plugin.
 * Fondo rojo ESPN (#e30613), texto blanco en negrita.
 */

/* ─── BASE: todos los botones del plugin ─────────────────────────────────── */
.ctm-btn,
.ctm-btn-submit,
.ctm-btn-logout,
.ctm-btn-logout-sm,
.ctm-login-btn,
.ctm-submit-btn,
.ctm-profile-btn,
.ctm-tab-btn,
.ctm-action-btn,
.ctm-filter-btn,
.ctm-t-btn-register,
.ctm-t-btn-cancel,
.ctm-t-btn-filter,
.ctm-detail-tab,
input[type="submit"].ctm-btn,
input[type="submit"].ctm-submit-btn,
button.ctm-btn {
    position: relative !important;
    z-index: 0 !important;
    background: #e30613 !important;
    color: #fff !important;
    font-weight: 700 !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    overflow: visible !important;
}

/* ─── GLOW BORDER (pseudo-element :before) ───────────────────────────────── */
.ctm-btn::before,
.ctm-btn-submit::before,
.ctm-btn-logout::before,
.ctm-btn-logout-sm::before,
.ctm-login-btn::before,
.ctm-submit-btn::before,
.ctm-profile-btn::before,
.ctm-tab-btn::before,
.ctm-action-btn::before,
.ctm-filter-btn::before,
.ctm-t-btn-register::before,
.ctm-t-btn-cancel::before,
.ctm-t-btn-filter::before,
.ctm-detail-tab::before,
input[type="submit"].ctm-btn::before,
input[type="submit"].ctm-submit-btn::before {
    content: '' !important;
    background: linear-gradient(
        45deg,
        #ff0000, #ff7300, #fffb00,
        #48ff00, #00ffd5, #002bff,
        #7a00ff, #ff00c8, #ff0000
    ) !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    background-size: 400% !important;
    z-index: -1 !important;
    filter: blur(5px) !important;
    width: calc(100% + 4px) !important;
    height: calc(100% + 4px) !important;
    animation: ctm-glowing 20s linear infinite !important;
    opacity: 0 !important;
    transition: opacity .3s ease-in-out !important;
    border-radius: 8px !important;
}

/* ─── FONDO SÓLIDO ROJO detrás del contenido (:after) ───────────────────── */
.ctm-btn::after,
.ctm-btn-submit::after,
.ctm-btn-logout::after,
.ctm-btn-logout-sm::after,
.ctm-login-btn::after,
.ctm-submit-btn::after,
.ctm-profile-btn::after,
.ctm-tab-btn::after,
.ctm-action-btn::after,
.ctm-filter-btn::after,
.ctm-t-btn-register::after,
.ctm-t-btn-cancel::after,
.ctm-t-btn-filter::after,
.ctm-detail-tab::after,
input[type="submit"].ctm-btn::after,
input[type="submit"].ctm-submit-btn::after {
    z-index: -1 !important;
    content: '' !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    background: #e30613 !important;
    left: 0 !important;
    top: 0 !important;
    border-radius: 8px !important;
}

/* ─── HOVER: activar glow ────────────────────────────────────────────────── */
.ctm-btn:hover::before,
.ctm-btn-submit:hover::before,
.ctm-btn-logout:hover::before,
.ctm-btn-logout-sm:hover::before,
.ctm-login-btn:hover::before,
.ctm-submit-btn:hover::before,
.ctm-profile-btn:hover::before,
.ctm-tab-btn:hover::before,
.ctm-action-btn:hover::before,
.ctm-filter-btn:hover::before,
.ctm-t-btn-register:hover::before,
.ctm-t-btn-cancel:hover::before,
.ctm-t-btn-filter:hover::before,
.ctm-detail-tab:hover::before,
input[type="submit"].ctm-btn:hover::before,
input[type="submit"].ctm-submit-btn:hover::before {
    opacity: 1 !important;
}

/* ─── ACTIVE: texto negro, fondo transparente ────────────────────────────── */
.ctm-btn:active,
.ctm-btn-submit:active,
.ctm-login-btn:active,
.ctm-submit-btn:active,
.ctm-profile-btn:active,
.ctm-tab-btn:active,
.ctm-action-btn:active {
    color: #fff !important;
    filter: brightness(0.85) !important;
}

.ctm-btn:active::after,
.ctm-btn-submit:active::after,
.ctm-login-btn:active::after,
.ctm-submit-btn:active::after {
    background: transparent !important;
}

/* ─── Excepciones: disabled y ghost no tienen glow ──────────────────────── */
.ctm-btn-disabled,
.ctm-btn-disabled::before,
.ctm-btn-disabled::after,
.ctm-btn.ctm-btn-disabled::before,
.ctm-btn.ctm-btn-disabled::after {
    animation: none !important;
    opacity: 1 !important;
    background: #444 !important;
    filter: none !important;
}
.ctm-btn-disabled {
    cursor: not-allowed !important;
    color: #999 !important;
}

/* ─── Tab activo: borde inferior rojo en lugar de glow completo ──────────── */
.ctm-tab-btn.active,
.ctm-detail-tab.active,
.ctm-filter-btn.active {
    background: #e30613 !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(227, 6, 19, .6) !important;
}

/* ─── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes ctm-glowing {
    0%   { background-position: 0 0; }
    50%  { background-position: 400% 0; }
    100% { background-position: 0 0; }
}