/* ============================================================
   guest-app.css — app-style guest shell: bottom tab bar, install
   chip, and a subtle page transition.

   Loaded as a SEPARATE file (the only external CSS) to keep the
   single-page index.html from growing further. Every rule is gated
   to  body.guest-app:not(.owner-mode)  so the admin/back-office UI
   is never affected — the same proven pattern as body.owner-mode.
   Bump the ?v= in index.html AND the CACHE name in sw.js on change.
   ============================================================ */

/* Hidden by default; the shell only appears for guests on a phone-sized
   viewport or when the site is installed (handled in guest-app.js). */
#guest-tabbar {
  display: none;
}
#guest-msg-fab {
  display: none;
}

/* In the guest shell the top header is removed entirely — navigation lives in
   the floating dock menu below. */
body.guest-app:not(.owner-mode) header {
  display: none;
}

/* The page hero and .container reserve ~90–120px of top padding to clear the
   (now hidden) floating header. With no header, that leaves a large empty gap
   at the top of every page. Pull the content back up so it starts just below
   the floating account button (≈54px) plus a little breathing room + notch. */
body.guest-app:not(.owner-mode) .hero {
  padding-top: calc(66px + env(safe-area-inset-top, 0px));
}
body.guest-app:not(.owner-mode) .container {
  padding-top: calc(66px + env(safe-area-inset-top, 0px));
}

/* The guest menu is a centred, floating "pill" — the same look and layout as the
   admin dock (.admin-dock): dark glass, rounded, equal circular icon buttons, and
   a white selection indicator that physically glides between tabs. #guest-tabbar
   is just the fixed positioning wrapper (mirrors .admin-dock-wrap). */
body.guest-app:not(.owner-mode) #guest-tabbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1400;
  max-width: calc(100vw - 20px);
  padding: 0 10px;
}
/* In-dock "Check availability" CTA — a compact accent pill stacked just above the
   nav dock on cottage pages, so the two read as one centred menu cluster (replaces
   the separate full-width booking bar on mobile). */
#guest-book-cta {
  display: none;
}
body.guest-app:not(.owner-mode) #guest-tabbar.gt-show-cta #guest-book-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  cursor: pointer;
  color: #1b1208;
  background: var(--accent);
  border: none;
  border-radius: 999px;
  padding: 14px 30px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
  transition:
    transform 0.15s var(--fluid-bezier),
    filter 0.2s var(--fluid-bezier);
  animation: gtCtaIn 0.34s var(--spring) both;
}
@keyframes gtCtaIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (hover: hover) {
  body.guest-app:not(.owner-mode) #guest-book-cta:hover {
    filter: brightness(1.05);
  }
}
body.guest-app:not(.owner-mode) #guest-book-cta:active {
  transform: scale(0.96);
}
/* The separate full-width booking bar is replaced by the in-dock CTA on mobile. */
body.guest-app:not(.owner-mode) #prop-book-bar {
  display: none !important;
}
.guest-dock {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(26, 25, 27, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 12px 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.guest-dock-btn {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  transition:
    background 0.2s var(--fluid-bezier),
    transform 0.15s var(--fluid-bezier);
  -webkit-tap-highlight-color: transparent;
}
.guest-dock-btn svg {
  width: 27px;
  height: 27px;
  display: block;
  transition: transform 0.4s var(--spring);
}
.guest-dock-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}
.guest-dock-btn:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  outline: 2px solid var(--accent-soft, #d6a785);
  outline-offset: 2px;
}
.guest-dock-btn:active {
  transform: scale(0.92);
}
/* Current section: icon flips dark to sit over the white indicator + nudges up. */
.guest-dock-btn.current {
  color: #1a191b;
}
.guest-dock-btn.current svg {
  transform: scale(1.08);
}

/* The crown logo is the Home button; darken to a silhouette when it's current
   so it reads against the white indicator. */
.guest-dock-btn.gt-home img {
  width: 30px;
  height: 30px;
  display: block;
  filter: drop-shadow(0 0 8px rgba(214, 167, 133, 0.5));
  transition: transform 0.4s var(--spring);
}
.guest-dock-btn.gt-home.current img {
  filter: brightness(0);
  transform: scale(1.08);
}

/* My Stays and Experiences only appear for a signed-in guest. */
.gt-stays,
.gt-auth {
  display: none;
}
body.guest-app:not(.owner-mode).guest-signed-in .gt-stays,
body.guest-app:not(.owner-mode).guest-signed-in .gt-auth {
  display: inline-flex;
}

/* Instagram-style white selection pill; JS sizes/positions it under .current. */
.guest-dock-indicator {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition:
    left 0.5s var(--spring),
    width 0.5s var(--spring),
    height 0.3s var(--fluid-bezier),
    opacity 0.28s ease;
}
.guest-dock-indicator.show {
  opacity: 1;
}

/* Standalone Messages button — detached from the menu at the bottom-left, but
   it reuses .guest-dock + .guest-dock-btn so it's the same size/design. */
body.guest-app:not(.owner-mode) #guest-msg-fab {
  display: flex;
  align-items: center;
  position: fixed;
  left: 12px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 1400;
}

