/* ============================================================================
   pd2-mobile.css — Mobile chrome (W7)
   OWNER: W7. No other workstream may edit this file.

   Two independent breakpoints:
     bottom bar  <=1000px  (fills the tablet gap left by W3 hiding the price card)
     top bar     <=720px   (replaces the site's mobile header, which itself
                            only exists below 767px)
   Both are display:none above their own breakpoint.
   Design source: website html/index/property-detail-v3.html  (.m-topbar / .m-sticky)

   PREFIX RULE — every selector starts with `.pd2-m-`, with FOUR documented
   exceptions (hiding shared site chrome these bars replace): one in the
   <=1000px block and three at the bottom of the <=720px block. See the
   comments on those rules.

   SPECIFICITY NOTE — pd2-tokens.css resets buttons with `.pd2-root button`
   (0,1,1) and links with `.pd2-root a` (0,1,1). A bare `.pd2-m-cta` (0,1,0)
   loses to both, so every rule that styles a <button>/<a> here is written as
   a two-class descendant (0,2,0). That is why .pd2-m-back / .pd2-m-act /
   .pd2-m-cta are scoped under their bar rather than written flat.
   `font:inherit` in that reset also pins line-height to a length, so each of
   those rules restates `line-height:1.55` to get the prototype's ratio back.
   ========================================================================== */

/* Hidden by default; each bar is switched on inside its own media query. */
.pd2-m-topbar{display:none}
.pd2-m-sticky{display:none}

/* ============================================================================
   BOTTOM BAR — shown up to 1000px, NOT 720px like the top bar.

   W3's rail hides the price card at <=1000px (the prototype does the same), but
   the bar originally only appeared at <=720px. That left 721-1000px — ordinary
   tablets — with no price and no contact CTA anywhere on the page. Raising this
   one breakpoint closes that gap; the price card stays hidden, and the bar
   takes over the moment the rail stops carrying it.

   The TOP bar deliberately stays at <=720px: its job is to replace the site's
   MOBILE header, which itself only appears below 767px. Raising it too would
   put two headers on screen between 767 and 1000px.
   ============================================================================ */
@media (max-width:1000px){
   /* --------------------------------------------------------- bottom bar -- */
   .pd2-m-sticky{
      display:flex; position:fixed; left:0; right:0; bottom:0; z-index:120;
      background:var(--pd2-bg); border-top:1px solid var(--pd2-line);
      padding:11px 16px calc(11px + env(safe-area-inset-bottom));
      gap:12px; align-items:center;
      box-shadow:0 -4px 18px rgba(26,22,20,.09);
   }
   .pd2-m-price{flex:none}
   .pd2-m-price-a{
      /* NOT var(--pd2-font-display): that token is 'Domine',Georgia,serif
         (copied from the prototype's h1/h2/h3 rule), but the prototype styles
         its price elements as 'Domine',serif. Domine ships no rupee glyph, so
         the token makes ₹ fall through to Georgia and renders the amount
         ~16px wider than the prototype. Same fix W3 applied to .pd2-r-amt. */
      font-family:'Domine',serif;
      font-size:19px; font-weight:700; line-height:1.1;
   }
   .pd2-m-price-b{font-size:11px; color:var(--pd2-ink-3)}

   /* Prototype .btn-primary with the `.m-sticky .btn-primary` overrides folded
      in (flex:1 / padding:12px / font-size:14.5px). The accent glow is not in
      pd2-tokens.css — the prototype hardcodes it on .btn-primary, so it is
      restated here rather than invented as a new token. */
   .pd2-m-sticky .pd2-m-cta{
      flex:1; width:100%;
      background:var(--pd2-accent); color:#fff;
      font-weight:600; font-size:14.5px; line-height:1.55; padding:12px;
      border-radius:var(--pd2-r-md);
      display:flex; align-items:center; justify-content:center; gap:9px;
      box-shadow:0 4px 12px rgba(255,84,3,.28);
      transition:all .15s;
      text-decoration:none;
   }
   .pd2-m-sticky .pd2-m-cta:hover{
      background:var(--pd2-accent-ink);
      box-shadow:0 6px 16px rgba(255,84,3,.34);
   }
   .pd2-m-sticky .pd2-m-cta[disabled]{opacity:.75; cursor:default}
   /* tap-to-call variant — the number can only ever be written in by the
      pd2:contact-revealed handler, never by the initial markup */
   .pd2-m-sticky .pd2-m-call{white-space:nowrap}

   /* Keep the fixed bar off the last thing on the page. The class is put on
      <body> by mobile-bars.blade.php, and only when the bottom bar rendered,
      so this stays a .pd2-m- selector instead of a bare `body{}` rule.
      74px is the prototype's body padding-bottom; the notch inset is added
      because the bar itself grows by exactly that much. */
   .pd2-m-has-bar{padding-bottom:calc(74px + env(safe-area-inset-bottom)) !important}

   /* The site tab bar is covered by our bar wherever our bar renders, so this
      guard tracks the same 1000px breakpoint. */
   .hp-preview:has(.pd2-m-sticky) .hp-bottom-nav{display:none}
}

