/* ============================================================
   iEXPLORE LAGUNA — Main Stylesheet (Polished v2)
   Aesthetic: Warm tropical editorial — earthy reds, warm
   sand tones, clean typography. Philippine travel magazine feel.
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --maroon-dark:   #B0281C;
  --maroon-mid:    #D9481F;
  --maroon-light:  #FF7A45;
  --maroon-pale:   #FFE3D2;
  --sand:         #f5ebe0;
  --sand-dark:    #e9c46a;
  --terracotta:   #c77c48;
  --cream:        #fdf6ec;
  --white:        #ffffff;
  --charcoal:     #1c1c1e;
  --text-muted:   #6b7280;
  --border:       #e5e0d8;

  --section-pad: 5rem 0;

  --shadow-sm:  0 2px 8px rgba(0,0,0,.07);
  --shadow-md:  0 6px 24px rgba(0,0,0,.10);
  --shadow-lg:  0 12px 48px rgba(0,0,0,.14);
  --shadow-glow: 0 0 0 4px rgba(82,183,136,.18);

  --radius:     14px;
  --radius-sm:  9px;
  --radius-pill:50px;

  --transition: .22s cubic-bezier(.4,0,.2,1);
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background-color: var(--cream);
  color: var(--charcoal);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .display-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  line-height: 1.2;
}

a { color: var(--maroon-mid); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--maroon-light); }

img { max-width: 100%; height: auto; display: block; }

/* ── Page entry animation ──────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.fade-up {
  animation: fadeUp .5s var(--transition) both;
}
.fade-up-1 { animation-delay: .05s; }
.fade-up-2 { animation-delay: .12s; }
.fade-up-3 { animation-delay: .19s; }
.fade-up-4 { animation-delay: .26s; }
.fade-up-5 { animation-delay: .33s; }
.fade-up-6 { animation-delay: .40s; }

/* ── Navbar ────────────────────────────────────────────────── */
#main-nav {
  background: linear-gradient(135deg, var(--maroon-dark) 0%, var(--maroon-mid) 100%);
  padding: .7rem 0;
  box-shadow: 0 2px 16px rgba(0,0,0,.22);
  transition: box-shadow .3s, padding .3s;
  position: sticky;
  top: 0;
  z-index: 1030;
}

#main-nav.scrolled {
  padding: .5rem 0;
  box-shadow: 0 4px 28px rgba(0,0,0,.30);
}

.brand-icon { font-size: 1.4rem; }
.brand-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
}
.brand-logo-sm {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 7px;
}

.brand-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.22rem;
  color: #fff;
  letter-spacing: .02em;
}
.brand-accent { color: var(--sand-dark); }
.brand-text .brand-i { font-style: italic; color: var(--sand-dark); }

#main-nav .nav-link {
  color: rgba(255,255,255,.82);
  font-size: .9rem;
  font-weight: 500;
  padding: .4rem .85rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  position: relative;
}
#main-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 50%; right: 50%;
  height: 2px;
  background: var(--sand-dark);
  border-radius: 2px;
  transition: left var(--transition), right var(--transition);
}
#main-nav .nav-link:hover::after,
#main-nav .nav-link.active::after {
  left: 10px; right: 10px;
}
#main-nav .nav-link:hover,
#main-nav .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.13);
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-accent {
  background: linear-gradient(135deg, var(--sand-dark), #f4c842);
  color: var(--maroon-dark);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-pill);
  transition: all var(--transition);
  box-shadow: 0 2px 10px rgba(233,196,106,.35);
}
.btn-accent:hover {
  background: linear-gradient(135deg, #f4c842, var(--sand-dark));
  color: var(--maroon-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(233,196,106,.45);
}

.btn-primary-app {
  background: linear-gradient(135deg, var(--maroon-mid), var(--maroon-dark));
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: .65rem 1.9rem;
  font-weight: 600;
  transition: all var(--transition);
  box-shadow: 0 2px 10px rgba(45,106,79,.25);
}
.btn-primary-app:hover {
  background: linear-gradient(135deg, var(--maroon-dark), #3d0a0d);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45,106,79,.35);
  color: #fff;
}
.btn-primary-app:active { transform: translateY(0); }

.btn-outline-app {
  border: 2px solid var(--maroon-mid);
  color: var(--maroon-mid);
  border-radius: var(--radius-pill);
  padding: .6rem 1.6rem;
  font-weight: 600;
  background: transparent;
  transition: all var(--transition);
}
.btn-outline-app:hover {
  background: var(--maroon-mid);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(45,106,79,.25);
}

/* ── Section titles ────────────────────────────────────────── */
.section-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--maroon-light);
  margin-bottom: .5rem;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--charcoal);
  margin-bottom: .75rem;
}
.section-subtitle {
  color: var(--text-muted);
  font-size: 1rem;
  max-width: 600px;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card-app {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card-app:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(82,183,136,.4);
}

.card-img-placeholder {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, var(--maroon-pale) 0%, var(--sand) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  position: relative;
  overflow: hidden;
}
.card-img-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(26,58,42,.08));
}
.card-img-placeholder i { color: var(--maroon-mid); opacity: .5; }

