/*
  THE PHONE'S SIDE MENU (class/class.side_menu.php, js/side_menu.js). Swipe the page right and
  the whole page slides over to show the menu sitting behind it. Ported from Schedulosity.

  The panel is fixed under everything (z-index 0, hidden until needed). The page - the fixed top
  bar (.navbar_background_class), the body (.myaccount_body), the Book a Visit prefooter and the
  lower nav - is translated by --smenu_w, which side_menu.js sets on <html>. The scrim rides on
  top of the page: it is what a tap lands on to close, and it carries the page's edge shadow.

  html.smenu_dragging: the finger is driving it (inline transforms, no transitions)
  html.smenu_open:     it is open (the transforms below)
  html.smenu_anim:     a settle is under way (transitions on) - side_menu.js takes it off after
*/

.smenu_panel, .smenu_scrim { display: none; }

@media (max-width: 767px)
{
  .smenu_panel
  {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 82vw;
    max-width: 320px;
    background: var(--brand_deep);
    color: #fff;
    z-index: 0;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    visibility: hidden;
    /* a little behind the page until it is pulled: it catches up as the page slides (parallax) */
    transform: translate3d(-28%, 0, 0);
    transition: visibility 0s linear 0.28s;
  }
  html.smenu_dragging .smenu_panel,
  html.smenu_open .smenu_panel
  {
    visibility: visible;
    transition-delay: 0s;
  }
  html.smenu_open .smenu_panel { transform: none; }

  .smenu_head
  {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    flex-shrink: 0;
  }
  .smenu_avatar
  {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .smenu_who { min-width: 0; }
  .smenu_name { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .smenu_sub { font-size: 13px; color: rgba(255,255,255,0.55); }

  .smenu_body
  {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding: 14px 10px 6px;
  }
  .smenu_body::-webkit-scrollbar { display: none; }

  .smenu_label
  {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.45);
    padding: 6px 10px 6px;
  }
  .smenu_divider { height: 1px; background: rgba(255,255,255,0.1); margin: 10px 6px; }

  .smenu_item
  {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 10px;
    border-radius: var(--radius);
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
  }
  .smenu_item:hover,
  .smenu_item:active { background: rgba(255,255,255,0.08); color: #fff; }
  .smenu_item i { font-size: 18px; width: 22px; text-align: center; color: var(--brand_hover); }
  .smenu_book { color: #fff; font-weight: 600; }
  .smenu_book i { color: #fff; }
  .smenu_item_danger,
  .smenu_item_danger i { color: #fca5a5; }

  /* the View as cards (Schedulosity's nud_card): a square tinted icon, a light translucent body */
  .smenu_cards { padding: 2px 2px 10px; }
  .smenu_card
  {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    color: #fff;
    text-decoration: none;
    margin-bottom: 7px;
    transition: background 0.12s, border-color 0.12s;
  }
  .smenu_card:hover,
  .smenu_card:active
  {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.28);
    color: #fff;
  }
  .smenu_card_more { background: transparent; border-style: dashed; }

  .smenu_card_icon
  {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
  }
  .smenu_card_icon_practice { background: rgba(28,157,87,0.24); color: #9ee2b8; }
  .smenu_card_icon_admin { background: rgba(47,111,237,0.24); color: #a9cbff; }
  .smenu_card_icon_patient { background: rgba(134,94,191,0.32); color: #e0cefc; }
  .smenu_card_icon_more { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.8); }

  .smenu_card_text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .smenu_card_name { font-size: 15px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .smenu_card_sub { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .smenu_card_badge
  {
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--radius_pill);
    padding: 2px 7px;
    flex-shrink: 0;
  }
  .smenu_card_go { color: rgba(255,255,255,0.5); font-size: 13px; flex-shrink: 0; }

  .smenu_foot
  {
    flex-shrink: 0;
    padding: 6px 10px calc(env(safe-area-inset-bottom, 0px) + 10px);
    border-top: 1px solid rgba(255,255,255,0.12);
  }

  /* the scrim: over the top bar (6), the lower nav (5) and the prefooter (15), so a tap anywhere on
     the shifted page closes the menu; below the account drawer's backdrop (500) */
  .smenu_scrim
  {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: rgba(0,0,0,0);
    box-shadow: -14px 0 28px rgba(0,0,0,0.28);
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.28s;
  }
  html.smenu_dragging .smenu_scrim,
  html.smenu_open .smenu_scrim
  {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  html.smenu_open .smenu_scrim { background: rgba(0,0,0,0.12); }

  /* the body must paint above the panel wherever the two overlap mid-drag */
  html.smenu_dragging .myaccount_body,
  html.smenu_anim .myaccount_body,
  html.smenu_open .myaccount_body
  {
    position: relative;
    z-index: 5;
  }
  /* the footer box under the fixed lower nav is a little taller than the nav and does not slide (sliding it
     would trap the full-screen overlays inside it, like the loading spinner). the nav paints a band in the
     page's colour up over that strip while the menu moves; side_menu.js measures it into --smenu_strip */
  html.smenu_dragging .lower_navbar_container,
  html.smenu_anim .lower_navbar_container,
  html.smenu_open .lower_navbar_container
  {
    box-shadow: 0 calc(-1 * var(--smenu_strip, 0px)) 0 0 #f2f2f2;
  }

  html.smenu_open .navbar_background_class,
  html.smenu_open .lower_navbar_container,
  html.smenu_open .myaccount_body,
  html.smenu_open .myaccount_prefooter,
  html.smenu_open .smenu_scrim
  {
    transform: translate3d(var(--smenu_w, 280px), 0, 0);
  }
  html.smenu_anim .navbar_background_class,
  html.smenu_anim .lower_navbar_container,
  html.smenu_anim .myaccount_body,
  html.smenu_anim .myaccount_prefooter,
  html.smenu_anim .smenu_scrim,
  html.smenu_anim .smenu_panel
  {
    transition: transform 0.28s cubic-bezier(0.32, 0, 0.15, 1), background 0.28s linear, visibility 0s linear 0.28s;
  }
  html.smenu_anim.smenu_open .smenu_panel,
  html.smenu_anim.smenu_open .smenu_scrim { transition-delay: 0s; }

  /* the page behind does not scroll while the menu is open */
  html.smenu_open body { overflow: hidden; }
}