/* ASAI responsive layer (02.10.2026) — phones & tablets. Desktop (>=1200px) untouched.
   Source: D:\Asai\business\target\exely\mobile\asai-responsive.css (linked by apply_exely.py)
   JS part: asai-responsive.js (zero-block reflow, tablet header logo, tap areas, empty widgets) */

/* iOS must not inflate text after rotation */
@media (max-width: 1199px) {
  body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
}

/* empty third-party widgets (Elfsight views limit) — set by JS, any width */
.asai-hidden { display: none !important; }

/* bigger invisible tap area for small icon links (class set by JS on <1200px only) */
.asai-hit { position: relative; }
.asai-hit::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
}
.tn-elem .asai-hit { position: relative; }

/* ---------- tablet header (T228 mobile bar, 640–979px): brand green + logo + book button ---------- */
@media (max-width: 979px) {
  [data-record-type="257"] .tmenu-mobile.asai-tm { background-color: #3d4a2b !important; }
  .asai-tm .tmenu-mobile__container { min-height: 64px; padding: 10px 20px; box-sizing: border-box; gap: 16px; }
  .asai-tm .tmenu-mobile__text { flex: 1 1 auto; display: flex; align-items: center; }
  .asai-tm-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .asai-tm-logo img { height: 22px; width: auto; display: block; }
  .asai-tm-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
    background: #b7a05c; color: #fff !important; text-decoration: none; font-family: 'Manrope', Arial, sans-serif;
    font-weight: 600; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  }
  .asai-tm-btn:hover { background: #323a25; }
  .asai-tm .t-menuburger { margin-left: 4px; }
}

/* ---------- floating widgets ---------- */
/* Exely "CHECK RATES" sat at top:20% on the right and covered hero titles/buttons on phones & tablets.
   Park it at the bottom-right corner instead (above the UserGuest promo bar on phones). */
@media (max-width: 1199px) {
  .x-tl-booking-widget-container.x-tl-booking-widget-container_pulled-right,
  .x-tl-booking-widget-container.x-tl-booking-widget-container_pulled {
    top: auto !important; bottom: 24px !important; right: 12px !important;
  }
}
@media (max-width: 639px) {
  .x-tl-booking-widget-container.x-tl-booking-widget-container_pulled-right,
  .x-tl-booking-widget-container.x-tl-booking-widget-container_pulled {
    bottom: 104px !important;
  }
}

/* ---------- small text ---------- */
@media (max-width: 639px) {
  /* catalogue filter tabs (tours / spa services) were 10px */
  .t-store__parts-item-title, .t-store__parts-switch-btn { font-size: 12px !important; }
  /* "VIEW OFFER" in the offers slider on the home page was 10px */
  .cards-grid-slider__button { font-size: 12px !important; }
}

/* ---------- landscape tablets 980–1199px: desktop header (T228) was too crowded, "For sale" wrapped ---------- */
@media (min-width: 980px) and (max-width: 1199px) {
  [data-record-type="257"] .t228__list { white-space: nowrap; flex-wrap: nowrap; }
  [data-record-type="257"] .t228__list_item { padding-left: 4px !important; padding-right: 4px !important; }
  [data-record-type="257"] .t-menu__link-item { font-size: 13px !important; }
  [data-record-type="257"] .t228__rightcontainer .t-sociallinks { display: none !important; }
  [data-record-type="257"] .t228__maincontainer { max-width: 100%; box-sizing: border-box; }
  [data-record-type="257"] .t228__leftcontainer, [data-record-type="257"] .t228__rightcontainer { padding-left: 14px !important; padding-right: 14px !important; }
}
@media (max-width: 639px) {
  /* catalogue filter tabs: real tap targets */
  .t-store__parts-switch-btn, .t-store__parts-item { min-height: 36px; display: inline-flex; align-items: center; }
}

/* ---------- /booking page header on phones: logo collided with "All villas" ---------- */
@media (max-width: 639px) {
  .bk-head { gap: 12px; }
  .bk-head img { height: 18px !important; max-width: 60vw; }
  .bk-back { white-space: nowrap; min-height: 44px; display: inline-flex !important; align-items: center; }
}


/* ---------- page-specific ---------- */
@media (max-width: 639px) {
  /* home, "Location & distances": a green masking rectangle (z 27) slid over the "85 hectares…" text
     on phones wider than 320px and ate its first letters. Put it under the texts. */
  #rec831186592 .tn-elem[data-elem-id="1645194697073"] { z-index: 5 !important; }
}

/* ---------- phones: the slide-menu burger (T450) only appeared after 150px of scrolling,
   so at the top of the page there was no way to open the menu. Show it from the start
   and move the header "BOOK YOUR STAY" button left so they don't touch. ---------- */
@media (max-width: 639px) {
  .t450__menu__content.t450__beforeready {
    opacity: 1 !important; visibility: visible !important; z-index: 99998 !important; pointer-events: auto !important;
  }
  #rec607185784 .tn-elem[data-elem-type="button"] .tn-atom { transform: translateX(-61px); }
}
/* Spa / Cafe on portrait tablets have no header bar at all -> same always-visible burger there */
@media (min-width: 640px) and (max-width: 979px) {
  body:not(:has([data-record-type="257"].t-screenmin-640px)) .t450__menu__content.t450__beforeready {
    opacity: 1 !important; visibility: visible !important; z-index: 99998 !important; pointer-events: auto !important;
  }
}

/* UserGuest "Book directly" promo bar (third-party, GTM, has its own close button) sits fixed at the
   bottom on phones: keep the end of the page (footer, BOOK YOUR STAY) reachable above it. */
@media (max-width: 639px) {
  body:has(#ug-notifications) { padding-bottom: 100px; }
}