/*
 * App-wide responsive fixes.
 * Loaded last (after the Bootstrap CDN copy) so these win. Every rule is
 * limited to tablet / phone widths, so the desktop layout is untouched.
 */

/* ---------- One font across the whole app ----------
   The theme's body font is commented out, so text fell back to different
   fonts screen by screen (system font, Poppins, Arial, Segoe UI). Everything now
   uses this one stack; overrides elsewhere were switched to "inherit".
   Not applied with "*" so icon fonts (Font Awesome, Bootstrap Icons, Remix,
   Feather, Material Symbols) keep their own font. */
:root {
  --app-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

html,
body,
button,
input,
select,
optgroup,
textarea,
table,
h1, h2, h3, h4, h5, h6,
.btn,
.form-control,
.form-select,
.modal,
.dropdown-menu,
.tooltip,
.popover,
.ReactModal__Content,
.Toastify__toast {
  font-family: var(--app-font) !important;
}

/* Checkboxes / radios: no dark focus box after a mouse click; keyboard users
   (Tab key) still get a visible outline */
input[type="checkbox"]:focus:not(:focus-visible),
input[type="radio"]:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid #3dbca7 !important;
  outline-offset: 2px;
}

/* ---------- Visitor registration form: even spacing between fields ----------
   Fields mix mt-3 / mt-2 labels, column mt-2 / mb-1 / mb-3 and an always-present
   (often empty) error line, so the gaps differ. Give every field column the same
   label gap and hide error lines until they have a message. */
.visitor-reg-page .row > [class*="col-"]:has(.form-control) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.visitor-reg-page .row > [class*="col-"]:has(.form-control) > label,
.visitor-reg-page .row > [class*="col-"]:has(.form-control) > .d-flex > label {
  margin-top: 12px !important;
  margin-bottom: 4px !important;
}

.visitor-reg-page span.text-danger:empty {
  display: none !important;
}

/* Category accordions: sub-category names sit in a <label>, which the global
   label rule forces to 16px, while top-level names use the button's 14px.
   Let the label take the button's size so every level matches. */
.accordion-button label {
  font-size: inherit !important;
}

/* "Selected List of Products": one card holding the list, one product per line,
   each starting with a dot */
.selected-products-list {
  /* Wrapper only pads the left side, so keep the same gap on the right */
  margin: 6px 10px 4px 0;
  padding: 4px 0;
  list-style: none;
  text-align: left;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.selected-products-list > li {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 8px 14px 8px 30px;
  color: #212529;
  font-size: 14px;
  line-height: 1.4;
  border-bottom: 1px solid #f1f3f5;
}

.selected-products-list > li:last-child {
  border-bottom: 0;
}

/* The dot at the start of each product */
.selected-products-list > li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3dbca7;
}

/* Visitor registration form: every section as a bordered card with the grey
   heading strip across its top (same look as the Purpose of Visit box) */
.visitor-reg-form .one-section {
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  overflow: hidden;
  background: #fff;
}

/* The page area itself must start at the screen edge (on the preview it was
   shifted left, cutting the title bar and pushing the cards to the edge) */
.visitor-reg-form {
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
  max-width: 100%;
}

/* Keep the cards off the page edges (phones use the slimmer 6px set further down) */
.visitor-reg-form .side-app {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* The fixed "Visitor Registration form" bar has no left set, so the page
   padding above pushed it in; pin it to the left edge */
.visitor-reg-form .breadcrumb-scroll-fixed {
  left: 0 !important;
  right: 0;
  width: 100% !important;
}

/* Heading strip sits flush at the top of the card */
.visitor-reg-form .one-section > .containerfluid > .row {
  margin-top: 0 !important;
}

/* Section content: small gap below instead of the big mb-4 */
.visitor-reg-form .one-section > [class*="col-"] {
  margin-bottom: 4px !important;
}

/* Sections marked plain (e.g. the Invoice Details checkbox row) get no card */
.visitor-reg-form .one-section.plain-section {
  border: 0;
  background: transparent;
  padding-bottom: 0;
  margin-bottom: 8px;
}

/* Content right under a section heading used mt-4 (24px); keep it close */
.visitor-reg-form .one-section > [class*="col-"] > .row.mt-4,
.visitor-reg-form .one-section > [class*="col-"] > .row.mt-3 {
  margin-top: 8px !important;
}

/* Terms & conditions text: the label was 98% wide and centred, leaving it
   indented; run it full width from the left, level with the card headings */
.visitor-reg-form .term {
  width: 100% !important;
  margin-left: 0 !important;
  padding-left: 10px;
  text-align: left !important;
}

/* A section nested inside another one stays plain (no second border) */
.visitor-reg-form .one-section .one-section {
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  overflow: visible;
}

/* Sections inside pop-ups keep their own look */
.visitor-reg-form .modal .one-section {
  border: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ---------- Information pop-up (title, icon + message, OK / Close) ---------- */
.info-modal {
  max-width: 640px !important;
  width: calc(100% - 24px);
}

.info-modal .modal-content {
  border: 0;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  /* .confirm-logout caps the width and shifts it sideways; undo that here */
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 auto !important;
}

/* Header in the site green, like the main header */
.info-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #3dbca7;
}

.info-modal-header h5 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.info-modal-close {
  background: none;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  padding: 0 4px;
}

.info-modal-body {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 20px;
  background: #fff;
  text-align: left;
}

.info-modal-body p {
  font-size: 16px;
  color: #212529;
  line-height: 1.5;
}

.info-modal-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e0f5f1;
  color: #1aa391;
  font-size: 20px;
  box-shadow: inset 0 0 0 2px #1aa391;
}

