@import url('https://fonts.googleapis.com/css2?family=Mate+SC&display=swap');

 body{background:#f6f8fb;font-family:"Mate SC",system-ui,-apple-system;color:#1f2937}
.section{padding:2.5rem 0}
/*.section-title{font-size:2.1rem;font-weight:700;margin-bottom:2rem}*/
.card{background:#fff;border-radius:18px;box-shadow:0 12px 32px rgba(0,0,0,.08);overflow:hidden;height:100%}
.card img{width:100%;height:230px;object-fit:cover}
.card-body{padding:1.3rem}
.muted{color:#6b7280;font-size:.9rem}
.badge-ui{display:inline-block;background:#eef4ff;color:#0d6efd;
padding:.35rem .7rem;border-radius:20px;font-size:.75rem;margin:.15rem}
.fact{background:#fff;border-radius:14px;padding:1.2rem;text-align:center;
box-shadow:0 8px 24px rgba(0,0,0,.06)}
/* ================= CITY HERO ================= */
.city-hero-section{
  padding: 2.5rem 0;
}

.city-hero-card{
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

.city-hero-image{
  position: relative;
  height: 460px; /* increased height */
}

.city-hero-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* BADGES */
.hero-badges{
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-badge{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.75);
  padding: .45rem .75rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
}

.hero-badge.visitors{ color:#0d6efd; }
.hero-badge.positive{ color:#198754; }
.hero-badge.negative{ color:#dc3545; }

/* GLASS CONTENT */
.hero-glass{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2.2rem;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.65),
    rgba(0,0,0,.25),
    transparent
  );
  color: #fff;
}

.hero-glass h1{
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: .3rem;
}

.hero-glass .location{
  font-size: 1rem;
  opacity: .9;
  margin-bottom: .8rem;
}

.hero-desc{
  max-width: 780px;
  font-size: .95rem;
  line-height: 1.6;
  opacity: .92;
}
.city-facts-weather {
  padding: 4rem 0;
}

.facts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

.fact-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.fact-wide {
  grid-column: span 2;
}

.fact-label {
  display: block;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7280;
  margin-bottom: .3rem;
}

.fact-value {
  font-size: .95rem;
  font-weight: 500;
  color: #111827;
}

.weather-card {
  height: 100%;
  background: linear-gradient(135deg, #0d6efd, #2563eb);
  color: #fff;
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 12px 30px rgba(13,110,253,.35);
}

.weather-title {
  font-size: 1.1rem;
  margin-bottom: .8rem;
  font-weight: 600;
}

.weather-summary span {
  display: inline-block;
  margin-right: .5rem;
}

.mywthDIV {
  cursor: pointer;
  margin-left: 6px;
}

.wthhide {
  display: none;
  margin-top: .8rem;
  background: rgba(255,255,255,.15);
  padding: .8rem;
  border-radius: 10px;
  font-size: .85rem;
}

.mywthDIV:hover + .wthhide {
  display: block;
}
/* UNIVERSAL CONTENT CARD */
.content-card{
  background:#fff;
  border-radius:18px;
  padding:1.8rem 2rem;
  box-shadow:0 10px 26px rgba(0,0,0,.07);
  transition:all .35s ease;
  position:relative;
}

/* Hover effect */
.content-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 50px rgba(0,0,0,.14);
}
.overview-card p{
  font-size:1rem;
  line-height:1.75;
  color:#374151;
}
.eatables-card{
  background:linear-gradient(
    to bottom right,
    #ffffff,
    #f9fafb
  );
}

.eatables-card p{
  font-size:.95rem;
  line-height:1.7;
  color:#374151;
}
/* HOTEL / STAY CARD */
.stay-card{
  height:100%;
  overflow:hidden;
  transition:all .35s ease;
}

/* Image zoom */
.stay-card img{
  transition:transform .5s ease;
}

/* Hover */
.stay-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 50px rgba(0,0,0,.15);
}

.stay-card:hover img{
  transform:scale(1.08);
}
.stay-card h5{
  font-size:1.05rem;
  font-weight:600;
  margin-bottom:.4rem;
}

.stay-card .badge-ui{
  background:#f1f5f9;
  color:#0f172a;
}

.stay-card .muted{
  margin-top:.6rem;
  font-size:.9rem;
}
.section .content-card{
  margin-top:1.5rem;
}
.section .row.g-4{
  margin-top:1.2rem;
}

/* ================= PLACES ================= */
.places-section .place-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  transition:.35s ease;
}

.place-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}

/* IMAGE */
.place-media{
  position:relative;
  height:240px;
}

.place-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* soft overlay for readability */
.place-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.45),
    transparent 55%
  );
}