.card-body-app { padding: 1.3rem; }
.card-title-app {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .4rem;
  color: var(--charcoal);
}
.card-meta {
  font-size: .82rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Category badge */
.badge-category {
  display: inline-block;
  padding: .25rem .8rem;
  border-radius: var(--radius-pill);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.badge-nature      { background: var(--maroon-pale); color: var(--maroon-dark); }
.badge-heritage    { background: #fef3c7; color: #92400e; }
.badge-waterfall   { background: #dbeafe; color: #1e40af; }
.badge-hotspring   { background: #ffe4e6; color: #9f1239; }
.badge-museum      { background: #f3e8ff; color: #6b21a8; }
.badge-religious   { background: #fff7ed; color: #9a3412; }
.badge-beach_lake  { background: #e0f2fe; color: #075985; }
.badge-adventure   { background: #fef9c3; color: #713f12; }
.badge-food        { background: #fce7f3; color: #9d174d; }

.star-rating { color: var(--sand-dark); font-size: .9rem; }

/* ── Map container ─────────────────────────────────────────── */
#trip-map, .leaflet-map {
  width: 100%;
  height: 530px;
  min-height: 530px;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 1;
}

.leaflet-popup-content-wrapper {
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  font-family: 'DM Sans', sans-serif;
  border: 1px solid var(--border) !important;
}
.leaflet-popup-tip { background: white !important; }
.popup-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--maroon-dark);
  margin-bottom: .25rem;
}
.popup-meta { font-size: .82rem; color: var(--text-muted); }
.popup-fee  { font-weight: 700; color: var(--terracotta); margin-top: .25rem; }

/* ── Forms ─────────────────────────────────────────────────── */
.form-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}
.form-label {
  font-weight: 600;
  font-size: .875rem;
  color: var(--charcoal);
  margin-bottom: .35rem;
  display: block;
}
.form-control, .form-select {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  padding: .62rem 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  background: var(--white);
  color: var(--charcoal);
}
.form-control:focus, .form-select:focus {
  border-color: var(--maroon-light);
  box-shadow: var(--shadow-glow);
  outline: none;
}
.form-control::placeholder { color: #bbb; }

/* Input group icon */
.input-icon-wrap {
  position: relative;
}
.input-icon-wrap .bi {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: .95rem;
}
.input-icon-wrap .form-control,
.input-icon-wrap .form-select {
  padding-left: 2.5rem;
}

/* ── Budget summary panel ──────────────────────────────────── */
.budget-panel {
  background: linear-gradient(145deg, var(--maroon-dark), #3d0a0d);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.budget-panel::before {
  content: '₱';
  position: absolute;
  right: -10px;
  bottom: -20px;
  font-size: 9rem;
  font-family: 'Playfair Display', serif;
  opacity: .05;
  pointer-events: none;
  line-height: 1;
}
.budget-panel .total-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .65;
}
.budget-panel .total-amount {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--sand-dark);
  letter-spacing: -.01em;
}
.budget-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: .88rem;
}
.budget-row:last-child { border-bottom: none; }
.budget-row .label {
  opacity: .78;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.budget-row .amount { font-weight: 700; color: var(--sand-dark); white-space: nowrap; }

/* ── Itinerary timeline ────────────────────────────────────── */
.itinerary-day {
  position: relative;
  padding-left: 3rem;
  margin-bottom: 2.25rem;
}
.itinerary-day::before {
  content: '';
  position: absolute;
  left: 1.07rem;
  top: 2.4rem;
  bottom: -2.25rem;
  width: 2px;
  background: linear-gradient(180deg, var(--maroon-pale), transparent);
}
.itinerary-day:last-child::before { display: none; }
.day-dot {
  position: absolute;
  left: 0;
  top: .2rem;
  width: 2.15rem;
  height: 2.15rem;
  background: linear-gradient(135deg, var(--maroon-mid), var(--maroon-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  box-shadow: 0 0 0 4px var(--maroon-pale), 0 2px 8px rgba(45,106,79,.3);
}
.day-label {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--maroon-dark);
  margin-bottom: .9rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.day-stop-count {
  font-family: 'Poppins', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  color: var(--maroon-dark);
  background: var(--maroon-pale);
  padding: .2rem .65rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.itinerary-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  margin-bottom: .65rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.itinerary-item:hover {
  border-color: var(--maroon-light);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}
.item-time {
  font-size: .82rem;
  font-weight: 700;
  color: var(--maroon-light);
  min-width: 68px;
  padding-top: .1rem;
  white-space: nowrap;
}
.item-name { font-weight: 600; font-size: 1.05rem; }
.item-desc { font-size: .88rem; color: var(--text-muted); margin-top: .2rem; line-height: 1.45; }

/* ── Route info ────────────────────────────────────────────── */
.route-bar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  box-shadow: var(--shadow-sm);
}
.route-stat { display: flex; align-items: center; gap: .55rem; }
.route-stat i { color: var(--maroon-light); font-size: 1.15rem; }
.route-stat .val { font-weight: 700; font-size: 1rem; }
.route-stat .lbl { font-size: .76rem; color: var(--text-muted); }

/* ── Transport option card ─────────────────────────────────── */
.transport-option {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .75rem .9rem;
  margin-bottom: .6rem;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  background: #fff;
}
.transport-option:hover {
  border-color: var(--maroon-light);
  box-shadow: var(--shadow-sm);
}
.transport-option.selected {
  border-color: var(--maroon-mid);
  background: var(--maroon-pale);
  box-shadow: 0 0 0 3px rgba(82,183,136,.12);
}

/* ── Stats strip ───────────────────────────────────────────── */
.stat-strip {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem;
  position: relative;
}
.stat-item + .stat-item::before {
  content: '';
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 1px;
  background: var(--border);
}
.stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--maroon-mid);
  line-height: 1;
  margin-bottom: .2rem;
}
.stat-lbl { font-size: .8rem; color: var(--text-muted); text-align: center; }
.stat-item-icon {
  font-size: 1.3rem;
  color: var(--sand-dark);
  margin-bottom: .5rem;
}

/* ── How it works steps ────────────────────────────────────── */
.step-row {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  position: relative;
  padding-bottom: 2.5rem;
}
.step-row:last-child { padding-bottom: 0; }
.step-row-line {
  position: absolute;
  left: 1.6rem;
  top: 3.4rem;
  bottom: .5rem;
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--border) 0 4px, transparent 4px 9px);
}
.step-row:last-child .step-row-line { display: none; }
.step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border: 1.5px solid var(--maroon-mid);
  color: var(--maroon-mid);
  border-radius: 50%;
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  background: var(--cream);
  position: relative;
  z-index: 1;
}
.step-row-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: .35rem;
}

/* ── Hero section ──────────────────────────────────────────── */
.hero-section {
  position: relative;
  overflow: hidden;
  padding: 6.5rem 0 6rem;
  color: #fff;
  isolation: isolate;
}
.hero-section .hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  z-index: -2;
}
.hero-section::before {
  /* Directional scrim for legibility — tinted maroon, not a flat
     brand-color block sitting on top of the photo like a filter. */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(46,7,9,.94) 0%, rgba(46,7,9,.82) 32%, rgba(107,15,20,.55) 62%, rgba(107,15,20,.28) 100%);
  z-index: -1;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sand-dark);
}
.hero-eyebrow::before {
  content: '';
  width: 26px; height: 1.5px;
  background: var(--sand-dark);
  display: inline-block;
}
.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 700;
  line-height: 1.08;
  margin-bottom: 1.3rem;
  letter-spacing: -.01em;
}
.hero-title em { color: var(--sand-dark); font-style: normal; }
.hero-subtitle {
  font-size: 1.08rem;
  opacity: .88;
  max-width: 480px;
  margin-bottom: 2rem;
  line-height: 1.7;
}

