/* ==========================================================
   Venue Dekho — public site
   Brand tokens and fonts come from theme.css.
   ========================================================== */

body {
  font-family: var(--vd-font-body);
  font-weight: 400;
  color: var(--vd-body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .vd-display {
  font-family: var(--vd-font-display);
  color: var(--vd-ink);
  font-weight: 600;
  letter-spacing: -.005em;
}
a { text-decoration: none; }

/* Full-bleed layout: the site spans the viewport with a 7% gutter
   either side instead of Bootstrap's fixed-width container.
   NOTE: any class placed on a .container element must set padding with
   `padding-block` / `padding-top` etc. A `padding` shorthand there silently
   zeroes this gutter and the content runs to the screen edge. */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  width: 100%;
  max-width: 100%;
  padding-inline: max(1.15rem, var(--vd-gutter));
  margin-inline: auto;
}

/* Small-caps label used above section headings and in the hero. */
.vd-kicker, .vd-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--vd-font-body);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--vd-brand);
}

/* ---------- Header ---------- */
.vd-header {
  background: #fff;
  border-bottom: 1px solid var(--vd-line);
  box-shadow: 0 1px 10px rgba(36,26,30,.04);
}
.vd-site-logo { height: 54px; width: auto; display: block; }
.vd-header .navbar-brand { padding-block: .55rem; }
.vd-header .nav-link {
  color: var(--vd-ink);
  font-weight: 400;
  font-size: .93rem;
  letter-spacing: .015em;
  padding-inline: .85rem;
}
.vd-header .nav-link:hover { color: var(--vd-brand); }
.vd-mega { max-height: 70vh; overflow-y: auto; }

/* A dropdown with a lot of short items — the 22 cities ran nearly the full
   height of the screen as one column. Three columns on a desktop, two on a
   tablet, one in the collapsed mobile navbar where there is no width to spare.
   auto-fit rather than a fixed count, so adding cities widens it evenly and
   removing them does not leave a gap. */
/* Bootstrap sets `.dropdown-menu.show { display: block }` — two classes, so a
   bare `.vd-mega-cols { display: grid }` loses to it and the menu stays a
   single column. Matching .show here wins on specificity, and leaves the
   closed state as Bootstrap's `display: none`. */
.dropdown-menu.vd-mega-cols.show {
  display: grid;
  grid-template-columns: repeat(3, minmax(8.5rem, 1fr));
}
.vd-mega-cols {
  gap: 0 .15rem;
  min-width: 28rem;
}
.vd-mega-cols > li { min-width: 0; }
/* The "By Type" heading and the "View all" row are not list items like the
   rest: they belong across the whole panel, not in column one. grid-column
   1/-1 spans however many columns the breakpoint is currently using. */
