/* ================= COLOR PALETTE ================= */
:root {
  --primary: #0e7490;       /* ocean teal - main brand color */
  --primary-dark: #0b5a70;  /* darker teal for hover states */
  --accent: #f2a541;        /* warm sand gold - secondary accent */
  --navy: #073b4c;          /* deep navy - headers/footer */
}

/* ================= GLOBAL ================= */
body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  color: #2b2b2b;
}

a { text-decoration: none; }

/* push page content below fixed navbar */
.hero, .page-header { margin-top: 0; }
body { padding-top: 0; }
.page-header { margin-top: 76px; }

/* ================= NAVBAR ================= */
.navbar-brand { font-size: 1.4rem; color: var(--primary); }
.nav-link { font-weight: 500; color: #333 !important; }
.nav-link.active { color: var(--primary) !important; }

/* Override Bootstrap's default blue buttons with our own palette */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}
.text-primary { color: var(--primary) !important; }

/* ================= HERO ================= */
.hero {
  height: 90vh;
  min-height: 500px;
  background: linear-gradient(rgba(7,59,76,0.55), rgba(14,116,144,0.35)),
    url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1600") center/cover no-repeat;
  display: flex;
}
.hero h1 { text-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.hero .btn-primary { padding: 12px 28px; border-radius: 8px; font-weight: 600; }

/* ================= PAGE HEADER (inner pages) ================= */
.page-header {
  background: linear-gradient(120deg, var(--navy), var(--primary));
  color: #fff;
  padding: 70px 0 50px;
}

/* ================= SEARCH CARD ================= */
.search-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px;
  margin-top: -60px;
  position: relative;
  z-index: 5;
}
.input-group-text { background: #f1f5f9; border-right: none; }
.input-group .form-control { border-left: none; }

/* ================= DESTINATION CARDS ================= */
.dest-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
}
.dest-card img { width: 100%; height: 160px; object-fit: cover; }
.dest-body { padding: 16px; }
.dest-card:hover { transform: translateY(-6px); box-shadow: 0 10px 20px rgba(0,0,0,0.12); }

/* ================= MAP TEASER (homepage) ================= */
.map-teaser {
  background: linear-gradient(120deg, var(--navy), var(--primary));
}

/* ================= ACCOMMODATION PAGE ================= */
.btn-filter {
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 30px;
  padding: 6px 18px;
  font-size: 0.9rem;
  background: #fff;
  transition: all 0.2s ease;
}
.btn-filter.active, .btn-filter:hover {
  background: var(--primary);
  color: #fff;
}
.stay-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.stay-card img { width: 100%; height: 190px; object-fit: cover; }
.stay-body { padding: 18px; }
.stay-card:hover { transform: translateY(-6px); box-shadow: 0 10px 20px rgba(0,0,0,0.12); }

/* ================= THINGS TO DO PAGE ================= */
.cat-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-top: 4px solid var(--accent);
}
.cat-icon { font-size: 2rem; margin-bottom: 10px; }
.cat-link { color: var(--primary); font-weight: 600; font-size: 0.9rem; }
.cat-card:hover { transform: translateY(-6px); box-shadow: 0 10px 20px rgba(0,0,0,0.10); }

/* ================= MAP PAGE ================= */
.map-page-wrap { position: relative; }
#map { height: 75vh; width: 100%; }

.map-legend {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #fff;
  padding: 16px 18px;
  border-radius: 10px;
  z-index: 1000;
  max-width: 230px;
}
.map-legend label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 10px;
  cursor: pointer;
}

.marker-pin {
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  border: 2px solid #fff;
}
.marker-pin span { transform: rotate(45deg); font-size: 15px; }

/* ================= CONTACT PAGE ================= */
.contact-form .form-control { border-radius: 8px; }
#contact-map { height: 300px; width: 100%; }

/* ================= HERO v2 (with script accent + overlap widget) ================= */
.hero-v2 {
  height: 88vh;
  min-height: 560px;
  background: linear-gradient(rgba(7,59,76,0.45), rgba(7,59,76,0.65)),
    url("https://images.unsplash.com/photo-1494783367193-149034c05e8f?q=80&w=1600") center/cover no-repeat;
  display: flex;
}
.eyebrow {
  letter-spacing: 3px;
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.9;
  margin-bottom: 10px;
}
.hero-heading {
  font-family: "Playfair Display", serif;
  font-size: 3.2rem;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  margin-bottom: 14px;
}
.script-accent {
  font-family: "Caveat", cursive;
  font-weight: 700;
  color: var(--accent);
  font-size: 1.25em;
}
.section-title {
  font-family: "Playfair Display", serif;
  font-weight: 700;
}

/* Floating search widget */
.search-float {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  margin-top: -90px;
  position: relative;
  z-index: 5;
}
.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--navy);
  font-weight: 600;
}
.btn-accent:hover {
  background: #e0912e;
  border-color: #e0912e;
  color: var(--navy);
}

/* Mini accommodation preview cards inside search widget */
.mini-stay-img { position: relative; border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.mini-stay-img img { width: 100%; height: 130px; object-fit: cover; display: block; }
.badge-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  color: #fff;
  z-index: 2;
}
.badge-family { background: var(--primary); }
.badge-pet { background: var(--accent); color: var(--navy); }
.badge-country { background: var(--navy); }

/* Category icon strip */
.cat-pill {
  display: block;
  background: #fff;
  border-radius: 14px;
  padding: 20px 10px;
  text-decoration: none;
  color: #333;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cat-pill:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.1);
  color: var(--primary);
}
.cat-pill-icon { font-size: 1.8rem; margin-bottom: 8px; }

/* Map preview + nearby list split section */
.map-preview-card { border-radius: 14px; overflow: hidden; height: 100%; min-height: 360px; }
#home-map { height: 100%; min-height: 360px; width: 100%; }

.nearby-list { display: flex; flex-direction: column; gap: 14px; }
.nearby-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.nearby-item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Trust strip */
.trust-strip { background: #f4f8fa; }
.trust-icon { font-size: 2.2rem; margin-bottom: 10px; }

/* ================= FOOTER ================= */
.site-footer {
  background: var(--navy);
  color: #e9eef5;
}
.footer-links a { color: #cfe0f5; display: block; margin-bottom: 8px; font-size: 0.95rem; }
.footer-links a:hover { color: #fff; }