/* Search bar that bridges the hero into the next section — Klook/Airbnb
   pattern: an overlapping card, not a boxed form sitting beside the copy. */
.hero-search-bar {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.1rem 1.25rem;
  margin-top: -3.75rem;
  position: relative;
  z-index: 5;
}
.hero-search-bar .field-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .2rem;
  display: block;
}
.hero-search-bar select,
.hero-search-bar .form-select {
  border: none;
  padding-left: 0;
  padding-right: 1.4rem;
  font-weight: 600;
  color: var(--charcoal);
  background-position: right center;
  background-size: 14px 11px;
  appearance: none;
  -webkit-appearance: none;
}
.hero-search-bar select:focus, .hero-search-bar .form-select:focus { box-shadow: none; }
@media (min-width: 992px) {
  .hero-search-field { border-left: 1px solid var(--border); padding-left: 1.5rem; }
}
/* Hover highlight on the whole field — the field having NO border/box
   at rest (for a clean look) meant nothing signaled it was clickable.
   A highlight on hover/focus-within is the fix real search bars use
   (Airbnb, Booking.com) instead of a permanent border. */
.hero-search-bar #quick-plan-form > .col-6 {
  border-radius: var(--radius-sm);
  padding-top: .5rem;
  padding-bottom: .5rem;
  padding-right: .75rem;
  margin: -.5rem 0;
  transition: background-color var(--transition);
}
.hero-search-bar #quick-plan-form > .col-6:hover,
.hero-search-bar #quick-plan-form > .col-6:focus-within {
  background-color: var(--sand);
}
.hero-search-bar #quick-plan-form > .col-6.field-error {
  background-color: #fdeaea;
  animation: field-error-shake .4s;
}
.hero-search-bar #quick-plan-form > .col-6.field-error .field-label {
  color: #c0392b;
}
@keyframes field-error-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.hero-search-bar .col-6:hover .field-label,
.hero-search-bar .col-lg-2:hover .field-label,
.hero-search-bar .col-lg-3:hover .field-label { color: var(--maroon-mid); }
.hero-search-bar select.form-select {
  cursor: pointer;
  transition: color var(--transition);
}
@media (min-width: 992px) {
  .hero-search-bar #quick-plan-form > .col-lg-1 {
    display: flex;
    align-items: flex-end;
  }
  .hero-search-bar .hero-search-submit {
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 0 !important;
    width: 3rem !important;
    height: 3rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-left: auto;
  }
}

