/* Price Calculator Styles - XSnowboard Travel */

.tour-list-card {
  background: #E8F4F8;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tour-list-card .title {
  color: #2c3e50;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
}

.price-card-container {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.price-info .area-name {
  color: #34495e;
  font-weight: 500;
  margin-bottom: 10px;
}

.price-review .light-pera {
  color: #7f8c8d;
  font-size: 14px;
}

#display-price {
  color: #e74c3c !important;
  font-size: 24px;
  font-weight: 700;
}

.person-counter-container {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 20px;
}

.person-counter-container .bg-light {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: 2px solid #bdc3c7;
  border-radius: 25px;
}

#decrease-btn,
#increase-btn {
  background: #3498db;
  border: 2px solid #2980b9;
  color: white;
  transition: all 0.3s ease;
  width: 45px;
  height: 45px;
}

#decrease-btn:hover:not(:disabled),
#increase-btn:hover:not(:disabled) {
  background: #2980b9;
  border-color: #1f4e79;
  transform: scale(1.05);
}

#decrease-btn:disabled,
#increase-btn:disabled {
  background: #bdc3c7;
  border-color: #95a5a6;
  cursor: not-allowed;
  opacity: 0.6;
}

#person-count {
  color: #2c3e50;
  font-size: 20px;
  font-weight: 600;
  min-width: 40px;
  text-align: center;
}

.price-breakdown-container {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  margin-bottom: 25px;
}

.price-breakdown-container .bg-light {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #d5dbdb;
  border-radius: 10px;
  padding: 20px;
}

.price-breakdown-container .fw-bold {
  color: #2c3e50;
  font-size: 16px;
}

.price-details {
  font-size: 15px;
  color: #34495e;
}

.price-details .text-primary {
  color: #e74c3c !important;
  font-size: 18px;
}

#price-per-person,
#subtotal,
#total-amount {
  color: #27ae60;
  font-weight: 600;
}

#total-amount {
  color: #e74c3c !important;
  font-size: 18px;
  font-weight: 700;
}

#participant-text {
  color: #7f8c8d;
  font-size: 14px;
}

/* Booking Button */
.btn-secondary-sm.radius-30 {
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
  border: none;
  color: white;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 30px;
  border-radius: 30px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.btn-secondary-sm.radius-30:hover {
  background: linear-gradient(135deg, #E85A2B 0%, #E6821A 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.btn-secondary-sm.radius-30:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(255, 107, 53, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .tour-list-card {
    padding: 20px;
    margin-bottom: 30px;
  }

  .price-card-container {
    padding: 15px;
  }

  .person-counter-container {
    padding: 12px;
  }

  #decrease-btn,
  #increase-btn {
    width: 40px;
    height: 40px;
  }

  #person-count {
    font-size: 18px;
  }

  #display-price {
    font-size: 20px;
  }

  .price-breakdown-container .bg-light {
    padding: 15px;
  }
}

/* Animation for price changes */
@keyframes priceUpdate {
  0% { opacity: 0.7; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

.price-update-animation {
  animation: priceUpdate 0.3s ease-in-out;
}

/* Hover effects */
.tour-list-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

/* Icon styling for breakdown */
.text-warning {
  font-size: 18px;
}

/* Custom scrollbar for mobile */
.tour-list-card::-webkit-scrollbar {
  width: 6px;
}

.tour-list-card::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.tour-list-card::-webkit-scrollbar-thumb {
  background: rgba(52, 152, 219, 0.5);
  border-radius: 3px;
}

.tour-list-card::-webkit-scrollbar-thumb:hover {
  background: rgba(52, 152, 219, 0.7);
}