/* 
   SWEETALERT2 - REDBEAD MOBILE / RESPONSIVE
   Ergänzung zu sweetalert2-theme.css
   Breakpoints: 640px (Tablet), 380px (XS), Landscape
*/

/* Tablet und kleine Desktops */
@media (max-width: 640px) {
  /* Popup - volle Breite, Bottom-Sheet-Style */
  .redbead-popup.swal2-popup {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px 12px 0 0 !important;
    margin: 0 !important;
  }

  /* Popup am unteren Rand ausrichten (Bottom-Sheet) */
  .swal2-container {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* Titel: Header-Spacing kompakter, Platz fuer absoluten X-Button */
  .redbead-popup.swal2-popup .swal2-title {
    font-size: 16px !important;
    padding: 14px 60px 14px 16px !important;
  }

  /* Body */
  .redbead-popup .swal2-html-container {
    padding: 16px 16px 8px !important;
    max-height: 58vh !important;
  }

  /* Actions / Footer */
  .redbead-popup .swal2-actions {
    padding: 12px 16px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }

  /* Confirm Button volle Breite */
  .redbead-confirm.swal2-confirm {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Abschnittstitel kompakter */
  .redbead-popup .swal2-html-container .modal-section-title {
    font-size: 10px !important;
    letter-spacing: 1.1px !important;
    margin: 18px 0 10px 0 !important;
  }

  /* Listen-Padding angepasst */
  .redbead-popup .swal2-html-container .modal-list li {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-left: 18px !important;
  }

  /* Nummerierte Listen */
  .redbead-popup .swal2-html-container .modal-list-numbered li {
    padding-left: 40px !important;
  }

  /* Info-Box kompakter */
  .redbead-popup .swal2-html-container .modal-info-box {
    padding: 12px 14px !important;
  }
}

/* Extra kleine Geraete (z. B. iPhone SE) */
@media (max-width: 380px) {
  .redbead-popup .swal2-html-container {
    font-size: 13px !important;
    max-height: 52vh !important;
  }

  .redbead-popup.swal2-popup .swal2-title {
    font-size: 15px !important;
  }

  .redbead-popup .swal2-html-container .modal-intro {
    font-size: 13px !important;
  }

  .redbead-popup .swal2-html-container .modal-list li {
    font-size: 13px !important;
  }
}

/* Landscape auf kleinen Geraeten */
@media (max-height: 600px) and (max-width: 896px) {
  .redbead-popup .swal2-html-container {
    max-height: 42vh !important;
    padding-top: 12px !important;
    padding-bottom: 4px !important;
  }

  .redbead-popup.swal2-popup {
    border-radius: 8px !important;
  }

  .swal2-container {
    align-items: center !important;
  }
}