/**
 * LUS Mobile Menu (libs/mobile-menu.php) — logged-out and logged-in visitors.
 */

/* The left-hand hamburger is hidden: everything a visitor needs is behind the
   right-hand account icon. The element stays in the DOM (the theme's
   slide-out JS looks it up), it's just not shown. The logo is centred
   independently of it (absolutely positioned), so nothing shifts. */
.mobile_header .mobile-trigger {
  display: none;
}

/* ...except on a logged-in visitor's dashboard pages, where it opens the
   dashboard's own user menu (js/lus-mobile-menu.js) and replaces that menu's
   separate "User Menu" button.

   Keyed on the dashboard menu actually being on the page (:has), not on a
   page template, so it can never show a hamburger that has nothing to open —
   and a browser without :has() just keeps today's behaviour (button shown,
   hamburger hidden). Only up to 991px: that's where the theme collapses the
   dashboard menu behind its button; above it the menu is a visible sidebar,
   even though the mobile header itself shows up to 1180px. */
@media only screen and (max-width: 991px) {
  body:has(#user_tab_menu_container) .mobile_header .mobile-trigger {
    display: block;
  }

  body:has(#user_tab_menu_container) #user_tab_menu_trigger {
    display: none;
  }

  /* The open menu is a panel that scrolls inside itself.
     The theme makes it `position: absolute; height: 100%` — 100% of the whole
     dashboard container, i.e. as tall as the page (1460px on a phone), so
     ~870px of empty white panel sat below "Log Out" and the page kept
     scrolling through it. Fixed instead, from under the header (top) all the
     way down to the bottom edge of the screen, behind the fixed bottom nav,
     and the page behind is locked (below) so nothing scrolls past the last
     item.

     Reaching the very bottom edge matters: a panel that stops short of the
     bottom nav (e.g. capped at "100vh minus the nav's height") leaves a strip
     between the two where the dashboard page shows through as stray text — and
     the nav's height isn't fixed (58-84px depending on font/zoom), nor is a
     short menu on a tall screen. The padding at the end lets the last links
     scroll up clear of the nav (it's ~70px tall; 80px leaves some air). */
  body:has(#user_tab_menu_container) .user_tab_menu {
    position: fixed;
    top: 70px;
    bottom: 0;
    height: auto;
    padding-bottom: 80px;
    overflow-y: auto;
    overflow-x: hidden;   /* scroll up/down only, never sideways */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    /* Slides in from the left and back out (same 300ms ease as the account
       drawer on the right). The theme hides this menu with display: none and
       toggles it with a jQuery grow-and-fade, which can't animate the closing
       at all; js/lus-mobile-menu.js adds .lus-dash-open instead and the slide is
       just this transition. Closed = parked off-screen to the left and
       visibility: hidden (applied once the slide-out has finished), so it
       isn't visible, tappable or tabbable. The extra 40px keeps the 769-991px
       layout, where the panel is offset 30px from the left, fully off-screen. */
    display: block;
    visibility: hidden;
    transform: translateX(calc(-100% - 40px));
    transition: transform 300ms ease, visibility 0s linear 300ms;
  }

  body:has(#user_tab_menu_container) .user_tab_menu.lus-dash-open {
    visibility: visible;
    transform: translateX(0);
    transition: transform 300ms ease, visibility 0s linear 0s;
  }

  /* Why it used to scroll sideways: the theme's close "x" icon inherits
     `.user_tab_menu i { margin-right: 20px }`, which pushes its box 12px past
     the panel's right edge. Harmless while the panel never scrolled, a sideways
     scrollbar once it does. */
  body:has(#user_tab_menu_container) .user_tab_menu .user_tab_menu_close i {
    margin-right: 0;
  }

  /* Class set by js/lus-mobile-menu.js while that menu is open. */
  html.lus-dash-menu-open {
    overflow: hidden;
  }
}

/* No slide for visitors who ask their system for less motion. */
@media (prefers-reduced-motion: reduce) {
  body:has(#user_tab_menu_container) .user_tab_menu,
  body:has(#user_tab_menu_container) .user_tab_menu.lus-dash-open {
    transition: none;
  }
}

/* Divider lines between the drawer's rows: the theme draws them in a dark
   #555; lighter here. Nested rows and :hover are listed because the theme also
   sets the border on `.sub-menu li:hover`. */
.snap-drawer .lus-mobile-menu li,
.snap-drawer .lus-mobile-menu .sub-menu li,
.snap-drawer .lus-mobile-menu .sub-menu li:hover {
  border-bottom-color: #ddd;
}

/* An expanded submenu's last row sits directly on top of its parent row's own
   divider, so both lines were drawn back to back and read as one double-thick
   line under the group. Drop the inner one: a single line closes the group. */
.snap-drawer .lus-mobile-menu .sub-menu li:last-child,
.snap-drawer .lus-mobile-menu .sub-menu li:last-child:hover {
  border-bottom: 0;
}

/* "Login or Sign Up" is the primary action in the list. */
.lus-mobile-menu .lus-mobile-login {
  font-weight: 600;
}

/* "Become a Host" / "List your property" button under the menu list (a link,
   or a <button> for a guest who has to ask first). Brand red (#e52737, the
   same wp_estate_main_color the cards/map pills use), pill-shaped like the
   desktop header's button. */
.lus-mobile-host-cta {
  padding: 24px 20px 28px;
}

.lus-mobile-host-cta .lus-mobile-host-btn,
.lus-mobile-host-cta .lus-mobile-host-btn:visited {
  position: relative;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  padding: 13px 16px;
  border-radius: 999px;
  background: #e52737;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.lus-mobile-host-cta .lus-mobile-host-btn:hover,
.lus-mobile-host-cta .lus-mobile-host-btn:focus,
.lus-mobile-host-cta .lus-mobile-host-btn:active {
  background: #c81f2e;
  color: #fff;
  text-decoration: none;
}

/* The "Free" tag: a small badge pinned to the button's top-right corner,
   straddling its top edge (like a "PRO" badge) rather than sitting in the
   label. Dark rather than white so it reads against both the red button and
   the white drawer behind its upper half; #222 is the same dark the price-range
   bubble uses. Positioned relative to the button (position: relative above). */
.lus-mobile-host-cta .lus-mobile-host-free {
  position: absolute;
  top: -10px;
  right: 18px;
  padding: 3px 9px;
  border-radius: 6px;
  background: #222;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* A guest whose "Become a host" request is waiting for approval: a quiet note
   in the button's place (libs/mobile-menu.php; js/lus-host-request.js swaps it
   in after a request without a reload). */
.lus-mobile-host-cta .lus-mobile-host-pending {
  padding: 12px 14px;
  border: 1px dashed #bbb;
  border-radius: 12px;
  background: #f6f6f6;
  color: #444;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.lus-mobile-host-cta .lus-mobile-host-pending strong,
.lus-mobile-host-cta .lus-mobile-host-pending span {
  display: block;
}