/* gatherings.css — Gatherings tab: events, bring list, activities, chat
   Scoped to .gatherings-* classes. No :root overrides.
*/

/* ── Gatherings panel shell ── */
#gatherings-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Action strip (Plan Event / Group Holiday) ── */
.gatherings-action-strip {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  background: var(--card-bg, #fff);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  align-items: center;
}

.gatherings-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #6C3CE1, #8b5cf6);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  min-height: 44px;
}

.gatherings-action-btn:hover {
  opacity: 0.88;
}

.gatherings-action-btn.secondary {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
}

/* ── Search/filter bar ── */
.gatherings-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg2, #e8f4fd);
  border-bottom: 1px solid var(--border);
}

.gatherings-search-input {
  flex: 1;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg, #fff);
  color: var(--text);
  font-size: 1rem;   /* 16px — prevents iOS Safari auto-zoom on focus */
  outline: none;
  min-height: 44px;
}

.gatherings-search-input:focus {
  border-color: var(--blue, #6C3CE1);
  box-shadow: 0 0 0 2px rgba(0,119,182,0.18);
}

.gatherings-filter-select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg, #fff);
  color: var(--text);
  font-size: 0.85rem;
  min-height: 44px;
  cursor: pointer;
}

/* ── Gathering list ── */
.gatherings-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gatherings-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
  font-size: 0.9rem;
}

.gatherings-empty-icon {
  font-size: 2.8rem;
  display: block;
  margin-bottom: 10px;
}

/* ── Gathering card ── */
.gathering-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  outline: none;
}

