/* ═══════════════════════════════════════
   GoForU Timeline & Budget — timeline.css
═══════════════════════════════════════ */

/* ═══════════════════════════════════════
   FLIGHT CARD
═══════════════════════════════════════ */
.flight-card {
  margin: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.flight-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.flight-card-title { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.flight-card-sub   { font-size: 11px; opacity: 0.8; }

.flight-legs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--color-border);
}
.flight-legs > :only-child { grid-column: 1 / -1; }

.flight-leg {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.flight-leg-label {
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.flight-leg-route {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.flight-leg-details {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}
.flight-leg-airlines {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.flight-leg-tip {
  font-size: 11px;
  color: #0B8043;
  background: #E6F4EA;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  margin-top: var(--space-1);
  width: fit-content;
}

/* ─── Route Summary ─── */
.flight-route-summary {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  margin: 0 var(--space-4) var(--space-3);
  border: 1px solid var(--color-border);
}
.flight-route-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 4px;
}
.flight-route-label {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  min-width: 42px;
}
.flight-route-path {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
.flight-route-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* ─── Booking Buttons ─── */
.flight-booking-section {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}
.flight-booking-label {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.flight-booking-btns {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.flight-book-btn {
  padding: 7px 16px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: all var(--transition-fast);
  border: none;
  cursor: pointer;
  flex: 1;
  text-align: center;
  min-width: 72px;
}
.flight-book-btn--ctrip  { background: #ff6600; color: #fff; }
.flight-book-btn--ctrip:hover  { background: #e55a00; }
.flight-book-btn--qunar  { background: #0099ff; color: #fff; }
.flight-book-btn--qunar:hover  { background: #007ed9; }
.flight-book-btn--feizhu { background: #ff4400; color: #fff; }
.flight-book-btn--feizhu:hover { background: #e03b00; }
.flight-booking-note { font-size: var(--text-xs); color: var(--color-text-muted); }
.flight-no-city-hint {
  font-size: 11px;
  color: var(--color-warning, #f59e0b);
  margin-top: var(--space-2);
}

.flight-realtime-section {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}
.flight-realtime-btn {
  font-size: var(--text-xs);
  color: var(--color-primary);
  font-weight: var(--weight-medium);
  padding: 4px 0;
}
.flight-realtime-btn:disabled { color: var(--color-text-muted); cursor: default; }
.flight-realtime-list { margin-top: var(--space-3); }
.flight-realtime-header {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.flight-realtime-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--text-xs);
}
.flight-no   { font-weight: var(--weight-bold); color: var(--color-text-primary); min-width: 60px; }
.flight-time { color: var(--color-text-secondary); }
.flight-route-mini { color: var(--color-text-muted); margin-left: auto; }
.flight-realtime-empty { font-size: var(--text-xs); color: var(--color-text-muted); padding: var(--space-2) 0; }
.flight-realtime-note  { font-size: 10px; color: var(--color-text-muted); margin-top: var(--space-2); }


/* ─── Day Filter Tabs ─── */
.day-tabs {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 5;
  flex-shrink: 0;
}
.day-tabs::-webkit-scrollbar { display: none; }

.day-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: all var(--transition-fast);
  min-width: 52px;
}
.day-tab:hover { background: var(--color-border-light); color: var(--color-text-primary); }
.day-tab--active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: var(--weight-semibold);
}
.day-tab-city { font-size: 10px; color: inherit; opacity: 0.82; margin-top: 2px; }
.day-tab-date { font-size: 10px; color: inherit; opacity: 0.75; }


/* ─── Timeline Days ─── */
.timeline-days { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-6); }

/* ─── Day Section ─── */
.day-section {}

.day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.day-header-left { display: flex; align-items: center; gap: var(--space-3); }

.day-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}
.day-info { display: flex; flex-direction: column; }
.day-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.day-city-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.day-city-badge--transfer {
  background: #fff7ed;
  color: #c2410c;
}
.day-date  { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 1px; }
.day-weather {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  background: var(--color-border-light);
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.day-safety-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: #FFF8E1;
  border: 1px solid #FFD54F;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: #E65100;
  margin-bottom: var(--space-3);
}


/* ─── Activity List ─── */
.activity-list { display: flex; flex-direction: column; }

.activity-wrapper {
  display: flex;
  gap: var(--space-3);
  position: relative;
}

/* Timeline vertical line */
.timeline-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex-shrink: 0;
  padding-top: 16px;
}
.timeline-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px currentColor;
  flex-shrink: 0;
  z-index: 1;
}
.timeline-line::after {
  content: '';
  flex: 1;
  width: 2px;
  background: var(--color-border);
  margin-top: 4px;
  min-height: 20px;
}
.timeline-line--last::after { display: none; }


/* ─── Transport Connector (inside activity card, top bar) ─── */
.transport-connector {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3);
  background: var(--color-border-light);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 1px solid var(--color-border);
}

.transport-connector-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding-top: 4px;
}

.transport-connector-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

.transport-connector-track {
  width: 2px;
  height: 12px;
  background: repeating-linear-gradient(
    to bottom,
    var(--color-text-muted) 0px,
    var(--color-text-muted) 3px,
    transparent 3px,
    transparent 6px
  );
}

.transport-connector-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.transport-main {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.transport-stop {
  font-size: var(--text-xs);
  color: var(--color-primary);
  line-height: 1.4;
}

.transport-tip-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}


/* ─── Activity Card ─── */
.activity-card {
  position: relative;
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast);
  min-width: 0;
}
.activity-card:hover { box-shadow: var(--shadow-md); }

.act-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.act-header-left { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.act-time {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.act-type-badge {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  padding: 2px 7px;
  border-radius: var(--radius-full);
}
.act-cost {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  white-space: nowrap;
  flex-shrink: 0;
}

.act-name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 2px;
}
.act-name-local {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.act-location {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}
.act-description {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: var(--space-1) 0 var(--space-2);
  border-left: 2px solid var(--color-border);
  padding-left: var(--space-2);
}
.act-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--space-2);
}
.act-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--color-primary-light, #e8f4ff);
  color: var(--color-primary);
  font-weight: 500;
  white-space: nowrap;
}

/* ─── Activity photo ─── */
.act-photo {
  width: 100%;
  height: 140px;
  border-radius: var(--radius-md);
  background: var(--color-bg) center/cover no-repeat;
  margin-top: var(--space-2);
  opacity: 0;
  transition: opacity 0.4s ease;
  overflow: hidden;
}
.act-photo--loaded { opacity: 1; }
.act-photo-credit {
  display: none;
  font-size: 10px;
  color: var(--color-text-muted);
  text-align: right;
  margin-top: 2px;
}
.act-photo-credit a { color: var(--color-text-muted); text-decoration: none; }

.act-safety-tip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: #FFF3E0;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: #BF360C;
  margin-top: var(--space-2);
}

/* Map row with multiple providers */
.act-map-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-2);
}
.act-map-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.act-map-btn {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--color-primary);
  text-decoration: none;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  transition: all var(--transition-fast);
}
.act-map-btn:hover { background: var(--color-primary); color: #fff; }
.act-map-btn--secondary { background: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.act-map-btn--secondary:hover { background: var(--color-text-secondary); color: #fff; }

/* Activity Detail Block (hours, reservation, payment…) */
.act-detail-block {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary-light);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.act-detail-item {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Transport line/stop detail */
.transport-line-stop {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: 3px;
}
.transport-tip {
  font-size: var(--text-xs);
  color: var(--color-primary);
  margin-top: 2px;
}

/* ─── Plan B ─── */
.planb-section { margin-top: var(--space-3); border-top: 1px dashed var(--color-border); padding-top: var(--space-3); }

.planb-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  padding: var(--space-1) 0;
  background: none;
}
.planb-toggle:hover { opacity: 0.8; }
.planb-arrow { font-size: 12px; transition: transform var(--transition-fast); }

.planb-content { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.planb-content--hidden { display: none; }

.planb-item {
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.planb-trigger { font-size: 11px; color: var(--color-primary); font-weight: var(--weight-semibold); }
.planb-name       { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.planb-name-local { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 1px; }
.planb-cost       { font-size: var(--text-xs); color: var(--color-accent); }
.planb-reason     { font-size: var(--text-xs); color: var(--color-text-secondary); line-height: 1.5; }

.planb-switch-btn {
  align-self: flex-start;
  margin-top: var(--space-2);
  padding: 5px var(--space-3);
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  transition: all var(--transition-fast);
}
.planb-switch-btn:hover { background: var(--color-primary-dark); }
.planb-switch-btn--back { background: var(--color-text-secondary); }
.planb-switch-btn--back:hover { background: var(--color-text-primary); }

/* Activity card: switched indicator */
.activity-card--switched .act-name::after {
  content: ' ✓ Plan B';
  font-size: 11px;
  color: var(--color-success);
  font-weight: var(--weight-normal);
}


/* ═══════════════════════════════════════
   BUDGET PANEL
═══════════════════════════════════════ */
.budget-container { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }

.budget-summary-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  color: #fff;
}
.budget-total { margin-bottom: var(--space-4); }
.budget-total-label { display: block; font-size: var(--text-sm); opacity: 0.8; margin-bottom: var(--space-1); }
.budget-total-amount { font-size: 32px; font-weight: var(--weight-bold); letter-spacing: -0.5px; }

.budget-sub-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.budget-stat { text-align: center; }
.budget-stat-val   { display: block; font-size: var(--text-md); font-weight: var(--weight-bold); }
.budget-stat-label { display: block; font-size: 11px; opacity: 0.75; margin-top: 2px; }

.budget-breakdown { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-5); border: 1px solid var(--color-border); }
.budget-breakdown-title { font-size: var(--text-base); font-weight: var(--weight-semibold); margin-bottom: var(--space-4); color: var(--color-text-primary); }

.budget-item { margin-bottom: var(--space-4); }
.budget-item:last-child { margin-bottom: 0; }
.budget-item-top { display: flex; justify-content: space-between; margin-bottom: var(--space-2); }
.budget-item-label  { font-size: var(--text-sm); color: var(--color-text-secondary); }
.budget-item-amount { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); }

.budget-bar-track { height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; }
.budget-bar-fill  { height: 100%; background: var(--color-primary); border-radius: 3px; transition: width 0.6s ease; }

.budget-disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-3);
  background: var(--color-border-light);
  border-radius: var(--radius-md);
}


/* ═══════════════════════════════════════
   MAP PANEL
═══════════════════════════════════════ */
.map-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative;
}

