/* ===================================================
   PROFESSIONAL CONFIRMATION DIALOG SYSTEM
   Mobile-First Responsive Design with Perfect Alignment
   =================================================== */

/* ===== MODAL STRUCTURE & RESPONSIVENESS ===== */
.modal-dialog-responsive {
   max-width: 480px;
   margin: 1rem;
   width: calc(100% - 2rem);
}

.modal-content {
   background: #fff;
   border-radius: 16px;
   border: none;
   box-shadow: 0 20px 60px rgb(0, 0, 0, 0.15);
   overflow: hidden;
}

/* ===== HEADER SECTION - PERFECT CENTER ALIGNMENT ===== */
.dialog-header-responsive {
   padding: 2rem 2rem 1rem;
   background: #f8f9fb;
   border-bottom: none;
   position: relative;
}

/* Logo container - perfectly centered */
.dialog-logo-container {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 1.5rem;
}

.dialog-logo {
   height: 45px;
   width: auto;
   object-fit: contain;
}

/* Icon and title container - inline alignment */
.modal-header .w-100 {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}

.dialog-icon-container {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 0.75rem;
}

.dialog-icon {
   font-size: 3rem !important;
   display: block;
   line-height: 1;
}

/* Title and subtitle alignment */
.dialog-title {
   font-size: 1.5rem;
   font-weight: 600;
   color: #2c3e50;
   margin: 0 0 0.5rem;
   text-align: center;
   line-height: 1.2;
}

.dialog-subtitle {
   font-size: 0.9rem;
   color: #6c757d;
   margin: 0;
   text-align: center;
   line-height: 1.3;
}

/* ===== BODY SECTION - PERFECT CENTER ALIGNMENT ===== */
.dialog-body-responsive {
   padding: 1.5rem 2rem;
   background: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
}

.dialog-message {
   font-size: 1rem;
   color: #495057;
   line-height: 1.6;
   max-width: 100%;
   word-wrap: break-word;
   margin: 0;
}

/* ===== FOOTER SECTION - PERFECT BUTTON ALIGNMENT ===== */
.dialog-footer-responsive {
   padding: 1rem 2rem 2rem;
   background: #fff;
   border-top: none;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 1rem;
}

/* Button styling - enhanced touch targets */
.dialog-btn {
   font-weight: 500;
   padding: 0.75rem 2rem;
   border-radius: 12px;
   transition: all 0.3s ease;
   border: none;
   min-width: 120px;
   font-size: 0.95rem;
   letter-spacing: 0.025em;
   height: 44px; /* iOS touch target */
   display: flex;
   align-items: center;
   justify-content: center;
}

.dialog-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgb(0, 0, 0, 0.15);
}

.dialog-btn:active {
   transform: translateY(0);
}

/* Primary button styling */
.dialog-btn.btn-primary,
.dialog-btn.btn-warning,
.dialog-btn.btn-danger,
.dialog-btn.btn-success {
   color: white;
   font-weight: 600;
}

.dialog-btn.btn-primary {
   background: #495057;
}

.dialog-btn.btn-primary:hover {
   background: #343a40;
   box-shadow: 0 8px 25px rgb(73, 80, 87, 0.4);
}

.dialog-btn.btn-warning {
   background: #f39c12;
}

.dialog-btn.btn-warning:hover {
   background: #e67e22;
   box-shadow: 0 8px 25px rgb(243, 156, 18, 0.4);
}

.dialog-btn.btn-danger {
   background: #e74c3c;
}

.dialog-btn.btn-danger:hover {
   background: #c0392b;
   box-shadow: 0 8px 25px rgb(231, 76, 60, 0.4);
}

.dialog-btn.btn-success {
   background: #27ae60;
}

.dialog-btn.btn-success:hover {
   background: #219a52;
   box-shadow: 0 8px 25px rgb(39, 174, 96, 0.4);
}

/* Secondary button styling */
.dialog-btn.btn-outline-secondary {
   background: #fff;
   border: 2px solid #dee2e6;
   color: #6c757d;
}

.dialog-btn.btn-outline-secondary:hover {
   background: #f8f9fa;
   border-color: #adb5bd;
   color: #495057;
   box-shadow: 0 4px 15px rgb(0, 0, 0, 0.1);
}

