/* General Modal Styles */
.vanilla-modal {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Modal Content Box */
.vanilla-modal-content {
    border: 1px solid #3f3f3f;
    background-color: rgba(255, 255, 255, 0.04);
}

.vanilla-modal-title h3 {
    color: white;
}

/* === Theme: Dark === */
.vanilla-modal-theme-dark .vanilla-modal-content {
    background-color: rgba(0, 0, 0, 0.5); /* Dark background with some transparency */
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.vanilla-modal-theme-dark .vanilla-modal-close {
    color: #e9ecef; /* Light color for close button */
}

.vanilla-modal-theme-dark .vanilla-modal-close svg {
    fill: #e9ecef;
}

/* Dark Theme Input Styles */
.vanilla-modal-theme-dark input[type="text"] {
    color: white;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.vanilla-modal-theme-dark input[type="text"]:focus {
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

.vanilla-modal-theme-dark ::placeholder {
    color: #6c757d; /* Lighter placeholder text */
}