/* ==========================================================
   Venue Dekho — city picker
   ========================================================== */

.vd-citymodal{
  position:fixed;inset:0;z-index:1080;
  display:flex;align-items:center;justify-content:center;
  padding:1.25rem;
  opacity:0;visibility:hidden;
  transition:opacity .32s ease, visibility .32s ease;
}
.vd-citymodal.is-open{opacity:1;visibility:visible}
.vd-citymodal[hidden]{display:none}

.vd-citymodal-backdrop{
  position:absolute;inset:0;
  background:rgba(22,9,14,.72);
  backdrop-filter:blur(6px);
}

.vd-citymodal-panel{
  position:relative;
  width:100%;max-width:760px;max-height:min(90vh,760px);
  display:flex;flex-direction:column;
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 32px 90px rgba(22,9,14,.4);
  transform:translateY(18px) scale(.985);
  opacity:0;
  transition:transform .36s cubic-bezier(.2,.8,.3,1), opacity .3s ease;
}
.vd-citymodal.is-open .vd-citymodal-panel{transform:none;opacity:1}

.vd-citymodal-x{
  position:absolute;top:.9rem;right:.9rem;z-index:3;
  width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(255,255,255,.85);color:var(--vd-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;cursor:pointer;transition:background .18s ease,color .18s ease;
}
.vd-citymodal-x:hover{background:var(--vd-brand);color:#fff}

/* ---------- Head ---------- */
.vd-citymodal-head{
  text-align:center;
  padding:2.25rem 2rem 1.25rem;
  background:linear-gradient(180deg,var(--vd-brand-tint),#fff);
  border-bottom:1px solid var(--vd-line);
}
.vd-citymodal-logo{height:42px;width:auto;margin-bottom:1rem}
.vd-citymodal-head h2{
  font-size:clamp(1.5rem,3.4vw,2.1rem);
  font-weight:500;margin:.65rem 0 .4rem;line-height:1.2;
}
.vd-citymodal-head h2 em{font-style:italic;color:var(--vd-brand)}
.vd-citymodal-head p{color:var(--vd-muted);font-size:.93rem;margin:0 0 1.15rem}

.vd-citysearch{position:relative;max-width:380px;margin:0 auto}
.vd-citysearch i{
  position:absolute;left:1rem;top:50%;transform:translateY(-50%);
  color:var(--vd-muted);font-size:.9rem;pointer-events:none;
}
.vd-citysearch input{
  width:100%;padding:.72rem 1rem .72rem 2.6rem;
  border:1px solid var(--vd-line);border-radius:999px;
  font-family:var(--vd-font-body);font-size:.92rem;
  background:#fff;outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.vd-citysearch input:focus{
  border-color:var(--vd-brand);
  box-shadow:0 0 0 3px rgba(232,47,93,.12);
}

/* ---------- Grid ---------- */
.vd-citymodal-none{
  text-align:center;color:var(--vd-muted);font-size:.9rem;
  padding:0 2rem 1rem;margin:0;
}
/* ---------- Foot ---------- */
.vd-citymodal-foot{
  padding:1rem 2rem 1.5rem;
  border-top:1px solid var(--vd-line);
  text-align:center;background:var(--vd-bg);
}
.vd-citycard-all{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.6rem 1.4rem;border-radius:999px;
  border:1px solid var(--vd-line);background:#fff;
  font-size:.9rem;color:var(--vd-body);cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.vd-citycard-all:hover{border-color:var(--vd-brand);color:var(--vd-brand)}
.vd-citycard-all i{color:var(--vd-brand)}
@media (max-width:575px){
  .vd-citymodal{padding:0}
  .vd-citymodal-panel{max-width:100%;max-height:100vh;border-radius:0}
  .vd-citymodal-head{padding:1.75rem 1.25rem 1rem}
  .vd-citymodal-foot{padding:.9rem 1.25rem 1.25rem}
}
@media (prefers-reduced-motion:reduce){
  .vd-citymodal,.vd-citymodal-panel,.vd-citycircle-media{transition:none}
}

/* ---------- Header switcher ---------- */
.vd-cityswitch{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .8rem;border-radius:999px;
  border:1px solid var(--vd-line);background:#fff;
  font-size:.85rem;color:var(--vd-ink);cursor:pointer;
  white-space:nowrap;          /* "All India" was breaking across two lines */
  transition:border-color .18s ease,color .18s ease;
}
.vd-cityswitch:hover{border-color:var(--vd-brand);color:var(--vd-brand)}
.vd-cityswitch i:first-child{color:var(--vd-brand)}
.vd-cityswitch .bi-chevron-down{font-size:.6rem;opacity:.6}
/* ---------- "Showing X" chip on filtered pages ---------- */
.vd-cityfilter-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem .5rem .4rem .9rem;border-radius:999px;
  background:var(--vd-brand-soft);color:var(--vd-brand-darker);
  font-size:.84rem;margin-bottom:1rem;
}
.vd-cityfilter-chip a{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:rgba(255,255,255,.7);color:var(--vd-brand);font-size:.62rem;
}
.vd-cityfilter-chip a:hover{background:#fff}
/* Hero city pill */
.vd-hero-city{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:1.4rem;padding:.45rem 1.1rem;
  border:1px solid rgba(255,255,255,.3);border-radius:999px;
  background:rgba(255,255,255,.1);color:#fff;
  font-size:.86rem;cursor:pointer;backdrop-filter:blur(6px);
  transition:background .18s ease,border-color .18s ease;
}
.vd-hero-city:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.6)}
.vd-hero-city i{color:var(--vd-gold-soft)}
.vd-hero-city span{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  opacity:.75;border-left:1px solid rgba(255,255,255,.3);padding-left:.6rem;
}

/* ==== Circular city picker (Phase 19) =================================
   One component, two layouts: a single scrolling row on the homepage and
   a wrapped grid inside the modal. */
.vd-citycircles{
  display:flex;gap:1.35rem;align-items:flex-start;
}
.vd-citycircles-strip{
  overflow-x:auto;padding:.25rem .25rem 1rem;
  scrollbar-width:thin;scroll-snap-type:x proximity;
}
.vd-citycircles-strip::-webkit-scrollbar{height:6px}
.vd-citycircles-strip::-webkit-scrollbar-thumb{background:#d8dade;border-radius:99px}
.vd-citycircles-grid{
  flex-wrap:wrap;justify-content:center;gap:1.4rem 1.1rem;
  max-height:52vh;overflow-y:auto;padding:.5rem .25rem;
}

.vd-citycircle{
  flex:0 0 auto;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  width:104px;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;color:inherit;text-align:center;
}
.vd-citycircle-media{
  position:relative;width:92px;height:92px;border-radius:50%;
  overflow:hidden;display:grid;place-items:center;
  background:#e9ecef;
  box-shadow:0 0 0 0 rgba(0,0,0,0);
  transition:transform .18s ease, box-shadow .18s ease;
}
.vd-citycircle-media img{width:100%;height:100%;object-fit:cover;display:block}
.vd-citycircle-initial{
  font-size:2rem;font-weight:600;color:#fff;line-height:1;
}
.vd-citycircle-name{
  font-size:.94rem;font-weight:500;color:var(--vd-ink,#222);
  line-height:1.25;
}
.vd-citycircle-count{font-size:.76rem;color:var(--vd-muted,#6c757d)}

.vd-citycircle:hover .vd-citycircle-media,
.vd-citycircle:focus-visible .vd-citycircle-media{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.vd-citycircle:focus-visible{outline:none}
.vd-citycircle:focus-visible .vd-citycircle-name{text-decoration:underline}

/* The city currently in force reads as selected, not just hovered. */
.vd-citycircle.is-active .vd-citycircle-media{
  box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--vd-brand,#d81b60);
}
.vd-citycircle.is-active .vd-citycircle-name{font-weight:700;color:var(--vd-brand,#d81b60)}

.vd-citycircle-more .vd-citycircle-media{background:#4a4a4a}
.vd-citycircle-plus{font-size:1.35rem;font-weight:600;color:#fff}

.vd-citycircle.is-busy{opacity:.55;pointer-events:none}

@media (max-width:575.98px){
  .vd-citycircle{width:88px}
  .vd-citycircle-media{width:76px;height:76px}
  .vd-citycircle-name{font-size:.86rem}
  .vd-citycircles{gap:1rem}
}

/* A category tile with no photograph falls back to its own icon rather than
   an initial — "M" says less about Makeup Artists than a brush does. */
.vd-citycircle-icon{font-size:1.9rem;color:#fff;line-height:1}

/* ---- Eight across, scrolled one at a time ----------------------------
   "Browse by Category" used to be one nowrap row sharing the width evenly,
   which was right for the nine categories that existed then. It does not
   survive growth: at seventeen each tile gets about 55px, and because the
   labels must not break mid-word they spill sideways and print over their
   neighbours.

   So the row now shows exactly eight and scrolls, driven by the same
   arrows and the same one-step-per-click JS as the listing rails below it
   (assets/js/rails.js). Eight is a width, not a limit — every category is
   still reachable, and adding an eighteenth changes nothing here.

   Below 768px it stays the free-scrolling strip, where a fixed eight would
   be unreadable. */
@media (min-width:768px){
  .vd-citycircles-rail{
    --vd-per-view:8;
    --vd-rail-gap:1rem;
    display:flex;
    flex-wrap:nowrap;
    gap:var(--vd-rail-gap);
    overflow-x:auto;
    /* No scroll snapping here, deliberately. rails.js animates scrollLeft
       frame by frame, and `mandatory` snapping fights it: each frame moves a
       few pixels and the snap drags them straight back, which is exactly the
       stutter this had. The JS already lands on whole tiles, so snapping adds
       nothing but the fight. (The mobile strip below 768px keeps its gentle
       `proximity` snap — that one is finger-driven, not animated.) */
    scroll-snap-type:none;
    scrollbar-width:none;
    /* Room above and below for the lift and shadow on hover, or the tile gets
       clipped by the scroll container on the way up. */
    padding:.6rem .25rem 1.1rem;
  }
  .vd-citycircles-rail::-webkit-scrollbar{display:none}

  .vd-citycircles-rail .vd-citycircle{
    /* Exactly eight share the width, gaps included. */
    flex:0 0 calc((100% - (var(--vd-per-view) - 1) * var(--vd-rail-gap)) / var(--vd-per-view));
    width:auto;
    min-width:0;
    max-width:none;
    scroll-snap-align:none;
  }
  .vd-citycircles-rail .vd-citycircle-media{
    width:min(100%, 132px);
    max-width:none;
    height:auto;
    aspect-ratio:1;
    margin-inline:auto;
  }
  .vd-citycircles-rail .vd-citycircle-name{
    /* No anywhere-breaking: it split the word into "Photographer / s",
       which reads as a bug. The flex basis is the hard edge instead. */
    font-size:clamp(.74rem,.95vw,.92rem);
    overflow-wrap:normal;
    hyphens:none;
    max-width:100%;
  }
}
@media (min-width:768px) and (max-width:991.98px){
  /* Five fit comfortably on a tablet; eight would be too small to read. */
  .vd-citycircles-rail{--vd-per-view:5;--vd-rail-gap:.7rem}
}

/* ---- Category tiles: border, and a lift on hover ---------------------
   Scoped to the category rail so the city circles elsewhere are untouched.

   The ring is drawn with box-shadow rather than `border`, because a real
   border on a 50% rounded element sits inside the overflow:hidden clip and
   the photograph crawls out from under it at the edges. A spread shadow sits
   cleanly outside and animates without shifting the layout. */
/* The ring is on at every width — it is how the tile reads as an object, not
   a desktop-only flourish. The lift and the colour change are hover states,
   so those stay inside the desktop block below. */
.vd-citycircles-rail .vd-citycircle-media{
  box-shadow:0 0 0 1px rgba(36,26,30,.18),
             0 2px 6px rgba(36,26,30,.09);
  /* Each property timed separately: the lift should be quick and the ring
     should bloom a touch slower behind it. One shared duration makes the
     whole thing feel mechanical. */
  transition:transform .32s cubic-bezier(.22,.61,.36,1),
             box-shadow .38s cubic-bezier(.22,.61,.36,1);
}
.vd-citycircles-rail .vd-citycircle-name{
  transition:color .22s ease;
}

@media (min-width:768px){
  .vd-citycircles-rail .vd-citycircle-media{will-change:transform}

  .vd-citycircles-rail .vd-citycircle:hover .vd-citycircle-media,
  .vd-citycircles-rail .vd-citycircle:focus-visible .vd-citycircle-media{
    transform:translateY(-6px) scale(1.04);
    box-shadow:0 0 0 2px var(--vd-brand,#e82f5d),
               0 14px 28px rgba(36,26,30,.18),
               0 4px 8px rgba(36,26,30,.08);
  }
  .vd-citycircles-rail .vd-citycircle:hover .vd-citycircle-name,
  .vd-citycircles-rail .vd-citycircle:focus-visible .vd-citycircle-name{
    color:var(--vd-brand,#e82f5d);
  }

  /* The photograph itself leans in very slightly behind the ring. Separate
     from the tile's own scale so the two do not compound into a jump. */
  .vd-citycircles-rail .vd-citycircle-media img{
    transition:transform .5s cubic-bezier(.22,.61,.36,1);
  }
  .vd-citycircles-rail .vd-citycircle:hover .vd-citycircle-media img{
    transform:scale(1.08);
  }

  /* Somebody who asked for less motion gets the ring and the colour, and
     none of the movement. */
  @media (prefers-reduced-motion:reduce){
    .vd-citycircles-rail .vd-citycircle-media,
    .vd-citycircles-rail .vd-citycircle-media img,
    .vd-citycircles-rail .vd-citycircle-name{transition:none}
    .vd-citycircles-rail .vd-citycircle:hover .vd-citycircle-media{transform:none}
    .vd-citycircles-rail .vd-citycircle:hover .vd-citycircle-media img{transform:none}
  }
}

/* ---- Arrows for the category strip ----------------------------------
   The listing rails put their arrows in the section heading, which is theirs
   to use. This strip sits under a centred heading with no room beside it, so
   its arrows sit above the row, right-aligned, matching the rails' own
   .vd-rail-arrow styling. Hidden below 768px, where the row free-scrolls by
   touch and an arrow would only be in the way. */
.vd-circlerail-arrows{
  display:none;
  justify-content:flex-end;
  gap:.5rem;
  margin-bottom:.35rem;
}
@media (min-width:768px){
  .vd-circlerail-arrows{display:flex}
  /* A touch more presence than the rails' arrows, since these sit alone above
     a centred section rather than beside a heading. */
  .vd-circlerail .vd-rail-arrow{
    width:40px;height:40px;
    box-shadow:0 1px 3px rgba(36,26,30,.07);
    transition:border-color .2s ease, color .2s ease, opacity .2s ease,
               transform .2s cubic-bezier(.22,.61,.36,1),
               box-shadow .2s ease;
  }
  .vd-circlerail .vd-rail-arrow:hover:not([disabled]){
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(36,26,30,.12);
  }
  .vd-circlerail .vd-rail-arrow:active:not([disabled]){
    transform:translateY(0) scale(.94);
  }
  /* rails.js adds this when there is nothing to scroll — fewer categories
     than fit in one view. Arrows that cannot do anything are worse than
     no arrows. */
  .vd-rail-noscroll .vd-circlerail-arrows{display:none}
  /* With fewer categories than fit, there is nothing to scroll and no arrows,
     so a left-aligned row under a centred heading just looks unbalanced. */
  .vd-rail-noscroll .vd-citycircles-rail{justify-content:center}
}