/* Hover label so each icon's purpose is clear (desktop / pointer devices). */
.guest-dock-btn::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(20, 20, 22, 0.96);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.3px;
  padding: 7px 11px;
  border-radius: 9px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s var(--fluid-bezier),
    transform 0.18s var(--fluid-bezier);
}
.guest-dock-btn:hover::after,
.guest-dock-btn:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .guest-dock-indicator {
    transition: opacity 0.2s ease;
  }
  .guest-dock-btn svg,
  .guest-dock-btn.current svg,
  .guest-dock-btn.gt-home img {
    transition: none;
    transform: none;
  }
}

/* Tighter buttons on small phones — same breakpoints as the admin dock. */
@media (max-width: 480px) {
  .guest-dock {
    padding: 7px 9px;
    gap: 2px;
  }
  .guest-dock-btn {
    width: 44px;
    height: 44px;
  }
  .guest-dock-btn svg {
    width: 22px;
    height: 22px;
  }
  .guest-dock-btn.gt-home img {
    width: 24px;
    height: 24px;
  }
  .guest-dock-indicator {
    width: 44px;
    height: 44px;
  }
}
/* On very narrow phones the centred dock would crowd the bottom-left Messages
   button, so anchor the dock to the right edge there (Messages stays on the
   left). Buttons keep their 44px tap target rather than shrinking. */
@media (max-width: 380px) {
  body.guest-app:not(.owner-mode) #guest-tabbar {
    left: auto;
    right: 12px;
    transform: none;
  }
}

/* Clear the floating dock so document/footer content is never hidden behind it.
   The dock is ~104px tall (button + padding + 20px gap) on its largest size, so
   keep a comfortable margin below all page content and the footer. This BODY
   padding sits below the footer, so it's the only clearance needed — per-view
   padding on top of it just creates a void between content and footer. */
body.guest-app:not(.owner-mode) {
  padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px));
}
/* Cottage pages add the "Check availability" pill above the dock, so the
   cluster is taller — give the footer a little more room only then. */
body.guest-app:not(.owner-mode).book-bar-open {
  padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px));
}

/* On mobile the footer is pared back to just the dark/light toggle, the
   "Made by George" credit, and the build number — nothing else. */
body.guest-app:not(.owner-mode) #footer-newsletter,
body.guest-app:not(.owner-mode) .footer-nap,
body.guest-app:not(.owner-mode) .footer-legal {
  display: none;
}

/* On mobile, the sign-in / create-account and account screens (Your details,
   Account & Security) are shown as full PAGES (like Cottages), not floating
   windows: full-bleed, opaque, sitting just BELOW the dock so the menu stays
   usable (tapping another tab leaves them via nav()). They adapt to the screen:
   the form is a fluid-width column that centres vertically when it fits and
   scrolls when it doesn't, full-width on small phones and capped on larger ones. */
