/* Standardized Close Button Styles - White on Blue Background */
/* Apply to all close buttons across the application */

/* Universal close button styling */
.modal-close,
.close,
.popup-close,
.btn-close,
button[onclick*="close"],
button[onclick*="Close"],
span[onclick*="close"],
span[onclick*="Close"],
.close-btn,
.close-button {
    background: #2563eb !important; /* Blue background */
    color: white !important;
    border: none !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 30px !important;
    min-height: 30px !important;
}

/* Hover effects for close buttons */
.modal-close:hover,
.close:hover,
.popup-close:hover,
.btn-close:hover,
button[onclick*="close"]:hover,
button[onclick*="Close"]:hover,
span[onclick*="close"]:hover,
span[onclick*="Close"]:hover,
.close-btn:hover,
.close-button:hover {
    background: #1d4ed8 !important; /* Darker blue on hover */
    transform: scale(1.05) !important;
}

/* Specific overrides for inline styled close buttons */
button[style*="color"]:not([class]):hover {
    background: #1d4ed8 !important;
    color: white !important;
}

/* Round close buttons (X in circle) */
.modal-close[style*="border-radius: 50%"],
.close[style*="border-radius: 50%"],
button[onclick*="close"][style*="border-radius: 50%"] {
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Close buttons in top-right corner of modals */
.modal-header .close,
.modal-header .modal-close,
[style*="position: absolute"][style*="top"][style*="right"] {
    position: absolute !important;
    top: 12px !important;
    right: 16px !important;
    background: #2563eb !important;
    color: white !important;
    border: none !important;
    z-index: 1000 !important;
}

/* Toast notification close buttons */
.toast .close,
.toast .modal-close,
.notification .close {
    background: #2563eb !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* Specific fixes for commonly used close button patterns */
button[onclick*="remove()"],
button[onclick*="style.display='none'"],
button[onclick*="Modal()"] {
    background: #2563eb !important;
    color: white !important;
    border: none !important;
}

/* Override any conflicting text colors */
.modal-close *,
.close *,
.popup-close *,
button[onclick*="close"] * {
    color: white !important;
}

/* Ensure proper contrast and readability */
.modal-close::before,
.close::before,
.popup-close::before {
    color: white !important;
}

/* Special handling for Unicode close symbols */
button:contains("×"),
button:contains("✕"),
span:contains("×"),
span:contains("✕") {
    background: #2563eb !important;
    color: white !important;
}

/* Cancel buttons - RED STYLING */
.cancel-button-red,
button[onclick*="cancel"],
button[onclick*="Cancel"],
.btn-cancel,
button:contains("Cancel"),
button[data-action="cancel"],
.modal-cancel-btn {
    background: #C93B2A !important; /* Red background */
    background-color: #C93B2A !important;
    color: white !important;
    border: 1px solid #C93B2A !important;
    border-color: #C93B2A !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Cancel button hover effects */
.cancel-button-red:hover,
button[onclick*="cancel"]:hover,
button[onclick*="Cancel"]:hover,
.btn-cancel:hover,
.modal-cancel-btn:hover {
    background: #B02A20 !important;
    background-color: #B02A20 !important;
    border-color: #B02A20 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(201, 59, 42, 0.3) !important;
}

/* Cancel button focus states */
.cancel-button-red:focus,
button[onclick*="cancel"]:focus,
button[onclick*="Cancel"]:focus,
.btn-cancel:focus,
.modal-cancel-btn:focus {
    outline: 2px solid #F87171 !important;
    outline-offset: 2px !important;
    background: #B02A20 !important;
    background-color: #B02A20 !important;
}

/* Cancel buttons that act as close buttons */
.btn-secondary[onclick*="close"],
.btn-secondary[onclick*="Close"] {
    background: #2563eb !important;
    color: white !important;
    border: 1px solid #2563eb !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-close,
    .close,
    .popup-close {
        min-width: 36px !important;
        min-height: 36px !important;
        font-size: 1.2rem !important;
    }
}

/* Focus states for accessibility */
.modal-close:focus,
.close:focus,
.popup-close:focus,
button[onclick*="close"]:focus {
    outline: 2px solid #60a5fa !important;
    outline-offset: 2px !important;
    background: #1d4ed8 !important;
}

/* Animation for smooth transitions */
@keyframes closeButtonPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.modal-close:active,
.close:active,
.popup-close:active {
    animation: closeButtonPulse 0.2s ease !important;
}