/*
 * responsive-fixes.css
 * Global responsive hardening to prevent overflow and improve mobile usability.
 */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

:root {
  --app-vh: 1vh;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

.layout-wrapper,
.layout-page,
.content-wrapper,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container-fluid {
  max-width: 100%;
}

.card,
.modal-content,
.offcanvas,
.dropdown-menu {
  max-width: 100%;
  word-wrap: break-word;
}

.btn {
  max-width: 100%;
  text-wrap: pretty;
}

.btn-group > .btn,
.input-group > .btn {
  white-space: nowrap;
}

.modal-dialog {
  margin: 1rem auto;
}

.modal.show .modal-dialog {
  margin-top: 1rem;
}

.modal-dialog.modal-dialog-centered {
  align-items: flex-start;
  min-height: calc(100% - 1rem);
}

.modal-content {
  max-height: calc(var(--app-vh) * 100 - 2rem);
  overflow: hidden;
}

.modal-header,
.modal-body,
.modal-footer {
  min-width: 0;
}

.modal-body {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.modal-footer > * {
  margin: 0 !important;
}

.modal .form-control,
.modal .form-select,
.modal textarea,
.modal input:not([type="checkbox"]):not([type="radio"]) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
}

.modal .form-control::placeholder,
.modal .form-select::placeholder,
.modal textarea::placeholder,
.modal input::placeholder {
  color: rgba(255, 255, 255, 0.72) !important;
}

.modal .form-label,
.modal .modal-title,
.modal .modal-body p,
.modal .text-muted {
  color: #fff !important;
}

.dark-style .modal .form-control,
.dark-style .modal .form-select,
.dark-style .modal textarea,
.dark-style .modal input:not([type="checkbox"]):not([type="radio"]) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
}

.dark-style .modal .form-control::placeholder,
.dark-style .modal .form-select::placeholder,
.dark-style .modal textarea::placeholder,
.dark-style .modal input::placeholder {
  color: rgba(255, 255, 255, 0.72) !important;
}

.dark-style .modal .form-label,
.dark-style .modal .modal-title,
.dark-style .modal .modal-body p,
.dark-style .modal .text-muted {
  color: #fff !important;
}

.modal .select2-container,
.modal .select2-container .selection,
.modal .select2-container .select2-selection {
  width: 100% !important;
  max-width: 100%;
}

.modal .table-responsive {
  width: 100%;
  overflow-x: auto;
}

.swal2-popup {
  width: min(32rem, calc(100vw - 1rem)) !important;
}

.swal2-html-container {
  overflow-wrap: anywhere;
}

.offcanvas.offcanvas-end,
.offcanvas.offcanvas-start {
  max-width: 95vw;
}

pre,
code {
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 1199.98px) {
  .landing-hero .landing-hero-btn .hero-btn-item {
    display: none !important;
  }

  .landing-pricing .pricing-plans-item {
    position: static !important;
    margin-top: 0.75rem;
    justify-content: center;
  }

  .landing-pricing .pricing-plans-item img {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .content-wrapper > .container-fluid,
  .content-wrapper > .container-xxl {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .card-body {
    padding: 1rem;
  }

  .btn {
    min-height: 2.625rem;
    white-space: normal;
    word-break: break-word;
  }

  .table-responsive,
  .bootstrap-table,
  .fixed-table-container,
  .auto-table-responsive,
  .dataTables_wrapper {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .card .table:not(.table-borderless),
  .table-responsive .table,
  .bootstrap-table .table,
  .auto-table-responsive .table,
  .dataTables_wrapper table {
    white-space: nowrap;
  }

  .pagination {
    flex-wrap: wrap;
    gap: 0.35rem;
  }
}

@media (max-width: 767.98px) {
  .section-py {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .landing-hero {
    border-radius: 0 0 1.75rem 1.75rem !important;
    padding-top: 7rem !important;
  }

  .landing-hero .hero-title {
    font-size: 1.5rem !important;
    line-height: 1.3;
  }

  .landing-features .features-icon-wrapper {
    row-gap: 1.25rem !important;
  }

  .modal-dialog {
    margin: 0.5rem auto !important;
  }

  .modal.show .modal-dialog {
    margin-top: 0.5rem !important;
  }

  .modal-dialog.modal-dialog-centered {
    min-height: calc(100% - 0.5rem);
  }

  .modal-content {
    max-height: calc(100vh - 1rem);
    overflow-y: auto;
  }

  .modal-dialog.modal-xl,
  .modal-dialog.modal-lg {
    max-width: calc(100vw - 1rem);
  }

  .modal-footer > .btn,
  .modal-footer > .btn-group,
  .modal-footer > a.btn {
    flex: 1 1 100%;
  }

  .modal-footer > .btn-group > .btn {
    flex: 1 1 auto;
  }

  .offcanvas {
    max-width: 92vw;
  }

  .navbar .dropdown-menu {
    max-width: calc(100vw - 1rem);
  }

  .btn,
  .btn-lg {
    white-space: normal;
  }
}

@media (max-width: 575.98px) {
  .landing-reviews .swiper-reviews-carousel .card-body,
  .landing-pricing .card .card-body,
  .landing-pricing .card .card-header {
    padding: 1rem !important;
  }

  .accordion-button {
    padding: 0.875rem 1rem;
  }

  .form-control,
  .form-select {
    min-height: 2.625rem;
  }

  .btn-sm {
    min-height: 2.25rem;
  }
}