/* browse.css — shared styles for the property browse grid (browse.js).
 * Extracted from vacation-rentals.html so book.simplyhome.us's guest index and the
 * main-site browse share one look. Depends on shared.css design tokens.
 * (vacation-rentals.html still carries its own inline copy for now; dedupe later.) */

/* FILTER BAR */
.filter-bar { position:sticky; top:82px; z-index:50; background:rgba(13,17,25,0.97); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid transparent; border-image:linear-gradient(90deg, transparent, var(--gold), transparent) 1; padding:1.2rem 4vw; display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.filter-label { font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--sage); white-space:nowrap; margin-right:0.25rem; }
.filter-btn { padding:0.5rem 1.05rem; border:1px solid var(--gold-line); background:transparent; color:var(--sage); font-size:0.78rem; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; cursor:pointer; transition:all 0.18s; font-family:var(--body); white-space:nowrap; border-radius:999px; }
.filter-btn:hover, .filter-btn.active { border-color:var(--gold); color:var(--parchment); background:rgba(201,169,110,0.1); }
.filter-right { margin-left:auto; display:flex; align-items:center; gap:0.75rem; }
.filter-count { font-size:0.76rem; color:var(--sage); white-space:nowrap; }

/* FILTER BAR, DATE-SEARCH VARIANT (.filter-bar.has-dates) — the ONE grouped
   sticky bar from vacation-rentals.html (Elec's 2026-07-26 spec, ported for the
   guest booking home): labels row on top ("Stay dates" far left · "Amenities
   filter" above the All button · the count at the right end), controls row
   beneath (date box on the same line as the chips). Mobile stacks. */
.filter-bar.has-dates { display:grid; grid-template-columns:auto 1fr; column-gap:1.5rem; row-gap:0.55rem; align-items:center; padding:1rem 4vw 1.1rem; }
.fb-datelabel { grid-column:1; grid-row:1; }
.fb-labelrow { grid-column:2; grid-row:1; display:flex; align-items:baseline; justify-content:space-between; gap:0.75rem; }
.fb-datecell { grid-column:1; grid-row:2; display:flex; align-items:center; gap:0.6rem; }
.fb-chips { grid-column:2; grid-row:2; display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }

/* ONE-DROPDOWN DATE-RANGE PICKER (dr-*) — flyout v2 (2026-07-30, Elec: "sleek and
   elegant… mini super modal calendar fly out"). Desktop: two-month spread anchored
   to the field, dimming veil behind. Mobile: centered modal. Range endpoints are
   gold circles, the span a soft band, today gets a dot, and hovering a checkout
   date previews the span (.pre, set by browse.js). Entrance animations are killed
   by shared.css's global prefers-reduced-motion block. */