/* Legacy floating card (still used by other sections) */
.hero-form-card {
  background: rgba(255,255,255,.97);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.6);
}

/* ── CTA section ───────────────────────────────────────────── */
.cta-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-section .cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(46,7,9,.88) 0%, rgba(107,15,20,.86) 100%);
  z-index: -1;
}

/* ── Utility ───────────────────────────────────────────────── */
.text-maroon   { color: var(--maroon-mid) !important; }
.text-sand    { color: var(--sand-dark) !important; }
.bg-cream     { background-color: var(--cream) !important; }
.bg-green-pale{ background-color: var(--maroon-pale) !important; }

.divider-fancy {
  border: none;
  height: 3px;
  width: 60px;
  background: linear-gradient(90deg, var(--maroon-light), var(--sand-dark));
  border-radius: 3px;
  margin: 0 0 1.5rem;
}

/* Loading spinner */
.spinner-app {
  display: inline-block;
  width: 1.8rem;
  height: 1.8rem;
  border: 3px solid var(--maroon-pale);
  border-top-color: var(--maroon-mid);
  border-radius: 50%;
  animation: spin .65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── Toast ─────────────────────────────────────────────────── */
#toast-wrapper {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}
.toast-item {
  background: #fff;
  border: 1px solid #e5e0d8;
  border-radius: 10px;
  padding: .8rem 1.1rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.14);
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 240px;
  max-width: 360px;
  font-size: .9rem;
  pointer-events: auto;
  animation: toastIn .28s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes toastIn {
  from { transform: translateX(110%) scale(.9); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ── Footer ────────────────────────────────────────────────── */
.site-footer {
  background: var(--maroon-dark);
  color: rgba(255,255,255,.72);
  margin-top: auto;
}
.footer-heading {
  color: var(--sand-dark);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .45rem; }
.footer-links a {
  color: rgba(255,255,255,.62);
  font-size: .88rem;
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--sand-dark); }
.footer-divider { border-color: rgba(255,255,255,.1); margin: 1.5rem 0 1rem; }
.footer-link { color: rgba(255,255,255,.62); }
.footer-link:hover { color: var(--sand-dark); }
.brand-icon-sm { color: var(--sand-dark); font-size: 1.1rem; }

/* ── Alert flash ───────────────────────────────────────────── */
.alert { border-radius: var(--radius-sm); border: none; box-shadow: var(--shadow-sm); }

/* ── Map legend ────────────────────────────────────────────── */
.map-legend {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .6rem .9rem;
  font-size: .72rem;
  z-index: 999;
  box-shadow: var(--shadow-sm);
  line-height: 1.6;
}
.legend-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.legend-line {
  display: inline-block;
  width: 18px; height: 3px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}

/* ── Spots filter bar ──────────────────────────────────────── */
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .85rem;
  border-radius: var(--radius-pill);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--charcoal);
  transition: all var(--transition);
  white-space: nowrap;
  user-select: none;
}
.filter-pill:hover {
  border-color: var(--maroon-light);
  color: var(--maroon-dark);
}
.filter-pill.active {
  background: var(--maroon-mid);
  border-color: var(--maroon-mid);
  color: #fff;
}

