@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Syne:wght@500;600;700&display=swap');

/* Bootstrap overrides, color palette, animations and hover effects */
:root{
  --tourism-primary: #0f6c9c; /* deep ocean blue */
  --tourism-accent: #f4a340;  /* sunset gold */
  --tourism-muted: #9ca3af;
  --card-bg: #111827;
  --site-bg: #0b1220;
  --bg-white: #0b1220 !important;
  --bg-light: #0f172a !important;
  --bg-lighter: #111827 !important;
  --text-dark: #f1f5f9 !important;
  --text-base: #e2e8f0 !important;
  --text-light: #94a3b8 !important;
  --text-muted: #6b7280 !important;
  --border: #1f2937 !important;
  --font-body: 'Manrope', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-display: 'Syne', 'Manrope', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --text-size-base: 16.5px;
  --text-size-sm: 0.95rem;
  --text-size-xs: 0.85rem;
  --text-size-h1: clamp(2.4rem, 5vw, 3.6rem);
  --text-size-h2: clamp(2rem, 4vw, 3rem);
  --text-size-h3: clamp(1.6rem, 3vw, 2.2rem);
  --text-size-h4: 1.35rem;
  --text-size-h5: 1.15rem;
  --text-size-h6: 1rem;
  --bs-body-color: #e2e8f0;
  --bs-body-bg: #0b1220;
  --bs-primary: #7dd3fc;
  --bs-secondary: #94a3b8;
  --bs-border-color: #1f2937;
}

body{
  background-color: var(--site-bg) !important;
  color: #e2e8f0 !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-size-base) !important;
  line-height: 1.75;
}

h1, h2, h3, h4, h5, h6{
  font-family: var(--font-display) !important;
  color: #f8fafc !important;
  letter-spacing: -0.01em;
}

h1{ font-size: var(--text-size-h1) !important; }
h2{ font-size: var(--text-size-h2) !important; }
h3{ font-size: var(--text-size-h3) !important; }
h4{ font-size: var(--text-size-h4) !important; }
h5{ font-size: var(--text-size-h5) !important; }
h6{ font-size: var(--text-size-h6) !important; }

p, li, label, small, .small{
  color: #cbd5e1 !important;
  font-size: 1rem;
}

.lead{ font-size: 1.08rem !important; color: #cbd5e1 !important; }

a{ color: #7dd3fc; }
a:hover{ color: #f4a340; }

button, input, select, textarea, .btn{
  font-family: var(--font-body) !important;
}

/* Navbar tweaks */
.navbar{
  background: #0b1220;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid #1f2937;
}
.navbar .navbar-brand{ color: #ffffff !important; font-size: 1.35rem !important; }
.navbar .logo-main{ color: #ffffff !important; font-size: 1.35rem !important; }
.navbar .logo-sub{ color: #94a3b8; }
.navbar .nav-link{ color: #cbd5e1; font-weight: 600; }
.navbar .nav-link.active, .navbar .nav-link:hover{
  color: #f4a340;
  background-color: rgba(244, 163, 64, 0.12);
}

/* Cards and category tiles */
.category-card, .package-card, .dest-card{
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
.category-card:hover, .package-card:hover, .dest-card:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  border-left: 4px solid var(--tourism-accent);
}

.category-card img, .package-image, .dest-card img{
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.card-body{ padding: 1rem; }
.card-emoji{ font-size: 1.6rem; margin-bottom: 0.4rem; }

/* Utility animations */
.fade-in{
  opacity: 0;
  transform: translateY(12px);
  animation: fadeInUp 600ms ease forwards;
}
@keyframes fadeInUp{
  to{ opacity: 1; transform: translateY(0); }
}

/* Responsive tweaks */
@media(min-width:768px){
  .category-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.25rem; }
}
@media(max-width:767px){
  .category-grid{ display:grid; grid-template-columns: 1fr; gap:1rem; }
}

/* Footer */
.site-footer, .footer{ background: linear-gradient(90deg, rgba(11,76,111,0.95), rgba(15,108,156,0.95)); color: #fff; padding:1.25rem 0; }

/* Buttons */
.btn-primary{
  background: linear-gradient(90deg, var(--tourism-primary), #0b84ba);
  border: none;
}
.btn-primary:hover{ background: linear-gradient(90deg, #0b84ba, var(--tourism-accent)); }

/* Hover effect for links */
a{ transition: color 220ms ease; }

a:hover{ color: var(--tourism-accent); }

/* Small utility spacers */
.wrap{ padding: 2rem; }

/* Make images accessible and crisp */
img{ image-rendering: optimizeQuality; }
/* Feedback card styles */
.feedback-card{ border-radius:12px; padding:1rem; background:var(--card-bg); box-shadow:0 8px 20px rgba(15,20,30,0.06); }
.star{ color: #f4a340; margin-right:2px; }
.rating { font-size: 1rem; }

/* Dark background overrides for Bootstrap utility classes */
.bg-white{ background-color: #0b1220 !important; }
.bg-light{ background-color: #0f172a !important; }
.bg-body, .bg-body-tertiary{ background-color: #0b1220 !important; }
.text-dark{ color: #e2e8f0 !important; }
.text-primary{ color: #7dd3fc !important; }
.text-secondary{ color: #94a3b8 !important; }
.text-body, .text-body-secondary{ color: #cbd5e1 !important; }
.text-muted{ color: #94a3b8 !important; }
.border, .border-light{ border-color: #1f2937 !important; }

.card, .card-body{ background-color: #111827; color: #e2e8f0; }
.card-title, .card-text{ color: #cbd5e1; }

.form-control, .form-select, .form-control:focus, .form-select:focus{
  background-color: #111827;
  color: #e2e8f0;
  border-color: #1f2937;
}

::placeholder{
  color: #94a3b8 !important;
}

hr{ border-color: #1f2937; opacity: 1; }

.table{ color: #e2e8f0; }
.table > :not(caption) > * > *{ background-color: #0f172a; border-color: #1f2937; }

.dropdown-menu{ background-color: #111827; border-color: #1f2937; }
.dropdown-item{ color: #e2e8f0; }
.dropdown-item:hover{ background-color: #0f172a; color: #f4a340; }

/* Reviews page dark surfaces */
.ratings-header{
  background: linear-gradient(135deg, #0f172a 0%, #111827 100%) !important;
  border-color: #1f2937 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

.review-card{
  background-color: #111827 !important;
  border-color: #1f2937 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
}

.review-card:hover{
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important;
}

.distribution-bar{
  background-color: #1f2937 !important;
}

/* Gallery dark containers */
.gallery-item{
  background-color: #111827 !important;
  border-color: #1f2937 !important;
}

/* Handle inline white backgrounds without touching image-based backgrounds */
[style*="background: white"],
[style*="background:white"],
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#fff"]{
  background-color: #0f172a !important;
  color: #e2e8f0;
}