/* v154 — pin page tidy + one Plan (calendar) button rule for the whole site.
   Loaded after the v151 fix files (inc/lite.php, partials/header.php) so it wins. */

/* ---------- Plan calendar button, everywhere ----------
   Not planned = white, ink ring, ink icon. Planned = yellow. No hard shadow.
   Covers the round card dot (.plan-dot), the card/popup Save button
   (.pin-card__act--save, but not the Clips side icons) and the Following "Plan" action. */
.plan-dot,
.pin-card .pin-card__act--save,
.sm-pop .pin-card__act--save,
body.lite .pin-card__act--save:not(.rf-side-ico),
body.exp-page.lite-fullbleed .exp__sheet .pin-card__act--save{
  background:#fff !important; color:var(--ink) !important; border:1.5px solid var(--ink) !important; box-shadow:none !important;
}
.plan-dot.on, .plan-dot.is-on, .plan-dot.v31-planned, .plan-action.is-on .plan-dot,
.pin-card .pin-card__act--save.is-on,
.sm-pop .pin-card__act--save.is-on,
body.lite .pin-card__act--save.is-on:not(.rf-side-ico),
body.exp-page.lite-fullbleed .exp__sheet .pin-card__act--save.is-on{
  background:var(--yellow) !important; color:var(--ink) !important;
}
/* v155: brutal-lite.js's tap "plan moment" adds .v31-planned, and brutal-lite.css paints
   .v31-planned i yellow (from the old black planned dot) — yellow icon on a yellow dot = no
   icon. Round buttons keep a black icon in both states (the big Plan bar is not touched). */
