/* BSK Mobile Shell 0.2.0: phone search for the home search card and the Search page.
   Phones only (below 721px). Every rule starts with body.bsk-m-app, so it wins over the listing plugin's rules
   and changes nothing on a desktop page. The first rules only keep the phone pieces hidden on desktop. */

/* Desktop: the phone pieces stay hidden */
.bsk-m-filter-btn,
.bsk-m-sheet-head,
.bsk-m-chips,
.bsk-m-dd-head,
.bsk-m-backdrop { display: none; }

@media (max-width: 720px) {
  /* Title and tabs: app font; silver at rest, green when touched or selected */
  body.bsk-m-app .bskpl-hs .bskpl-hs-title {
    font-family: var(--bsk-m-font);
    font-size: 24px;
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 14px;
    text-wrap: balance;
  }
  body.bsk-m-app .bskpl-hs .bskpl-hs-tabs { gap: 8px; }
  body.bsk-m-app .bskpl-hs .bskpl-hs-tab {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--bsk-m-silver);
    color: var(--bsk-m-ink);
    font-family: var(--bsk-m-font);
    font-size: 15px;
    font-weight: 700;
    -webkit-tap-highlight-color: transparent;
  }
  body.bsk-m-app .bskpl-hs .bskpl-hs-tab:active,
  body.bsk-m-app .bskpl-hs .bskpl-hs-tab.on,
  body.bsk-m-app .bskpl-hs .bskpl-hs-tab:has(input:checked) {
    background: var(--bsk-m-green);
    border-color: var(--bsk-m-green);
    color: #fff;
  }
  body.bsk-m-app .bskpl-hs .bskpl-hs-tab.is-soon {
    background: rgba(236, 233, 223, .55);
    border-style: dashed;
    color: var(--bsk-m-muted);
  }
  /* Projects is a link tab; the plugin paints link tabs white, which is unreadable on silver */
  body.bsk-m-app .bskpl-hs .bskpl-hs-hero .bskpl-hs-tab.is-link { color: var(--bsk-m-ink); }

  /* City, Location and Property type stack one under another, so no choice is cut off ("All locations") */
  body.bsk-m-app .bskpl-hs .bskpl-hs-row-top { grid-template-columns: minmax(0, 1fr); }

  /* Closed: the bottom row shows only the Filters and Search buttons */
  body.bsk-m-app .bskpl-hs .bskpl-hs-row-bottom {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 10px;
    align-items: stretch;
  }
  body.bsk-m-app .bskpl-hs .bskpl-hs-row-bottom .bskpl-f-area,
  body.bsk-m-app .bskpl-hs .bskpl-hs-row-bottom .bskpl-f-beds,
  body.bsk-m-app .bskpl-hs .bskpl-hs-row-bottom .bskpl-f-price { display: none; }
  body.bsk-m-app .bskpl-hs .bskpl-hs-row-bottom .bskpl-hs-go { grid-column: auto; }
  body.bsk-m-app .bskpl-hs .bskpl-hs-go .bskpl-btn { min-height: 52px; font-size: 16px; font-weight: 900; }

  /* Filters button: silver at rest, green when touched or open */
  body.bsk-m-app .bsk-m-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--bsk-m-silver);
    color: var(--bsk-m-ink);
    font-family: var(--bsk-m-font);
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.bsk-m-app .bsk-m-filter-btn svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--bsk-m-khaki); }
  body.bsk-m-app .bsk-m-filter-btn:active,
  body.bsk-m-app .bsk-m-filter-btn[aria-expanded="true"] { background: var(--bsk-m-green); color: #fff; }
  body.bsk-m-app .bsk-m-filter-btn:active svg,
  body.bsk-m-app .bsk-m-filter-btn[aria-expanded="true"] svg { color: #fff; }
  body.bsk-m-app .bsk-m-filter-count {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--bsk-m-green);
    color: #fff;
    font-size: 13px;
    line-height: 22px;
    text-align: center;
  }
  body.bsk-m-app .bsk-m-filter-btn:active .bsk-m-filter-count,
  body.bsk-m-app .bsk-m-filter-btn[aria-expanded="true"] .bsk-m-filter-count { background: #fff; color: var(--bsk-m-green); }
  body.bsk-m-app .bsk-m-filter-count[hidden] { display: none; }

  /* Open: the Filters sheet rises from the bottom of the screen */
  body.bsk-m-app .bskpl-hs-form.bsk-m-sheet-open .bskpl-hs-row-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 96;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 14px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 32px rgba(16, 24, 40, .25);
  }
  body.bsk-m-app .bsk-m-sheet-head { display: none; }
  body.bsk-m-app .bskpl-hs-form.bsk-m-sheet-open .bsk-m-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    font-family: var(--bsk-m-font);
    font-size: 20px;
    font-weight: 900;
    color: var(--bsk-m-ink);
  }
  body.bsk-m-app .bskpl-hs-form.bsk-m-sheet-open .bsk-m-filter-btn { display: none; }
  body.bsk-m-app .bskpl-hs-form.bsk-m-sheet-open .bskpl-hs-row-bottom .bskpl-f-area,
  body.bsk-m-app .bskpl-hs-form.bsk-m-sheet-open .bskpl-hs-row-bottom .bskpl-f-price,
  body.bsk-m-app .bskpl-hs-form.bsk-m-sheet-open .bskpl-hs-row-bottom .bskpl-f-beds:not([hidden]) { display: block; }

  /* Close and Escape: the dim backdrop sits under the sheet and above the bottom bar */
  body.bsk-m-app .bsk-m-backdrop { display: none; }
  body.bsk-m-app .bsk-m-backdrop.on {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(16, 24, 40, .45);
  }
  html.bsk-m-sheet-lock,
  html.bsk-m-sheet-lock body { overflow: hidden; }

  body.bsk-m-app .bsk-m-sheet-close,
  body.bsk-m-app .bsk-m-dd-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 8px;
    background: var(--bsk-m-silver);
    color: var(--bsk-m-khaki);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.bsk-m-app .bsk-m-sheet-close svg,
  body.bsk-m-app .bsk-m-dd-close svg { width: 22px; height: 22px; }
  body.bsk-m-app .bsk-m-sheet-close:active,
  body.bsk-m-app .bsk-m-dd-close:active { background: var(--bsk-m-green); color: #fff; }
  /* A tap or a script focus shows no ring; keyboard users still get one */
  body.bsk-m-app .bsk-m-sheet-close:focus,
  body.bsk-m-app .bsk-m-dd-close:focus,
  body.bsk-m-app .bsk-m-filter-btn:focus { outline: none; }
  body.bsk-m-app .bsk-m-sheet-close:focus-visible,
  body.bsk-m-app .bsk-m-dd-close:focus-visible,
  body.bsk-m-app .bsk-m-filter-btn:focus-visible { outline: 2px solid var(--bsk-m-green); outline-offset: 2px; }

  /* Chips: the filters chosen so far; tap one to remove it */
  body.bsk-m-app .bsk-m-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  body.bsk-m-app .bsk-m-chips[hidden] { display: none; }
  body.bsk-m-app .bsk-m-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 38px;
    padding: 0 8px 0 14px;
    border: 0;
    border-radius: 19px;
    background: var(--bsk-m-silver);
    color: var(--bsk-m-ink);
    font-family: var(--bsk-m-font);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.bsk-m-app .bsk-m-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.bsk-m-app .bsk-m-chip svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--bsk-m-khaki); }
  body.bsk-m-app .bsk-m-chip:active { background: var(--bsk-m-green); color: #fff; }
  body.bsk-m-app .bsk-m-chip:active svg { color: #fff; }

  /* Full-screen lists for City, Location, Property type (and the other pickers in the card) */
  body.bsk-m-app .bskpl-dd.bsk-m-dd-open .bskpl-dd-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 97;
    max-height: none;
    margin: 0;
    padding: 72px 8px calc(16px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.bsk-m-app .bsk-m-dd-head { display: none; }
  body.bsk-m-app .bskpl-dd.bsk-m-dd-open .bsk-m-dd-head {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 98;
    height: 64px;
    box-sizing: border-box;
    padding: 8px max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
    background: #fff;
    border-bottom: 1px solid var(--bsk-m-line);
  }
  body.bsk-m-app .bsk-m-dd-search {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--bsk-m-line);
    border-radius: 8px;
    background: #fff;
    color: var(--bsk-m-ink);
    font-family: var(--bsk-m-font);
    font-size: 16px;
  }
  body.bsk-m-app .bsk-m-dd-search:focus { outline: 2px solid var(--bsk-m-green); outline-offset: 0; border-color: var(--bsk-m-green); }
  body.bsk-m-app .bskpl-dd-opt { min-height: 48px; padding: 12px; font-size: 16px; }
  body.bsk-m-app .bskpl-dd-opt[hidden] { display: none !important; }
  body.bsk-m-app .bskpl-dd-opt:active { background: var(--bsk-m-green); color: #fff; }
}