/* ==========================================================
   Venue Dekho — vendor profile page
   Loaded only on /venue/{slug}. Tokens come from theme.css.
   ========================================================== */

/* ---------- Hero gallery ---------- */
.vd-profile-hero { padding: 1.25rem 0 0; }
.vd-hero-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: .55rem;
  height: 420px;
  border-radius: 16px;
  overflow: hidden;
}
.vd-hero-side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .55rem; }
/* The side column adapts to how many photos a venue actually has, so a
   listing with two pictures fills its space instead of showing blank tiles. */
.vd-hero-grid-solo { grid-template-columns: 1fr; }
.vd-hero-side[data-count="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.vd-hero-side[data-count="2"] { grid-template-columns: 1fr; }
.vd-hero-side[data-count="3"] .vd-hero-cell:first-child { grid-column: 1 / -1; }
.vd-hero-main, .vd-hero-cell {
  position: relative; padding: 0; border: 0; overflow: hidden;
  background: var(--vd-brand-tint); cursor: pointer; display: block;
}
.vd-hero-main img, .vd-hero-cell img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.vd-hero-main:hover img, .vd-hero-cell:hover img { transform: scale(1.045); }
.vd-hero-cell[disabled] { cursor: default; }
.vd-hero-more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(30, 12, 18, .58); color: #fff; font-weight: 600; font-size: .95rem;
}
.vd-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--vd-brand); opacity: .3; font-size: 2.6rem;
}
.vd-placeholder.sm { font-size: 1.3rem; }
.vd-ribbon {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--vd-brand); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: 6px;
}
.vd-hero-grid { position: relative; }
/* Sits over the main image, so it never collides with the "+N photos"
   overlay on the last thumbnail. */
.vd-viewall {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 3;
  border-radius: 8px; font-weight: 600; box-shadow: var(--vd-shadow-lg);
}
@media (max-width: 991px) {
  .vd-hero-grid { grid-template-columns: 1fr; height: auto; }
  .vd-hero-main { height: 260px; }
  .vd-hero-side { grid-template-rows: 92px; }
  /* Below the grid on small screens, so it never sits over a thumbnail. */
  .vd-viewall { position: static; display: block; width: 100%; margin-top: .6rem; }
}

/* ---------- Title bar ----------
   A card lifted over the foot of the gallery, so the page opens with one
   object — picture and identity together — instead of a headline floating on
   the background under a photograph. */
.vd-profile-head { position: relative; z-index: 2; margin-top: -3rem; padding: 0 0 1.25rem; }
.vd-profile-card {
  background: #fff;
  border: 1px solid var(--vd-line);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(36, 26, 30, .07);
  padding: 1.4rem 1.5rem 1.2rem;
}
.vd-profile-title {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 500;
  margin: 0; line-height: 1.15;
  letter-spacing: -.01em;
}
/* The score, where the reference puts it: top right of the card, as one chip a
   couple can read at a glance rather than a row of small stars.
   NB: this used to share its class with the big number in the reviews summary
   further down, and that rule — 3.3rem of display type — won here too, which
   is how a compact chip became a green block with "4·7" in it. */