#leaflet-map {
  flex: 1;
  min-height: 420px;
  z-index: 0;
}

/* Day filter chips above the map */
.map-day-filter {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  z-index: 10;
}
.map-day-filter::-webkit-scrollbar { display: none; }

.map-chip {
  padding: 5px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  border: 1.5px solid var(--color-border);
  white-space: nowrap;
  transition: all var(--transition-fast);
  background: var(--color-surface);
}
.map-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.map-chip--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Activity pin (numbered circle) */
.map-act-pin {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  cursor: pointer;
}

/* Safety pin emoji marker */
.map-safety-pin {
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}

/* Leaflet popup overrides */
.map-popup { font-family: inherit; min-width: 160px; }
.map-popup-time   { font-size: 11px; color: var(--color-text-muted); margin-bottom: 3px; font-weight: 600; }
.map-popup-name   { font-size: 13px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 2px; }
.map-popup-local  { font-size: 11px; color: var(--color-text-muted); margin-bottom: 4px; }
.map-popup-loc    { font-size: 11px; color: var(--color-text-secondary); margin-bottom: 4px; }
.map-popup-cost   { font-size: 12px; font-weight: 700; color: var(--color-accent); margin-bottom: 4px; }
.map-popup-safety { font-size: 11px; color: #BF360C; background: #FFF3E0; padding: 3px 6px; border-radius: 4px; margin-bottom: 6px; }
.map-popup-nav-row { display: flex; gap: 6px; margin-top: 6px; }
.map-popup-nav-btn {
  flex: 1; text-align: center;
  padding: 4px 6px;
  font-size: 11px; font-weight: 600;
  border-radius: 5px;
  text-decoration: none;
  background: #1aad19; color: #fff;
}
.map-popup-nav-btn--bd { background: #3385ff; }
.map-popup-nav-btn:hover { opacity: 0.85; }

/* Route nav bar below chips */
.map-route-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.map-route-label { font-size: 12px; color: var(--color-text-muted); }
.map-nav-btn {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600;
  text-decoration: none;
  background: #1aad19; color: #fff;
  transition: opacity var(--transition-fast);
}
.map-nav-btn--secondary { background: #3385ff; }
.map-nav-btn:hover { opacity: 0.85; }

/* Map legend (bottom strip) */
.map-legend {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}


/* ═══════════════════════════════════════
   SAFETY PANEL
═══════════════════════════════════════ */
.safety-container {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
}

.safety-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
}

.safety-section-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.safety-section p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-2);
}
.safety-section p:last-child { margin-bottom: 0; }