@media (max-width:720px){

   /* ------------------------------------------------------------ top bar -- */
   /* Sticky, above page content. Rendered outside the content gate, so a
      viewer who is out of free views still gets a back arrow. */
   .pd2-m-topbar{
      display:flex; position:sticky; top:0; z-index:60;
      background:rgba(255,255,255,.94);
      -webkit-backdrop-filter:saturate(180%) blur(12px);
      backdrop-filter:saturate(180%) blur(12px);
      border-bottom:1px solid var(--pd2-line);
      align-items:center; gap:8px; padding:8px 10px;
   }

   .pd2-m-topbar .pd2-m-back{
      width:38px; height:38px; border-radius:50%;
      display:grid; place-items:center; flex:none;
      font-size:20px; line-height:1.55; padding:0;
   }
   .pd2-m-topbar .pd2-m-back:active{background:var(--pd2-bg-sunk)}

   .pd2-m-topbar-title{
      flex:1; min-width:0; font-size:14px; font-weight:600;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
   }

   .pd2-m-topbar .pd2-m-act{
      width:38px; height:38px; border-radius:50%;
      display:grid; place-items:center; flex:none;
      font-size:17px; line-height:1.55; padding:0;
      color:var(--pd2-ink-2);
      border:1px solid var(--pd2-line);
      background:var(--pd2-bg);
   }
   /* Mirrors the shared wishlist handler's .pd-fav-active — see the script in
      mobile-bars.blade.php. Prototype equivalent: .m-act.on */
   .pd2-m-topbar .pd2-m-act.pd2-m-act-on{
      color:var(--pd2-accent);
      border-color:var(--pd2-accent-line);
      background:var(--pd2-accent-soft);
   }



   /* ------------------------------------------------- shared site chrome --
      THE DOCUMENTED EXCEPTIONS to the .pd2-m- prefix rule — the only three
      selectors in this file that do not start with .pd2-m-, all of them
      hiding shared chrome that the TOP bar replaces below 720px. (The fourth,
      for .hp-bottom-nav, lives in the <=1000px block with the bottom bar.)

      This is the same decision the LIVE detail page already makes, by the
      same mechanism: responsive1.css has
          body:has(.pd-preview) .hp-header-mobile { display:none }
          body:has(.pd-preview) .hp-bottom-nav    { display:none }
      for .pd-preview, with the comment "two competing bottom bars looked
      broken". v2 needs the identical treatment, but responsive1.css is a
      never-touch file, so the rules live here instead.

        .hp-header-mobile  the mobile site header — the top bar replaces it
        .hp-app-banner     the sticky install banner above it (also rendered
                           by front/header.blade.php, position:sticky;top:0;
                           z-index:70, so it would pin over the top bar)

      Two independent safeguards keep all of this off every other page:
        1. this stylesheet is linked from detail-v2.blade.php and nowhere else
           (grep: one <link>, one file);
        2. the :has() guard cannot match unless W7's markup is in the
           document, which only ever happens on detail-v2.

      .hp-header (the desktop header) needs nothing here — responsive1.css
      already sets it to display:none below 767px, and it must come back
      above 720px, which it does. */
   .hp-preview:has(.pd2-m-topbar) .hp-header-mobile{display:none}
   .hp-preview:has(.pd2-m-topbar) .hp-app-banner{display:none}
}