.info-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  background: #f6f7f9;
  border-top: 1px solid #e3e6ea;
}

.info-modal-ok {
  min-width: 100px;
  border: 0 !important;
  border-radius: 8px !important;
  background: #1aa391 !important;
  color: #fff !important;
  font-weight: 600;
}

.info-modal-ok:hover {
  background: #158a7a !important;
}

.info-modal-cancel {
  min-width: 100px;
  border: 1px solid #ced4da !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #212529 !important;
  font-weight: 600;
}

/* ---------- Additional Charges pop-up ---------- */
.charges-modal .modal-content {
  border: 0;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.charges-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #3dbca7;
}

.charges-modal-header h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.charges-modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 18px;
}

.charges-modal-body {
  padding: 18px 20px 6px;
  background: #fff;
  text-align: left;
}

/* Currency choice tiles (named "choice", not "option": vendor_css.css turns any div[class*="-option"] blue on hover) */
.cm-currency {
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: #f6f7f9;
}

.cm-currency > p {
  font-size: 15px;
  color: #212529;
}

.cm-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cm-choice {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 15px;
}

.cm-choice.active {
  border-color: #3dbca7;
  background: #e8f7f4;
}

.cm-choice input {
  accent-color: #1aa391;
  width: 18px;
  height: 18px;
}

/* Charges summary */
.cm-summary {
  margin-bottom: 14px;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  overflow: hidden;
}

.cm-row,
.cm-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  font-size: 16px;
  color: #212529;
}

.cm-row + .cm-row {
  padding-top: 4px;
}

.cm-total {
  margin-top: 6px;
  padding: 12px 16px;
  border-top: 1px solid #e9ecef;
  background: #eef9f6;
  font-weight: 700;
}

.cm-total span:last-child {
  color: #1aa391;
}

/* Note with info icon */
.cm-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: #eef4fd;
  color: #212529;
  font-size: 14px;
  line-height: 1.5;
}

.cm-note i {
  color: #1a73e8;
  font-size: 18px;
  margin-top: 1px;
}

.charges-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: #f6f7f9;
  border-top: 1px solid #e3e6ea;
}

.charges-modal-footer form {
  margin: 0;
}

@media (max-width: 575.98px) {
  .cm-choices {
    grid-template-columns: 1fr;
  }

  .charges-modal-footer {
    flex-wrap: wrap;
  }
}