/* EXPERIENCE CHIPS */
.place-chips{
  position:absolute;
  left:14px;
  bottom:14px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  max-width:85%;
  z-index:2;
}

.chip{
  background:rgba(255,255,255,.9);
  color:#1f2937;
  padding:.28rem .65rem;
  border-radius:999px;
  font-size:.7rem;
  font-weight:600;
  white-space:nowrap;
}

.chip.muted{
  background:rgba(255,255,255,.75);
  color:#6b7280;
}

/* BODY */
.place-body{
  padding:1.1rem 1.2rem 1.3rem;
}

.place-desc {
  font-size: .9rem;
  line-height: 1.55;
  max-width: 100%;
}
.place-desc{
  font-size:.9rem;
  color:#6b7280;
  line-height:1.5;
  max-height:4.2em;
  overflow:hidden;
  transition:max-height .3s ease;
}


.place-desc.expanded{
  max-height:500px; /* enough for full text */
}

.read-toggle {
  display: inline-block;
  margin-left: 6px;
  font-weight: 600;
  color: #0d6efd;
  cursor: pointer;
}

.read-more{
  color:#2563eb;
  font-weight:600;
  cursor:pointer;
  margin-left:4px;
}
/* FILTER */
.places-filter{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:2rem;
}
.filter-btn{
  background:#fff;
  border:1px solid #e5e7eb;
  padding:.45rem .9rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
}
.filter-btn.active,
.filter-btn:hover{
  background:#0d6efd;
  color:#fff;
  border-color:#0d6efd;
}

/* CARD */

.place-card:hover{ transform:translateY(-6px); }
.places-section .row{
  align-items: flex-start;
}

/* IMAGE */
.place-media{ position:relative; height:240px; }
.place-media img{ width:100%; height:100%; object-fit:cover; }

.place-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.45),transparent 55%);
}

/* TOP */
.place-top{
  position:absolute;
  top:12px;
  left:12px;
}
.place-stat{
  background:rgba(255,255,255,.9);
  padding:.3rem .6rem;
  border-radius:20px;
  font-size:.75rem;
  font-weight:600;
}

/* CHIPS */