/* ── Spot list item ────────────────────────────────────────── */
.spot-list-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.spot-list-item:hover {
  border-color: var(--maroon-light);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}
.spot-emoji-box {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--maroon-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--maroon-mid);
  flex-shrink: 0;
}

/* ── Page header strip ─────────────────────────────────────── */
.page-header {
  background: linear-gradient(135deg, var(--maroon-dark), var(--maroon-mid));
  color: #fff;
  padding: 1.75rem 0;
}
.page-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  margin: 0;
}
.page-header p { margin: 0; opacity: .75; font-size: .9rem; }

/* ── Hotel card price badge ────────────────────────────────── */
.price-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--maroon-mid), var(--maroon-dark));
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  padding: .3rem .8rem;
  border-radius: var(--radius-pill);
}

/* ── Scroll to top button ──────────────────────────────────── */
#scroll-top {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  width: 2.6rem;
  height: 2.6rem;
  background: var(--maroon-mid);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all var(--transition);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  z-index: 900;
}
#scroll-top.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
#scroll-top:hover {
  background: var(--maroon-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 991px) {
  #trip-map, .leaflet-map { height: 380px; min-height: 380px; }
}
@media (max-width: 767px) {
  #trip-map, .leaflet-map { height: 300px; min-height: 300px; }
  .form-panel { padding: 1.3rem; }
  .budget-panel { padding: 1.3rem; }
  .hero-section { padding: 3.5rem 0 5.5rem; }
  .hero-search-bar { margin-top: 1.75rem; }
}

/* ── Leaflet routing panel hidden ──────────────────────────── */
.leaflet-routing-container { display: none !important; }

/* ============================================================
   iEXPLORE LAGUNA — Enhancement v3 Additions
   Pagination · Toolbar · View toggle · Compact cards
   ============================================================ */

/* ── Sticky toolbar ──────────────────────────────────────── */
.spots-toolbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  z-index: 100;
}
.spots-toolbar .filter-pill {
  padding: .28rem .78rem;
  font-size: .78rem;
}

