/* Sea to Shore Template - Travel Agency
   Coastal Design with Ocean Blue, Sandy Gold & Navy */

/* Mobile Navigation - block layout for dynamically injected links */
.seatoshore-mobile-nav > a {
  display: block;
  padding: 0.5rem 0;
}

/* Base Typography */
body {
  font-family: 'Open Sans', system-ui, sans-serif;
  background: #ffffff;
  color: #2C3E50;
}

.font-display {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Ocean Blue Gradient Text */
.text-ocean-gradient {
  background: linear-gradient(135deg, #1DA9E6 0%, #4DBFEF 50%, #1DA9E6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sand/Gold Gradient Text */
.text-sand-gradient {
  background: linear-gradient(135deg, #C5A55A 0%, #D4B86A 50%, #C5A55A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Ocean Blue Gradient Backgrounds */
.bg-ocean-gradient {
  background: linear-gradient(135deg, #1DA9E6 0%, #189ED9 100%);
}

.bg-ocean-gradient-reverse {
  background: linear-gradient(135deg, #189ED9 0%, #1DA9E6 100%);
}

/* Navy Gradient Backgrounds */
.bg-navy-gradient {
  background: linear-gradient(135deg, #2C3E50 0%, #1B3A4B 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, #1DA9E6, #4DBFEF);
}

.accent-line-sand {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #C5A55A, #D4B86A);
}

/* Sand Border Accent */
.border-sand {
  border-color: #C5A55A;
}

/* 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(29, 169, 230, 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-sand {
  background: linear-gradient(135deg, #C5A55A 0%, #D4B86A 100%);
  color: #ffffff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-sand:hover {
  background: linear-gradient(135deg, #B0924A 0%, #C5A55A 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(197, 165, 90, 0.3);
}

.btn-ocean {
  background: linear-gradient(135deg, #1DA9E6 0%, #4DBFEF 100%);
  color: #ffffff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-ocean:hover {
  background: linear-gradient(135deg, #189ED9 0%, #1DA9E6 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(29, 169, 230, 0.3);
}

.btn-navy {
  background: linear-gradient(135deg, #2C3E50 0%, #3D5268 100%);
  color: #ffffff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-navy:hover {
  background: linear-gradient(135deg, #1B3A4B 0%, #2C3E50 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(44, 62, 80, 0.3);
}

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

.btn-outline-ocean:hover {
  background: #1DA9E6;
  color: #ffffff;
}

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

.btn-outline-sand:hover {
  background: #C5A55A;
  color: #ffffff;
}

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

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

.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;
}

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

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

/* Wave Animation */
@keyframes wave {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-20px); }
}

.wave-animation {
  animation: wave 6s ease-in-out infinite;
}

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

/* Travel Category Pills */
.category-pill {
  background: #F0F7FB;
  color: #1DA9E6;
  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: #1DA9E6;
  color: #ffffff;
}

/* Seahorse decoration opacity */
.seahorse-decoration {
  position: absolute;
  opacity: 0.05;
}