/* ==========================================================================
   استراحة | Estraha — Responsive layer (Mobile first)
   Tested widths: 320 / 375 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASE = MOBILE  (< 576px)
   -------------------------------------------------------------------------- */
.es-only-desktop { display: none !important; }

.es-nav-links { display: none; }

.es-bottomnav { display: block; }

.es-search { flex-direction: column; padding: .75rem; border-radius: var(--es-r); gap: .1rem; }
.es-search-field { padding: .7rem .85rem; }
.es-search-field + .es-search-field::before {
  inset-inline: .85rem;
  inset-block-start: 0;
  inset-block-end: auto;
  inline-size: auto;
  block-size: 1px;
}
.es-search-submit { inline-size: 100%; margin-block-start: .5rem; padding-block: .85rem; }
.es-search-compact { border-radius: var(--es-r); }
.es-search-compact .es-search-submit { inline-size: 100%; border-radius: var(--es-r); }
.es-search-lifted { margin-block-start: -3rem; }

.es-gallery { grid-template-columns: 1fr; grid-template-rows: auto; border-radius: var(--es-r); }
.es-gallery > button:first-child { grid-row: auto; aspect-ratio: 4 / 3; }
.es-gallery > button:not(:first-child) { display: none; }
.es-gallery > button:first-child .es-gallery-more { display: inline-flex; }

.es-hero-stats { gap: 1.25rem; }
.es-hero-stats div b { font-size: 1.2rem; }

.es-dash { flex-direction: column; }
.es-dash-side { display: none; }
.es-dash-main { padding: 1.1rem; }

.es-map { min-block-size: 300px; }

.es-toast-wrap {
  inset-inline: .75rem;
  inline-size: auto;
  inset-block-end: calc(var(--es-bottomnav-h) + .75rem + env(safe-area-inset-bottom, 0px));
}
body:not(.has-bottomnav) .es-toast-wrap { inset-block-end: calc(.75rem + env(safe-area-inset-bottom, 0px)); }

.es-mobile-bar { display: flex; }
body.has-mobile-bar { padding-block-end: calc(84px + env(safe-area-inset-bottom, 0px)); }
body.has-mobile-bar .es-bottomnav { display: none; }

.es-section-head { align-items: flex-start; }
.es-prop-h { flex-direction: column; }
.es-prop-h .es-prop-img { inline-size: 100%; aspect-ratio: 16 / 10; }

.es-step-line { display: none; }
.btn-block-mobile { inline-size: 100%; }
.es-booking-sticky { position: static; }
.modal-fullscreen-sm-down .modal-content { border-radius: 0; }

/* Horizontal snap rails on small screens */
.es-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 1rem;
  overflow-x: auto;
  padding-block-end: .5rem;
  padding-inline: 1.25rem;
  margin-inline: -1.25rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.es-rail::-webkit-scrollbar { display: none; }
.es-rail > * { scroll-snap-align: center; }

/* --------------------------------------------------------------------------
   >= 576px  (large phones / small tablets)
   -------------------------------------------------------------------------- */
@media (min-width: 576px) {
  .es-rail { grid-auto-columns: 52%; }
  .btn-block-mobile { inline-size: auto; }
  .es-search-submit { inline-size: auto; }
}

