/* mesh — unified item "shelf" control (Goodreads model). One trigger + caret
   that opens a floating popover picker (Guardar · Quiero ir · Ya fui · Quitar).
   Shares the Calendar feature's MAGENTA accent (#e5477f) for the intent path
   (cold invite + committed "quiero"), a calm neutral for plain "Guardado", and
   a BLUE (#2563c9) "done" state for "Ya fui" — matching the mockup. Two sizes:
     .is-detail  → full labeled pill (single-page primary CTA).
     .is-compact → icon+label chip that sits in the Save/Rec/Share row.
   Hardened with !important against Elementor button bleed, like its siblings. */

.mesh-shelf {
  display: inline-flex;
  align-items: center;
  font-family: "Space Grotesk", system-ui, sans-serif;
}

.mesh-shelf .mesh-shelf-btn {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 !important;
  border: 2px solid #111 !important;
  background: #e5477f !important;
  color: #fff !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer;
  border-radius: 12px !important;
  box-shadow: none !important;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.mesh-shelf .mesh-shelf-btn:active { transform: scale(.97); }
.mesh-shelf .mesh-shelf-ico { font-size: 18px; line-height: 1; }
.mesh-shelf .mesh-shelf-caret { font-size: 15px !important; line-height: 1; opacity: .85; margin-left: 1px; }

/* ── Detail (single-page primary CTA) ─────────────────────────── */
.mesh-shelf.is-detail .mesh-shelf-btn {
  height: 44px !important;
  padding: 0 18px !important;
  font-size: 15px !important;
  box-shadow: 3px 3px 0 rgba(17, 17, 17, .18) !important;
}
/* cold (invite) + quiero (committed) → magenta. */
.mesh-shelf.is-detail.is-cold   .mesh-shelf-btn:hover,
.mesh-shelf.is-detail.is-quiero .mesh-shelf-btn:hover { background: #cf3a6d !important; }
/* saved → filled purple, so it reads as "marked" like the other on-states
   (quiero magenta, fui green, recommend purple). */
.mesh-shelf.is-detail.is-saved .mesh-shelf-btn {
  background: #6041d5 !important; color: #fff !important; border-color: #111 !important;
}
.mesh-shelf.is-detail.is-saved .mesh-shelf-btn:hover { background: #5334c0 !important; }
/* fui → green "done" (achieved, distinct from the magenta intent path). */
.mesh-shelf.is-detail.is-fui .mesh-shelf-btn {
  background: #16a34a !important; border-color: #111 !important; color: #fff !important;
}
.mesh-shelf.is-detail.is-fui .mesh-shelf-btn:hover { background: #15803d !important; }

/* Prominent detail shelf for the single-page info column — full-width, taller,
   and a hard offset shadow, so it reads as a primary CTA next to the OFFICIAL
   SITE button. Covers BOTH wrappers: .mesh-info-shelf (venue template) and
   .mesh-quiero-cta (item template, whose old .mesh-quiero-btn CSS no longer
   applies now that [mesh_quiero] renders .mesh-shelf). */
.mesh-info-shelf .mesh-shelf,
.mesh-quiero-cta .mesh-shelf { display: block; }
.mesh-info-shelf .mesh-shelf.is-detail .mesh-shelf-btn,
.mesh-quiero-cta .mesh-shelf.is-detail .mesh-shelf-btn {
  width: 100% !important;
  justify-content: space-between !important;
  height: auto !important;
  padding: 16px 20px !important;
  /* Match the OFFICIAL SITE button's weight: bold Barlow, uppercase, hard shadow. */
  font-family: "Barlow Condensed", system-ui, sans-serif !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  box-shadow: 5px 5px 0 #111 !important;
}
.mesh-info-shelf .mesh-shelf.is-detail .mesh-shelf-ico,
.mesh-quiero-cta .mesh-shelf.is-detail .mesh-shelf-ico { font-size: 22px !important; }
.mesh-info-shelf .mesh-shelf.is-detail .mesh-shelf-btn:hover,
.mesh-quiero-cta .mesh-shelf.is-detail .mesh-shelf-btn:hover {
  transform: translate(-2px, -2px) !important; box-shadow: 7px 7px 0 #111 !important;
}
.mesh-info-shelf .mesh-shelf.is-detail .mesh-shelf-btn:active,
.mesh-quiero-cta .mesh-shelf.is-detail .mesh-shelf-btn:active {
  transform: translate(2px, 2px) !important; box-shadow: 2px 2px 0 #111 !important;
}

/* ── Compact (cards / search / map / portal) — mirrors .mesh-inline-btn box ── */
.mesh-shelf.is-compact .mesh-shelf-btn {
  min-width: 46px !important;
  height: 46px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  border: 1px solid rgba(0, 0, 0, .16) !important;
  background: #fff !important;
  color: #1a1a1a !important;
}
.mesh-shelf.is-compact .mesh-shelf-ico { font-size: 21px !important; }
.mesh-shelf.is-compact .mesh-shelf-caret { font-size: 14px !important; }
.mesh-shelf.is-compact.is-cold .mesh-shelf-btn:hover { border-color: #e5477f !important; color: #c93368 !important; }
/* quiero → filled magenta (mirrors Save/Follow "is-on"). */
.mesh-shelf.is-compact.is-quiero .mesh-shelf-btn { background: #e5477f !important; border-color: #e5477f !important; color: #fff !important; }
.mesh-shelf.is-compact.is-quiero .mesh-shelf-btn:hover { background: #cf3a6d !important; border-color: #cf3a6d !important; }
/* saved → filled purple (matches the other marked on-states). */
.mesh-shelf.is-compact.is-saved .mesh-shelf-btn { background: #6041d5 !important; border-color: #6041d5 !important; color: #fff !important; }
.mesh-shelf.is-compact.is-saved .mesh-shelf-btn:hover { background: #5334c0 !important; border-color: #5334c0 !important; }
/* fui → filled green. */
.mesh-shelf.is-compact.is-fui .mesh-shelf-btn { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }
.mesh-shelf.is-compact.is-fui .mesh-shelf-btn:hover { background: #15803d !important; border-color: #15803d !important; }

/* Success pulse — the trigger acknowledges an action locally, so the toast
   isn't the only feedback. Triggered by adding .is-pulse in mesh-shelf.js. */
.mesh-shelf .mesh-shelf-btn.is-pulse { animation: mesh-shelf-pulse .4s cubic-bezier(.16, 1, .3, 1); }
@keyframes mesh-shelf-pulse {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* Icon-only compact shelf — for JS-built map popups + search cards, where it
   sits in a row of small icon buttons and a labeled pill would be huge. Drops
   the label + caret and squares off to ~46px to match its neighbors. State is
   read from the icon + fill color (cold = magenta calendar-plus, etc.). */
.mesh-shelf.is-icon .mesh-shelf-label,
.mesh-shelf.is-icon .mesh-shelf-caret { display: none !important; }
.mesh-shelf.is-icon .mesh-shelf-btn { min-width: 46px !important; width: 46px !important; padding: 0 !important; gap: 0 !important; border-radius: 999px !important; }

@media (prefers-reduced-motion: reduce) {
  .mesh-shelf .mesh-shelf-btn { transition: none; }
  .mesh-shelf .mesh-shelf-btn.is-pulse { animation: none; }
}

/* ── Floating popover picker ───────────────────────────────────── */
/* Appended to <body> and fixed-positioned under the trigger so it escapes card
   overflow + map-popup clipping. */
.mesh-shelf-pop {
  position: fixed; z-index: 100001; display: none;
  min-width: 224px; padding: 6px;
  background: #fff; border: 2px solid #111; border-radius: 14px;
  box-shadow: 6px 6px 0 rgba(17, 17, 17, .16);
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.mesh-shelf-pop.is-open { display: block; animation: mesh-shelf-pop-in .12s ease; }
@keyframes mesh-shelf-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.mesh-shelf-pop .mesh-shelf-opt {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; gap: 11px;
  width: 100%; margin: 0; padding: 11px 12px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 9px; text-align: left;
  color: #1a1a1a; font-size: 15px; font-weight: 600; font-family: inherit;
}
.mesh-shelf-pop .mesh-shelf-opt-ico { font-size: 20px; line-height: 1; color: #555; flex: 0 0 auto; }
.mesh-shelf-pop .mesh-shelf-opt-lbl { flex: 1 1 auto; }
.mesh-shelf-pop .mesh-shelf-opt-chk { font-size: 17px; color: #e5477f; flex: 0 0 auto; }
.mesh-shelf-pop .mesh-shelf-opt:hover { background: #faf2f5; }
.mesh-shelf-pop .mesh-shelf-opt.is-active { background: #fbeaf0; }
.mesh-shelf-pop .mesh-shelf-opt.is-active .mesh-shelf-opt-ico { color: #e5477f; }
/* Quitar reads as the destructive tail action. */
.mesh-shelf-pop .mesh-shelf-opt[data-action="remove"] { color: #b3261e; }
.mesh-shelf-pop .mesh-shelf-opt[data-action="remove"] .mesh-shelf-opt-ico { color: #b3261e; }
.mesh-shelf-pop .mesh-shelf-opt[data-action="remove"]:hover { background: #fbeceb; }
.mesh-shelf-pop .mesh-shelf-sep { height: 1px; margin: 5px 8px; background: rgba(0, 0, 0, .1); }

/* ── Logged-out "create account" modal (persistent-intent prompt) ──────────── */
.mesh-shelf-signup {
  position: fixed; inset: 0; z-index: 100002;
  display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(17, 17, 17, .6);
}
.mesh-shelf-signup.is-open { display: flex; }
/* Brutalist, matching the JOIN MESH modal: cream card, hard black border +
   offset shadow, sharp corners, uppercase Barlow, black CTA with yellow text. */
.mesh-shelf-signup .mss-card {
  position: relative; width: 100%; max-width: 420px;
  background: #f5f2eb !important; border: 3px solid #0a0a0a; border-radius: 4px;
  box-shadow: 10px 10px 0 rgba(10, 10, 10, .9); padding: 30px 28px 26px; text-align: center;
  font-family: "Space Grotesk", system-ui, sans-serif; color: #0a0a0a;
}
.mesh-shelf-signup .mss-x {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  display: flex !important; align-items: center; justify-content: center;
  border: 2px solid #0a0a0a !important; background: #fff !important; color: #0a0a0a !important;
  cursor: pointer; border-radius: 2px !important; box-shadow: none !important;
  padding: 0 !important; line-height: 1 !important;
}
.mesh-shelf-signup .mss-x .ti { font-size: 20px; line-height: 1; }
.mesh-shelf-signup .mss-x:hover { background: #ffe135 !important; }
.mesh-shelf-signup .mss-ic {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 8px;
  background: #fbeaf0; color: #e5477f; display: flex; align-items: center; justify-content: center;
  border: 2px solid #0a0a0a;
}
.mesh-shelf-signup .mss-ic .ti { font-size: 26px; }
.mesh-shelf-signup .mss-h {
  font-family: "Barlow Condensed", system-ui, sans-serif; font-weight: 800;
  font-size: 30px; line-height: 1.02; margin: 0 0 8px; text-transform: uppercase; color: #0a0a0a;
}
.mesh-shelf-signup .mss-sub { font-size: 14px; color: #444; margin: 0 0 22px; line-height: 1.4; }
.mesh-shelf-signup .mss-cta {
  display: block; width: 100%; padding: 15px; box-sizing: border-box;
  background: #0a0a0a !important; color: #ffe135 !important; border: 3px solid #0a0a0a !important;
  border-radius: 2px !important; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; box-shadow: 5px 5px 0 #6041d5 !important; transition: transform .1s ease;
}
.mesh-shelf-signup .mss-cta:hover { background: #1a1a1a !important; transform: translate(-1px, -1px); }
.mesh-shelf-signup .mss-login {
  display: inline-block; margin-top: 18px; color: #6041d5; font-weight: 800; font-size: 14px;
  text-decoration: none; border-bottom: 3px solid #ffe135; padding-bottom: 2px;
}
.mesh-shelf-signup .mss-login:hover { background: #ffe135; color: #0a0a0a; }

/* ── Post-visit review sheet ───────────────────────────────────── */
.msr-back {
  position: fixed; inset: 0; z-index: 100003;
  display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(17, 17, 17, .6);
}
.msr-back.is-open { display: flex; }
.msr-card {
  position: relative; width: 100%; max-width: 440px;
  background: #fff; border: 2px solid #111; border-radius: 18px;
  box-shadow: 8px 8px 0 rgba(17, 17, 17, .18); padding: 26px 24px 20px;
  font-family: "Space Grotesk", system-ui, sans-serif; color: #111;
}
.msr-handle { display: none; }
/* !important throughout the chromeless buttons — public pages run Astra/Elementor,
   whose button rules otherwise paint the ✕ and "Omitir" with a magenta fill. */
.msr-x {
  position: absolute; top: 12px; right: 12px; width: 32px !important; height: 32px !important;
  border: 0 !important; background: transparent !important; background-image: none !important;
  color: #999 !important; cursor: pointer; border-radius: 999px !important;
  box-shadow: none !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important;
}
.msr-x:hover { background: rgba(0, 0, 0, .06) !important; color: #333 !important; }
.msr-h {
  font-family: "Barlow Condensed", system-ui, sans-serif; font-weight: 800;
  font-size: 24px; line-height: 1.05; margin: 2px 0 16px; text-transform: uppercase;
}
.msr-reco { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.msr-reco-q { font-size: 15px; font-weight: 600; }
.msr-reco-btns { display: inline-flex; gap: 8px; }
.msr-reco-btn {
  -webkit-appearance: none !important; appearance: none !important;
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 16px; margin: 0;
  border: 2px solid #111 !important; background: #fff !important; color: #111 !important;
  border-radius: 12px !important; font: inherit; font-weight: 700; cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.msr-reco-btn .ti { font-size: 17px; }
/* Active recommend = the SAME purple as the 🚀 rec button's selected state. */
.msr-reco-btn[data-reco="yes"].is-on { background: #6041d5 !important; border-color: #6041d5 !important; color: #fff !important; }
/* Single text box (always visible). The visibility line below flips with the
   recommend toggle so private↔public is a choice, never a surprise. */
.msr-textwrap { margin: 2px 0 14px; }
.msr-text {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 76px;
  border: 2px solid #111; border-radius: 12px; padding: 11px 13px;
  font: inherit; font-size: 15px; color: #111; background: #fff;
}
.msr-text:focus { outline: none; border-color: #6041d5; }
.msr-vis { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; color: #777; }
.msr-vis .ti { font-size: 15px; }
.msr-vis.is-public { color: #6041d5; }
.msr-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.msr-skip {
  border: 0 !important; background: transparent !important; background-image: none !important;
  box-shadow: none !important; color: #888 !important; font: inherit; font-weight: 600 !important;
  font-size: 14px !important; cursor: pointer; padding: 10px 8px !important; margin: 0 !important;
  min-height: 0 !important; text-transform: none !important;
}
.msr-skip:hover { color: #555 !important; background: transparent !important; }
.msr-save {
  -webkit-appearance: none !important; appearance: none !important;
  height: 44px; padding: 0 22px; margin: 0;
  border: 2px solid #111 !important; background: #e5477f !important; color: #fff !important;
  border-radius: 12px !important; font: inherit; font-weight: 700; cursor: pointer;
  box-shadow: 3px 3px 0 rgba(17, 17, 17, .18) !important;
}
.msr-save:hover { background: #cf3a6d !important; }
.msr-save[disabled] { opacity: .6; cursor: default; }

/* Mobile: dock it as a bottom sheet. */
@media (max-width: 560px) {
  .msr-back { align-items: flex-end; padding: 0; }
  .msr-card { max-width: none; border-radius: 20px 20px 0 0; border-bottom: 0; box-shadow: 0 -8px 32px rgba(0,0,0,.28); padding-bottom: 26px; }
  .msr-handle { display: block; width: 40px; height: 4px; border-radius: 999px; background: rgba(0,0,0,.18); margin: 0 auto 14px; }
  /* Stack the recommend row: label over a full-width toggle (space-between made
     the button wrap to a lopsided half-width). Save spans full width too. */
  .msr-reco { flex-direction: column; align-items: stretch; gap: 8px; }
  .msr-reco-btn { width: 100%; justify-content: center; height: 44px; }
  .msr-actions { margin-top: 18px; }
  .msr-save { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .msr-card { animation: none; } }

/* ── Space-page visit log (.mesh-visit-log) ────────────────────── */
.mesh-visit-log { font-family: "Space Grotesk", system-ui, sans-serif; }
.mesh-visit-log .mvl-head { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #333; flex-wrap: wrap; }
.mesh-visit-log .mvl-head > .ti { color: #6041d5; }
.mesh-visit-log .mvl-toggle { border: 0; background: none; color: #6041d5; cursor: pointer; padding: 2px; display: inline-flex; }
.mesh-visit-log .mvl-list { margin: 5px 0 0 5px; padding-left: 9px; border-left: 2px solid rgba(96,65,213,.3); }
.mesh-visit-log .mvl-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; padding: 2px 0; }
.mesh-visit-log .mvl-row > .ti { color: #6041d5; font-size: 14px; }
.mesh-visit-log .mvl-note { color: #888; font-style: italic; }
.mesh-visit-log .mvl-del { margin-left: auto; border: 0; background: none; color: #999; cursor: pointer; padding: 2px; display: inline-flex; }
.mesh-visit-log .mvl-del:hover { color: #c0201b; }
/* All buttons here are hardened with !important + appearance reset because the
   single-page wrappers (#venue-wrap / #mesh-item-wrap) style `button` by ID,
   which beats plain classes and was mangling Save/×/date. */
.mesh-visit-log .mvl-add { margin-top: 8px; }
.mesh-visit-log .mvl-add-btn {
  -webkit-appearance: none !important; appearance: none !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
  color: #6041d5 !important; font-family: "Space Grotesk", system-ui, sans-serif !important;
  font-weight: 700 !important; font-size: 13px !important; text-transform: none !important;
  letter-spacing: normal !important; cursor: pointer; display: inline-flex; align-items: center;
  gap: 5px; padding: 4px 0 !important; margin: 0 !important; min-height: 0 !important; width: auto !important;
}
.mesh-visit-log .mvl-add-btn:hover { text-decoration: underline; }
.mesh-visit-log .mvl-add-btn[hidden] { display: none; }
/* Form sits on its OWN line (the button hides when it opens); date + Save share
   one row, date flexing to fill. Both must respect the hidden attr, whose UA
   display:none we'd otherwise clobber with display:flex. */
.mesh-visit-log .mvl-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mesh-visit-log .mvl-form[hidden] { display: none; }
.mesh-visit-log .mvl-date {
  flex: 1 1 150px; min-width: 0; max-width: 200px; height: 38px !important; min-height: 38px !important;
  box-sizing: border-box !important; -webkit-appearance: none; appearance: none;
  border: 2px solid #111 !important; border-radius: 8px !important; padding: 0 10px !important;
  font: inherit !important; font-size: 14px !important; background: #fff !important; color: #111 !important; margin: 0 !important;
}
.mesh-visit-log .mvl-save {
  -webkit-appearance: none !important; appearance: none !important;
  flex: 0 0 auto; height: 38px !important; box-sizing: border-box !important; min-height: 0 !important;
  border: 2px solid #111 !important; background: #6041d5 !important; color: #fff !important;
  border-radius: 8px !important; box-shadow: none !important; padding: 0 16px !important; margin: 0 !important;
  font-family: "Space Grotesk", system-ui, sans-serif !important; font-weight: 700 !important;
  font-size: 13px !important; text-transform: none !important; letter-spacing: normal !important;
  line-height: 1 !important; cursor: pointer; transition: background-color .12s ease;
}
.mesh-visit-log .mvl-save:hover { background: #5334c0 !important; }
.mesh-visit-log .mvl-cancel {
  -webkit-appearance: none !important; appearance: none !important;
  flex: 0 0 auto; width: 38px !important; height: 38px !important; box-sizing: border-box !important;
  min-height: 0 !important; padding: 0 !important; margin: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #d8d8d8 !important; background: #fff !important; color: #777 !important;
  border-radius: 8px !important; box-shadow: none !important; cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.mesh-visit-log .mvl-cancel:hover { color: #111 !important; border-color: #111 !important; }
.mesh-visit-log .mvl-cancel .ti { font-size: 18px; }
/* Optional private note — wraps to its own full-width row under date + Save. */
.mesh-visit-log .mvl-note-input {
  flex: 1 1 100%; width: 100%; box-sizing: border-box !important; height: 38px !important; min-height: 38px !important;
  -webkit-appearance: none; appearance: none; margin: 0 !important;
  border: 2px solid #d8d8d8 !important; border-radius: 8px !important; padding: 0 12px !important;
  font: inherit !important; font-size: 14px !important; background: #fff !important; color: #111 !important;
}
.mesh-visit-log .mvl-note-input:focus { outline: none; border-color: #6041d5 !important; }
.mesh-visit-log .mvl-note-input::placeholder { color: #999; }
.mesh-visit-log .mvl-single-note { display: flex; align-items: center; gap: 6px; margin: 4px 0 0 3px; font-size: 13px; color: #666; font-style: italic; }
.mesh-visit-log .mvl-single-note > .ti { color: #6041d5; font-size: 14px; font-style: normal; }