/* ---------- Payment Details card (visitor preview) ---------- */
.visitor-reg-form .payment-details-card {
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Half width on desktop; tablet and phone keep the full width */
@media (min-width: 992px) {
  .visitor-reg-form .payment-details-card {
    width: 50%;
  }
}

/* Heading strip matches the other sections (same size, weight and padding) */
.pd-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.pd-title-text {
  font-weight: 600;
  color: #212529;
}

.pd-note {
  color: #dc3545;
  font-size: 14px;
}

.pd-note i {
  margin-right: 4px;
}

.payment-details-card .container-fluid {
  padding: 8px 16px 12px;
}

.payment-details-card .btn-aqua {
  min-width: 100px;
  border-radius: 6px;
  font-weight: 600;
}

.payment-details-card .form-control {
  border-radius: 6px;
}

/* Charge lines: same normal text as the rest of the form */
.payment-details-card h5 {
  font-size: 16px !important;
  font-weight: 400;
  color: #212529;
}

/* Visit dates under a charge line (keeps the row's 12px side padding so it
   lines up with the charge label above it) */
.pd-sub {
  margin: 2px 0 8px;
  padding: 0 12px;
  color: #6c757d;
  font-size: 14px;
  text-align: left;
}

/* Total: same size as the other lines, set apart only by semibold weight
   and the teal amount */
.pd-total-label {
  font-size: 16px !important;
  font-weight: 600;
  color: #212529;
}

.pd-total-amount {
  font-size: 16px !important;
  font-weight: 600;
  color: #1aa391;
}

/* ---------- Visitor header (desktop): light card style with icon tiles ----------
   Only from 1200px, where these details show; phones/tablets keep the teal bar
   (their white menu icons are built for it). */
@media (min-width: 1200px) {
  /* Site aqua header; details in white with soft white icon tiles */
  .visitor-header-light.app-header {
    background: #3dbca7 !important;
  }

  /* Content sits in the top ~60px; the marquee runs along the bottom ~20px */
  .vh-info {
    align-self: flex-start;
    align-items: flex-start;
    gap: 28px;
    padding: 0 24px 0;
    /* Use the empty strip at the top so the venue line sits well clear of the marquee */
    margin-top: -6px;
  }

  /* Each block's lines start at the same left edge */
  .vh-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .vh-contact {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 14px;
  }

  .vh-email {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }

  .vh-email i {
    color: #fff;
  }

  .vh-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
  }

  .vh-row a {
    color: #fff;
    text-decoration: none;
  }

  .vh-row a:hover {
    text-decoration: underline;
  }

  .vh-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 14px;
  }

  .vh-icon-round {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 17px;
  }

  .vh-date {
    font-size: 15px;
    color: #fff;
  }

  .vh-address strong {
    font-weight: 600;
  }

  .vh-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
  }

  .vh-phone {
    font-size: 16px;
    color: #fff;
  }

  .vh-divider {
    width: 1px;
    align-self: stretch;
    margin: 4px 0;
    background: rgba(255, 255, 255, 0.4);
  }

  /* Network pill + bell: no divider lines, just spacing */
  .visitor-header-light .notification-bell-wrapper {
    padding-left: 6px;
  }
}

/* ---------- Delegate sidebar: welcome + contact card ---------- */
.dd-modern {
  background: linear-gradient(180deg, #1aa391 0%, #2bb3a0 55%, #3dbca7 100%) !important;
}

.dd-sidebar {
  padding: 18px 10px 20px;
  color: #fff;
  text-align: left;
}

.dd-welcome {
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #c9f3ec;
}

.dd-name {
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
  word-break: break-word;
}

.dd-rule {
  display: block;
  width: 36px;
  height: 3px;
  margin: 10px 0 12px;
  border-radius: 2px;
  background: #a6ece0;
}

.dd-intro {
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
}

.dd-card {
  padding: 12px;
  border-radius: 12px;
  background: #f2fbf9;
  color: #212529;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.dd-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dd-item-box {
  margin-top: 8px;
  padding: 8px;
  border-radius: 10px;
  background: #fff;
}

.dd-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d5f1eb;
  color: #138a7b;
  font-size: 15px;
}

.dd-org {
  font-size: 15px;
  font-weight: 700;
  color: #0f2b46;
}

.dd-text {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.5;
  color: #495057;
}

.dd-sep {
  height: 1px;
  margin: 10px 0 2px;
  background: #d5e9e5;
}

.dd-label {
  font-size: 12px;
  color: #6c757d;
}

.dd-value {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f2b46;
}

.dd-email {
  font-size: 12.5px;
  word-break: break-all;
  text-decoration: none;
}

.dd-email:hover {
  color: #1aa391;
}

/* Visitor mobile pop-out panel: larger close (x) with a comfortable tap area */
.visitor-panel-close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 32px !important;
  font-weight: 300;
  line-height: 1;
}

/* Added-visitor summary card: plain, left-aligned detail lines */
.visitor-summary-card h6 {
  font-weight: 400 !important;
  text-align: left !important;
  margin-bottom: 6px;
}

/* Action bar that stays pinned to the bottom of the screen while the page scrolls */
.sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: 8px 12px !important;
  background: #fff;
  border-top: 1px solid #dee2e6;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}

/* ---------- Add / Update Visitor pop-up ---------- */
.visitor-edit-modal .modal-content {
  border: 0;
  border-radius: 14px;
  overflow: hidden;
}

.visitor-edit-modal .vm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border: 0;
  background: linear-gradient(90deg, #1aa391, #3dbca7);
}

.visitor-edit-modal .vm-header .modal-title {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}

.vm-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 18px;
}

.vm-close {
  background: none;
  border: 0;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  padding: 0 4px;
}

.visitor-edit-modal .modal-body {
  padding: 16px 24px;
}

.visitor-edit-modal label {
  font-weight: 500;
  color: #212529;
}

/* Numbered steps */
.vm-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 4px 0 12px;
}

.vm-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.vm-step:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.vm-step-no {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  background: #e9ecef;
  color: #495057;
  font-weight: 600;
}

.vm-step.active .vm-step-no {
  background: #1aa391;
  color: #fff;
}

.vm-step-text strong {
  display: block;
  font-size: 15px;
  color: #212529;
}

