/* Moumachi UI — listing page, app-like mobile view (MobileAppLikeView in appsettings.json). Loaded after listing.css. */

/* ============================================================
   Phones and tablets (below 1024px): the app layout. A header card over the photo with
   today's status and one row of round actions; sections edge to edge on a grey canvas;
   the ⋮ menu as a bottom sheet holding Claim and Suggest an edit.
   Everything here reuses the page's own buttons, links and modals.
============================================================ */
@media (max-width: 1023.98px) {
  .listing-page main,
  .listing-page main > .common-sec:not(.listing-top-sec),
  .listing-page main > .listing-top-sec.common-sec {
    background-color: #f2f2f2;
  }

  .listing-page main > .common-sec:not(.listing-top-sec) {
    padding-top: 8px;
  }

  /* Header card */
  .listing-sheet.listing-card {
    border-radius: 20px 20px 0 0;
    background-color: #fff;
    padding: 16px 16px 18px;
  }

  .listing-sheet__avatar img {
    border-radius: 14px;
  }

  /* Rating line with Share and Save at its end */
  .mm-lst-ratingrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  /* Rating stays on one line beside the buttons */
  .mm-lst-ratingrow > a {
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
  }

  /* ...and when the row is short of room the review count ends in "…" before the buttons */
  .mm-lst-ratingrow > a > span {
    min-width: 0;
  }

  .mm-lst-ratingrow #heroTotalReviews {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mm-lst-ratingrow > .mm-lst-quick {
    flex-shrink: 0;
  }

  .mm-lst-ratingrow > a img {
    width: 18px;
    height: 18px;
  }

  .mm-lst-quick {
    display: flex;
    flex-shrink: 0;
    gap: 6px;
  }

  .mm-lst-quick__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #e3e3e3;
    border-radius: 50%;
    background: #fff;
    color: #0b0b0b;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mm-lst-quick__btn:active {
    background-color: #f3f3f3;
  }

  .mm-lst-quick__btn.is-saved svg {
    fill: #dc2626;
    stroke: #dc2626;
  }

  .mm-lst-quick__btn svg,
  .mm-lst-hours-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Sections: edge to edge, grey gaps between them */
  .listing-page .listing-body,
  .listing-page .listing-body__main,
  .listing-page .listing-body__aside {
    gap: 8px;
  }

  .listing-page .listing-body .listing-card {
    margin-inline: -15px;
    border-radius: 0;
    padding: 20px 16px;
  }

  .listing-page .listing-body .listing-card h2 {
    font-size: 17px;
    letter-spacing: -.2px;
  }

  /* One home for each thing on phones: Claim and Suggest are in the ⋮ sheet; Share and Save on
     the rating line. The phone number and Direction on map stay in Details as well as in the
     bottom bar. The originals stay in the page (hidden) and still do the work. */
  .listing-page #btnClaimBusiness,
  .listing-page #btnSuggestEdit,
  .listing-page #btnMobileShare,
  .listing-page #btnMobileSave {
    display: none !important; /* the claim button and photo buttons carry display: flex !important */
  }


  /* Hours: today only until asked */
  #hours-of-op:not(.is-week-open) #listingHoursList > li:not(.is-today) {
    display: none;
  }

  .mm-lst-hours-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 6px 0;
    border: 0;
    background: none;
    color: #0b0b0b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }

  .is-week-open .mm-lst-hours-toggle svg {
    transform: rotate(180deg);
  }

  /* The ⋮ menu as a bottom sheet. Its section is a stacking context of its own (z-index 20),
     so the whole section rises above the tabs and the Call bar while the sheet is open. */
  .listing-page main > .listing-top-sec:has(.listing-more-menu.is-open) {
    z-index: 140;
  }

  .listing-page .listing-more-menu.is-open {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 130;
    display: flex;
    flex-direction: column;
    width: auto;
    margin: 0;
    padding: 22px 0 calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0;
    background-color: #fff;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45);
  }

  /* Grab handle */
  .listing-page .listing-more-menu.is-open::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background-color: #d6d6d6;
  }

  .listing-more-menu__extra {
    display: contents;
  }

  .listing-page .listing-more-menu.is-open > a,
  .listing-page .listing-more-menu.is-open > button,
  .listing-more-menu__extra > * {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 0;
    background: none;
    color: #0b0b0b;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .listing-page .listing-more-menu.is-open > a:active,
  .listing-page .listing-more-menu.is-open > button:active,
  .listing-more-menu__extra > a:active,
  .listing-more-menu__extra > button:active {
    background-color: #f5f5f5;
  }

  .listing-more-menu__note {
    color: #6b6b6b !important;
    cursor: default !important;
  }

  /* Order in the sheet: what to do with the listing first, the report last */
  .listing-more-menu__extra > :not([data-mm-press="#btnSuggestEdit"]) {
    order: 1;
  }

  .listing-more-menu__extra > [data-mm-press="#btnSuggestEdit"] {
    order: 2;
  }

  .listing-page .listing-more-menu.is-open > #btnMobileProfileLink {
    order: 3;
  }

  .listing-page .listing-more-menu.is-open > #btnMobileListingReport {
    order: 5;
    color: #dc2626;
  }
}