/* style.css - Custom styles and animations */

/* Apply Inter font, ensuring it's available or falls back to sans-serif */
body {
  font-family: 'Inter', sans-serif;
}

/* General input and select focus styles for better UX */
input:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); /* Tailwind blue-500 with opacity */
}

/* Button active state for visual feedback */
button:active {
  transform: scale(0.98);
}

/* Map specific styles */
#map {
  transition: box-shadow 0.3s ease-in-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Stronger shadow for map */
}

/* Language switch button styling */
.lang-switch {
  background-color: #e2e8f0; /* gray-200 */
  border: 1px solid #cbd5e0; /* gray-300 */
  padding: 0.25rem 0.5rem; /* px-2 py-1 */
  border-radius: 0.375rem; /* rounded-md */
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
}

.lang-switch:hover {
  background-color: #cbd5e0; /* gray-300 */
}

.lang-switch.active {
  background-color: #a7f3d0; /* green-200 */
  border-color: #34d399; /* green-500 */
  font-weight: bold;
}

/* Break Option Button Styling */
.break-option-btn {
  flex: 1; /* Make buttons take equal width */
  background-color: #f3f4f6; /* Light gray for inactive, Tailwind gray-100 */
  border: 1px solid #d1d5db; /* Tailwind gray-300 */
  padding: 0.6rem 1.2rem; /* Slightly more padding for a "buttony" feel */
  border-radius: 9999px; /* Fully rounded corners */
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.1s ease-in-out;
  text-align: center;
  font-weight: 600; /* Semi-bold font weight */
  color: #6b7280; /* Darker gray for inactive text, Tailwind gray-500 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
  display: inline-flex; /* Use flex to center content if needed */
  align-items: center;
  justify-content: center;
  min-width: 120px; /* Ensure a minimum width for buttons */
  position: relative;
  overflow: hidden;
}

.break-option-btn:hover {
  background-color: #e5e7eb; /* Slightly darker gray on hover, Tailwind gray-200 */
  color: #4b5563; /* Tailwind gray-700 on hover */
}

.break-option-btn.active {
  background-color: #10b981; /* Tailwind green-500 for active */
  color: #ffffff; /* White text for active */
  border-color: #059669; /* Darker green border for active */
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.2), 0 0 0 3px rgba(16, 185, 129, 0.3); /* More prominent shadow and subtle glow for active */
  transform: translateY(-1px); /* Slight lift effect */
}

/* iOS-style Toggle Switch Styling */
/* Hide the native checkbox */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Toggle track (the background bar) */
.toggle-track {
  position: relative;
  width: 48px; /* w-12 */
  height: 24px; /* h-6 */
  border-radius: 9999px; /* rounded-full */
  background-color: #d1d5db; /* gray-400 for inactive */
  transition: background-color 0.2s ease-in-out;
}

/* Toggle thumb (the draggable circle) */
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px; /* w-5 */
  height: 20px; /* h-5 */
  border-radius: 9999px; /* rounded-full */
  background-color: #ffffff; /* white */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow */
  transition: transform 0.2s ease-in-out;
}

/* State when checkbox is checked */
#useCurrentTimeToggle:checked + .toggle-track {
  background-color: #3b82f6; /* blue-500 for active */
}

#useCurrentTimeToggle:checked + .toggle-track .toggle-thumb {
  /*
    นี่คือส่วนที่คุณต้องปรับค่า 'translateX' ครับ
    ลองลดค่าจาก 22px เป็น 21px หรือ 20px ดูครับ
    เป้าหมายคือให้วงกลมอยู่พอดีในกรอบ โดยเหลือพื้นที่ 2px ทางขวา
  */
  transform: translateX(11px); /* ลองปรับค่านี้เป็น 21px หรือ 20px */ 
}

/* Styling for disabled datetime input */
input[type="datetime-local"]:disabled {
  background-color: #f3f4f6; /* gray-100 */
  color: #6b7280; /* gray-500 */
  cursor: not-allowed;
  opacity: 0.7; /* Make it slightly faded */
}


/* Responsive adjustments for smaller screens */
@media (max-width: 640px) {
  #map {
    height: 200px; /* Shorter map on mobile */
  }
  .max-w-md {
    max-width: 100vw; /* Full width on small screens */
    border-radius: 0; /* No border-radius on full width */
    padding: 1rem; /* Adjust padding */
  }
  .lang-switch {
    padding: 0.15rem 0.3rem; /* Smaller padding for language buttons */
    font-size: 0.75rem; /* text-xs */
  }
  .break-option-btn, .departure-switch-btn { /* Apply to both break and departure buttons */
    padding: 0.5rem 1rem; /* Smaller padding for buttons on mobile */
    font-size: 0.875rem; /* text-sm */
    min-width: 100px; /* Adjust min-width for mobile */
  }
}