.vd-score {
  display: inline-flex; align-items: center; gap: .3rem;
  background: #1f9d6b; color: #fff;
  border-radius: 8px; padding: .32rem .6rem;
  font-size: 1rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.vd-score:hover { background: #178056; color: #fff; }
.vd-score i { font-size: .78rem; opacity: .95; }
.vd-score-note { display: block; margin-top: .35rem; font-size: .8rem; color: var(--vd-muted); }
/* Below the two-column header the score is no longer in a column of its own,
   so the count reads on the same line instead of as a caption under a chip. */
@media (max-width: 991.98px) {
  .vd-profile-rating { display: flex; align-items: center; gap: .55rem; margin-top: .9rem; }
  .vd-score-note { margin-top: 0; }
}
.vd-profile-address { font-size: .9rem; color: var(--vd-muted); margin: .35rem 0 0; }
/* The buttons sit on their own strip at the foot of the card, split off by a
   rule — four of them wrapped under a long name otherwise. */
.vd-profile-actions {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1.1rem; padding-top: .95rem;
  border-top: 1px solid var(--vd-line);
}
.vd-profile-tagline { color: var(--vd-muted); font-size: 1rem; }
.vd-chip-cat, .vd-chip-verified, .vd-chip-soft {
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px;
}
.vd-chip-cat      { background: var(--vd-brand); color: #fff; }
.vd-chip-verified { background: #e4f6ee; color: #14764f; }
.vd-chip-verified.sm { font-size: .66rem; padding: .15rem .5rem; text-transform: none; }
.vd-chip-soft     { background: var(--vd-brand-soft); color: var(--vd-brand-darker); }
.vd-stars { color: var(--vd-gold); letter-spacing: .06em; white-space: nowrap; }
.vd-rating-inline { color: var(--vd-ink); }

/* ---------- Sticky sub-nav ---------- */
.vd-subnav {
  /* The header is 56px on a phone and 67px from xl up; 79px was left over from
     a taller one and showed a band of page between the two. */
  position: sticky; top: 56px; z-index: 20;
  background: #fff; border-top: 1px solid var(--vd-line); border-bottom: 1px solid var(--vd-line);
}
.vd-subnav ul {
  display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.vd-subnav ul::-webkit-scrollbar { display: none; }
.vd-subnav a {
  display: block; padding: .95rem .95rem; font-size: .88rem; font-weight: 500;
  letter-spacing: .03em;
  color: var(--vd-body); white-space: nowrap; border-bottom: 3px solid transparent;
}
.vd-subnav a:hover  { color: var(--vd-brand); }
.vd-subnav a.active { color: var(--vd-brand); border-bottom-color: var(--vd-brand); }
@media (min-width: 1200px) { .vd-subnav { top: 67px; } }

/* ---------- Body blocks ----------
   Each section is its own card on a tinted page. They used to be separated by
   a hairline on white, which left eight sections reading as one long column of
   text with headlines in it — the "where does this one end" problem.
   The titles come down with them: a 2.1rem display face on every section made
   the page feel like a magazine spread rather than a profile. */
.vd-profile-body { padding-block: 1.5rem 3rem; background: #faf8f9; }
.vd-block {
  background: #fff;
  border: 1px solid var(--vd-line);
  border-radius: 16px;
  padding: 1.35rem 1.4rem;
  margin-bottom: 1rem;
}
.vd-block:last-child { margin-bottom: 0; }
.vd-block-title {
  font-family: var(--vd-font-body);
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: -.005em;
  margin-bottom: 1rem;
}
.vd-block-sub {
  font-family: var(--vd-font-body); font-size: 1rem; font-weight: 700; color: var(--vd-ink);
}
.vd-prose { color: var(--vd-body); line-height: 1.8; font-size: .98rem; }

/* ---------- Quick facts ----------
   One tinted strip rather than a grid of separate tiles: three or four short
   facts in boxes of their own took a quarter of the first screen to say
   "₹22,000" and "3 hours". */
.vd-facts-strip {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem;
  background: var(--vd-brand-tint);
  border: 1px solid var(--vd-line);
  border-radius: 14px;
  padding: .85rem 1.1rem;
  margin-bottom: 1rem;
}
.vd-fact-cell {
  display: flex; gap: .55rem; align-items: center;
  background: none; border: 0; border-radius: 0; padding: 0;
}
.vd-fact-cell i { font-size: 1.25rem; color: var(--vd-brand); }
.vd-fact-cell span  { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--vd-muted); }
.vd-fact-cell strong{ font-size: .92rem; color: var(--vd-ink); }
.vd-fact-note { display: block; font-size: .78rem; color: var(--vd-muted); }

/* On a phone the same seven facts wrapped into ragged rows — two on one line,
   three on the next, each a different width, labels and values at different
   heights. Two even columns on hairlines read as a spec table instead, with
   the price on a row of its own because it is the one anybody scans for. */
@media (max-width: 575.98px) {
  .vd-facts-strip {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0; padding: 0; overflow: hidden;
  }
  .vd-fact-cell {
    align-items: flex-start; gap: .5rem;
    padding: .72rem .8rem;
    border-top: 1px solid var(--vd-line);
    border-left: 1px solid var(--vd-line);
    min-width: 0;
  }
  .vd-fact-cell > div { min-width: 0; }
  .vd-fact-cell i { font-size: 1.05rem; line-height: 1.35; }
  .vd-fact-cell strong { display: block; font-size: .9rem; line-height: 1.3; }
  /* The first cell always spans, so the column a cell lands in alternates with
     its parity from the second one on: evens left, odds right. */
  .vd-fact-cell:first-child { grid-column: 1 / -1; border-top: 0; border-left: 0; }
  .vd-fact-cell:first-child strong { font-size: 1.15rem; }
  .vd-fact-cell:nth-child(even) { border-left: 0; }
  /* A lone cell on the last row takes the full width rather than leaving a
     half-width gap beside it. */
  .vd-fact-cell:last-child:nth-child(even) { grid-column: 1 / -1; }
}

/* ---------- Halls & lawns (Phase 40) ----------
   One card per space: photograph on the left, what it seats on the right.
   Two to a row on a desktop, one on a phone — a venue can have nine of these
   and a three-column grid turned each one into a thumbnail with a caption. */
.vd-spaces { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.vd-space {
  display: grid; grid-template-columns: 136px 1fr; gap: .9rem;
  border: 1px solid var(--vd-line); border-radius: 14px;
  padding: .7rem; align-items: start; background: #fff;
}
.vd-space-photo {
  position: relative; display: block; padding: 0; border: 0; background: none;
  width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; cursor: pointer;
}
.vd-space-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-space-photo.is-empty {
  display: flex; align-items: center; justify-content: center; cursor: default;
  background: var(--vd-brand-tint); color: var(--vd-brand); font-size: 1.4rem;
}
.vd-space-count {
  position: absolute; right: .35rem; bottom: .35rem;
  background: rgba(20, 8, 12, .72); color: #fff;
  font-size: .7rem; padding: .1rem .4rem; border-radius: 999px;
}
.vd-space-body { min-width: 0; }
.vd-space-body h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .2rem; color: var(--vd-ink); }
.vd-space-type {
  display: inline-block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  line-height: 1.3;
  color: var(--vd-brand-darker); background: var(--vd-brand-tint);
  padding: .12rem .45rem; border-radius: 999px; font-weight: 700;
}
.vd-space-facts { list-style: none; margin: .45rem 0 0; padding: 0; }
.vd-space-facts li {
  display: flex; align-items: center; gap: .4rem;
  font-size: .85rem; color: var(--vd-ink); font-weight: 600; padding: .1rem 0;
}
.vd-space-facts i { color: var(--vd-brand); font-size: .9rem; font-weight: 400; }
.vd-space-body p { font-size: .84rem; color: var(--vd-muted); margin: .4rem 0 0; }
@media (max-width: 767.98px) {
  .vd-spaces { grid-template-columns: 1fr; }
  .vd-space { grid-template-columns: 104px 1fr; gap: .7rem; }
}

/* ---------- USP ---------- */
.vd-usp {
  display: flex; gap: 1rem;
  background: linear-gradient(135deg, var(--vd-brand-soft), var(--vd-brand-tint));
  border-left: 4px solid var(--vd-brand);
  border-radius: 12px; padding: 1.15rem 1.25rem;
}
.vd-usp > i { font-size: 1.5rem; color: var(--vd-brand); opacity: .6; }
.vd-usp-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--vd-brand-darker); font-weight: 700; }

/* ---------- Amenities ---------- */
.vd-amenity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; margin-top: .9rem; }
.vd-amenity-item { display: flex; gap: .55rem; align-items: center; font-size: .92rem; color: var(--vd-body); }
.vd-amenity-item i { color: var(--vd-success); font-size: .95rem; }
/* Two to a row on a phone as well: a 220px minimum meant one column in a 310px
   content well, so twelve facilities ran to twelve lines. The tick sits at the
   top of its item rather than centred, so a label that wraps keeps it level
   with the first line. */
@media (max-width: 575.98px) {
  .vd-amenity-grid { grid-template-columns: 1fr 1fr; gap: .55rem .8rem; }
  .vd-amenity-item { align-items: flex-start; font-size: .86rem; line-height: 1.3; }
  .vd-amenity-item i { flex: 0 0 auto; line-height: 1.45; }
}

/* ---------- Why choose ---------- */
.vd-why-card {
  display: flex; gap: .9rem; height: 100%;
  border: 1px solid var(--vd-line); border-radius: 14px; padding: 1.15rem;
  background: #fff; transition: border-color .18s ease, box-shadow .18s ease;
}
.vd-why-card:hover { border-color: var(--vd-brand); box-shadow: var(--vd-shadow); }
.vd-why-icon {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
  background: var(--vd-brand-soft); color: var(--vd-brand);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.vd-why-card h3 { font-family: var(--vd-font-body); font-size: .98rem; font-weight: 700; margin: .15rem 0 .3rem; }
.vd-why-card p  { font-size: .87rem; color: var(--vd-muted); margin: 0; line-height: 1.6; }

/* ---------- Packages ---------- */
.vd-package {
  position: relative; height: 100%;
  border: 1px solid var(--vd-line); border-radius: 14px; padding: 1.4rem 1.2rem 1.2rem;
  background: #fff; display: flex; flex-direction: column;
}
.vd-package.is-popular { border-color: var(--vd-brand); border-width: 2px; box-shadow: var(--vd-shadow); }
.vd-package-flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--vd-brand); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 999px;
  white-space: nowrap;
}
.vd-package h3 { font-family: var(--vd-font-body); font-size: 1rem; font-weight: 700; margin: 0 0 .4rem; }
.vd-package-price { font-size: 1.4rem; font-weight: 700; color: var(--vd-brand); line-height: 1.2; }
.vd-package-price small { display: block; font-size: .76rem; font-weight: 400; color: var(--vd-muted); }
.vd-package-desc { font-size: .86rem; color: var(--vd-muted); margin: .6rem 0 .5rem; }
.vd-package-list { list-style: none; padding: 0; margin: .5rem 0 1rem; flex: 1; }
.vd-package-list li { display: flex; gap: .5rem; font-size: .87rem; padding: .28rem 0; color: var(--vd-body); }
.vd-package-list i { color: var(--vd-success); }

/* ---------- Gallery grid ---------- */
.vd-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; }
.vd-gallery-cell {
  padding: 0; border: 0; border-radius: 12px; overflow: hidden;
  aspect-ratio: 4/3; cursor: pointer; background: var(--vd-brand-tint);
}
.vd-gallery-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.vd-gallery-cell:hover img { transform: scale(1.07); }