/* ── Pagination ──────────────────────────────────────────── */
.pagination-app {
  gap: .2rem;
}
.pagination-app .page-link {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm) !important;
  color: var(--maroon-mid);
  background: #fff;
  padding: .42rem .82rem;
  font-size: .88rem;
  font-weight: 500;
  transition: all var(--transition);
  line-height: 1.4;
}
.pagination-app .page-link:hover {
  background: var(--maroon-pale);
  border-color: var(--maroon-light);
  color: var(--maroon-dark);
}
.pagination-app .page-item.active .page-link {
  background: linear-gradient(135deg, var(--maroon-mid), var(--maroon-dark));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(45,106,79,.28);
}
.pagination-app .page-item.disabled .page-link {
  color: #bbb;
  background: #f9f9f9;
  border-color: var(--border);
  pointer-events: none;
}

/* ── View toggle active state ────────────────────────────── */
.btn-group .btn-outline-secondary.active {
  background: var(--maroon-mid);
  border-color: var(--maroon-mid);
  color: #fff;
}
.btn-group .btn-outline-secondary:hover:not(.active) {
  background: var(--maroon-pale);
  border-color: var(--maroon-light);
  color: var(--maroon-dark);
}

/* ── Compact card image ──────────────────────────────────── */
.card-app .card-img-placeholder {
  height: 150px;
  font-size: 2.5rem;
}

/* ── Results summary box ─────────────────────────────────── */
.results-summary {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
  font-size: .83rem;
}

/* ── List view spot item (tighter) ──────────────────────── */
.spot-list-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.spot-list-item:hover {
  border-color: var(--maroon-light);
  background: var(--maroon-pale);
  box-shadow: var(--shadow-sm);
}

/* ── Toolbar sort select ─────────────────────────────────── */
.spots-toolbar .form-select {
  border-color: var(--border);
  border-radius: var(--radius-sm);
  font-size: .8rem;
  padding: .28rem .75rem;
  height: auto;
}
.spots-toolbar .form-select:focus {
  border-color: var(--maroon-light);
  box-shadow: 0 0 0 3px rgba(82,183,136,.15);
}

/* ── Homepage featured spots — tighter cards ─────────────── */
.hero-section .card-app,
section .card-app {
  transition: transform var(--transition), box-shadow var(--transition);
}
section .card-app:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* ── Per-page selector ───────────────────────────────────── */
.per-page-select {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--text-muted);
}
.per-page-select select {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .2rem .5rem;
  font-size: .8rem;
  color: var(--charcoal);
  background: #fff;
}

/* ── Amenity tags compact ────────────────────────────────── */
.amenity-tag {
  font-size: .68rem;
  background: var(--maroon-pale);
  color: var(--maroon-dark);
  padding: .15rem .5rem;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── Mobile toolbar scroll ───────────────────────────────── */
@media (max-width: 767px) {
  /* Only the outer row scrolls — NOT every nested flex group inside it.
     (Using a bare .d-flex selector here previously matched every nested
     group too — tabs, categories, city+search — turning each into its
     own tiny independent scroll box that clipped its own content, e.g.
     the "Spots" tab getting squeezed down to just its icon.) */
  .spots-toolbar .toolbar-scroll-row {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .spots-toolbar .toolbar-scroll-row::-webkit-scrollbar { display: none; }
  /* Direct children (tabs group / category group / sort+view group /
     city+search group — naming differs per page) must not wrap or
     shrink internally; they should all sit in one continuous line
     that the outer row scrolls as a single unit. */
  .spots-toolbar .toolbar-scroll-row > * {
    flex-wrap: nowrap !important;
    flex-shrink: 0;
  }
  .spots-toolbar .filter-pill { flex-shrink: 0; }
  .spots-toolbar .ms-auto { margin-left: 0 !important; }
  .pagination-app .page-link { padding: .38rem .65rem; font-size: .82rem; }
}

/* ── Scroll-to-top (moved to avoid overlap with pagination) ── */
#scroll-top { bottom: 4.5rem; }

/* ── Auth pages (login/register) — split screen ─────────────
   Real photo + editorial copy on one side, clean form on the
   other. Replaces the old centered-card-on-gradient pattern that
   every SaaS starter template uses. */
.auth-split {
  min-height: calc(100vh - 56px);
  display: flex;
}
.auth-split-photo {
  flex: 1 1 46%;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.auth-split-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
}
.auth-split-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(190deg, rgba(46,7,9,.55) 0%, rgba(46,7,9,.88) 100%);
  z-index: -1;
}
.auth-split-content {
  padding: 3rem 3.25rem;
  max-width: 480px;
}
.auth-wordmark {
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 2.5rem;
}
.auth-wordmark em { font-style: italic; color: var(--sand-dark); }
.auth-wordmark span { color: var(--sand-dark); margin-left: .3rem; }
.auth-split-content h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1rem;
}
.auth-split-content p {
  opacity: .85;
  line-height: 1.7;
  font-size: .98rem;
}
.auth-split-form {
  flex: 1 1 54%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background: var(--cream);
}
.auth-form-inner { width: 100%; max-width: 400px; }
.auth-heading {
  font-family: 'Playfair Display', serif;
  color: var(--maroon-dark);
  font-size: 1.7rem;
  margin-bottom: .3rem;
}
.auth-subheading {
  color: var(--text-muted);
  font-size: .92rem;
  margin-bottom: 1.75rem;
}

