/* Toast styling - Minimal */
div[id$="-toast"] .toast-header {
  background-color: var(--background-muted) !important;
  color: var(--text-dark) !important;
  border-bottom: 1px solid var(--border-color) !important;
  font-weight: 500 !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  font-size: 0.875rem;
}

div[id$="-toast"] {
  border-radius: var(--border-radius-lg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  background: var(--glass-bg-dark) !important;
  overflow: hidden !important;
}

div[id$="-toast"] .toast-body {
  padding: var(--spacing-lg) !important;
  font-size: 0.875rem;
  color: var(--text-dark);
}

/* Toast close button styling */
#save-portfolio-toast .btn-close {
  filter: invert(0) !important;
  opacity: 1 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
}

#save-portfolio-toast .btn-close:hover {
  opacity: 0.75 !important;
  filter: invert(0) !important;
}

/* Analysis loading toast close button styling */
#analysis-loading-toast .btn-close {
  filter: invert(0) !important;
  opacity: 1 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
}

#analysis-loading-toast .btn-close:hover {
  opacity: 0.75 !important;
  filter: invert(0) !important;
}

.toast {
  border-radius: var(--border-radius);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  transition: opacity 0.3s ease;
}

.toast.supporter-toast {
  background: linear-gradient(145deg, #f5d74f, #f59331);
  color: #333;
}

.toast-glass {
  background: var(--glass-bg);
  color: #000000;
}

.toast-glass.glow {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* Special toast for portfolio calculation - Glassmorphism turned Solid */
#portfolio-toast {
  background: var(--glass-bg-dark) !important;
  color: var(--text-dark) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--glass-shadow) !important;
}

#portfolio-toast .toast-body {
  color: var(--text-dark) !important;
}

#portfolio-toast p,
#portfolio-toast span,
#portfolio-toast div {
  color: var(--text-dark) !important;
}

/* Portfolio toast 2 (for Tracker) - Glassmorphism turned Solid */
#portfolio-toast-2 {
  background: var(--glass-bg-dark) !important;
  color: var(--text-dark) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--glass-shadow) !important;
}

#portfolio-toast-2 .toast-body {
  color: var(--text-dark) !important;
}

#portfolio-toast-2 p,
#portfolio-toast-2 span,
#portfolio-toast-2 div {
  color: var(--text-dark) !important;
}

/* Ensure all Bootstrap/Dash modals are above any cards/dropdowns - Glassmorphism turned Solid */
.modal,
.modal.show {
  z-index: 20000 !important;
}

.modal-content {
  background: var(--glass-bg-dark) !important;
  border: 1px solid var(--glass-border-light) !important;
  box-shadow: var(--glass-shadow-heavy) !important;
  border-radius: var(--border-radius-xl) !important;
}

.modal-backdrop,
.modal-backdrop.show {
  z-index: 19900 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  /* Standard dimmer */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.modal-header {
  border-bottom: 1px solid var(--glass-border) !important;
  padding: var(--spacing-xl) !important;
  background: transparent !important;
}

.modal-title {
  font-weight: 600 !important;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--text-dark);
}

.modal-footer {
  border-top: 1px solid var(--glass-border) !important;
  padding: var(--spacing-xl) !important;
  background: transparent !important;
}

.modal-body {
  background: transparent !important;
}

/* Ensure Bootstrap tooltips/popovers appear above modals */
.tooltip,
.popover {
  z-index: 21000 !important;
}

/* Loading Toast Styling - Glassmorphism */
#comparison-loading-toast {
  background: var(--glass-bg-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

#comparison-loading-toast .toast-header {
  background-color: var(--primary-color);
  color: white;
  border: none;
}

/* Portfolio Toast Styling - Glassmorphism */
.portfolio-toast {
  background: var(--glass-bg-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 10px;
}

.portfolio-toast .toast-header {
  background: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Payment modal close button - ensure it's black and visible */
#donation-thank-you-modal .modal-header.bg-primary .btn-close,
#donation-thank-you-modal .modal-header.text-white .btn-close {
  filter: none !important;
  opacity: 1 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
  background-size: 1em !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Responsive styles for donation modal */
@media (max-width: 768px) {
  .donation-modal-responsive .modal-dialog {
    max-width: 95% !important;
    margin: 10px auto !important;
  }

  .donation-modal-responsive .modal-body {
    padding: 1rem !important;
  }

  .donation-modal-responsive .modal-body>div:first-child {
    flex-direction: column !important;
  }

  .donation-modal-responsive .modal-body>div:first-child>div {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 1rem !important;
  }

  .donation-modal-responsive #donation-explanation-container {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .donation-modal-responsive #donation-explanation {
    font-size: 0.85rem !important;
    padding: 0.6rem !important;
  }
}

#donation-thank-you-modal .modal-header.bg-primary .btn-close:hover,
#donation-thank-you-modal .modal-header.text-white .btn-close:hover {
  opacity: 0.75 !important;
  filter: none !important;
}

/* Cookie Consent Modal Styling */
#cookie-consent-modal .modal-content {
  border-radius: 16px !important;
  animation: cookieModalFadeIn 0.3s ease-out;
}

@keyframes cookieModalFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#cookie-consent-modal .modal-header {
  border-bottom: none !important;
  padding: 24px 24px 8px 24px !important;
}

#cookie-consent-modal .modal-body {
  padding: 16px 24px !important;
}

#cookie-consent-modal .modal-footer {
  padding: 16px 24px 24px 24px !important;
}

#accept-tracking-btn {
  background-color: #007AFF !important;
  border-color: #007AFF !important;
  color: white !important;
}

#accept-tracking-btn:hover,
#accept-tracking-btn:focus {
  background-color: #0056b3 !important;
  border-color: #0056b3 !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 122, 255, 0.3);
}

#reject-tracking-btn {
  color: #6c757d !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
}

#reject-tracking-btn:hover,
#reject-tracking-btn:focus {
  color: #495057 !important;
  text-decoration: underline !important;
  background: transparent !important;
  border: none !important;
}

/* Analysis Loading Toast Animations */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes progress {
  0% { width: 0%; }
  100% { width: 100%; }
}

#analysis-loading-toast .toast-body div[style*="animation: spin"] {
  animation: spin 1s linear infinite !important;
}

#analysis-loading-toast .toast-body div[style*="animation: progress"] {
  animation: progress 10s linear forwards !important;
}