/* Satellite Travels - Main Stylesheet */

body {
  font-family: "Inter", sans-serif;
  background-color: #ffffff;
  /* User requested gradient: from-yellow-50/50 via-yellow-50/30 */
  background-image: linear-gradient(
    to bottom,
    rgba(255, 251, 235, 0.5),
    rgba(255, 251, 235, 0.3),
    #ffffff
  );
  color: #292524; /* Stone 800 */
}

/* Re-defining the glass look for Light Mode */
.glass-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.02),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
}

.glass-card-hover:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.05),
    0 10px 10px -5px rgba(0, 0, 0, 0.01);
}

/* New Accent Colors for Light Mode */
.text-accent {
  color: #3f4e4f;
}

.bg-accent {
  background-color: #2c3639;
}

.bg-accent-soft {
  background-color: #e7eae5;
}

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* Trip Planning Form Enhancements */
#tripPlanningForm input:focus,
#tripPlanningForm select:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#tripPlanningForm select {
  background-image: none;
}

#tripPlanningForm input[type="checkbox"]:checked {
  background-color: #10b981;
  border-color: #10b981;
}

#tripPlanningForm input[type="checkbox"]:focus {
  ring-color: #10b981;
}

/* Custom date input styling */
#tripPlanningForm input[type="date"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3e%3cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3e%3c/svg%3e");
  cursor: pointer;
}

/* Form animation */
#tripPlanningForm {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile form improvements */
@media (max-width: 640px) {
  #tripPlanningForm .grid {
    grid-template-columns: 1fr;
  }

  #tripPlanningForm input,
  #tripPlanningForm select {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* Responsive form grid adjustments */
@media (max-width: 1024px) {
  #tripPlanningForm .lg\\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  #tripPlanningForm .lg\\:grid-cols-4,
  #tripPlanningForm .sm\\:grid-cols-2 {
    grid-template-columns: 1fr;
  }
}