/* 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.35); /* Dark background, more transparent */
    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"],
.vanilla-modal-theme-dark select,
.vanilla-modal-theme-dark textarea {
    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,
.vanilla-modal-theme-dark select:focus,
.vanilla-modal-theme-dark textarea:focus {
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Bootstrap's .form-select chevron is dark by default — swap in the light
   variant so it stays visible on the dark field. */
.vanilla-modal-theme-dark .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Select text/popup on dark: -webkit-text-fill-color forces the closed
   control's text white in Safari (plain `color` is ignored there with
   appearance:none), and color-scheme makes the native dropdown list render
   dark with proper contrast in every engine — no per-option colours needed. */
.vanilla-modal-theme-dark select {
    color-scheme: dark;
    -webkit-text-fill-color: #fff;
}

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

/* Screenshot checkbox in the dark modal — same palette as the login page:
   translucent dark box, translucent white border, brighter when checked. */
.vanilla-modal-theme-dark .feedback-check input[type="checkbox"] {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(0, 0, 0, 0.2);
}

.vanilla-modal-theme-dark .feedback-check input[type="checkbox"]:focus {
    border-color: rgba(255, 255, 255, 0.5);
}

.vanilla-modal-theme-dark .feedback-check input[type="checkbox"]:checked {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Buttons inside a dark modal invert (same treatment as the site dark theme):
   the primary pill goes white with dark text, the secondary keeps white text
   with a translucent white border. Hover/focus variants are included so the
   global .btn-* hover rules can't flip the colours back. */
.vanilla-modal-theme-dark .btn-primary,
.vanilla-modal-theme-dark .btn-primary:hover,
.vanilla-modal-theme-dark .btn-primary:active,
.vanilla-modal-theme-dark .btn-primary:focus {
    background-color: #ffffff;
    color: #1b1b1b;
}

.vanilla-modal-theme-dark .btn-primary svg,
.vanilla-modal-theme-dark .btn-primary:hover svg,
.vanilla-modal-theme-dark .btn-primary:active svg,
.vanilla-modal-theme-dark .btn-primary:focus svg {
    color: #1b1b1b;
    fill: #1b1b1b;
}

.vanilla-modal-theme-dark .btn-secondary,
.vanilla-modal-theme-dark .btn-secondary:hover,
.vanilla-modal-theme-dark .btn-secondary:active,
.vanilla-modal-theme-dark .btn-secondary:focus {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.6);
}

.vanilla-modal-theme-dark .btn-secondary svg,
.vanilla-modal-theme-dark .btn-secondary:hover svg,
.vanilla-modal-theme-dark .btn-secondary:active svg,
.vanilla-modal-theme-dark .btn-secondary:focus svg {
    color: #ffffff;
    fill: #ffffff;
}