.vd-mega-cols > .vd-typemenu-head,
.vd-mega-cols > .vd-typemenu-foot { grid-column: 1 / -1; }
.vd-mega-cols > .vd-typemenu-foot { border-top: 1px solid var(--vd-line, #e8e4e6); margin-top: .3rem; padding-top: .25rem; }

/* .vd-mega-cols was sized for city names, the longest of which is about 97px.
   These are trade names: "Photo Booth & 360° Booth" measures 164px, and with
   the item's own 11.2px of padding either side a column needs 187px or the
   list ellipsises a third of itself. */
.vd-artistmenu.vd-mega-cols { min-width: 35.5rem; }
.dropdown-menu.vd-artistmenu.vd-mega-cols.show {
  grid-template-columns: repeat(3, minmax(11.7rem, 1fr));
}
@media (max-width: 1399.98px) {
  /* Two columns rather than three once the bar itself is tight; eleven rows
     is still well short of the viewport. */
  .dropdown-menu.vd-artistmenu.vd-mega-cols.show { grid-template-columns: repeat(2, minmax(11.7rem, 1fr)); }
  .vd-artistmenu.vd-mega-cols { min-width: 24rem; }
}
.vd-mega-cols .dropdown-item {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 1199.98px) {
  .dropdown-menu.vd-mega-cols.show { grid-template-columns: repeat(2, minmax(8.5rem, 1fr)); }
  .vd-mega-cols { min-width: 20rem; }
}
@media (max-width: 991.98px) {
  /* Inside the collapsed navbar the dropdown is a plain block in the page, so
     it gets the full width and no minimum of its own. */
  .dropdown-menu.vd-mega-cols.show { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vd-mega-cols { min-width: 0; }
}
@media (max-width: 340px) {
  /* Only the very smallest phones fall back to one column. At 375px two
     columns are about 152px each and the longest city name needs ~97px, so
     dropping to one there would just recreate the long list on mobile. */
  .dropdown-menu.vd-mega-cols.show { grid-template-columns: 1fr; }
}
.dropdown-menu {
  border: 1px solid var(--vd-line);
  border-radius: 12px;
  box-shadow: var(--vd-shadow-lg);
  padding: .5rem;
}
.dropdown-item { border-radius: 8px; font-size: .9rem; padding: .5rem .7rem; }
.dropdown-item:active { background: var(--vd-brand); }
@media (max-width: 991px) { .vd-site-logo { height: 42px; } }

/* ---- Three zones: logo, menu, the visitor's own actions ---------------
   A grid of `1fr auto 1fr`. The two outer tracks are always equal, so the
   menu sits in the middle of the WINDOW rather than in the middle of
   whatever space the logo and the buttons happen to leave — which is what
   makes it look centred instead of nearly centred. */
@media (min-width: 1200px) {
  .vd-header .vd-navrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
    /* The site's 7% gutter leaves 1238px on a 1440px screen, and the two
       outer tracks of this grid are always equal — so the wider of the two
       sides decides how much is left for the menu. The right-hand group needs
       429px, which did not fit. The bar runs to a narrower gutter than the
       page below it: a header that bleeds wider than its content is ordinary,
       a menu sitting on top of the last link is not. */
    padding-inline: max(1.15rem, 3.5%);
  }
  .vd-header .vd-navrow > .vd-navstart { grid-column: 1; }
  .vd-header .vd-navrow > .offcanvas   { grid-column: 2; width: auto; }
  .vd-header .vd-navside               { grid-column: 3; justify-self: end; }
  .vd-header .navbar-brand { margin-right: 0; }

  /* The bar carries a logo, a search box, six menu items and four actions on
     one row inside a 7% gutter — about 1240px on a 1440px screen. The menu
     runs a notch tighter than the body type so the search box keeps a usable
     width; below 1400px the block further down tightens it again. */
  .vd-navmain { flex-wrap: nowrap; }
  .vd-navmain .nav-link { white-space: nowrap; padding-inline: .7rem; font-size: .98rem; }
  .vd-site-logo { height: 48px; }


  /* Everything on this side is trimmed to the bone on purpose: the three
     tracks are sized from one row of 1240px, and eight spare pixels here are
     what keep the right-hand group from sitting on the last menu item. */
  .vd-navside { display: flex; align-items: center; gap: .3rem; }
  /* The larger glyph is for the phone bar, where these sit beside the menu
     button. Here the magnifier sits beside a city pill and a text link. */
  .vd-navside .vd-navtool { font-size: 1.1rem; }
  .vd-navside .nav-link { white-space: nowrap; padding-inline: .5rem; }
  .vd-navside .vd-cityswitch { padding-inline: .65rem; }
  .vd-navlist { white-space: nowrap; border-radius: 999px; padding-inline: .7rem; }
}

/* ---- The toolbar beside the logo on a phone --------------------------
   Search, city and shortlist sit in the bar itself. They were behind the
   hamburger, which is one tap too many for the three things people reach
   for most. */
.vd-navstart { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.vd-navtools { display: flex; align-items: center; gap: .1rem; margin-left: auto; }

/* The bar is one line. The logo and four 40px targets come to 347px, which is
   25px more than a 375px phone has between its gutters, and a navbar wraps by
   default — so both ends come down a notch on the smallest screens rather than
   the toolbar dropping onto a second row. */
@media (max-width: 1199.98px) {
  /* Menu button left, logo centred, tools right. Both side tracks are
     minmax(0, 1fr) — equal to each other whatever they hold — so the logo is
     centred on the window and does not drift as the badge on the heart appears
     or a tool is dropped on a narrow screen. */
  .vd-header .vd-navrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .25rem;
    flex-wrap: nowrap;
  }
  .vd-navburger { justify-self: start; }
  .vd-header .vd-navrow > .vd-navstart { justify-self: center; min-width: 0; }
  /* Bootstrap gives .navbar-brand a 1rem right margin for the links that used
     to follow it. Inside a centred track that margin is counted as part of the
     track, so the logo sat half of it — 8px — left of true centre. */
  .vd-header .vd-navrow > .vd-navstart .navbar-brand { margin-right: 0; }
  .vd-header .vd-navrow > .vd-navtools { justify-self: end; margin-left: 0; }
}
/* Between a phone and a laptop the sheet keeps its margins but gives up the
   fixed height — a 92vh panel with four short rows in it looks empty. */
@media (max-width: 991.98px) {
  .vd-sheet { padding: 2vh 1rem; }
  .vd-sheet-panel { height: auto; max-height: 96vh; }
}

.vd-navtool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--vd-ink);
  font-size: 1.35rem;
  text-decoration: none;
}
.vd-navtool:hover, .vd-navtool:focus-visible { background: var(--vd-brand-tint, #fdf2f5); color: var(--vd-brand); }
/* Signed in, the account icon carries the brand colour — the only difference
   between the two states, since the filled variant of this glyph does not
   exist in the icon set. */
.vd-nav-account.is-on { color: var(--vd-brand); }
.vd-navtools .navbar-toggler { width: 42px; height: 42px; font-size: 1.55rem; color: var(--vd-brand); line-height: 1; }
.vd-navtools .navbar-toggler:focus { box-shadow: none; }

/* The menu button sits on its own at the head of the row now, so it is sized
   here rather than through .vd-navtools. */
.vd-navburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; font-size: 1.55rem; line-height: 1;
  color: var(--vd-brand); background: none;
}
.vd-navburger:focus { box-shadow: none; }

@media (max-width: 575.98px) {
  .vd-site-logo { height: 38px; }
  /* Sized against the menu button next to them, not against the box they sit
     in: at 1.02rem these two read as a size smaller than the 1.45rem bi-list
     across the bar from them. */
  .vd-navtool { width: 38px; height: 38px; font-size: 1.3rem; }
  .vd-navtools .navbar-toggler,
  .vd-navburger { width: 38px; height: 38px; font-size: 1.45rem; }
  /* Arithmetic, not preference: the row has 322px of content on a 375px phone.
     A centred 149px logo leaves 83px either side of it, which is two 38px
     tools. The city pin is the one to go — the hero carries a city pill and the
     flyout has a Cities group, while the heart's count only works if it shows. */
  .vd-navtool-city { display: none; }
}
/* A 320px handset has 276px between the gutters; the 38px logo and four 38px
   targets want 316 of it, and the magnifier ended up sitting on the logo. Both
   ends come down one more notch rather than the bar wrapping. Everything under
   375px gets this: a 360px Android had 4px between the logo and the magnifier,
   which is a gap by measurement and a collision to look at. */
@media (max-width: 374.98px) {
  /* The site's 7% gutter is 22px a side here, and the row needs those pixels
     more than the edge does: with them the logo cleared the search icon by 5px.
     The bar already runs to a narrower gutter than the page on a desktop. */
  .vd-header .vd-navrow { padding-inline: 1rem; }
  .vd-navstart { gap: .5rem; }
  .vd-site-logo { height: 32px; }
  .vd-navtool { width: 34px; height: 34px; font-size: 1.18rem; }
  .vd-navtools .navbar-toggler,
  .vd-navburger { width: 34px; height: 34px; font-size: 1.3rem; }
}

/* ---- The search box --------------------------------------------------
   One component, two homes: the desktop bar and the drawer the phone's
   magnifier opens. See public-includes/header-search.php. */
.vd-hsearch {
  position: relative;
  display: flex;
  align-items: center;
  gap: .4rem;
  width: 100%;
  padding: .25rem .3rem .25rem .75rem;
  background: #f7f4f5;
  border: 1px solid #ece6e8;
  border-radius: 999px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.vd-hsearch:focus-within {
  background: #fff;
  border-color: var(--vd-brand);
  box-shadow: 0 0 0 3px rgba(232, 47, 93, .12);
}
.vd-hsearch-icon { flex: 0 0 auto; color: #a79da3; font-size: .92rem; }
.vd-hsearch-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .3rem 0;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  font-size: .88rem;
  color: var(--vd-ink);
}
.vd-hsearch-input::placeholder { color: #a79da3; opacity: 1; }
/* Safari's own clear cross sits exactly where the submit button is. */
.vd-hsearch-input::-webkit-search-cancel-button,
.vd-hsearch-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.vd-hsearch-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--vd-brand);
  color: #fff;
  font-size: .82rem;
}
.vd-hsearch-go:hover { background: #cf2250; }

/* ---- The suggestions ------------------------------------------------- */
.vd-hsearch-panel {
  position: absolute;
  z-index: 1080;
  top: calc(100% + .45rem);
  right: 0;
  left: auto;
  width: min(380px, 92vw);
  max-height: min(70vh, 470px);
  overflow-y: auto;
  padding: .35rem;
  text-align: left;
  background: #fff;
  border: 1px solid var(--vd-line);
  border-radius: 14px;
  box-shadow: var(--vd-shadow-lg);
}
.vd-hsearch-group {
  padding: .5rem .6rem .2rem;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #a79da3;
}
.vd-hsearch-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .45rem .6rem;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--vd-ink);
  text-align: left;
  text-decoration: none;
}
.vd-hsearch-item > i { flex: 0 0 auto; color: var(--vd-brand); font-size: 1rem; }
.vd-hsearch-item > span { flex: 1 1 auto; min-width: 0; }
.vd-hsearch-item strong {
  display: block;
  font-size: .89rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vd-hsearch-item small { display: block; font-size: .75rem; color: var(--vd-muted); }
.vd-hsearch-item mark { padding: 0; background: #ffe3ec; color: inherit; border-radius: 3px; }
.vd-hsearch-item:hover,
.vd-hsearch-item.is-active { background: var(--vd-brand-tint, #fdf2f5); color: var(--vd-ink); }
/* Pinned to the bottom of the panel: with six listings and four cities the
   list scrolls, and "see everything" is the one row that must never be the
   one you have to scroll to find. */
.vd-hsearch-all {
  position: sticky;
  bottom: -.35rem;
  margin-top: .25rem;
  background: #fff;
  border-top: 1px solid #f1ecee;
  border-radius: 0 0 10px 10px;
}


/* ======================================================================
   The search sheet
   The magnifier opens this, on every screen size. A dropdown answers "I
   know what I want"; this answers the other half — somebody who opened
   search with nothing in mind and needs to be shown what there is.
   ====================================================================== */
.vd-sheet {
  position: fixed;
  inset: 0;
  z-index: 1090;              /* over the sticky header (1020) and its menus */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3vh 1.5rem;
}
.vd-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(36, 26, 30, .45);
  backdrop-filter: blur(2px);
  animation: vdSheetFade .16s ease;
}
.vd-sheet-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Nearly the whole window: this panel is a place to browse, not a dropdown,
     and the city, vendor and listing grids all want the width. */
  width: min(100%, 1240px);
  height: 92vh;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(36, 26, 30, .28);
  overflow: hidden;
  animation: vdSheetIn .18s ease;
}
@keyframes vdSheetFade { from { opacity: 0; } }
@keyframes vdSheetIn { from { opacity: 0; transform: translateY(-10px); } }

/* The page behind must not scroll while the sheet is over it. */
body.vd-sheet-open { overflow: hidden; }

.vd-sheet-top {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1.1rem 1.2rem .75rem;
}
.vd-sheet-top .vd-hsearch {
  flex: 1 1 auto;
  padding: .45rem .45rem .45rem 1rem;
  background: #fff;
  border-color: #e3dcdf;
  box-shadow: 0 1px 3px rgba(36, 26, 30, .05);
}
.vd-sheet-top .vd-hsearch-input { font-size: 1.02rem; padding-block: .4rem; }
.vd-sheet-top .vd-hsearch-icon { font-size: 1.05rem; }
.vd-sheet-top .vd-hsearch-go { width: 36px; height: 36px; font-size: .95rem; }
.vd-sheet-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #f5f1f2;
  color: var(--vd-ink, #241a1e);
  font-size: 1rem;
}
.vd-sheet-close:hover { background: var(--vd-brand-tint, #fdf2f5); color: var(--vd-brand, #e82f5d); }

/* ---- Popular searches ------------------------------------------------
   Links to the city x vendor landing pages, not canned queries: they are
   real indexed pages, so a tap goes straight to results. */
.vd-sheet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: 0 1.2rem 1rem;
}
.vd-sheet-chip {
  padding: .4rem .85rem;
  border: 1px solid var(--vd-line, #e8e4e6);
  border-radius: 999px;
  font-size: .84rem;
  color: var(--vd-ink, #241a1e);
  text-decoration: none;
  white-space: nowrap;
}
.vd-sheet-chip:hover {
  border-color: var(--vd-brand, #e82f5d);
  background: var(--vd-brand-tint, #fdf2f5);
  color: var(--vd-brand, #e82f5d);
}

.vd-sheet-body {
  flex: 1 1 auto;
  min-height: 0;              /* lets the body scroll instead of the panel */
  overflow-y: auto;
  padding: .35rem 1.2rem 1.3rem;
  border-top: 1px solid #f2eef0;
}
.vd-sheet-head {
  margin: 1rem 0 .7rem;
  font-family: var(--vd-font-body, inherit);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #a79da3;
}
.vd-sheet-body > :first-child > .vd-sheet-head:first-child { margin-top: .4rem; }

/* ---- Vendor types ----------------------------------------------------
   Which kind of vendor comes before which city, so this row sits first. */
.vd-sheet-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .2rem .6rem;
}
.vd-sheet-cat {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .45rem .55rem;
  border-radius: 12px;
  font-size: .92rem;
  color: var(--vd-ink, #241a1e);
  text-decoration: none;
}
.vd-sheet-cat:hover { background: var(--vd-brand-tint, #fdf2f5); }
.vd-sheet-pin {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f6f2f4;
  color: var(--vd-brand, #e82f5d);
  font-size: .95rem;
}

/* ---- City tiles ------------------------------------------------------
   The tile itself is shared with the homepage — see the "City tiles" block
   further down. This is only the grid the sheet lays them out in. */
.vd-sheet-cities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: .8rem;
}

/* Placeholders in the same shape as the tiles, so the panel opens at its
   full height instead of growing once the photos arrive. */
.vd-sheet-cityskel {
  aspect-ratio: 5 / 6;
  border-radius: 14px;
  background: linear-gradient(90deg, #f6f2f4 25%, #efe9eb 37%, #f6f2f4 63%);
  background-size: 400% 100%;
  animation: vdSkel 1.4s ease infinite;
}

.vd-sheet-more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .6rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: .86rem;
  font-weight: 500;
  color: var(--vd-ink, #241a1e);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vd-sheet-more:hover { color: var(--vd-brand, #e82f5d); }
.vd-sheet-more i { font-size: .7rem; text-decoration: none; }

/* ---- Trending -------------------------------------------------------- */
.vd-sheet-trend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: .5rem .8rem;
}
.vd-sheet-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .45rem;
  border-radius: 12px;
  color: var(--vd-ink, #241a1e);
  text-decoration: none;
}
.vd-sheet-card:hover { background: var(--vd-brand-tint, #fdf2f5); }
.vd-sheet-card img,
.vd-sheet-card-nopic {
  flex: 0 0 auto;
  width: 64px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  background: #f3eef0;
}
.vd-sheet-card-nopic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c9bfc4;
}
.vd-sheet-card-text { min-width: 0; }
.vd-sheet-card strong {
  display: block;
  font-size: .9rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vd-sheet-card small { display: block; font-size: .76rem; color: var(--vd-muted, #7b838c); }
.vd-sheet-card em { font-style: normal; font-size: .82rem; font-weight: 600; color: var(--vd-brand, #e82f5d); }

/* Placeholders while the trending row is fetched — the panel opens at its
   full height rather than growing under the cursor a moment later. */
.vd-sheet-skel {
  height: 66px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f6f2f4 25%, #efe9eb 37%, #f6f2f4 63%);
  background-size: 400% 100%;
  animation: vdSkel 1.4s ease infinite;
}
@keyframes vdSkel { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---- Matches, in place of the browsing panel ------------------------- */
.vd-sheet-results { padding-top: .3rem; }
.vd-sheet-results .vd-hsearch-item { padding: .6rem .55rem; }
.vd-sheet-results .vd-hsearch-item strong { font-size: .95rem; }
.vd-sheet-results .vd-hsearch-group { padding-left: .55rem; }
.vd-sheet-results .vd-hsearch-all { position: static; border-radius: 10px; }

@media (max-width: 575.98px) {
  /* Full screen on a phone: a rounded card floating over the page wastes the
     width, and the keyboard takes half the height as soon as it opens. */
  .vd-sheet { padding: 0; }
  .vd-sheet-panel { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .vd-sheet-top { padding: .8rem .9rem .6rem; }
  /* One scrolling row of chips rather than four wrapped lines, and without
     the scrollbar sitting under them. */
  .vd-sheet-chips {
    padding: 0 .9rem .8rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .vd-sheet-chips::-webkit-scrollbar { display: none; }
  .vd-sheet-body { padding: .35rem .9rem 1.5rem; }
  .vd-sheet-cities { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .55rem; }
  .vd-sheet-cats { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); }
  .vd-tile strong { font-size: .95rem; }
  /* Two columns rather than eleven stacked rows, so the city and listing rows
     below are not a scroll away. The longer vendor names wrap to two lines. */
  .vd-sheet-cat { align-items: flex-start; font-size: .86rem; line-height: 1.25; }
  .vd-sheet-cat .vd-sheet-pin { width: 30px; height: 30px; font-size: .85rem; }
}

/* ======================================================================
   Photo tiles — "Browse by Vendor" and "Browse by City" on the homepage,
   and the city tiles inside the search sheet. One tile, three callers; see
   public-includes/tile-grid.php.

   A photo with the name and the live count over it. A city without a photo
   keeps the same shape and falls back to the gradient, so a half-illustrated
   list still reads as one grid rather than as something half broken.
   ====================================================================== */
.vd-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.vd-tile {
  position: relative;
  display: block;
  aspect-ratio: 5 / 6;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, #cfd4da 0%, #aeb4bd 45%, #6f7681 100%);
  text-decoration: none;
  isolation: isolate;
}
.vd-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.vd-tile:hover img { transform: scale(1.06); }
/* The scrim: strong enough under the two lines of text to hold them at any
   brightness, gone by halfway up so the photo is still the subject. */
.vd-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 12, 15, .82) 0%, rgba(18, 12, 15, .35) 32%, rgba(18, 12, 15, 0) 62%);
}
.vd-tile-text {
  position: absolute;
  z-index: 1;
  left: .75rem;
  right: .75rem;
  bottom: .7rem;
  color: #fff;
}
.vd-tile strong {
  display: block;
  font-family: var(--vd-font-display, inherit);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Warm gold for the count: --vd-gold (#c9a227) is mixed for white
   backgrounds and goes muddy on a dark photograph, and --vd-gold-soft is so
   pale it reads as grey. This is the same hue, lifted to sit on the scrim. */
.vd-tile small { display: block; font-size: .78rem; font-weight: 500; color: #eec873; }


/* The city the visitor has chosen. A ring rather than a tint, because the
   tile is a photograph and a tint over it just looks like a dull photo. */
.vd-tile.is-active { box-shadow: 0 0 0 3px var(--vd-brand, #e82f5d); }

/* No photograph: a tinted panel and the thing's own icon, which says more
   about Jewellery than an empty grey box does. The hue is derived from the
   label, so a tile keeps the same colour on every page. */
.vd-tile.is-blank {
  background: linear-gradient(155deg,
    hsl(var(--vd-tile-hue, 345) 46% 58%) 0%,
    hsl(var(--vd-tile-hue, 345) 44% 38%) 100%);
}
.vd-tile-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2.2rem;      /* clears the label at the foot of the tile */
  color: rgba(255, 255, 255, .92);
  font-size: 2rem;
}

@media (max-width: 575.98px) {
  .vd-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
}

/* ==========================================================
   HERO
   ========================================================== */
.vd-hero {
  position: relative;
  min-height: 660px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  isolation: isolate;
  padding: 5.5rem 0 0;
}
.vd-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }

/* Every banner is stacked in the same place and only the one with .is-on is
   opaque, so the hero cross-fades rather than cutting. The slow zoom runs on
   the visible one only — on all of them at once the stack drifts out of step
   and the fade shows two different crops of the same frame. */
.vd-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 1.2s ease;
}
.vd-hero-media img.is-on {
  opacity: 1;
  animation: vd-kenburns 22s ease-in-out infinite alternate;
}
@keyframes vd-kenburns { from { transform: scale(1.03); } to { transform: scale(1.11); } }
@media (prefers-reduced-motion: reduce) {
  .vd-hero-media img.is-on { animation: none; }
  .vd-hero-media img { transition: none; }
}

/* Two-layer scrim: a deep vertical wash for text contrast plus a
   warm brand tint so the photography stays on-brand. */
.vd-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(26,10,15,.72) 0%, rgba(26,10,15,.42) 42%, rgba(26,10,15,.88) 100%),
    linear-gradient(115deg, rgba(168,22,57,.55) 0%, rgba(26,10,15,.1) 62%);
}

.vd-hero-inner { position: relative; z-index: 1; padding-bottom: 3.5rem; }
.vd-hero-copy { max-width: 760px; }

.vd-eyebrow { color: rgba(255,255,255,.86); margin-bottom: 1.15rem; }
.vd-eyebrow-rule { width: 42px; height: 1px; background: var(--vd-gold); display: inline-block; }

.vd-hero-title {
  color: #fff;
  font-size: clamp(2.6rem, 6vw, 5.1rem);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -.015em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
.vd-hero-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--vd-gold-soft);
}
.vd-hero-sub {
  font-size: clamp(.98rem, 1.4vw, 1.18rem);
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.84);
  margin-bottom: 2.4rem;
}

/* ---------- Search bar ---------- */
.vd-searchbar {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: .5rem .5rem .5rem 1.75rem;
  box-shadow: var(--vd-shadow-xl);
  max-width: 1000px;
}
.vd-search-field { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: .5rem .35rem; min-width: 0; }
.vd-search-field label {
  font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--vd-muted); margin-bottom: .1rem;
}
.vd-search-field select,
.vd-search-field input {
  border: 0; background: transparent; padding: 0;
  font-family: var(--vd-font-body); font-size: .95rem; color: var(--vd-ink);
  width: 100%; outline: none;
  appearance: none; -webkit-appearance: none;
}
.vd-search-field select { cursor: pointer; }
.vd-search-field input::placeholder { color: #b6acb1; }
.vd-search-div { width: 1px; background: var(--vd-line); margin: .7rem 0; flex: 0 0 1px; }

.vd-search-btn {
  flex: 0 0 auto;
  border: 0; border-radius: 999px;
  background: var(--vd-brand); color: #fff;
  padding: 0 2rem; margin-left: .75rem;
  font-family: var(--vd-font-body); font-weight: 500; font-size: .95rem;
  letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: background .18s ease, transform .18s ease;
}
.vd-search-btn:hover { background: var(--vd-brand-darker); transform: translateY(-1px); }

@media (max-width: 860px) {
  .vd-searchbar { flex-direction: column; border-radius: 20px; padding: .85rem; gap: .2rem; }
  .vd-search-div { width: auto; height: 1px; margin: 0 .5rem; }
  .vd-search-btn { margin: .6rem 0 0; padding: .85rem; width: 100%; justify-content: center; }
}

.vd-hero-quick {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: 1.5rem; font-size: .85rem;
}
.vd-hero-quick span {
  color: rgba(255,255,255,.6); letter-spacing: .14em; text-transform: uppercase; font-size: .7rem;
  margin-right: .2rem;
}
.vd-hero-quick a {
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px; padding: .32rem .95rem;
  transition: background .18s ease, border-color .18s ease;
}
.vd-hero-quick a:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); color: #fff; }

/* ---------- Hero stats ---------- */
.vd-hero-stats {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255,255,255,.16);
  background: rgba(20, 8, 12, .34);
  backdrop-filter: blur(6px);
  padding: 1.35rem 0;
}
.vd-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.vd-stat-row > div { text-align: center; }
.vd-stat-row strong {
  display: block;
  font-family: var(--vd-font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 600; color: #fff; line-height: 1.1;
}
.vd-stat-row span {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
@media (max-width: 767px) {
  .vd-hero { min-height: 0; padding-top: 3rem; }
  .vd-stat-row { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
}

/* ==========================================================
   SECTIONS
   ========================================================== */
.vd-section { padding: 5rem 0; }
.vd-section-head { text-align: center; margin-bottom: 2.75rem; }
.vd-section-head h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 500; margin: .5rem 0 .45rem;
}
.vd-section-head p { color: var(--vd-muted); margin: 0; font-weight: 300; font-size: 1rem; }
.vd-rule { width: 54px; height: 2px; border-radius: 2px; background: var(--vd-gold); margin: .9rem auto 0; }

/* ---------- Slider ---------- */

@media (min-width: 1400px) { .vd-slider { grid-auto-columns: minmax(262px, 1fr); } }

/* ---------- Category card ---------- */
.vd-cat-icon {
  position: absolute; left: 1rem; bottom: 1rem;
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,.94); color: var(--vd-brand);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  backdrop-filter: blur(4px);
}

/* ---------- Listing card ---------- */
.vd-card {
  border: 1px solid var(--vd-line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.vd-card:hover { transform: translateY(-6px); box-shadow: var(--vd-shadow-lg); border-color: transparent; }
.vd-card-media { position: relative; aspect-ratio: 4/3; background: var(--vd-brand-tint); overflow: hidden; }
.vd-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.vd-card:hover .vd-card-media img { transform: scale(1.07); }
.vd-card-media .vd-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--vd-brand); opacity: .3; font-size: 2rem;
}
/* Wrapping, and never past the heart in the opposite corner: at four cards to
   a row there is only about 100px of badge space per line. */
.vd-card-badges {
  position: absolute; top: .75rem; left: .75rem; right: 3.4rem;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.vd-badge {
  font-size: .64rem; font-weight: 600; letter-spacing: .12em;
  padding: .3rem .65rem; border-radius: 999px; text-transform: uppercase;
  backdrop-filter: blur(4px);
}
/* At four cards to a row a badge is only ~100px wide, and "Premium Partner"
   broke across two lines inside its own pill. It wraps to the next badge row
   instead. */
.vd-card-badges .vd-badge { white-space: nowrap; }
.vd-badge-featured { background: var(--vd-brand); color: #fff; }
.vd-badge-verified { background: rgba(255,255,255,.94); color: var(--vd-success); }
.vd-card-body { padding: 1.05rem 1.15rem 1.15rem; flex: 1; display: flex; flex-direction: column; }

/* Name and rating share the top line, the rating pinned right and never
   wrapping under a long name. */
.vd-card-head { display: flex; align-items: baseline; gap: .6rem; }
.vd-card-title {
  font-family: var(--vd-font-display);
  font-size: 1.22rem; font-weight: 600;
  color: var(--vd-ink); margin: 0; line-height: 1.25;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Where it is, what it is, what it serves — one flowing line rather than three
   stacked ones. Three rows of one short fact each cost 60px of card and read
   as a list of unrelated things; inline they read as one description, and the
   row only wraps when a name is long. */
.vd-card-lines {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: .7rem;
  row-gap: .15rem;
  margin: .45rem 0 .7rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--vd-muted);
  font-weight: 300;
}
.vd-card-lines > span {
  display: inline-flex; align-items: center; gap: .3rem;
  min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* No separator between the facts. A dot before each one after the first looked
   right until the row wrapped, where the dot came first on the new line with
   nothing in front of it. CSS cannot ask "are you at the start of a line?", so
   the dots are gone and the gap does the separating — the icons already say
   which fact is which. */
/* The place and the type share the first line and truncate rather than each
   taking a line of its own: at 258px of card, "Barakhamba Road, Delhi" and
   "5 Star Luxury Hotels" are 150 and 141px, so without a cap the row ran to
   three lines. 46% leaves room for the separator between them. */
/* Only when there are three of them: a photographer's card has no food line,
   so there is room for "Traditional Photography" in full and capping it would
   truncate for nothing. :nth-last-child is what makes the rule count. */
/* An even share, not "the type takes what the place leaves": letting it flex
   into the remainder crushed "Banquet Halls" to one letter on the cards whose
   place name was short enough for all three facts to share one line. */
.vd-card-lines > span:first-child:nth-last-child(3),
.vd-card-lines > span:nth-child(2):nth-last-child(2) { max-width: 46%; }
.vd-card-lines i.bi { flex: 0 0 auto; font-size: .82rem; color: #b7aeb2; }
.vd-card-food { gap: .25rem !important; }

/* The figure large, what it means small beside it. */
.vd-card-price { margin-top: auto; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.vd-card-price strong {
  font-size: 1.25rem; font-weight: 600; letter-spacing: .01em;
  color: var(--vd-ink);
  /* A range is one thing to read: "₹8,000 – ₹60,000" must not break after the
     dash. The unit beside it may still drop to its own line. */
  white-space: nowrap;
}
.vd-card-price small { font-size: .82rem; color: var(--vd-muted); font-weight: 400; }
.vd-card-price-ask { font-size: .92rem; }

/* Facts as chips, the way they read on a spec sheet. */
.vd-card-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; }
.vd-chip {
  padding: .3rem .6rem;
  border-radius: 8px;
  background: #f6f3f4;
  font-size: .78rem;
  color: #5c5257;
  white-space: nowrap;
}
.vd-chip-more { background: none; padding-inline: .2rem; text-decoration: underline; text-underline-offset: 3px; }
/* "Starting from ₹3.5L" — the headline number on a card, above the per-unit
   rate in the foot. */
/* The per-unit rate under a "Starting from" headline — "₹3,200 per plate"
   sitting below "₹3.5L", so both questions are answered in one block. */
.vd-fact-note { display: block; margin-top: .15rem; font-size: .78rem; font-weight: 400; color: var(--vd-muted, #7b838c); }
/* The enquiry panel's header is brand pink, where muted grey all but
   disappears. */
.vd-enquiry-price .vd-fact-note { color: rgba(255, 255, 255, .78); }

/* "Starting from ₹3.5L" — the only price on a card now, so it carries the
   weight the plate rate used to. */
.vd-price-start {
  font-size: 1rem;
  font-weight: 600;
  color: var(--vd-brand, #e82f5d);
  letter-spacing: .01em;
}
.vd-price { font-weight: 500; color: var(--vd-ink); font-size: .95rem; }
.vd-price small { font-weight: 300; color: var(--vd-muted); }

/* ---------- City tiles ---------- */

/* ---------- Filter sidebar ---------- */
.vd-filters { border: 1px solid var(--vd-line); border-radius: 18px; padding: 1.5rem; background: #fff; }

/* ---- The filters as a panel, below lg -------------------------------
   Same markup as the sidebar: .offcanvas-lg is a slide-in below the
   breakpoint and an ordinary block above it. Only the chrome changes. */
@media (max-width: 991.98px) {
  /* Bootstrap sizes an offcanvas from its own variable, so setting `width`
     here does nothing. A sliver of the page left showing is what tells you
     the panel is over it rather than a new screen. */
  .vd-filterpanel { --bs-offcanvas-width: min(92vw, 420px); }
  .vd-filterpanel .offcanvas-header { border-bottom: 1px solid var(--vd-line); }
  .vd-filterpanel .offcanvas-body { padding: 1rem; }
  /* The panel is the card now, so the form drops its own frame. */
  .vd-filterpanel .vd-filters { border: 0; border-radius: 0; padding: 0; }

  /* "Show N listings" stays on screen while the filters scroll under it —
     it is the only way out of the panel that applies anything. */
  .vd-filterpanel-foot {
    position: sticky;
    bottom: 0;
    margin: 1rem -1rem -1rem;
    padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--vd-line);
  }
}
.vd-filters h6 {
  font-family: var(--vd-font-body); font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .16em; color: var(--vd-muted);
}

/* ---------- Breadcrumb ---------- */
.vd-crumb { background: var(--vd-brand-tint); border-bottom: 1px solid var(--vd-line); padding: .9rem 0; }
.vd-crumb .breadcrumb { margin: 0; font-size: .84rem; }
.vd-crumb .breadcrumb-item.active { color: var(--vd-muted); }

/* ---------- Footer ---------- */
.vd-footer-site { background: var(--vd-ink); color: #fff; }
.vd-footer-site a { color: rgba(255,255,255,.72); font-weight: 300; }
.vd-footer-site a:hover { color: var(--vd-brand); }
.vd-footer-site h6 {
  color: #fff; font-family: var(--vd-font-body);
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
}
.vd-footer-logo { height: 52px; width: auto; }

/* ---------- WhatsApp FAB ---------- */
.vd-whatsapp {
  position: fixed; right: 20px; bottom: 20px; z-index: 1030;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; box-shadow: 0 8px 24px rgba(37,211,102,.42);
  transition: transform .2s ease;
}
.vd-whatsapp:hover { color: #fff; transform: scale(1.07); }

/* ---------- Empty state ---------- */
.vd-empty { text-align: center; padding: 4rem 1rem; color: var(--vd-muted); }
.vd-empty i { font-size: 3rem; color: var(--vd-brand); opacity: .35; }

/* ---------- Buttons ---------- */
.btn { font-family: var(--vd-font-body); font-weight: 500; letter-spacing: .02em; border-radius: 999px; }
.btn-lg, .btn-vd, .btn-outline-vd { padding-inline: 1.6rem; }
.vd-card-foot .btn { padding-inline: 1.1rem; }

/* Subscription tier badge, shown to couples on cards */
.vd-badge-plan{
  background:linear-gradient(135deg, #2b1a20, #4a2a33);
  color:var(--vd-gold-soft);
  border:1px solid rgba(201,162,39,.5);
}

/* ==========================================================
   Shortlist, plate pricing and taxonomy chips
   ========================================================== */
.vd-heart{
  position:absolute;top:.7rem;right:.7rem;z-index:3;
  width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--vd-muted);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;cursor:pointer;
  transition:transform .18s ease, color .18s ease, background .18s ease;
  backdrop-filter:blur(4px);
}
.vd-heart:hover{transform:scale(1.12);color:var(--vd-brand)}
.vd-heart.is-on{color:var(--vd-brand);background:#fff}
.vd-heart.is-on i{animation:vd-pop .32s ease}
@keyframes vd-pop{0%{transform:scale(1)}45%{transform:scale(1.4)}100%{transform:scale(1)}}

.vd-card-rating{
  margin-left:auto;flex:0 0 auto;
  color:var(--vd-ink);font-weight:600;letter-spacing:0;text-transform:none;font-size:.9rem;
}
.vd-card-rating i{color:var(--vd-gold);font-size:.72rem}
.vd-card-rating em{font-style:normal;color:var(--vd-muted);font-weight:400}

/* .vd-plate is gone with the plate rate on the card; the dots below are still
   used by the listing page's own veg / non-veg markers. */
.vd-dot{width:9px;height:9px;border:1.5px solid;display:inline-block;flex:0 0 auto;position:relative}
.vd-dot::after{content:'';position:absolute;inset:1.5px;border-radius:50%}
.vd-dot-veg{border-color:#1f9d6b}
.vd-dot-veg::after{background:#1f9d6b}
.vd-dot-nonveg{border-color:#c0392b}
.vd-dot-nonveg::after{background:#c0392b}

/* Filter chips for sub-types */
.vd-subtypes{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.75rem}
.vd-subtype{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem 1rem;border-radius:999px;
  border:1px solid var(--vd-line);background:#fff;
  font-size:.86rem;color:var(--vd-body);
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.vd-subtype:hover{border-color:var(--vd-brand);color:var(--vd-brand)}
.vd-subtype.is-on{background:var(--vd-brand);border-color:var(--vd-brand);color:#fff}
.vd-subtype span{font-size:.74rem;opacity:.7}

/* Couple account shell */
.vd-acc-wrap{display:flex;justify-content:center;padding:3.5rem 1.15rem 4.5rem;background:var(--vd-brand-tint)}
/* ---- Phone sign-up: the number field and the code box (Phase 41) ------
   Signing up is one number and one code, so these two controls carry the whole
   screen and are sized accordingly. */
.vd-phonefield{display:flex;align-items:stretch}
.vd-phoneflag{
  display:inline-flex;align-items:center;gap:.4rem;flex:0 0 auto;
  padding:0 .65rem;font-size:.9rem;font-weight:600;color:var(--vd-ink,#241a1e);
  background:#f7f4f5;border:1px solid var(--vd-line,#ddd6d9);border-right:0;
  border-radius:10px 0 0 10px;white-space:nowrap;
}
.vd-phonefield .form-control{border-radius:0 10px 10px 0;min-width:0}
/* The code is six characters that get read back off a phone screen, so it is
   set large and spaced rather than as ordinary body text. */
.vd-otpbox{
  font-size:1.45rem;letter-spacing:.5em;text-align:center;font-weight:600;
  padding-block:.6rem;font-variant-numeric:tabular-nums;
}
.vd-otpbox::placeholder{letter-spacing:.35em;opacity:.35}

.vd-acc-card{
  width:100%;max-width:430px;background:#fff;
  border:1px solid var(--vd-line);border-radius:18px;
  padding:2.25rem;box-shadow:var(--vd-shadow-lg);
}
.vd-acc-title{font-size:1.75rem;font-weight:600;margin-bottom:.35rem}
.vd-acc-sub{color:var(--vd-muted);font-size:.92rem;margin-bottom:1.5rem}

/* Shortlist counter in the header */
.vd-nav-heart{position:relative}
.vd-nav-heart .badge{
  position:absolute;top:-2px;right:-6px;
  font-size:.6rem;padding:.15rem .35rem;border-radius:999px;
}

/* ==========================================================
   Filter controls — segmented pickers and number fields
   ========================================================== */
.vd-seg{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.4rem;
}
.vd-seg-opt{
  display:flex;align-items:center;justify-content:center;gap:.35rem;
  padding:.45rem .5rem;
  border:1px solid var(--vd-line);border-radius:9px;
  font-size:.82rem;color:var(--vd-body);cursor:pointer;
  background:#fff;text-align:center;
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.vd-seg-opt:hover{border-color:var(--vd-brand);color:var(--vd-brand)}
.vd-seg-opt input{position:absolute;opacity:0;width:0;height:0}
.vd-seg-opt.is-on{
  background:var(--vd-brand);border-color:var(--vd-brand);color:#fff;font-weight:500;
}
.vd-seg-opt.is-on .vd-dot{border-color:#fff}
.vd-seg-opt.is-on .vd-dot::after{background:#fff}
.vd-seg-opt i.bi{font-size:.8rem}
.vd-seg-opt:focus-within{box-shadow:0 0 0 3px rgba(232,47,93,.15)}

.vd-numfield{position:relative}
.vd-numfield i{
  position:absolute;left:.7rem;top:50%;transform:translateY(-50%);
  color:var(--vd-muted);font-size:.8rem;pointer-events:none;
}
.vd-numfield input{padding-left:2rem}
/* Spinners add noise in a filter column */
.vd-numfield input::-webkit-outer-spin-button,
.vd-numfield input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.vd-numfield input{-moz-appearance:textfield}

.vd-quickpick{display:flex;flex-wrap:wrap;gap:.3rem}
.vd-quick{
  border:1px solid var(--vd-line);background:#fff;
  border-radius:999px;padding:.2rem .6rem;
  font-size:.74rem;color:var(--vd-muted);cursor:pointer;
  transition:border-color .16s ease,color .16s ease;
}
.vd-quick:hover{border-color:var(--vd-brand);color:var(--vd-brand)}
.vd-quick.is-on{background:var(--vd-brand-soft);border-color:var(--vd-brand);color:var(--vd-brand-darker)}

/* Food / space tags on cards */
.vd-card-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.7rem}
.vd-tag{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.7rem;color:var(--vd-muted);
  border:1px solid var(--vd-line);border-radius:999px;
  padding:.2rem .55rem;background:#fff;
}
.vd-tag i.bi{font-size:.68rem}
.vd-tag-veg{border-color:#bfe3d3;color:#14764f;background:#f2fbf7}

/* "By Type" venue menu */
.vd-typemenu{min-width:260px;padding-top:.25rem}
.vd-typemenu-head{
  padding:.5rem .7rem .35rem;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--vd-brand);
}
.vd-typemenu .dropdown-item{padding:.45rem .7rem;font-size:.92rem}

/* ---------- Homepage: budget calculator band ---------- */
.vd-calcband { padding: 3rem 0; background: linear-gradient(140deg, var(--vd-brand-tint, #fdf2f5), #fff 72%); }
.vd-calcband-inner {
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
  border: 1px solid var(--vd-line, #ece7e9); border-radius: 18px;
  background: #fff; padding: 2rem 2.2rem;
}
.vd-calcband h2 { font-family: var(--vd-font-display); font-size: clamp(1.5rem, 2.8vw, 2.2rem); margin: .3rem 0 .6rem; }
.vd-calcband-copy { color: #5d5d63; max-width: 44rem; margin-bottom: 1.1rem; }
.vd-calcband-facts { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.8rem; }
.vd-calcband-facts li { text-align: center; }
.vd-calcband-facts strong {
  display: block; font-family: var(--vd-font-display);
  font-size: 1.9rem; color: var(--vd-brand, #b4123f); line-height: 1.1;
}
.vd-calcband-facts span { font-size: .78rem; color: #8a8a90; }
@media (max-width: 767.98px) {
  .vd-calcband-inner { grid-template-columns: 1fr; padding: 1.5rem; }
  .vd-calcband-facts { justify-content: space-between; gap: .8rem; }
}

/* Hero search: validation feedback over the background photo */
.vd-search-note{
  display:inline-flex;align-items:center;gap:.45rem;margin:.75rem 0 0;
  padding:.5rem .9rem;border-radius:999px;font-size:.85rem;
  background:rgba(255,255,255,.95);backdrop-filter:blur(4px);
}
.vd-search-note-danger{color:#b3123f}
.vd-search-note-success,.vd-search-note-info{color:#2f6f5e}
.vd-search-note i{font-size:.95rem}

/* ---- Category detail block on a listing page (Phase 18) ---------------
   Whatever the category's profile declares and the vendor filled in. */
.vd-spec-heading{
  font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--vd-muted);margin:1.5rem 0 .6rem;
}
.vd-spec-heading:first-of-type{margin-top:0}
.vd-spec-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0 2rem;margin:0;
}
.vd-spec-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.62rem 0;border-bottom:1px solid var(--vd-line,#eef0f2);
}
.vd-spec-row dt{
  font-weight:500;color:var(--vd-muted);font-size:.9rem;margin:0;
  min-width:0;                      /* a long label wraps instead of shoving */
}
.vd-spec-row dd{
  margin:0;text-align:right;font-weight:600;font-size:.92rem;
  white-space:nowrap;               /* "₹3,200" and "1,000 guests" stay whole */
  flex:0 0 auto;
}
/* A phone keeps the two columns. They used to stack — label on one line, value
   under it — which turned eight facts into sixteen lines and read as a list of
   headings rather than a menu card. */
@media (max-width:575.98px){
  .vd-spec-row{padding:.5rem 0;gap:.75rem}
  .vd-spec-row dt{font-size:.85rem}
  .vd-spec-row dd{font-size:.88rem}
}
/* The "show all details" toggle. Full width so it reads as the end of the
   block rather than as one more row in it. */
.vd-spec-toggle{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  width:100%;margin-top:.9rem;padding:.6rem 1rem;
  background:none;border:1px solid var(--vd-line,#eef0f2);border-radius:999px;
  color:var(--vd-brand);font-size:.88rem;font-weight:600;
}
.vd-spec-toggle:hover,.vd-spec-toggle:focus-visible{
  background:var(--vd-brand-tint,#fdf2f5);border-color:var(--vd-brand);
}
.vd-spec-toggle i{font-size:.8rem;transition:transform .15s ease}
.vd-spec-toggle.is-open i{transform:rotate(180deg)}

/* ---- The phone's filter rail (Phase 41) -------------------------------
   One scrolling row of pills above the results: the Filters button, then the
   narrowings people actually reach for. It bleeds to both screen edges, so a
   pill cut off at the right reads as "there is more here" rather than as the
   end of the row. */
.vd-fpills{
  display:flex;align-items:center;gap:.45rem;
  overflow-x:auto;overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  margin:0 calc(-1 * var(--vd-gutter, 1.15rem)) .9rem;
  padding:.15rem var(--vd-gutter, 1.15rem) .5rem;
  scrollbar-width:none;
}
.vd-fpills::-webkit-scrollbar{display:none}

.vd-fpill{
  display:inline-flex;align-items:center;gap:.35rem;flex:0 0 auto;
  white-space:nowrap;
  background:#fff;border:1px solid #ddd3d8;border-radius:999px;
  padding:.5rem .85rem;
  font-size:.86rem;font-weight:600;color:var(--vd-ink,#241a1e);
  text-decoration:none;line-height:1.1;
}
.vd-fpill i{font-size:.9rem}
.vd-fpill-caret{font-size:.65rem;color:#9b8f95;margin-left:.05rem}
.vd-fpill:hover,.vd-fpill:focus-visible{border-color:var(--vd-brand,#e82f5d);color:var(--vd-brand,#e82f5d)}
/* A pill that is doing something carries the brand, so the row says at a glance
   what is on without opening anything. */
.vd-fpill.is-on{
  border-color:var(--vd-brand,#e82f5d);background:var(--vd-brand-tint,#fdf2f5);
  color:var(--vd-brand-darker,#b3123f);
}
.vd-fpill.is-on .vd-fpill-caret{color:var(--vd-brand,#e82f5d)}
/* The Filters button is the way to everything else, so it leads the row. */
.vd-fpill.is-primary{border-color:var(--vd-ink,#241a1e);padding-right:.7rem}
.vd-fpill-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 .35rem;
  background:var(--vd-brand,#e82f5d);color:#fff;
  border-radius:999px;font-size:.72rem;font-weight:700;
}
.vd-fpill.is-clear{color:var(--vd-muted,#7b6f76);border-style:dashed}
.vd-fpill.is-clear:hover{color:var(--vd-brand,#e82f5d)}

.vd-fpill-wrap{flex:0 0 auto}
.vd-fpill-menu{
  --bs-dropdown-min-width:12rem;
  max-height:60vh;overflow-y:auto;
  border:1px solid var(--vd-line,#eef0f2);border-radius:14px;
  box-shadow:0 12px 34px rgba(36,26,30,.14);
  padding:.3rem;font-size:.9rem;
}
.vd-fpill-menu .dropdown-item{border-radius:9px;padding:.5rem .65rem}
.vd-fpill-menu .dropdown-item.active,
.vd-fpill-menu .dropdown-item:active{
  background:var(--vd-brand-tint,#fdf2f5);color:var(--vd-brand-darker,#b3123f);font-weight:600;
}

/* ---- City scope notice (Phase 19) ------------------------------------
   Says plainly when the chosen city is hiding something, and gives one
   click to see it. A filter the visitor cannot see is a filter they
   cannot trust. */
.vd-scope-note{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  background:var(--vd-brand-tint,#fdf2f5);
  border:1px solid var(--vd-line,#f0d9e0);
  border-radius:10px;padding:.65rem .9rem;margin:0 0 1.1rem;
  font-size:.9rem;color:var(--vd-muted);
}
.vd-scope-note i{color:var(--vd-brand)}
.vd-scope-note strong{color:var(--vd-ink,#1a1a1a)}
.vd-scope-note a{color:var(--vd-brand);font-weight:600;text-decoration:none}
.vd-scope-note a:hover{text-decoration:underline}

/* ---- Category rails on the homepage (Phase 20) -----------------------
   One row per service, scrolling sideways. A wrapping grid would push the
   later categories off-screen, and seeing that there are also photographers
   and mehendi artists below is the point of the layout. */
.vd-rail-section{padding:2.6rem 0 .5rem}
.vd-rail-section + .vd-rail-section{padding-top:1.2rem}

.vd-rail-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;margin-bottom:1.1rem;flex-wrap:wrap;
}
.vd-rail-title{
  font-size:clamp(1.25rem,2.4vw,1.6rem);margin:0;line-height:1.25;
}
.vd-rail-sub{margin:.2rem 0 0;color:var(--vd-muted);font-size:.92rem}

.vd-rail-actions{display:flex;align-items:center;gap:.5rem}
.vd-rail-arrow{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--vd-line,#e3e6ea);background:#fff;
  display:grid;place-items:center;cursor:pointer;color:var(--vd-ink);
  transition:border-color .16s ease,color .16s ease,opacity .16s ease;
}
.vd-rail-arrow:hover{border-color:var(--vd-brand);color:var(--vd-brand)}
.vd-rail-arrow[disabled]{opacity:.35;cursor:default}
.vd-rail-arrow[disabled]:hover{border-color:var(--vd-line,#e3e6ea);color:var(--vd-ink)}
.vd-rail-more{
  white-space:nowrap;font-weight:600;font-size:.9rem;
  color:var(--vd-brand);text-decoration:none;
}
.vd-rail-more:hover{text-decoration:underline}

.vd-rail{
  display:flex;gap:1rem;
  overflow-x:auto;
  /* Room for the card's own hover lift and shadow, which a plain
     overflow:auto would clip. */
  padding:.35rem .35rem 1.4rem;margin:0 -.35rem;
  scrollbar-width:none;
}
.vd-rail::-webkit-scrollbar{display:none}
.vd-rail-item{
  flex:0 0 clamp(250px,78vw,296px);
  scroll-snap-align:start;
  /* A flex item will not shrink below its content's own minimum unless it is
     told it may. Without this the card's widest row — the chips — held a
     four-card rail 19px wider than the strip at 1100px, so the fourth card sat
     half under the edge with no arrows to reach it. */
  min-width:0;
}
/* Snapping only where the arrows are hidden anyway. On a pointer device it
   fights the arrows: an eased animation moves a pixel or two on its first
   frames and snap drags it straight back, so the rail never moves at all. */
@media (hover:none){
  .vd-rail{scroll-snap-type:x proximity}
}
/* Four full cards and 30% of the fifth.
   ---------------------------------------------------------------------------
   This used to be exactly four across, with a quarter-rem rounding allowance
   specifically to stop a sliver of the fifth card showing. That sliver is now
   the point: a cut-off card is the clearest signal a row scrolls, and it earns
   far more swipes than an arrow button does.

   For N full cards plus a 0.3 peek there are N gaps before the partial card,
   so the basis is (100% - N*gap) / (N + 0.3).

   The column count steps down with the viewport because the card itself has a
   floor — its own base width is clamped to a 250px minimum, and below roughly
   240px the badge row and the price range start breaking. Four-and-a-bit only
   fits above 1200px; asking for it at 992px gives 183px cards and the card
   falls apart. So the peek is constant and the number of full cards is not. */
@media (min-width:768px){
  /* 2 full + 30%. Measured 293px a card at 820 — wider than the 167px that
     four-across used to give at this width, not narrower. */
  .vd-rail-item{flex-basis:calc((100% - 2rem) / 2.3)}
}
@media (min-width:992px){
  /* 3 full + 30%. Measured 244px at 992, 272px at 1100. */
  .vd-rail-item{flex-basis:calc((100% - 3rem) / 3.3)}
}
@media (min-width:1200px){
  /* 4 full + 30%, which is what was asked for. Measured 225px a card at 1200,
     241px at 1280, 273px at 1440.
     The card's badge row wraps to four lines below about 270px — but it did
     that at the old four-across widths too (245px at 1200), so this is not a
     regression, and height:100% on the card keeps the row even regardless. */
  .vd-rail-item{flex-basis:calc((100% - 4rem) / 4.3)}
}
/* A single listing: nothing to scroll, no arrows.
   It keeps the same card width as the scrolling rails above and below it —
   a quarter-width basis here left a lone card 164px wide sitting next to
   293px cards in the next row down.
   0 1, not 0 0: a fixed basis plus gaps can land a pixel or two over the
   container and produce a scrollbar on a row that is supposed to fit. Allowed
   to shrink but not grow, so the card sits left instead of stretching. */
.vd-rail-fits{scroll-snap-type:none}
@media (min-width:768px){
  .vd-rail-fits .vd-rail-item{flex:0 1 calc((100% - 2rem) / 2.3)}
}
@media (min-width:992px){
  .vd-rail-fits .vd-rail-item{flex:0 1 calc((100% - 3rem) / 3.3)}
}
@media (min-width:1200px){
  .vd-rail-fits .vd-rail-item{flex:0 1 calc((100% - 4rem) / 4.3)}
}

/* The card fills its slot so every card in a row is the same height. */
.vd-rail-item > .vd-card{height:100%}

@media (hover:none){
  .vd-rail-arrow{display:none}
}
/* Set by rails.js when the row fits the current viewport. */
.vd-rail-noscroll .vd-rail-arrow{display:none}

/* The rails sit in one tinted band rather than alternating backgrounds,
   which would make each service look like a separate page section. */
.vd-rails{padding:1rem 0 2rem}
.vd-rails-inner > .vd-rail-section:first-child{padding-top:2.2rem}

/* ---- Header fit between 1200 and 1400 --------------------------------
   navbar-expand-xl unfolds the menu at 1200px, where a 1366px laptop has to
   carry the logo, five menu items, a search box and four actions on one row.
   Everything tightens a notch here rather than handing that laptop a
   hamburger — the alternative was the right-hand end being clipped, which
   body { overflow-x: hidden } hides instead of showing as a scrollbar. */
/* "Entertainment" or "Artists", on a breakpoint Bootstrap does not have.
   d-xxl-* switches at 1400, but this row is still 33px short of fitting seven
   items there. 1600 is where the tightening band ends, and switching the label
   at the same point stacks two jumps on one pixel and leaves 8px of clearance;
   1700 is the first width where the long form has room to breathe. Below xl
   the whole bar is hidden and the flyout shows the full category name, so
   neither class applies. */
.vd-navlbl-long  { display: none; }
.vd-navlbl-short { display: inline; }
@media (min-width: 1700px) {
  .vd-navlbl-long  { display: inline; }
  .vd-navlbl-short { display: none; }
}

@media (min-width:1200px) and (max-width:1399.98px){
  .vd-header .vd-navrow { gap: .25rem; padding-inline: 1rem; }
  .vd-site-logo { height: 46px; }
  .vd-header .nav-link{
    padding-left:.3rem;
    padding-right:.3rem;
    font-size:.9rem;
  }
  /* Seven items in the bar leaves this band about 30px short. Everything
     trimmed here is on the right-hand side, which is worth double: the grid's
     outer tracks are held equal, so a pixel off this group is also a pixel
     less reserved beside the logo. The city switch keeps its pin and its
     name — only the chevron goes, and the whole control is still a button. */
  .vd-cityswitch .bi-chevron-down { display: none; }
  .vd-navside { gap: .2rem; }
  .vd-hsearch-input { font-size: .83rem; }
  .vd-cityswitch{
    padding:.3rem .5rem;
    font-size:.78rem;
  }
  .vd-navside .btn{font-size:.79rem;padding-left:.45rem;padding-right:.45rem}
}

/* ---- Header fit between 1400 and 1600 --------------------------------
   The same squeeze one notch gentler. Six menu items replaced five when
   About Us and Pricing came out of the "More" dropdown, and the grid's two
   outer tracks are held equal, so the 429px right-hand group reserves 429px
   on the logo's side as well. On a 1400px screen that leaves the menu 467px
   for 491px of labels. Shrinking the menu only buys back half of what it
   gives up — the row stays centred, so each pixel saved is split between the
   two ends — hence a narrower gutter as well, which buys the whole amount. */
@media (min-width:1400px) and (max-width:1599.98px){
  .vd-header .vd-navrow { padding-inline: max(1.15rem, 1.8%); }
  /* Bootstrap's own .navbar-expand-xl .navbar-nav .nav-link carries three
     classes and wins against .vd-navmain .nav-link, so the header's padding
     is set from .vd-header here or not at all. */
  .vd-header .vd-navmain .nav-link { padding-inline: .36rem; font-size: .93rem; }
  /* Worth twice its width: the two outer tracks are equal, so 22px trimmed
     from the button reserves 22px less on the logo's side as well. 1.6rem of
     padding either side of "List Your Business" is the one place on this row
     with that much to give. */
  .vd-navside .btn { padding-inline: .9rem; }
}

/* ---- Search-bar pickers (Phase 22) -----------------------------------
   Shared by "What are you looking for" and "Where". A searchable panel over
   a plain select — the select stays in the DOM and stays what submits, so
   this is styling over a working control, not a replacement for one. */
.vd-pickfield{position:relative}
.vd-pick-input{
  width:100%;border:0;padding:0;background:none;
  font:inherit;outline:none;color:var(--vd-ink,#222);
}
.vd-pick-input::placeholder{color:var(--vd-muted,#9aa0a6);opacity:1}

.vd-pickpanel{
  position:absolute;z-index:60;left:-1rem;right:-1rem;top:calc(100% + 1.1rem);
  background:#fff;border-radius:18px;
  box-shadow:0 12px 42px rgba(0,0,0,.17);
  border:1px solid rgba(0,0,0,.06);
  padding:.75rem;max-height:min(420px,60vh);overflow-y:auto;
  min-width:320px;
}
.vd-pickpanel[hidden]{display:none}
.vd-pickpanel{color:var(--vd-ink,#222)}
.vd-pickpanel-head{
  font-size:.78rem;font-weight:600;letter-spacing:.02em;
  color:var(--vd-muted,#6c757d);margin:.15rem .55rem .5rem;
}
.vd-pickpanel-none{
  margin:.6rem .55rem;font-size:.86rem;color:var(--vd-muted,#6c757d);
}

.vd-pickopt{
  display:flex;align-items:center;gap:.85rem;width:100%;
  padding:.5rem .55rem;border:0;border-radius:12px;background:none;
  text-align:left;cursor:pointer;font:inherit;
  /* Explicit, not inherit: the panel sits inside the hero, whose text is
     white, so inheriting rendered white names on a white panel. */
  color:var(--vd-ink,#222);
  transition:background .12s ease;
}
.vd-pickopt[hidden]{display:none}
.vd-pickopt:hover,.vd-pickopt.is-active{background:#f4f4f5}
.vd-pickopt-icon{
  flex:0 0 auto;width:46px;height:46px;border-radius:12px;
  display:grid;place-items:center;font-size:1.15rem;
}
.vd-pickopt-text{display:flex;flex-direction:column;min-width:0}
.vd-pickopt-text strong{font-size:.95rem;font-weight:600;line-height:1.3;color:var(--vd-ink,#222)}
.vd-pickopt-text small{font-size:.82rem;color:var(--vd-muted,#6c757d)}

/* Tones give the list a scannable rhythm rather than 22 identical rows. */
.vd-pickopt-icon.tone-city{background:#fdeef3;color:#c2185b}
.vd-pickopt-icon.tone-sand{background:#fdf3e7;color:#b26a1d}
.vd-pickopt-icon.tone-forest{background:#e9f6ee;color:#1e7a45}
.vd-pickopt-icon.tone-heritage{background:#f2eefb;color:#5b3fa8}
.vd-pickopt-icon.tone-river{background:#e8f2fb;color:#1a6bb5}
.vd-pickopt-icon.tone-all{background:#eef0f2;color:#41464b}

@media (max-width:767.98px){
  .vd-pickpanel{
    left:-.6rem;right:-.6rem;min-width:0;
    max-height:min(340px,54vh);
  }
  .vd-pickopt-icon{width:40px;height:40px}
}

/* Only while the destination panel is open, so nothing else on the hero
   changes its stacking for the rest of the time. */
.vd-hero-inner.vd-hero-lift{z-index:5}

/* ---- "When" on the search bar ---------------------------------------
   A native date input, so the phone keyboard and the OS picker both do the
   right thing. Empty date inputs render "dd/mm/yyyy" in most browsers, which
   reads as noise next to the other placeholders, so a ghost label covers it
   until a date is chosen. */
.vd-datefield{position:relative}
.vd-datefield input[type="date"]{
  width:100%;
  /* Keep the browser's own calendar button reachable. */
  min-height:1.5rem;
}
.vd-date-ghost{
  position:absolute;left:.35rem;right:1.6rem;bottom:.5rem;
  pointer-events:none;background:#fff;
  color:#b6acb1;font-size:.95rem;line-height:1.5rem;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
/* Hidden by default, so without JavaScript the native dd/mm/yyyy shows and
   nothing is ever covered up wrongly. phone-date.js adds .is-empty while the
   field has no value and is not focused.
   CSS alone cannot do this: an empty date input with no `required` matches
   :valid, so a :valid rule hides the ghost the moment the page loads. */
.vd-date-ghost{display:none}
.vd-datefield.is-empty input[type="date"]:not(:focus) + .vd-date-ghost{display:block}

/* The search bar is white at every width, so the ghost keeps its white
   backing on mobile too — transparent let the native dd/mm/yyyy show
   through underneath it. */


/* ==========================================================
   COMPARE — card button and the floating tray.
   On every page, so they live here rather than compare.css.
   ========================================================== */
/* Bottom-left of the card image, with a word on it. The icon-only version was
   invisible in practice — a small grey glyph on a photograph reads as part of
   the photograph. */
.vd-compare-btn{
  position:absolute; left:.7rem; bottom:.7rem; z-index:3;
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.32rem .6rem; border:0; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.94); color:#3d3d44;
  font-size:.72rem; font-weight:600; letter-spacing:.02em; line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
  backdrop-filter:blur(4px);
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.vd-compare-btn i{font-size:.8rem}
.vd-compare-btn:hover{transform:translateY(-1px); color:var(--vd-brand,#b4123f)}
.vd-compare-btn.is-on{background:var(--vd-brand,#b4123f); color:#fff}
.vd-compare-btn:focus-visible{outline:2px solid var(--vd-brand,#b4123f); outline-offset:2px}

.vd-compare-tray{
  position:fixed; left:0; right:0; bottom:0; z-index:1035;
  background:#14181c; color:#fff; padding:.7rem 0;
  box-shadow:0 -6px 24px rgba(0,0,0,.22);
  transform:translateY(100%); transition:transform .28s ease;
}
.vd-compare-tray.is-open{transform:translateY(0)}
.vd-compare-tray-inner{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.vd-compare-tray-items{display:flex; gap:.5rem; flex:1 1 auto; flex-wrap:wrap; min-width:0}
.vd-compare-chip{
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(255,255,255,.1); border-radius:999px; padding:.25rem .3rem .25rem .3rem;
  font-size:.8rem; max-width:13rem;
}
.vd-compare-chip img{width:1.6rem; height:1.6rem; border-radius:999px; object-fit:cover}
.vd-compare-chip em{
  font-style:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding-left:.15rem;
}
.vd-compare-chip.is-new em{opacity:.75}
.vd-compare-chip button{
  border:0; background:transparent; color:rgba(255,255,255,.65); cursor:pointer;
  padding:0 .2rem; font-size:.9rem; line-height:1;
}
.vd-compare-chip button:hover{color:#fff}
.vd-compare-tray-cta{display:flex; align-items:center; gap:.75rem; margin-left:auto}
.vd-compare-count{font-size:.82rem; color:rgba(255,255,255,.7)}
.vd-compare-count b{color:#fff}

@media (max-width:767.98px){
  /* The listing page already has a fixed enquiry bar at the bottom; the tray
     sits above it rather than on top of it. */
  .vd-compare-tray{padding:.55rem 0}
  .vd-compare-chip{max-width:9rem; font-size:.75rem}
  .vd-compare-tray-cta{margin-left:0; width:100%; justify-content:space-between}
}
body:has(.vd-mobile-cta) .vd-compare-tray{bottom:var(--vd-mobile-cta-h,64px)}


/* ==========================================================
   CITY x CATEGORY LANDING PAGES
   ========================================================== */
.vd-place-intro{padding:1.75rem 0 .5rem}
.vd-place-title{
  font-family:var(--vd-font-display); font-size:clamp(1.6rem,3.4vw,2.3rem);
  margin:0 0 .5rem; letter-spacing:-.01em;
}
.vd-place-lead{color:#5b6068; font-size:.97rem; max-width:52rem; margin:0 0 .9rem; line-height:1.6}
.vd-place-facts{display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin-bottom:.25rem}
.vd-place-facts span{
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--vd-brand-tint,#f6eef1); color:var(--vd-brand,#b4123f);
  font-size:.78rem; font-weight:600; padding:.32rem .7rem; border-radius:999px;
}
.vd-place-facts i{font-size:.8rem}

.vd-place-links{padding:2rem 0 2.5rem; border-top:1px solid var(--vd-line,#ece7e9); margin-top:2rem}
.vd-place-links-h{
  font-size:1rem; font-weight:700; margin:0 0 .7rem;
}
.vd-place-links-h:not(:first-child){margin-top:1.6rem}
.vd-place-chiprow{display:flex; flex-wrap:wrap; gap:.4rem}
.vd-place-chiprow a{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid var(--vd-line,#ece7e9); border-radius:999px;
  padding:.36rem .8rem; font-size:.82rem; text-decoration:none; color:#3d3d44;
  background:#fff; transition:border-color .16s ease,color .16s ease;
}
.vd-place-chiprow a:hover{border-color:var(--vd-brand,#b4123f); color:var(--vd-brand,#b4123f)}
.vd-place-chiprow em{
  font-style:normal; font-size:.72rem; color:#8b8b92;
  background:#f4f4f6; border-radius:999px; padding:.1rem .4rem;
}


/* ==========================================================
   SHARED SHORTLIST — the page the family opens
   ========================================================== */
.vd-share-head{max-width:46rem}
.vd-share-eyebrow{
  display:inline-block; background:var(--vd-brand-tint,#f6eef1); color:var(--vd-brand,#b4123f);
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:999px; margin-bottom:.7rem;
}
.vd-share-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(20rem,1fr)); gap:1.1rem}
.vd-share-card{
  border:1px solid var(--vd-line,#ece7e9); border-radius:14px; overflow:hidden;
  background:#fff; display:flex; flex-direction:column;
}
.vd-share-media{display:block; aspect-ratio:16/10; background:var(--vd-brand-tint,#f6eef1)}
.vd-share-media img{width:100%; height:100%; object-fit:cover; display:block}
.vd-share-media .vd-placeholder{display:grid; place-items:center; height:100%; color:#c7b3bb; font-size:1.6rem}
.vd-share-body{padding:.9rem 1rem 1rem; display:flex; flex-direction:column; gap:.35rem}
.vd-share-cat{font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--vd-brand,#b4123f); font-weight:700}
.vd-share-name{font-size:1.02rem; margin:0; font-weight:700; line-height:1.3}
.vd-share-name a{color:inherit; text-decoration:none}
.vd-share-name a:hover{color:var(--vd-brand,#b4123f)}
.vd-share-meta{font-size:.82rem; color:#6c6c72; line-height:1.5}
.vd-share-price{font-weight:700; color:var(--vd-brand,#b4123f); font-size:.95rem}

.vd-share-tally{display:flex; gap:.8rem; font-size:.82rem; color:#6c6c72; margin-top:.2rem}
.vd-share-tally .is-up{color:#1a7f47}
.vd-share-tally .is-down{color:#9aa0a6}

.vd-share-note{
  font-size:.82rem; background:#f8f9fa; border-radius:8px; padding:.45rem .6rem;
  line-height:1.45; display:flex; gap:.35rem; flex-wrap:wrap; align-items:baseline;
}
.vd-share-note b{font-weight:700}

.vd-share-form{display:flex; flex-direction:column; gap:.4rem; margin-top:.5rem;
  border-top:1px solid var(--vd-line,#ece7e9); padding-top:.7rem}
.vd-share-actions{display:flex; gap:.4rem; align-items:center}

@media (max-width:575.98px){
  .vd-share-grid{grid-template-columns:1fr}
}

/* ---- share box on the couple's own shortlist ---------------------------- */
.vd-sharebox{
  border:1px solid var(--vd-line,#ece7e9); border-left:3px solid var(--vd-brand,#b4123f);
  border-radius:12px; background:#fff; padding:1.1rem 1.2rem; margin-bottom:1.5rem;
}
.vd-sharebox-h{font-size:1rem; font-weight:700; margin:0 0 .25rem}
.vd-sharebox-sub{font-size:.87rem; color:#6c6c72; margin:0 0 .8rem; max-width:44rem; line-height:1.55}
.vd-sharebox-row{display:flex; gap:.5rem; flex-wrap:wrap}
.vd-sharebox-row input{flex:1 1 16rem; min-width:0; font-size:.85rem; background:#fafbfc}
.vd-sharebox-foot{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin-top:.75rem; padding-top:.7rem; border-top:1px solid var(--vd-line,#ece7e9);
  font-size:.82rem;
}
@media (max-width:575.98px){
  .vd-sharebox-row .btn{flex:1 1 auto}
}

/* ---- Show/hide on password fields -----------------------------------
   Injected by assets/js/password-toggle.js into every password input, so
   it has to sit correctly whether the field already had an .input-group
   (the login screens) or not (the profile and register forms). */
.vd-pw-toggle{
  border-color:var(--bs-border-color,#dee2e6);
  color:#6c757d;
}
.vd-pw-toggle:hover,
.vd-pw-toggle:focus{
  background:#f3f1f2;
  color:#241a1e;
  border-color:var(--bs-border-color,#dee2e6);
}
/* The button must not inherit the field's invalid styling and turn red. */
.was-validated .vd-pw-toggle,
.vd-pw-toggle:focus-visible{box-shadow:none}


/* ---- "has a video" badge on a listing card ---------------------------
   Bottom-right: the badges own the top-left, the heart the top-right and
   the Compare pill the bottom-left. Small and quiet — it says a video
   exists, it is not a player. */
.vd-card-video{
  position:absolute; right:.6rem; bottom:.6rem; z-index:2;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(20,14,16,.62);
  color:#fff; font-size:1rem; line-height:1;
  backdrop-filter:blur(2px);
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  pointer-events:none;        /* the whole card is the link */
  transition:background .2s ease, transform .2s ease;
}
.vd-card:hover .vd-card-video{
  background:var(--vd-brand,#e82f5d);
  transform:scale(1.06);
}

/* ---- "What your family said" on the couple's shortlist -----------------
   The votes used to be collected and never shown to the person whose
   shortlist it is. This is their view of them: ordered by net score, so the
   favourite is at the top without reordering their own grid below. */
.vd-votes{
  border:1px solid #ece8ea; border-radius:14px;
  padding:1.1rem 1.25rem; margin-bottom:1.75rem;
  background:#fffdfd;
}
.vd-votes-head{margin-bottom:.85rem}
.vd-votes-h{font-size:1.05rem; font-weight:600; margin:0 0 .15rem}
.vd-votes-sub{font-size:.88rem; color:#6c757d}
.vd-votes-list{list-style:none; margin:0; padding:0}
.vd-votes-row{
  display:grid; grid-template-columns:1fr auto; gap:.35rem .75rem;
  align-items:center;
  padding:.6rem 0; border-top:1px solid #f2eef0;
}
.vd-votes-row:first-child{border-top:0}
.vd-votes-name{
  font-weight:600; font-size:.95rem; color:var(--vd-ink,#241a1e);
  text-decoration:none;
}
.vd-votes-name:hover{color:var(--vd-brand,#e82f5d); text-decoration:underline}
.vd-votes-tally{display:flex; gap:.7rem; font-size:.86rem; white-space:nowrap}
.vd-votes-tally .is-up{color:#1a7f4b}
.vd-votes-tally .is-down{color:#8b8289}
.vd-votes-notes{
  grid-column:1 / -1;
  list-style:none; margin:.25rem 0 0; padding:0;
  font-size:.85rem; color:#4a4046;
}
.vd-votes-notes li{padding:.2rem 0}
.vd-votes-notes b{margin-right:.3rem}
.vd-votes-none{
  font-size:.84rem; color:#8b8289;
  margin:.8rem 0 0; padding-top:.7rem; border-top:1px solid #f2eef0;
}

/* ======================================================================
   Mobile flyout menu (below xl)
   ====================================================================== */

/* The icon beside each link belongs to the flyout only — the desktop nav row
   is text, and always was. */
.vd-navicon { display: none; }

@media (max-width: 1199.98px) {
  /* Two classes, deliberately: Bootstrap styles this panel through
     `.offcanvas-xl.offcanvas-start`, which outranked the one-class rule that
     used to be here — so the width it asked for and its borderless edge never
     took effect, and the panel ran at Bootstrap's own 400px with a hairline
     down its edge. Matched here, they apply.
     Full width on a phone, where a strip of dimmed page beside a menu this long
     is nothing but a 20px miss-tap; 400px from a tablet up. */
  .vd-navpanel.offcanvas-start {
    width: min(100vw, 400px);
    max-width: 100vw;
    border-right: 0;
    box-shadow: 18px 0 48px rgba(36, 26, 30, .16);
  }

  .vd-navpanel .offcanvas-header {
    padding: .95rem 1.15rem;
    border-bottom: 1px solid #f1ecee;
    background: #fff;
  }
  .vd-navpanel .offcanvas-header .btn-close { opacity: .45; }
  .vd-navpanel .offcanvas-header .btn-close:hover { opacity: .9; }

  /* A flex column, so the footer block can be pushed to the bottom with
     margin-top:auto when the menu is short, and simply follow the links when a
     dropdown is open and the list grows past the screen. Bootstrap sets
     `display:flex` on .offcanvas-xl .offcanvas-body above the breakpoint for
     horizontal navbars, which is what we want there — this only overrides the
     direction below it. */
  .vd-navpanel .offcanvas-body {
    display: flex;
    flex-direction: column;
    padding: .6rem 1.15rem 1.15rem;
    overflow-y: auto;
  }
  .vd-navpanel .navbar-nav { margin: 0 !important; width: 100%; }

  /* ---- links ---- */
  .vd-navpanel .navbar-nav > .nav-item > .nav-link {
    display: flex;
    align-items: center;
    gap: .78rem;
    padding: .62rem .25rem;
    font-size: .98rem;
    font-weight: 500;
    color: var(--vd-ink, #241a1e);
    border-bottom: 1px solid #f4f0f2;
    border-radius: 8px;
    transition: color .15s ease, background-color .15s ease;
  }
  .vd-navpanel .navbar-nav > .nav-item:last-child > .nav-link { border-bottom: 0; }
  .vd-navpanel .navbar-nav > .nav-item > .nav-link:hover,
  .vd-navpanel .navbar-nav > .nav-item > .nav-link:focus-visible {
    color: var(--vd-brand, #e82f5d);
    background: #fdf4f7;
  }

  /* A soft tinted square behind each glyph, so the column of icons reads as
     structure rather than decoration. */
  .vd-navpanel .vd-navicon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #fdf1f5;
    color: var(--vd-brand, #e82f5d);
    font-size: .96rem;
  }

  /* Bootstrap's caret is a CSS triangle that cannot rotate. A chevron that
     turns when the section opens says which rows belong to it. */
  .vd-navpanel .navbar-nav > .nav-item > .dropdown-toggle { position: relative; }
  .vd-navpanel .navbar-nav > .nav-item > .dropdown-toggle::after {
    content: "\F282";
    font-family: "bootstrap-icons";
    border: 0;
    position: absolute;
    right: .35rem;
    font-size: .8rem;
    color: #b9b0b5;
    transition: transform .2s ease;
  }
  .vd-navpanel .navbar-nav > .nav-item > .dropdown-toggle.show::after {
    transform: rotate(180deg);
    color: var(--vd-brand, #e82f5d);
  }

  /* ---- dropdowns open inline ----
     A floating popover inside a 344px panel lands half off the screen. */
  .vd-navpanel .dropdown-menu {
    position: static !important;
    float: none;
    width: 100%;
    border: 0;
    box-shadow: none;
    padding: .15rem 0 .55rem 2.6rem;   /* aligns with the link text, past the icon */
    margin: 0 0 .35rem;
    background: transparent;
    transform: none !important;
  }
  .vd-navpanel .dropdown-menu .dropdown-item {
    padding: .46rem .2rem;
    font-size: .92rem;
    color: #5b5258;
    white-space: normal;
    border-radius: 6px;
  }
  .vd-navpanel .dropdown-menu .dropdown-item:hover,
  .vd-navpanel .dropdown-menu .dropdown-item:focus {
    background: transparent;
    color: var(--vd-brand, #e82f5d);
  }
  .vd-navpanel .dropdown-menu .dropdown-item i { font-size: .9rem; }
  .vd-navpanel .vd-mega-cols { columns: 2; column-gap: .9rem; }
  .vd-navpanel .vd-typemenu-head {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #a79da3;
    padding: .35rem .2rem .15rem;
  }
  .vd-navpanel .dropdown-divider { margin: .4rem 0; border-color: #f1ecee; }

  /* The city pill and the shortlist heart used to live in this panel. They
     are in the toolbar beside the logo now — a visitor changing city or
     checking a shortlist should not have to open the menu first. */

  /* ---- the footer block ---- */
  /* No margin-top:auto here. Pinning the block to the bottom of the panel
     left a large dead gap between the last link and the buttons whenever the
     menu did not fill the screen — which is most phones. It now simply
     follows the navigation, and any spare height falls below it. */
  .vd-navcta { padding-top: .9rem; }
}

/* ---- The flyout's own menu (below xl) --------------------------------
   One list of rows that open where they stand, in place of the bar's hover
   mega-panel and three dropdowns. Rows run to the panel's edges, so the
   negative margin here cancels the body padding they sit inside. */
.vd-mobilenav { margin: -.6rem -1.15rem 0; }

.vd-mnav-account {
  display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1.15rem;
  border-bottom: 1px solid #f1ecee;
  color: var(--vd-ink, #241a1e); text-decoration: none;
}
.vd-mnav-account:hover, .vd-mnav-account:focus-visible { background: #fdf7f9; color: var(--vd-ink, #241a1e); }
.vd-mnav-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  background: var(--vd-brand-tint, #fdf2f5); color: var(--vd-brand, #e82f5d);
  font-size: 1.05rem; font-weight: 700; line-height: 1;
}
.vd-mnav-who { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.vd-mnav-who strong { font-size: .98rem; font-weight: 600; }
.vd-mnav-who small { font-size: .76rem; color: var(--vd-muted, #7b6f76); }
.vd-mnav-account > i { font-size: .85rem; color: #c3b8be; flex: 0 0 auto; }

/* The grey bar is the whole separator between groups — a hairline alone did
   not read as a break on a list this long. */
.vd-mnav-block { border-bottom: 8px solid #f6f2f4; }
.vd-mnav-block:last-child { border-bottom: 0; }
/* Body font, not the display serif every other heading takes: this is a label
   on a list of controls, not a title on a page. */
.vd-mnav-title {
  font-family: var(--vd-font-body, inherit);
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  margin: 0; padding: .95rem 1.15rem .25rem;
}
.vd-mnav-list { list-style: none; margin: 0; padding: 0; }

.vd-mnav-row {
  display: flex; align-items: center; gap: .85rem; width: 100%;
  padding: .72rem 1.15rem;
  background: none; border: 0; border-bottom: 1px solid #f4eff1;
  color: var(--vd-ink, #241a1e); font-size: .95rem; font-weight: 500;
  text-align: left; text-decoration: none;
}
.vd-mnav-item:last-child > .vd-mnav-row { border-bottom: 0; }
.vd-mnav-row > span { flex: 1 1 auto; min-width: 0; }
.vd-mnav-row:hover, .vd-mnav-row:focus-visible { background: #fdf7f9; color: var(--vd-brand, #e82f5d); }
.vd-mnav-icon {
  flex: 0 0 auto; width: 1.55rem; text-align: center;
  font-size: 1.15rem; color: #6d6168;
}
.vd-mnav-caret { flex: 0 0 auto; font-size: .78rem; color: #b6abb1; transition: transform .18s ease; }
/* Open rows carry the brand colour, so an expanded group is obvious when the
   list is scrolled and its sub-items are the only thing on screen. */
.vd-mnav-row[aria-expanded="true"],
.vd-mnav-row[aria-expanded="true"] .vd-mnav-icon,
.vd-mnav-row[aria-expanded="true"] .vd-mnav-caret { color: var(--vd-brand, #e82f5d); }
.vd-mnav-row[aria-expanded="true"] .vd-mnav-caret { transform: rotate(180deg); }

.vd-mnav-sub { background: #faf7f8; border-bottom: 1px solid #f4eff1; }
.vd-mnav-sub ul { list-style: none; margin: 0; padding: .3rem 0 .45rem; }
.vd-mnav-sub a {
  display: block; padding: .46rem 1.15rem .46rem 3.55rem;
  font-size: .9rem; color: var(--vd-body, #4a3f45); text-decoration: none;
}
.vd-mnav-sub a:hover, .vd-mnav-sub a:focus-visible { color: var(--vd-brand, #e82f5d); }
.vd-mnav-all { font-weight: 600; color: var(--vd-brand, #e82f5d); }
/* Twenty-two city names run most of a screen in one column. */
.vd-mnav-sub-cols { columns: 2; column-gap: .4rem; }
.vd-mnav-sub-cols a { padding-left: 1.7rem; break-inside: avoid; }

/* ---- Sign In and List Your Business, at the foot of the flyout -------
   The two actions a visitor is most likely to want, after the navigation
   rather than in front of it. */
.vd-navcta {
  display: grid;
  gap: .5rem;
  border-top: 1px solid #f1ecee;
}
.vd-navcta a {
  display: flex;
  align-items: center;
  gap: .72rem;
  text-decoration: none;
  border-radius: 11px;
  padding: .66rem .85rem;
  line-height: 1.25;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.vd-navcta a > i { font-size: 1.12rem; flex: 0 0 auto; }
.vd-navcta a span { display: flex; flex-direction: column; min-width: 0; }
.vd-navcta a strong { font-size: .95rem; font-weight: 600; }
.vd-navcta a small { font-size: .76rem; opacity: .72; }

/* Signed out, Sign In is the filled one. Signed in, it becomes their account
   and List Your Business takes the outline — the account is where they are
   going, not a pitch. */
.vd-navcta-primary {
  background: var(--vd-brand, #e82f5d);
  color: #fff;
  box-shadow: 0 4px 12px rgba(232, 47, 93, .22);
}
.vd-navcta-primary:hover,
.vd-navcta-primary:focus { background: #cf2250; color: #fff; }

.vd-navcta-secondary {
  background: #fff;
  color: var(--vd-ink, #241a1e);
  border: 1px solid #e9e3e6;
}
.vd-navcta-secondary.is-brand {
  color: var(--vd-brand, #e82f5d);
  border-color: #f4cdd9;
  background: #fffafc;
}
.vd-navcta-secondary:hover,
.vd-navcta-secondary:focus {
  background: #fdf4f7;
  color: var(--vd-brand, #e82f5d);
  border-color: #f0c2d1;
}

.vd-navcta-call {
  justify-content: center;
  background: #241a1e;
  color: #fff;
  font-weight: 600;
  font-size: .92rem;
}
.vd-navcta-call:hover,
.vd-navcta-call:focus { background: #3a2b31; color: #fff; }

/* ---- contact details under the two buttons --------------------------- */
.vd-navcontact {
  display: grid;
  gap: .1rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid #f1ecee;
}
.vd-navcontact a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .2rem;
  font-size: .88rem;
  color: #6b6166;
  text-decoration: none;
  border-radius: 7px;
}
.vd-navcontact a i {
  font-size: .82rem;
  color: var(--vd-brand, #e82f5d);
  opacity: .75;
  flex: 0 0 auto;
}
.vd-navcontact a:hover,
.vd-navcontact a:focus { color: var(--vd-brand, #e82f5d); }

/* The floating WhatsApp button sits bottom-right at z-index 1030, under the
   panel's 1045 — but it still lands directly over the "List Your Business"
   row, and a bubble hovering on the menu reads as broken whichever one wins.
   Hidden outright while the flyout is open. */
body:has(.vd-navpanel.show) .vd-whatsapp { display: none; }

/* ---- Save to shortlist, on the listing page --------------------------
   The hearts on the cards are bare icons over a photograph. This one sits in
   a row of real buttons, so it is a button: outlined until it is saved, then
   filled, so the state is readable without hunting for a colour change. */
.vd-savebtn {
  border: 1px solid #e3d7dc;
  background: #fff;
  color: var(--vd-ink, #241a1e);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.vd-savebtn:hover,
.vd-savebtn:focus {
  border-color: var(--vd-brand, #e82f5d);
  color: var(--vd-brand, #e82f5d);
  background: #fff7f9;
}
.vd-savebtn.is-on {
  background: var(--vd-brand, #e82f5d);
  border-color: var(--vd-brand, #e82f5d);
  color: #fff;
}
.vd-savebtn.is-on:hover,
.vd-savebtn.is-on:focus {
  background: #cf2250;
  border-color: #cf2250;
  color: #fff;
}
/* Compare, beside it. Same outlined-then-filled logic so the two read as one
   pair of toggles, but filled in the ink colour rather than the brand pink —
   two pink buttons side by side made it unclear which state belonged to
   which, and comparing is the quieter of the two actions. */
.vd-comparebtn {
  border: 1px solid #e3d7dc;
  background: #fff;
  color: var(--vd-ink, #241a1e);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.vd-comparebtn:hover,
.vd-comparebtn:focus {
  border-color: var(--vd-ink, #241a1e);
  background: #f7f4f5;
}
.vd-comparebtn.is-on {
  background: var(--vd-ink, #241a1e);
  border-color: var(--vd-ink, #241a1e);
  color: #fff;
}
.vd-comparebtn.is-on:hover,
.vd-comparebtn.is-on:focus {
  background: #3a2b31;
  border-color: #3a2b31;
  color: #fff;
}

/* The sticky bar's icon-only version keeps the outline-vd shape it shares with
   the phone button beside it, and only fills once saved. */
.vd-savebtn-icon.is-on {
  background: var(--vd-brand, #e82f5d);
  border-color: var(--vd-brand, #e82f5d);
  color: #fff;
}

/* ======================================================================
   Vendors mega-menu
   ====================================================================== */
@media (min-width: 1200px) {
  /* The panel is centred on the header, not hung off its link. Dropping the
     `position: relative` Bootstrap puts on .dropdown moves the containing
     block up to .vd-header — which is sticky, so it is a positioned ancestor
     spanning the full viewport width. */
  .vd-vendormenu { position: static; }

  /* Bootstrap ships `.dropdown-menu[data-bs-popper] { left: 0 }`, and it still
     sets that attribute in static mode — so the selector has to outrank it or
     the panel centres on x=0 and hangs off the left of the window. */
  .dropdown-menu.vd-vmega,
  .dropdown-menu.vd-vmega[data-bs-popper] {
    position: absolute;
    top: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    margin-top: 0;
  }

  .vd-vmega {

    /* Wide enough for four columns of sub-types, and never wider than the
       window it is being centred in. */
    width: min(94vw, 980px);
    max-height: 78vh;
    overflow-y: auto;
    padding: 1.4rem 1.5rem .9rem;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(36, 26, 30, .16), 0 0 0 1px rgba(36, 26, 30, .06);

    /* Four real columns, filled by PHP. The browser's own multi-column
       balancing cannot split a group, so it left the first column ending
       400px above the third; the header builds four even columns instead
       and this only has to lay them out. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 1.75rem;
    align-items: start;
  }
  /* `.dropdown-menu.show` sets `display: block`, and two classes outrank one —
     so the grid has to be declared on a selector at least as specific or the
     four columns simply stack. */
  .dropdown-menu.vd-vmega.show { display: grid; }
  .vd-vmega-col { min-width: 0; }
  .vd-vmega-group { margin-bottom: 1.3rem; }
  .vd-vmega-col > .vd-vmega-group:last-child { margin-bottom: 0; }
}

.vd-vmega-head {
  display: block;
  font-size: .97rem;
  font-weight: 700;
  color: var(--vd-brand, #e82f5d);
  text-decoration: none;
  margin-bottom: .35rem;
}
.vd-vmega-head:hover,
.vd-vmega-head:focus { color: #cf2250; text-decoration: underline; }

.vd-vmega-list { list-style: none; margin: 0; padding: 0; }
.vd-vmega-list > li { margin: 0; }
.vd-vmega-list a {
  display: block;
  padding: .26rem 0;
  font-size: .9rem;
  color: #4a4046;
  text-decoration: none;
  line-height: 1.35;
}
.vd-vmega-list a:hover,
.vd-vmega-list a:focus { color: var(--vd-brand, #e82f5d); }

/* "View all X" closes each group, the way the heading opens it. */
.vd-vmega-all { font-weight: 600; color: var(--vd-ink, #241a1e) !important; }
.vd-vmega-all:hover, .vd-vmega-all:focus { color: var(--vd-brand, #e82f5d) !important; }

/* ---- inside the mobile flyout ---------------------------------------
   One column, indented to sit under the Vendors row like the other
   dropdowns, and no panel chrome of its own. */
@media (max-width: 1199.98px) {
  /* The flyout is one column, so the four desktop columns are dissolved
     (display: contents) and their groups become children of the panel again.
     Stacked as they are packed they would read Venues, Makeup, Invitations,
     Jewellery... — so each group carries its place in the admin's category
     order and that is what orders them here.
     `.show` is part of the selector on purpose: a bare `.vd-navpanel
     .vd-vmega` is two classes and beats Bootstrap's own `.dropdown-menu {
     display: none }`, which left the whole panel permanently open in the
     flyout instead of waiting to be tapped. */
  .vd-navpanel .vd-vmega.show { display: flex; }
  .vd-navpanel .vd-vmega {
    flex-direction: column;
    padding: .15rem 0 .55rem 2.6rem;
    max-height: none;
    overflow: visible;
    box-shadow: none;
  }
  .vd-navpanel .vd-vmega-col { display: contents; }
  .vd-navpanel .vd-vmega-group { order: var(--vd-order, 0); margin-bottom: .85rem; }
  .vd-navpanel .vd-vmega-head { font-size: .92rem; }
  .vd-navpanel .vd-vmega-list a { padding: .34rem 0; font-size: .89rem; }
}

/* ======================================================================
   About page (Phase 42)

   The page was an intro, three unstyled divs and four bare boxes —
   .vd-cat-tile, which the markup used for the statistics, had no CSS
   anywhere in the project, so those numbers rendered as loose text.
   ====================================================================== */

/* ---- the figures, counted live from the database ---- */
.vd-about-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
}
.vd-about-stat{
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
  padding:1.4rem 1rem;text-align:center;
  border:1px solid var(--vd-line,#ece7e9);border-radius:16px;background:#fff;
}
.vd-about-stat i{font-size:1.3rem;color:var(--vd-brand,#e82f5d);margin-bottom:.35rem}
.vd-about-stat strong{
  font-family:var(--vd-font-display);font-size:2rem;line-height:1;
  color:var(--vd-ink,#241a1e);
  /* Cormorant defaults to old-style figures, where 1 descends and reads as a
     capital I. Lining + tabular keeps "217" legible and the row aligned. */
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum","tnum";
}
.vd-about-stat span{font-size:.82rem;color:var(--vd-muted,#7b6f76)}

/* ---- a tinted band, so the page has a rhythm instead of one long column ---- */
.vd-about-band{
  background:linear-gradient(180deg,#fdf7f9,#fff);
  border-block:1px solid var(--vd-line,#ece7e9);
  padding-block:3.25rem;
}
.vd-about-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:1.75rem;
}

/* ---- the four numbered cards ---- */
.vd-about-card{
  position:relative;height:100%;
  padding:1.6rem 1.25rem 1.35rem;
  border:1px solid var(--vd-line,#ece7e9);border-radius:16px;background:#fff;
  transition:border-color .15s ease,transform .15s ease;
}
.vd-about-card:hover{border-color:var(--vd-brand,#e82f5d);transform:translateY(-2px)}
.vd-about-step{
  position:absolute;top:1rem;right:1.1rem;
  font-family:var(--vd-font-display);font-size:1.6rem;line-height:1;
  color:var(--vd-brand,#e82f5d);opacity:.22;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum";
}
.vd-about-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin-bottom:.9rem;
  border-radius:13px;background:var(--vd-brand-tint,#fdf2f5);
  color:var(--vd-brand,#e82f5d);font-size:1.25rem;
}
.vd-about-card h3{font-size:1.05rem;font-weight:700;margin:0 0 .4rem}
.vd-about-card p{font-size:.88rem;color:var(--vd-muted,#7b6f76);line-height:1.55;margin:0}

/* ---- the framed photograph ---- */
/* ---- the founder ----------------------------------------------------------
   The block is capped and centred rather than spanning the page. The container
   on this site is a percentage of the viewport, not a fixed 1320px, so a
   full-width row kept growing on a wide monitor: the photograph towered over
   the text, and capping only the prose left a large empty space to its right.
   Capping the row instead keeps the picture and the words together as one
   object, and the slack falls either side of the pair where it reads as margin
   rather than as a gap in the middle of the section. */
.vd-founder-row{max-width:1100px;margin-inline:auto}

/* The name is the heading here, so it takes the h2 size from the page and
   changes only colour — a person's name set in the brand red, with the role
   above it in the kicker. */
.vd-founder-name{color:var(--vd-brand-darker)}

@media (max-width:991.98px){
  /* Stacked, the photograph is the first thing on screen; centre it and keep
     it well short of full width so it does not fill the phone on its own. */
  .vd-founder-photo{max-width:340px;margin-inline:auto}
}

.vd-about-frame{position:relative;padding:.9rem 0 0 .9rem}
.vd-about-frame::before{
  content:'';position:absolute;inset:0 .9rem .9rem 0;
  border:1px solid var(--vd-brand,#e82f5d);border-radius:14px;opacity:.35;
}
.vd-about-frame img{
  position:relative;display:block;width:100%;height:auto;
  border-radius:14px;object-fit:cover;aspect-ratio:4/5;
}

/* ---- the vendor-side mini cards ---- */
.vd-about-mini{display:flex;gap:.75rem;align-items:flex-start}
.vd-about-mini i{
  flex:0 0 auto;font-size:1.1rem;color:var(--vd-brand,#e82f5d);
  margin-top:.15rem;
}
.vd-about-mini strong{display:block;font-size:.92rem;margin-bottom:.1rem}
.vd-about-mini span{font-size:.84rem;color:var(--vd-muted,#7b6f76);line-height:1.5}

/* ---- questions ---- */
.vd-about-faq .accordion-item{
  border:1px solid var(--vd-line,#ece7e9);border-radius:13px!important;
  margin-bottom:.6rem;overflow:hidden;
}
.vd-about-faq .accordion-button{font-weight:600;font-size:.96rem}
.vd-about-faq .accordion-button:not(.collapsed){
  background:var(--vd-brand-tint,#fdf2f5);color:var(--vd-brand-darker,#b3123f);box-shadow:none;
}
.vd-about-faq .accordion-button:focus{box-shadow:none;border-color:var(--vd-brand,#e82f5d)}
.vd-about-faq .accordion-body{font-size:.9rem;color:var(--vd-muted,#7b6f76);line-height:1.65}

/* ---- closing panel ---- */
.vd-about-cta{
  text-align:center;padding:2.75rem 1.5rem;
  border:1px solid var(--vd-line,#ece7e9);border-radius:20px;
  background:linear-gradient(135deg,var(--vd-brand-tint,#fdf2f5),#fff);
}
.vd-about-cta p{color:var(--vd-muted,#7b6f76);font-size:.95rem}

@media (max-width:767.98px){
  .vd-about-stats{grid-template-columns:repeat(2,1fr)}
  .vd-about-stat strong{font-size:1.6rem}
  .vd-about-band{padding-block:2.25rem}
  .vd-about-head{margin-bottom:1.25rem}
}

/* ======================================================================
   Contact page (Phase 42)

   .vd-fact, .vd-fact-label, .vd-fact-value and .vd-enquiry-card — the four
   classes the old page was built from — had no CSS rule anywhere in the
   project, so the form sat on bare background and the contact details, had
   they ever been filled in, would have rendered as loose text beside a
   floating icon. Replaced wholesale rather than patched.
   ====================================================================== */

/* ---- the three ways to reach us ---- */
.vd-reach{
  display:flex;flex-direction:column;align-items:center;gap:.1rem;height:100%;
  padding:1.5rem 1.1rem 1.35rem;text-align:center;text-decoration:none;
  border:1px solid var(--vd-line);border-radius:16px;background:#fff;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.vd-reach:hover,.vd-reach:focus-visible{
  border-color:var(--vd-brand);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(232,47,93,.09);
}
.vd-reach-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin-bottom:.75rem;
  border-radius:50%;background:var(--vd-brand-tint);
  color:var(--vd-brand);font-size:1.2rem;
}
.vd-reach-wa .vd-reach-icon{background:#e7f8ee;color:#1fa855}
.vd-reach-wa:hover,.vd-reach-wa:focus-visible{
  border-color:#1fa855;box-shadow:0 8px 24px rgba(31,168,85,.12);
}
.vd-reach-label{
  font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--vd-muted);
}
.vd-reach-value{
  font-size:1.02rem;font-weight:600;color:var(--vd-ink);
  /* Numbers in a phone number must not break mid-digit on a narrow screen. */
  word-break:break-word;
}
.vd-reach-note{font-size:.8rem;color:var(--vd-muted);margin-top:.2rem}

/* ---- the band that carries the form ---- */
.vd-contact-band{
  background:linear-gradient(180deg,#fdf7f9,#fff);
  border-block:1px solid var(--vd-line);
  padding-block:3.25rem;
}
.vd-contact-card{
  padding:1.9rem;
  border:1px solid var(--vd-line);border-radius:18px;background:#fff;
  box-shadow:0 2px 18px rgba(36,26,30,.04);
}
.vd-contact-privacy{
  font-size:.8rem;color:var(--vd-muted);
}
.vd-contact-privacy i{color:#1fa855;margin-right:.2rem}

/* ---- the column beside it ---- */
.vd-contact-side{
  padding:1.4rem 1.5rem;margin-bottom:1rem;
  border:1px solid var(--vd-line);border-radius:16px;background:#fff;
}
.vd-contact-side:last-child{margin-bottom:0}
.vd-side-head{
  font-size:.72rem;font-weight:700;letter-spacing:.09em;
  color:var(--vd-brand);margin-bottom:.9rem;
}
.vd-side-row{
  display:flex;gap:.7rem;align-items:flex-start;
  padding-block:.45rem;font-size:.9rem;color:var(--vd-ink);line-height:1.5;
}
.vd-side-row + .vd-side-row{border-top:1px solid var(--vd-line)}
.vd-side-row i{flex:0 0 auto;color:var(--vd-brand);font-size:1rem;margin-top:.12rem}
.vd-side-row a{color:inherit;text-decoration:none}
.vd-side-row a:hover{color:var(--vd-brand);text-decoration:underline}

/* ---- what happens next ---- */
.vd-contact-steps{
  list-style:none;counter-reset:cs;margin:0;padding:0;
}
.vd-contact-steps li{
  counter-increment:cs;position:relative;
  padding:0 0 .85rem 2.2rem;
  font-size:.875rem;color:var(--vd-muted);line-height:1.55;
}
.vd-contact-steps li:last-child{padding-bottom:0}
.vd-contact-steps li::before{
  content:counter(cs);position:absolute;left:0;top:-.05rem;
  display:flex;align-items:center;justify-content:center;
  width:1.6rem;height:1.6rem;border-radius:50%;
  background:var(--vd-brand-tint);color:var(--vd-brand-darker);
  font-size:.75rem;font-weight:700;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum";
}
.vd-contact-steps strong{color:var(--vd-ink);font-weight:600}

/* ---- the vendor signpost, tinted so it reads as a different audience ---- */
.vd-contact-vendor{
  background:linear-gradient(135deg,var(--vd-brand-tint),#fff);
  border-color:#f3d6df;
}

@media (max-width:991.98px){
  .vd-contact-band{padding-block:2.25rem}
  .vd-contact-card{padding:1.35rem}
}
@media (max-width:575.98px){
  /* On a phone these become rows: the icon beside the label and the value,
     which puts the tap target under the thumb instead of stacked three deep. */
  .vd-reach{
    display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;
    align-items:center;column-gap:.9rem;row-gap:0;
    padding:1rem 1.1rem;text-align:left;
  }
  .vd-reach-icon{grid-row:1 / span 2;margin-bottom:0;align-self:center}
  .vd-reach-label{grid-column:2;align-self:end}
  .vd-reach-value{grid-column:2;align-self:start}
  .vd-reach-note{display:none}
  .vd-contact-side{padding:1.15rem 1.2rem}
}

/* ======================================================================
   Counter band + Why choose us (Phase 42)
   Both sections are shared partials; see public-includes/.
   ====================================================================== */

/* ---- the counter ---- */
.vd-counter{
  padding-block:3rem;
  background:linear-gradient(135deg,#2b1d23,#4a2130);
  color:#fff;
}
.vd-counter-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
}
.vd-counter-item{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-inline:.75rem;
}
.vd-counter-item + .vd-counter-item{border-left:1px solid rgba(255,255,255,.14)}
.vd-counter-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;margin-bottom:.7rem;
  border-radius:50%;background:rgba(255,255,255,.1);
  color:#ffb3c6;font-size:1.05rem;
}
.vd-counter-num{
  font-family:var(--vd-font-display);
  font-size:2.6rem;line-height:1;color:#fff;
  /* Lining figures, or Cormorant's old-style 1 reads as a capital I; tabular
     so the digits do not jitter sideways while the number counts up. */
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum","tnum";
}
.vd-counter-label{
  margin-top:.4rem;font-size:.8rem;letter-spacing:.04em;
  color:rgba(255,255,255,.72);
}

/* ---- why choose us ---- */
.vd-why{padding-block:3.5rem}
.vd-why-band{
  background:linear-gradient(180deg,#fdf7f9,#fff);
  border-block:1px solid var(--vd-line);
}

/* the grid layout (homepage)
   Named .vd-reason-* rather than .vd-why-*: profile.css already styles
   .vd-why-card and .vd-why-icon for the listing page's "Why Choose" highlights,
   and two unrelated components sharing a class differ only by stylesheet load
   order — which is not a thing to rely on. */
.vd-reason-card{
  height:100%;padding:1.6rem 1.35rem;
  border:1px solid var(--vd-line);border-radius:16px;background:#fff;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.vd-reason-card:hover{
  border-color:var(--vd-brand);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(232,47,93,.08);
}
.vd-reason-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin-bottom:.9rem;
  border-radius:13px;background:var(--vd-brand-tint);
  color:var(--vd-brand);font-size:1.25rem;
}
.vd-reason-card h3{font-size:1.02rem;font-weight:700;margin:0 0 .4rem}
.vd-reason-card p{font-size:.88rem;color:var(--vd-muted);line-height:1.6;margin:0}

/* the list layout (About, beside the photograph) */
.vd-why-list{list-style:none;margin:0;padding:0}
.vd-why-list li{
  display:flex;gap:.85rem;align-items:flex-start;
  padding-bottom:1rem;
  font-size:.92rem;color:var(--vd-muted);line-height:1.6;
}
.vd-why-list li:last-child{padding-bottom:0}
.vd-why-list strong{display:block;color:var(--vd-ink);font-weight:600;margin-bottom:.1rem}
.vd-why-tick{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:1.9rem;height:1.9rem;margin-top:.1rem;
  border-radius:50%;background:var(--vd-brand-tint);
  color:var(--vd-brand);font-size:.92rem;
}

@media (max-width:991.98px){
  .vd-counter-grid{grid-template-columns:repeat(2,1fr);gap:1.75rem 1rem}
  /* The 1px rules only work on a single row; on two rows the third item would
     carry a stray left border. */
  .vd-counter-item + .vd-counter-item{border-left:0}
  .vd-counter-item:nth-child(even){border-left:1px solid rgba(255,255,255,.14)}
  .vd-why{padding-block:2.5rem}
}
@media (max-width:575.98px){
  .vd-counter{padding-block:2.25rem}
  .vd-counter-num{font-size:2.1rem}
  .vd-counter-label{font-size:.74rem}
  .vd-counter-icon{width:36px;height:36px;font-size:.95rem;margin-bottom:.5rem}
}

/* ======================================================================
   Hotel rooms and the availability calendar (Phase 42)

   The rooms grid is the spaces grid with a rate and an inventory count; the
   calendar is the one thing genuinely new. Green / amber / red is the scheme
   a traveller already reads without a legend — but colour is never the only
   signal here: every cell carries the day number, a title with the exact
   count, and a visually-hidden label saying which state it is in.
   ====================================================================== */
.vd-rooms{display:grid;gap:1rem}
.vd-room{
  display:grid;grid-template-columns:200px 1fr;
  border:1px solid var(--vd-line);border-radius:16px;background:#fff;
  overflow:hidden;
}
.vd-room-photo{
  position:relative;padding:0;border:0;background:#f6f2f4;
  min-height:170px;cursor:pointer;
}
.vd-room-photo img{width:100%;height:100%;object-fit:cover;display:block}
.vd-room-photo.is-empty{
  display:flex;align-items:center;justify-content:center;
  color:#c9bfc4;font-size:1.8rem;cursor:default;
}
.vd-room-body{padding:1.1rem 1.25rem}
.vd-room-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;margin-bottom:.5rem;
}
.vd-room-body h3{font-size:1.05rem;font-weight:700;margin:0 0 .2rem}
.vd-room-rate{text-align:right;white-space:nowrap}
.vd-room-rate strong{
  display:block;font-size:1.15rem;color:var(--vd-ink);
  font-variant-numeric:lining-nums tabular-nums;
}
.vd-room-rate small{font-size:.74rem;color:var(--vd-muted)}
.vd-room-onreq{font-size:.95rem!important;color:var(--vd-muted)!important}
.vd-room-body p{font-size:.88rem;color:var(--vd-muted);line-height:1.55;margin:.5rem 0 0}
.vd-room-amenities{
  list-style:none;display:flex;flex-wrap:wrap;gap:.25rem .9rem;
  margin:.65rem 0 0;padding:0;
}
.vd-room-amenities li{font-size:.8rem;color:var(--vd-muted)}
.vd-room-amenities i{color:#1fa855;margin-right:.25rem}

/* ---- the calendar ---- */
.vd-roomcal{
  margin-top:1.5rem;padding:1.25rem;
  border:1px solid var(--vd-line);border-radius:16px;background:#fff;
}
.vd-roomcal-months{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;
}
.vd-roomcal-title{display:block;font-size:.88rem;margin-bottom:.5rem}
.vd-roomcal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:3px;
}
.vd-roomcal-dow{
  text-align:center;font-size:.6rem;font-weight:700;color:var(--vd-muted);
  text-transform:uppercase;padding-bottom:.15rem;
}
.vd-roomcal-pad{aspect-ratio:1}
.vd-roomcal-day{
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;font-size:.7rem;font-weight:600;
  border:1px solid transparent;
}
.vd-roomcal-day.is-open    {background:#e8f7ee;border-color:#c6e9d4;color:#1b6b3a}
.vd-roomcal-day.is-limited {background:#fff6e2;border-color:#f3dfb0;color:#8a5a06}
.vd-roomcal-day.is-full    {background:#fdeaea;border-color:#f3c9c9;color:#a32020}
.vd-roomcal-day.is-past    {color:#cfc8cc}
.vd-roomcal-legend{
  display:flex;flex-wrap:wrap;gap:1rem;
  margin-top:1rem;font-size:.78rem;color:var(--vd-muted);
}
.vd-roomcal-key{
  display:inline-block;width:12px;height:12px;border-radius:4px;
  vertical-align:-2px;margin-right:.3rem;border:1px solid transparent;
}
.vd-roomcal-key.is-open    {background:#e8f7ee;border-color:#c6e9d4}
.vd-roomcal-key.is-limited {background:#fff6e2;border-color:#f3dfb0}
.vd-roomcal-key.is-full    {background:#fdeaea;border-color:#f3c9c9}

@media (max-width:991.98px){
  .vd-roomcal-months{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:575.98px){
  /* The photo above the text, or a 200px column leaves nothing for either. */
  .vd-room{grid-template-columns:1fr}
  /* Name above, rate below. Side by side there is not enough width for a room
     name and a per-night rate plus a stay total without one of them clipping. */
  .vd-room-head{flex-direction:column;align-items:flex-start;gap:.35rem}
  .vd-room-rate{text-align:left}
  .vd-room-rate strong,
  .vd-room-rate small{display:inline}
  .vd-room-staytotal{display:block!important;margin-top:.1rem}
  .vd-room-photo{min-height:190px}
  .vd-room-body{padding:1rem}
  .vd-roomcal{padding:1rem}
  .vd-roomcal-months{grid-template-columns:1fr}
}

/* ======================================================================
   Room booking, property rules and what is nearby (Phase 43)
   ====================================================================== */

/* ---- the book / check-dates pair on each room ---- */
.vd-room-actions{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-top:.9rem;padding-top:.9rem;
  border-top:1px solid var(--vd-line);
}

/* The cue that stands in for the calendar until it is asked for. */
.vd-roomcal-cue{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;
  margin:1.25rem 0 0;
}

/* ---- the room banner inside the enquiry modal ---- */
.vd-enq-room{
  display:flex;align-items:center;gap:.65rem;
  padding:.6rem .85rem;margin-bottom:.9rem;
  border:1px solid var(--vd-brand);border-radius:12px;
  background:var(--vd-brand-tint);
}
.vd-enq-room > i{color:var(--vd-brand);font-size:1.05rem}
.vd-enq-room strong{display:block;font-size:.92rem;line-height:1.2}
.vd-enq-room small{font-size:.78rem;color:var(--vd-muted)}

/* ---- property rules ---- */
.vd-rules-primary{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;
  margin-bottom:1rem;
}
.vd-rule-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  padding:.9rem 1rem;
  border:1px solid var(--vd-line);border-radius:14px;background:#fff;
}
.vd-rule-card > i{color:var(--vd-brand);font-size:1.1rem;margin-bottom:.3rem}
.vd-rule-label{font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--vd-muted)}
.vd-rule-value{
  font-size:1.05rem;color:var(--vd-ink);
  font-variant-numeric:lining-nums tabular-nums;
}
.vd-rules-list{list-style:none;margin:0;padding:0}
.vd-rules-list li{
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between;
  padding:.6rem 0;border-bottom:1px solid var(--vd-line);
  font-size:.9rem;
}
.vd-rules-list li:last-child{border-bottom:0}
.vd-rules-key{color:var(--vd-muted)}
.vd-rules-val{color:var(--vd-ink);font-weight:600;text-align:right}

/* ---- what is nearby ---- */
.vd-nearby{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.vd-nearby-item{
  display:flex;align-items:center;gap:.8rem;
  padding:.7rem .9rem;
  border:1px solid var(--vd-line);border-radius:12px;background:#fff;
}
.vd-nearby-icon{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  background:var(--vd-brand-tint);color:var(--vd-brand);font-size:.95rem;
}
.vd-nearby-body{flex:1 1 auto;min-width:0}
.vd-nearby-body strong{display:block;font-size:.92rem;line-height:1.3}
.vd-nearby-kind,.vd-nearby-note{font-size:.78rem;color:var(--vd-muted)}
.vd-nearby-kind::after{content:' · '}
.vd-nearby-kind:last-child::after{content:''}
.vd-nearby-dist{
  flex:0 0 auto;font-size:.84rem;font-weight:600;color:var(--vd-ink);
  font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;
}

@media (min-width:768px){
  .vd-nearby{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:575.98px){
  .vd-rules-primary{grid-template-columns:1fr}
  .vd-room-actions .btn{flex:1 1 auto}
}

/* ======================================================================
   The stay search bar (Phase 43)

   Check-in, check-out, rooms, go — the shape every booking site uses, because
   it is the shape people already know. A GET form, so a stay is a shareable
   URL and the back button behaves.
   ====================================================================== */
.vd-staybar{
  /* Flex, not a four-column grid: the listing's content column is narrower
     than the viewport (there is a sidebar beside it), and a rigid grid squeezed
     the native date controls to 95px, where the browser renders "dd/mm/y" with
     the year cut off. These fields have a floor and the button wraps instead. */
  display:flex;flex-wrap:wrap;align-items:end;
  gap:.6rem;
  padding:.85rem;margin-bottom:.75rem;
  border:1px solid var(--vd-brand);border-radius:14px;
  background:linear-gradient(135deg,var(--vd-brand-tint),#fff);
}
.vd-staybar-field{
  display:flex;flex-direction:column;gap:.2rem;
  /* 8.5rem is what dd/mm/yyyy plus the picker icon actually needs. */
  flex:1 1 8.5rem;min-width:8.5rem;
}
.vd-staybar-field label{
  font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--vd-muted);
}
.vd-staybar-field input{
  width:100%;padding:.45rem .6rem;
  border:1px solid var(--vd-line);border-radius:9px;background:#fff;
  font-size:.9rem;color:var(--vd-ink);
  font-variant-numeric:lining-nums tabular-nums;
}
.vd-staybar-field input:focus{
  outline:none;border-color:var(--vd-brand);
  box-shadow:0 0 0 3px rgba(232,47,93,.12);
}
/* Adults / children / rooms are two-digit fields — they do not need a date's
   width. They sit in one group so they wrap as a unit. */
.vd-staybar-party{display:flex;gap:.6rem;flex:0 1 auto;align-items:end}
.vd-staybar-num{flex:0 0 5.25rem;min-width:5.25rem}
.vd-staybar > button{flex:0 0 auto}

/* The line under the bar: what we understood, or what is wrong with it. */
.vd-stay-note{
  /* Block, not flex. As a flex container the <strong> and the text after it
     became separate flex items, so the gap landed between "2 nights" and the
     comma — "2 nights , 14 Nov". This line is prose; it has to stay one run of
     text. */
  display:block;
  font-size:.84rem;color:var(--vd-muted);margin:0 0 1rem;
  line-height:1.5;
}
.vd-stay-note i{font-size:.95rem;vertical-align:-1px;margin-right:.25rem}
.vd-stay-note.is-ok{color:#1b6b3a}
.vd-stay-note.is-ok i{color:#1fa855}
.vd-stay-note.is-warn{color:#8a5a06}
.vd-stay-note.is-warn i{color:#c98a0a}
.vd-stay-clear{margin-left:.5rem;font-size:.8rem;white-space:nowrap}

/* The per-room answer for those dates. */
.vd-room-avail{
  display:inline-flex;align-items:center;gap:.35rem;
  margin:.7rem 0 0;padding:.25rem .6rem;
  border-radius:999px;font-size:.8rem;font-weight:600;
  border:1px solid transparent;
}
.vd-room-avail.is-open   {background:#e8f7ee;border-color:#c6e9d4;color:#1b6b3a}
.vd-room-avail.is-limited{background:#fff6e2;border-color:#f3dfb0;color:#8a5a06}
.vd-room-avail.is-full   {background:#fdeaea;border-color:#f3c9c9;color:#a32020}

/* "approx ₹9,000 for 2 nights" under the nightly rate. */
.vd-room-staytotal{
  display:block;margin-top:.2rem;
  font-size:.74rem;color:var(--vd-brand-darker);font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;
  /* The rate column is nowrap so "₹4,500" never breaks mid-figure — but this
     string is a sentence, and inheriting nowrap made the whole column as wide
     as "approx ₹18,000 for 2 nights × 2 rooms", which pushed the room name and
     the price off a phone screen. */
  white-space:normal;
}

@media (max-width:575.98px){
  /* Two native date controls cannot sit side by side at this width — each needs
     about 130px to render dd/mm/yyyy — so rather than let them wrap unevenly
     (check-out stranded beside Rooms) each date takes its own line and Rooms
     shares the last one with the button. */
  .vd-staybar{gap:.5rem}
  .vd-staybar-field:not(.vd-staybar-num){flex:1 1 100%}
  /* The three counts share one row on a phone rather than stacking. */
  .vd-staybar-party{flex:1 1 100%}
  .vd-staybar-num{flex:1 1 4.5rem;min-width:0}
  .vd-staybar > button{flex:1 1 auto}
}

/* ---- a room's facts, inline ------------------------------------------------
   Stacked down the left of a card they wasted the width and read as a form.
   Inline with dividers is how every booking site shows them; the list wraps
   rather than growing the card, and the dividers are drawn with a border so
   there is no stray separator at the end of a wrapped line. */
.vd-room-facts{
  list-style:none;display:flex;flex-wrap:wrap;
  margin:.1rem 0 0;padding:0;
  /* Spacing separates the facts, not rules between them. A border-right leaves
     a stray divider at the end of a wrapped line, and with a sidebar beside it
     this column wraps four facts even on a desktop — so there is no width at
     which the dividers are reliably correct. The icons carry the separation. */
  gap:.2rem 1.15rem;
}
.vd-room-facts li{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.85rem;color:var(--vd-ink);font-weight:600;
  white-space:nowrap;
}
.vd-room-facts i{color:var(--vd-brand);font-size:.9rem;font-weight:400}

/* ======================================================================
   The availability calendar as the date picker (Phase 43)

   It sits inside the search bar and opens when a date field is touched —
   the moment somebody is actually deciding which nights to ask for.
   ====================================================================== */
.vd-daterange{
  flex:1 1 100%;
  margin-top:.35rem;padding:1rem;
  border:1px solid var(--vd-line);border-radius:14px;
  background:#fff;
  box-shadow:0 10px 30px rgba(36,26,30,.10);
}
.vd-daterange[hidden]{display:none}
.vd-daterange-head{
  display:flex;align-items:center;gap:.25rem .6rem;flex-wrap:wrap;
  margin-bottom:.9rem;
}
/* The close button keeps its place on the first line however the rest wraps. */
.vd-daterange-head strong{flex:0 1 auto}
.vd-daterange-head .btn-close{order:1}
.vd-daterange-head strong{font-size:.95rem}
.vd-daterange-hint{font-size:.8rem;color:var(--vd-brand-darker)}

/* The day cells become buttons in the picker, so they need resetting. */
.vd-daterange .vd-roomcal-day{
  border-width:1px;border-style:solid;
  padding:0;cursor:pointer;
  font-family:inherit;
  transition:transform .1s ease,box-shadow .1s ease;
}
.vd-daterange .vd-roomcal-day:hover:not(.is-past){
  transform:scale(1.08);
  box-shadow:0 2px 8px rgba(36,26,30,.14);
}
.vd-daterange .vd-roomcal-day.is-past{
  cursor:default;pointer-events:none;background:transparent;border-color:transparent;
}

/* The chosen range. The ends are solid brand; the nights between are tinted,
   so a three-night stay reads as one block rather than two loose dates. */
.vd-daterange .vd-roomcal-day.is-start,
.vd-daterange .vd-roomcal-day.is-end{
  background:var(--vd-brand)!important;
  border-color:var(--vd-brand)!important;
  color:#fff!important;
  font-weight:700;
}
.vd-daterange .vd-roomcal-day.is-between{
  background:var(--vd-brand-tint)!important;
  border-color:#f3d6df!important;
  color:var(--vd-brand-darker)!important;
}

/* Hide the browser's own picker icon only once the script has taken over, so
   a visitor without JavaScript keeps the native control intact. */
.vd-staybar.has-picker input[type="date"]{cursor:pointer}
.vd-staybar.has-picker input[type="date"]::-webkit-calendar-picker-indicator{
  display:none;
}

@media (max-width:991.98px){
  .vd-daterange .vd-roomcal-months{grid-template-columns:1fr}
  .vd-daterange{padding:.85rem}
}
@media (max-width:575.98px){
  /* Title and close on the first line, the instruction on its own below —
     side by side at this width all three wrap into each other. */
  .vd-daterange-hint{flex:1 1 100%;order:2}
}

/* The divider between the description and the spec tables, now that both live
   in the one "<Noun> details" section. */
.vd-details-rule{
  border:0;border-top:1px solid var(--vd-line);
  margin:1.6rem 0 1.25rem;opacity:1;
}