/* mobile-availability.css
   ----------------------------------------------------------------------------
   MOBILE ONLY (<= 768px): the calendar and its schedule cards are pulled out of
   the page flow and shown inside a bottom-sheet modal that opens from a button
   fixed to the bottom of the screen ("Check availability" -> "Hide availability").

   Nothing here reparents the DOM: #calendar stays exactly where it is in the
   markup (so every calendar/schedule script keeps finding its elements). On
   mobile it is simply positioned as a fixed bottom sheet and slid in/out via a
   body.availability-open class that availabilityModal.js toggles. On desktop the
   button/backdrop are display:none and #calendar renders inline as before.

   The schedule cards live inside #calendar (scheduleManager.js mounts them just
   before #schedule-cards-anchor), so they travel into the sheet automatically.
--------------------------------------------------------------------------- */

/* Hidden on desktop; only the mobile media query below turns them on. */
#mobile-availability-btn,
#availability-backdrop {
  display: none;
}

@media (max-width: 768px) {

  /* The fixed bottom button sits over the page — reserve space so the last of
     the page content (reviews, etc.) is never hidden behind it. */
  #main {
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  }

  /* --- The calendar becomes a bottom-sheet modal --- */
  #calendar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 7vh;                 /* small gap up top so the backdrop peeks through */
    z-index: 2000;
    width: auto;              /* override the width:100% mobile rule in main.css */
    max-width: none;
    margin: 0;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
    padding: 18px 16px calc(96px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(100%);         /* parked off the bottom when closed */
    transition: transform 0.3s ease;
    pointer-events: none;                /* not interactive while parked */
  }

  body.availability-open #calendar {
    transform: translateY(0);
    pointer-events: auto;
  }

  /* A small grabber bar at the top of the sheet, for affordance. */
  #calendar::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 999px;
    background: #d1d5db;
  }

  /* --- Backdrop behind the sheet (real element so it can be tapped to close) --- */
  #availability-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1999;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  body.availability-open #availability-backdrop {
    opacity: 1;
    visibility: visible;
  }

  /* Stop the page underneath from scrolling while the sheet is open. */
  body.availability-open {
    overflow: hidden;
  }

  /* --- The fixed bottom action button --- */
  #mobile-availability-btn {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2001;            /* above the sheet, so it stays tappable when open */
    width: 100%;
    margin: 0;
    border: 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
    background: var(--ft-coral, #ff5a5f);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: background 0.2s ease;
  }

  /* Grey while the sheet is open (button now reads "Hide availability"). */
  body.availability-open #mobile-availability-btn {
    background: #9ca3af;
  }

  #mobile-availability-btn:active {
    filter: brightness(0.96);
  }
}