.dr-wrap { position:relative; }
.date-field { min-width:220px; text-align:left; padding:0.55rem 0.9rem; background:var(--forest); border:1px solid var(--gold-line); border-radius:var(--radius-sm); color:var(--sage); font-family:var(--body); font-size:0.85rem; cursor:pointer; transition:border-color 0.18s, color 0.18s, box-shadow 0.18s; }
.date-field:hover, .date-field[aria-expanded="true"] { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,169,110,0.12); }
.date-field.has-dates { color:var(--parchment); }
.dr-veil { position:fixed; inset:0; z-index:58; background:rgba(13,17,25,0.45); -webkit-backdrop-filter:blur(2.5px); backdrop-filter:blur(2.5px); animation:drFade 0.25s ease; }
.dr-pop { position:absolute; top:calc(100% + 10px); left:0; z-index:60; background:linear-gradient(165deg, #131926 0%, var(--forest) 55%); border:1px solid var(--gold-border); border-radius:16px; padding:1.15rem 1.3rem 0.9rem; box-shadow:0 1px 0 rgba(201,169,110,0.18) inset, 0 18px 55px rgba(0,0,0,0.6), 0 4px 14px rgba(0,0,0,0.4); animation:drIn 0.42s cubic-bezier(0.34,1.56,0.64,1); }
/* Back-out curve overshoots then settles — the "bounce / breathe" Elec asked for
   (review round 1, 2026-07-30). */
@keyframes drIn { from { opacity:0; transform:translateY(-12px) scale(0.94); } to { opacity:1; transform:none; } }
@keyframes drFade { from { opacity:0; } to { opacity:1; } }
.dr-cols { display:flex; gap:1.6rem; }
.dr-cal { width:238px; }
.dr-month { font-family:var(--display); font-style:italic; font-size:1.05rem; letter-spacing:0.03em; color:var(--parchment); text-align:center; margin-bottom:0.6rem; }
.dr-arrow { position:absolute; top:1.05rem; background:none; border:1px solid var(--gold-line); border-radius:50%; width:1.8rem; height:1.8rem; color:var(--sage); font-size:1.05rem; line-height:1; cursor:pointer; transition:all 0.18s; z-index:2; }
.dr-prev { left:1.1rem; }
.dr-next { right:1.1rem; }
.dr-arrow:hover:not(:disabled) { border-color:var(--gold); color:var(--gold); transform:scale(1.08); }
.dr-arrow:disabled { opacity:0.3; cursor:default; }
.dr-dow { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:0.58rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); opacity:0.75; margin-bottom:0.3rem; }
.dr-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.dr-cell { position:relative; aspect-ratio:1; border:none; background:transparent; color:var(--parchment); font-family:var(--body); font-size:0.78rem; cursor:pointer; transition:background 0.13s, color 0.13s, transform 0.24s cubic-bezier(0.34,1.56,0.64,1); border-radius:50%; }
/* Press a date: quick soft deflate; release: the springy transition above
   reinflates with a slight overshoot — breath out / breath in (review round 2). */
.dr-cell:active:not(:disabled) { transform:scale(0.88); transition-duration:0.08s; transition-timing-function:ease; }
.dr-cell:hover:not(:disabled):not(.sel) { background:rgba(201,169,110,0.16); }
.dr-cell:disabled { color:rgba(146,154,160,0.3); cursor:default; }
/* Endpoints: translucent gold circle (Elec: "more see through"), drawn as a
   radial gradient so the range band can pass UNDERNEATH on the inner half —
   no hard band ends butting against the circles (review round 1). */
.dr-cell.sel { background:rgba(201,169,110,0.72); color:var(--forest); font-weight:700; }
.dr-cell.sel-start { border-radius:0; background:radial-gradient(circle closest-side, rgba(201,169,110,0.72) 0 99%, transparent 100%), linear-gradient(90deg, transparent 50%, rgba(201,169,110,0.13) 50%); }
.dr-cell.sel-end { border-radius:0; background:radial-gradient(circle closest-side, rgba(201,169,110,0.72) 0 99%, transparent 100%), linear-gradient(90deg, rgba(201,169,110,0.13) 50%, transparent 50%); }
.dr-cell.mid, .dr-cell.pre { background:rgba(201,169,110,0.13); border-radius:0; }
.dr-cell.pre { background:rgba(201,169,110,0.08); }
.dr-cell.tdy::after { content:""; position:absolute; left:50%; bottom:4px; width:3px; height:3px; margin-left:-1.5px; border-radius:50%; background:var(--gold); }
.dr-cell.sel.tdy::after { background:var(--forest); }
.dr-hint { margin-top:0.65rem; padding-top:0.55rem; border-top:1px solid rgba(201,169,110,0.18); font-size:0.68rem; letter-spacing:0.06em; color:var(--sage); text-align:center; min-height:1em; }
.date-clear { background:none; border:none; color:var(--gold); font-size:0.76rem; cursor:pointer; font-family:var(--body); text-decoration:underline; white-space:nowrap; }
.date-msg { font-size:0.76rem; color:var(--sage); }
.date-msg.err { color:#e8b9ad; }
@media (max-width:700px){
  .date-field { min-width:170px; font-size:16px; }
  .dr-pop { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(330px, 94vw); animation:drInM 0.42s cubic-bezier(0.34,1.56,0.64,1); }
  @keyframes drInM { from { opacity:0; transform:translate(-50%,-44%) scale(0.92); } to { opacity:1; transform:translate(-50%,-50%); } }
  .dr-cols { display:block; }
  .dr-cal { width:100%; }
}

/* GUESTS + PETS control (search-redesign P-C, 2026-08-13) — same visual grammar
   as the date field/popover: forest ground, gold-line borders, the drIn
   bounce-in. Lives inside .fb-datecell beside .dr-wrap. */
.gp-wrap { position:relative; }
.gp-field { min-width:120px; }
.gp-field.has-value { color:var(--parchment); }
.gp-pop { position:absolute; top:calc(100% + 10px); left:0; z-index:60; min-width:238px; background:linear-gradient(165deg, #131926 0%, var(--forest) 55%); border:1px solid var(--gold-border); border-radius:16px; padding:1rem 1.15rem; box-shadow:0 1px 0 rgba(201,169,110,0.18) inset, 0 18px 55px rgba(0,0,0,0.6), 0 4px 14px rgba(0,0,0,0.4); animation:drIn 0.42s cubic-bezier(0.34,1.56,0.64,1); }
.gp-row { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:0.35rem 0; }
.gp-petrow { cursor:pointer; }
.gp-name { color:var(--sage); font-size:0.88rem; }
.gp-step { display:flex; align-items:center; gap:0.65rem; }
.gp-step button { background:none; border:1px solid var(--gold-line); border-radius:50%; width:1.8rem; height:1.8rem; color:var(--sage); font-size:1.05rem; line-height:1; cursor:pointer; transition:all 0.18s; }
.gp-step button:hover:not(:disabled) { border-color:var(--gold); color:var(--gold); transform:scale(1.08); }
.gp-step button:disabled { opacity:0.3; cursor:default; }
#gpVal { min-width:2.2rem; text-align:center; color:var(--parchment); font-size:0.9rem; }
#gpPet { accent-color:var(--gold); width:1.05rem; height:1.05rem; cursor:pointer; }
@media (max-width:768px) {
  .gp-pop { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(300px, 92vw); animation:drInM 0.42s cubic-bezier(0.34,1.56,0.64,1); }
}

/* STAGED CARD PRICING (P-B): teaser -> per-stay -> fee-included pre-tax total. */
.card-price { display:block; color:var(--sage); font-size:0.82rem; letter-spacing:0.01em; margin-right:auto; }
.card-price strong { color:var(--gold); font-size:1.02rem; font-weight:600; }

/* ── SPLIT VIEW + MAP (rebuild P-E/P-D, 2026-08-14) — mirror of the inline
   block in vacation-rentals.html, which WINS there by load order (lockstep
   rule). book-home has no inline copy so these rules govern it if a map is
   ever added there; today only /vacation-rentals carries #gmap markup. */
.browse-map-panel { display:none; }
#gmap { width:100%; height:100%; background:var(--forest); }
.map-toggle { position:fixed; left:50%; transform:translateX(-50%); bottom:1.4rem; z-index:72; background:var(--gold); color:#131926; border:none; border-radius:999px; padding:0.7rem 1.6rem; font-family:var(--body); font-weight:600; font-size:0.9rem; letter-spacing:0.06em; box-shadow:0 8px 28px rgba(0,0,0,0.5); cursor:pointer; transition:transform 0.18s; }
.map-toggle:hover { transform:translateX(-50%) scale(1.06); }
@media(min-width:1025px) {
  .map-toggle { display:none; }
  .browse-split { display:grid; grid-template-columns:minmax(0,56%) minmax(0,44%); align-items:start; }
  .browse-map-panel { display:block; position:sticky; top:118px; height:calc(100vh - 118px); border-left:1px solid var(--gold-line); }
}
@media(max-width:1024px) {
  body.map-open .browse-map-panel { display:block; position:fixed; inset:0; z-index:70; height:100vh; height:100dvh; }
}
.map-pill { background:var(--gold); color:#131926; font-family:var(--body); font-weight:700; font-size:0.8rem; padding:0.28rem 0.65rem; border-radius:999px; border:2px solid #131926; box-shadow:0 3px 10px rgba(0,0,0,0.45); cursor:pointer; transition:transform 0.16s ease-out; will-change:transform; }
.map-pill.swell { transform:scale(1.3); }
.map-pill.bounce { animation:pillBounce 0.55s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes pillBounce { 0% { transform:scale(1); } 40% { transform:scale(1.28) translateY(-4px); } 100% { transform:scale(1); } }
.prop-card.map-hi { border-color:var(--gold); box-shadow:0 0 28px rgba(201,169,110,0.28), 0 22px 58px rgba(13,17,25,0.65); transform:translateY(-4px); }

/* GRID */
.browse-section { padding:4.5rem 4vw 3.5rem; }
.browse-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2.9rem; }

/* CARD (an <a> link to the property's /stay page) */
.prop-card { background:var(--pine); cursor:pointer; border:2px solid var(--gold-border); border-radius:var(--radius); overflow:hidden; position:relative; z-index:1; transition:transform 0.5s var(--ease-out), border-color 0.35s, box-shadow 0.5s var(--ease-out); display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.prop-card:hover { transform:translateY(-8px) scale(1.035); border-color:var(--gold); z-index:3; box-shadow: 0 0 28px rgba(201,169,110,0.18), 0 22px 58px rgba(13,17,25,0.65); }
.prop-card:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.prop-card.hidden { display:none; }
.card-img { aspect-ratio:16/10; overflow:hidden; position:relative; background:var(--mist); flex-shrink:0; }
.card-img img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(0.96) brightness(0.96); transition:filter 1.1s var(--ease-out); }
.prop-card:hover .card-img img { filter:saturate(1.06) brightness(1.07) contrast(1.03); }
.card-badges { position:absolute; top:0.6rem; left:0.6rem; display:flex; gap:0.3rem; flex-wrap:wrap; z-index:2; }
.card-badge { background:rgba(13,17,25,0.88); border:1px solid var(--gold-line); padding:0.24rem 0.6rem; font-size: 0.75rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); border-radius:var(--radius-sm); }
.card-body { padding:1.5rem 1.65rem 1.75rem; flex:1; display:flex; flex-direction:column; }
.card-location-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.4rem; }
.card-location { font-size:0.8rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-bottom:0; }
.card-rating { display:flex; align-items:center; gap:0.2rem; font-size:0.78rem; color:var(--parchment); font-weight:600; white-space:nowrap; }
.card-star { color:var(--gold); font-size:0.82rem; }
.card-review-count { color:var(--sage); font-weight:400; font-size: 0.75rem; margin-left:0.1rem; }
.card-desc { font-size:0.8rem; color:var(--sage); line-height:1.5; margin:0.4rem 0 0.7rem; display:-webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient:vertical; overflow:hidden; }
.card-name { font-family:var(--display); font-size:1.44rem; font-weight:600; color:var(--parchment); line-height:1.2; margin-bottom:0.6rem; }
.card-meta { display:flex; gap:0.75rem; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--sage); margin-bottom:0.65rem; flex-wrap:wrap; }
.card-meta strong { color:var(--parchment); }
.card-footer { display:flex; align-items:center; justify-content:space-between; padding-top:0.75rem; border-top:1px solid transparent; border-image:linear-gradient(90deg, transparent, var(--gold), transparent) 1; margin-top:auto; }
.card-book { font-size:0.77rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); transition:letter-spacing 0.2s; }
.prop-card:hover .card-book { letter-spacing:0.18em; }

/* PAGINATION */
.pagination { display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:2.5rem 4vw 4rem; }
.page-btn { width:44px; height:44px; border:1px solid var(--gold-line); background:transparent; color:var(--sage); font-size:0.82rem; cursor:pointer; transition:all 0.18s; font-family:var(--body); display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); }
.page-btn:hover, .page-btn.active { border-color:var(--gold); color:var(--parchment); background:rgba(201,169,110,0.1); }
.page-btn:disabled { opacity:0.3; cursor:default; }
.page-arrow { font-size:1rem; }

/* NO RESULTS */
.no-results { display:none; text-align:center; padding:5rem 2rem; }
.no-results.visible { display:block; }
.no-results p { font-family:var(--display); font-style:italic; font-size:1.4rem; color:var(--sage); }

/* LOADING */
.loading-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6rem 2rem; gap:1.5rem; grid-column:1/-1; }
.loading-spinner { width:36px; height:36px; border:2px solid var(--gold-line); border-top-color:var(--gold); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { font-family:var(--display); font-style:italic; font-size:1rem; color:var(--sage); }

/* RESPONSIVE */
@media(max-width:1024px) { .browse-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:768px) {
  .browse-grid { grid-template-columns:1fr; }
  .filter-bar { padding:0.85rem 4vw; gap:0.4rem; }
  .filter-btn { font-size:0.68rem; padding:0.32rem 0.65rem; }
  /* Date-search variant stacks to a single column on mobile (same as the
     vacation-rentals original): label, date box, chip label+count, chips. */
  .filter-bar.has-dates { row-gap:0.45rem; column-gap:0; grid-template-columns:1fr; }
  .filter-bar.has-dates .fb-datelabel { grid-column:1; grid-row:1; }
  .filter-bar.has-dates .fb-datecell { grid-column:1; grid-row:2; }
  .filter-bar.has-dates .fb-labelrow { grid-column:1; grid-row:3; }
  .filter-bar.has-dates .fb-chips { grid-column:1; grid-row:4; gap:0.4rem; }
}