.vm-step-text small {
  display: block;
  font-size: 12px;
  color: #6c757d;
}

.vm-step-line {
  flex: 0 1 200px;
  height: 2px;
  background: #dee2e6;
}

/* Section headings inside the pop-up */
.vm-section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  text-align: left;
}

.vm-section i {
  font-size: 18px;
}

/* All section strips share one neutral look: light grey band, dark grey icon */
.vm-section-blue,
.vm-section-teal,
.vm-section-peach {
  background: #f1f3f5;
  color: #212529;
}

.vm-section-blue i,
.vm-section-teal i,
.vm-section-peach i {
  color: #495057;
}

.vm-section-sub {
  font-size: 13px;
  font-weight: 400;
  color: #495057;
}

.vm-charges {
  font-size: 13px;
  font-weight: 500;
  color: #dc3545;
  cursor: pointer;
}

/* Footer actions */
.visitor-edit-modal .modal-footer {
  padding: 14px 24px;
  background: #f8f9fa;
}

.vm-btn-cancel {
  min-width: 110px;
  border: 1px solid #ced4da !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #212529 !important;
}

.vm-btn-next {
  min-width: 120px;
  border: 0 !important;
  border-radius: 8px !important;
  background: #1aa391 !important;
  color: #fff !important;
}

.vm-btn-next:hover {
  background: #158a7a !important;
}

@media (max-width: 575.98px) {
  .visitor-edit-modal .modal-body {
    padding: 12px;
  }

  .vm-step-text small {
    display: none;
  }

  .vm-step-line {
    flex-basis: 30px;
  }
}

/* Visitor registration pages: the sticky bar was being clipped at the window
   bottom (its scroll area runs past the visible screen), so fix it to the
   screen instead and leave room under the content for it */
.visitor-reg-form .sticky-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
}

.visitor-reg-form {
  padding-bottom: 64px;
}

/* ---------- Tablet and below (< 992px) ---------- */
@media (max-width: 991.98px) {

  /* Nothing should push the page sideways; wide tables scroll in their own box */
  body {
    overflow-x: hidden;
  }

  img,
  video {
    max-width: 100%;
  }

  /* Form fields laid out 4 or 6 per row (col-md-3 / col-md-2) are too narrow
     here: show them 2 per row. Only columns that hold a form field are
     touched, so dashboard cards and other col-md-3 blocks keep their layout. */
  .row > .col-md-3:has(> label, > input, > select, > textarea, > .form-control, > .form-group),
  .row > .col-md-2:has(> label, > input, > select, > textarea, > .form-control, > .form-group) {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Groups of action buttons wrap instead of running off screen */
  .btn-group,
  .buttons-right {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Visitor header logo: keep it 10px off the top edge */
  .visitor-header-logo {
    align-items: flex-start !important;
    padding-top: 10px !important;
    height: auto !important;
  }

  /* Wide tables: scroll smoothly on touch, inside their own box */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  /* Pop-up dialogs never wider than the screen */
  .modal-dialog {
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
  }

  .ReactModal__Content {
    max-width: calc(100vw - 24px) !important;
  }
}

/* ---------- Phone and small tablet (<= 768px) ---------- */
@media (max-width: 768px) {

  /* The copyright bar is fixed to the bottom here: keep the end of every
     page clear of it */
  body {
    padding-bottom: 34px;
  }

  /* Comfortable tap targets */
  .btn {
    min-height: 36px;
  }

  /* Visitor registration form: the grey title bar is hidden here, so start
     right under the 90px header, and use slim side margins */
  .visitor-reg-page .admin-top-space {
    margin-top: 98px !important;
  }

  .visitor-reg-page .side-app {
    padding: 0 6px !important;
  }

  /* Visitor preview: keep the "Visitor Registration form Preview" title bar
     visible on phones too (it is hidden on mobile app-wide), right under the
     90px header, and start the first section below it */
  .visitor-preview-page .breadcrumb-scroll-fixed {
    display: block !important;
    margin-top: 79px !important;
  }

  .visitor-preview-page #section-1 {
    margin-top: 118px !important;
  }

  /* Pagination fits small screens and scrolls if there are many pages */
  .pagination {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: 8px;
  }
}

/* ---------- Phone (< 576px) ---------- */
@media (max-width: 575.98px) {

  /* One field per row on phones */
  .row > .col-md-3:has(> label, > input, > select, > textarea, > .form-control, > .form-group),
  .row > .col-md-2:has(> label, > input, > select, > textarea, > .form-control, > .form-group) {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .modal-dialog {
    max-width: calc(100% - 16px);
    margin: 8px auto;
  }

  /* Page headings and card titles a touch smaller so they don't wrap awkwardly */
  h4 {
    font-size: 1.15rem;
  }

  h5 {
    font-size: 1.05rem;
  }
}