/* Smart villa cards — badges, rating chip, amenity strip, quick-book.
 * Task t_470dce29. Loaded after lux.css from the layout.
 *
 * The card used to be one <a>. It is an <article> now with a stretched link,
 * because a card that carries a Book button and an enquiry link cannot be a
 * link itself. Everything here is additive: lux.css keeps owning the type,
 * the grid and the photo, and this file only positions the new pieces.
 *
 * Layout-shift rule: nothing in here changes the height of a card except its
 * own content, and the popover is position:fixed, so opening it never reflows
 * the grid.
 */

.vcard { position: relative; }
/* Stretched link: covers the card, under the controls. */
.vlink { position: absolute; inset: 0; z-index: 1; border-radius: var(--r-md); }
.vlink:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.vsr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- badges: overlay pills, max two, top-left ----------
 * t_speed01: scoped to .vcard — the villa DETAIL header also has a
 * .vbadges block, but its flow version lives in villa-premium.css. The
 * unscoped rule here applied late (deferred layer) and flipped the
 * header badges to position:absolute, collapsing the header by ~43px
 * after first paint: villa-page CLS 0.13-0.18 on 4G mobile. Inside a
 * card the absolute overlay is intended; everywhere else it isn't. */
.vcard .vbadges { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.vbadge-pill {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .24rem .55rem; border-radius: var(--r-pill);
  background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); cursor: help;
  border: 1px solid transparent; white-space: nowrap;
}
.vbadge-pill.top { background: var(--ink); color: #fff; }
.vbadge-pill.new { background: var(--ok); color: #fff; }
.vbadge-pill.pop { background: #B8460F; color: #fff; }
.vbadge-pill.rec { background: #1E6B52; color: #fff; }

/* The instant / enquiry pill moves to the photo's bottom-left so it cannot
   collide with the badge stack. */
.vmodepill { top: auto; bottom: 10px; left: 10px; }
.vmodepill.pill-inst { background: #fff; }

/* ---------- rating chip: score, word, count ---------- */
.rchip { display: inline-flex; align-items: stretch; gap: 0; flex: none; border-radius: 8px; overflow: hidden; font-size: .78rem; line-height: 1; }
.rchip .rscore { display: inline-flex; align-items: center; background: var(--ink); color: #fff; font-weight: 700; padding: .3rem .4rem; font-variant-numeric: tabular-nums; }
.rchip .rlab { display: inline-flex; align-items: center; background: var(--accent-soft); color: var(--ink); font-weight: 650; padding: .3rem .45rem; white-space: nowrap; }
.rchip .rcnt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rchip[data-lvl="exc"] .rlab { background: #DCEEDF; }
.rchip[data-lvl="verygood"] .rlab { background: #E6F0DA; }
.rchip[data-lvl="good"] .rlab { background: var(--accent-soft); }
.rchip[data-lvl="ok"] .rlab { background: #F3EEE6; }

/* ---------- amenity strip: three icons + "+N" ---------- */
.vamen { display: flex; align-items: center; gap: .3rem; margin-top: .4rem; flex-wrap: wrap; position: relative; z-index: 2; }
.vam {
  display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--ink-2);
  background: var(--accent-soft); border-radius: var(--r-pill); padding: .18rem .4rem; position: relative;
}
.vam svg { width: 16px; height: 16px; display: block; }
.vam.more { font-weight: 650; color: var(--ink); cursor: help; font: inherit; border: 0; background: var(--accent-soft); min-height: 30px; padding: .2rem .5rem; }
.vamtip {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 5; width: max-content; max-width: 220px;
  background: var(--ink); color: #fff; font-size: .72rem; line-height: 1.35;
  padding: .4rem .55rem; border-radius: 8px; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
}
.vam.more:hover .vamtip, .vam.more:focus .vamtip, .vam.more:focus-visible .vamtip, .vam.more.on .vamtip { opacity: 1; visibility: visible; }

/* ---------- actions ---------- */
.vact { display: flex; gap: .4rem; margin-top: var(--s4); position: relative; z-index: 2; }
.vbook, .vask {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px;
  font: inherit; font-size: .875rem; font-weight: 650; border-radius: var(--r-md);
  padding: .5rem .8rem; cursor: pointer; text-decoration: none; border: 1px solid transparent;
}
.vbook { flex: 1 1 auto; background: var(--accent-2); color: #fff; }
.vbook:hover { filter: brightness(1.06); }
.vbook:disabled { background: var(--line); color: var(--ink-3); cursor: not-allowed; filter: none; }
.vask { flex: 0 0 auto; background: var(--card); border-color: var(--line); color: var(--ink); }
.vask:hover { border-color: var(--ink-3); }
.vask.main { flex: 1 1 auto; background: var(--accent-2); color: #fff; border-color: transparent; }
.vwhy { margin: .4rem 0 0; font-size: .8125rem; color: var(--ink-2); line-height: 1.35; }
/* Deposit cue (t_21bf3597): percent-only line under the price. Muted like
   .vweek so it informs without competing with the price itself. */
.vdep { margin: .3rem 0 0; font-size: .75rem; color: var(--ink-3); line-height: 1.3; }

/* ---------- quick-book popover ---------- */
.qpop {
  position: fixed; z-index: 70; width: 384px; max-width: calc(100vw - 16px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 18px 48px rgba(18, 47, 42, .22); padding: var(--s4);
  overflow: auto; overscroll-behavior: contain;
}
.qpop[hidden] { display: none; }
.qhead { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.qhead strong { font-size: .95rem; line-height: 1.25; }
.qclose { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer; font-size: .85rem; }
.qguests { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; font-size: .85rem; color: var(--ink-2); }
.qguests em { font-style: normal; color: var(--ink-3); }
.qstep { display: inline-flex; align-items: center; gap: .1rem; border: 1px solid var(--line); border-radius: var(--r-pill); padding: .1rem; }
.qstep button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--card); font-size: 1rem; line-height: 1; cursor: pointer; color: var(--ink); }
.qstep button:hover { background: var(--accent-soft); }
.qstep output { min-width: 26px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.qcap { font-size: .75rem; margin: .35rem 0 0; }
.qcap[hidden] { display: none; }
.qpop .cal { margin: .5rem 0 0; }
.qfoot { margin-top: .6rem; }
.qcont { width: 100%; }
.qprov { margin: .4rem 0 0; font-size: .72rem; color: var(--ink-3); line-height: 1.4; }

/* ---------- 390px: two taps, no squeeze ---------- */
@media (max-width: 639px) {
  .vact { gap: .5rem; }
  .vbook, .vask { min-height: 44px; }
  .vam.more { min-height: 44px; padding: .35rem .6rem; }
  .qpop { border-radius: var(--r-lg); }
  .vamtip { max-width: 180px; }
}

/* Keyboard focus on the calendar cells inside the popover stays visible. */
.qpop .calx-day:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }

/* ---------- PREMIUM badge (t_badgesrate01) ----------
 * Gold, because it is the one badge the operator asked for by name and it
 * sits above Recommended/New. Dark ink on gold keeps 4.5:1; the inner light
 * ring separates it from a photo's own golds. */
.vbadge-pill.premium {
  background: linear-gradient(135deg, #F6E2B4, #E2B768);
  color: #3B2A08; border-color: #C69A45;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .45);
}

/* ---------- team rating chip ----------
 * Our own 1–5, visible on the card, in the quick-book popover and in the villa
 * header. Half stars are one filled star clipped to its left half, so the row
 * reads 4,5 at a glance without a gradient id per card. */
.vchips { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.vteam {
  display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .5rem;
  border-radius: var(--r-pill); background: rgba(18, 20, 24, .86); color: #fff;
  font-size: .66rem; line-height: 1.3; box-shadow: var(--shadow-sm); cursor: help;
}
.vteam .strow { display: inline-flex; gap: 1px; }
.vteam .stv { position: relative; display: inline-block; }
.vteam .stv svg { width: 11px; height: 11px; display: block; color: #EAC97F; }
.vteam .stv.off svg { color: rgba(255, 255, 255, .45); }
.vteam .stv.half b { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.vteam .vscore { font-weight: 800; font-size: .72rem; font-variant-numeric: tabular-nums; }
.vteam .vteamlab { opacity: .8; font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; }
.vbadges .vteam.lg { font-size: .72rem; padding: .24rem .6rem; }
.vbadges .vteam.lg .stv svg { width: 13px; height: 13px; }
.qrate { display: flex; justify-content: flex-end; margin: .3rem 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .vteam { transition: background .15s ease; }
  .vteam:hover { background: rgba(18, 20, 24, .96); }
}