@media (max-width: 991px) {
  .auth-split { flex-direction: column; }
  .auth-split-reverse .auth-split-photo { order: -1; }
  .auth-split-photo { flex: 0 0 auto; min-height: 260px; align-items: center; text-align: center; }
  .auth-split-content { padding: 2rem 1.5rem; max-width: none; }
  .auth-split-content h2 { font-size: 1.5rem; }
  .auth-split-form { padding: 2.5rem 1.5rem; }
}

/* Wider form column for the owner-registration pages — step 2 has
   denser 2-column rows (city+category, phone+email, hours) that feel
   cramped at the standard 400px form width. */
.auth-split-wide .auth-split-photo { flex: 1 1 38%; }
.auth-split-wide .auth-split-form  { flex: 1 1 62%; }
.auth-split-wide .auth-form-inner  { max-width: 460px; }


/* iExplore Laguna Analytics - restrained site-consistent layout */
.analytics-page {
    --analytics-border: rgba(107, 15, 20, .12);
    --analytics-muted: #6f6f6f;
    --analytics-bg: #fff;
    --analytics-soft: #faf7f7;
}

.analytics-page .analytics-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:24px;
    padding-bottom:16px;
    border-bottom:1px solid var(--analytics-border);
}

.analytics-page .analytics-toolbar h1 {
    margin:0;
    font-size:28px;
    font-weight:700;
}

.analytics-page .analytics-toolbar p {
    margin:4px 0 0;
    color:var(--analytics-muted);
    font-size:14px;
}

.analytics-page .analytics-filter {
    display:flex;
    align-items:center;
    gap:8px;
}

.analytics-page .analytics-filter select {
    min-width:160px;
}

.analytics-page .analytics-kpis {
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:14px;
    margin-bottom:20px;
}

.analytics-page .analytics-kpi {
    background:var(--analytics-bg);
    border:1px solid var(--analytics-border);
    border-radius:6px;
    padding:16px 18px;
}

.analytics-page .analytics-kpi-label {
    color:var(--analytics-muted);
    font-size:13px;
    margin-bottom:7px;
}

.analytics-page .analytics-kpi-value {
    font-size:25px;
    line-height:1.15;
    font-weight:700;
}

.analytics-page .analytics-kpi-change {
    margin-top:7px;
    font-size:12px;
}

