/* Basic Reset & Body Styles */
:root {
--primary-color: #007bff; /* Blue for primary actions/highlights */
--secondary-color: #6c757d; /* Grey for secondary actions */
--accent-color: #28a745; /* Green (not heavily used, but for potential future use) */
--background-light: #f8f9fa; /* Light grey for section backgrounds */
--background-dark: #e9ecef; /* Slightly darker grey for result displays */
--card-background: #ffffff; /* White for main card and destination items */
--text-color-dark: #343a40; /* Dark grey for main text */
--text-color-light: #6c757d; /* Lighter grey for subtle text */
--border-color: #dee2e6; /* Light grey for borders */
--shadow-color: rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
}

body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 20px;
background-color: var(--background-light);
color: var(--text-color-dark);
line-height: 1.6;
display: flex;
justify-content: center;
align-items: flex-start; /* Align content to the top */
min-height: 100vh; /* Full viewport height */
box-sizing: border-box;
}

.container {
background-color: var(--card-background);
border-radius: 12px;
box-shadow: 0 10px 30px var(--shadow-color);
padding: 30px;
width: 100%;
max-width: 800px; /* Max width for desktop view */
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 25px; /* Space between main sections */
}

/* Header Styling */
header {
text-align: center;
margin-bottom: 20px;
}

header h1 {
font-size: 2.8em;
color: var(--primary-color);
margin-bottom: 5px;
font-weight: 600; /* Semi-bold */
}

header p {
font-size: 1.1em;
color: var(--text-color-light);
}

/* Card Sections Styling */
.input-card, .destination-card, .action-section {
background-color: var(--background-light);
border-radius: 8px;
padding: 25px;
border: 1px solid var(--border-color);
}

h2 {
font-size: 1.8em;
color: var(--primary-color);
margin-top: 0;
margin-bottom: 20px;
font-weight: 600;
}

/* Form Elements Styling */
.form-group {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--text-color-dark);
font-size: 0.95em;
}

select, input[type="datetime-local"] {
width: 100%;
padding: 12px 15px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 1em;
color: var(--text-color-dark);
background-color: var(--card-background);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
box-sizing: border-box; /* Ensures padding doesn't affect width */
}

select:focus, input[type="datetime-local"]:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Focus highlight */
outline: none;
}

/* Button Styling */
.button-primary, .button-secondary {
padding: 12px 25px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 1.1em;
font-weight: 600;
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px; /* Space between emoji and text */
}

.button-primary {
background-color: var(--primary-color);
color: white;
}

.button-primary:hover {
background-color: #0056b3;
transform: translateY(-2px); /* Lift effect */
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}

.button-secondary {
background-color: var(--secondary-color);
color: white;
}

.button-secondary:hover {
background-color: #5a6268;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(108, 117, 125, 0.3);
}

.action-section {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

/* Destination Item Styling (for dynamically added items) */
.destination-item {
background-color: var(--card-background);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 15px 20px;
margin-bottom: 15px; /* Space between destination items */
display: flex;
flex-direction: column; /* Stack elements vertically */
gap: 15px; /* Space between elements within an item */
position: relative; /* For positioning the remove button */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

.destination-item:last-child {
margin-bottom: 0; /* No margin on the last item */
}

.destination-item .form-group {
margin-bottom: 0; /* Remove extra margin from inherited form-group */
}

.remove-destination {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 1.5em; /* Larger 'X' */
cursor: pointer;
color: var(--secondary-color);
transition: color 0.3s ease, transform 0.2s ease;
padding: 5px; /* Make clickable area larger */
border-radius: 50%; /* Circular hit area */
line-height: 1; /* Adjust vertical alignment */
}

.remove-destination:hover {
color: #dc3545; /* Red on hover */
transform: scale(1.1);
}

.result-display {
background-color: var(--background-dark);
padding: 10px 15px;
border-radius: 6px;
font-weight: 600;
color: var(--primary-color);
text-align: center;
font-size: 1.1em;
border: 1px dashed var(--border-color); /* Dashed border for results */
}

.result-display.empty-result {
color: var(--text-color-light);
font-weight: 400;
font-style: italic;
}

/* Footer Styling */
footer {
text-align: center;
margin-top: 30px;
font-size: 0.9em;
color: var(--text-color-light);
}

/* --- Responsiveness (Media Queries) --- */

@media (max-width: 768px) { /* Tablets and smaller */
body {
padding: 15px;
}

.container {
padding: 20px;
gap: 20px; /* Reduce gap between sections */
}

header h1 {
font-size: 2.2em;
}

h2 {
font-size: 1.5em;
}

.button-primary, .button-secondary {
width: 100%; /* Full width buttons */
padding: 15px;
font-size: 1em;
}

.action-section {
flex-direction: column; /* Stack buttons vertically */
gap: 15px;
}

.destination-item {
padding: 15px;
}

.remove-destination {
top: 8px;
right: 8px;
font-size: 1.3em;
}

.result-display {
font-size: 1em;
}
}

@media (max-width: 480px) { /* Small phones */
body {
padding: 10px;
}

.container {
padding: 15px;
gap: 15px;
}

header h1 {
font-size: 1.8em;
}

h2 {
font-size: 1.3em;
}

select, input[type="datetime-local"] {
padding: 10px;
}
}