/* ===== MOBILE RESPONSIVENESS ===== */
@media (max-width: 576px) {
   .modal-dialog-responsive {
      margin: 0.5rem;
      width: calc(100% - 1rem);
      max-width: none;
   }

   .dialog-header-responsive {
      padding: 1.5rem 1.5rem 0.75rem;
   }

   .dialog-logo {
      height: 35px;
   }

   .dialog-icon {
      font-size: 2.5rem !important;
   }

   .dialog-title {
      font-size: 1.25rem;
   }

   .dialog-subtitle {
      font-size: 0.85rem;
   }

   .dialog-body-responsive {
      padding: 1rem 1.5rem;
   }

   .dialog-message {
      font-size: 0.9rem;
   }

   .dialog-footer-responsive {
      padding: 0.75rem 1.5rem 1.5rem;
      flex-direction: column;
      gap: 0.75rem;
   }

   .dialog-btn {
      width: 100%;
      min-width: unset;
      padding: 0.875rem 1rem;
   }
}

@media (max-width: 400px) {
   .modal-dialog-responsive {
      margin: 0.25rem;
      width: calc(100% - 0.5rem);
   }

   .dialog-header-responsive {
      padding: 1rem 1rem 0.5rem;
   }

   .dialog-logo {
      height: 30px;
   }

   .dialog-icon {
      font-size: 2rem !important;
   }

   .dialog-title {
      font-size: 1.1rem;
   }

   .dialog-body-responsive {
      padding: 0.75rem 1rem;
   }

   .dialog-footer-responsive {
      padding: 0.5rem 1rem 1rem;
   }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
@media (prefers-reduced-motion: reduce) {
   .dialog-btn,
   .modal-content {
      transition: none;
   }

   .dialog-btn:hover {
      transform: none;
   }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
   .modal-content {
      border: 2px solid #000;
   }

   .dialog-btn.btn-outline-secondary {
      border-width: 3px;
   }
}

/* Focus indicators for keyboard navigation */
.dialog-btn:focus-visible {
   outline: 3px solid #06c;
   outline-offset: 2px;
}

/* ===== LEGACY ALERT SYSTEM (if still needed) ===== */
.alert-container {
   position: fixed;
   top: 20px;
   right: 20px;
   z-index: 9999;
   max-width: 400px;
   width: auto;
   min-width: 300px;
}

.alert {
   border: none;
   border-radius: 12px;
   box-shadow: 0 8px 25px rgb(0, 0, 0, 0.1);
   margin-bottom: 0.75rem;
   padding: 1rem 1.5rem;
   position: relative;
   overflow: hidden;
}

/* Danger button styling */
.modal-footer .btn-danger {
   background: #dc3545;
   color: white;
}

.modal-footer .btn-danger:hover {
   background: #c82333;
   box-shadow: 0 8px 25px rgb(220, 53, 69, 0.3);
}

/* Warning button styling */
.modal-footer .btn-warning {
   background: #ffc107;
   color: #212529;
   font-weight: 600;
}

.modal-footer .btn-warning:hover {
   background: #e0a800;
   box-shadow: 0 8px 25px rgb(255, 193, 7, 0.3);
}

/* Success button styling */
.modal-footer .btn-success {
   background: #28a745;
   color: white;
}

.modal-footer .btn-success:hover {
   background: #218838;
   box-shadow: 0 8px 25px rgb(40, 167, 69, 0.3);
}

/* Cancel button styling - clean outline */
.modal-footer .btn-outline-secondary {
   background: transparent;
   border: 2px solid #6c757d;
   color: #6c757d;
   font-weight: 500;
}

.modal-footer .btn-outline-secondary:hover {
   background: #6c757d;
   color: white;
   box-shadow: 0 8px 25px rgb(108, 117, 125, 0.3);
}

/* Professional Alert Styles */
.alert {
   border-radius: 12px;
   border: none;
   box-shadow: 0 4px 15px rgb(0, 0, 0, 0.1);
   backdrop-filter: blur(10px);
   border-left: 4px solid;
   animation: slideInFromTop 0.4s ease-out;
   width: 100%;
}

/* Alert Type Specific Styling */
.alert-success {
   background: #f0fdf4;
   border-left-color: #10b981;
   color: #065f46;
   border: 1px solid rgb(16, 185, 129, 0.2);
}

.alert-success strong {
   color: #047857;
}

.alert-success i {
   color: #10b981;
   text-shadow: 0 1px 2px rgb(16, 185, 129, 0.3);
}

.alert-danger {
   background: #fef2f2;
   border-left-color: #e11d48;
   color: #991b1b;
   border: 1px solid rgb(225, 29, 72, 0.2);
}

.alert-danger strong {
   color: #dc2626;
}

.alert-danger i {
   color: #e11d48;
   text-shadow: 0 1px 2px rgb(225, 29, 72, 0.3);
}

.alert-warning {
   background: #fffbeb;
   border-left-color: #f59e0b;
   color: #92400e;
   border: 1px solid rgb(245, 158, 11, 0.2);
}

.alert-warning strong {
   color: #d97706;
}

.alert-warning i {
   color: #f59e0b;
   text-shadow: 0 1px 2px rgb(245, 158, 11, 0.3);
}

.alert-info {
   background: #eff6ff;
   border-left-color: #3b82f6;
   color: #1e40af;
   border: 1px solid rgb(59, 130, 246, 0.2);
}

.alert-info strong {
   color: #2563eb;
}

.alert-info i {
   color: #3b82f6;
   text-shadow: 0 1px 2px rgb(59, 130, 246, 0.3);
}

/* Icon Styling */
.alert i {
   font-size: 1.2em;
   margin-right: 0.75rem;
   vertical-align: middle;
   filter: drop-shadow(0 1px 3px rgb(0, 0, 0, 0.1));
   position: relative;
   top: -1px;
}

.alert i.bi-check-circle-fill {
   background: linear-gradient(135deg, #10b981, #059669);
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.alert i.bi-exclamation-triangle-fill {
   background: linear-gradient(135deg, #e11d48, #dc2626);
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.alert i.bi-x-circle-fill {
   background: linear-gradient(135deg, #e11d48, #be123c);
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.alert i.bi-shield-exclamation {
   background: linear-gradient(135deg, #dc2626, #991b1b);
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.alert i.bi-info-circle-fill {
   background: linear-gradient(135deg, #3b82f6, #2563eb);
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

/* Close Button Enhancement */
.alert .btn-close {
   position: absolute;
   top: 50%;
   right: 1rem;
   transform: translateY(-50%);
   opacity: 0.7;
   transition: all 0.3s ease;
   background: none;
   border: none;
   font-size: 1.1em;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: inherit;
   filter: drop-shadow(0 1px 2px rgb(0, 0, 0, 0.1));
}

.alert .btn-close:hover {
   opacity: 1;
   background-color: rgb(0, 0, 0, 0.08);
   transform: translateY(-50%) scale(1.05);
   color: inherit;
}

.alert .btn-close:focus {
   box-shadow: 0 0 0 3px rgb(0, 0, 0, 0.1);
   outline: none;
}

.alert-success .btn-close:hover {
   background-color: rgb(16, 185, 129, 0.1);
}

.alert-danger .btn-close:hover {
   background-color: rgb(225, 29, 72, 0.1);
}

.alert-warning .btn-close:hover {
   background-color: rgb(245, 158, 11, 0.1);
}

.alert-info .btn-close:hover {
   background-color: rgb(59, 130, 246, 0.1);
}

/* Animations */
@keyframes slideInFromTop {
   from {
      opacity: 0;
      transform: translateY(-20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes slideOut {
   from {
      opacity: 1;
      transform: translateY(0);
      max-height: 200px;
   }

   to {
      opacity: 0;
      transform: translateY(-10px);
      max-height: 0;
      margin: 0;
      padding: 0;
   }
}

.alert.fade.show {
   animation: slideInFromTop 0.4s ease-out;
}

.alert.fade:not(.show) {
   animation: slideOut 0.3s ease-in forwards;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
   .alert-container {
      top: 10px;
      right: 10px;
      left: 10px;
      max-width: none;
      min-width: auto;
      width: calc(100% - 20px);
   }

   .alert {
      margin-left: 0;
      margin-right: 0;
      padding: 0.875rem 1rem;
      border-radius: 10px;
   }

   .alert .btn-close {
      right: 0.75rem;
      width: 20px;
      height: 20px;
      font-size: 1em;
   }
}

/* Compact Disclaimer Styles */
.alert[style*='max-width: fit-content'] {
   min-width: 300px;
   max-width: 600px !important;
}

@media (max-width: 576px) {
   .alert[style*='max-width: fit-content'] {
      min-width: 280px;
      max-width: 95% !important;
      font-size: 0.75rem;
   }

   .alert .fas {
      font-size: 0.8rem;
   }
}

/* Progress Bar for Auto-dismiss */
.alert[data-auto-dismiss]::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   height: 3px;
   border-radius: 0 0 12px 12px;
   animation: progressBar linear;
}

.alert-success[data-auto-dismiss]::after {
   background: rgb(16, 185, 129, 0.8);
}

.alert-danger[data-auto-dismiss]::after {
   background: rgb(225, 29, 72, 0.8);
}

.alert-warning[data-auto-dismiss]::after {
   background: rgb(245, 158, 11, 0.8);
}

.alert-info[data-auto-dismiss]::after {
   background: rgb(59, 130, 246, 0.8);
}

.alert-success[data-auto-dismiss='4000']::after {
   animation-duration: 4s;
}

.alert-danger[data-auto-dismiss='5000']::after,
.alert-danger[data-auto-dismiss='6000']::after {
   animation-duration: var(--progress-duration, 5s);
}

@keyframes progressBar {
   from {
      width: 100%;
   }

   to {
      width: 0%;
   }
}

/* Hover Effects */
.alert:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 35px rgb(0, 0, 0, 0.15);
   transition: all 0.3s ease;
}

/* Professional Dialog Styling - Mobile-First Responsive Design */

/* Base Modal Styles - Mobile First (320px+) */
.modal-dialog-responsive {
   margin: 0.5rem;
   max-width: calc(100vw - 1rem);
   width: 100%;
}

.modal-dialog-responsive .modal-content {
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid rgb(200, 210, 220, 0.3);
   box-shadow:
      0 10px 30px rgb(0, 0, 0, 0.15),
      0 4px 15px rgb(0, 0, 0, 0.1);
   background: #f8f9fb;
}

/* Mobile-First Header Design */
.dialog-header-responsive {
   padding: 1rem 1rem 0.5rem;
   background: #f8f9fb;
   border-bottom: none;
   text-align: center;
   border-radius: 12px 12px 0 0;
}

/* Mobile-First Body Design */
.dialog-body-responsive {
   padding: 0.5rem 1rem;
   background: #f8f9fb;
   text-align: center;
}

/* Mobile-First Footer Design - Stacked Buttons */
.dialog-footer-responsive {
   background: #f8f9fb;
   border-top: none;
   padding: 0.75rem 1rem 1rem;
   border-radius: 0 0 12px 12px;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

/* Mobile Logo Styling */
.dialog-logo-container {
   margin-bottom: 0.75rem;
}

.dialog-logo-container .dialog-logo {
   height: 32px;
   width: 48px;
   filter: drop-shadow(0 2px 4px rgb(0 0 0 / 10%));
   transition: all 0.3s ease;
}

/* Mobile Icon Styling */
.dialog-icon-container {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 0.75rem;
}

.dialog-icon {
   font-size: 2rem !important;
   opacity: 0.85;
   transition: all 0.3s ease;
}

/* Mobile Typography */
.dialog-title {
   font-size: 1.1rem;
   font-weight: 600;
   color: #2c3e50;
   margin: 0 0 0.5rem;
   line-height: 1.3;
}

.dialog-subtitle {
   font-size: 0.8rem;
   color: #6c757d;
   margin: 0;
   line-height: 1.4;
}

.dialog-message {
   color: #5a6169;
   font-size: 0.85rem;
   line-height: 1.5;
   word-break: break-word;
   hyphens: auto;
}

/* Mobile-First Button Design - Full Width Touch Targets */
.dialog-btn {
   font-weight: 500;
   padding: 0.75rem 1rem;
   border-radius: 8px;
   transition: all 0.3s ease;
   min-height: 44px; /* iOS touch target minimum */
   font-size: 0.9rem;
   width: 100%;
   border: 2px solid transparent;
}

.dialog-btn:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}

.dialog-btn:active {
   transform: translateY(0);
}

/* Small Mobile Optimizations (320px - 480px) */
@media (max-width: 480px) {
   .modal-dialog-responsive {
      margin: 0.25rem;
      max-width: calc(100vw - 0.5rem);
   }

   .dialog-header-responsive {
      padding: 0.75rem 0.75rem 0.5rem;
   }

   .dialog-body-responsive {
      padding: 0.5rem 0.75rem;
   }

   .dialog-footer-responsive {
      padding: 0.5rem 0.75rem 0.75rem;
      gap: 0.4rem;
   }

   .dialog-logo-container .dialog-logo {
      height: 28px;
      width: 42px;
   }

   .dialog-icon {
      font-size: 1.75rem !important;
   }

   .dialog-title {
      font-size: 1rem;
      margin-bottom: 0.4rem;
   }

   .dialog-subtitle {
      font-size: 0.75rem;
   }

   .dialog-message {
      font-size: 0.8rem;
      line-height: 1.45;
   }

   .dialog-btn {
      padding: 0.7rem 0.75rem;
      font-size: 0.85rem;
      min-height: 42px;
   }
}

/* Medium Mobile Landscape & Portrait Tablets (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
   .modal-dialog-responsive {
      margin: 1rem auto;
      max-width: 90vw;
      width: auto;
   }

   .dialog-header-responsive {
      padding: 1.25rem 1.25rem 0.75rem;
   }

   .dialog-body-responsive {
      padding: 0.75rem 1.25rem;
   }

   .dialog-footer-responsive {
      padding: 0.75rem 1.25rem 1.25rem;
      flex-direction: row;
      justify-content: center;
      gap: 0.75rem;
   }

   .dialog-btn {
      width: auto;
      min-width: 120px;
      padding: 0.75rem 1.5rem;
   }

   .dialog-logo-container .dialog-logo {
      height: 40px;
      width: 60px;
   }

   .dialog-icon {
      font-size: 2.25rem !important;
   }

   .dialog-title {
      font-size: 1.15rem;
   }

   .dialog-subtitle {
      font-size: 0.82rem;
   }

   .dialog-message {
      font-size: 0.88rem;
   }
}

/* Large Tablets & Small Desktops (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
   .modal-dialog-responsive {
      margin: 1.5rem auto;
      max-width: 500px;
      width: auto;
   }

   .dialog-header-responsive {
      padding: 1.5rem 1.5rem 1rem;
   }

   .dialog-body-responsive {
      padding: 0.75rem 1.5rem;
   }

   .dialog-footer-responsive {
      padding: 1rem 1.5rem 1.5rem;
      flex-direction: row;
      justify-content: center;
      gap: 1rem;
   }

   .dialog-btn {
      width: auto;
      min-width: 130px;
      padding: 0.75rem 1.75rem;
      font-size: 0.9rem;
   }

   .dialog-logo-container .dialog-logo {
      height: 44px;
      width: 66px;
   }

   .dialog-icon {
      font-size: 2.5rem !important;
   }

   .dialog-title {
      font-size: 1.2rem;
   }

   .dialog-message {
      font-size: 0.9rem;
   }
}

/* Desktop & Large Screens (1025px+) */
@media (min-width: 1025px) {
   .modal-dialog-responsive {
      margin: 2rem auto;
      max-width: 550px;
      width: auto;
   }

   .dialog-header-responsive {
      padding: 2rem 2rem 1rem;
   }

   .dialog-body-responsive {
      padding: 0.75rem 2rem 1rem;
   }

   .dialog-footer-responsive {
      padding: 1rem 2rem 2rem;
      flex-direction: row;
      justify-content: center;
      gap: 1.25rem;
   }

   .dialog-btn {
      width: auto;
      min-width: 140px;
      padding: 0.8rem 2rem;
      font-size: 0.95rem;
   }

   .dialog-logo-container .dialog-logo {
      height: 48px;
      width: 72px;
   }

   .dialog-icon {
      font-size: 3rem !important;
   }

   .dialog-title {
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
   }

   .dialog-subtitle {
      font-size: 0.85rem;
   }

   .dialog-message {
      font-size: 0.95rem;
      line-height: 1.5;
   }
}

/* Ultra-wide Screens (1440px+) */
@media (min-width: 1440px) {
   .modal-dialog-responsive {
      max-width: 600px;
   }

   .dialog-header-responsive {
      padding: 2.25rem 2.25rem 1.25rem;
   }

   .dialog-body-responsive {
      padding: 1rem 2.25rem 1.25rem;
   }

   .dialog-footer-responsive {
      padding: 1.25rem 2.25rem 2.25rem;
      gap: 1.5rem;
   }

   .dialog-btn {
      min-width: 150px;
      padding: 0.85rem 2.25rem;
      font-size: 1rem;
   }

   .dialog-icon {
      font-size: 3.25rem !important;
   }

   .dialog-title {
      font-size: 1.3rem;
   }

   .dialog-message {
      font-size: 1rem;
   }
}

/* Accessibility & Touch Improvements */
@media (hover: none) and (pointer: coarse) {
   /* Touch devices - larger touch targets */
   .dialog-btn {
      min-height: 48px;
      padding: 0.875rem 1rem;
   }

   .dialog-btn:hover {
      transform: none; /* Disable hover animations on touch */
   }

   .dialog-btn:active {
      background-color: rgb(0, 0, 0, 0.05);
   }
}

/* High DPI / Retina Display Optimizations */
@media (min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   .dialog-logo-container .dialog-logo {
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
   }

   .dialog-icon {
      text-rendering: optimizelegibility;
   }
}

/* Landscape Orientation Optimizations */
@media (orientation: landscape) and (max-height: 500px) {
   .modal-dialog-responsive {
      margin: 0.5rem auto;
      max-height: 90vh;
   }

   .dialog-header-responsive {
      padding: 0.75rem 1rem 0.5rem;
   }

   .dialog-body-responsive {
      padding: 0.5rem 1rem;
      max-height: 40vh;
      overflow-y: auto;
   }

   .dialog-footer-responsive {
      padding: 0.5rem 1rem 0.75rem;
   }

   .dialog-logo-container {
      margin-bottom: 0.5rem;
   }

   .dialog-icon-container {
      margin-bottom: 0.5rem;
   }

   .dialog-icon {
      font-size: 1.5rem !important;
   }

   .dialog-title {
      font-size: 1rem;
      margin-bottom: 0.25rem;
   }

   .dialog-subtitle {
      font-size: 0.75rem;
   }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
   .modal-dialog-responsive .modal-content {
      background: #2d3748;
      border-color: rgb(255, 255, 255, 0.1);
   }

   .dialog-header-responsive,
   .dialog-body-responsive,
   .dialog-footer-responsive {
      background: #2d3748;
   }

   .dialog-title {
      color: #e2e8f0;
   }

   .dialog-subtitle,
   .dialog-message {
      color: #a0aec0;
   }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
   .dialog-btn,
   .dialog-icon,
   .dialog-logo-container .dialog-logo {
      transition: none;
   }

   .dialog-btn:hover {
      transform: none;
   }

   .modal.show .dialog-logo,
   .modal.show .modal-icon i {
      animation: none;
   }
}

/* Focus Indicators for Accessibility */
.dialog-btn:focus {
   outline: 2px solid #4f9eff;
   outline-offset: 2px;
   box-shadow: 0 0 0 3px rgb(79, 158, 255, 0.2);
}

/* Button Color Schemes - Mobile Optimized */
.dialog-btn.btn-primary {
   background: #495057;
   color: white;
   border-color: #495057;
}

.dialog-btn.btn-primary:hover {
   background: #343a40;
   border-color: #343a40;
}

.dialog-btn.btn-danger {
   background: #dc3545;
   color: white;
   border-color: #dc3545;
}

.dialog-btn.btn-danger:hover {
   background: #c82333;
   border-color: #c82333;
}

.dialog-btn.btn-warning {
   background: #ffc107;
   color: #212529;
   border-color: #ffc107;
}

.dialog-btn.btn-warning:hover {
   background: #e0a800;
   border-color: #e0a800;
}

.dialog-btn.btn-success {
   background: #28a745;
   color: white;
   border-color: #28a745;
}

.dialog-btn.btn-success:hover {
   background: #218838;
   border-color: #218838;
}

.dialog-btn.btn-outline-secondary {
   background: transparent;
   border-color: #6c757d;
   color: #6c757d;
}

.dialog-btn.btn-outline-secondary:hover {
   background: #6c757d;
   color: white;
}

/* Legacy Desktop Styles - Now Integrated Above */

/* Animations for Modern Dialog System */
@keyframes logo-fade-in {
   from {
      opacity: 0;
      transform: scale(0.8) translateY(-10px);
   }

   to {
      opacity: 1;
      transform: scale(1) translateY(0);
   }
}

@keyframes icon-fade-in {
   from {
      opacity: 0;
      transform: scale(0.9) translateY(-5px);
   }

   to {
      opacity: 0.85;
      transform: scale(1) translateY(0);
   }
}

.modal.show .dialog-logo {
   animation: logo-fade-in 0.5s ease-out;
}

.modal.show .dialog-icon {
   animation: icon-fade-in 0.6s ease-out 0.2s both;
}