/* CityHop styles — small additions on top of Bootstrap. Change colours here. */
:root {
  --brand: #e4572e;        /* warm coral */
  --brand-dark: #c4431d;
  --cream: #fffaf5;
  --tip: #fff3cd;          /* background of the host's personal tips */
}

body {
  font-family: "Nunito", system-ui, sans-serif;
  background: var(--cream);
}

.text-brand { color: var(--brand); }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover, .btn-brand:focus { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-outline-brand { border-color: var(--brand); color: var(--brand); }
.btn-outline-brand:hover { background: var(--brand); color: #fff; }

.hero {
  background: linear-gradient(135deg, #ffe0d1 0%, #fff3cd 100%);
  border-radius: 1.5rem;
}

.section-title { font-weight: 800; margin: 2rem 0 1rem; }

/* ---------- Map ---------- */
.map { height: 420px; width: 100%; }
.map-pin {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35); cursor: pointer;
}

/* ---------- Suggestion cards ---------- */
.suggestion-card { border: 0; border-radius: 1rem; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.suggestion-card:target, .suggestion-col:target .suggestion-card { outline: 3px solid var(--brand); }

.photo-wrap { position: relative; background: #f1ece6; }
.photo-wrap img { width: 100%; height: 190px; object-fit: cover; display: block; }
.photo-credit {
  position: absolute; bottom: 0; right: 0; font-size: .7rem; color: #fff;
  background: rgba(0,0,0,.45); padding: 1px 6px; border-top-left-radius: .4rem;
}
/* Empty image area when there is no real photo (never a random picture). */
.photo-empty {
  height: 70px; display: flex; align-items: center; justify-content: center;
  gap: .5rem; color: #a39a90; font-size: .85rem;
}
.photo-wrap.has-photo .photo-empty { display: none; }
.photo-wrap:not(.has-photo) img, .photo-wrap:not(.has-photo) .photo-credit { display: none; }

.suggestion-card:has(.photo-wrap:not(.has-photo)) .description { font-size: 1.05rem; }
[data-bs-theme="light"] .suggestion-card:has(.photo-wrap:not(.has-photo)) .description { color: #333 !important; }
.suggestion-card:has(.photo-wrap:not(.has-photo)) .host-tip { font-size: 1.1rem; }

.host-tip {
  background: var(--tip); border-radius: .75rem; padding: .6rem .8rem; margin-bottom: .6rem;
}
.guest-tip { background: #e7f5ff; border-radius: .75rem; padding: .5rem .8rem; margin-bottom: .6rem; }

.like-btn { border-radius: 2rem; }

/* ---------- Plans ---------- */
.plan-card { border: 0; border-radius: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.timeline { list-style: none; padding-left: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 1rem 4.2rem; }
.timeline li::before {
  content: ""; position: absolute; left: 3.15rem; top: .4rem; bottom: -.2rem;
  border-left: 2px dashed #e6d5c8;
}
.timeline li:last-child::before { display: none; }
.timeline .time {
  position: absolute; left: 0; top: 0; width: 2.8rem;
  font-weight: 800; color: var(--brand); font-size: .9rem;
}
.timeline .dot {
  position: absolute; left: 2.75rem; top: .15rem; font-size: .9rem;
}

.favourite-badge { background: #fff; border-radius: 2rem; padding: .3rem .8rem; box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* ---------- Dark Theme Overrides & Enhancements ---------- */
[data-bs-theme="dark"] {
  --cream: #121418;
  --tip: rgba(255, 193, 7, 0.12);
}

[data-bs-theme="dark"] body {
  background: var(--cream);
  color: #e5e7eb;
}

/* Hero Section */
[data-bs-theme="dark"] .hero {
  background: linear-gradient(135deg, rgba(228, 87, 46, 0.22) 0%, rgba(30, 34, 42, 0.95) 60%, rgba(255, 193, 7, 0.10) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Suggestion & Plan Cards */
[data-bs-theme="dark"] .suggestion-card,
[data-bs-theme="dark"] .plan-card {
  background-color: #1a1d24;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* Photo placeholder for suggestions without photos */
[data-bs-theme="dark"] .photo-wrap {
  background: #232730;
}

[data-bs-theme="dark"] .photo-empty {
  color: #9ca3af;
}

/* Banner image container */
[data-bs-theme="dark"] .banner-image-wrap {
  background-color: #1a1d24 !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tips */
[data-bs-theme="dark"] .host-tip {
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.25);
  color: #fef08a;
}
[data-bs-theme="dark"] .host-tip strong {
  color: #fde047;
}

[data-bs-theme="dark"] .guest-tip {
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.25);
  color: #bae6fd;
}
[data-bs-theme="dark"] .guest-tip strong {
  color: #7dd3fc;
}

/* Favourites badge */
[data-bs-theme="dark"] .favourite-badge {
  background: #232730;
  color: #f3f4f6;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Timeline */
[data-bs-theme="dark"] .timeline li::before {
  border-left-color: rgba(255, 255, 255, 0.15);
}

/* Map styling & InfoWindow */
.map {
  background-color: #f1ece6;
  transition: border-color 0.2s ease;
}
[data-bs-theme="dark"] .map {
  background-color: #1a1d24;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .map-info-box {
  color: #f3f4f6;
}
[data-bs-theme="dark"] .map-info-box .text-muted {
  color: #9ca3af !important;
}
[data-bs-theme="dark"] .alert-light {
  background-color: #1a1d24;
  border-color: rgba(255, 255, 255, 0.1);
  color: #d1d5db;
}

/* Preset banner picker active card */
.preset-banner-active {
  background-color: #fff3ed !important;
  border-color: var(--brand) !important;
}
[data-bs-theme="dark"] .preset-banner-active {
  background-color: rgba(228, 87, 46, 0.18) !important;
  border-color: var(--brand) !important;
}

/* Theme toggle button styling */
.theme-toggle-btn {
  border-radius: 2rem;
  padding: 0.35rem 0.65rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle-btn:hover {
  transform: scale(1.05);
}

/* Dark mode button contrast refinements */
[data-bs-theme="dark"] .btn-outline-dark {
  color: #f3f4f6;
  border-color: rgba(255, 255, 255, 0.25);
}
[data-bs-theme="dark"] .btn-outline-dark:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
[data-bs-theme="dark"] .btn-light {
  background-color: #2b303a;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e5e7eb;
}
[data-bs-theme="dark"] .btn-light:hover {
  background-color: #373e4b;
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}