/* Mystical Text Highlighting Fix - Direct CSS Override */
/* This file ensures no text highlighting artifacts appear */

/* Global text selection override */
*::selection {
    background: rgba(251, 191, 36, 0.15) !important;
    color: inherit !important;
    text-shadow: none !important;
}

*::-moz-selection {
    background: rgba(251, 191, 36, 0.15) !important;
    color: inherit !important;
    text-shadow: none !important;
}

/* Comprehensive element reset */
em, strong, span, i, b, u, mark, .highlight, .highlighted {
    background: transparent !important;
    background-color: transparent !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}

/* Mystical text specific overrides */
.mystical-text, .mystical-text * {
    background: transparent !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

.mystical-text em,
.mystical-text strong,
.mystical-text span,
.mystical-text i,
.mystical-text b,
.mystical-text mark {
    background: none !important;
    background-color: transparent !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}

/* Color-specific overrides */
.text-yellow-400, em.text-yellow-400 {
    color: #fbbf24 !important;
    font-style: italic !important;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.4) !important;
    background: transparent !important;
    background-color: transparent !important;
}

.text-purple-300, strong.text-purple-300 {
    color: #d8b4fe !important;
    font-weight: bold !important;
    text-shadow: 0 0 8px rgba(216, 180, 254, 0.4) !important;
    background: transparent !important;
    background-color: transparent !important;
}

.text-blue-300, span.text-blue-300 {
    color: #93c5fd !important;
    text-shadow: 0 0 8px rgba(147, 197, 253, 0.4) !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Tailwind/Bootstrap overrides */
.bg-yellow-400,
.bg-purple-300,
.bg-blue-300,
.bg-highlight {
    background: none !important;
    background-color: transparent !important;
}

/* Browser-specific fixes */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: inherit !important;
}

/* Prevent accidental highlighting of decorative elements */
.floating, .glow, .mystical-icon, .particle {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}