.pin-card__act--save.v31-planned:not(.rf-side-ico){ background:var(--yellow) !important; color:var(--ink) !important; }
.plan-dot i, .plan-dot.v31-planned i, .plan-dot.is-on i,
.pin-card__act--save:not(.rf-side-ico) i, .pin-card__act--save.v31-planned:not(.rf-side-ico) i{ color:var(--ink) !important; }
/* card-sized dot: 32px on every photo card (the global 44px tap rule made them huge) */
.vcard .plan-dot,
.pin-card .pin-card__act--save,
body.exp-page.lite-fullbleed .exp__sheet .pin-card__act--save{
  width:32px !important; height:32px !important; min-width:0 !important; min-height:0 !important; padding:0 !important;
  font-size:15px !important; border-radius:50% !important;
}
/* on a vcard the dot sits over the photo's top-right corner, never under the name */
.vcard{ position:relative; }
.vcard > .plan-dot{ position:absolute; top:8px; right:8px; z-index:3; margin:0; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.vcard > a{ display:flex; flex-direction:column; gap:8px; color:inherit; text-decoration:none; }

/* ---------- Pin page ---------- */
/* no "next pin" arrow on the hero (swiping still moves to the next pin) */
.pswipe__arrow{ display:none !important; }
/* play button: white + ink, with a yellow ring */
.pinA__hero .pin-gallery__play{
  background:#fff !important; color:var(--ink) !important; border:2px solid var(--ink) !important;
  box-shadow:0 0 0 4px var(--yellow) !important;
}
/* the details sheet runs edge to edge (it sat inside the page's 16px side padding) */
body.lite .lite-page > .pg-title{ margin-left:-16px; margin-right:-16px; }

/* creator card — lite5/pin-page-preview.html "section card pad" on --card-2 */
.pg-ccard{ background:var(--card-2); border-radius:var(--r-card,18px); padding:14px; margin:4px 0 16px; }
.pg-ccard .pg-creator-head{ display:flex; align-items:center; gap:10px; margin:0 0 12px !important; background:none !important; padding:0 !important; }
.pg-ccard .pg-creator-info{ flex:1; min-width:0; }
.pg-ccard .pg-creator-name{ display:flex; align-items:center; gap:4px; font:800 13.5px/1 var(--font-ui); color:var(--ink); min-width:0; }
.pg-ccard .pg-creator-name a{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.pg-ccard .pg-creator-name i{ color:var(--blue); font-size:12px; flex:none; }
.pg-ccard .pg-creator-sub{ font:600 11.5px/1.2 var(--font-ui); color:var(--muted); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pg-ccard .pinA__desc{ font:500 13.5px/1.55 var(--font-ui); color:var(--ink); margin:0 0 10px; }
/* tags: black and white */
.pg-ccard .tagrow{ display:flex; gap:7px; flex-wrap:wrap; margin:0; }
.pg-ccard .tagrow .tag{
  display:inline-flex; align-items:center; gap:3px; background:#fff !important; color:var(--ink) !important;
  border:1px solid var(--ink) !important; box-shadow:none !important; border-radius:999px; padding:5px 11px;
  font:700 11.5px/1 var(--font-ui); text-decoration:none;
}
/* v155: "Also pinned by" row under the place card */
.pg-also{ margin:12px 0 4px; padding:0 2px; }
.pg-also .also-label a{ color:var(--ink); text-decoration:none; }
.pg-also .also-line{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.pg-also .also-stack{ display:flex; align-items:center; }
.pg-also .also-stack > *{ width:26px; height:26px; border-radius:50%; object-fit:cover; border:2px solid #fff; margin-left:-8px; background:var(--card); display:inline-flex; align-items:center; justify-content:center; font-size:12px; overflow:hidden; }
.pg-also .also-stack > *:first-child{ margin-left:0; }
.pg-also .also-stack img{ width:100%; height:100%; object-fit:cover; }
.pg-also .also-label{ font:700 12.5px/1 var(--font-ui); color:var(--muted); }

/* Address / Hours list */
.pg-info{ margin:0 0 4px; }
.pg-info .row{ color:var(--ink); text-decoration:none; }
.pg-info .row .val{ text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
/* v155: full address — wraps onto as many lines as it needs, right-aligned */
.pg-info .row--addr{ align-items:flex-start; }
.pg-info .row--addr > span:nth-child(2){ flex:0 0 auto; padding-top:6px; }
.pg-info .row--addr .val{ white-space:normal; overflow:visible; line-height:1.4; padding-top:6px; flex:1 1 auto; }
.pg-info .row--addr .chev{ padding-top:8px; }

/* map: same MapLibre restyle + photo-sticker marker as Explore / profile */
body.lite .pg-map{ height:170px; margin:16px 0 8px; }
.pg-map .sm-pin-wrap{ position:absolute; }
.pg-map .sm-pin{ display:flex; flex-direction:column; align-items:center; width:72px; }
.pg-map .sm-pin__photo{
  width:42px; height:42px; margin:0 auto; border-radius:50%; border:2.5px solid var(--ink); box-shadow:var(--sh-sm);
  background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center;
}
.pg-map .sm-pin__name{
  margin-top:5px; max-width:110px; background:var(--ink); color:#fff; font:700 10.5px/1 var(--font-ui); padding:4px 7px;
  border-radius:7px; border:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center;
}
.pg-map .sm-pin__tail{ display:none; }
.pg-map .sm-pin__ph{ color:var(--muted); }
.pg-map .maplibregl-ctrl-attrib{ }

/* More from / Nearby: the same 2-column vcards as profile + Explore */
.pg-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }

/* ---------- v156: hero play button + Gallery ---------- */
/* the play button is now a real link/button (it was a decoration over the tap area) and
   shows on every clip pin — uploaded or linked — except while the clip plays full screen */
.pinA__hero .pin-gallery__play:not([hidden]){
  display:flex !important; pointer-events:auto !important; z-index:6 !important; cursor:pointer;
  width:64px; height:64px; font-size:1.3rem; text-decoration:none; padding:0;
}
.pinA__hero.is-playing .pin-gallery__play{ display:none !important; }
.pinA__hero:not(.is-playing) .pinA__scrim{ cursor:default; }
/* Gallery: horizontal row of the pin's photos, above the "At this place" card */
.pg-gallery{ margin:4px 0 16px; }
.pg-gallery__row{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 -16px; padding:0 16px; }
.pg-gallery__row::-webkit-scrollbar{ display:none; }
.pg-gallery__ph{ flex:0 0 auto; width:112px; aspect-ratio:3/4; border-radius:14px; overflow:hidden; padding:0; border:0; background:var(--card-2); cursor:zoom-in; scroll-snap-align:start; }
.pg-gallery__ph img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- v157: Gallery photo viewer (arrows + swipe + counter) ---------- */
.pg-viewer{ cursor:default; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.pg-viewer__img{ max-width:100%; max-height:calc(100% - 90px); border-radius:12px; }
.pg-viewer__nav{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  background:#fff; color:var(--ink); border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center;
  font-size:20px; cursor:pointer; z-index:2; padding:0;
}
.pg-viewer__nav[hidden]{ display:none; }
.pg-viewer__nav--prev{ left:12px; }
.pg-viewer__nav--next{ right:12px; }
.pg-viewer__count{
  position:absolute; bottom:calc(24px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,.95); color:var(--ink); font:700 12.5px/1 var(--font-ui); padding:7px 12px; border-radius:999px;
}
.pg-viewer__count[hidden]{ display:none; }
.pg-viewer .lightbox__x{ top:calc(14px + env(safe-area-inset-top,0px)); }

/* ---------- v158: Explore "Happening near you" on its own soft-yellow panel ---------- */
body.lite-fullbleed .exp-rail--hp{
  background:var(--yellow-soft); border-radius:18px; margin:6px 12px 14px; padding:12px 12px 4px;
}
body.lite-fullbleed .exp-rail--hp .exp-rail__head{ margin:0 0 10px; }
body.lite-fullbleed .exp-rail--hp .exp-rail__head h2{ color:var(--ink); }
body.lite-fullbleed .exp-rail--hp .railrow{ margin:0 -12px; padding:0 12px 12px; }

/* ---------- v158: Explore toast was half off-screen ----------
   lite-explore.css pins .flash-wrap with left:0/right:0, but app.css's centring
   (left:50% + translateX(-50%) + width:min(440px,92vw)) still applied, shifting it
   half its width to the left. Undo the old centring on Explore. */
body.lite-fullbleed .flash-wrap{ transform:none !important; width:auto !important; left:0 !important; right:0 !important; }

/* ---------- v166: "When are you going?" plan date sheet (brutal-lite.js openPlanDate) ---------- */
.pd-back{ position:fixed; inset:0; z-index:3000; background:rgba(20,21,24,0); display:flex; align-items:flex-end; justify-content:center; transition:background .2s ease; }
.pd-back.is-open{ background:rgba(20,21,24,.45); }
.pd-sheet{
  width:100%; max-width:480px; background:#fff; border-radius:22px 22px 0 0; border:var(--bd); border-bottom:0;
  padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px)); transform:translateY(100%); transition:transform .22s ease;
}
.pd-back.is-open .pd-sheet{ transform:none; }
.pd-grab{ width:40px; height:4px; border-radius:2px; background:var(--line,#dfe1e6); margin:0 auto 12px; }
.pd-title{ font:800 19px/1.2 var(--font-display); color:var(--ink); margin:0 0 4px; }
.pd-sub{ font:500 13px/1.4 var(--font-ui); color:var(--muted); margin:0 0 14px; }
.pd-chips{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.pd-chip{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:10px 11px; border-radius:14px;
  background:#fff; border:1.5px solid var(--line,#dfe1e6); cursor:pointer; text-align:left; min-height:56px;
}
.pd-chip b{ font:800 13px/1.1 var(--font-ui); color:var(--ink); }
.pd-chip small{ font:600 11.5px/1.1 var(--font-ui); color:var(--muted); }
.pd-chip.is-wk{ background:var(--yellow-soft); border-color:transparent; }
.pd-chip.is-on{ background:var(--ink); border-color:var(--ink); }
.pd-chip.is-on b, .pd-chip.is-on small{ color:#fff; }
.pd-label{ display:block; font:800 11px/1 var(--font-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:16px 0 8px; }
.pd-date{ width:100%; }
.pd-actions{ display:grid; grid-template-columns:1fr 2fr; gap:10px; margin-top:16px; }
.pd-actions .btn{ justify-content:center; }

/* ---------- v258: "Saved to your plans 🎉" one-time first-plan celebration
   (brutal-lite.js showFirstPlanCelebration) — same sheet shell as .pd-back/.pd-sheet
   above, so it looks like it belongs here, not a new popup pattern. ---------- */
.fpc-back{ position:fixed; inset:0; z-index:3000; background:rgba(20,21,24,0); display:flex; align-items:flex-end; justify-content:center; transition:background .2s ease; }
.fpc-back.is-open{ background:rgba(20,21,24,.45); }
.fpc-sheet{
  width:100%; max-width:480px; background:#fff; border-radius:22px 22px 0 0; border:var(--bd); border-bottom:0;
  padding:22px 20px calc(20px + env(safe-area-inset-bottom,0px)); text-align:center;
  transform:translateY(100%); transition:transform .22s ease;
}
.fpc-back.is-open .fpc-sheet{ transform:none; }
.fpc-ico{ width:56px; height:56px; margin:0 auto 10px; border-radius:50%; background:var(--yellow-soft); display:flex; align-items:center; justify-content:center; font-size:26px; color:var(--ink); }
.fpc-title{ font:800 20px/1.2 var(--font-display); color:var(--ink); margin:0 0 6px; }
.fpc-sub{ font:500 13.5px/1.45 var(--font-ui); color:var(--muted); margin:0 0 18px; }
.fpc-actions{ display:flex; flex-direction:column; gap:10px; }
.fpc-actions .btn{ justify-content:center; width:100%; }
@media (prefers-reduced-motion: reduce){
  .fpc-back, .fpc-sheet{ transition:none; }
}

/* ---------- v167: Explore "Near me" pill + distance on cards ---------- */
body.lite-fullbleed .exp__filterrow .near-btn{
  display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px; border-radius:999px; border:0;
  background:#fff; color:var(--ink); font:700 13px/1 var(--font-ui); box-shadow:var(--soft, 0 2px 10px rgba(20,21,24,.12)); cursor:pointer; white-space:nowrap;
}
body.lite-fullbleed .exp__filterrow .near-btn i{ font-size:15px; }
body.lite-fullbleed .exp__filterrow .near-btn.is-on{ background:var(--ink); color:#fff; }
body.lite-fullbleed .exp__filterrow .near-btn.is-on i{ color:var(--yellow); }
/* distance above the tagline: inside .pin-card__phbot the tagline must flow in the column
   (v151-fix-1 pins every sheet tagline absolute at the bottom, which hid the distance under it).
   The distance chip itself keeps lite-explore.css's dark-glass .pin-card__dist look. */
body.exp-page.lite-fullbleed .exp__sheet .pin-card__phbot .pin-card__phtext{ position:static; left:auto; right:auto; bottom:auto; }
body.exp-page.lite-fullbleed .exp__sheet .pin-card__phbot{ left:10px; right:10px; bottom:10px; }
/* v167: Near me split pill — [➤ Near me | ⌄]; the arrow opens the distance menu */
body.lite-fullbleed .exp__filterrow .near-split{
  display:inline-flex; align-items:stretch; height:40px; border-radius:999px; background:#fff; overflow:hidden; flex:0 0 auto;
  box-shadow:var(--soft, 0 2px 10px rgba(20,21,24,.12));
}
body.lite-fullbleed .exp__filterrow .near-split .near-btn{ box-shadow:none; border-radius:0; padding:0 10px 0 14px; background:transparent; }
body.lite-fullbleed .exp__filterrow .near-caret{
  border:0; background:transparent; color:var(--ink); padding:0 12px 0 10px; cursor:pointer; font-size:14px;
  border-left:1px solid var(--line,#dfe1e6); display:flex; align-items:center;
}
body.lite-fullbleed .exp__filterrow .near-split.is-on{ background:var(--ink); }
body.lite-fullbleed .exp__filterrow .near-split.is-on .near-btn{ background:transparent; color:#fff; }
body.lite-fullbleed .exp__filterrow .near-split.is-on .near-caret{ color:#fff; border-left-color:rgba(255,255,255,.25); }

/* v168: the distance sheet's bottom rows (and the old "Show places" button) sat UNDER the
   tab bar (.island-footer wins the stacking even with the sheet's higher z-index), so taps
   landed on the Profile tab and the sheet "never closed". Clear the tab bar. */
body.lite-fullbleed #kmSheet{ padding-bottom:calc(96px + env(safe-area-inset-bottom,0px)) !important; }

/* ---------- v169: Explore map pins — name BESIDE the photo; crowded pins become dots ---------- */
/* side label: the marker is anchored on the photo's centre (map-explore.js anchor:"center"),
   the black name tag floats to its right */
body.lite-fullbleed .sm-pin-wrap.sm-pin--side .sm-pin{ display:block; width:auto; position:relative; }
body.lite-fullbleed .sm-pin-wrap.sm-pin--side .sm-pin__photo{ margin:0; } /* no size transition: collision measures the full-size photo in the same frame */
body.lite-fullbleed .sm-pin-wrap.sm-pin--side .sm-pin__name{
  position:absolute; left:calc(100% + 5px); top:50%; transform:translateY(-50%); margin:0; max-width:120px; text-align:left;
}
/* dot: a small category-coloured circle at the pin's exact spot (like Google Maps); tap still opens it */
body.lite-fullbleed .sm-pin-wrap.sm-pin--dot .sm-pin__photo{
  width:13px; height:13px; border:2px solid #fff !important; background-image:none !important;
  background-color:var(--pin-cat, #161310) !important; box-shadow:0 1px 3px rgba(20,21,24,.4) !important;
}
body.lite-fullbleed .sm-pin-wrap.sm-pin--dot .sm-pin__ph,
body.lite-fullbleed .sm-pin-wrap.sm-pin--dot .sm-pin__name{ display:none; }
body.lite-fullbleed .sm-pin-wrap.sm-pin--side{ z-index:2; }
body.lite-fullbleed .sm-pin-wrap.sm-pin--side.sm-pin--dot{ z-index:1; }   /* dots always under photo pins */

/* ---------- v171: weekend page in the site theme ---------- */
.wk-head{ display:flex; align-items:center; gap:12px; margin:4px 0 16px; padding:14px; border-radius:var(--r-card,18px);
  background:var(--yellow-soft); border:var(--bd); box-shadow:none; color:var(--ink); }
.wk-head__ico{ width:42px; height:42px; border-radius:50%; background:#fff; border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center; font-size:21px; flex:0 0 auto; }
.wk-head__body{ min-width:0; }
.wk-head__t{ font:800 20px/1.2 var(--font-display); margin:0; }
.wk-head__sub{ font:600 12px/1.35 var(--font-ui); color:var(--ink-soft,#4b4f57); margin-top:4px; }
/* "Free" on ₹0 spots: a plain white chip like the category chips (no lime hard-shadow sticker) */
.wk-free{ position:absolute; top:8px; left:8px; z-index:2; display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:999px;
  background:#fff; color:var(--ink); font:800 11px/1 var(--font-ui); }
.wk-free i{ font-size:11px; color:var(--ink); }

/* ---------- v172: Settings rows ---------- */
.set-hint{ display:block; font:600 11.5px/1.35 var(--font-ui); color:var(--muted); margin-top:2px; }
.set-select{ border:1px solid var(--line); border-radius:10px; padding:7px 10px; font:700 12.5px var(--font-ui); background:#fff; color:var(--ink); }
.list .row > .row-label + .chev{ margin-left:auto !important; }   /* arrow at the right edge (rows without a value; .val rows already push it) */
.list .row .row-label.text-blue{ color:var(--blue); }
.list .row .row-label.text-red{ color:var(--red,#e5484d); }

/* ---------- v173: one offer card (pin page + business page) — inc/offer_card.php ---------- */
.offer2{ background:var(--yellow-soft); border:var(--bd); border-radius:var(--r-card,18px); padding:14px; box-shadow:none; }
.offer2.is-ended{ background:var(--card-2); border-color:var(--line); opacity:.8; }
.offer2__top{ display:flex; align-items:center; gap:12px; }
.offer2__ico{ width:40px; height:40px; border-radius:12px; background:var(--yellow); border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center; font-size:19px; color:var(--ink); flex:0 0 auto; }
.offer2__head{ min-width:0; }
.offer2__title{ font:800 16px/1.2 var(--font-display); color:var(--ink); }
.offer2__exp{ display:inline-flex; align-items:center; gap:4px; margin-top:4px; font:700 11.5px/1 var(--font-ui); color:var(--ink-soft,#4b4f57); }
.offer2__desc{ margin:12px 0 0; font:500 13px/1.5 var(--font-ui); color:var(--ink); white-space:normal; }
.offer2__desc.is-clamped{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.offer2__more{ background:none; border:0; padding:4px 0 0; font:700 12.5px/1.2 var(--font-ui); color:var(--blue); cursor:pointer; }
.offer2__btn{ display:flex; width:100%; justify-content:center; align-items:center; gap:6px; margin-top:14px; box-shadow:none !important; }
.offer2__open{ display:flex; width:100%; justify-content:center; margin-top:8px; }
#offers-here .offer2 + .offer2{ margin-top:0; }
.pg-addmoment{ margin-top:10px; }

/* ---------- v175: business page spacing + map + moment placeholder ---------- */
/* owner analytics box: real inner padding, header clear of the border, even gaps */
.placepage .mgr-card{ padding:16px !important; margin:16px 0 !important; border:1px solid var(--line); border-radius:var(--r-card,18px); background:#fff; }
.placepage .mgr-card .section-label{ margin:0 0 12px !important; padding:0 !important; }
.placepage .pa-grid{ gap:8px; }
.placepage .pa-stat{ padding:12px !important; min-width:0; }
.placepage .pa-stat__l{ line-height:1.2 !important; flex-wrap:wrap; }
/* every block on the page gets the same vertical rhythm */
.placepage .section{ margin-top:22px; }
.placepage .section > .section-head{ margin-bottom:12px; }
.placepage #offers-here{ margin-top:16px !important; }
.placepage .grid2{ row-gap:16px; }
/* map: the same photo-sticker marker as Explore / pin page */
.placepage .map-wrap .sm-pin-wrap{ position:absolute; }
.placepage .map-wrap .sm-pin{ display:flex; flex-direction:column; align-items:center; width:72px; }
.placepage .map-wrap .sm-pin__photo{ width:42px; height:42px; margin:0 auto; border-radius:50%; border:2.5px solid var(--ink); box-shadow:var(--sh-sm);
  background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; background-color:#fff; }
.placepage .map-wrap .sm-pin__name{ margin-top:5px; max-width:110px; background:var(--ink); color:#fff; font:700 10.5px/1 var(--font-ui); padding:4px 7px;
  border-radius:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.placepage .map-wrap .sm-pin__tail{ display:none; }
.placepage .map-wrap .maplibregl-ctrl-attrib{ }
/* moment with no / broken photo: calm placeholder, not a black box */
.moment-card__media{ position:relative; background:var(--card-2) !important; }
.moment-card__ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; color:var(--muted-2,#9aa0a8); }
.moment-card__media img{ position:relative; z-index:1; }

/* ---------- v177: Explore top bar — the "sm" tilted-card logo instead of the filter button ---------- */
body.lite-fullbleed .exp__topbar .exp__logo{ flex:0 0 auto; display:block; width:46px; height:46px; }
body.lite-fullbleed .exp__topbar .exp__logo img{ display:block; width:46px; height:46px; }

/* ---------- v178: new "sm" tilted-card logo everywhere — it carries its own card + yellow
   back card, so the old frames around the logo (yellow tile, ink ring, hard shadow, tilt,
   drop-shadow) come off; it just shows the logo at a good size. ---------- */
.brandmark, body.lite .brandmark{ filter:none !important; border-radius:0; }
.logo-stamp img, .lite-signup-sheet .logo-stamp img{
  width:72px !important; height:72px !important; transform:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; background:none !important; padding:0 !important;
}
.brand-mark{ width:72px !important; height:72px !important; background:none !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; }
.brand-mark img{ width:72px !important; height:72px !important; }
.hm .hero-logo{ width:52px !important; height:52px !important; }

/* ---------- v180: distance menu selection = yellow (was lime green) ---------- */
.reels-mi.is-sel{ background:var(--yellow) !important; color:var(--ink); }

/* ---------- v180: Explore "Happening near you" spacing — v151-fix-1's more specific
   body.exp-page rules were overriding the v158 panel padding (heading clipped, cards
   pressed to the panel edges). Same specificity now, and one inner padding for all parts. */
body.exp-page.lite-fullbleed .exp-rail--hp{ margin:10px 12px 16px !important; padding:14px 0 14px !important; border-radius:18px; overflow:hidden; }
body.exp-page.lite-fullbleed .exp-rail--hp .exp-rail__head{ padding:0 14px; margin:0 0 12px; }
body.exp-page.lite-fullbleed .exp-rail--hp .railrow{ margin:0 !important; padding:0 14px 2px !important; scroll-padding-inline:14px; gap:12px; }

/* ---------- v180: pin page — even gaps between every section of the details ---------- */
.pg-title .section{ margin-top:26px; }
.pg-title .section > .section-head, .pg-title .section > .h3{ margin-bottom:12px !important; }
.pg-gallery{ margin:22px 0 16px; }
.pg-gallery > .h3{ margin-bottom:12px !important; }
.pg-ccard{ margin:8px 0 18px; }
.atplace{ margin-top:4px; }
.pg-also{ margin:14px 0 4px; }

/* ---------- v220: pin page — gallery fills the row + even gaps; Nearby = one-line slider ---------- */
.pg-gallery{ margin:22px 0; }
.pg-gallery + .atplace, .pg-gallery + .pg-addmoment{ margin-top:0; }
/* 3 photos fill the row exactly; 4+ scroll with the 4th peeking */
.pg-gallery__ph{ width:auto; flex:0 0 calc((100% - 20px) / 3); }
.pg-gallery__row.is-scroll .pg-gallery__ph{ flex-basis:calc((100% - 20px) / 3.3); }
/* v221: snap keeps the 16px side gutter (without it a swipe snapped photo 1 flush to the screen edge) */
.pg-gallery__row{ scroll-padding-inline:16px; }
/* v222: "Been here? Add a moment" sits the same 22px under "At this place" as the gallery above it (was 10px) */
.atplace + .pg-addmoment{ margin-top:22px; }
.pg-slider{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  margin:0 -16px; padding:0 16px 2px; scroll-padding-inline:16px; -webkit-overflow-scrolling:touch; }
.pg-slider::-webkit-scrollbar{ display:none; }
.pg-slider > .vcard{ flex:0 0 42%; min-width:0; scroll-snap-align:start; }
.pg-info{ margin-top:4px; }
.pg-report{ margin-top:12px; }

/* ---------- v181: highlight stars (socials + links) — light up the moment they're tapped ---------- */
.social-hl{ position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:40px; height:40px; cursor:pointer; }
.social-hl input{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.social-hl i{ font-size:22px; color:var(--muted-2,#b6bac2); transition:color .12s ease, transform .12s ease; }
.social-hl input:checked + i{ color:var(--yellow); transform:scale(1.12); filter:drop-shadow(0 0 0 var(--ink)); -webkit-text-stroke:1px var(--ink); }
.social-hl input:focus-visible + i{ outline:3px solid var(--blue); outline-offset:3px; border-radius:6px; }
.social-hl-none input{ accent-color:var(--ink); }
/* profile: the highlighted social + highlighted link are yellow chips, shown first */
.link-chips .chip.chip--hl{ background:var(--yellow) !important; color:var(--ink) !important; border:1.5px solid var(--ink) !important; font-weight:800; }
.link-chips .chip.chip--hl i{ color:var(--ink) !important; }

/* ---------- v181: menu user card — padding inside so the photo and the pencil clear the edges ---------- */
.menu-user{ padding:14px 14px 14px 16px !important; gap:12px; border-radius:var(--r-card,18px); }
.menu-user .av, .menu-user__av-ph{ flex:0 0 auto; width:52px !important; height:52px !important; }
.menu-user__name{ display:block; }
.menu-user__edit{ width:40px !important; height:40px !important; margin-left:4px; }

/* ---------- v181: pin page play button — see-through so the clip shows behind it ---------- */
.pinA__hero .pin-gallery__play{
  background:rgba(255,255,255,.72) !important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-color:rgba(20,21,24,.85) !important; box-shadow:0 0 0 4px rgba(255,210,63,.75) !important;
}
/* v181: pin page address under the map — label line, then the full address across the width */
.pg-addr{ display:block; margin:12px 2px 0; text-decoration:none; color:var(--ink); }
.pg-addr__k{ display:flex; align-items:center; gap:5px; font:800 11px/1 var(--font-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.pg-addr__v{ display:block; margin-top:6px; font:600 14px/1.45 var(--font-ui); color:var(--ink); }

/* ---------- v181: offer sticker on profile / pin-page cards (same pink "offer" sticker as Explore) ---------- */
.vcard-offer{ position:absolute; top:8px; left:8px; z-index:3; display:inline-flex; align-items:center; gap:4px; padding:4px 9px;
  border:1.5px solid var(--ink); border-radius:999px; background:var(--pink,#ff5ea8); color:#fff; font:800 11px/1 var(--font-ui);
  transform:rotate(-2deg); white-space:nowrap; }
.vcard-offer i{ font-size:11px; color:#fff; }
.vcard__media .sticker.tl ~ .vcard-offer{ top:40px; }   /* owner view: below the views / Private sticker */

/* v185 — "Preparing for your followers" overlay on the owner's own new pin card (profile) */
.vcard .proc-ov{ position:absolute; inset:0; z-index:4; background:rgba(20,21,24,.55); color:#fff; transition:opacity .4s ease; }
.vcard .proc-ov__mid{ position:absolute; inset:0 0 18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center; padding:0 10px; }
.vcard .proc-ov__mid b{ font:800 12.5px/1.25 var(--font-ui); }
.vcard .proc-ov__pct{ font:800 15px/1 var(--font-ui); color:var(--yellow); min-height:15px; }
.vcard .proc-ov__eta{ font:600 11px/1.3 var(--font-ui); opacity:.9; }
.vcard .proc-ov__spin{ width:28px; height:28px; border-radius:50%; border:3px solid rgba(255,255,255,.35); border-top-color:#fff; animation:smProcSpin .8s linear infinite; }
.vcard .proc-ov__bar{ position:absolute; left:10px; right:10px; bottom:10px; height:5px; border-radius:999px; background:rgba(255,255,255,.3); overflow:hidden; }
.vcard .proc-ov__bar i{ display:block; height:100%; background:var(--yellow); border-radius:999px; transition:width .6s ease; }
.vcard.is-proc .tagline, .vcard.is-proc .scrim{ visibility:hidden; }
.vcard.is-ready .proc-ov{ opacity:0; pointer-events:none; }
.vcard.is-ready .tagline, .vcard.is-ready .scrim{ visibility:visible; }
@keyframes smProcSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .vcard .proc-ov__spin{ animation:none; } }
.sm-reel-ownerstatus__eta{ font-weight:600; opacity:.8; }
.vcard.is-proc .vcard__mgmt{ z-index:6; }   /* edit / private / delete stay usable while it prepares */

/* v250: map credit (OpenFreeMap / OpenStreetMap licence) always visible as a small grey line on every MapLibre map */
.maplibregl-ctrl-bottom-right{ display:block!important; pointer-events:none; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib{ display:block!important; pointer-events:auto; margin:0 4px 4px 0!important; padding:1px 6px; background:rgba(255,255,255,.78); border-radius:4px; font:500 9px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif; color:#6b7076; max-width:calc(100vw - 24px); }
.maplibregl-ctrl-attrib a{ color:inherit; text-decoration:none; }
.maplibregl-ctrl-attrib-button{ display:none!important; }
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner{ display:block!important; }

/* ---------- v296: plan date sheet = the app's sheet (app_sheets.dart _PlanDateBody, bottom_sheet.dart, cards.dart SMListRow, plan_calendar.dart) ----------
   Sheet: 20px top corners, 2px ink border, padding 10/20/24, 40x5 handle, title Bricolage 22/800 centred, name 13.5 muted.
   Row: 30px icon tile (card-2, r9, 16px icon) + label 14.5/500 + value 12.5/500 muted on the right; padding 13/14 (= 56px rows), no dividers.
   Special-date rows: light yellow (#fff3c4). Calendar closed until "Pick a date". */
.pd-sheet{ border-radius:20px 20px 0 0; padding:10px 20px calc(24px + env(safe-area-inset-bottom,0px)); }
.pd-sheet .pd-grab{ width:40px; height:5px; border-radius:3px; background:rgba(20,21,24,.12); margin:0 auto 16px; }
.pd-sheet .pd-title{ font:800 22px/1.15 var(--font-display); letter-spacing:-.3px; text-align:center; margin:0 0 6px; }
.pd-sheet .pd-sub{ font:500 13.5px/1.35 var(--font-ui); color:#6b7076; text-align:center; margin:0 0 18px; }
.pd-sheet .pd-title:last-child{ margin-bottom:18px; }
.pd-body{ max-height:62vh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.pd-rows{ display:flex; flex-direction:column; }
.pd-row{
  display:flex; align-items:center; gap:12px; width:100%; margin:0; padding:13px 14px; border:0; border-radius:0; background:transparent;
  font:500 14.5px/1.3 var(--font-ui); color:#141518; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.pd-row:active{ background:rgba(20,21,24,.05); }
.pd-row:focus-visible{ outline:2px solid #141518; outline-offset:-2px; }
.pd-row.is-sp{ background:#fff3c4; }
.pd-row.is-sp:active{ background:#ffeaa0; }
.pd-ico{ flex:0 0 30px; width:30px; height:30px; border-radius:9px; background:#f4f5f7; display:flex; align-items:center; justify-content:center; }
.pd-ico i{ font-size:16px; color:#141518; line-height:1; }
.pd-row__main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.pd-row__t{ font:500 14.5px/1.3 var(--font-ui); color:#141518; }
.pd-row__s{ margin-top:2px; font:500 12.5px/1.35 var(--font-ui); color:#6b7076; }
.pd-row__v{ flex:0 1 auto; margin-left:8px; max-width:55%; text-align:right; font:500 12.5px/1.35 var(--font-ui); color:#6b7076; }
.pd-chev{ flex:0 0 auto; margin-left:6px; font-size:15px; color:#80858d; }
.pd-cal{ padding:6px 0 4px; }
.pd-cal[hidden]{ display:none; }
.pd-cal__head{ display:flex; align-items:center; }
.pd-cal__month{ flex:1; text-align:center; font:700 15px/1.4 var(--font-ui); color:#141518; }
.pd-cal__nav{ flex:0 0 44px; width:44px; height:44px; padding:0; border:0; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#141518; font-size:18px; }
.pd-cal__nav:disabled{ color:rgba(20,21,24,.12); cursor:default; }
.pd-cal__dow{ display:grid; grid-template-columns:repeat(7,1fr); margin:8px 0 4px; }
.pd-cal__dow span{ text-align:center; font:700 12.5px/1.35 var(--font-ui); color:#6b7076; }
.pd-cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.pd-day{ position:relative; aspect-ratio:1.15; padding:0; border:0; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.pd-day__n{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:500 14.5px/1.4 var(--font-ui); color:#141518; box-sizing:border-box; }
.pd-day.is-good .pd-day__n{ background:#fff3c4; }
.pd-day.is-sel .pd-day__n{ background:#ffd23f; font-weight:700; }
.pd-day.is-today .pd-day__n{ border:2px solid #141518; font-weight:700; }
.pd-day:disabled{ cursor:default; }
.pd-day.is-past .pd-day__n, .pd-day:disabled .pd-day__n{ color:rgba(20,21,24,.12); }
.pd-day__dot{ position:absolute; left:50%; bottom:calc(50% - 19px + 1px); width:6px; height:6px; margin-left:-3px; border-radius:50%; background:#ffd23f; border:1px solid #141518; box-sizing:border-box; }
.pd-day:focus-visible .pd-day__n{ outline:2px solid #141518; outline-offset:1px; }
.pd-cal__legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; margin-top:6px; }
.pd-cal__legend span{ display:inline-flex; align-items:center; gap:5px; font:600 11.5px/1.35 var(--font-ui); color:#6b7076; }
.pd-lg{ display:inline-block; width:9px; height:9px; border-radius:50%; background:#fff3c4; box-sizing:border-box; }
.pd-lg--dot{ background:#ffd23f; border:1px solid #141518; }
/* the app's toast: white card, 1.5px ink border, r12, soft shadow, top of the screen (showSMToast) */
.lite-v31 .v31-toast.pd-toast, .v31-toast.pd-toast{ position:fixed; left:16px; right:16px; top:calc(12px + env(safe-area-inset-top,0px)); z-index:3100; max-width:calc(480px - 32px); margin:0 auto; transform:translateY(-10px); rotate:0deg;
  padding:12px 14px; border-radius:12px; background:#fff; color:#141518; border:1.5px solid #141518; box-shadow:0 6px 20px rgba(20,21,24,.08); font:600 14px/1.4 var(--font-ui); white-space:normal; gap:0; }
.lite-v31 .v31-toast.pd-toast.show, .v31-toast.pd-toast.show{ transform:translateY(0); }
.v31-toast.pd-toast i{ display:none; }
.v31-toast.pd-toast--err{ border-color:#e5484d; }

/* ---------- v295: My Plans "Spots you might like" (plan.php) ---------- */
.sug{ margin-top:22px; }
.sug__h{ font:800 17px/1.2 var(--font-display); color:var(--ink); margin:0 0 4px; }
.sug__sub{ font:500 13px/1.4 var(--font-ui); color:var(--muted); margin:0 0 12px; }
.sug__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.sug--row .sug__grid{ display:flex; gap:12px; overflow-x:auto; margin:0 -16px; padding:0 16px 6px; scrollbar-width:none; scroll-snap-type:x mandatory; }
.sug--row .sug__grid::-webkit-scrollbar{ display:none; }
.sug--row .sug-card{ flex:0 0 44%; max-width:200px; scroll-snap-align:start; }
.sug-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line,#dfe1e6); border-radius:16px; overflow:hidden; transition:opacity .25s ease; }
.sug-card.is-gone{ opacity:.35; }
.sug-card__img{ display:block; position:relative; aspect-ratio:4/3; background:var(--card-2,#f1f2f4); }
.sug-card__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.sug-card__body{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:3px; flex:1; }
.sug-card__t{ font:800 14px/1.2 var(--font-display); color:var(--ink); text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sug-card__m{ font:600 12px/1.3 var(--font-ui); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sug-card__btn{ margin-top:8px; align-self:flex-start; display:inline-flex; align-items:center; gap:5px; min-height:36px; padding:0 14px; border-radius:999px; background:var(--yellow,#ffe34d); border:var(--bd); font:800 12.5px/1 var(--font-ui); color:var(--ink); cursor:pointer; }
.sug-card__btn.is-added{ background:#fff; }
.sug-card__btn:disabled{ opacity:.7; cursor:default; }

/* invisible 44px tap area around the 32px card plan dot (look unchanged) */
.vcard > .plan-dot::after{ content:''; position:absolute; inset:-8px; border-radius:50%; }