/* Tours page — extends hotels.css.
   Only contains overrides specific to the tours flow: warmer accent,
   destination tile palette, "package" card variant. */

.tours-body {
  --htl-accent: #f97316;        /* orange-leaning brand accent for tours */
  --htl-accent-d: #c2410c;
}

/* Rotate word can be up to 13ch ("sayohatlaning") — reserve real space
   so it does not visually overflow on narrow screens. */
.tours-body .htl-rotate { min-width: 13ch; }

/* Hero — slightly different gradient: warmer at edges to read as "tour/adventure" */
.tours-body .hotel-hero {
  background: linear-gradient(135deg, #06248a 0%, #0B3AD6 50%, #1d4ed8 100%);
}
.tours-body .htl-blob-1 { background: #fb923c; }   /* warm orange */
.tours-body .htl-blob-2 { background: #f59e0b; }   /* amber */
.tours-body .htl-blob-3 { background: #fbbf24; }   /* yellow */

/* Destination tiles — distinct from hotels (warm sunset / beach gradients) */
.tours-body .htl-city-1::before { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #b91c1c 100%); }   /* Antalya */
.tours-body .htl-city-2::before { background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 50%, #0369a1 100%); }   /* Sharm */
.tours-body .htl-city-3::before { background: linear-gradient(135deg, #fbbf24 0%, #f97316 50%, #c2410c 100%); }   /* Dubai */
.tours-body .htl-city-4::before { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 50%, #155e75 100%); }   /* Maldives */
.tours-body .htl-city-5::before { background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%); }   /* Thailand */
.tours-body .htl-city-6::before { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #4338ca 100%); }   /* Georgia */

/* Package highlight strip — feature row above the search */
.tour-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}
.tour-feature {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  backdrop-filter: blur(8px);
}
.tour-feature svg { width: 14px; height: 14px; }
.tour-feature .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--htl-yellow);
}

/* .tour-perks, .tour-steps, .tour-step* moved to hotels.css so they
   are available on the visa page too. */

@media (max-width: 480px) {
  .tour-features { gap: 6px; }
  .tour-feature { font-size: 11px; padding: 5px 10px; }
}