/* BODY */
.place-body{ padding:1.2rem; }
.place-body h3{ font-size:1.05rem;font-weight:700;margin-bottom:.4rem; }
.place-desc{ font-size:.9rem;color:#6b7280; }
.read-more{ color:#2563eb;font-weight:600;cursor:pointer; }

/* VOTES */
.place-votes{
  display:flex;
  gap:10px;
  margin-top:.8rem;
}
.vote-btn{
  border:0;
  background:#f3f4f6;
  padding:.35rem .7rem;
  border-radius:20px;
  font-size:.8rem;
  cursor:pointer;
}
.vote-btn.up{ color:#198754; }
.vote-btn.down{ color:#dc3545; }
#loadMorePlaces.disabled{
  background:#f3f4f6;
  color:#6b7280;
  border-color:#e5e7eb;
  cursor:not-allowed;
}
.section-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 14px;
}
.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  height: 70%;
  width: 4px;
  background: linear-gradient(180deg, #0d6efd, #6610f2);
  border-radius: 4px;
}

.section-title {
  position: relative;
  padding-left: 12px;
}

.city-search-wrap {
  padding: 40px 15px;
  background: #f8fafc;
}

.city-search-inner {
  max-width: 1100px;
  margin: auto;
  display: flex;
  gap: 30px;
  align-items: center;
  flex-wrap: wrap;
}

.search-text {
  flex: 1;
}

.search-text h2 {
  margin: 0;
  font-size: 28px;
}

.search-text p {
  color: #6b7280;
}

.search-box {
  flex: 1;
  position: relative;
}

.city-search-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid #ddd;
}

.search-results {
  position: absolute;
  top: 105%;
  width: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  overflow: hidden;
  z-index: 999;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: #111;
  border-bottom: 1px solid #f1f1f1;
}

.search-item:hover {
  background: #f9fafb;
}

.search-icon {
  font-size: 18px;
}

/* Skeleton */
.skeleton {
  padding: 12px 16px;
}
.skeleton-line {
  height: 12px;
  background: linear-gradient(90deg,#eee,#f5f5f5,#eee);
  margin-bottom: 8px;
  border-radius: 4px;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
  0%{background-position:-200px}
  100%{background-position:200px}
}
/* ===== CITY SEARCH PROFESSIONAL WRAP ===== */
.city-search-wrap {
  padding: 45px 20px;
  background: linear-gradient(180deg,#ffffff,#f4f7fb);
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  margin: 30px auto;
  max-width: 1200px;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
}

.city-search-inner {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Text */
.search-text h2 {
  font-size: 30px;
  font-weight: 700;
}
.search-text p {
  font-size: 15px;
  color: #6b7280;
}

/* Input */
.city-search-input {
  background: #fff;
  border: 1px solid #d1d5db;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.05);
}

/* Results box */
.search-results {
  border: 1px solid #e5e7eb;
}

@media(max-width:768px){
  .city-search-inner {
    flex-direction: column;
  }
}
.share-btn{
  background:rgba(255,255,255,.85);
  color:#111;
}

/* CTA BOX BELOW HERO IMAGE */
.hero-cta-box{
  background:#ffffff;
  border-radius:18px;
  padding:14px 18px;
  margin-top:-28px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  box-shadow:0 14px 40px rgba(0,0,0,.12);
  position:relative;
  z-index:5;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}


.hero-cta-btn{
  padding:.55rem 1.1rem;
  border-radius:999px;
  font-size:.85rem;
  font-weight:600;
  text-decoration:none;
  transition:.25s ease;
  border:1px solid transparent;
}

.hero-cta-btn.primary{
  background:#0d6efd;
  color:#fff;
}

.hero-cta-btn.outline{
  background:#fff;
  color:#0d6efd;
  border-color:#0d6efd;
}

.hero-cta-btn:hover{
  transform:translateY(-2px);
}

/* MOBILE */
@media(max-width:768px){
  .hero-cta-box{
    margin-top:0;
    border-radius:0 0 18px 18px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
  }
}


.hero-badge,
.place-stat {
  min-width: 80px;
}
.place-desc {
  min-height: 110px;
}

.city-pos-count,
.city-neg-count {
  min-width: 22px;
  display: inline-block;
  text-align: center;
}

/*City intent*/
 .city-intent-section {
  background: #f8fafc;
}

.city-intent-box {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 28px 20px;
  background: #ffffff;
}

.city-intent-box h3 {
  font-weight: 600;
}

.city-intent-box p {
  max-width: 680px;
  margin: 0 auto;
}
/*Flight section*/
/* ================= FLIGHTS BLOCK ================= */
.flights-section {
    padding: 2.5rem 0;
    background-color: #f9f9f9; /* light background to separate from hero */
    border-radius: 12px;
    margin-bottom: 2rem;
}

.flights-section .section-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #0d6efd; /* match your primary color */
}

.flights-section p {
    font-size: 0.95rem;
    color: #555;
}

.flights-section .btn-outline-primary {
    border-radius: 50px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.flights-section .btn-outline-primary:hover {
    background-color: #0d6efd;
    color: #fff;
    text-decoration: none;
}

.flights-section .d-flex {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.5rem;
}

.flights-section .text-muted {
    font-size: 0.85rem;
}


@media (max-width: 768px) {

    /* Make the container itself scrollable */
    #flightsContainer {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        position: relative;
    }

    /* Minimum table width to keep all columns visible */
    #flightsContainer table {
        min-width: 700px;
        table-layout: auto;
    }

    /* Shrink padding/font for mobile */
    #flightsContainer table th,
    #flightsContainer table td {
        padding: 0.35rem 0.5rem;
        font-size: 0.8rem;
        white-space: nowrap;
        text-align: center;
        vertical-align: middle;
    }

    #flightsContainer table td img {
        max-height: 30px;
        height: auto;
    }

    #flightsContainer table td .book-now-btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.4rem;
        white-space: nowrap;
    }

    /* Optional: add a subtle scroll hint */
    #flightsContainer::after {
        content: "→";
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        font-weight: bold;
        color: #0d6efd;
        pointer-events: none;
        font-size: 1rem;
    }

    /* Stack filters vertically */
    .flights-section .d-flex {
        flex-direction: column !important;
        gap: 0.5rem !important;
        align-items: stretch;
    }

    .flights-section .d-flex #destinationSelect,
    .flights-section .d-flex #flightDate,
    .flights-section .d-flex #searchFlightsBtn {
        width: 100% !important;
    }
}