/* ============================================================
   BIS 360 — Top 10 Series CSS
   ============================================================ */

/* ─── Shared Top-10 Layout ──────────────────────────────────── */
.top10-section { position: relative; overflow: hidden; }

/* ─── ARRIVALS ──────────────────────────────────────────────── */
.top10-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 820px;
  margin: 0 auto;
}

.top10-arrivals-card {
  display: grid;
  grid-template-columns: 48px 48px 1fr 120px;
  align-items: center;
  gap: 1rem;
  background: white;
  border-radius: 14px;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border: 1px solid #e2e8f0;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.top10-arrivals-card:hover {
  transform: translateX(6px);
  box-shadow: 0 8px 24px rgba(10,124,110,0.12);
  border-color: rgba(10,124,110,0.25);
}
.top10-bar-wrap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: #e2e8f0;
}
.top10-bar {
  height: 100%;
  background: linear-gradient(90deg, #0a7c6e, #c9a227);
  border-radius: 0 2px 0 0;
  transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
}
.top10-rank {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem;
  flex-shrink: 0;
}
.rank-1 { background: linear-gradient(135deg,#c9a227,#e0b84e); color: white; box-shadow: 0 4px 12px rgba(201,162,39,0.4); }
.rank-2 { background: linear-gradient(135deg,#94a3b8,#cbd5e0); color: white; }
.rank-3 { background: linear-gradient(135deg,#cd7f32,#e09c50); color: white; }
.rank-other { background: rgba(10,124,110,0.08); color: #0a7c6e; }

.top10-flag { font-size: 2rem; line-height: 1; }

.top10-info { flex: 1; }
.top10-name { font-weight: 700; font-size: 1rem; color: #1a1a2e; margin-bottom: 0.15rem; }
.top10-sub { font-size: 0.75rem; color: #718096; text-transform: uppercase; letter-spacing: 0.06em; }

.top10-value-wrap { text-align: right; }
.top10-value { font-weight: 800; font-size: 1.1rem; color: #1a1a2e; font-family: 'Playfair Display', serif; }
.top10-change {
  font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: flex-end; gap: 3px;
  margin-top: 0.15rem;
}
.change-up { color: #16a34a; }
.change-down { color: #dc2626; }

/* ─── AIRLINES — horizontal list ────────────────────────────── */
.airlines-list { display: flex; flex-direction: column; gap: 0.6rem; }

.airline-row {
  display: grid;
  grid-template-columns: 42px 52px 1fr 80px 80px 80px 160px 140px;
  align-items: center;
  gap: 1rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  padding: 0.9rem 1.25rem;
  transition: all 0.3s;
}
.airline-row:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(201,162,39,0.35);
  transform: translateX(4px);
}
.airline-row-rank {
  font-size: 0.8rem; font-weight: 800;
  color: rgba(201,162,39,0.85); text-align: center;
}
.airline-row-iata {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, #0a7c6e, #c9a227);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.72rem; color: white;
  letter-spacing: 0.04em; flex-shrink: 0;
}
.airline-row-name-wrap { min-width: 0; }
.airline-row-name {
  font-weight: 700; font-size: 0.95rem; color: white;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.airline-row-country { font-size: 0.72rem; color: rgba(255,255,255,0.45); margin-top: 2px; }
.airline-row-stat { text-align: center; }
.airline-row-stat span { display: block; font-weight: 800; font-size: 0.95rem; color: #c9a227; }
.airline-row-stat small { font-size: 0.62rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.05em; }
.airline-row-alliance {
  background: rgba(201,162,39,0.12); color: #c9a227;
  font-size: 0.7rem; font-weight: 600;
  padding: 0.2rem 0.6rem; border-radius: 50px;
  border: 1px solid rgba(201,162,39,0.25);
  white-space: nowrap; text-align: center;
}
.airline-row-bar {
  height: 6px; background: rgba(255,255,255,0.1);
  border-radius: 3px; overflow: hidden;
}
.airline-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0a7c6e, #c9a227);
  border-radius: 3px;
}

@media (max-width: 1100px) {
  .airline-row { grid-template-columns: 42px 48px 1fr 70px 70px 70px 130px; }
  .airline-row-bar { display: none; }
}
@media (max-width: 768px) {
  .airline-row { grid-template-columns: 36px 40px 1fr 60px 60px; }
  .airline-row-alliance, .airline-row-bar { display: none; }
}
@media (max-width: 480px) {
  .airline-row { grid-template-columns: 30px 36px 1fr 55px; }
  .airline-row-stat:last-of-type { display: none; }
}

/* ─── TOURIST SITES ─────────────────────────────────────────── */
.sites-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}
.site-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border: 1px solid #e2e8f0;
  transition: all 0.3s;
}
.site-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(10,124,110,0.15);
  border-color: rgba(10,124,110,0.2);
}
.site-img-wrap {
  position: relative;
  height: 160px;
  overflow: hidden;
}
.site-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.site-card:hover .site-img-wrap img { transform: scale(1.08); }

.site-rank-badge {
  position: absolute; top: 0.6rem; left: 0.6rem;
  font-weight: 800; font-size: 0.85rem;
  padding: 0.2rem 0.55rem; border-radius: 8px;
}
.rank-badge-1 { background: linear-gradient(135deg,#c9a227,#e0b84e); color: white; }
.rank-badge-2 { background: linear-gradient(135deg,#94a3b8,#c8d6e5); color: white; }
.rank-badge-3 { background: linear-gradient(135deg,#cd7f32,#e09c50); color: white; }
.rank-badge-other { background: rgba(26,26,46,0.75); color: white; }

.site-unesco-badge {
  position: absolute; top: 0.6rem; right: 0.6rem;
  background: rgba(37,99,235,0.9); color: white;
  font-size: 0.62rem; font-weight: 700;
  padding: 0.2rem 0.5rem; border-radius: 50px;
  display: flex; align-items: center; gap: 3px;
}
.site-category-badge {
  position: absolute; bottom: 0.6rem; right: 0.6rem;
  background: rgba(10,124,110,0.85); color: white;
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  padding: 0.15rem 0.5rem; border-radius: 50px; letter-spacing: 0.05em;
}
.site-body { padding: 1rem; }
.site-name { font-weight: 700; font-size: 0.9rem; color: #1a1a2e; margin-bottom: 0.25rem; line-height: 1.3; }
.site-location { font-size: 0.72rem; color: #718096; margin-bottom: 0.5rem; }
.site-desc {
  font-size: 0.78rem; color: #718096; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 0.6rem;
}
.site-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  font-size: 0.72rem; color: #718096;
}
.site-meta span { display: flex; align-items: center; gap: 3px; }

/* ─── NATIONAL PARKS ─────────────────────────────────────────── */
.parks-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}
.park-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s;
}
.park-card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.11);
  border-color: rgba(201,162,39,0.35);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.park-img-wrap { position: relative; height: 150px; overflow: hidden; }
.park-img-wrap img { width:100%; height:100%; object-fit:cover; transition: transform 0.5s; }
.park-card:hover .park-img-wrap img { transform: scale(1.08); }
.park-rank {
  position: absolute; top: 0.6rem; left: 0.6rem;
  background: rgba(201,162,39,0.9); color: white;
  font-weight: 800; font-size: 0.85rem;
  padding: 0.2rem 0.55rem; border-radius: 8px;
}
.park-area {
  position: absolute; bottom: 0.6rem; right: 0.6rem;
  background: rgba(0,0,0,0.65); color: rgba(255,255,255,0.9);
  font-size: 0.65rem; font-weight: 600;
  padding: 0.2rem 0.5rem; border-radius: 50px;
}
.park-body { padding: 1rem; }
.park-name { font-weight: 700; font-size: 0.88rem; color: white; margin-bottom: 0.2rem; line-height: 1.3; }
.park-location { font-size: 0.7rem; color: rgba(201,162,39,0.75); margin-bottom: 0.5rem; }
.park-desc {
  font-size: 0.76rem; color: rgba(255,255,255,0.6); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 0.6rem;
}
.park-wildlife { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.6rem; }
.wildlife-tag {
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75);
  font-size: 0.65rem; padding: 0.15rem 0.45rem; border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.12);
}
.park-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  font-size: 0.7rem; color: rgba(255,255,255,0.5);
}
.park-meta span { display: flex; align-items: center; gap: 3px; }

/* ─── FLIGHTS ────────────────────────────────────────────────── */
.flights-list { display: flex; flex-direction: column; gap: 0.75rem; }

.flight-row {
  display: grid;
  grid-template-columns: 40px 1fr 180px 110px 130px 80px 100px;
  align-items: center;
  gap: 1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  transition: all 0.3s;
}
.flight-row:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(201,162,39,0.3);
  transform: translateX(4px);
}
.flight-rank {
  font-size: 0.78rem; font-weight: 800;
  color: rgba(201,162,39,0.8);
  text-align: center;
}
.flight-route {
  display: flex; align-items: center; gap: 0.75rem;
}
.flight-from, .flight-to { text-align: center; }
.flight-city { font-weight: 700; font-size: 0.88rem; color: white; }
.flight-code { font-size: 0.7rem; color: rgba(255,255,255,0.45); letter-spacing: 0.05em; }
.flight-arrow {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  position: relative;
}
.flight-arrow::before {
  content: '';
  position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: rgba(201,162,39,0.3);
  transform: translateY(-50%);
}
.flight-arrow i { position: relative; z-index: 1; background: transparent; }
.flight-duration { font-size: 0.65rem; color: rgba(255,255,255,0.45); position: relative; z-index: 1; }

.flight-airline {
  display: flex; align-items: center;
  font-size: 0.8rem; color: rgba(255,255,255,0.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flight-price { display: flex; flex-direction: column; }
.flight-price-val {
  font-weight: 800; font-size: 1rem;
  color: #c9a227;
}
.flight-classes { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.class-tag {
  background: rgba(10,124,110,0.2); color: rgba(255,255,255,0.75);
  font-size: 0.62rem; font-weight: 600;
  padding: 0.15rem 0.4rem; border-radius: 50px;
  border: 1px solid rgba(10,124,110,0.3);
}
.flight-freq { font-size: 0.72rem; color: rgba(255,255,255,0.5); }
.pop-bar-wrap {
  height: 6px; background: rgba(255,255,255,0.1);
  border-radius: 3px; overflow: hidden;
}
.pop-bar {
  height: 100%;
  background: linear-gradient(90deg, #0a7c6e, #c9a227);
  border-radius: 3px;
  transition: width 1.5s ease;
}

/* ─── HOTELS ─────────────────────────────────────────────────── */
.hotels-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}
.hotel-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(201,162,39,0.1);
  border: 1px solid rgba(201,162,39,0.15);
  transition: all 0.3s;
}
.hotel-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(201,162,39,0.2);
  border-color: rgba(201,162,39,0.35);
}
.hotel-img-wrap { position: relative; height: 160px; overflow: hidden; }
.hotel-img-wrap img { width:100%; height:100%; object-fit:cover; transition: transform 0.5s; }
.hotel-card:hover .hotel-img-wrap img { transform: scale(1.08); }
.hotel-rank-badge {
  position: absolute; top: 0.6rem; left: 0.6rem;
  background: linear-gradient(135deg,#c9a227,#e0b84e); color: white;
  font-weight: 800; font-size: 0.78rem;
  padding: 0.2rem 0.55rem; border-radius: 8px;
}
.hotel-stars {
  position: absolute; bottom: 0.6rem; left: 0.6rem;
  display: flex; gap: 1px;
  background: rgba(0,0,0,0.5); padding: 0.25rem 0.5rem; border-radius: 50px;
}
.hotel-body { padding: 1rem; }
.hotel-category-tag {
  display: inline-block;
  background: rgba(201,162,39,0.1); color: #b45309;
  font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.15rem 0.5rem; border-radius: 50px;
  border: 1px solid rgba(201,162,39,0.2);
  margin-bottom: 0.4rem;
}
.hotel-name { font-weight: 700; font-size: 0.9rem; color: #1a1a2e; margin-bottom: 0.2rem; line-height: 1.3; }
.hotel-location { font-size: 0.72rem; color: #718096; margin-bottom: 0.5rem; }
.hotel-desc {
  font-size: 0.76rem; color: #718096; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 0.6rem;
}
.hotel-amenities { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.75rem; }
.amenity-tag {
  background: rgba(10,124,110,0.06); color: #0a7c6e;
  font-size: 0.62rem; font-weight: 600;
  padding: 0.15rem 0.45rem; border-radius: 50px;
  border: 1px solid rgba(10,124,110,0.15);
}
.hotel-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 0.6rem; border-top: 1px solid #f0f0f0;
}
.hotel-rating { font-size: 0.78rem; font-weight: 700; color: #1a1a2e; }
.hotel-price { font-size: 0.78rem; color: #718096; }
.hotel-price strong { color: #0a7c6e; font-size: 0.9rem; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .sites-grid,
  .parks-grid,
  .hotels-grid { grid-template-columns: repeat(3, 1fr); }
  .flight-row { grid-template-columns: 40px 1fr 160px 100px 110px 70px; }
  .flight-row > .pop-bar-wrap { display: none; }
}
@media (max-width: 900px) {
  .sites-grid,
  .parks-grid,
  .hotels-grid { grid-template-columns: repeat(2, 1fr); }
  .flight-row {
    grid-template-columns: 40px 1fr 130px 90px;
  }
  .flight-classes, .flight-freq { display: none; }
  .top10-arrivals-card { grid-template-columns: 40px 40px 1fr 100px; }
}
@media (max-width: 576px) {
  .sites-grid,
  .parks-grid,
  .hotels-grid { grid-template-columns: 1fr; }
  .flight-row { grid-template-columns: 36px 1fr 90px; }
  .flight-airline, .flight-freq, .flight-classes { display: none; }
  .top10-arrivals-card { grid-template-columns: 36px 36px 1fr 85px; gap: 0.6rem; }
}