/*
  Responsive overrides for the ACTWiFi legacy CSS bundle.

  Goals:
  - Preserve desktop visuals by default.
  - Add mobile/tablet usability improvements via max-width media queries.
  - Avoid rewriting legacy styles; override only where needed.
*/

/* Global small-screen text wrapping to prevent horizontal overflow from long tokens/URLs. */
.act-container a,
.act-container p,
.register-container b,
.login-container b {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/*
  Make hotel list rows fully clickable: the <a> should fill the whole <li>,
  not just the text itself.
*/
.act-container ul.list-group.hotels > li.list-group-item.hitem {
  padding: 0; /* move padding to the link so it becomes the hit target */
}

.act-container ul.list-group.hotels > li.list-group-item.hitem > a {
  display: block;
  width: 100%;
  padding: 0.75rem 1.25rem; /* Bootstrap list-group-item default padding */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.act-container ul.list-group.hotels > li.list-group-item.hitem > a:hover,
.act-container ul.list-group.hotels > li.list-group-item.hitem > a:focus {
  text-decoration: none;
}

.act-container ul.list-group.hotels > li.list-group-item.hitem > a > p {
  margin: 0; /* avoid shrinking the clickable area due to margins */
}

/* Make small controls easier to tap without changing desktop layout. */
@media (max-width: 600px) {
  .dropdown-toggle.user-button {
    min-height: 44px;
  }

  .dropdown-menu.user-menu {
    right: 0;
    left: auto;
  }

  .morphsearch-close {
    width: 44px;
    height: 44px;
    right: 0.5rem;
    top: 0.5rem;
  }
}

/*
  Morph search overlay: legacy CSS uses percent heights (e.g. 225%/230%) which can cause
  excessive scroll on mobile. Constrain to viewport height and allow internal scrolling.
*/
@media (max-width: 600px) {
  .morphsearch.open {
    height: 100vh !important;
    height: 100dvh !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .morphsearch.open .morphsearch-content {
    position: relative;
    height: auto;
    overflow: visible;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Dashboard forms section: ensure it fits 320px cleanly. */
@media (max-width: 600px) {
  .act-container form {
    max-width: 100%;
  }

  .act-container .form-control,
  .act-container select.custom-select.form-control,
  .act-container textarea.form-control {
    font-size: 16px; /* avoid iOS zoom-on-focus */
  }
}

/* Auth pages: reduce padding a bit on very small phones without changing desktop. */
@media (max-width: 360px) {
  .login-container,
  .website-container,
  .register-container,
  .already-member-container {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Ensure long form/status messages wrap nicely on small screens. */
@media (max-width: 600px) {
  .bg-danger,
  .bg-success {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}