@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #f9fafb;
  min-height: 100vh;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.progress-bar {
  transition: width 0.3s ease;
}

/* Custom animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

/* Custom button styles */
.btn-primary {
  background-color: #059669;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.2s ease;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
  text-align: center;
  font-size: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-primary:hover {
  background-color: #047857;
  transform: scale(1.05);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.btn-primary:active {
  transform: scale(0.95);
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

.btn-secondary {
  background-color: white;
  color: #374151;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.2s;
  min-width: 140px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover {
  background-color: #f9fafb;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-secondary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Option buttons */
.option-button {
  background-color: white;
  color: #374151;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  border: 2px solid #E5E7EB;
  transition: all 0.2s ease;
  cursor: pointer;
  text-align: center;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.option-button:hover {
  border-color: #059669;
  background-color: #ECFDF5;
  transform: scale(1.05);
}

.option-button.selected {
  background-color: #059669;
  color: white;
  border-color: #059669;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.option-button.selected:hover {
  background-color: #047857;
  border-color: #047857;
}

/* Button focus states */
.btn-primary:focus,
.btn-secondary:focus,
.option-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px #059669, 0 0 0 4px rgba(5, 150, 105, 0.2);
}

/* Card hover effects */
.hotel-card {
  background-color: white;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
}

.hotel-card:hover {
  transform: scale(1.02);
}

.hotel-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.hotel-card .content {
  padding: 1rem;
}

.hotel-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.hotel-card p {
  color: #6b7280;
  margin-bottom: 1rem;
}

.hotel-card .features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.hotel-card .feature {
  background-color: #f3f4f6;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  color: #374151;
}

.hotel-card .price {
  font-size: 1.25rem;
  font-weight: 600;
  color: #059669;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background-color: #F3F4F6;
}

::-webkit-scrollbar-thumb {
  background-color: #D1D5DB;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #9CA3AF;
}

/* Loading button */
.loading-button {
  position: relative;
  overflow: hidden;
}

.loading-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Price slider styles */
.price-slider {
  width: 100%;
  margin: 2rem auto;
  position: relative;
  padding: 0 12px;
  max-width: 500px;
}

.price-slider .range-slider {
  width: 100%;
  height: 100px;
  position: relative;
  margin-bottom: 20px;
  padding: 0;
}

.price-slider .range-slider::before {
  content: '';
  position: absolute;
  left: -12px;
  right: -12px;
  bottom: 2px;
  height: 80px;
  background: linear-gradient(
    to right,
    rgba(5, 150, 105, 0.05) 0%,
    rgba(5, 150, 105, 0.1) 10%,
    rgba(5, 150, 105, 0.15) 20%,
    rgba(5, 150, 105, 0.2) 30%,
    rgba(5, 150, 105, 0.25) 40%,
    rgba(5, 150, 105, 0.3) 50%,
    rgba(5, 150, 105, 0.25) 60%,
    rgba(5, 150, 105, 0.2) 70%,
    rgba(5, 150, 105, 0.15) 80%,
    rgba(5, 150, 105, 0.1) 90%,
    rgba(5, 150, 105, 0.05) 100%
  );
  border-radius: 4px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100' preserveAspectRatio='none'%3E%3Cpath d='M-10 100 L-10 90 L-8 90 L-8 90 L-6 90 L-6 85 L-4 85 L-4 85 L-2 85 L-2 80 L0 80 L0 80 L2 80 L2 75 L4 75 L4 75 L6 75 L6 70 L8 70 L8 65 L10 65 L10 60 L12 60 L12 55 L14 55 L14 50 L16 50 L16 45 L18 45 L18 40 L20 40 L20 35 L25 35 L25 30 L30 30 L30 25 L35 25 L35 20 L40 20 L40 15 L45 15 L45 20 L50 20 L50 25 L55 25 L55 30 L60 30 L60 35 L65 35 L65 40 L70 40 L70 45 L75 45 L75 50 L80 50 L80 55 L85 55 L85 60 L90 60 L90 65 L95 65 L95 70 L100 70 L100 75 L105 75 L105 80 L110 80 L110 85 L115 85 L115 90 L120 90 L120 90 L125 90 L125 90 L130 90 L130 100 Z' fill='black'/%3E%3C/svg%3E");
  mask-size: 120% 100%;
  mask-position: -10% 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100' preserveAspectRatio='none'%3E%3Cpath d='M-10 100 L-10 90 L-8 90 L-8 90 L-6 90 L-6 85 L-4 85 L-4 85 L-2 85 L-2 80 L0 80 L0 80 L2 80 L2 75 L4 75 L4 75 L6 75 L6 70 L8 70 L8 65 L10 65 L10 60 L12 60 L12 55 L14 55 L14 50 L16 50 L16 45 L18 45 L18 40 L20 40 L20 35 L25 35 L25 30 L30 30 L30 25 L35 25 L35 20 L40 20 L40 15 L45 15 L45 20 L50 20 L50 25 L55 25 L55 30 L60 30 L60 35 L65 35 L65 40 L70 40 L70 45 L75 45 L75 50 L80 50 L80 55 L85 55 L85 60 L90 60 L90 65 L95 65 L95 70 L100 70 L100 75 L105 75 L105 80 L110 80 L110 85 L115 85 L115 90 L120 90 L120 90 L125 90 L125 90 L130 90 L130 100 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 120% 100%;
  -webkit-mask-position: -10% 0;
  z-index: 1;
}

.price-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: calc(100% + 24px);
  height: 2px;
  background: transparent;
  position: absolute;
  bottom: 0;
  margin: 0;
  left: -12px;
  right: -12px;
  pointer-events: none;
  z-index: 2;
}

.price-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  pointer-events: auto;
  border: 2px solid #059669;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-top: -11px;
  z-index: 3;
  position: relative;
}

.price-slider input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  pointer-events: auto;
  border: 2px solid #059669;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 3;
  position: relative;
}

.price-slider input[type="range"]:focus {
  outline: none;
}

.price-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  color: #6B7280;
  font-size: 0.875rem;
  padding: 0;
}

.price-display {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 500;
}

.price-display span {
  background: white;
  border: 1px solid #E5E7EB;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  min-width: 80px;
  text-align: center;
}

/* Track line between thumbs */
.price-slider .range-slider::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -12px;
  right: -12px;
  height: 2px;
  background: #E5E7EB;
  z-index: 1;
}