/**
 * UI Protect - Frontend Protection Styles
 * CSS-based protection against text selection and content copying
 */

/* Disable text selection for the entire body */
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Disable text selection for specific elements */
*, *::before, *::after {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Disable image dragging - but keep images functional */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    -webkit-touch-callout: none;
}

/* Only disable text selection on content images, not UI images */
img:not(.clickable):not([onclick]):not(a img):not(.ui-protect-allow):not(.icon):not([class*="icon"]):not([src*="icon"]):not([alt*="icon"]):not([alt*="logo"]) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Re-enable full functionality for clickable images, icons, and buttons */
img.clickable,
img[onclick],
a img,
img.ui-protect-allow,
.icon img,
.fa-icon,
i[class*="fa-"],
i[class*="icon-"],
span[class*="icon-"],
.wp-block-image img,
.attachment-thumbnail,
.custom-logo img,
img[class*="icon"],
img[src*="icon"],
img[alt*="icon"],
img[alt*="logo"],
.elementor-icon img,
.widget img,
.menu img,
.nav img,
.header img,
.footer img,
.sidebar img,
img.wp-image-*,
.site-logo img,
.logo img,
button img,
.btn img,
.button img {
    pointer-events: auto !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Button content protection - preserve original display properties */
.button-atom,
.button-atom span,
.button-atom i,
.button-atom svg,
button,
.btn,
.button,
[class*="button"],
[class*="btn"] {
    pointer-events: auto !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Preserve button internal structure without forcing display types */
button *,
.btn *,
.button *,
[class*="button"] *,
[class*="btn"] * {
    pointer-events: auto !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure Font Awesome and other icon fonts work properly - NON-DISRUPTIVE */
.fa, .fab, .fad, .fal, .far, .fas,
i[class*="fa-"],
i[class*="icon-"],
.dashicons,
.glyphicon,
[class*="icon-"]:before,
[class*="icon-"]:after,
.iconify,
.material-icons,
span[class*="icon-"],
.icon,
svg,
.svg-icon,
use,
symbol,
defs,
path,
g,
circle,
rect,
polygon,
line,
polyline {
    pointer-events: auto !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* REMOVED: display: inline-block !important; - This was breaking layouts */
    font-family: inherit !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Specific Font Awesome override */
i.fa, i.fab, i.fad, i.fal, i.far, i.fas,
i[class*="fa-"] {
    display: inline-block !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome" !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    content: inherit !important;
}

/* Font Awesome specific font weights */
.fas, i.fas { font-weight: 900 !important; }
.far, i.far { font-weight: 400 !important; }
.fab, i.fab { font-weight: 400 !important; }
.fal, i.fal { font-weight: 300 !important; }
.fad, i.fad { font-weight: 900 !important; }

/* Ensure button icons and content display properly */
button i,
button svg,
button span,
button img,
.btn i,
.btn svg, 
.btn span,
.btn img,
.button i,
.button svg,
.button span,
.button img,
[class*="button"] i,
[class*="button"] svg,
[class*="button"] span,
[class*="button"] img,
a[class*="button"] i,
a[class*="button"] svg,
a[class*="button"] span,
a[class*="button"] img {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline !important;
}

/* Ensure SVG icons in buttons work properly */
button svg,
.button svg,
.btn svg,
[class*="button"] svg,
a svg,
.elementor-icon svg,
.wp-block-social-link svg {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force display for all images - comprehensive override */
img,
picture img,
figure img,
.wp-image,
.attachment-thumbnail,
.size-thumbnail,
.size-medium,
.size-large,
.size-full,
img[class*="wp-image"],
img[src*="://"],
img[src*="cdn"],
img[src*="gravatar"],
img[src*="wordpress"],
img[src*="unsplash"],
img[src*="pixabay"],
img[src*="cloudfront"],
img[src*="amazonaws"],
img[loading],
img[data-src],
img[data-lazy-src],
img[data-original],
.lazy img,
.lazyload img,
.wp-post-image,
noscript img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    max-width: 100%;
    height: auto;
}

/* Inline images should remain inline */
img:not(.wp-image):not(.size-medium):not(.size-large):not(.size-full):not(.attachment-thumbnail) {
    display: inline-block !important;
}

/* Allow ALL external/hotlinked images to display properly */
img[src*="://"],
img[src^="https://"],
img[src^="http://"],
img[src^="//"],
img[data-src*="://"],
img[data-src^="https://"],
img[data-src^="http://"],
img[data-src^="//"],
picture img,
figure img {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
}

/* Support for lazy loading and modern image techniques - FORCE DISPLAY */
img[loading="lazy"],
img[data-src],
img[data-lazy-src],
img[data-original],
.lazy img,
.lazyload img,
.wp-post-image,
noscript img {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
}

/* SELECTIVE: Only override images that are actually being hidden */
img[src*="http://"][style*="display: none"],
img[src*="https://"][style*="display: none"],
img[src^="//"][style*="display: none"],
img[src*="carhiregozo.com"][style*="display: none"],
img[src*="unsplash.com"][style*="display: none"],
img[src*="wordpress.com"][style*="display: none"],
img[src*="gravatar.com"][style*="display: none"],
img[src*="googleapis.com"][style*="display: none"],
img[src*="cloudfront.net"][style*="display: none"],
img[src*="amazonaws.com"][style*="display: none"],
img[src*="http://"][style*="visibility: hidden"],
img[src*="https://"][style*="visibility: hidden"],
img[src^="//"][style*="visibility: hidden"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Basic protection for external images without layout interference */
img[src*="http://"],
img[src*="https://"],
img[src^="//"] {
    pointer-events: auto !important;
    content: normal !important;
}

/* Prevent any CSS content replacement on images */
img:before, img:after {
    display: none !important;
    content: none !important;
}

/* Remove overly aggressive button content protection */
.button-atom,
.button-atom *,
.button-atom__text,
.button-atom__icon,
[class*="button"] *,
[class*="btn"] *,
button span,
button i,
button img,
button svg,
.btn span,
.btn i,
.btn img,
.btn svg {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Ensure no pseudo-elements are blocking images - but preserve icon functionality */
img:before,
img:after {
    display: none !important;
    content: none !important;
    pointer-events: none !important;
}

/* 
 * NOTE: Button pseudo-element blocking is now handled by the Smart CSS Selector System
 * See includes/smart-selectors.php for dynamic generation based on detected page builders
 * 
 * The following rules are kept as fallback for when Smart Selectors are not available
 */

/* Fallback: Only block pseudo-elements on basic non-icon elements */
button:not([class*="icon"]):not(.btn):not(.button):not([class*="button-atom"]):not([class*="bde-"]):not([class*="breakdance"]):not([class*="elementor"]):not([class*="fl-"]):not([class*="et_pb_"]):not([class*="vc_"]):before,
button:not([class*="icon"]):not(.btn):not(.button):not([class*="button-atom"]):not([class*="bde-"]):not([class*="breakdance"]):not([class*="elementor"]):not([class*="fl-"]):not([class*="et_pb_"]):not([class*="vc_"]):after {
    display: none !important;
    content: none !important;
    pointer-events: none !important;
}

/* Fallback: Preserve all icon and page builder pseudo-elements */
i:before,
i:after,
.icon:before,
.icon:after,
[class*="icon-"]:before,
[class*="icon-"]:after,
[class*="fa-"]:before,
[class*="fa-"]:after,
.fa:before,
.fa:after,
.fas:before,
.fas:after,
.far:before,
.far:after,
.fab:before,
.fab:after,
.fal:before,
.fal:after,
.fad:before,
.fad:after,
button i:before,
button i:after,
.btn i:before,
.btn i:after,
.button i:before,
.button i:after,
[class*="button"] i:before,
[class*="button"] i:after,
/* Page builder support */
[class*="button-atom"]:before,
[class*="button-atom"]:after,
[class*="bde-"]:before,
[class*="bde-"]:after,
[class*="breakdance"]:before,
[class*="breakdance"]:after,
[class*="elementor"]:before,
[class*="elementor"]:after,
[class*="fl-"]:before,
[class*="fl-"]:after,
[class*="et_pb_"]:before,
[class*="et_pb_"]:after,
[class*="vc_"]:before,
[class*="vc_"]:after,
.button-atom:before,
.button-atom:after,
.button-atom *:before,
.button-atom *:after {
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    /* DO NOT override content - let the icon fonts work naturally */
}

/* Override any theme styles that might be hiding images - comprehensive coverage */
img:not(.ui-protect-hidden),
picture img,
figure img,
.wp-image,
.attachment-thumbnail,
.size-thumbnail,
.size-medium,
.size-large,
.size-full,
img[class*="wp-image"],
img[src*="://"],
img[src*="cdn"],
img[src*="gravatar"],
img[src*="wordpress"],
img[src*="unsplash"],
img[src*="pixabay"],
img[src*="cloudfront"],
img[src*="amazonaws"],
img[loading],
img[data-src] {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Disable highlighting */
::selection {
    background: transparent;
}

::-moz-selection {
    background: transparent;
}

/* Disable outline on focus */
*:focus {
    outline: none !important;
}

/* Hide scrollbars to prevent right-click on them */
.ui-protect-hide-scrollbars {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.ui-protect-hide-scrollbars::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none; /* Chrome, Safari, and Opera */
}

/* Disable pointer events on certain elements to prevent context menu - but not on UI elements */
video:not([class*="icon"]):not([class*="button"]), 
audio:not([class*="icon"]):not([class*="button"]), 
embed:not([class*="icon"]):not([class*="button"]), 
object:not([class*="icon"]):not([class*="button"]), 
iframe:not([class*="icon"]):not([class*="button"]) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* Re-enable functionality for interactive elements while preserving layout */
button, 
input, 
textarea, 
select, 
a[href],
[class*="button"],
[class*="btn"],
.button-atom,
button *,
.btn *,
.button *,
[role="button"],
[role="button"] * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Specific protection for text inputs while allowing functionality */
input[type="text"], input[type="email"], input[type="password"], 
input[type="search"], input[type="url"], textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Prevent text cursor on non-selectable elements */
body, div, span, p, h1, h2, h3, h4, h5, h6 {
    cursor: default;
}

/* Hide text cursor */
.ui-protect-no-cursor {
    cursor: default !important;
}

/* Custom cursor for protected content */
.ui-protect-custom-cursor {
    cursor: not-allowed;
}

/* Disable print styles */
@media print {
    body {
        display: none !important;
    }
    
    .ui-protect-no-print {
        display: none !important;
    }
}

/* Additional protection classes */
.ui-protect-no-select {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.ui-protect-no-drag {
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
}

.ui-protect-no-context:not(.button):not(.btn):not([class*="button"]):not([class*="icon"]):not(button):not(button *) {
    -webkit-touch-callout: none !important;
    pointer-events: none !important;
}

/* Blur effect for sensitive content (optional) */
.ui-protect-blur-on-devtools {
    transition: filter 0.3s ease;
}

.ui-protect-blur-on-devtools.blurred {
    filter: blur(5px);
}

/* Hide elements when dev tools are detected */
.ui-protect-hide-on-devtools {
    display: block;
}

.ui-protect-hide-on-devtools.hidden {
    display: none !important;
}

/* Watermark protection (optional) */
.ui-protect-watermark {
    position: relative;
    overflow: hidden;
}

.ui-protect-watermark::before {
    content: "Protected Content";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 2em;
    color: rgba(0, 0, 0, 0.1);
    pointer-events: none;
    z-index: 9999;
    white-space: nowrap;
}

/* Disable F12 key visual feedback */
.ui-protect-f12-disabled {
    position: relative;
}

/* Custom alert styling (if you want to replace native alerts) */
.ui-protect-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 2px solid #d63638;
    border-radius: 4px;
    padding: 20px;
    z-index: 999999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    text-align: center;
    min-width: 300px;
    display: none;
}

.ui-protect-alert.show {
    display: block;
}

.ui-protect-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999998;
    display: none;
}

.ui-protect-alert-overlay.show {
    display: block;
}

/* Protection for code blocks and technical content */
pre, code {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

/* Mobile specific protections */
@media (max-width: 768px) {
    /* Disable long press on mobile */
    * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    /* Disable zoom on mobile */
    .ui-protect-no-zoom {
        touch-action: manipulation;
    }
}

/* Custom Modal Styles */
.ui-protect-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ui-protect-fadeIn 0.3s ease-out;
}

.ui-protect-modal {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    animation: ui-protect-slideIn 0.3s ease-out;
    position: relative;
}

.ui-protect-modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 60px 20px 60px; /* More padding to accommodate icon and close button */
    display: flex;
    justify-content: center; /* Center the title */
    align-items: center;
    position: relative;
    min-height: 60px; /* Ensure minimum height for icon */
}

/* CRITICAL: Ensure modal elements always display properly */
body .ui-protect-modal,
body .ui-protect-modal *,
body .ui-protect-modal-overlay,
body .ui-protect-modal-content,
body .ui-protect-modal-header,
body .ui-protect-modal-body,
body .ui-protect-modal-footer,
body .ui-protect-modal-icon,
body .ui-protect-modal-icon svg,
body .ui-protect-modal-close,
body .ui-protect-modal-btn {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
}

/* Force specific display types for certain elements */
body .ui-protect-modal-close,
body .ui-protect-modal-btn {
    display: inline-block !important;
}

body .ui-protect-modal-overlay {
    display: flex !important;
}

body .ui-protect-modal-header {
    display: flex !important;
}

body .ui-protect-modal-icon {
    display: block !important;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    width: 32px;
    height: 32px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    backdrop-filter: blur(10px);
}

body .ui-protect-modal-icon svg {
    display: inline-block !important;
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
    color: white;
    fill: currentColor;
}

.ui-protect-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    text-align: center; /* Center the title */
}

.ui-protect-modal-close {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 28px !important;
    cursor: pointer !important;
    opacity: 0.8 !important;
    transition: opacity 0.2s !important;
    line-height: 1 !important;
    background: none !important;
    border: none !important;
    color: white !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: Arial, sans-serif !important;
    font-weight: normal !important;
    text-decoration: none !important;
    visibility: visible !important;
}

.ui-protect-modal-close:hover {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
}

.ui-protect-modal-body {
    padding: 30px;
    text-align: center;
    background: #fff !important;
    color: #333 !important;
}

.ui-protect-modal-body p {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    display: block !important;
}

.ui-protect-modal-footer {
    padding: 20px 30px !important;
    text-align: center !important;
    border-top: 1px solid #eee !important;
    background: #fff !important;
    display: block !important;
    visibility: visible !important;
}

body .ui-protect-modal-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    display: inline-block !important;
    visibility: visible !important;
    margin: 0 auto !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}

body .ui-protect-modal-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Color Theme Variations */

/* Default Theme (Blue/Purple) - Already applied above */

/* Warning Theme (Orange/Yellow) */
body .ui-protect-theme-warning .ui-protect-modal-header {
    background: linear-gradient(135deg, #ff9a56 0%, #ff8a00 100%);
}

body .ui-protect-theme-warning .ui-protect-modal-btn {
    background: linear-gradient(135deg, #ff9a56 0%, #ff8a00 100%) !important;
}

/* Error Theme (Red) */
body .ui-protect-theme-error .ui-protect-modal-header {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
}

body .ui-protect-theme-error .ui-protect-modal-btn {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%) !important;
}

/* Success Theme (Green) */
body .ui-protect-theme-success .ui-protect-modal-header {
    background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
}

body .ui-protect-theme-success .ui-protect-modal-btn {
    background: linear-gradient(135deg, #51cf66 0%, #40c057 100%) !important;
}

/* Info Theme (Blue) */
body .ui-protect-theme-info .ui-protect-modal-header {
    background: linear-gradient(135deg, #339af0 0%, #228be6 100%);
}

body .ui-protect-theme-info .ui-protect-modal-btn {
    background: linear-gradient(135deg, #339af0 0%, #228be6 100%) !important;
}

/* Dark Theme (Black/Gray) */
body .ui-protect-theme-dark .ui-protect-modal-header {
    background: linear-gradient(135deg, #495057 0%, #343a40 100%);
}

body .ui-protect-theme-dark .ui-protect-modal-btn {
    background: linear-gradient(135deg, #495057 0%, #343a40 100%) !important;
}

body .ui-protect-theme-dark .ui-protect-modal {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
}

body .ui-protect-theme-dark .ui-protect-modal-body p {
    color: #e2e8f0 !important;
}

body .ui-protect-theme-dark .ui-protect-modal-footer {
    border-top-color: #4a5568 !important;
}

/* Modern Theme (Teal/Cyan) */
body .ui-protect-theme-modern .ui-protect-modal-header {
    background: linear-gradient(135deg, #20c997 0%, #12b886 100%);
}

body .ui-protect-theme-modern .ui-protect-modal-btn {
    background: linear-gradient(135deg, #20c997 0%, #12b886 100%) !important;
}

/* Alert Type Specific Styling */
.ui-protect-alert-warning .ui-protect-modal-icon {
    color: #ff8800;
}

.ui-protect-alert-error .ui-protect-modal-icon {
    color: #ff4444;
}

.ui-protect-alert-info .ui-protect-modal-icon {
    color: #2196f3;
}

.ui-protect-alert-security .ui-protect-modal-icon {
    color: #ffd700;
}

/* Enhanced Icon Animations */
body .ui-protect-modal-icon {
    animation: ui-protect-iconPulse 2s infinite ease-in-out;
}

@keyframes ui-protect-iconPulse {
    0%, 100% { 
        transform: translateY(-50%) scale(1); 
        background: rgba(255, 255, 255, 0.15);
    }
    50% { 
        transform: translateY(-50%) scale(1.05); 
        background: rgba(255, 255, 255, 0.25);
    }
}

/* Animations */
@keyframes ui-protect-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ui-protect-slideIn {
    from { 
        transform: translateY(-50px);
        opacity: 0;
    }
    to { 
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive modal */
@media (max-width: 480px) {
    .ui-protect-modal {
        width: 95%;
        margin: 10px;
    }
    
    .ui-protect-modal-header,
    .ui-protect-modal-body,
    .ui-protect-modal-footer {
        padding: 15px;
    }
    
    .ui-protect-modal-header h3 {
        font-size: 16px;
        margin-left: 40px; /* Adjust for icon space */
    }
    
    body .ui-protect-modal-icon {
        width: 28px;
        height: 28px;
        left: 15px;
    }
    
    body .ui-protect-modal-icon svg {
        width: 16px;
        height: 16px;
    }
    
    .ui-protect-modal-body p {
        font-size: 14px;
    }
}

/* CRITICAL OVERRIDE - Force display of all images and icons - SELECTIVE APPLICATION */
/* Only apply when elements are actually hidden */
img[style*="display: none"], 
img[style*="visibility: hidden"],
svg[style*="display: none"],
svg[style*="visibility: hidden"],
i[class*="fa-"][style*="display: none"],
i[class*="fa-"][style*="visibility: hidden"],
.icon[style*="display: none"],
.icon[style*="visibility: hidden"],
button img[style*="display: none"],
button svg[style*="display: none"],
button i[style*="display: none"],
[class*="button"] img[style*="display: none"],
[class*="button"] svg[style*="display: none"],
[class*="button"] i[style*="display: none"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Ensure Font Awesome icons display properly */
i[class*="fa-"]:not([style*="display: none"]) {
    display: inline-block;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Ensure SVG icons display properly */
svg:not([style*="display: none"]) {
    display: inline-block;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Ensure external images display properly */
img[src*="http://"]:not([style*="display: none"]),
img[src*="https://"]:not([style*="display: none"]),
img[src^="//"]:not([style*="display: none"]) {
    display: block;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Force external images to show - CAREFUL APPLICATION */
img[src*="http://"],
img[src*="https://"],
img[src^="//"] {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: none !important;
    content: normal !important;
}

/* Override any theme hiding - SELECTIVE */
*:not(.ui-protect-hidden) img:not([style*="display: none"]),
*:not(.ui-protect-hidden) svg:not([style*="display: none"]),
*:not(.ui-protect-hidden) i:not([style*="display: none"]) {
    visibility: visible !important;
    opacity: 1 !important;
}