.analytics-page .analytics-kpi-change.up { color:#2f7d32; }
.analytics-page .analytics-kpi-change.down { color:#a33a3a; }

.analytics-page .analytics-grid {
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(280px,.8fr);
    gap:18px;
    margin-bottom:18px;
}

.analytics-page .analytics-panel {
    background:#fff;
    border:1px solid var(--analytics-border);
    border-radius:6px;
    overflow:hidden;
}

.analytics-page .analytics-panel-header {
    padding:14px 16px;
    border-bottom:1px solid var(--analytics-border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.analytics-page .analytics-panel-header h2 {
    margin:0;
    font-size:16px;
    font-weight:700;
}

.analytics-page .analytics-panel-header small {
    color:var(--analytics-muted);
}

.analytics-page .analytics-panel-body {
    padding:16px;
}

.analytics-page .analytics-simple-list {
    list-style:none;
    padding:0;
    margin:0;
}

.analytics-page .analytics-simple-list li {
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:11px 0;
    border-bottom:1px solid rgba(0,0,0,.06);
}

.analytics-page .analytics-simple-list li:last-child {
    border-bottom:0;
}

.analytics-page .analytics-rank {
    display:inline-flex;
    width:24px;
    height:24px;
    align-items:center;
    justify-content:center;
    margin-right:8px;
    border:1px solid var(--analytics-border);
    border-radius:4px;
    font-size:12px;
    font-weight:700;
}

.analytics-page .analytics-table {
    width:100%;
    border-collapse:collapse;
}

.analytics-page .analytics-table th {
    text-align:left;
    font-size:12px;
    color:var(--analytics-muted);
    font-weight:600;
    padding:9px 10px;
    border-bottom:1px solid var(--analytics-border);
}

.analytics-page .analytics-table td {
    padding:10px;
    border-bottom:1px solid rgba(0,0,0,.06);
    font-size:13px;
}

.analytics-page .analytics-table tr:last-child td {
    border-bottom:0;
}

.analytics-page .analytics-empty {
    padding:22px 8px;
    color:var(--analytics-muted);
    text-align:center;
    font-size:13px;
}

@media (max-width: 1000px) {
    .analytics-page .analytics-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .analytics-page .analytics-grid { grid-template-columns:1fr; }
}

@media (max-width: 620px) {
    .analytics-page .analytics-toolbar { align-items:flex-start; flex-direction:column; }
    .analytics-page .analytics-kpis { grid-template-columns:1fr; }
}


/* Compact analytics tables: prevent empty vertical space when there are few rows */
.analytics-page .analytics-compact-panel .analytics-panel-body {
    padding: 0;
}

.analytics-page .analytics-compact-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.analytics-page .analytics-compact-table th,
.analytics-page .analytics-compact-table td {
    padding: 9px 12px;
    line-height: 1.25;
    vertical-align: middle;
}

.analytics-page .analytics-compact-table th {
    background: var(--analytics-soft);
}

.analytics-page .analytics-compact-table td {
    height: auto;
}

.analytics-page .analytics-compact-table tr:last-child td {
    border-bottom: 0;
}

.analytics-page .analytics-compact-panel .analytics-empty {
    padding: 16px;
}

/* Let the panel height follow its actual content instead of stretching. */
.analytics-page .analytics-grid {
    align-items: start;
}

.analytics-page .analytics-panel {
    height: fit-content;
    align-self: start;
}
/* Trip planner — live traffic control */
/* (Legend styling lives in .traffic-map-legend below — this is the
   floating "Traffic" toggle button itself, positioned as a map control.) */
.planner-traffic-control {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1000;
}

.planner-traffic-btn {
  background: rgba(255,255,255,.96);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  font-size: .8rem;
}

.planner-traffic-btn.active {
  background: var(--maroon-dark);
  border-color: var(--maroon-dark);
  color: #fff;
}

/* ── Live traffic legend ──────────────────────────────────────
   Added for the Route Guide TomTom traffic layer.
   Kept separate from the existing .map-legend styles.
   ──────────────────────────────────────────────────────────── */
#trip-map {
  position: relative;
}

.traffic-map-legend {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1000;
  min-width: 132px;
  padding: .55rem .75rem;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: .72rem;
  line-height: 1.45;
}

.traffic-map-legend[hidden] {
  display: none !important;
}

.traffic-map-legend-title {
  margin-bottom: .3rem;
  color: var(--charcoal);
  font-weight: 700;
}

.traffic-map-legend-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .2rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.traffic-map-dot {
  display: inline-block;
  width: 18px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: 3px;
}

.traffic-free {
  background: #31a354;
}

.traffic-moderate {
  background: #f0a500;
}

.traffic-heavy {
  background: #d83b3b;
}

@media (max-width: 767px) {
  .traffic-map-legend {
    left: 8px;
    bottom: 8px;
    min-width: 118px;
    padding: .45rem .6rem;
    font-size: .68rem;
  }

  .traffic-map-dot {
    width: 16px;
  }
}