:root{
  --primary:#ffc107;
  --dark:#121212;
}


body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:#fff; color:#222; }

.logo-img {
  height:40px; width:40px; object-fit:cover; border-radius:50%;
  border:2px solid var(--primary); background:#fff; padding:2px;
}

.hero-section { height:400px; }
.carousel-item { height:400px; background-position:center; background-size:cover; color:#fff; position:relative; }
.carousel-item::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,0.35); }


.button-effect { transition:all .25s ease; }
.button-effect:hover { transform:translateY(-4px); box-shadow:0 8px 18px rgba(0,0,0,0.12); }

.search-bar-container { margin-top:-50px; position:relative; z-index:10; }

.tour-card .card-img-top { height:200px; object-fit:cover; }
.tour-card { transition: transform .2s ease, box-shadow .2s ease; border:none; box-shadow:0 4px 10px rgba(0,0,0,0.08); }
.tour-card:hover { transform:translateY(-6px); box-shadow:0 14px 30px rgba(0,0,0,0.12); }


.favorite-btn { position:absolute; top:10px; right:10px; background:#fff; border:none; border-radius:50%; width:38px; height:38px; font-size:1.1rem; color:gray; z-index:100; }
.favorite-btn.active { color:#e74c3c; }


.star { cursor:pointer; font-size:1.15rem; color:#ccc; transition:all .12s ease; margin-right:2px; }
.star.active { color:gold; transform:scale(1.05); }

footer { border-top:1px solid #eee; }

.dark-mode {
  background:var(--dark); color:#eaeaea;
}
.dark-mode .navbar { background:#111 !important; }
.dark-mode .bg-light { background:#1a1a1a !important; color:#ddd !important; }
.dark-mode .card { background:#161616; border:1px solid #333; color:#fff; }
.dark-mode footer { background:#0f0f0f; color:#ddd; border-top-color:#222; }


.skeleton-card {
  height:280px; border-radius:6px;
  background:linear-gradient(90deg,#efefef,#f6f6f6,#efefef);
  background-size:200% 100%;
  animation:skeleton 1.6s linear infinite;
}
@keyframes skeleton { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

@media (max-width:576px){
  .search-bar-container { margin-top:0; }
  .hero-section { height:260px; }
}