.gathering-card:hover,
.gathering-card:focus {
  box-shadow: 0 4px 18px rgba(0,119,182,0.12);
  border-color: var(--blue, #6C3CE1);
}

.gathering-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.gathering-card-emoji {
  font-size: 1.8rem;
  flex-shrink: 0;
  line-height: 1;
}

.gathering-card-info {
  flex: 1;
  min-width: 0;
}

.gathering-card-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gathering-card-meta {
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.gathering-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  min-height: 28px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Planning → sky-blue (optimistic/forward-looking) */
.gathering-status-draft    { background: rgba(135,206,235,0.25); color: #0369a1; }
.gathering-status-planning { background: rgba(135,206,235,0.25); color: #0369a1; }
.gathering-status-cancelled { background: #fee2e2; color: #991b1b; }

/* Clickable status pill (cycle on click) */
.gathering-status-clickable {
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  user-select: none;
}
.gathering-status-clickable:hover,
.gathering-status-clickable:focus-visible {
  opacity: 0.8;
  transform: scale(1.04);
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.gathering-status-confirmed  { background: #d5f8ed; color: #006a50; }
.gathering-status-complete   { background: #e0e8f8; color: #4060a0; }
.gathering-status-going_ahead { background: #d1fae5; color: #065f46; }
.gathering-status-at_risk    { background: #fff3cd; color: #854d0e; }

.gathering-card-stats {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.gathering-stat-chip {
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Memory nudge on completed gatherings ── */
.gathering-memory-nudge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--blue, #3b82f6);
  opacity: 0.8;
  cursor: pointer;
  user-select: none;
}
.gathering-card:hover .gathering-memory-nudge {
  opacity: 1;
  text-decoration: underline;
}

/* ── RSVP Banner ── */
.gatherings-rsvp-banner {
  background: linear-gradient(135deg, #fff8e1, #fff3cd);
  border: 1px solid #f59e0b;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.gatherings-rsvp-banner p {
  font-size: 0.9rem;
  font-weight: 600;
  color: #92400e;
  margin: 0;
}

.gatherings-rsvp-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gatherings-rsvp-btn {
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  transition: opacity 0.15s;
}

.gatherings-rsvp-btn.yes { background: #22c55e; color: #fff; }
.gatherings-rsvp-btn.maybe { background: #f59e0b; color: #fff; }
.gatherings-rsvp-btn.no { background: #ef4444; color: #fff; }
.gatherings-rsvp-btn:hover { opacity: 0.85; }

/* Compact variant shown when user has already responded (allows changing RSVP) */
.gatherings-rsvp-responded {
  background: var(--surface, var(--card-bg, #fff));
  border-color: var(--border, #cbd5e1);
  padding: 8px 16px;
}
.gatherings-rsvp-responded p {
  color: var(--text, #374151);
  font-size: 0.84rem;
}
.gatherings-rsvp-responded .gatherings-rsvp-btn {
  padding: 5px 12px;
  font-size: 0.78rem;
  min-height: 36px;
}

/* ── Detail view ── */
.gatherings-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ── Title row: emoji + event name (own line at top, centred) ── */
.gatherings-detail-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 16px 6px;
  background: var(--card-bg, #fff);
  text-align: center;
}

.gatherings-detail-title-row .gathering-card-emoji {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.gatherings-detail-title {
  margin: 0;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* ── Action row: Back | status pill | Edit ── */
.gatherings-detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 10px;
  background: var(--card-bg, #fff);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.gatherings-back-btn {
  background: rgba(108,60,225,0.08);
  border: 1px solid rgba(108,60,225,0.18);
  border-radius: 20px;
  color: var(--blue, #6C3CE1);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 6px 14px;
  font-weight: 700;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s;
}
.gatherings-back-btn:hover,
.gatherings-back-btn:active {
  background: rgba(108,60,225,0.15);
}

.gatherings-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ── Invite + button (pink circle, dead-centred) ── */
.gatherings-invite-btn {
  background: linear-gradient(135deg, #FF5D6C, #e04a58);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  margin: 0;
  line-height: 30px;     /* forces exact vertical centering of + glyph */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s, transform 0.1s;
}
.gatherings-invite-btn:hover,
.gatherings-invite-btn:active {
  opacity: 0.88;
  transform: scale(1.08);
}

/* Pets paw icon in the action bar — visual indicator only, no text */
.gathering-pets-header-icon {
  font-size: 1.1rem;
  line-height: 1;
  cursor: default;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.07);
}

/* ── Internal tabs ── */
.gatherings-inner-tabs {
  display: flex;
  justify-content: center;
  border-bottom: 2px solid var(--border);
  background: var(--bg2, #e8f4fd);
  flex-shrink: 0;
  overflow-x: auto;
}

.gatherings-inner-tab {
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  transition: color 0.15s, border-color 0.15s;
}

.gatherings-inner-tab.active {
  color: var(--blue, #6C3CE1);
  border-bottom-color: var(--blue, #6C3CE1);
}

.gatherings-inner-tab:hover {
  color: var(--blue, #6C3CE1);
}

/* Swipeable panels container */
.gatherings-inner-panels-track {
  display: flex;
  flex: 1;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.gatherings-inner-panels-track::-webkit-scrollbar { display: none; }

.gatherings-inner-panel {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  overflow-y: auto;
  padding: 16px;
  /* prevent vertical jump during horizontal swipe */
  will-change: transform;
}

/* Keep .active class for tab sync but panels are always rendered */
.gatherings-inner-panel.active { /* no display change needed */ }

/* ── Overview tab ── */
.gathering-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

@media (max-width: 520px) {
  .gathering-overview-grid { grid-template-columns: 1fr; }
}

/* ── Occasion+name hero card ── */
.gathering-occasion-hero {
  background: linear-gradient(135deg, #6C3CE1 0%, #FF5D6C 100%);
  border-radius: 0;
  padding: 18px 20px 20px;
  text-align: center;
  margin-bottom: 0;
  box-shadow: 0 2px 12px rgba(108,60,225,0.2);
}

.gathering-occasion-hero-emoji {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 8px;
  line-height: 1;
}

.gathering-occasion-hero-name {
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 6px;
}

.gathering-occasion-hero-label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 3px 12px;
}

/* ── Occasion label + pets icon row in hero ── */
.gathering-hero-occasion-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 0;
}

.gathering-hero-pets-icon {
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.95;
}

/* ── Inline emoji left of the event name ── */
.gathering-hero-emoji {
  font-size: 1.55rem;
  margin-right: 8px;
  vertical-align: -0.1em;
  flex-shrink: 0;
}

/* ── Status pill row inside the hero banner ── */
.gathering-hero-status-row {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.gathering-hero-status-row .gathering-status-pill {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
}
.gathering-hero-status-row .gathering-status-pill:hover,
.gathering-hero-status-row .gathering-status-pill:focus-visible {
  background: rgba(255,255,255,0.32) !important;
}

.gathering-overview-field {
  background: rgba(255, 93, 108, 0.07); /* soft pink/peach tint from app palette */
  border-radius: 10px;
  padding: 10px 14px;
}

.gathering-overview-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.gathering-overview-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.gathering-members-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.gathering-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg2, #e8f4fd);
  border-radius: 10px;
  padding: 8px 12px;
}

.gathering-member-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6C3CE1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  object-fit: cover; /* for <img> variant */
}
/* When the avatar is an actual photo, strip gradient and overflow */
img.gathering-member-avatar {
  background: none;
  overflow: hidden;
}

.gathering-member-name {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.gathering-rsvp-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}

.rsvp-confirmed  { background: #d5f8ed; color: #006a50; }
.rsvp-pending    { background: rgba(135,206,235,0.2); color: #0369a1; }
.rsvp-declined   { background: #fee2e2; color: #9b1c1c; }
.rsvp-maybe      { background: #fef3c7; color: #92400e; }
/* Organiser → app pink-red accent */
.rsvp-organiser  { background: rgba(255,93,108,0.12); color: #c0304a; font-weight: 700; }
.rsvp-maybe { background: #fef3c7; color: #78350f; }

.gathering-remove-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  border-radius: 4px;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gathering-remove-btn:hover { color: #ef4444; }

/* ── Bring list tab ── */
.bring-category-header {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 16px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.bring-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.bring-item-info {
  flex: 1;
  min-width: 0;
}

.bring-item-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.bring-item-claimer {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}

.bring-claim-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--blue, #6C3CE1);
  background: transparent;
  color: var(--blue, #6C3CE1);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.bring-claim-btn:hover {
  background: var(--blue, #6C3CE1);
  color: #fff;
}

.bring-claimed-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #d5f8ed;
  color: #006a50;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
}

.bring-delete-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 4px 6px;
  border-radius: 4px;
  min-height: 44px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bring-delete-btn:hover { color: #ef4444; }

/* ── Add bring item form ── */
.bring-add-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  background: var(--bg2, #e8f4fd);
  border-radius: 10px;
  padding: 12px;
}

.bring-add-form input,
.bring-add-form select {
  flex: 1;
  min-width: 120px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg, #fff);
  color: var(--text);
  font-size: 0.85rem;
  min-height: 44px;
  outline: none;
}

.bring-add-form input:focus,
.bring-add-form select:focus {
  border-color: var(--blue, #6C3CE1);
  box-shadow: 0 0 0 2px rgba(0,119,182,0.18);
}

/* ── Activities tab ── */
.activity-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.activity-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.activity-card-info {
  flex: 1;
  min-width: 0;
}

.activity-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  margin-bottom: 2px;
}

.activity-desc {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}

.activity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--muted);
  align-items: center;
}

.activity-meta a {
  color: var(--blue, #6C3CE1);
}

.activity-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.activity-vote-btn {
  background: var(--bg2, #e8f4fd);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  transition: background 0.15s;
}

.activity-vote-btn:hover { background: var(--bg3, #d4eaf7); }
.activity-vote-btn.voted { background: #d5f8ed; border-color: #22c55e; color: #006a50; }
.activity-vote-btn.voted.maybe { background: #fef9c3; border-color: #ca8a04; color: #854d0e; }
.activity-vote-btn.all-agreed {
  background: #fbbf24;
  border-color: #f59e0b;
  color: #fff;
  font-size: 1.18em;
  transform: scale(1.12);
  box-shadow: 0 2px 10px rgba(251,191,36,0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}

/* View / Book Online pill */
.activity-view-btn {
  display: inline-block;
  padding: 5px 14px;
  background: #87ceeb;
  color: #fff !important;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.activity-view-btn:hover { opacity: 0.85; }
.activity-view-btn--book { background: #22c55e; }

/* ── Holiday destination booking quick-links (Phase 3) ───────────────────── */
.hol-book-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: var(--bg2, #f0f4ff);
  color: var(--blue, #3b82f6);
  border: 1.5px solid var(--blue, #3b82f6);
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.hol-book-link:hover {
  background: var(--blue, #3b82f6);
  color: #fff;
}

/* ── HOV card tagline & booking row ─────────────────────────────────────────── */
.hov-tagline {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--muted);
  margin: 3px 0 6px;
  line-height: 1.4;
}

.hov-book-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 6px;
}

.hov-book-primary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 16px;
  background: linear-gradient(135deg, var(--blue, #6C3CE1), #8b5cf6);
  color: #fff !important;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.1s;
  min-height: 38px;
  white-space: nowrap;
}
.hov-book-primary:hover { opacity: 0.9; transform: translateY(-1px); }

.hov-book-secondary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  background: var(--bg2, #f0f4ff);
  color: var(--blue, #6C3CE1) !important;
  border: 1.5px solid var(--blue, #6C3CE1);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
  min-height: 38px;
  white-space: nowrap;
}
.hov-book-secondary:hover { background: var(--blue, #6C3CE1); color: #fff !important; }

/* Wildcard card — purple left border instead of blue */
.hol-wildcard-card {
  border-left-color: #8b5cf6 !important;
}
.hol-wildcard-card .act-suggestion-name,
.hol-wildcard-card .activity-name {
  color: var(--text);
}

/* ── Book It button — shown to owner on each destination card ── */
.hol-book-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #6C3CE1, #a855f7);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hol-book-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(108,60,225,0.35); }
.hol-book-btn:active { transform: translateY(0) scale(0.97); }
.hol-book-btn--excited {
  background: linear-gradient(135deg, #ec4899, #f97316);
  animation: holBookPulse 1.6s ease-in-out infinite;
}
@keyframes holBookPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236,72,153,0.35); }
  50%       { box-shadow: 0 0 0 8px rgba(236,72,153,0); }
}

/* ── "Booked!" badge — replaces Book It once status=booked ── */
.hol-booked-badge {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 16px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  font-weight: 700;
  font-size: 0.9rem;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 10px;
  text-align: center;
}

/* ── "Everyone loves this one!" banner ── */
.hol-all-love-banner {
  text-align: center;
  padding: 6px 0 2px;
  font-size: 0.84rem;
  color: #ec4899;
  font-weight: 700;
}

/* ── 5-tier destination vote row ────────────────────────────────────────────── */
.hol-5vote-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

.hol-5vote-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--bg2, #f8fafc);
  cursor: pointer;
  transition: all 0.15s;
  min-width: 52px;
  min-height: 60px;
  font-family: inherit;
}
.hol-5vote-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.hol-5vote-icon  { font-size: 1.35rem; line-height: 1; }
.hol-5vote-label { font-size: 0.68rem; font-weight: 700; color: var(--muted); line-height: 1; }
.hol-5vote-count { font-size: 0.75rem; font-weight: 700; color: var(--text); line-height: 1; min-width: 16px; text-align: center; }

/* Active states — each tier has its own colour */
.hol-5vote-no.active  {
  border-color: #ef4444;
  background: #ef444415;
}
.hol-5vote-no.active  .hol-5vote-label { color: #ef4444; }
.hol-5vote-no.active  .hol-5vote-count { color: #ef4444; }

.hol-5vote-down.active {
  border-color: #f97316;
  background: #f9731615;
}
.hol-5vote-down.active .hol-5vote-label { color: #f97316; }
.hol-5vote-down.active .hol-5vote-count { color: #f97316; }

.hol-5vote-maybe.active {
  border-color: #94a3b8;
  background: #94a3b815;
}
.hol-5vote-maybe.active .hol-5vote-label { color: #64748b; }
.hol-5vote-maybe.active .hol-5vote-count { color: #64748b; }

.hol-5vote-up.active {
  border-color: #3b82f6;
  background: #3b82f615;
}
.hol-5vote-up.active .hol-5vote-label { color: #3b82f6; }
.hol-5vote-up.active .hol-5vote-count { color: #3b82f6; }

/* Love button — gold/rose gradient for the "golden yes" ❤️ */
.hol-5vote-love.active {
  border-color: #ec4899;
  background: linear-gradient(135deg, #fdf2f815, #fce7f315);
  box-shadow: 0 0 0 2px #ec489922;
}
.hol-5vote-love.active .hol-5vote-label { color: #ec4899; }
.hol-5vote-love.active .hol-5vote-count { color: #ec4899; }

/* When everyone agrees — love button pulses gold */
.hol-5vote-love.all-agreed {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  animation: hol-love-pulse 1.5s ease-in-out infinite;
}
@keyframes hol-love-pulse {
  0%, 100% { box-shadow: 0 0 0 0 #f59e0b44; }
  50%       { box-shadow: 0 0 0 8px #f59e0b00; }
}

/* ── Plan card: new action area layout ──────────────────────────────────── */
.act-plan-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px;
}
/* Vote buttons + remove in a single row */
.act-plan-vote-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* 🗑️ Remove button — small, ghost, aligned to the right */
.act-plan-remove-btn {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border, #e8e8ee);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--muted, #999);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  min-height: 38px;
}
.act-plan-remove-btn:hover {
  background: rgba(239, 68, 68, 0.07);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}
/* Book Here on plan cards — same base class as suggestion cards */
/* Agreed variant — celebratory green */
.act-card-book-btn--agreed {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 700;
}
.act-card-book-btn--agreed:hover { opacity: 0.9; }
/* Dead link variant */
.act-card-book-btn--dead {
  background: rgba(239, 68, 68, 0.07);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.25);
  cursor: default;
  font-size: 0.84rem;
}

/* Centered vote row variant (legacy, kept for destination card) */
.activity-actions--centered {
  justify-content: center;
  gap: 12px;
}

/* Book / Booked button */
.activity-book-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1.5px solid var(--blue, #6C3CE1);
  border-radius: 8px;
  background: transparent;
  color: var(--blue, #6C3CE1);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.activity-book-btn:hover { background: var(--blue, #6C3CE1); color: #fff; }
.activity-book-btn.booked { background: #22c55e; border-color: #22c55e; color: #fff; }
.activity-attendees { font-size: 0.78rem; font-weight: 500; opacity: 0.85; }

.activity-stars {
  display: flex;
  gap: 2px;
}

.activity-star-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  min-height: 36px;
  min-width: 36px;
  transition: transform 0.1s;
}

.activity-star-btn:hover { transform: scale(1.2); }

/* ── Chat tab ── */
.gatherings-chat-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.gatherings-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gatherings-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.gatherings-msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6C3CE1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.gatherings-msg-body {
  flex: 1;
  min-width: 0;
}

.gatherings-msg-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

.gatherings-msg-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--blue, #6C3CE1);
}

.gatherings-msg-time {
  font-size: 0.7rem;
  color: var(--muted);
}

.gatherings-msg-text {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
}

.gatherings-chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.gatherings-chat-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  /* 16px minimum prevents iOS Safari from zooming on focus */
  font-size: 16px;
  background: var(--card-bg, #fff);
  color: var(--text);
  resize: none;
  min-height: 44px;
  outline: none;
}

.gatherings-chat-input:focus {
  border-color: var(--blue, #6C3CE1);
  box-shadow: 0 0 0 2px rgba(0,119,182,0.18);
}

.gatherings-chat-send-btn {
  padding: 8px 18px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #6C3CE1, #8b5cf6);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
}

.gatherings-chat-send-btn:hover { opacity: 0.88; }

/* ── Modern chat bubble styles ── */
.gchat-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
  gap: 10px;
  flex: 1;
}
.gchat-empty-icon  { font-size: 2.6rem; }
.gchat-empty-title { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.gchat-empty-sub   { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }

.gchat-date-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 8px;
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gchat-date-sep::before,
.gchat-date-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border, #e5e7eb);
}

.gchat-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 6px;
}
.gchat-msg--mine { flex-direction: row-reverse; }

.gchat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.64rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  margin-bottom: 2px;
}

.gchat-bubble {
  max-width: 72%;
  border-radius: 18px;
  padding: 8px 13px;
  word-break: break-word;
}
.gchat-bubble--theirs {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-bottom-left-radius: 4px;
}
.gchat-bubble--mine {
  background: linear-gradient(135deg, #6C3CE1, #8b5cf6);
  border-bottom-right-radius: 4px;
}

.gchat-meta-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}
.gchat-sender {
  font-size: 0.76rem;
  font-weight: 700;
  color: #6C3CE1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.gchat-meta-time {
  font-size: 0.65rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.gchat-text {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text);
}
.gchat-bubble--mine .gchat-text { color: #fff; }
.gchat-time {
  font-size: 0.64rem;
  margin-top: 4px;
  text-align: right;
  color: var(--muted);
  opacity: 0.7;
}
.gchat-bubble--mine .gchat-time { color: rgba(255,255,255,0.75); opacity: 1; }

/* ── Hide main nav + sub-tabs while viewing a gathering detail ── */
body.gathering-detail-active .view-nav,
body.gathering-detail-active #gatherings-sub-tabs {
  display: none !important;
}

/* ── Wizard modal ── */
.gatherings-wizard-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9300;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* overflow-y intentionally omitted — scroll is handled by .gatherings-wizard-body
     so the overlay backdrop stays static and never swallows post-picker taps */
}

.gatherings-wizard-overlay.open {
  display: flex;
}

.gatherings-wizard-modal {
  background: #ffffff;
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  overflow: hidden;
}

.gatherings-wizard-header {
  background: linear-gradient(135deg, #FF5D6C, #e04a58);
  padding: 18px 20px 14px;
  text-align: center;
  flex-shrink: 0;
  position: relative;
}

.gatherings-wizard-header h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  padding: 0 40px; /* room for close button */
}

.gatherings-wizard-header-sub {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.85);
  margin-top: 4px;
}

.gatherings-wizard-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  min-width: 44px; /* Apple 44pt touch target */
  min-height: 44px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gatherings-wizard-step-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.gatherings-wizard-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: background 0.2s;
}

.gatherings-wizard-dot.active { background: #fff; }

.gatherings-wizard-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #ffffff;
}

.gatherings-wizard-footer {
  padding: 14px 20px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-shrink: 0;
  /* No position:sticky — sticky inside overflow:hidden blocks iOS tap events */
  background: #f9fafb;
}

.gatherings-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Budget add/remove toggle button */
.gatherings-budget-toggle-btn {
  background: none;
  border: 1px dashed var(--border, #d1d5db);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blue, #6C3CE1);
  cursor: pointer;
  min-height: 36px;
  transition: background 0.15s, border-color 0.15s;
}
.gatherings-budget-toggle-btn:hover {
  background: rgba(108,60,225,0.07);
  border-color: var(--blue, #6C3CE1);
}

.gatherings-form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1f2937;
}

/* ── iOS: force ≥16px on wizard inputs to prevent auto-zoom ── */
.gatherings-wizard-body .gatherings-form-input,
.gatherings-wizard-body .gatherings-form-textarea,
.gatherings-wizard-body .gatherings-form-select,
.gatherings-wizard-body input,
.gatherings-wizard-body select,
.gatherings-wizard-body textarea {
  font-size: 16px !important; /* iOS zooms when < 16px; this prevents it */
  /* No transform:translateZ(0) — GPU compositing layers on inputs absorb
     subsequent taps on sibling elements (buttons) in iOS WKWebView */
}

.gatherings-form-input,
.gatherings-form-textarea,
.gatherings-form-select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2937;
  font-size: 0.88rem;
  min-height: 44px;
  outline: none;
  font-family: inherit;
  /* manipulation — removes 300ms tap delay and prevents double-tap zoom */
  touch-action: manipulation;
}

.gatherings-form-textarea {
  min-height: 80px;
  resize: vertical;
}

.gatherings-form-input:focus,
.gatherings-form-textarea:focus,
.gatherings-form-select:focus {
  border-color: var(--blue, #6C3CE1);
  box-shadow: 0 0 0 2px rgba(0,119,182,0.18);
}

.gatherings-form-input[aria-invalid="true"],
.gatherings-form-textarea[aria-invalid="true"] {
  border-color: #ef4444;
}

/* ── Edit inline ── */
.gatherings-edit-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg2, #e8f4fd);
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
  min-height: 40px;
}

.gatherings-edit-btn:hover {
  background: var(--bg3, #d4eaf7);
}

/* ── Delete button (owner only, shown left of edit) ── */
.gatherings-delete-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.06);
  color: #ef4444;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 40px;
  line-height: 1;
}
.gatherings-delete-btn:hover {
  background: rgba(239, 68, 68, 0.14);
  border-color: #ef4444;
}

/* ── Header share button ── */
.gatherings-share-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(108,60,225,0.25);
  background: rgba(108,60,225,0.08);
  color: #6C3CE1;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}
.gatherings-share-btn:hover {
  background: rgba(108,60,225,0.15);
}

/* ── Calendar export button ── */
.gatherings-cal-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg2, #e8f4fd);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  min-height: 40px;
  line-height: 1;
  display: flex;
  align-items: center;
}
.gatherings-cal-btn:hover {
  background: var(--bg3, #d4eaf7);
}

/* ── Add activity ── */
.gatherings-add-activity-form {
  background: var(--bg2, #e8f4fd);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gatherings-add-activity-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 480px) {
  .gatherings-add-activity-row { grid-template-columns: 1fr; }
  .gatherings-action-strip { padding: 10px 12px; }
  .gatherings-list-scroll { padding: 10px 12px; }
}

/* ── Status colours for select ── */
.gatherings-status-select {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.82rem;
  background: var(--card-bg, #fff);
  color: var(--text);
  cursor: pointer;
  min-height: 40px;
}

/* ── Sidebar gatherings section ── */
#gatherings-section {
  display: none;
  padding: 8px 0;
}

#gatherings-section .gatherings-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Padding moved to inner children — scroll containers clip right-padding on scroll */
  padding: 0;
}

/* Inner content gets the side padding so it survives scrolling intact */
.gatherings-sidebar-list .home-upcoming-list,
.gatherings-sidebar-list .gatherings-empty {
  padding-left: 8px;
  padding-right: 8px;
}

/* ══════════════════════════════════════════════
   ── GATHERING SQUARE TILES
   (reuse person-square system — same visual language as People/Groups/Pets)
   ══════════════════════════════════════════════ */

/* Type border colours — one per gathering kind */
.gathering-square-event   { border-color: #6C3CE1; }   /* Prinda purple */
.gathering-square-holiday { border-color: #0ea5e9; }   /* sky blue      */
.gathering-square-ss      { border-color: #ef4444; }   /* red           */

/* Slightly wider than person squares (92 vs 84) — gathering names run longer */
.gathering-square-event,
.gathering-square-holiday,
.gathering-square-ss {
  width: 92px;
}

/* Grid container: match sidebar side padding + centre squares */
.gatherings-grid {
  padding-left: 8px;
  padding-right: 8px;
  justify-content: center;
}

/* Section headings above the grid — hidden (tabs are sufficient) */
#gatherings-sidebar-heading,
.ss-sidebar-header {
  display: none !important;
}

/* Date label (between avatar and name, e.g. "12 Jun") */
.gathering-sq-date {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1;
  padding: 0 2px;
  margin-top: -2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Past Events collapsible ─────────────────────────────────────────────── */
.gatherings-past-section {
  margin-top: 18px;
  border-top: 1px solid var(--border, #e5e7eb);
  padding-top: 2px;
}

.gatherings-past-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 6px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.gatherings-past-summary::-webkit-details-marker { display: none; }

.gatherings-past-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted, #6b7280);
  flex: 1;
}

.gatherings-past-count {
  background: rgba(107, 114, 128, 0.13);
  color: var(--muted, #6b7280);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 99px;
  padding: 1px 8px;
  line-height: 1.6;
  flex-shrink: 0;
}

.gatherings-past-chevron {
  font-size: 1.1rem;
  color: var(--muted, #6b7280);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  line-height: 1;
}

details.gatherings-past-section[open] .gatherings-past-chevron {
  transform: rotate(90deg);
}

.gatherings-past-grid {
  padding-top: 6px;
  padding-bottom: 4px;
}

/* Dim past cards slightly so upcoming events feel primary */
.gatherings-past-grid .person-square {
  opacity: 0.68;
  filter: grayscale(18%);
  transition:
    opacity 0.18s ease,
    filter 0.18s ease,
    transform 0.2s ease,
    box-shadow 0.22s ease,
    border-color 0.2s ease;
}

@media (hover: hover) {
  .gatherings-past-grid .person-square:hover {
    opacity: 1;
    filter: none;
  }
}

.gatherings-past-grid .person-square:focus-visible {
  opacity: 1;
  filter: none;
}

/* ── Surprise event banner inside the hero section ──────────────────────── */
/* ── Gathering Gifts tab ─────────────────────────────────────────────────── */
.gathering-gifts-top {
  margin-bottom: 4px;
}

/* Search bar row under the gifts heading */
.gathering-gifts-search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

/* "Their rating" block at top of gift card */
.gathering-gift-their-rating {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.gathering-gift-their-rating-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted, #6b7280);
  margin-bottom: 2px;
}

.gathering-gifts-wishlist-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted, #6b7280);
  margin: 16px 0 8px;
}

.gathering-gift-card--done {
  opacity: 0.55;
}

.gathering-gift-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.gathering-gift-chip--got {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.gathering-gift-chip--reserved {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}

.gathering-gift-action-btn {
  background: linear-gradient(135deg, #6C3CE1, #a855f7);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.gathering-gift-action-btn:hover {
  opacity: 0.88;
}

.gathering-gift-action-btn--undo {
  background: rgba(107, 114, 128, 0.12);
  color: var(--muted, #6b7280);
}

/* ── Surprise event banner inside the hero section ──────────────────────── */
.gathering-surprise-banner {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  text-align: center;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}

/* ── Quick-info pills (location / date / time / budget) under the inner tabs ─ */
.gathering-quick-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px 2px;
  justify-content: center;
}

.gathering-quick-pill {
  background: #87ceeb;
  color: #fff;
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Budget label for secret draws (e.g. "💰 £20/head") */
.gathering-sq-budget {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1;
  padding: 0 2px;
  margin-top: -3px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Member count badge — top-right of the card (outside avatar so not clipped by overflow:hidden) */
.gathering-sq-members {
  position: absolute;
  top: 5px;
  right: 3px;
  background: rgba(0, 0, 0, 0.50);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 1px 5px;
  line-height: 1.4;
  pointer-events: none;
  z-index: 1;
}

/* RSVP dot — top-left of the card */
.gathering-sq-rsvp {
  position: absolute;
  top: 7px;
  left: 3px;
  width: 10px;
  height: 10px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid var(--card-bg, #fff);
  pointer-events: none;
  z-index: 1;
}
.gathering-sq-rsvp--owner {
  width: auto;
  height: auto;
  padding: 1px 5px;
  border-radius: 20px;
  font-size: 0.58rem;
  font-weight: 700;
  color: #fff;
  background: #f59e0b;
  border: 2px solid var(--card-bg, #fff);
  top: 5px;
  left: 3px;
}

/* Drawn tick — sits at top-right alongside member badge (or alone) */
.gathering-sq-drawn {
  position: absolute;
  top: 5px;
  right: 3px;
  background: rgba(16, 185, 129, 0.9);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 1px 4px;
  line-height: 1.4;
  pointer-events: none;
  z-index: 1;
}

/* Dark-mode friendly overlay tints */
[data-theme="dark"] .gathering-sq-members,
body.dark .gathering-sq-members {
  background: rgba(255, 255, 255, 0.25);
}

.gatherings-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--text);
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
  min-height: 44px;
}

.gatherings-sidebar-item:hover,
.gatherings-sidebar-item:focus {
  background: var(--bg2, #e8f4fd);
  border-color: var(--border);
  outline: none;
}

.gatherings-sidebar-item.active {
  background: var(--pastel-blue, #e0f0ff);
  border-color: var(--blue, #6C3CE1);
  font-weight: 700;
}

/* ── Sidebar gathering cards — active state ── */
.gathering-card.active {
  background: var(--pastel-blue, #e0f0ff);
  border-color: var(--blue, #6C3CE1);
}

/* ── Remove old action strip / search bar (now in sidebar) ── */
.gatherings-action-strip,
.gatherings-search-bar { display: none !important; }

/* ── Sidebar list scroll ── */
.gatherings-sidebar-list {
  overflow-y: auto;
  flex: 1;
  margin-top: 2px;
}

/* ── Gathering card in sidebar — compact ── */
#gatherings-section .gathering-card {
  margin: 0 0 6px 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  background: var(--card-bg, #fff);
}

#gatherings-section .gathering-card:hover,
#gatherings-section .gathering-card:focus {
  background: var(--bg2, #e8f4fd);
  border-color: var(--blue, #6C3CE1);
  outline: none;
}

/* ══════════════════════════════════════════
   MEMORY — card-level badge & nudge
══════════════════════════════════════════ */

.gathering-memory-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #a855f7;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 20px;
  padding: 3px 10px;
  user-select: none;
}

/* ══════════════════════════════════════════
   MEMORY — detail view section wrapper
══════════════════════════════════════════ */

.gathering-memory-section {
  flex-shrink: 0;
  padding: 12px 16px;
}

/* ══════════════════════════════════════════
   MEMORY PROMPT — the 'how did it go?' card
══════════════════════════════════════════ */

.gathering-memory-prompt {
  background: linear-gradient(135deg, #fdf6ff 0%, #fff7ed 100%);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 12px rgba(168, 85, 247, 0.08);
}

.memory-prompt-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.memory-prompt-emoji {
  font-size: 1.6rem;
  flex-shrink: 0;
  line-height: 1;
}

.memory-prompt-title {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.memory-prompt-sub {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 3px;
}

/* ── Star rating row ── */

.memory-star-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.memory-star {
  background: none;
  border: none;
  font-size: 1.6rem;
  color: #d1d5db;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.12s, transform 0.1s;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.memory-star:hover,
.memory-star.selected {
  color: #f59e0b;
}

.memory-star:hover {
  transform: scale(1.18);
}

/* ── Note textarea ── */

.memory-prompt-textarea {
  width: 100%;
  min-height: 90px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 8px;
  color: var(--text);
  padding: 10px 12px;
  font-size: 0.88rem;
  line-height: 1.55;
  resize: vertical;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.memory-prompt-textarea:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.15);
}

/* ── Footer: save + skip ── */

.memory-prompt-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.memory-save-btn {
  padding: 9px 20px;
  border-radius: 20px;
  border: none;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 40px;
  transition: opacity 0.15s, transform 0.1s;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.memory-save-btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}

.memory-save-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.memory-skip-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: 40px;
  transition: color 0.12s;
}

.memory-skip-btn:hover {
  color: var(--text);
}

/* ══════════════════════════════════════════
   MEMORY DISPLAY — saved memory card
══════════════════════════════════════════ */

.gathering-memory-display {
  background: linear-gradient(135deg, #fdf6ff 0%, #fff7ed 100%);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 12px rgba(168, 85, 247, 0.07);
}

.memory-display-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.memory-display-emoji {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
}

.memory-display-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}

.memory-display-date {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}

.memory-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--muted);
  min-height: 36px;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
  margin-left: auto;
}

.memory-edit-btn:hover {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
}

.memory-display-stars {
  font-size: 1.4rem;
  color: #f59e0b;
  letter-spacing: 2px;
  line-height: 1;
}

.memory-display-note {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(168, 85, 247, 0.12);
}

/* ── Dark mode overrides for memory cards ── */

[data-theme='dark'] .gathering-memory-prompt,
[data-theme='dark'] .gathering-memory-display {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(245, 158, 11, 0.06) 100%);
  border-color: rgba(168, 85, 247, 0.2);
}

[data-theme='dark'] .memory-prompt-textarea {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(168, 85, 247, 0.2);
}

[data-theme='dark'] .memory-display-note {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(168, 85, 247, 0.1);
}

[data-theme='dark'] .memory-star {
  color: rgba(255, 255, 255, 0.2);
}

/* ── At-risk + going-ahead banners ── */
.gathering-at-risk-banner {
  background: #fffbeb;
  border: 1.5px solid #fbbf24;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.at-risk-banner-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.at-risk-banner-icon { font-size: 1.4rem; flex-shrink: 0; }
.at-risk-banner-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 3px;
}
.at-risk-banner-sub { font-size: 0.82rem; color: #78350f; }

.at-risk-vote-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.at-risk-vote-btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid transparent;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s, border-color 0.15s;
  min-height: 44px;
}
.at-risk-vote-continue {
  background: #d1fae5;
  color: #065f46;
}
.at-risk-vote-cancel {
  background: #fee2e2;
  color: #991b1b;
}
.at-risk-vote-btn:hover { opacity: 0.85; transform: scale(1.02); }
.at-risk-vote-btn.voted {
  border-color: currentColor;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.12);
}

.at-risk-tally { font-size: 0.8rem; color: #6b7280; }
.at-risk-tally-row {
  display: flex;
  gap: 16px;
  padding-top: 4px;
}
.at-risk-tally-continue { color: #065f46; font-weight: 600; }
.at-risk-tally-cancel   { color: #991b1b; font-weight: 600; }

.gathering-going-ahead-banner {
  background: #d1fae5;
  border: 1.5px solid #34d399;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  color: #065f46;
}

/* ── RSVP chip — no response ── */
.rsvp-no-response {
  background: rgba(0,0,0,0.06);
  color: #6b7280;
  font-style: italic;
}

/* ── Close RSVPs button ── */
.close-rsvps-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1.5px solid #d1d5db;
  background: #f9fafb;
  color: #374151;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
  transition: background 0.15s;
}
.close-rsvps-btn:hover { background: #f3f4f6; border-color: #9ca3af; }

/* ── Dark mode overrides for new status pills ── */
[data-theme='dark'] .gathering-status-going_ahead {
  background: rgba(52, 211, 153, 0.18);
  color: #6ee7b7;
}
[data-theme='dark'] .gathering-status-at_risk {
  background: rgba(251, 191, 36, 0.18);
  color: #fcd34d;
}
/* Dark mode at-risk banner */
[data-theme='dark'] .gathering-at-risk-banner {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.35);
}
[data-theme='dark'] .at-risk-banner-title { color: #fcd34d; }
[data-theme='dark'] .at-risk-banner-sub   { color: #fde68a; }
[data-theme='dark'] .gathering-going-ahead-banner {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.3);
  color: #6ee7b7;
}
[data-theme='dark'] .rsvp-no-response {
  background: rgba(255,255,255,0.08);
  color: #9ca3af;
}
[data-theme='dark'] .close-rsvps-btn {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  color: #d1d5db;
}

/* ── Dark mode overrides for status pills ── */
[data-theme='dark'] .gathering-status-planning,
[data-theme='dark'] .gathering-status-draft {
  background: rgba(87, 183, 232, 0.18);
  color: #7dd3f8;
}

[data-theme='dark'] .gathering-status-confirmed {
  background: rgba(52, 211, 153, 0.18);
  color: #6ee7b7;
}

[data-theme='dark'] .gathering-status-complete {
  background: rgba(129, 140, 248, 0.18);
  color: #a5b4fc;
}

[data-theme='dark'] .gathering-status-cancelled {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}

/* Pets paw — white chip on dark themes */
[data-theme='dark'] .gathering-pets-header-icon {
  background: rgba(255, 255, 255, 0.12);
  filter: brightness(1.5);
}

/* ── Share Invite Panel ── */
.share-invite-container {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ── Compact share button (🔗 icon beside Invite in members header) ── */
.share-invite-compact-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  color: var(--text);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s;
}
.share-invite-compact-btn:hover { background: rgba(108,60,225,0.1); }

.share-invite-panel {
  background: linear-gradient(135deg, rgba(108,60,225,0.07) 0%, rgba(255,93,108,0.05) 100%);
  border: 1px solid rgba(108,60,225,0.22);
  border-radius: 12px;
  padding: 16px 18px;
}

.share-invite-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.share-invite-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}

.share-invite-sub {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.4;
}

.share-invite-url-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 12px;
}

.share-invite-url-input {
  flex: 1;
  background: var(--bg3, rgba(0,0,0,0.08));
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  padding: 7px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
  user-select: all;
  outline: none;
  min-width: 0;
}

.share-invite-url-input:focus {
  border-color: #6C3CE1;
  color: var(--text);
}

.share-invite-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ── shared base for all share buttons ── */
.share-invite-copy-btn,
.share-invite-wa-btn,
.share-invite-snap-btn,
.share-invite-fb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}

.share-invite-copy-btn:active,
.share-invite-wa-btn:active,
.share-invite-snap-btn:active,
.share-invite-fb-btn:active {
  transform: scale(0.97);
}

/* Copy link — violet */
.share-invite-copy-btn {
  background: #6C3CE1;
  color: #fff;
}
.share-invite-copy-btn:hover  { background: #5228cc; }
.share-invite-copy-btn.copied { background: #16a34a; }

/* WhatsApp — green */
.share-invite-wa-btn {
  background: #25D366;
  color: #fff;
}
.share-invite-wa-btn:hover { background: #1ebe5a; }

/* Snapchat — yellow */
.share-invite-snap-btn {
  background: #FFFC00;
  color: #000;
}
.share-invite-snap-btn:hover { background: #ece900; }

/* Facebook — blue */
.share-invite-fb-btn {
  background: #1877F2;
  color: #fff;
}
.share-invite-fb-btn:hover { background: #1669d9; }

.share-invite-loading {
  font-size: 0.82rem;
  color: var(--muted);
  padding: 8px 0;
}

/* ── Holiday Planning Tab ─────────────────────────────────────────── */
.hplan-loading {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Stage indicator */
.hplan-stages {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.hplan-stages::-webkit-scrollbar { display: none; }
.hplan-stage {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 12px;
  transition: all .15s;
}
.hplan-stage.active {
  color: var(--blue, #6C3CE1);
  background: color-mix(in srgb, var(--blue, #6C3CE1) 10%, transparent);
}
.hplan-stage.done {
  color: var(--teal, #0ea5e9);
}
.hplan-stage-arrow {
  color: var(--border);
  font-size: 1rem;
  flex-shrink: 0;
}

/* Cards */
.hplan-section { padding: 0 16px 12px; }
.hplan-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 16px 12px;
}
.hplan-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}
.hplan-card-sub {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 8px;
  line-height: 1.5;
}
.hplan-reveal-card {
  border-color: color-mix(in srgb, var(--blue, #6C3CE1) 30%, transparent);
  background: color-mix(in srgb, var(--blue, #6C3CE1) 5%, var(--bg2));
}

/* Progress bar */
.hplan-progress {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.hplan-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--blue, #6C3CE1), var(--teal, #0ea5e9));
  border-radius: 3px;
  transition: width .4s ease;
}
.hplan-progress-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0;
}

/* Tally chips */
.hplan-tally-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--bg3, #ede9fe);
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}
.hplan-tally-count {
  background: var(--blue, #6C3CE1);
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 0.72rem;
}

/* Top pref chips */
.hplan-top-pref-chip {
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--blue, #6C3CE1), #8b5cf6);
  color: #fff;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 700;
}

/* Suggestion cards */
.hplan-suggestion-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 16px 12px;
  transition: box-shadow .15s;
}
.hplan-suggestion-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.hplan-sug-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.hplan-sug-emoji { font-size: 2.2rem; flex-shrink: 0; }
.hplan-sug-name  { font-size: 1.08rem; font-weight: 700; color: var(--text); }
.hplan-sug-country { font-size: 0.82rem; color: var(--muted); }
.hplan-sug-avg   { margin-left: auto; font-size: 0.9rem; font-weight: 700; color: var(--text); }
.hplan-sug-tagline { font-size: 0.93rem; font-weight: 600; color: var(--text); margin: 0 0 5px; }
.hplan-sug-why   { font-size: 0.9rem; color: var(--muted); line-height: 1.6; margin: 0 0 7px; }
.hplan-sug-meta  { font-size: 0.83rem; color: var(--muted); margin: 4px 0 8px; }
.hplan-sug-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 10px;
}
.hplan-star-row { display: flex; gap: 4px; }
.hplan-star-btn {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: #d1d5db;
  padding: 0;
  min-height: 36px;
  min-width: 32px;
  line-height: 1;
  transition: color .1s, transform .1s;
}
.hplan-star-btn.active { color: #f59e0b; }
.hplan-star-btn:hover  { transform: scale(1.2); }
.hplan-discard-btn {
  background: none;
  border: none;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  min-height: 36px;
  transition: background .12s;
}
.hplan-discard-btn:hover { background: var(--bg3); }

/* Confirmed / booked */
.hplan-confirmed-card, .hplan-booked-card {
  text-align: center;
  padding: 24px 20px;
}
.hplan-confirmed-emoji { font-size: 3rem; margin-bottom: 8px; }
.hplan-confirmed-dest  { font-size: 1.4rem; font-weight: 800; color: var(--text); margin: 0 0 8px; }
.hplan-countdown {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--blue, #6C3CE1);
  margin: 8px 0;
}

/* Reveal overlay */
.hplan-reveal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity .3s;
}
.hplan-reveal-overlay.open { opacity: 1; }
.hplan-reveal-modal {
  background: var(--card-bg, #fff);
  border-radius: 20px;
  padding: 32px 24px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  transform: scale(0.9);
  transition: transform .3s;
}
.hplan-reveal-overlay.open .hplan-reveal-modal { transform: scale(1); }
.hplan-reveal-emoji { font-size: 3.5rem; margin-bottom: 12px; }
.hplan-reveal-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.2;
}
.hplan-reveal-main {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--blue, #6C3CE1);
  margin: 12px 0;
  line-height: 1.1;
}
.hplan-reveal-sub {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0 0 16px;
}
.hplan-reveal-close { margin-top: 8px; min-width: 140px; }

/* Login reveal — slightly bigger */
.hplan-login-reveal-modal { max-width: 440px; padding: 40px 28px; }

/* ── Activity Suggestions Side Panel ─────────────────────────────── */
.act-suggestions-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 480px;
  background: var(--card-bg, #fff);
  box-shadow: -4px 0 24px rgba(0,0,0,0.18);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.act-suggestions-panel.open {
  transform: translateX(0);
}
.act-suggestions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.act-suggestions-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}
.act-suggestions-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
}
.act-suggestions-close:hover {
  background: var(--bg3, rgba(0,0,0,0.06));
}
.act-suggestions-body {
  overflow-y: auto;
  padding: 16px;
  flex: 1;
}
.act-suggestion-card {
  background: var(--card-bg, #fff);
  border: 1px solid rgba(108,60,225,0.18);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 12px;
  box-shadow: 0 3px 12px rgba(108,60,225,0.10), 0 1px 3px rgba(0,0,0,0.07);
  overflow: hidden;
}
/* ── Card gradient header ──────────────────────────────────── */
.act-card-header {
  background: linear-gradient(90deg, #6C3CE1 0%, #c026d3 50%, #FF5D6C 100%);
  margin: -15px -15px 12px -15px;
  padding: 12px 15px;
  text-align: center;
}
.act-card-header .act-suggestion-name {
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-align: center;
}
/* ── Card title row (name + source badge, side by side) */
.act-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.act-suggestion-name {
  font-weight: 700;
  font-size: 0.97rem;
  color: var(--text);
  flex: 1;
  line-height: 1.3;
}
/* ── Source badges */
.act-card-source-badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 20px;
  padding: 2px 9px;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 1px;
}
.act-card-source-badge--curated {
  background: linear-gradient(135deg, #6C3CE1 0%, #FF5D6C 100%);
  color: #fff;
}
.act-card-source-badge--ai {
  background: rgba(108, 60, 225, 0.12);
  color: #6C3CE1;
}
/* ── Description */
.act-suggestion-desc {
  font-size: 0.86rem;
  color: var(--muted);
  margin-bottom: 8px;
  line-height: 1.5;
}
/* ── Meta chips row */
.act-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.act-card-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text, #1a1a2e);
  background: var(--bg2, #f4f4f8);
  border: 1px solid var(--border, #e8e8ee);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
.act-card-chip--price {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: #92400e;
}
.act-card-chip--distance {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.25);
  color: #1e40af;
}
/* ── New chip variants — curated event cards ─────────────────────── */
.act-card-chip--date {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.25);
  color: #4f46e5;
}
.act-card-chip--venue {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  color: #065f46;
}
.act-card-chip--duration {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.25);
  color: #5b21b6;
}
.act-card-chip--annual {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.2);
  color: #92400e;
}
/* ── Curated source badge ────────────────────────────────────────── */
.act-card-source-badge--curated {
  background: rgba(108, 60, 225, 0.1);
  color: #6c3ce1;
  border: 1px solid rgba(108, 60, 225, 0.25);
}
/* ── Sponsored card — premium layout ────────────────────────────── */
.act-suggestion-card--sponsored {
  border: 2px solid #f59e0b;
  background: linear-gradient(to bottom, #fffbeb 0%, #fff 55%);
  box-shadow: 0 4px 18px rgba(245,158,11,0.22), 0 1px 4px rgba(0,0,0,0.08);
  overflow: hidden;
}
.act-card-source-badge--sponsored {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
}
.act-card-book-btn--sponsored {
  display: block;
  width: 100%;
  padding: 11px 16px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 55%, #b45309 100%);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 10px rgba(245,158,11,0.4);
  transition: opacity 0.18s;
  box-sizing: border-box;
}
.act-card-book-btn--sponsored:hover { opacity: 0.88; }
.act-card-sponsor-attr {
  font-size: 0.72rem;
  color: #92400e;
  margin-top: 6px;
  padding: 4px 8px;
  background: rgba(245,158,11,0.08);
  border-radius: 6px;
  font-style: italic;
}
/* ── Activity filter bar ──────────────────────────────────────────────── */
.act-filter-wrap {
  margin-bottom: 4px;
}
.act-filter-count {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 2px 8px;
}
.act-filter-bar {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 0 2px 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.act-filter-bar::-webkit-scrollbar { display: none; }
.act-filter-pill {
  white-space: nowrap;
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 99px;
  border: 1.5px solid rgba(108, 60, 225, 0.22);
  background: transparent;
  color: var(--muted, #64748b);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.act-filter-pill:hover {
  border-color: rgba(108, 60, 225, 0.45);
  color: #6C3CE1;
}
.act-filter-pill.active {
  background: linear-gradient(135deg, #6C3CE1 0%, #7c3aed 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(108, 60, 225, 0.28);
}

/* ── Booking note */
.act-card-booking-note {
  font-size: 0.82rem;
  color: var(--text, #1a1a2e);
  background: rgba(245, 158, 11, 0.09);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 7px;
  padding: 7px 10px;
  margin-bottom: 2px;
  line-height: 1.45;
}
/* ── Card actions */
.act-suggestion-card-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 12px;
}
/* ── Book Here button */
.act-card-book-btn {
  display: block;
  width: 100%;
  padding: 9px 14px;
  background: rgba(108, 60, 225, 0.08);
  color: #6C3CE1;
  border: 1.5px solid rgba(108, 60, 225, 0.3);
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  box-sizing: border-box;
}
.act-card-book-btn:hover {
  background: rgba(108, 60, 225, 0.15);
  border-color: rgba(108, 60, 225, 0.5);
}
.act-card-book-btn--search {
  background: rgba(59, 130, 246, 0.08);
  color: #1e40af;
  border-color: rgba(59, 130, 246, 0.3);
}
.act-card-book-btn--search:hover {
  background: rgba(59, 130, 246, 0.14);
}
.act-card-book-btn--inactive {
  background: var(--bg2, #f4f4f8);
  color: var(--muted, #999);
  border-color: var(--border, #e8e8ee);
  cursor: default;
  opacity: 0.7;
}
/* ── Verdict row (Add/Discard side by side) */
.act-card-verdict-row {
  display: flex;
  gap: 8px;
}
.act-suggestion-accept {
  flex: 1;
  padding: 8px 12px;
  background: #87ceeb;
  color: #1a3a5c;
  border: none;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.act-suggestion-accept:hover { opacity: 0.88; }
.act-suggestion-discard {
  flex: 1;
  padding: 8px 12px;
  background: none;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.act-suggestion-discard:hover { background: var(--bg3, rgba(0,0,0,0.05)); }
/* ── World-class tag badges ──────────────────────────────────────── */
.act-intel-wc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.act-intel-wc-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: rgba(255,255,255,0.22);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ── Must-see tier-1 highlight card ─────────────────────────────── */
.act-intel-must-see {
  background: rgba(255,255,255,0.14);
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  padding: 11px 13px;
  margin-top: 8px;
}
.act-intel-must-see-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  margin-bottom: 4px;
}
.act-intel-must-see-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
}
.act-intel-must-see-headline {
  font-size: 0.86rem;
  color: rgba(255,255,255,0.9);
  font-style: italic;
  margin-bottom: 4px;
}
.act-intel-must-see-note {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
}
.act-intel-must-see-tip {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  margin-top: 5px;
}
.act-intel-must-see-link {
  display: inline-block;
  margin-top: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 4px 12px;
  text-decoration: none;
}
/* ── "While you're here" intro line ─────────────────────────────── */
.act-intel-must-see-intro {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.72);
  font-style: italic;
  margin: 0 0 4px;
}
/* ── Dismiss × button ───────────────────────────────────────────── */
.act-intel-must-see-close {
  position: absolute;
  top: 7px;
  right: 8px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.act-intel-must-see-close:hover {
  color: #fff;
  background: rgba(255,255,255,0.15);
}

/* ── Near-miss event nudge ───────────────────────────────────────── */
.act-intel-near-miss {
  background: rgba(255,255,255,0.13);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.87rem;
  color: rgba(255,255,255,0.9);
  margin-top: 6px;
  line-height: 1.5;
}
.act-intel-near-miss-hint {
  background: rgba(255,255,255,0.22);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 0.76rem;
  font-weight: 700;
  margin-left: 4px;
}

/* ── Gold Star Intel UI ──────────────────────────────────────────── */
.act-intel-gold-label { font-size:0.82rem;font-weight:600;color:var(--text);margin-bottom:6px; }
.act-intel-phrases-card { background:rgba(108,60,225,0.06);border-radius:10px;padding:12px 14px;margin-bottom:4px; }
.act-intel-phrase-row { display:flex;align-items:baseline;gap:8px;padding:3px 0;border-bottom:1px solid rgba(108,60,225,0.07); }
.act-intel-phrase-row:last-child { border-bottom:none; }
.act-intel-phrase-en { font-size:0.78rem;color:var(--muted);min-width:80px; }
.act-intel-phrase-local { font-size:0.88rem;font-weight:600;color:var(--text); }
.act-intel-cheers-block { display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 12px;background:rgba(108,60,225,0.10);border-radius:8px; }
.act-intel-cheers-icon { font-size:1.3rem; }
.act-intel-cheers-word { font-size:1.15rem;font-weight:700;color:#6c3ce1; }
.act-intel-cheers-note { font-size:0.75rem;color:var(--muted);margin-left:4px; }
/* ── Food & Drink visual cards (Must Eat section) ────────────────── */
.act-intel-food-grid { display:flex;flex-direction:column;gap:8px; }
.act-intel-food-card {
  background: linear-gradient(135deg,rgba(249,115,22,0.06) 0%,rgba(239,68,68,0.04) 100%);
  border: 1px solid rgba(249,115,22,0.20);
  border-radius: 10px;
  padding: 10px 13px;
}
.act-intel-food-name { font-size:0.95rem;font-weight:700;color:var(--text);margin-bottom:3px; }
.act-intel-food-desc { font-size:0.84rem;color:var(--muted,#666);line-height:1.5;margin:0; }
.act-intel-drinks-header { font-size:0.88rem;font-weight:700;color:#6C3CE1;margin:14px 0 8px; }
.act-intel-drink-card {
  background: rgba(108,60,225,0.06);
  border: 1px solid rgba(108,60,225,0.15);
  border-radius: 10px;
  padding: 9px 13px;
  margin-bottom: 7px;
}
.act-intel-drink-card:last-child { margin-bottom:0; }
.act-intel-drink-name { font-size:0.9rem;font-weight:700;color:var(--text); }
.act-intel-drink-desc { font-size:0.82rem;color:var(--muted,#666);line-height:1.5;margin:3px 0 0; }
.act-intel-pet-status { font-size:0.9rem;font-weight:600;margin-bottom:8px; }
.act-intel-pet-allowed { color:#166534; }
.act-intel-pet-blocked { color:#991b1b; }
.act-intel-pet-row { font-size:0.84rem;padding:4px 0;color:var(--text);border-bottom:1px solid rgba(0,0,0,0.05); }
.act-intel-pet-row:last-child { border-bottom:none; }
.act-intel-access-risks { background:rgba(245,158,11,0.10);border-radius:8px;padding:8px 12px;font-size:0.84rem;margin-top:6px; }
.act-intel-faux-card { padding:8px 0;border-bottom:1px solid rgba(239,68,68,0.10); }
.act-intel-faux-card:last-child { border-bottom:none; }
.act-intel-faux-title { font-size:0.88rem;font-weight:700;color:#991b1b;margin-bottom:3px; }
.act-intel-faux-detail { font-size:0.82rem;color:var(--text);line-height:1.5; }
.act-intel-emergency-block { background:rgba(239,68,68,0.08);border-radius:10px;padding:10px 14px; }
.act-intel-emergency-row { font-size:0.86rem;padding:3px 0;color:var(--text); }
.act-intel-emergency-note { font-size:0.78rem;color:var(--muted);margin-top:6px; }

/* ── Photo Showcase Strip (Unsplash + Pexels) ──────────────────────── */
.act-intel-photo-strip {
  padding: 10px 0 8px;
  background: #0a0a0a;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
/* Single horizontal scrollable row — mobile swipe-friendly */
.act-intel-photo-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;          /* single row only */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: 14px;
  padding: 0 14px 4px;
  scrollbar-width: none;      /* Firefox */
}
.act-intel-photo-scroll::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.act-intel-photo-thumb {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.act-intel-photo-thumb:hover { transform: scale(1.04); }
.act-intel-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Extra photos hidden by default; shown inline in same scroll row when expanded */
.act-intel-photo-extra { display: none; }
.act-intel-photo-more {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 0.15s;
}
.act-intel-photo-more:hover { background: rgba(255,255,255,0.22); }
.act-intel-photo-credit {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
  margin-top: 4px;
  padding: 0 14px;
}
.act-intel-photo-credit a { color: inherit; }

/* ── Photo Lightbox ─────────────────────────────────────────────────────── */
.act-photo-lb {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.22s ease;
  /* backdrop touch-through disabled */
  touch-action: none;
}
.act-photo-lb--open {
  background: rgba(0,0,0,0.82);
}
/* Panel: max 90% vp each axis, flex-col */
.act-photo-lb-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 90vw;
  max-height: 90vh;
  /* fade+scale in */
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.act-photo-lb--open .act-photo-lb-panel {
  opacity: 1;
  transform: scale(1);
}
/* Top bar: counter left, close button right */
.act-photo-lb-topbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
}
.act-photo-lb-counter {
  color: rgba(255,255,255,0.7);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-width: 40px;
}
.act-photo-lb-close {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}
.act-photo-lb-close:hover,
.act-photo-lb-close:focus-visible {
  background: rgba(255,255,255,0.3);
  outline: none;
}
/* Image wrapper — contains img + nav arrows */
.act-photo-lb-imgwrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 76vh;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  /* allow swipe on touch */
  touch-action: pan-y;
}
.act-photo-lb-img {
  display: block;
  max-width: 90vw;
  max-height: 76vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  user-select: none;
  -webkit-user-drag: none;
  /* avoid flash during src change */
  transition: opacity 0.12s;
}
/* Prev / Next arrows — inside imgwrap, semi-transparent */
.act-photo-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.42);
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 2;
  /* keep accessible even on narrow screens */
  padding: 0;
}
.act-photo-lb-nav--prev { left: 10px; }
.act-photo-lb-nav--next { right: 10px; }
.act-photo-lb-nav:hover,
.act-photo-lb-nav:focus-visible {
  background: rgba(0,0,0,0.72);
  outline: none;
}
/* Caption / photographer credit */
.act-photo-lb-caption {
  color: rgba(255,255,255,0.5);
  font-size: 0.72rem;
  text-align: center;
  min-height: 16px;
  max-width: 90vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* On very narrow viewports, shrink nav arrows slightly */
@media (max-width: 380px) {
  .act-photo-lb-nav {
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
  }
}

/* ── Scam Watch Notice — prominent red, between hero and drawers ─── */
.act-intel-scam-notice {
  margin: 0 0 2px;
  border-top: 1px solid rgba(239,68,68,0.3);
  border-bottom: 1px solid rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.08);
}
.act-intel-scam-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 8px;
  transition: background 0.15s;
}
.act-intel-scam-toggle:hover { background: rgba(239,68,68,0.08); }
.act-intel-scam-toggle-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.act-intel-scam-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1;
}
.act-intel-scam-labels { min-width: 0; }
.act-intel-scam-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: #b91c1c;
}
.act-intel-scam-teaser {
  font-size: 0.8rem;
  color: #991b1b;
  opacity: 0.85;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.act-intel-scam-arrow {
  font-size: 1.1rem;
  color: #ef4444;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.act-intel-scam-toggle.open .act-intel-scam-arrow { transform: rotate(90deg); }
.act-intel-scam-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.32s ease, opacity 0.22s ease;
  padding: 0 16px;
  border-top: 1px solid rgba(239,68,68,0.15);
}
.act-intel-scam-card {
  padding: 10px 0 10px;
  border-bottom: 1px solid rgba(239,68,68,0.1);
}
.act-intel-scam-card:last-child { border-bottom: none; }
.act-intel-scam-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #b91c1c;
  margin-bottom: 4px;
}
.act-intel-scam-card-desc {
  font-size: 0.88rem;
  color: var(--text, #1a1a2e);
  line-height: 1.55;
  margin-bottom: 5px;
}
.act-intel-scam-card-avoid {
  font-size: 0.86rem;
  color: #166534;
  background: rgba(34,197,94,0.08);
  border-radius: 6px;
  padding: 5px 9px;
  margin-bottom: 4px;
  line-height: 1.4;
}
.act-intel-scam-card-loc {
  font-size: 0.78rem;
  color: var(--muted, #666);
  margin-top: 3px;
}
.act-intel-scam-card-date {
  font-size: 0.72rem;
  color: var(--muted, #888);
  margin-top: 3px;
}

/* ── Just for Me — personalised hero chips (white-on-dark, hero context) ─ */
.act-intel-jfm {
  padding: 8px 14px 10px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  margin: 6px 0 4px;
  backdrop-filter: blur(6px);
}
.act-intel-jfm-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 7px;
}
.act-intel-jfm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.act-intel-jfm-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.act-intel-jfm-chip:hover {
  background: rgba(255,255,255,0.28);
}

/* ── Timing Matters — three-tab card ────────────────────────────── */
/* Legacy wrap (kept to avoid any cached CSS breakage) */
.act-intel-timing-wrap { display:flex; flex-direction:column; gap:0; }
.act-intel-timing-month { padding:4px 0 2px; }
.act-intel-timing-month + .act-intel-timing-month {
  border-top: 1px solid var(--border, #e5e7eb);
  margin-top: 6px; padding-top: 8px;
}
.act-intel-timing-month-label {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted, #6b7280); padding: 0 0 6px;
}
.act-intel-timing-tip   { color: var(--primary, #0077b6) !important; }
.act-intel-timing-risk  { color: #ea580c !important; }

/* ── New: Tab bar ────────────────────────────────────────────────── */
.act-intel-timing-tabs-wrap { }
.act-intel-timing-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border, #e5e7eb);
  margin-bottom: 10px;
}
.act-intel-timing-tab {
  flex: 1;
  padding: 7px 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted, #6b7280);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;         /* sits on top of the tab-bar border */
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.act-intel-timing-tab:hover:not(:disabled) {
  color: var(--primary, #0077b6);
}
.act-intel-timing-tab--active {
  color: var(--primary, #0077b6);
  border-bottom-color: var(--primary, #0077b6);
}
.act-intel-timing-panel { }

/* ── Timing Matters enhanced event card ─────────────────────────── */
.act-intel-event-card--enhanced {
  border-left: 3px solid var(--primary, #6c3ce1);
  padding-left: 10px;
}
.act-intel-event-titlerow {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 4px;
}
.act-intel-event-typeicon {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.3;
}
.act-intel-event-titlerow .act-intel-event-name {
  flex: 1;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.3;
}
.act-intel-event-badges {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}
/* Small inline badges */
.act-intel-event-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  white-space: nowrap;
}
.act-intel-event-badge--price  { background: #fef3c7; color: #92400e; }
.act-intel-event-badge--avoid  { background: #fef2f2; color: #dc2626; }
.act-intel-event-badge--annual { background: #ede9fe; color: #5b21b6; }
/* Meta chip row (date, venue, price, duration) */
.act-intel-event-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}
.act-intel-event-chip {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.act-intel-event-chip--date    { background: rgba(99,102,241,0.08); border-color:rgba(99,102,241,0.2); color:#4f46e5; }
.act-intel-event-chip--venue   { background: rgba(16,185,129,0.08); border-color:rgba(16,185,129,0.2); color:#065f46; }
.act-intel-event-chip--price   { background: rgba(245,158,11,0.08); border-color:rgba(245,158,11,0.2); color:#92400e; }
.act-intel-event-chip--duration{ background: rgba(139,92,246,0.08); border-color:rgba(139,92,246,0.2); color:#5b21b6; }
/* Ticket CTA row */
.act-intel-event-cta-row {
  margin-top: 6px;
}
.act-intel-event-cta-btn {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--primary, #6c3ce1);
  color: #fff;
  text-decoration: none;
  transition: opacity 0.15s;
}
.act-intel-event-cta-btn:hover { opacity: 0.85; }

/* ── Budget strip (vertical labels, horizontal row) ─────────────── */
.act-intel-bgt-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px 16px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 6px;
}
.act-intel-bgt-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 14px;
}
.act-intel-bgt-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.act-intel-bgt-price {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
}
.act-intel-bgt-unit {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.5);
}
.act-intel-bgt-sep {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}

/* ── World-class achievement banner ─────────────────────────────── */
.act-intel-worldclass-banner {
  margin: 8px 12px 6px;
  background: rgba(255,215,0,0.12);
  border: 1.5px solid rgba(255,215,0,0.45);
  border-radius: 12px;
  padding: 10px 14px;
}
.act-intel-worldclass-header {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fde68a;
  margin-bottom: 6px;
}
.act-intel-worldclass-item {
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  padding: 2px 0;
  line-height: 1.4;
}

/* ── Hero separator line ─────────────────────────────────────────── */
.act-intel-hero-sep {
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  margin: 4px 0 10px;
}

/* ── Weather strip INSIDE hero (3 months) ────────────────────────── */
.act-intel-weather-hero-strip {
  padding: 4px 16px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 8px;
}
/* Daylight bar override for dark hero context */
.act-intel-weather-hero-strip .act-intel-daylight-bar {
  background: rgba(0,0,0,0.45);
}
.act-intel-weather-hero-strip .act-intel-daylight-times {
  color: rgba(255,255,255,0.65);
  font-size: 0.76rem;
}
.act-intel-weather-hero-strip .act-intel-daylight-duration {
  background: rgba(251,191,36,0.2);
  color: #fde68a;
}
/* Trip month bar — slightly larger/brighter */
.act-intel-weather-col--trip {
  position: relative;
}
.act-intel-weather-col--trip::after {
  content: '▲';
  font-size: 0.5rem;
  color: rgba(255,255,255,0.5);
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
}

/* ── Monthly weather mini-bar (legacy standalone) ────────────────── */
.act-intel-weather-bar-section {
  background: rgba(0,0,0,0.38);
  padding: 12px 16px 10px;
}
.act-intel-weather-cols {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  justify-content: center;
}
.act-intel-weather-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.act-intel-weather-bar {
  width: 100%;
  max-width: 32px;
  min-height: 6px;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}
.act-intel-weather-temp { font-size: 0.76rem; font-weight: 700; color: #fff; }
.act-intel-weather-month { font-size: 0.68rem; color: rgba(255,255,255,0.7); }
.act-intel-weather-sun { font-size: 0.65rem; color: rgba(255,255,255,0.6); }

/* ── Prinda logo in the AI divider — height: auto removes the 18px constraint */
.act-intel-logo-divider {
  width: 40px;
  height: auto;
  border-radius: 5px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}
.act-suggestions-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  text-align: center;
}
.act-suggestions-empty {
  text-align: center;
  color: var(--muted);
  padding: 32px 16px;
  font-size: 0.9rem;
}

/* Panel logo */
.act-panel-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}
.act-suggestions-logo-loading {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 14px;
  margin-bottom: 16px;
}

/* Themed bouncing dots spinner */
.act-spinner-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 4px 0 14px;
}
.act-spinner-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue, #6C3CE1);
  animation: actDotBounce 1.2s infinite ease-in-out;
}
.act-spinner-dot:nth-child(1) { animation-delay: 0s; }
.act-spinner-dot:nth-child(2) { animation-delay: 0.2s; }
.act-spinner-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes actDotBounce {
  0%, 80%, 100% { transform: scale(0.55); opacity: 0.35; }
  40%            { transform: scale(1);    opacity: 1; }
}
.act-suggestions-loading-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.act-suggestions-loading-sub {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}

/* ── Prinda Local Intel section (destination intelligence in suggestions panel) */
.act-intel-section {
  background: linear-gradient(160deg, #f7f4ff 0%, #fff9f0 100%);
  border: 1.5px solid rgba(108, 60, 225, 0.2);
  border-radius: 16px;
  margin: 0 0 16px 0;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(108,60,225,0.07);
}
.act-intel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px 11px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text, #1a1a2e);
  border-bottom: 1px solid rgba(108, 60, 225, 0.12);
  gap: 8px;
  background: rgba(108,60,225,0.04);
}
.act-intel-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #6C3CE1 0%, #FF5D6C 100%);
  color: #fff;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* ── Chips / quick-fact pills ─────────────────────────────────── */
.act-intel-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(108,60,225,0.08);
}
.act-intel-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 20px;
  padding: 4px 11px;
  white-space: nowrap;
}
.act-intel-chip--purple {
  background: rgba(108,60,225,0.1);
  color: #5a2fc2;
}
.act-intel-chip--green {
  background: rgba(34,197,94,0.13);
  color: #166534;
}
.act-intel-chip--amber {
  background: rgba(251,191,36,0.18);
  color: #92400e;
}
.act-intel-chip--blue {
  background: rgba(59,130,246,0.13);
  color: #1e40af;
}
.act-intel-chip--red {
  background: rgba(239,68,68,0.12);
  color: #991b1b;
}
.act-intel-chip--pollen-alert {
  background: rgba(251,191,36,0.18);
  color: #92400e;
}
.act-intel-chip--health-alert {
  background: rgba(239,68,68,0.12);
  color: #991b1b;
}
/* ── Seasonal note strip ──────────────────────────────────────── */
.act-intel-seasonal {
  margin: 0;
  padding: 10px 16px 9px;
  font-size: 0.92rem;
  color: var(--text, #1a1a2e);
  background: rgba(255, 200, 50, 0.13);
  border-bottom: 1px solid rgba(108, 60, 225, 0.08);
  line-height: 1.5;
}
/* ── Subsection blocks ────────────────────────────────────────── */
.act-intel-subsection {
  padding: 11px 16px 10px;
  border-bottom: 1px solid rgba(108, 60, 225, 0.07);
}
.act-intel-subsection:last-child {
  border-bottom: none;
}
.act-intel-subheader {
  font-size: 0.96rem;
  font-weight: 700;
  color: #5b2cb8;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
/* Plain paragraph text (where_to_stay, transport etc.) */
.act-intel-text {
  font-size: 0.93rem;
  color: var(--text, #1a1a2e);
  line-height: 1.6;
  margin: 0;
}
.act-intel-list {
  margin: 0;
  padding: 0 0 0 20px;
  font-size: 0.92rem;
  color: var(--text, #1a1a2e);
  line-height: 1.65;
}
.act-intel-list li {
  margin-bottom: 5px;
}
/* ── Season cards (seasonal guide visual layout) ─────────────── */
.act-intel-season-grid { display: flex; flex-direction: column; gap: 0; }
.act-intel-season-card {
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  background: rgba(108,60,225,0.04);
}
.act-intel-season-card:last-child { margin-bottom: 0; }
.act-intel-season-header { margin-bottom: 6px; }
.act-intel-season-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}
.act-intel-season-text {
  font-size: 0.88rem;
  color: var(--text, #1a1a2e);
  line-height: 1.55;
  margin: 0;
}
/* ── Where to Stay visual rows ────────────────────────────────── */
.act-intel-stay-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(108,60,225,0.06);
}
.act-intel-stay-row:last-child { border-bottom: none; }
.act-intel-stay-badge {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  margin-top: 2px;
}
.act-intel-stay-text {
  font-size: 0.88rem;
  color: var(--text, #1a1a2e);
  line-height: 1.5;
}
/* ── Fact stack (single-col for KBYG items) ──────────────────── */
.act-intel-fact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.act-intel-fact-item {
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(108,60,225,0.1);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.86rem;
  line-height: 1.45;
}
.act-intel-fact-label {
  font-weight: 700;
  color: #5b2cb8;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.act-intel-fact-value {
  color: var(--text, #1a1a2e);
}
/* ── Budget level chips ───────────────────────────────────────── */
.act-intel-budget-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.act-intel-budget-chip {
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 5px 12px;
}
.act-intel-budget-chip--budget  { background: rgba(34,197,94,0.15);  color: #166534; }
.act-intel-budget-chip--mid     { background: rgba(251,191,36,0.18); color: #92400e; }
.act-intel-budget-chip--luxury  { background: rgba(239,68,68,0.12);  color: #991b1b; }
.act-intel-budget-note {
  font-size: 0.88rem;
  color: var(--muted,#555);
  line-height: 1.5;
  margin-top: 4px;
}
/* ── Event cards ──────────────────────────────────────────────── */
.act-intel-event-card {
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(108, 60, 225, 0.13);
  border-radius: 10px;
  padding: 10px 13px;
  margin-bottom: 8px;
}
.act-intel-event-card:last-child { margin-bottom: 0; }
.act-intel-event-name {
  font-weight: 700;
  color: var(--text, #1a1a2e);
  margin-bottom: 3px;
  font-size: 0.95rem;
}
.act-intel-event-note {
  color: var(--muted, #555);
  line-height: 1.5;
  font-size: 0.88rem;
}
.act-intel-event-tip {
  color: #6C3CE1;
  font-size: 0.84rem;
  margin-top: 5px;
  font-weight: 600;
}
.act-intel-event-link {
  display: inline-block;
  margin-top: 7px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #6C3CE1;
  text-decoration: none;
  background: rgba(108, 60, 225, 0.09);
  padding: 4px 12px;
  border-radius: 20px;
}
.act-intel-event-link:hover { background: rgba(108, 60, 225, 0.18); }
.act-intel-ai-divider {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 14px 16px 10px;
  border-top: none;
  margin-top: 8px;
  margin-bottom: 14px;
  margin-left: -16px;
  margin-right: -16px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(90deg, #6C3CE1 0%, #c026d3 50%, #FF5D6C 100%);
}
/* White text on "Prinda Suggests" — banner now carries the gradient bg */
.act-intel-ai-divider-text {
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-weight: 800;
  font-size: 1.3rem;
}

/* ── Location Disambiguation Modal ──────────────────────────────── */
.loc-disambig-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.loc-disambig-modal {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  width: min(400px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 50px rgba(0,0,0,0.22);
}
.loc-disambig-header { margin-bottom: 16px; }
.loc-disambig-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text, #1a1a2e);
  margin-bottom: 6px;
}
.loc-disambig-subtitle {
  font-size: 0.82rem;
  color: var(--muted, #6b7280);
  line-height: 1.4;
}
.loc-disambig-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.loc-disambig-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface2, #f8fafc);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
}
.loc-disambig-option:hover { border-color: var(--primary, #6c3ce1); background: #f5f3ff; }
.loc-disambig-flag { font-size: 1.5rem; flex-shrink: 0; }
.loc-disambig-option-text { flex: 1; }
.loc-disambig-option-name { font-weight: 700; font-size: 0.92rem; color: var(--text, #1a1a2e); }
.loc-disambig-option-sub  { font-size: 0.76rem; color: var(--muted, #6b7280); margin-top: 1px; }
.loc-disambig-cancel {
  width: 100%;
  padding: 9px;
  background: none;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--muted, #6b7280);
  cursor: pointer;
  transition: background 0.12s;
}
.loc-disambig-cancel:hover { background: #f8fafc; }

/* ── Nearby Context — Hierarchical Event Discovery ──────────────── */
.act-nearby-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px solid var(--border, #e5e7eb);
}
.act-nearby-section-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
  margin-bottom: 12px;
}
.act-nearby-group {
  margin-bottom: 14px;
}
/* Parent region drawer */
.act-nearby-drawer-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--surface2, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.act-nearby-drawer-btn:hover { background: #f1f5f9; }
.act-nearby-drawer-lbl { flex: 1; }
.act-nearby-count-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  background: rgba(108, 60, 225, 0.1);
  color: var(--primary, #6c3ce1);
  border-radius: 12px;
  white-space: nowrap;
}
.act-nearby-arrow {
  color: var(--muted, #9ca3af);
  font-size: 1rem;
  transition: transform 0.2s;
}
.act-nearby-drawer-body {
  max-height: 0;
  overflow: hidden;
  padding: 0;
  transition: max-height 0.3s ease, padding 0.2s ease;
}
.act-nearby-drawer-body--open {
  max-height: 1200px;
  padding: 10px 4px 4px;
}
/* Chips */
.act-nearby-chips-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted, #6b7280);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.act-nearby-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.act-nearby-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--surface2, #f8fafc);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text, #1a1a2e);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.act-nearby-chip:hover { border-color: var(--primary, #6c3ce1); background: #f5f3ff; }
.act-nearby-chip--active { border-color: var(--primary, #6c3ce1); background: #f5f3ff; color: var(--primary, #6c3ce1); }
.act-nearby-chip-count {
  background: rgba(108, 60, 225, 0.12);
  color: var(--primary, #6c3ce1);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 0.7rem;
  font-weight: 700;
}
.act-nearby-chip-expand {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface2, #f8fafc);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
}
/* Nearby event cards (compact) */
.act-nearby-event-mini {
  padding: 8px 0;
  border-bottom: 1px solid var(--border, #f1f5f9);
}
.act-nearby-event-mini:last-child { border-bottom: none; }
.act-nearby-event-nameline {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  flex-wrap: wrap;
}
.act-nearby-event-date {
  font-size: 0.72rem;
  color: var(--primary, #6c3ce1);
  font-weight: 500;
}
.act-nearby-event-note {
  font-size: 0.78rem;
  color: var(--text, #374151);
  margin-top: 3px;
  line-height: 1.45;
}
.act-nearby-event-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.74rem;
  color: var(--primary, #6c3ce1);
  font-weight: 600;
  text-decoration: none;
  padding: 2px 8px;
  background: rgba(108, 60, 225, 0.07);
  border-radius: 8px;
}
.act-nearby-event-link:hover { background: rgba(108, 60, 225, 0.14); }

/* ── Tourist/busy level — bordered component ────────────────────── */
.act-intel-crowd-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 18px 10px;
  gap: 5px;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.28);
  border-radius: 14px;
  margin: 8px 16px;
  backdrop-filter: blur(4px);
}
.act-intel-crowd-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
.act-intel-crowd-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,0.3);
}
.act-intel-crowd-dot.filled { border-color: transparent; }
.act-intel-crowd-dot.l1, .act-intel-crowd-dot.l2 { background:#22c55e; }
.act-intel-crowd-dot.l3 { background:#f59e0b; }
.act-intel-crowd-dot.l4, .act-intel-crowd-dot.l5 { background:#ef4444; }
.act-intel-crowd-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
.act-intel-crowd-note {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
  text-align: center;
  max-width: 280px;
  line-height: 1.4;
}

/* ── Weather drawer panel — dark text on light drawer background ─── */
.act-intel-weather-month-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.act-intel-weather-stat {
  display: flex;
  flex-direction: column;
  background: rgba(108,60,225,0.07);
  border: 1px solid rgba(108,60,225,0.12);
  border-radius: 8px;
  padding: 8px 10px;
}
.act-intel-weather-stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5b2cb8;
  font-weight: 700;
  margin-bottom: 2px;
}
.act-intel-weather-stat-val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text, #1a1a2e);
}
.act-intel-weather-adverse {
  margin-top: 8px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 0.84rem;
  color: #b91c1c;
}
.act-intel-weather-sun-row {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 0.84rem;
  color: var(--muted, #555);
}
.act-intel-weather-moon {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--muted, #555);
  text-align: center;
}
/* Tide pattern */
.act-intel-tide-note {
  font-size: 0.82rem;
  color: #1e40af;
}
/* Tide + Surf grouped container */
.act-intel-tide-surf-container {
  margin-top: 14px;
  background: rgba(59,130,246,0.05);
  border: 1px solid rgba(59,130,246,0.16);
  border-radius: 10px;
  padding: 10px 12px;
}
.act-intel-tide-surf-container .act-intel-surf-section {
  margin-top: 10px;
  border-top: 1px solid rgba(59,130,246,0.12);
  padding-top: 10px;
}
/* ── Sunrise/Sunset daylight bar ─────────────────────────────────── */
.act-intel-daylight-wrap {
  margin: 16px 0 4px;
}
.act-intel-daylight-bar {
  position: relative;
  height: 10px;
  background: rgba(15,23,42,0.8);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 5px;
}
.act-intel-daylight-fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, #f97316 0%, #fbbf24 40%, #fde68a 50%, #fbbf24 60%, #f97316 100%);
  border-radius: 4px;
}
.act-intel-daylight-times {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--muted, #555);
}
.act-intel-daylight-duration {
  font-size: 0.72rem;
  color: #92400e;
  background: rgba(251,191,36,0.15);
  border-radius: 10px;
  padding: 1px 8px;
  font-weight: 600;
}

/* ── Free attraction badge ──────────────────────────────────────── */
.act-intel-free-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(34,197,94,0.15);
  color: #166534;
  border-radius: 12px;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}

/* Month selector tabs in weather drawer */
.act-intel-weather-months {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
  justify-content: center;
}
.act-intel-weather-tab {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(108,60,225,0.25);
  background: none;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: #5b2cb8;
  transition: all 0.15s;
}
.act-intel-weather-tab.active,
.act-intel-weather-tab:hover {
  background: rgba(108,60,225,0.12);
  border-color: rgba(108,60,225,0.5);
}

/* ── Hero panel ──────────────────────────────────────────────────── */
.act-intel-hero {
  padding: 15px 16px 12px;
  background: linear-gradient(135deg, #6C3CE1 0%, #c026d3 60%, #FF5D6C 100%);
  color: #fff;
}
.act-intel-hero .act-intel-badge {
  background: rgba(255,255,255,0.22);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}
.act-intel-hero-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}
.act-intel-hero-name {
  font-size: 1.28rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
.act-intel-hero .act-intel-chips-row {
  padding: 0;
  border: none;
  margin-bottom: 4px;
}
.act-intel-hero .act-intel-chip {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
}
.act-intel-hero .act-intel-chip--pollen-alert {
  background: rgba(245,158,11,0.42);
  border-color: rgba(245,158,11,0.70);
  color: #fff;
}
.act-intel-hero .act-intel-chip--health-alert {
  background: rgba(239,68,68,0.42);
  border-color: rgba(239,68,68,0.70);
  color: #fff;
}
.act-intel-hero .act-intel-seasonal {
  background: rgba(255,255,255,0.13);
  color: #fff;
  border-radius: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 0.9rem;
  border-bottom: none;
}
.act-intel-hero-booking {
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.9rem;
  color: #fff;
  margin-top: 7px;
  line-height: 1.5;
  border: 1px solid rgba(255,255,255,0.2);
}
.act-intel-hero-hazard {
  background: rgba(239,68,68,0.3);
  border: 1px solid rgba(255,120,120,0.5);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.9rem;
  color: #fff;
  margin-top: 8px;
  line-height: 1.5;
}

/* ── Expandable intel drawers ────────────────────────────────────── */
.act-intel-drawers { border-top: 1px solid rgba(108,60,225,0.12); }
.act-intel-drawer-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(108,60,225,0.08);
  cursor: pointer;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text, #1a1a2e);
  text-align: left;
  gap: 8px;
  transition: background 0.15s;
  min-height: 48px;
}
.act-intel-drawer-btn:hover { background: rgba(108,60,225,0.04); }
.act-intel-drawer-btn:last-of-type { border-bottom: none; }
.act-intel-drawer-arrow {
  font-size: 1.15rem;
  color: #9c7ee8;
  transition: transform 0.25s ease;
  flex-shrink: 0;
  display: inline-block;
  line-height: 1;
}
.act-intel-drawer-btn.open .act-intel-drawer-arrow { transform: rotate(90deg); }
.act-intel-drawer-count {
  display: inline-flex;
  align-items: center;
  background: rgba(108,60,225,0.1);
  color: #5b2cb8;
  border-radius: 12px;
  padding: 1px 8px;
  font-size: 0.74rem;
  font-weight: 700;
  margin-left: 6px;
}
.act-intel-drawer-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.32s ease, opacity 0.22s ease;
  padding: 0 16px;
  border-bottom: 1px solid rgba(108,60,225,0.07);
}
.act-intel-drawer-body > * { margin-top: 10px; }
.act-intel-drawer-body > *:last-child { margin-bottom: 12px; }

/* Agreed activity radar badge */
.home-activity-agreed-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   HOLIDAY OPTIONS VIEW (HOV)
   Primary destination-picker for group_holiday gatherings.
   Sits between the gathering list and the full detail tabs.
   ══════════════════════════════════════════════════════════════ */

.hov-view {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* ── Hero banner ── */
.hov-hero {
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, #6C3CE1 0%, #FF5D6C 100%);
  color: #fff;
  text-align: center;
}
.hov-hero-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.hov-hero-meta {
  font-size: 0.82rem;
  opacity: 0.88;
  font-weight: 500;
}

/* ── Search toolbar ── */
.hov-toolbar {
  display: flex;
  gap: 8px;
  padding: 12px 14px 4px;
}

/* ── Cards grid ── */
.hov-cards {
  padding: 10px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Individual destination card ── */
.hov-card {
  background: var(--bg, #fff);
  border: 1.5px solid var(--border, #e5e7eb);
  border-left: 4px solid #6C3CE1;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s;
}
.hov-card:hover {
  box-shadow: 0 4px 18px rgba(108, 60, 225, 0.12);
}

/* ── Card top row ── */
.hov-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.hov-emoji {
  font-size: 2.2rem;
  line-height: 1;
  flex-shrink: 0;
}
.hov-card-title-area {
  flex: 1;
  min-width: 0;
}
.hov-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.hov-location {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 2px;
}
.hov-agreed-badge {
  background: linear-gradient(135deg, #0ea5e9, #2d9d78);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  flex-shrink: 0;
  white-space: nowrap;
}
.hov-vote-summary {
  font-size: 0.82rem;
  font-weight: 700;
  color: #6C3CE1;
  flex-shrink: 0;
}

/* ── Card body ── */
.hov-tagline {
  font-size: 0.88rem;
  font-style: italic;
  color: #6C3CE1;
  margin: 0 0 6px;
  line-height: 1.4;
}
.hov-why {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 8px;
  line-height: 1.5;
}
.hov-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.hov-meta-row {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 8px;
  line-height: 1.4;
}
.hov-all-agreed-msg {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0ea5e9;
  padding: 6px 0 0;
}

/* ══════════════════════════════════════════════════════════════
   PRINDA PRIMARY BOOKING CTA
   Phase 1 — Prinda as the hero brand in holiday destination cards
   ══════════════════════════════════════════════════════════════ */

/* Prinda primary booking CTA */
.hov-book-prinda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 40%, #8e44ad 100%);
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  margin-bottom: 10px;
  letter-spacing: 0.01em;
  transition: opacity 0.18s, transform 0.12s;
  box-shadow: 0 4px 18px rgba(238,90,36,0.25);
  box-sizing: border-box;
}
.hov-book-prinda:hover,
.hov-book-prinda:focus {
  opacity: 0.92;
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}
.hov-book-prinda-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 900;
  flex-shrink: 0;
}

/* Secondary platform pill row */
.hov-book-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.hov-book-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--surface-alt, #f0f0f0);
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary, #333);
  text-decoration: none;
  transition: background 0.15s;
}
.hov-book-pill:hover {
  background: var(--surface-hover, #e0e0e0);
  text-decoration: none;
  color: var(--text-primary, #333);
}

/* Dark mode adjustments */
[data-theme='dark'] .hov-book-pill {
  background: rgba(255,255,255,0.1);
  color: #e5e7eb;
}
[data-theme='dark'] .hov-book-pill:hover {
  background: rgba(255,255,255,0.18);
  color: #f9fafb;
}

/* ══════════════════════════════════════════════════════
   SCHEDULE AWARENESS — wizard conflict banner & suggestions
   ══════════════════════════════════════════════════════ */

/* ── Conflict banner (warn / clear) ── */
.gwiz-conflict-banner {
  border-radius: 10px;
  padding: 12px 14px;
  margin: 4px 0 10px;
  font-size: 0.86rem;
}
.gwiz-conflict-warn {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.28);
  color: var(--text, #111);
}
.gwiz-conflict-clear {
  background: rgba(16,185,129,0.07);
  border: 1px solid rgba(16,185,129,0.28);
  color: var(--text, #111);
}
.gwiz-conflict-banner-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 600;
}
.gwiz-conflict-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.gwiz-conflict-detail {
  font-weight: 400;
  font-size: 0.83rem;
  color: var(--muted, #6b7280);
  margin-top: 2px;
}
.gwiz-conflict-count {
  font-weight: 700;
  color: #ef4444;
}
.gwiz-conflict-note {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--muted, #6b7280);
}
.gwiz-conflict-loading {
  font-size: 0.83rem;
  color: var(--muted, #6b7280);
  padding: 8px 0;
}

/* ── Suggestions panel ── */
.gwiz-suggestions-panel-inner {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 10px;
}
.gwiz-suggestions-header {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text, #111);
  margin-bottom: 8px;
}
.gwiz-suggestions-loading,
.gwiz-suggestions-empty {
  font-size: 0.83rem;
  color: var(--muted, #6b7280);
  padding: 8px 0;
}

/* Window / scan range selector */
.gwiz-suggestions-window-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}
.gwiz-win-label {
  font-size: 0.75rem;
  color: var(--muted, #6b7280);
  flex-shrink: 0;
}
.gwiz-win-btn {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--border, #e5e7eb);
  background: transparent;
  color: var(--muted, #6b7280);
  cursor: pointer;
  min-height: 30px;
  transition: background 0.15s, color 0.15s;
}
.gwiz-win-btn:hover,
.gwiz-win-btn.active {
  background: var(--accent, #6C3CE1);
  color: #fff;
  border-color: var(--accent, #6C3CE1);
}

/* Individual suggestion rows */
.gwiz-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gwiz-suggestion-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg2, #f8fafc);
  border: 1px solid var(--border, #e5e7eb);
}
.gwiz-suggestion-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.gwiz-suggestion-info {
  flex: 1;
  min-width: 0;
}
.gwiz-suggestion-date {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text, #111);
  display: block;
}
.gwiz-suggestion-text {
  font-size: 0.77rem;
  color: var(--muted, #6b7280);
  display: block;
}
.gwiz-suggestion-use-btn {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  border: none;
  background: var(--accent, #6C3CE1);
  color: #fff;
  cursor: pointer;
  min-height: 32px;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.gwiz-suggestion-use-btn:hover { opacity: 0.85; }

/* ── Gathering card conflict badge ── */
.gathering-sq-conflict {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: #ef4444;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
  white-space: nowrap;
  letter-spacing: 0.01em;
  z-index: 2;
  pointer-events: none;
  border: 1.5px solid #fff;
}

/* ── Member row — conflict state ── */
.member-row-conflict {
  background: rgba(239,68,68,0.04);
  border-radius: 8px;
}
.gathering-member-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gathering-member-chips {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

/* Conflict badge on member row */
.member-conflict-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  background: #ef4444;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* "Mark conflict as clear" inline button */
.member-conflict-clear-btn {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent, #6C3CE1);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: 24px;
  text-align: left;
}
.member-conflict-clear-btn:hover {
  color: #ef4444;
}

/* Dark mode adjustments for conflict elements */
[data-theme='dark'] .gwiz-conflict-warn {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.35);
}
[data-theme='dark'] .gwiz-conflict-clear {
  background: rgba(16,185,129,0.1);
  border-color: rgba(16,185,129,0.35);
}
[data-theme='dark'] .gwiz-suggestions-panel-inner {
  background: var(--card-bg, #1e1e2e);
  border-color: var(--border, #333);
}
[data-theme='dark'] .gwiz-suggestion-row {
  background: rgba(255,255,255,0.04);
  border-color: var(--border, #333);
}
[data-theme='dark'] .member-row-conflict {
  background: rgba(239,68,68,0.07);
}

/* ═══════════════════════════════════════════════════════════════════════
   🗺️  DESTINATION BROWSE SYSTEM
   ═══════════════════════════════════════════════════════════════════════ */

/* Browse button in holiday tab toolbar */
.hol-browse-btn {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d6a9f 100%) !important;
}
.hol-browse-btn:hover { filter: brightness(1.12); }

/* Browse panel — reuses act-suggestions-panel slide-in pattern */
.hol-browse-panel { z-index: 1101; }

/* Search bar */
.hol-browse-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.hol-browse-search-icon {
  position: absolute;
  left: 12px;
  font-size: 1rem;
  pointer-events: none;
  opacity: 0.6;
}
.hol-browse-input {
  width: 100%;
  padding: 10px 36px 10px 38px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 24px;
  font-size: 0.95rem;
  background: var(--surface2, #f8fafc);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.hol-browse-input:focus { border-color: #6c3ce1; background: #fff; }
.hol-browse-clear {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--muted);
  padding: 4px 6px;
}

/* Summary line */
.hol-browse-summary {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 12px;
  padding: 0 2px;
}

/* Region group */
.hol-browse-region {
  margin-bottom: 18px;
}
.hol-browse-region-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.hol-browse-region-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}
.hol-browse-region-count {
  font-size: 0.72rem;
  background: rgba(108,60,225,0.10);
  color: #6c3ce1;
  border-radius: 20px;
  padding: 2px 8px;
  font-weight: 600;
}

/* Destination cards grid — 2 per row */
.hol-browse-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Individual destination card */
.hol-browse-card {
  border-radius: 12px;
  overflow: hidden;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  cursor: default;
  transition: transform 0.15s;
}
.hol-browse-card:hover { transform: scale(1.02); }

.hol-browse-card-body {
  flex: 1;
}
.hol-browse-card-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.hol-browse-card-region {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.8);
  margin-bottom: 4px;
}
.hol-browse-card-tag {
  font-size: 0.68rem;
  background: rgba(255,255,255,0.18);
  color: #fff;
  border-radius: 10px;
  padding: 2px 7px;
  display: inline-block;
  margin-bottom: 3px;
}
.hol-browse-card-chips {
  font-size: 0.80rem;
  margin-top: 2px;
  letter-spacing: 2px;
}

.hol-browse-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.hol-browse-card-stars {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.9);
}
.hol-browse-add-btn {
  font-size: 0.70rem;
  font-weight: 700;
  background: rgba(255,255,255,0.22);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 16px;
  padding: 3px 9px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.hol-browse-add-btn:hover { background: rgba(255,255,255,0.38); }
.hol-browse-add-btn:disabled { opacity: 0.7; cursor: default; }

/* Load more button */
.hol-browse-more-btn {
  width: 100%;
  margin-top: 6px;
  padding: 8px;
  background: none;
  border: 1.5px dashed var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 0.80rem;
  color: #6c3ce1;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.12s;
}
.hol-browse-more-btn:hover { background: rgba(108,60,225,0.06); }

/* Empty state */
.hol-browse-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
  font-size: 0.88rem;
}
.hol-browse-loading {
  text-align: center;
  padding: 24px;
  color: var(--muted);
  font-size: 0.88rem;
  animation: pulse 1.5s ease-in-out infinite;
}

@media (max-width: 360px) {
  .hol-browse-cards { grid-template-columns: 1fr; }
}

/* ── Surf Section in Weather Guide ──────────────────────── */
.act-intel-surf-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e2e8f0);
}
.act-intel-surf-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.act-intel-surf-icon { font-size: 1.1rem; }
.act-intel-surf-title { font-size: 0.85rem; font-weight: 700; color: var(--text); }
.act-intel-surf-rating { font-size: 0.78rem; font-weight: 600; margin-left: auto; }

/* Animated wave bars */
.act-intel-surf-waves {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 32px;
  margin-bottom: 4px;
}
.act-intel-wave {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: rgba(96,165,250,0.2);
  animation: surf-wave 2s ease-in-out infinite;
}
.act-intel-wave:nth-child(1) { height: 40%; }
.act-intel-wave:nth-child(2) { height: 65%; }
.act-intel-wave:nth-child(3) { height: 85%; }
.act-intel-wave:nth-child(4) { height: 100%; }
.act-intel-wave--active {
  animation: surf-wave-active 1.8s ease-in-out infinite;
}
@keyframes surf-wave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.7); }
}
@keyframes surf-wave-active {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.75); opacity: 0.85; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   GATHERINGS MAP — Leaflet / OpenStreetMap integration
   Covers: map view tab, picker modal, custom pins, popups, no-pin list
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Location input wrapper (provides position:relative for inline AC) ──────── */
.gwiz-location-ac-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── "Use map" text button next to location inputs ─────────────────────────── */
.gwiz-map-text-btn {
  flex-shrink: 0;
  padding: 0 12px;
  height: 42px;
  border: 1.5px solid #6C3CE1;
  border-radius: 10px;
  background: #ede8ff;
  font-size: 0.8rem;
  font-weight: 700;
  color: #6C3CE1;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s, border-color 0.15s;
}
.gwiz-map-text-btn:hover,
.gwiz-map-text-btn:focus-visible {
  background: #d8ccff;
  outline: none;
}

/* Keep legacy emoji-only button working if still referenced anywhere */
.gwiz-map-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--bg2, #f8fafc);
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.gwiz-map-btn:hover,
.gwiz-map-btn:focus-visible {
  background: #ede8ff;
  border-color: #6C3CE1;
  outline: none;
}

/* ── Gatherings map view container (shown when "Map 🗺️" tab is active) ──────── */
#gatherings-map-container {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: calc(100dvh - 112px);
  min-height: 360px;
}

.gath-view-map {
  width: 100%;
  height: 340px;
  min-height: 280px;
  flex-shrink: 0;
  z-index: 0;
}

.gath-map-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 0;
  color: var(--muted, #64748b);
  font-size: 0.9rem;
}

/* ── Custom Leaflet pin icon ─────────────────────────────────────────────────── */
.gath-map-pin {
  width: 38px;
  height: 38px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  border: 2.5px solid rgba(255,255,255,0.85);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.gath-map-pin:hover {
  transform: rotate(-45deg) scale(1.12);
  box-shadow: 0 5px 16px rgba(0,0,0,0.32);
}

/* ── Leaflet popup card ──────────────────────────────────────────────────────── */
.gath-map-popup { font-family: inherit; padding: 2px 0; }
.gath-map-popup-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1e293b;
  margin-bottom: 4px;
  line-height: 1.3;
}
.gath-map-popup-loc,
.gath-map-popup-date {
  font-size: 0.78rem;
  color: #475569;
  margin-bottom: 3px;
}
.gath-map-popup-btn {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 7px 12px;
  background: linear-gradient(135deg, #6C3CE1, #a855f7);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.15s;
}
.gath-map-popup-btn:hover { opacity: 0.88; }

/* ── "No pin yet" list below map view ───────────────────────────────────────── */
.gath-no-pin-section {
  padding: 12px 14px 16px;
  border-top: 1px solid var(--border, #e5e7eb);
  background: var(--bg, #fff);
}
.gath-no-pin-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text, #1e293b);
  margin-bottom: 2px;
}
.gath-no-pin-hint {
  font-size: 0.74rem;
  color: var(--muted, #64748b);
  margin-bottom: 8px;
}
.gath-no-pin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border: none;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.gath-no-pin-row:hover { background: var(--bg2, #f8fafc); border-radius: 6px; }
.gath-no-pin-row:last-child { border-bottom: none; }
.gath-no-pin-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gath-no-pin-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text, #1e293b);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gath-no-pin-loc {
  font-size: 0.74rem;
  color: var(--muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MAP PICKER MODAL
   ══════════════════════════════════════════════════════════════════════════════ */
#prinda-map-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;          /* centred vertically on all screen sizes */
  justify-content: center;      /* centred horizontally */
  padding: 16px;
  overflow: hidden;
  width: 100vw;
  max-width: 100vw;
  animation: pmp-fade-in 0.18s ease;
}
@keyframes pmp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pmp-modal {
  background: #fff;
  color-scheme: light;
  border-radius: 20px;          /* fully rounded — not bottom-sheet style */
  /* 95vw: margin on each side; cap at 540px on tablets/desktop */
  width: 95vw;
  max-width: 540px;
  max-height: 94dvh;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-x: hidden;
  box-sizing: border-box;
  contain: layout paint;  /* prevent Leaflet children creating wider stacking context */
  box-shadow: 0 -8px 40px rgba(0,0,0,0.22);
  animation: pmp-slide-up 0.22s cubic-bezier(0.2,0.9,0.4,1);
}
@keyframes pmp-slide-up {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.pmp-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 15px 48px;
  background: linear-gradient(135deg, #6C3CE1, #f9a8d4);
  border-radius: 20px 20px 0 0;
  flex-shrink: 0;
}
.pmp-title { font-weight: 700; font-size: 1rem; color: #fff; text-align: center; }
.pmp-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border: none; background: rgba(255,255,255,0.18); border-radius: 50%;
  font-size: 1.1rem; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.pmp-close:hover { background: rgba(255,255,255,0.32); }

/* Wrapper that holds search row + autocomplete dropdown */
.pmp-search-wrap {
  position: relative;
  flex-shrink: 0;
  padding: 10px 14px 4px;
}
.pmp-search-row {
  display: flex;
  gap: 8px;
}
/* ── Autocomplete dropdown ─────────────────────────────────────────────────── */
.pmp-autocomplete {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.13);
  z-index: 10;
  overflow-y: auto;
  max-height: 240px;
  overscroll-behavior: contain;
}
.pmp-ac-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
  font-family: inherit;
}
.pmp-ac-item:last-child { border-bottom: none; }
.pmp-ac-item:hover, .pmp-ac-item:focus { background: #f8fafc; outline: none; }
.pmp-ac-pin { flex-shrink: 0; font-size: 0.85rem; color: #6C3CE1; margin-top: 2px; }
.pmp-ac-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pmp-ac-main {
  font-size: 0.84rem;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pmp-ac-sub {
  font-size: 0.74rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pmp-search-input {
  flex: 1; border: 1.5px solid #e5e7eb; border-radius: 10px;
  padding: 9px 12px;
  /* 16px minimum prevents iOS Safari from auto-zooming the viewport on focus */
  font-size: 16px;
  outline: none;
  color: #1e293b; background: #f8fafc;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pmp-search-input:focus {
  border-color: #6C3CE1;
  box-shadow: 0 0 0 3px rgba(108,60,225,0.15);
  background: #fff;
}
.pmp-search-btn {
  flex-shrink: 0; width: 40px; height: 40px;
  border: 1.5px solid #e5e7eb; border-radius: 10px;
  background: #f8fafc; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.pmp-search-btn:hover,
.pmp-search-btn:focus-visible { background: #ede8ff; border-color: #6C3CE1; outline: none; }

.pmp-hint {
  padding: 0 14px 4px;
  font-size: 0.75rem;
  color: #94a3b8;
  min-height: 18px;
  flex-shrink: 0;
}

.pmp-map-wrap {
  flex: 1;
  overflow: hidden;
  min-height: 260px;
  position: relative;
}
.pmp-map {
  width: 100%;
  height: 100%;
  min-height: 260px;
  z-index: 0;
}

/* confirm-wrap: sits between search box and map */
.pmp-confirm-wrap {
  flex-shrink: 0;
  padding: 8px 14px 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* legacy footer kept for compat */
.pmp-footer {
  flex-shrink: 0;
  border-top: 1px solid #e5e7eb;
  padding: 10px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pmp-selected-addr {
  font-size: 0.82rem;
  color: #334155;
  font-weight: 600;
  min-height: 18px;
  word-break: break-word;
}
.pmp-confirm-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #6C3CE1, #a855f7);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.pmp-confirm-btn:disabled {
  background: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
}
.pmp-confirm-btn:not(:disabled):hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ── Events date-range filter chips ────────────────────────────────────────── */
.gatherings-date-filter {
  display: flex;
  gap: 6px;
  padding: 0 0 4px;          /* no top padding — matches card gap below */
  flex-wrap: wrap;
  justify-content: center;
}
.gath-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 999px;
  background: var(--bg2, #f8fafc);
  color: var(--muted, #64748b);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  font-family: inherit;
}
.gath-date-chip:hover {
  background: #e0f3fb;
  border-color: #87ceeb;
  color: #0e7490;
}
.gath-date-chip.active {
  background: #87ceeb;        /* sky blue active */
  border-color: #87ceeb;     /* border matches fill so blends cleanly */
  color: #fff;               /* white text on active */
  font-weight: 700;
}
/* Count badge — standalone, shows count for the currently selected period */
.gath-date-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: #6C3CE1;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
/* Standalone badge sits as a flex sibling in the chip row */
.gath-date-badge--standalone {
  align-self: center;
  margin-left: 2px;
}

/* ── Map view shortcut button ──────────────────────────────────────────────── */
/* ── Card ↔ Map view toggle ─────────────────────────────────────────────── */
.gath-view-toggle {
  display: inline-flex;
  background: var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.gath-view-toggle-btn {
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 1.1rem;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, box-shadow 0.15s;
  color: var(--muted, #64748b);
  padding: 0;
  font-family: inherit;
  line-height: 1;
}
.gath-view-toggle-btn.active {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  color: var(--text, #1e293b);
}
.gath-view-toggle-btn:hover:not(.active) {
  background: rgba(255,255,255,0.6);
}

/* ══════════════════════════════════════════════════════════════════════════════
   VENUE MAP VIEWER — read-only "Show on map" for activity cards
   ══════════════════════════════════════════════════════════════════════════════ */

/* "Show on map" button on activity cards */
.gath-show-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1.5px solid #6C3CE1;
  border-radius: 8px;
  background: #ede8ff;
  color: #6C3CE1;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  font-family: inherit;
}
.gath-show-map-btn:hover,
.gath-show-map-btn:focus-visible {
  background: #d8ccff;
  outline: none;
}

/* Backdrop overlay */
#prinda-venue-map-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
  width: 100vw;
  max-width: 100vw;
  animation: pmp-fade-in 0.18s ease;
}

/* Modal card */
.gath-venue-modal {
  background: #fff;
  border-radius: 20px;
  width: 95vw;
  max-width: 540px;
  max-height: 90dvh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  contain: layout paint;
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
  animation: pmp-slide-up 0.22s cubic-bezier(0.2,0.9,0.4,1);
}

/* Header */
.gath-venue-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.gath-venue-modal-name {
  font-weight: 700;
  font-size: 0.96rem;
  color: #1e293b;
  line-height: 1.3;
}
.gath-venue-modal-addr {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 3px;
  line-height: 1.4;
}

/* Map area */
.gath-venue-modal-map-wrap {
  flex: 1;
  overflow: hidden;
  min-height: 240px;
  position: relative;
}
.gath-venue-leaflet-map {
  width: 100%;
  height: 100%;
  min-height: 240px;
  z-index: 0;
}

/* Footer */
.gath-venue-modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #e5e7eb;
  padding: 10px 14px 14px;
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.gath-venue-directions-btn {
  flex: 1;
  padding: 11px 14px;
  background: linear-gradient(135deg, #6C3CE1, #a855f7);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}
.gath-venue-directions-btn:hover { opacity: 0.9; }

.gath-venue-close-btn {
  flex-shrink: 0;
  padding: 11px 18px;
  background: #f1f5f9;
  color: #475569;
  border: none;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.gath-venue-close-btn:hover { background: #e2e8f0; }

/* ── Enhanced surf section chips and activity pills ────────────────────────── */
.act-intel-surf-enhanced .act-intel-surf-header {
  gap: 8px;
  flex-wrap: wrap;
}
.surf-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 0 2px;
}
.surf-chip {
  font-size: 0.74rem;
  font-weight: 600;
  background: rgba(56,189,248,0.12);
  color: #0369a1;
  border: 1px solid rgba(56,189,248,0.3);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
.surf-activities {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
  margin-bottom: 2px;
}
.surf-activity-chip {
  font-size: 0.73rem;
  font-weight: 600;
  background: var(--surface2, #f1f5f9);
  color: var(--text, #1e293b);
  border-radius: 20px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* ── Live forecast row + tabs ────────────────────────────────────────────────
   Sits above the existing monthly tab strip.
   Sky-blue (#87ceeb) to visually distinguish live from historical.          */
.wx-live-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px 4px;
  flex-wrap: wrap;
}
.wx-live-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: #0369a1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-right: 2px;
}
.wx-live-tab {
  padding: 5px 10px;
  border: 1.5px solid #5ab8e8;
  border-radius: 20px;
  background: transparent;          /* no fill by default */
  color: #0369a1;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  min-height: 30px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  touch-action: manipulation;
  font-family: inherit;
}
.wx-live-tab.active {
  background: #87ceeb;              /* sky blue fill when selected */
  color: #fff;                      /* white text when selected */
  border-color: #87ceeb;
}
.wx-live-tab:hover:not(.active) { background: rgba(135,206,235,0.18); }

/* ── Live weather tab integration ───────────────────────────────────────────── */
/* Live forecast tabs sit in the SAME .act-intel-weather-months strip as monthly
   tabs and inherit all their styles. The active state is the same purple so
   they look completely unified. Only separation is the · dot divider. */
.wx-tab-sep {
  font-size: 0.7rem;
  color: var(--muted, #9ca3af);
  padding: 4px 1px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
/* Live source note — tiny label above the stats grid */
.wx-live-note {
  font-size: 0.68rem;
  font-weight: 600;
  color: #0ea5e9;
  padding: 4px 14px 2px;
  letter-spacing: 0.02em;
}

/* ── Live forecast badge ──────────────────────────────────────────────────── */
.wx-live-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #0ea5e9;
  letter-spacing: 0.04em;
  padding: 4px 14px 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.wx-live-badge--note {
  color: var(--muted, #9ca3af);
  font-weight: 400;
  padding-top: 2px;
  padding-bottom: 8px;
  font-size: 0.65rem;
}

/* ══════════════════════════════════════════════
   ── LIVE WEATHER FORECAST (Open-Meteo) ──
   wx-forecast-bar, wx-day-card, wx-forecast-grid
   ══════════════════════════════════════════════ */

/* Bar with LIVE badge + tab buttons */
.wx-forecast-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(14,165,233,0.08), rgba(6,182,212,0.04));
  border-bottom: 1px solid rgba(14,165,233,0.15);
  flex-shrink: 0;
}
.wx-forecast-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: #0ea5e9;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-transform: uppercase;
}
.wx-forecast-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}
.wx-ftab {
  flex: 1;
  padding: 5px 6px;
  border: 1.5px solid rgba(14,165,233,0.35);
  border-radius: 20px;
  background: #fff;
  color: #0369a1;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  min-height: 32px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  touch-action: manipulation;
}
.wx-ftab.active,
.wx-ftab:active {
  background: #0ea5e9;
  color: #fff;
  border-color: #0ea5e9;
}
.wx-ftab:hover:not(.active) { background: #e0f2fe; }

/* Panel that receives forecast cards */
.wx-forecast-panel {
  padding: 6px 6px 2px;
  min-height: 0;
}

/* Divider shown when monthly tabs are pushed below live forecast */
.wx-monthly-divider {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted, #9ca3af);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 14px 4px;
  border-top: 1px solid var(--border, #e5e7eb);
  margin-top: 4px;
}

/* ── Forecast day card grid ── */
.wx-forecast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 5px;
  padding: 4px 0 6px;
}
.wx-day-card {
  background: var(--card-bg, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 8px 5px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.wx-day-card--today {
  background: linear-gradient(135deg, #eff6ff, #ecfeff);
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(59,130,246,0.12);
}
.wx-day-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #475569;
  line-height: 1.2;
  white-space: nowrap;
}
.wx-day-card--today .wx-day-label { color: #1d4ed8; }
.wx-day-icon  { font-size: 1.55rem; line-height: 1; margin: 2px 0; }
.wx-day-desc  { font-size: 0.65rem; color: #64748b; line-height: 1.2; min-height: 12px; }
.wx-day-temps {
  display: flex;
  gap: 2px;
  align-items: baseline;
  margin-top: 2px;
}
.wx-temp-hi   { font-size: 0.9rem; font-weight: 700; color: #1e293b; }
.wx-temp-sep  { font-size: 0.7rem; color: #94a3b8; }
.wx-temp-lo   { font-size: 0.78rem; color: #64748b; }
.wx-day-meta  {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.62rem;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.3;
}
.wx-loading, .wx-error {
  text-align: center;
  padding: 14px 10px;
  font-size: 0.82rem;
  color: var(--muted, #9ca3af);
}
.wx-error { color: #ef4444; }