/* Moumachi UI — app-style mobile shell (below 1024px): bottom tab bar and compact header. */
.mm-tabbar {
  display: none;
}

@media (max-width: 1023.98px) {
  :root {
    --mm-tabbar-height: 60px;
  }

  .mm-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45; /* under the header (50) and every modal / sheet (100+) */
    display: flex;
    align-items: stretch;
    height: calc(var(--mm-tabbar-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background-color: #fff;
    border-top: 1px solid #ececec;
  }

  /* Keep the last bit of every page (footer copyright, pagers) above the bar */
  body:has(.mm-tabbar) {
    padding-bottom: calc(var(--mm-tabbar-height) + env(safe-area-inset-bottom, 0px));
  }

  /* Out of the way while typing (the keyboard would push it up over the form) and while the menu drawer is open */
  body:has(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, textarea:focus, [contenteditable="true"]:focus) .mm-tabbar,
  body.mega-menu-open .mm-tabbar {
    display: none;
  }

  .mm-tabbar__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #8a8a8a;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
  }

  .mm-tabbar__item:active {
    background-color: #f6f6f6;
  }

  .mm-tabbar__item:focus-visible {
    outline: 2px solid #0b0b0b;
    outline-offset: -4px;
    border-radius: 8px;
  }

  .mm-tabbar__item.is-active {
    color: #0b0b0b;
    font-weight: 700;
  }

  .mm-tabbar__icon-wrap {
    position: relative;
    display: inline-flex;
  }

  .mm-tabbar__icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mm-tabbar__item.is-active .mm-tabbar__icon {
    stroke-width: 2;
  }

  .mm-tabbar__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid transparent;
  }

  .mm-tabbar__item.is-active .mm-tabbar__avatar {
    border-color: #0b0b0b;
  }

  /* The one bit of yellow: a small dot under the active tab's label */
  .mm-tabbar__item.is-active > span:last-child {
    position: relative;
  }

  .mm-tabbar__item.is-active > span:last-child::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background-color: #ffc107;
  }

  .mm-tabbar__badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 9999px;
    background-color: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
    text-align: center;
    box-sizing: content-box;
  }

  .mm-tabbar__badge[hidden] {
    display: none;
  }
}

/* Compact app bar: logo + search. The tab bar takes over the menu (Me), notifications (Alerts)
   and account (Me), so those header controls are hidden here; they stay in the page for desktop
   and for the scripts that drive them (the bell still keeps the Alerts badge in step). */
@media (max-width: 1023.98px) {
  /* Solid white on phones: the profile area (body.is-dashboard-page, moumachi-core.css) makes the
     header 80% white, and what scrolled under it (titles, its section menu) showed through */
  #siteHeader,
  body.is-dashboard-page #siteHeader {
    box-shadow: none;
    border-bottom: 1px solid #ececec;
    background-color: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html #siteHeader .header-main,
  html #siteHeader.is-scrolled .header-main {
    min-height: 56px;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* A full 44px tap target, its edge lined up with the page gutter */
  #siteHeader .header-mobile-search {
    width: 44px;
    height: 44px;
    margin-right: -10px;
  }

  #siteHeader .header-mobile-search svg {
    width: 24px;
    height: 24px;
  }

  /* The menu button (three lines of different lengths) */
  #siteHeader .mobile-nav-toggle {
    width: 40px;
    height: 40px;
    margin-left: -8px;
    border-radius: 12px;
    color: #0b0b0b;
    -webkit-tap-highlight-color: transparent;
  }

  #siteHeader .mobile-nav-toggle:active {
    background-color: #f3f3f3;
  }

  #siteHeader .notification-bell-container,
  #siteHeader .user-dropdown-container,
  #siteHeader .header-login-btn {
    display: none;
  }
}

/* Top-bar search: opens as a field inside the bar (Cancel on the right) and its suggestions take
   the screen below, like an app's search screen, instead of a floating card. */
@media (max-width: 1023.98px) {
  #siteHeader.is-search-open .header-search {
    top: 6px;
    left: 15px;
    right: 76px;
    height: 44px;
    padding: 0 4px 0 12px;
    border: 0;
    border-radius: 12px;
    background-color: #f3f3f3;
    box-shadow: none;
    transform: none; /* a transform would trap the fixed panel below inside the field */
  }

  #siteHeader .header-search-submit {
    display: none;
  }

  #siteHeader .header-search-filter {
    width: 40px;
    height: 40px;
  }

  #siteHeader.is-search-open .header-mobile-search {
    width: auto;
    margin-right: -4px;
    padding: 0 4px;
    background: transparent;
    border-radius: 0;
    color: #0b0b0b;
    font-size: 15px;
    font-weight: 600;
  }

  #siteHeader.is-search-open .header-mobile-search svg {
    display: none;
  }

  #siteHeader.is-search-open .header-mobile-search::after {
    content: "Cancel";
  }

  #siteHeader .header-search-panel {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid #ececec;
    border-radius: 0;
    box-shadow: none;
    padding: 8px 4px 24px !important;
  }

  #siteHeader .header-search-panel .header-search-results-list {
    max-height: none;
    overflow: visible;
  }

  /* Home: the page's own search field is right there, so the bar shows its icon only once that has scrolled away */
}