/* --------------------------------------------------------------------------
   >= 768px  (tablet)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .es-rail { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); overflow: visible; padding-inline: 0; margin-inline: 0; }
  .es-gallery {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    border-radius: var(--es-r-lg);
  }
  .es-gallery > button:first-child { grid-row: span 2; aspect-ratio: auto; }
  .es-gallery > button:nth-child(2),
  .es-gallery > button:nth-child(3) { display: block; }
  .es-gallery > button:nth-child(n+4) { display: none; }
  .es-gallery > button:first-child .es-gallery-more { display: none; }
  .es-gallery > button:nth-child(3) .es-gallery-more { display: inline-flex; }
  .es-prop-h { flex-direction: row; }
  .es-prop-h .es-prop-img { inline-size: 38%; aspect-ratio: auto; }
  .es-map { min-block-size: 420px; }
  .es-search { flex-direction: row; padding: .55rem; border-radius: var(--es-r-lg); }
  .es-search-field { padding: .7rem 1.1rem; }
  .es-search-field + .es-search-field::before {
    inset-inline-start: 0;
    inset-inline-end: auto;
    inset-block: .55rem;
    inline-size: 1px;
    block-size: auto;
  }
  .es-search-submit { inline-size: auto; margin-block-start: 0; }
  .es-search-compact { border-radius: var(--es-r-pill); }
  .es-search-compact .es-search-submit { inline-size: 46px; border-radius: var(--es-r-pill); }
  .es-search-lifted { margin-block-start: -4.5rem; }
  .es-dash-main { padding: 1.5rem; }
}

/* --------------------------------------------------------------------------
   >= 992px  (desktop) — bottom nav off, full navbar on
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .es-only-desktop { display: block !important; }
  .es-only-mobile { display: none !important; }
  .es-nav-links { display: flex; }
  .es-bottomnav { display: none; }
  body.has-bottomnav { padding-block-end: 0; }
  body.has-mobile-bar { padding-block-end: 0; }
  .es-mobile-bar { display: none; }
  .es-toast-wrap {
    inset-inline-start: auto;
    inset-inline-end: 1.25rem;
    inline-size: min(380px, calc(100vw - 2.5rem));
    inset-block-end: 1.25rem;
  }
  .es-gallery { grid-template-columns: 2fr 1fr 1fr; }
  .es-gallery > button:nth-child(n+4) { display: block; }
  .es-gallery > button:nth-child(3) .es-gallery-more { display: none; }
  .es-gallery > button:nth-child(5) .es-gallery-more { display: inline-flex; }
  .es-gallery > button:nth-child(n+6) { display: none; }
  .es-booking-sticky { position: sticky; }
  .es-dash { flex-direction: row; }
  .es-dash-side { display: block; }
  .es-rail { grid-template-columns: repeat(3, 1fr); }
  .es-map { min-block-size: 520px; }
}

/* --------------------------------------------------------------------------
   >= 1200px
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .es-rail { grid-template-columns: repeat(4, 1fr); }
  .es-container { padding-inline: 2rem; }
}

/* --------------------------------------------------------------------------
   >= 1600px — keep line lengths comfortable on very wide screens
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --es-container: 1360px; }
}

/* --------------------------------------------------------------------------
   Very small phones (<= 360px) — protect against overflow
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  :root { --es-nav-h: 64px; }
  .es-container { padding-inline: 1rem; }
  .es-logo-text small { display: none; }
  .es-logo-text b { font-size: 1.08rem; }
  .es-logo-mark { inline-size: 36px; block-size: 36px; font-size: 1.1rem; }
  .es-rail { grid-auto-columns: 84%; padding-inline: 1rem; margin-inline: -1rem; }
  .es-bottomnav a { font-size: .64rem; }
  .es-bottomnav a .bi { font-size: 1.2rem; }
  .es-cal-day { font-size: .78rem; }
  .es-hero-stats { gap: 1rem; }
}

/* --------------------------------------------------------------------------
   Landscape phones — shorter hero
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .es-hero { padding-block: 2.5rem 4rem; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .es-nav, .es-bottomnav, .es-footer, .es-mobile-bar, .es-toast-wrap, .es-map-ctrl { display: none !important; }
  body { background: #fff; color: #000; }
  .es-card, .es-booking-card { box-shadow: none; border: 1px solid #ccc; }
}

/* --------------------------------------------------------------------------
   Narrow phones (<= 420px) — keep the navbar on one line without overflow
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .es-nav-inner { gap: .5rem; }
  .es-nav-actions { gap: .35rem; }
  .es-icon-btn { inline-size: 40px; block-size: 40px; font-size: 1.05rem; }
  .es-lang-btn { padding: .45rem .6rem; }
  .es-lang-btn [data-lang-label] { display: none; }
  .es-logo { gap: .45rem; }
  .es-logo-text b { font-size: 1.05rem; }
  .es-logo-text small { display: none; }
  .es-section-head { gap: .75rem; }
  .es-steps { font-size: var(--es-fs-xs); }
  .es-steps-sep { inline-size: 14px; }
}

/* --------------------------------------------------------------------------
   Dashboard stat cards on small phones — keep numbers inside their card
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .es-stat { gap: .6rem; }
  .es-stat > div { min-inline-size: 0; }
  .es-stat-ico { inline-size: 40px; block-size: 40px; font-size: 1.05rem; }
  .es-stat-val { font-size: 1.15rem; overflow-wrap: anywhere; }
  .es-stat-lbl { font-size: var(--es-fs-xs); }
  .es-trend { font-size: .68rem; }
  .es-card-pad { padding: 1rem; }
}