/* ---------- Reviews ---------- */
.vd-rating-summary {
  display: grid; grid-template-columns: 170px 1fr; gap: 1.5rem; align-items: center;
  background: var(--vd-brand-tint); border: 1px solid var(--vd-line);
  border-radius: 14px; padding: 1.4rem; margin-bottom: 1.5rem;
}
@media (max-width: 575px) { .vd-rating-summary { grid-template-columns: 1fr; text-align: center; } }
.vd-rating-score { text-align: center; }
/* Plain type, not the display face: the display face sets a decimal point as a
   raised dot, so every rating on the site read "4·7". */
.vd-rating-number { font-size: 2.9rem; font-weight: 700; color: var(--vd-ink); line-height: 1; letter-spacing: -.02em; }
.vd-bar-row { display: grid; grid-template-columns: 44px 1fr 30px; gap: .6rem; align-items: center; margin-bottom: .35rem; }
.vd-bar-row > span { font-size: .8rem; color: var(--vd-muted); white-space: nowrap; }
.vd-bar-row > span i { color: var(--vd-gold); font-size: .7rem; }
.vd-bar-row em { font-size: .78rem; color: var(--vd-muted); font-style: normal; text-align: right; }
.vd-bar { height: 7px; background: #eee3e7; border-radius: 999px; overflow: hidden; }
.vd-bar-fill { height: 100%; background: var(--vd-gold); border-radius: 999px; }

.vd-review { border-bottom: 1px solid var(--vd-line); padding: 1.15rem 0; }
.vd-review:last-child { border-bottom: 0; }
.vd-review-head { display: flex; gap: .8rem; align-items: flex-start; }
.vd-avatar {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%;
  color: #fff; font-weight: 700; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.vd-review-title { font-family: var(--vd-font-body); font-size: .95rem; font-weight: 700; margin: .75rem 0 .3rem; }
.vd-review-body  { font-size: .92rem; color: var(--vd-body); line-height: 1.7; margin: .5rem 0 0; }
.vd-review-reply {
  margin-top: .8rem; padding: .8rem 1rem;
  background: var(--vd-brand-tint); border-left: 3px solid var(--vd-brand); border-radius: 8px;
  font-size: .87rem;
}
.vd-review-reply strong { display: block; font-size: .8rem; color: var(--vd-brand-darker); margin-bottom: .25rem; }

.vd-empty-inline {
  text-align: center; padding: 2rem 1rem; color: var(--vd-muted);
  background: var(--vd-bg); border-radius: 12px;
}
.vd-empty-inline i { font-size: 2rem; color: var(--vd-brand); opacity: .4; display: block; margin-bottom: .5rem; }

.vd-write-review { background: var(--vd-bg); border: 1px solid var(--vd-line); border-radius: 14px; padding: 1.5rem; }

/* Star input — rendered right-to-left so hover fills leftward */
.vd-star-input { display: inline-flex; flex-direction: row-reverse; gap: .2rem; }
.vd-star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.vd-star-input label { font-size: 1.6rem; color: #ddd2d7; cursor: pointer; line-height: 1; transition: color .12s ease; }
.vd-star-input label:hover,
.vd-star-input label:hover ~ label,
.vd-star-input input:checked ~ label { color: var(--vd-gold); }
.vd-star-input input:focus-visible + label { outline: 2px solid var(--vd-brand); border-radius: 4px; }

/* ---------- FAQ ---------- */
.vd-accordion .accordion-item { border: 1px solid var(--vd-line); border-radius: 12px !important; margin-bottom: .6rem; overflow: hidden; }
.vd-accordion .accordion-button {
  font-weight: 600; font-size: .95rem; color: var(--vd-ink); background: #fff; padding: 1rem 1.15rem;
}
.vd-accordion .accordion-button:not(.collapsed) { background: var(--vd-brand-tint); color: var(--vd-brand-darker); box-shadow: none; }
.vd-accordion .accordion-button:focus { box-shadow: none; border-color: var(--vd-line); }
.vd-accordion .accordion-button::after { filter: hue-rotate(300deg) saturate(3); }
.vd-accordion .accordion-body { font-size: .92rem; color: var(--vd-body); line-height: 1.75; padding: 0 1.15rem 1.15rem; }

/* ---------- Sticky enquiry panel ---------- */
.vd-enquiry-panel {
  border: 1px solid var(--vd-line); border-radius: 16px; overflow: hidden;
  background: #fff; box-shadow: var(--vd-shadow-lg);
}
.vd-enquiry-price {
  background: linear-gradient(135deg, var(--vd-brand), var(--vd-brand-darker));
  color: #fff; padding: 1.1rem 1.25rem;
}
.vd-enquiry-price span   { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.vd-enquiry-price strong { font-size: 1.35rem; }
.vd-trust { list-style: none; padding: 0; margin: 1.1rem 0 0; border-top: 1px solid var(--vd-line); padding-top: .9rem; }
.vd-trust li { display: flex; gap: .5rem; font-size: .8rem; color: var(--vd-muted); padding: .28rem 0; }
.vd-trust i { color: var(--vd-success); margin-top: .1rem; }
@media (min-width: 992px) { .vd-sticky { position: sticky; top: 142px; } }

/* ---------- Mobile CTA bar ---------- */
.vd-mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: #fff; border-top: 1px solid var(--vd-line);
  padding: .65rem 1rem; box-shadow: 0 -4px 18px rgba(36,26,30,.1);
}
.vd-mobile-price {
  display: block; font-weight: 700; color: var(--vd-ink);
  font-size: 1rem; line-height: 1.2; white-space: nowrap;
}
/* Both halves stay on one line each: wrapped to two, the bar grew past the
   74px of body padding that keeps it off the end of the page. */
.vd-mobile-cta > div:first-child { flex: 0 0 auto; }
.vd-mobile-cta small {
  display: block; color: var(--vd-muted); font-size: .74rem;
  line-height: 1.15; white-space: nowrap;
}
.vd-mobile-cta .btn { white-space: nowrap; }
@media (max-width: 400px) {
  .vd-mobile-cta { gap: .5rem; padding: .6rem .8rem; }
  .vd-mobile-cta .btn-vd { padding-left: .9rem; padding-right: .9rem; }
}
@media (max-width: 991px) {
  body { padding-bottom: 74px; }
  .vd-whatsapp { bottom: 88px; }
}

/* ---------- Lightbox ---------- */
.vd-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(20, 8, 12, .94);
  display: flex; align-items: center; justify-content: center;
}
.vd-lb-stage { margin: 0; max-width: 92vw; max-height: 86vh; }
.vd-lb-stage img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 8px; display: block; }
.vd-lightbox button {
  position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0;
  width: 46px; height: 46px; border-radius: 50%; font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.vd-lightbox button:hover { background: var(--vd-brand); }
.vd-lb-close { top: 1.1rem; right: 1.1rem; font-size: 1.6rem; }
.vd-lb-prev  { left: 1.1rem;  top: 50%; transform: translateY(-50%); }
.vd-lb-next  { right: 1.1rem; top: 50%; transform: translateY(-50%); }
.vd-lb-count { position: absolute; bottom: 1.2rem; color: #fff; font-size: .85rem; opacity: .8; }
@media (max-width: 575px) { .vd-lb-prev { left: .4rem; } .vd-lb-next { right: .4rem; } }

/* Subscription tier badge on the profile header */
.vd-chip-plan{
  font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:999px;
  background:linear-gradient(135deg, #2b1a20, #4a2a33);
  color:var(--vd-gold-soft);
  border:1px solid rgba(201,162,39,.5);
}

/* Type chips are links when a listing carries several */
a.vd-chip-cat{transition:background .18s ease}
a.vd-chip-cat:hover{background:var(--vd-brand-darker);color:#fff}

/* ---------- Public partner profile ---------- */
.vd-partner-hero{background:linear-gradient(160deg,var(--vd-brand-tint,#fdf2f5),#fff 70%);padding:2.6rem 0 2rem}
.vd-partner-head{display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem;align-items:center}
.vd-partner-logo{width:96px;height:96px;border-radius:18px;overflow:hidden;background:#fff;
  border:1px solid var(--vd-line,#ece7e9);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.vd-partner-logo img{width:100%;height:100%;object-fit:cover}
.vd-partner-logo span{font-family:var(--vd-font-display);font-size:2rem;color:var(--vd-brand,#b4123f)}
.vd-partner-id h1{font-family:var(--vd-font-display);font-size:clamp(1.6rem,3.2vw,2.4rem);margin:0 0 .35rem}
.vd-partner-meta{display:flex;flex-wrap:wrap;gap:.9rem;font-size:.86rem;color:#6c6c72;margin:0 0 .5rem}
.vd-partner-meta i{color:var(--vd-brand,#b4123f);margin-right:.2rem}
.vd-partner-verified{color:#1a7f5a}
.vd-partner-verified i{color:#1a7f5a}
.vd-partner-blurb{margin:0;color:#5d5d63;max-width:52rem;line-height:1.6}
.vd-partner-stats{display:flex;gap:1.6rem;text-align:center}
.vd-partner-stats strong{display:block;font-family:var(--vd-font-display);font-size:1.7rem;
  color:var(--vd-brand,#b4123f);line-height:1.1}
.vd-partner-stats span{font-size:.75rem;color:#8a8a90}
.vd-partner-body{padding:2.2rem 0 3.5rem}
.vd-partner-h{font-family:var(--vd-font-display);font-size:1.5rem;margin:0 0 1.1rem}
@media (max-width:767.98px){
  .vd-partner-head{grid-template-columns:auto 1fr;gap:1rem}
  .vd-partner-stats{grid-column:1/-1;justify-content:flex-start;gap:1.2rem}
  .vd-partner-logo{width:72px;height:72px}
}

/* Listing page: link through to the vendor's public profile */
.vd-owner-strip{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;
  border:1px solid var(--vd-line,#ece7e9);border-radius:14px;background:#fff;
  text-decoration:none;color:inherit;transition:border-color .15s ease,transform .15s ease}
.vd-owner-strip:hover{border-color:var(--vd-brand,#b4123f);transform:translateY(-2px)}
.vd-owner-logo{width:48px;height:48px;border-radius:12px;flex:0 0 auto;overflow:hidden;
  background:var(--vd-brand-tint,#fdf2f5);color:var(--vd-brand,#b4123f);
  display:flex;align-items:center;justify-content:center;font-weight:600}
.vd-owner-logo img{width:100%;height:100%;object-fit:cover}
.vd-owner-text{flex:1 1 auto;min-width:0}
.vd-owner-text strong{display:block;font-size:.98rem}
.vd-owner-text strong i{color:#1a7f5a;font-size:.85rem}
.vd-owner-text em{font-style:normal;font-size:.82rem;color:#8a8a90}
.vd-owner-go{white-space:nowrap;font-size:.85rem;color:var(--vd-brand,#b4123f);font-weight:600}
@media (max-width:575.98px){.vd-owner-go{display:none}}

/* Listing: vendor social profiles */
.vd-social-row{display:flex;flex-wrap:wrap;gap:.6rem}
.vd-social-link{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1rem;
  border:1px solid var(--vd-line,#ece7e9);border-radius:999px;background:#fff;
  text-decoration:none;color:#3c3c42;font-size:.88rem;transition:border-color .15s ease,color .15s ease}
.vd-social-link i{font-size:1.05rem}
.vd-social-link:hover{border-color:currentColor}
.vd-social-instagram:hover{color:#c13584}
.vd-social-facebook:hover{color:#1877f2}
.vd-social-youtube:hover{color:#ff0000}
.vd-social-gmb:hover{color:#1a73e8}

/* Listing: mid-page enquiry CTA */
.vd-cta-band{margin:2rem 0}
.vd-cta-inner{display:grid;grid-template-columns:1fr auto;gap:1.75rem;align-items:center;
  padding:1.75rem 2rem;border-radius:18px;
  background:linear-gradient(135deg,var(--vd-brand-tint,#fdf2f5),#fff 70%);
  border:1px solid var(--vd-line,#f0dfe5)}
.vd-cta-copy h2{font-family:var(--vd-font-display);font-size:clamp(1.3rem,2.4vw,1.75rem);margin:0 0 .4rem}
.vd-cta-copy p{color:#5d5d63;margin:0 0 .75rem;max-width:40rem;font-size:.92rem;line-height:1.55}
.vd-cta-points{list-style:none;display:flex;flex-wrap:wrap;gap:1rem;margin:0;padding:0;font-size:.82rem;color:#5d5d63}
.vd-cta-points i{color:#1a7f5a;margin-right:.25rem}
.vd-cta-action{display:flex;flex-direction:column;align-items:center;gap:.5rem;white-space:nowrap}
.vd-cta-alt{font-size:.8rem;color:#6c6c72;text-decoration:none}
.vd-cta-alt:hover{color:var(--vd-brand,#b4123f);text-decoration:underline}
.vd-enq-modal .modal-header{align-items:flex-start;gap:1rem}
.vd-enq-modal .modal-title{font-family:var(--vd-font-display);font-size:1.25rem}
@media (max-width:767.98px){
  .vd-cta-inner{grid-template-columns:1fr;padding:1.35rem}
  .vd-cta-action{align-items:stretch}
  .vd-cta-action .btn{width:100%}
}

/* ---- Single banner + grouped gallery (Phase 22) ----------------------
   One deliberate image across the top, replacing the five-cell collage that
   was assembled from whatever photos happened to be first. */
.vd-banner{
  position:relative;
  aspect-ratio:21/9;
  border-radius:18px;
  overflow:hidden;
  background:var(--vd-brand-soft,#f6eef1);
}
.vd-banner img{width:100%;height:100%;object-fit:cover;display:block}
.vd-banner-empty{display:grid;place-items:center}
/* A video whose provider gives us no still (Vimeo). Reads as a player about to
   start rather than a photo that failed to load. */
.vd-banner-video-only{display:grid;place-items:center;background:#15171a}
.vd-banner-loading{color:rgba(255,255,255,.5);font-size:3rem;line-height:1}

/* ---- Featured video ------------------------------------------------------
   The player sits over the poster, which stays put: it covers the buffering
   gap and it is what remains if the provider is blocked on the visitor's
   network. */
.vd-banner-video{
  position:absolute;inset:0;overflow:hidden;z-index:1;
  /* Hidden until the player reports it is PLAYING. A YouTube embed is a black
     rectangle while it buffers, so revealing it on mount would black out the
     top of the listing for the length of the buffer — and for good on a
     network where YouTube is blocked. The photograph holds the space until
     there is really a video to show. */
  opacity:0;transition:opacity .45s ease;
}
.vd-banner.is-playing .vd-banner-video{opacity:1}
.vd-banner-video iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border:0;display:block;
  /* A 16:9 video has to COVER a 21:9 box, so it is scaled to the full width
     and overflows top and bottom: 21/9 ÷ 16/9 = 131.25% of the box height.
     width/height:100% would letterbox it with black bars instead. */
  width:100%;height:131.25%;
}
/* Nothing in the banner should swallow a click meant for the photo lightbox. */
.vd-banner-video{pointer-events:none}
.vd-banner .vd-ribbon,.vd-banner .vd-viewall,.vd-banner-sound{z-index:2}

.vd-banner-sound{
  position:absolute;left:1rem;bottom:1rem;
  width:2.5rem;height:2.5rem;border-radius:999px;
  border:0;display:inline-grid;place-items:center;
  background:rgba(0,0,0,.55);color:#fff;font-size:1.1rem;
  backdrop-filter:blur(4px);cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.vd-banner-sound:hover{background:rgba(0,0,0,.75);transform:scale(1.06)}
.vd-banner-sound:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* No-JS fallback: a plain link out to the provider. */
.vd-banner-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.6rem 1.1rem;border-radius:999px;
  background:rgba(0,0,0,.6);color:#fff;text-decoration:none;font-weight:600;
}
.vd-banner .vd-ribbon{position:absolute;top:1rem;left:1rem}
/* The old collage rule set left and right, which stretched the pill across
   the whole banner. Reset left so it sits in the corner. */
.vd-banner .vd-viewall{
  position:absolute;left:auto;right:1rem;bottom:1rem;
  width:auto;display:inline-flex;align-items:center;
  border-radius:999px;box-shadow:0 2px 10px rgba(0,0,0,.18);
}

@media (max-width:767.98px){
  /* 21:9 is a letterbox on a phone — too short to show a room. */
  .vd-banner{aspect-ratio:16/10;border-radius:14px}
  /* 16:10 is NARROWER than the 16:9 video, so here it covers by height and
     overflows left and right instead: 16/9 ÷ 16/10 = 111.2% of the width. */
  .vd-banner-video iframe{width:111.2%;height:100%}
  .vd-banner-sound{left:.6rem;bottom:.6rem;width:2.2rem;height:2.2rem}
  /* The collage-era mobile rule turns .vd-viewall into a full-width block
     below the image; inside the banner it stays a corner pill. */
  .vd-banner .vd-viewall{
    position:absolute;left:auto;right:.6rem;bottom:.6rem;
    width:auto;display:inline-flex;margin-top:0;
  }
}

/* Section headings inside the gallery. Only rendered when a listing has more
   than one section, so a simple gallery stays a simple gallery. */
.vd-gallery-heading{
  display:flex;align-items:center;gap:.5rem;
  font-size:.82rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--vd-muted,#6c757d);
  margin:1.6rem 0 .7rem;
}
.vd-gallery-heading:first-of-type{margin-top:.6rem}
.vd-gallery-heading span{
  font-size:.72rem;font-weight:600;letter-spacing:0;
  background:var(--vd-brand-tint,#fdf2f5);color:var(--vd-brand,#d81b60);
  border-radius:999px;padding:.05rem .45rem;
}

/* ---- Gallery section tabs -------------------------------------------
   Rendered only when a listing has more than one section. The panels are
   visible in the markup and hidden by JS, so without it the page is the
   stacked gallery rather than a single section with the rest unreachable. */
.vd-gtabs{
  display:flex;gap:.45rem;flex-wrap:wrap;
  margin:.2rem 0 1.1rem;
}
/* display:flex outranks the browser's own [hidden] rule, so restate it. */
.vd-gtabs[hidden]{display:none}
.vd-gtab{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.42rem .85rem;border-radius:999px;
  border:1px solid var(--vd-line,#e3e6ea);background:#fff;
  font-size:.87rem;color:var(--vd-ink,#222);cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.vd-gtab:hover{border-color:var(--vd-brand,#d81b60);color:var(--vd-brand,#d81b60)}
.vd-gtab span{
  font-size:.72rem;font-weight:600;
  background:var(--vd-brand-tint,#fdf2f5);color:var(--vd-brand,#d81b60);
  border-radius:999px;padding:.02rem .4rem;
}
.vd-gtab.is-active{
  background:var(--vd-brand,#d81b60);border-color:var(--vd-brand,#d81b60);color:#fff;
}
.vd-gtab.is-active span{background:rgba(255,255,255,.25);color:#fff}
.vd-gpanel[hidden]{display:none}
/* All tab: every panel and its grid collapse away so the photos become direct
   children of one grid and flow continuously, instead of six grids each
   starting a fresh row. Hidden headings are display:none and drop out. */
.vd-gpanels.is-all{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.6rem;
}
.vd-gpanels.is-all > .vd-gpanel,
.vd-gpanels.is-all .vd-gallery-grid{display:contents}
.vd-gpanel + .vd-gpanel{margin-top:1.2rem}

@media (max-width:575.98px){
  /* Scroll rather than wrap: eight sections would push the photos far down. */
  .vd-gtabs{
    flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;padding-bottom:.25rem;
  }
  .vd-gtabs::-webkit-scrollbar{display:none}
  .vd-gtab{flex:0 0 auto}

  /* Two photos per row on a phone. The 180px floor only leaves room for one
     column at 375px, which turned the gallery into a very long single file. */
  .vd-gallery-grid,
  .vd-gpanels.is-all{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}


/* On a phone the chips are the widest thing in the header card — three of
   them at the desktop size took three lines on their own. */
@media (max-width: 575.98px) {
  .vd-chip-cat, .vd-chip-verified, .vd-chip-soft, .vd-chip-plan {
    font-size: .64rem; padding: .25rem .55rem; letter-spacing: .02em;
  }
  .vd-profile-card { padding: 1.1rem 1.1rem 1rem; }
}

/* ---------- Check-availability form (Phase 39) ---------- */
.vd-phonefield { position: relative; }
.vd-phonefield-cc {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  font-size: .9rem; color: var(--vd-muted); pointer-events: none;
}
.vd-phonefield .form-control { padding-left: 4.1rem; }
.vd-phonefield-cc { display: inline-flex; align-items: center; gap: .35rem; }
.vd-flag-in {
  width: 18px; height: 12px; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(36, 26, 30, .12);
}

/* The ghost date label inside a bordered .form-control, rather than the
   homepage search bar it was written for: inset by the control's own padding
   so it covers "dd/mm/yyyy" exactly and nothing else. */
.vd-datefield-control .vd-date-ghost {
  left: 1px; right: 2.2rem; top: 1px; bottom: 1px;
  display: none;
  align-items: center;
  padding-left: .75rem;
  border-radius: 7px;
  font-size: .95rem;
  color: #b6acb1;
  line-height: normal;
}
.vd-datefield-control.is-empty input[type="date"]:not(:focus) + .vd-date-ghost { display: flex; }

.vd-availform-label {
  display: block; font-size: .7rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--vd-muted); margin-bottom: .3rem;
}
.vd-radio { display: flex; align-items: center; gap: .4rem; font-size: .86rem; margin-bottom: .15rem; cursor: pointer; }
.vd-radio input { accent-color: var(--vd-brand); }

/* The WhatsApp opt-in, off by default and obviously a switch rather than
   another tick box lost among the fields. */
.vd-switch { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.vd-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.vd-switch-track {
  width: 40px; height: 22px; border-radius: 999px; background: #d9d4d6;
  position: relative; flex: 0 0 auto; transition: background .16s ease;
}
.vd-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .16s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.vd-switch input:checked + .vd-switch-track { background: #25d366; }
.vd-switch input:checked + .vd-switch-track .vd-switch-knob { transform: translateX(18px); }
.vd-switch input:focus-visible + .vd-switch-track { outline: 2px solid var(--vd-brand); outline-offset: 2px; }
.vd-switch-text { font-size: .86rem; color: var(--vd-body); }

/* The answer the form comes back with — longer than a one-line flash when it
   has to offer other dates. */
.js-form-message .vd-freedates { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.js-form-message .vd-freedates button {
  border: 1px solid currentColor; background: none; border-radius: 999px;
  padding: .15rem .55rem; font-size: .78rem; color: inherit;
}