/* Basic reset for consistent styling */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4; /* Light background for contrast */
    padding: 20px;
}

/* Container for the form to give it a card-like appearance */
.booking-form-container {
    max-width: 400px;
    margin: auto;
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.itenary-container {
    width: 600px;
    margin: auto;
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* General form group spacing */
.form-group {
    margin-bottom: 25px;
}

/* Style for section labels (Villa Selection, Duration, etc.) */
.form-group > label {
    display: block;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    font-size: 16px;
}

/* --- Villa Selection Custom Dropdown Styling --- */

/* Wrapper for the select to mimic the bordered input field */
.custom-select {
    position: relative;
    display: block;
}

#villa-select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    /* appearance: none; /* Remove default arrow in modern browsers */
    -webkit-appearance: none; 
    background-color: #fff;
    font-size: 16px;
    cursor: pointer;
    /* background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%23333"><polygon points="0,3 10,3 5,8"/></svg>'); */
    background-repeat: no-repeat;
    background-position: right 15px center;
}

/* Mimicking the arrow from the image with a subtle arrow icon */
.custom-select::after {
    content: 'v'; /* A simple 'v' or you can use a different character/image */
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #333;
    font-size: 14px;
}

/* --- Duration of Stay Styling --- */

.date-inputs {
    display: flex;
    gap: 10px; /* Space between the two date inputs */
}

.date-inputs input {
    flex-grow: 1;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    text-align: center;
    color: #555;
    font-size: 16px;
    max-width: 170px;
}

/* Placeholder styling to match the light grey text in the image */
.date-inputs input::placeholder {
    color: #aaa;
}


/* --- Number of Travellers Grid Styling --- */

.travellers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    gap: 15px; /* Space between grid items */
}

/* Label for each traveller type (Adults, Children, etc.) */
.travellers-grid label {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

/* Input field for traveller count */
.travellers-grid input[type="number"] {
    width: 100%;
    padding: 10px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: left; /* Keep text aligned left for numbers */
    font-size: 16px;
    color: #333; /* Color of the numbers (2, 0, etc.) */
}

/* Remove default number input spin buttons for a cleaner look */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

.interests-container {
    max-width: 450px;
    margin: auto;
    background: #ffffff;
    padding: 20px 20px 30px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.interests-container h2 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
}

/* --- Chip Group Layout --- */

.chips-group {
    display: flex;
    flex-wrap: wrap; /* Allows chips to wrap to the next line */
    gap: 10px; /* Space between the chips */
    margin-bottom: 20px;
}

/* --- Individual Chip Styling --- */

.chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: #f7f7f7;
    border-radius: 30px;
    border: 1px solid #ddd;
    cursor: pointer;
    font-size: 15px;
    transition: 0.2s;
}

/* --- Selected Chip Styling (Nature) --- */

/* Hide checkbox */
.chip input {
    display: none;
}

/* Selected State */
.chip input:checked + .icon,
.chip input:checked ~ span {
    color: #e0f2fe;
}

.chip input:checked + .icon,
.chip input:checked ~ span {
    font-weight: 600;
}

.chip input:checked ~ * {
    color: white;
}

.chip input:checked {
    background-color: #e0f2fe;
}

.chip input:checked + .icon,
.chip input:checked {
    background:#e0f2fe;
}

/* Chip container when selected */
.chip:has(input:checked) {
    background: #e0f2fe;
    border-color:  #1d4ed8;
}
/* --- Custom Input Field Styling --- */

.custom-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Include padding/border in total width */
    font-size: 16px;
    color: #555;
    margin-top: 10px;
}

.custom-input::placeholder {
    color: #aaa;
}

/* Example using CSS Grid for a 3-column layout */
fieldset {
  /* Remove default border for cleaner look if desired */
  border: none; 
  padding: 0;
  margin: 0;
}

legend {
  font-weight: bold;
  padding-bottom: 10px; /* Spacing below the title */
}

/* Container for the options */
.options-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns */
  gap: 10px; /* Spacing between grid items */
}

/* Adjust as needed for specific alignment */
.options-container > div {
  white-space: nowrap; /* Prevents option from breaking across lines */
}

/* Styling for the container to put Start and End time side-by-side */
.time-inputs-container {
  display: flex;
  gap: 20px; /* Space between the two time fields */
  margin-top: 10px; /* Space below the checkbox line */
}

/* Styling for each individual time input group */
.time-input-group {
  display: flex;
  flex-direction: column; /* Stacks the label above the input box */
}

/* Optional styling to match the look of the input boxes in the image */
.time-input-group input[type="time"] {
  padding: 10px;
  border: 1px solid #ccc; /* Light grey border */
  border-radius: 4px; /* Rounded corners */
  font-size: 16px;
  color: #777; /* Light grey text color for the value */
}

/* --- Generate Itinerary Button Styling --- */
.generate-itinerary-button {
    /* Background and Text Color */
    background-color: #0056FF; /* A vibrant blue color */
    color: white; 
    
    /* Padding and Text */
    padding: 12px 24px; /* Vertical and horizontal padding */
    font-size: 18px;
    font-weight: 500; /* Semi-bold text */
    border: none;
    cursor: pointer; /* Change mouse cursor to indicate clickability */

    /* Shape and Corners */
    border-radius: 30px; /* Highly rounded corners (Pill-shaped) */
    
    /* Shadow (for a lift/3D effect) */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
    
    /* Layout for Icon and Text */
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Space between the icon and the text */
    
    /* Transition for hover/active effects (optional, but good practice) */
    transition: background-color 0.2s, box-shadow 0.2s;
}

/* Style for the icon */
.generate-itinerary-button i {
    font-size: 20px; /* Slightly larger than the text */
}

/* Hover effect (darkens the button slightly when moused over) */
.generate-itinerary-button:hover {
    background-color: #0045CC; 
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* Active/Clicked effect (optional: makes it look pressed) */
.generate-itinerary-button:active {
    background-color: #003399;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.row {
    display: flex;
    gap: 20px; /* space between divs */
}

@media (max-width: 768px) {
    .row {
        flex-direction: column;
    }
    .itenary-container{
        max-width: 400px;
    }
}

.icon-btn {
    padding: 8px;
    border: none;
    background: #eaeaea;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
}

.trip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.trip-title {
    font-size: 22px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-icon {
    font-size: 18px;
    color: #333;
    cursor: pointer;
    transition: color 0.2s ease;
}

.edit-icon:hover {
    color: #0066cc;
}

.trip-title-input {
    font-size: 22px;
    font-weight: 600;
    padding: 8px 12px;
    border: 2px solid #0066cc;
    border-radius: 4px;
    font-family: inherit;
    width: auto;
    min-width: 200px;
}

.action-buttons {
    display: flex;
    gap: 10px;
}

.btn {
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    color: white;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.btn-green {
    background: #28a745;
}

.btn-blue {
    background: #007bff;
}

/* Budget Box */
.budget-box {
    background: #eef4ff;
    padding: 20px;
    border-radius: 10px;
}

.budget-row {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.budget-item {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.amount {
    font-size: 20px;
    font-weight: 700;
    color: #0056d6;
}

.label {
    font-size: 14px;
    color: #666;
}

/* Responsive */
@media (max-width: 768px) {
    .trip-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .budget-row {
        flex-direction: column;
        gap: 15px;
        text-align: left;
    }
}