/* The site footer is a desktop thing: on phones the Me screen carries its company and legal links
   (_MobileMeScreen). It stays in the page for crawlers and wide screens. */
@media (max-width: 1023.98px) {
  #siteFooter {
    display: none;
  }
}

/* Home (once its own field has scrolled away) and the search page: the bar is a tappable search
   field (logo out), like an app's pinned search. The search page shows what was searched. */
@media (max-width: 1023.98px) {
  :is(body:has(#heroHomepage), body.search-page) #siteHeader:not(.is-search-open) .header-main > div:first-child > a {
    display: none;
  }

  :is(body:has(#heroHomepage), body.search-page) #siteHeader:not(.is-search-open) .header-main > nav {
    flex: 1;
  }

  :is(body:has(#heroHomepage), body.search-page) #siteHeader:not(.is-search-open) .header-mobile-search {
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    height: 42px;
    margin-right: 0;
    padding: 0 12px;
    border-radius: 12px;
    background-color: #f3f3f3;
    color: #0b0b0b;
  }

  :is(body:has(#heroHomepage), body.search-page) #siteHeader:not(.is-search-open) .header-mobile-search svg {
    width: 19px;
    height: 19px;
  }

  :is(body:has(#heroHomepage), body.search-page) #siteHeader:not(.is-search-open) .header-mobile-search::after {
    content: attr(data-mm-label);
    overflow: hidden;
    color: #8a8a8a;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
  }
}

/* Home on mobile: the hero photo runs to the top edge, so the bar sits off-screen until the
   hero's search pill has scrolled away, then slides in as the pinned search (above). It is
   fixed here, out of the page flow, so showing it never moves the page. The tab bar and the
   menu drawer inside it are fixed to the screen themselves, so they are not affected. */
@media (max-width: 1023.98px) {
  body:has(#heroHomepage) #siteHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: top .22s ease;
  }

  body:has(#heroHomepage):not(.mega-menu-open) #siteHeader:not(.is-hero-search-away):not(.is-search-open) {
    top: -72px;
  }
}

@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  body:has(#heroHomepage) #siteHeader {
    transition: none;
  }
}

/* The Me screen (_MobileMeScreen.cshtml): full screen above the page, under the tab bar */
.mm-me {
  display: none;
}

@media (max-width: 1023.98px) {
  .mm-me:not([hidden]) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(var(--mm-tabbar-height) + env(safe-area-inset-bottom, 0px));
    z-index: 44; /* over the page and the bar, under the tab bar */
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 24px;
    background-color: #f2f2f2;
    color: #0b0b0b;
  }

  body.mm-me-open {
    overflow: hidden;
  }

  /* The tab bar stays while the screen is open, even when a field had focus */
  body.mm-me-open .mm-tabbar {
    display: flex !important;
  }

  .mm-me__group {
    margin-top: 8px;
    background-color: #fff;
  }

  /* The first group opens the screen */
  .mm-me__profile,
  .mm-me__welcome {
    margin-top: 0;
    padding-top: calc(28px + env(safe-area-inset-top, 0px)) !important;
  }

  .mm-me a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mm-me__profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 16px 20px;
  }

  .mm-me__avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
  }

  .mm-me__who {
    min-width: 0;
  }

  .mm-me__name {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.4px;
  }

  .mm-me__welcome .mm-me__name {
    font-size: 24px;
    letter-spacing: -.6px;
  }

  .mm-me__sub {
    margin: 2px 0 0;
    overflow: hidden;
    color: #6b6b6b;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mm-me .mm-me__link {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
  }

  .mm-me__welcome {
    padding: 6px 16px 20px;
  }

  .mm-me__welcome .mm-me__sub {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.45;
    white-space: normal;
  }

  .mm-me .mm-me__primary {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    margin-top: 14px;
    border-radius: 14px;
    background-color: #0b0b0b;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
  }

  .mm-me__heading {
    margin: 0;
    padding: 14px 16px 4px;
    color: #7a7a7a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
  }

  .mm-me__row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 0 16px;
    font-size: 15px;
    font-weight: 600;
  }

  .mm-me__row + .mm-me__row,
  .mm-me__cities + .mm-me__row {
    border-top: 1px solid #f2f2f2;
  }

  .mm-me__row:active {
    background-color: #f7f7f7;
  }

  .mm-me__row svg {
    flex-shrink: 0;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: #333;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* The arrow at the end of each row */
  .mm-me__row::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-top: 2px solid #c4c4c4;
    border-right: 2px solid #c4c4c4;
    transform: rotate(45deg);
  }

  .mm-me .mm-me__row--danger {
    color: #dc2626;
  }

  .mm-me__row--danger svg {
    stroke: #dc2626;
  }

  .mm-me__row--danger::after {
    display: none;
  }

  .mm-me__cities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 16px 14px;
  }

  .mm-me .mm-me__cities a {
    padding: 7px 12px;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
  }

  .mm-me .mm-me__cities a:active {
    background-color: #f5f5f5;
  }

  .mm-me__legal {
    padding: 14px 16px;
  }

  .mm-me__legal nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .mm-me .mm-me__legal a {
    color: #555;
    font-size: 13px;
    font-weight: 500;
  }

  .mm-me__legal p {
    margin: 10px 0 0;
    color: #9a9a9a;
    font-size: 12px;
  }
}