/* Wanderlust Template - Travel Agency
   Modern, Vibrant Design with Tropical Teal & Coral */

/* Base Typography */
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #ffffff;
  color: #134e4a;
}

.font-display {
  font-family: 'Poppins', system-ui, sans-serif;
}

/* Teal Gradient Text */
.text-teal-gradient {
  background: linear-gradient(135deg, #0d9488 0%, #14b8a6 50%, #0d9488 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Coral/Orange Gradient Text */
.text-coral-gradient {
  background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #f97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Teal Gradient Backgrounds */
.bg-teal-gradient {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
}

.bg-teal-gradient-reverse {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
}

/* Wave Section Divider */
.wave-top {
  clip-path: ellipse(70% 100% at 50% 100%);
}

.wave-bottom {
  clip-path: ellipse(70% 100% at 50% 0%);
}

/* Diagonal Section Divider */
.diagonal-top {
  clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
}

.diagonal-bottom {
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}

/* Accent Line */
.accent-line {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #0d9488, #14b8a6);
}

.accent-line-coral {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #f97316, #fb923c);
}

/* Coral Border Accent */
.border-coral {
  border-color: #f97316;
}

/* Card Hover Effects */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(13, 148, 136, 0.15);
}

/* Destination Card with Image Zoom */
.destination-card {
  overflow: hidden;
}

.destination-card img {
  transition: transform 0.5s ease;
}

.destination-card:hover img {
  transform: scale(1.1);
}

/* Button Styles */
.btn-coral {
  background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  color: #ffffff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-coral:hover {
  background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.3);
}

.btn-teal {
  background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
  color: #ffffff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-teal:hover {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(13, 148, 136, 0.3);
}

.btn-outline-teal {
  border: 2px solid #0d9488;
  color: #0d9488;
  background: transparent;
  transition: all 0.3s ease;
}

.btn-outline-teal:hover {
  background: #0d9488;
  color: #ffffff;
}

.btn-outline-coral {
  border: 2px solid #f97316;
  color: #f97316;
  background: transparent;
  transition: all 0.3s ease;
}

.btn-outline-coral:hover {
  background: #f97316;
  color: #ffffff;
}

/* Price Badge */
.price-badge {
  background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  color: #ffffff;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.875rem;
}

/* Rating Stars */
.star-filled {
  color: #f97316;
}

.star-empty {
  color: #cbd5e1;
}

/* Stats Counter Animation */
@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.stat-number {
  animation: countUp 0.6s ease-out forwards;
}

/* Tropical Decorations */
.palm-decoration {
  position: absolute;
  opacity: 0.1;
}

/* Floating Animation for Cards */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.float-animation {
  animation: float 4s ease-in-out infinite;
}

/* Smooth Image Overlay */
.image-overlay {
  background: linear-gradient(to top, rgba(13, 148, 136, 0.9) 0%, transparent 100%);
}

/* Travel Category Pills */
.category-pill {
  background: #f0fdfa;
  color: #0d9488;
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.category-pill:hover,
.category-pill.active {
  background: #0d9488;
  color: #ffffff;
}