body.guest-app:not(.owner-mode) #guest-auth-modal,
body.guest-app:not(.owner-mode) #guest-details-modal,
body.guest-app:not(.owner-mode) #guest-security-modal {
  z-index: 1390;
  background: var(--dark-grey);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  flex-direction: column;
  align-items: center;
  /* Top-align (not centred) so the form starts near the top and uses the screen,
     instead of floating low in the middle with empty space above and below. */
  justify-content: flex-start;
  overflow-y: auto;
  padding: calc(26px + env(safe-area-inset-top, 0px)) clamp(16px, 5vw, 32px)
    calc(124px + env(safe-area-inset-bottom, 0px));
}
body.guest-app:not(.owner-mode) #guest-auth-modal .modal-box,
body.guest-app:not(.owner-mode) #guest-details-modal .modal-box,
body.guest-app:not(.owner-mode) #guest-security-modal .modal-box {
  width: 100%;
  max-height: none;
  min-height: 0;
  flex: 0 0 auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
/* The box has no padding here, so the close (×) row's desktop negative margins
   would push it past the edge and clip its top-right — keep it fully inside. */
body.guest-app:not(.owner-mode) .auth-close-row {
  margin: 0 0 6px;
}

/* Messages is also a full PAGE on mobile (like the other menu items), not a
   floating window: full-bleed, opaque, scrollable, below the dock so the menu
   stays usable (nav() closes it when you tap another tab). */
body.guest-app:not(.owner-mode) #chat-widget {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--dark-grey);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  z-index: 1390;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 0 calc(98px + env(safe-area-inset-bottom, 0px));
}

/* The header account pill is gone; the messages bubble now lives in the dock as
   the leftmost button, so hide the floating chat FAB here. The cottage page's
   sticky book bar sits just ABOVE the floating dock. */
body.guest-app:not(.owner-mode) .account-btn {
  display: none;
}
body.guest-app:not(.owner-mode) .chat-fab {
  display: none;
}
/* Subtle app-like page transition (guest shell only; desktop/admin stay instant).
   .page-view.active's base state is opacity:1 (app.css), so `forwards` here is
   just belt-and-braces — visibility never depends on the animation running. */
body.guest-app:not(.owner-mode) .page-view.active {
  animation: gtFade 0.32s var(--fluid-bezier) forwards;
}
@keyframes gtFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   COASTAL FRESH — light dock. When a guest is in light mode (the default),
   the floating dock matches the light theme instead of staying dark. Admin
   (owner-mode) is never light, so its dark dock is untouched; a guest who
   toggles to dark also keeps the dark dock. Mirrors the desktop refresh.
   ============================================================ */
body.light-mode.guest-app:not(.owner-mode) .guest-dock {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(28, 46, 58, 0.1);
  box-shadow: 0 16px 44px rgba(30, 54, 72, 0.18);
}
/* Icons become ink-slate on the white dock (were white on dark). */
body.light-mode.guest-app:not(.owner-mode) .guest-dock-btn {
  color: #1b2a34;
}
body.light-mode.guest-app:not(.owner-mode) .guest-dock-btn:hover,
body.light-mode.guest-app:not(.owner-mode) .guest-dock-btn:focus-visible {
  background: rgba(28, 46, 58, 0.08);
}
/* Selection pill switches from white (invisible on a white dock) to the
   rose-gold brand accent; the current icon stays dark and reads over it. */
body.light-mode.guest-app:not(.owner-mode) .guest-dock-indicator {
  background: var(--accent, #c6885e);
}
/* The crown home button is a warm silhouette when current (on the accent pill). */
body.light-mode.guest-app:not(.owner-mode) .guest-dock-btn.gt-home img {
  filter: none;
}
body.light-mode.guest-app:not(.owner-mode) .guest-dock-btn.gt-home.current img {
  filter: brightness(0);
}