/* Mobile listing chrome, owner tools and fullscreen gallery. */

.listing-state-note.guest { color: var(--state-info); background: var(--state-info-bg); }
body:has(#listing-page) .dnav-link.active { border-radius: var(--radius-pill); background: var(--surface-lilac); color: var(--text-primary); font-weight: 600; }
.listing-owner-mobile {
  padding: 18px;
  border-radius: var(--radius-listing-mobile);
  background: var(--surface-card);
}
.listing-owner-mobile h2 { margin: 0; font-size: 14px; }
.listing-owner-mobile > .listing-owner-stats { margin: 6px 0 0; }
.listing-owner-stats.mobile { display: grid; grid-template-columns: max-content max-content; column-gap: 12px; }
.listing-owner-stats.mobile span + span::before { content: none; }
.listing-owner-stats.mobile .listing-owner-expiry { grid-column: 1 / -1; }
.listing-owner-mobile .listing-summary-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }

.bcard-mobile-sub,
.bpanel-head-arrow { display: none; }

.listing-mobile-header {
  z-index: 20;
  min-height: calc(58px + env(safe-area-inset-top));
  padding: calc(7px + env(safe-area-inset-top)) 12px 7px;
  background: var(--surface-frost);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px 44px;
  align-items: center;
  gap: 8px;
}
.listing-mobile-header > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.listing-mobile-back,
.listing-mobile-more,
.listing-mobile-header .listing-favorite { width: 44px; min-height: 44px; padding: 0; background: var(--surface-card); }
.listing-mobile-header .listing-favorite-form { width: 44px; }
.listing-mobile-back,
.listing-mobile-more { border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); display: grid; place-items: center; }
.listing-mobile-menu { position: relative; }
.listing-mobile-menu > summary { list-style: none; cursor: pointer; }
.listing-mobile-menu > summary::-webkit-details-marker { display: none; }
.listing-mobile-menu > div {
  position: absolute;
  inset-block-start: 50px;
  inset-inline-end: 0;
  z-index: 5;
  width: 210px;
  padding: 6px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-raised);
}
.listing-mobile-menu > div a { min-height: 42px; padding-inline: 12px; border-radius: var(--radius-control); display: flex; align-items: center; font-size: 12.5px; }
.listing-mobile-menu > div a:hover { background: var(--surface-warm); }

.listing-mobile-dock {
  position: fixed;
  inset-inline: 10px;
  inset-block-end: calc(var(--nav-h) + 10px + env(safe-area-inset-bottom));
  z-index: 29;
  padding: 10px 12px 10px 18px;
  border-radius: var(--radius-listing);
  background: var(--surface-card);
  box-shadow: var(--shadow-nav);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.listing-mobile-dock strong { display: block; font-size: 19px; line-height: 1.1; white-space: nowrap; }
.listing-mobile-dock span { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 11px; }
.listing-mobile-dock .listing-primary-action { min-height: 48px; font-size: 13.5px; }
.page.listing-page { padding-bottom: calc((var(--nav-h) * 2) + 62px + env(safe-area-inset-bottom)); }

.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--overlay-ink);
  color: var(--surface-card);
}
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox::backdrop { background: var(--overlay-ink); }
.lightbox-bar { min-height: calc(64px + env(safe-area-inset-top)); padding: calc(10px + env(safe-area-inset-top)) 14px 10px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; }
.lightbox-close,
.lightbox-bar .listing-favorite {
  position: static;
  inset: auto;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-card) 16%, transparent);
  color: var(--surface-card);
  display: grid;
  place-items: center;
}
.lightbox-bar .listing-favorite-form { width: 44px; }
.lightbox-bar .listing-favorite.active { color: var(--surface-card); }
.lightbox-stage { position: relative; flex: 1; min-height: 0; background: color-mix(in srgb, var(--overlay-ink) 90%, var(--text-primary)); }
.lightbox-stage img { width: 100%; height: 100%; object-fit: contain; }
.lightbox-stage .cites-stamp { width: 104px; height: 104px; inset: 18px 18px auto auto; }
.lightbox-thumbs { padding: 14px 16px calc(22px + env(safe-area-inset-bottom)); display: flex; gap: 8px; overflow-x: auto; }
.lightbox-thumb { width: 64px; height: 64px; flex: none; border-radius: var(--radius-xs); }
.lightbox-thumb[aria-current="true"] { outline: 2px solid var(--surface-card); outline-offset: -2px; }

@media (max-width: 899px) {
  .bpanel-kicker,
  .bpanel-badges,
  .bpanel .sid,
  .bpanel-stats,
  .bpanel-link,
  .bcard-desktop-sub { display: none; }
  .bcard-mobile-sub { display: block; }
  .bpanel-head { padding: 18px; }
  .bpanel-head-arrow { margin-inline-start: auto; display: grid; place-items: center; color: var(--text-secondary); }
  .listing-more-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .listing-more-head .section-h { font-size: 26px; line-height: 1.08; }
  .listing-more-head > a { align-self: flex-start; }
}

@media (min-width: 900px) {
  .listing-mobile-header,
  .listing-mobile-dock,
  .listing-owner-mobile,
  .listing-state-wrap.guest { display: none; }
}

@media (min-width: 900px) and (max-width: 1099px) {
  body:has(#listing-page) .dsearch { display: none; }
  body:has(#listing-page) .dheader-in { gap: 10px; }
  body:has(#listing-page) .dnav-link { padding-inline: 10px; font-size: 13.5px; }
}