/* Amur Stays — UI additions layered over the theme (amur-stays.css).
 *
 * Only styles things the theme has no rules for: the opened mobile menu, the
 * footer link columns, the floating WhatsApp button and the "More stays" cards.
 * Nothing in here overrides an existing theme rule, so the design stays intact.
 */

/* ---------------------------------------------------------- mobile nav menu */
/* The theme styled nav links for desktop but never the opened mobile panel
 * (Webflow's default was a grey box). Match the brand instead. */
.w-nav-overlay [data-nav-menu-open] {
  background: var(--_colors---core-accent-color--accent-primary, #f28c5b);
  padding: 12px 16px 20px;
  text-align: left;
}
.w-nav-overlay [data-nav-menu-open] .nav_link {
  display: block;
  padding: 14px 8px;
  font-size: 1.15rem;
  color: var(--_colors---text-color--text-on-overlay, #fff);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.w-nav-overlay [data-nav-menu-open] .nav_link:last-child {
  border-bottom: none;
}

/* ------------------------------------------------------------- footer links */
.footer_links {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.footer_col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 160px;
}
.footer_col .eyebrow {
  margin-bottom: 4px;
  opacity: 0.7;
}
/* The theme's .text-link colour is made for light backgrounds — on the dark
 * footer it renders dark-on-dark (invisible). The .is-inverse footer remaps the
 * colour variables (inside it, the "inverse" vars point back to DARK), so no
 * variable is safe here; the footer itself sets color: white, so inherit that. */
.footer.is-inverse .footer_col .text-link {
  color: inherit;
}
.footer.is-inverse .footer_col .text-link:hover {
  color: var(--_colors---core-accent-color--accent-primary, #f28c5b);
}
.footer.is-inverse .footer_col .eyebrow {
  color: inherit;
  opacity: 0.65;
}

/* On small screens the footer collapses to one column; keep links left-aligned
 * under the logo instead of hugging the right edge. */
@media (max-width: 767px) {
  .footer_links { justify-content: flex-start; }
}

/* ------------------------------------------------------- WhatsApp float */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  /* The theme underlines every <a>, which drew a line straight through the
     icon. It also sets a link colour — both have to be cancelled here. */
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  line-height: 0;
  padding: 0;
  border: none;
}
.wa-float svg { display: block; }
.wa-float:hover,
.wa-float:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  background: #1fbe5a;
  color: #fff;
  text-decoration: none !important;
}
/* Clear of the mobile browser's own bottom chrome. */
@media (max-width: 767px) {
  .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}
@media print { .wa-float { display: none; } }

/* --------------------------------------------------------- More stays cards */
.more-stays_card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.more-stays_card .image-ratio_3x2 {
  overflow: hidden;
  border-radius: var(--_sizes---radius--md-radius, 12px);
  margin-bottom: 12px;
}
.more-stays_card .image_cover {
  transition: transform 0.3s ease;
}
.more-stays_card:hover .image_cover {
  transform: scale(1.03);
}
.more-stays_card .eyebrow { margin-bottom: 4px; }

/* ----------------------------------------------------------- date inputs */
/* type="date" fields get browser chrome; keep their height in line with the
 * theme's text inputs so the form grid doesn't wobble. */
input[type="date"].input_field {
  min-height: 55px;
  -webkit-appearance: none;
  appearance: none;
}

/* ------------------------------------------------------------- account pages */
.account-card {
  max-width: 460px;
  margin: 0 auto;
}
.hint-text {
  font-size: 0.9rem;
  opacity: 0.75;
}
.account-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  opacity: 0.6;
  font-size: 0.85rem;
}
.account-divider::before,
.account-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid currentColor;
  opacity: 0.35;
}
.account-notice {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-left: 4px solid var(--_colors---core-accent-color--accent-primary, #f28c5b);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 24px;
  background: rgba(242, 140, 91, 0.08);
}
.account-notice.is-ok {
  border-left-color: #2e9e5b;
  background: rgba(46, 158, 91, 0.08);
}
.account-bookings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.account-booking_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.account-booking_dates {
  margin: 6px 0 14px;
  opacity: 0.8;
}
.account-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  background: rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
.account-badge.is-ok { background: rgba(46, 158, 91, 0.15); color: #237444; }