.safety-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.safety-list li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
  padding-left: var(--space-1);
}

/* Visa card */
.safety-section--visa {
  background: linear-gradient(135deg, #E8F0FE 0%, #F3F8FF 100%);
  border-color: #C5D8FB;
}
.safety-visa-type {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  background: rgba(26,115,232,0.1);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-2);
}

/* Emergency card */
.safety-section--emergency { border-left: 3px solid #E84A5F; }
.safety-emergency-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.safety-emergency-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.safety-emergency-label { font-size: 11px; color: var(--color-text-muted); }
.safety-emergency-value { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-text-primary); }

/* Scam alerts */
.safety-section--scam { border-left: 3px solid #FF9800; }
.safety-scam-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: #FFF8E1;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: #6D4C00;
  line-height: 1.5;
}

/* Cultural notes */
.safety-section--culture { border-left: 3px solid #7B2D8E; }

/* Health tips */
.safety-section--health { border-left: 3px solid #0B8043; }


/* ─── Weather Strip ─── */
.weather-strip {
  margin: 0 var(--space-4) var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, #E8F4FF 0%, #F0F8FF 100%);
  border: 1px solid #B8D9F5;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.weather-strip-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.weather-icon { font-size: 18px; line-height: 1; }

.weather-condition {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: #1A6AAE;
}

.weather-temp {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

.weather-uv {
  font-size: 10px;
  font-weight: var(--weight-bold);
  padding: 2px 6px;
  border-radius: var(--radius-full);
}
.weather-uv--high { background: #FFE4CC; color: #B45309; }
.weather-uv--mid  { background: #FEF9C3; color: #854D0E; }

.weather-humidity {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.weather-clothing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.weather-clothing-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.weather-clothing-item {
  font-size: var(--text-xs);
  background: rgba(26,106,174,0.1);
  color: #1A6AAE;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.weather-note {
  font-size: var(--text-xs);
  color: #B45309;
  background: #FFF7ED;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 2px solid #FB923C;
}


/* ─── Activity menu button & popup ─── */
.act-menu-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  z-index: 2;
}
.act-menu-btn:hover {
  background: var(--color-bg-secondary, #f0f3fa);
  color: var(--color-text-primary);
}

.act-menu-popup {
  position: fixed;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  z-index: 9000;
  min-width: 140px;
  overflow: hidden;
}

.act-menu-item {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.12s;
}
.act-menu-item:hover { background: var(--color-bg-secondary, #f5f5f5); }