/* ============================================================================
 * c4r-swipe-deck.css — DESIGN A "The Deck" (2026-07-13).
 * Loaded ONLY by aptraps-swipe.pl. The live page never sees this file.
 * Palette is Design A's: navy #1b2a4a / orange #f37021
 * (mockup: All Markets/test/design-a-swipe-deck.html).
 * ========================================================================== */

/* ---- rate chips: the strip renters came for, FIRST under the address ---- */
.c4r-rates{display:flex;gap:8px;padding:10px 14px 2px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.c4r-rates::-webkit-scrollbar{display:none}
.c4r-rate{flex:none;background:#fff;border:1.5px solid #1b2a4a;border-radius:10px;
  padding:8px 12px;text-align:center;min-width:96px;text-decoration:none;line-height:1.2}
/* on the phone, ALL bed types fit the row -- no chip lost off the right edge:
   chips share the width equally instead of scrolling */
@media(max-width:767px){
  .c4r-rates{gap:6px;padding:10px 12px 2px;overflow:visible}
  .c4r-rate{flex:1 1 0;min-width:0;max-width:130px;padding:7px 4px}
  .c4r-rate b{font-size:15px;white-space:nowrap}
  .c4r-rate i{font-size:10.5px;white-space:nowrap}
}
@media(max-width:374px){       /* SE-class screens: four chips still fit */
  .c4r-rate b{font-size:13px}
  .c4r-rate i{font-size:10px}
}
.c4r-rate:hover,.c4r-rate:focus,.c4r-rate:active{text-decoration:none}
.c4r-rate b{display:block;font-size:16px;color:#1b2a4a}
.c4r-rate i{font-style:normal;font-size:11px;color:#6b7385}
/* 2026-07-20 Dave's call: ALL chips white -- the navy "hot" first-chip
   inversion is retired; .c4r-rate-hot now renders same as the base chip
   (class stays in the markup for an easy revert). */
.c4r-rate-hot{background:#fff;border-color:#1b2a4a}
.c4r-rate-hot b{color:#1b2a4a}
.c4r-rate-hot i{color:#6b7385}
.c4r-rates-asof{font-size:10px;color:#9fb0cc;padding:2px 14px 6px}

/* ---- pinned swipe bar (mobile only) ---- */
#c4r-swipe-bar{position:fixed;left:10px;right:10px;bottom:12px;z-index:1060;
  background:#1b2a4a;color:#fff;border-radius:14px;padding:10px 12px;
  display:flex;align-items:center;gap:10px;box-shadow:0 8px 24px rgba(0,0,0,.35);
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
@media(min-width:768px){#c4r-swipe-bar{display:none !important}}
#c4r-swipe-bar .c4rsd-thumb{width:44px;height:44px;border-radius:9px;flex:none;
  background:#24365c center/cover no-repeat}
#c4r-swipe-bar .c4rsd-info{flex:1;min-width:0}
#c4r-swipe-bar .c4rsd-lbl{font-size:10px;letter-spacing:.8px;color:#f37021;font-weight:700}
#c4r-swipe-bar .c4rsd-nm{font-size:14px;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
#c4r-swipe-bar .c4rsd-meta{font-size:11px;color:#c9d2e6}
#c4r-swipe-bar .c4rsd-chev{display:flex;flex:none}
#c4r-swipe-bar .c4rsd-chev b{font-size:20px;color:#f37021;opacity:.25;font-weight:700;
  line-height:1;animation:c4rsd-nudge 1.4s infinite}
#c4r-swipe-bar .c4rsd-chev b:nth-child(2){animation-delay:.15s}
#c4r-swipe-bar .c4rsd-chev b:nth-child(3){animation-delay:.3s}
@keyframes c4rsd-nudge{0%,100%{opacity:.25;transform:translateX(0)}
  50%{opacity:1;transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){#c4r-swipe-bar .c4rsd-chev b{animation:none;opacity:.8}}

/* when the bar is live: the old sticky CTA yields (one pinned element, not two),
   and the content gets breathing room above the bar */
body.c4r-deck-on #c4r-sticky-cta{display:none !important}
@media(max-width:767px){body.c4r-deck-on #main-content{padding-bottom:76px}}

/* ---- reclaim the first screen (Dave, 2026-07-13 pm) ----
   the photos CTA was half-buried under the bar. Three moves:
   1. the bar sits FLUSH on the screen bottom, full width
   2. the name/address/chips stack tightens up
   3. (the backdrop measures the live page, so it follows automatically) */
@media(max-width:767px){
  #c4r-swipe-bar{left:0;right:0;bottom:0;border-radius:14px 14px 0 0;
    padding:9px 12px 11px}
  #c4r-deck-peek{bottom:66px}
  body.c4r-deck-on #property-info h1{font-size:19px !important;
    padding:5px 12px 0 12px !important}
  body.c4r-deck-on #property-address{font-size:12.5px !important;
    padding:0 12px 2px 12px !important}
  body.c4r-deck-on .c4r-rates{padding:6px 12px 2px;justify-content:center}
  body.c4r-deck-on .c4r-rate{padding:5px 4px}
  body.c4r-deck-on .c4r-rate b{font-size:14px}
  body.c4r-deck-on .c4r-rates-asof{padding:1px 12px 3px;text-align:center}
  body.c4r-deck-on #main-photo .mobile-view-switcher-wrap{padding:0 0 5px 0 !important}
  /* crop the hero a touch (cover keeps it composed) so the Google-rating
     pill clears the bar instead of peeking out half-beheaded */
  body.c4r-deck-on #property-photos-panel img{max-height:52vh;width:100%;object-fit:cover}
  /* the Google rating: shrunk, top-LEFT corner of the photo (Dave, second
     pass). width:max-content beats the panel's own full-width styling --
     that stretch is why the first overlay attempt rendered top-center. */
  body.c4r-deck-on #main-photo{position:relative}
  body.c4r-deck-on #google-rating-panel{position:absolute;top:58px;left:10px;
    right:auto;width:max-content;max-width:70vw;z-index:6;margin:0}
  body.c4r-deck-on #google-rating-panel .google-rating-link{font-size:11px;
    padding:4px 9px}
  body.c4r-deck-on #google-rating-panel .google-rating-link span{font-size:11px}
}

/* ---- the next card's edge, peeking from the right (mobile only) ---- */
#c4r-deck-peek{position:fixed;top:56px;bottom:84px;right:0;width:10px;z-index:1055;
  background:#fff;border-radius:14px 0 0 14px;box-shadow:-6px 0 18px rgba(0,0,0,.35);
  overflow:hidden;display:none;pointer-events:none;
  transition:width .18s ease-out}
@media(min-width:768px){#c4r-deck-peek{display:none !important}}
#c4r-deck-peek .c4rsd-peek-hero{position:absolute;top:0;left:0;bottom:0;width:120px;
  background:#24365c center/cover no-repeat;opacity:.92}
#c4r-deck-peek .c4rsd-peek-nm{position:absolute;left:8px;right:8px;bottom:8px;
  font:700 12px/1.3 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}

/* ---- the card physics (from nearby-swipe-PROTOTYPE.html) ---- */
/* the backdrop the toss reveals wears the SAME dusk navy as the page column
   (#243356, the mobile dusk pass) -- the card moves, the world doesn't change */
@media(max-width:767px){
  body.c4r-deck-on{background:#243356 !important}
  body.c4r-deck-on .c4r-main-row{background:#243356 !important}
  /* the card must paint ABOVE the destination backdrop */
  body.c4r-deck-on #main-content{position:relative;z-index:2}
}

/* ---- the destination, already behind the card ---- */
/* a lookalike of the next page's first screen (name / rent+distance / hero,
   all from tour data, hero pre-warmed by prefetch) so the toss reveals the
   next property instead of a blank pause. NOT an iframe -- a live copy of the
   real page would fire phantom property_view beacons and billable map calls. */
#c4r-deck-backdrop{position:fixed;top:46px;left:0;right:0;bottom:0;z-index:1;
  display:none;background:#243356;padding:10px 0 0;overflow:hidden}
@media(min-width:768px){#c4r-deck-backdrop{display:none !important}}
#c4r-deck-backdrop .c4rsd-bd-nm{font-family:'Fraunces',Georgia,serif;
  font-size:20px;font-weight:700;color:#fff;padding:8px 14px 2px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#c4r-deck-backdrop .c4rsd-bd-meta{font-size:13px;color:#c9d2e6;padding:0 14px 10px}
#c4r-deck-backdrop .c4rsd-bd-hero{margin:0 12px;height:255px;border-radius:8px;
  background:#16213a center/cover no-repeat}
/* the page IS the card: tracks the finger 1:1, banks into the turn around a
   low pivot, and flies off on commit while the next card's edge sweeps in */
@media(max-width:767px){#main-content{transform-origin:50% 85%}}
#main-content.c4rsd-dragging{transition:none !important}
#main-content.c4rsd-settling{transition:transform .2s ease-out !important}
#main-content.c4rsd-fly{transition:transform .26s ease-out,opacity .26s ease-out !important}

/* (the SAVE/PASS-style stamp is gone -- the measured backdrop names the
   destination now, and the pill was sitting on top of it.) */

/* ---- the credential nobody else can claim (Dave, 2026-07-13) ---- */
.c4r-since{font-size:11.5px;color:#9fb0cc;text-align:center;
  padding:6px 12px 4px;letter-spacing:.02em}

/* ============================================================================
 * FAVORITES (2026-07-17-favs1). Heart on the hero, count pill, bottom-sheet
 * tray. Same Design-A palette. Injected by c4r-swipe-deck.js only.
 * ========================================================================== */

/* heart: photo's top-right corner, clear of the backdrop reveal */
#c4rfav-heart{position:absolute;top:10px;right:10px;z-index:40;width:40px;height:40px;
  border-radius:50%;border:0;background:rgba(12,21,36,.55);color:#fff;font-size:21px;
  line-height:40px;text-align:center;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;backdrop-filter:blur(2px)}
#c4rfav-heart .c4rfav-fill{display:none}
#c4rfav-heart.c4rfav-on span{display:none}
#c4rfav-heart.c4rfav-on .c4rfav-fill{display:inline;color:#f37021}
#c4rfav-heart:active{transform:scale(1.12)}

/* count pill: bottom-left, above the swipe bar's lane */
#c4rfav-pill{position:fixed;left:10px;bottom:84px;z-index:1059;display:none;
  align-items:center;gap:6px;border:1.5px solid #f37021;border-radius:999px;
  background:#1b2a4a;color:#fff;padding:7px 12px;font-size:13px;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.3);-webkit-tap-highlight-color:transparent}
body:not(.c4r-deck-on) #c4rfav-pill{bottom:14px}   /* no bar -> hug the edge */
@media(min-width:768px){#c4rfav-pill{bottom:14px}}
#c4rfav-pill .c4rfav-pill-h{color:#f37021;font-size:15px}
#c4rfav-pill .c4rfav-pill-n{font-weight:700}
#c4rfav-pill .c4rfav-pill-t{color:#c9d2e6}

/* tray: scrim + bottom sheet */
#c4rfav-tray{display:none;position:fixed;inset:0;z-index:1100}
#c4rfav-tray .c4rfav-scrim{position:absolute;inset:0;background:rgba(9,14,24,.55)}
#c4rfav-tray .c4rfav-sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;
  border-radius:16px 16px 0 0;max-height:72vh;display:flex;flex-direction:column;
  padding:0 0 max(12px,env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.35)}
@media(min-width:768px){#c4rfav-tray .c4rfav-sheet{left:auto;right:24px;bottom:24px;
  width:380px;border-radius:16px}}
.c4rfav-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 10px;color:#1b2a4a;font-size:16px}
.c4rfav-x{border:0;background:none;font-size:26px;line-height:1;color:#6b7385;
  cursor:pointer;padding:0 2px}
.c4rfav-list{overflow-y:auto;padding:0 10px;flex:1 1 auto}
.c4rfav-row{display:flex;align-items:center;gap:10px;padding:8px 6px;
  border-top:1px solid #eef1f6;cursor:pointer}
.c4rfav-th{width:52px;height:44px;border-radius:8px;flex:none;
  background:#16213a center/cover no-repeat}
.c4rfav-tx{flex:1 1 auto;min-width:0}
.c4rfav-nm{font-size:14px;font-weight:600;color:#1b2a4a;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.c4rfav-mt{font-size:12px;color:#6b7385;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.c4rfav-rm{border:0;background:none;color:#9aa4b8;font-size:22px;line-height:1;
  cursor:pointer;padding:4px 6px;flex:none}
.c4rfav-cta{display:none;margin:10px 14px 6px;background:#f37021;color:#fff;
  text-align:center;border-radius:12px;padding:13px 10px;font-size:15px;
  font-weight:700;text-decoration:none}
.c4rfav-cta:hover,.c4rfav-cta:focus{color:#fff;text-decoration:none;background:#e0651c}
.c4rfav-sub{font-size:11.5px;color:#6b7385;text-align:center;padding:0 16px 10px}