/**
 * Custom Booking Plugin Stylesheet (style.css)
 * Version: 1.2
 */

/* --------------------------------------------------------------
Form Container & Layout
-------------------------------------------------------------- */
#custom-booking-form {
    max-width: 700px;
    margin: 30px auto;
    padding: 25px 30px 30px 30px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

/* Clear floats from inline styles (if present) */
#custom-booking-form::after {
    content: "";
    display: table;
    clear: both;
}

.booking-row {
    margin-bottom: 20px;
    box-sizing: border-box;
}

/* Target the rows intended to be half-width (based on inline style - fragile, better to use classes) */
.booking-row[style*="width: 50%"] {
    box-sizing: border-box;
}
/* Specific padding overrides for the floated pairs */
.booking-row[style*="padding-right: 10px"] {
    padding-left: 0 !important;
}
.booking-row[style*="padding-left: 10px"] {
    padding-right: 0 !important;
}

/* Last row spacing adjustment */
.booking-row:last-of-type { /* More specific than last-child */
    margin-bottom: 0;
}

/* --------------------------------------------------------------
Labels
-------------------------------------------------------------- */
.booking-row label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #444;
    font-size: 0.95em;
    line-height: 1.4;
}

/* --------------------------------------------------------------
Inputs, Selects (and Flatpickr Text Inputs)
-------------------------------------------------------------- */
#custom-booking-form input[type="text"],
#custom-booking-form input[type="date"], /* Native fallback */
#custom-booking-form input[type="time"],  /* Native fallback */
#custom-booking-form select {
    display: block;
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 9px;
    box-sizing: border-box;
    font-size: 1rem;
    color: #333;
    background-color: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    height: 48px;
}

/* Focus States */
#custom-booking-form input[type="text"]:focus,
#custom-booking-form input[type="date"]:focus,
#custom-booking-form input[type="time"]:focus,
#custom-booking-form select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
    outline: none;
}

/* Placeholder text style */
#custom-booking-form input::placeholder {
    color: #999;
    opacity: 1;
}

/* Custom Select Arrow */
#custom-booking-form select {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%208l5%205%205-5z%22%20fill%3D%22%23777%22%2F%3E%3C%2Fsvg%3E');
   background-repeat: no-repeat;
   background-position: right 15px center;
   background-size: 14px;
   padding-right: 40px; /* Space for arrow */
}

/* Ensure Flatpickr inputs look consistent */
#custom-booking-form input.flatpickr-input {
    cursor: pointer;
}

/* --------------------------------------------------------------
Total Price & Instructions
-------------------------------------------------------------- */
#booking-total {
    display: block;
    /* margin-top: 15px; No extra margin needed if row has padding */
    /* padding-top: 15px; Applied via inline style on row */
    /* border-top: 1px dashed #ddd; Applied via inline style on row? Better here */
    font-size: 1.4em;
    font-weight: bold;
    color: #1e888d;
    text-align: center;
    line-height: 1.3;
    margin-bottom: 5px; /* Space before instruction */
}

/* Style for the booking instructions note */
#booking-instructions.booking-note {
    font-size: 0.85em;
    color: #555;
    margin-top: 0; /* Reset top margin if p has default */
    margin-bottom: 0;
    text-align: center;
    line-height: 1.4;
    font-style: italic;
}


/* --------------------------------------------------------------
Submit Button
-------------------------------------------------------------- */
#custom-booking-form button[type="submit"] {
    display: block;
    width: 100%;
    padding: 14px 25px;
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    background-color: #1e888d;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.1s ease;
    /* margin-top: 10px; Spacing handled by row margin */
}

#custom-booking-form button[type="submit"]:hover,
#custom-booking-form button[type="submit"]:focus {
    background-color: #0e5e60;
    outline: none;
}

#custom-booking-form button[type="submit"]:active {
    background-color: #004085;
    transform: scale(0.98);
}

/* --------------------------------------------------------------
Responsiveness
-------------------------------------------------------------- */
@media (max-width: 600px) {
    #custom-booking-form {
        padding: 20px;
        margin: 20px 10px;
    }

    /* Stack the half-width elements */
    .booking-row[style*="width: 50%"] {
        width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0; /* Reset potential inline top margin */
    }
     /* Add margin between stacked elements (targets second element in floated pairs) */
    .booking-row[style*="padding-left: 10px"] {
         margin-top: 20px;
    }

    #booking-total,
    #booking-instructions.booking-note {
        text-align: left; /* Align left on small screens */
    }
     #booking-total {
         font-size: 1.25em;
     }

    #custom-booking-form button[type="submit"] {
        padding: 14px 20px;
        font-size: 1em;
    }
}

/* Optional Flatpickr Theme Overrides */
/* .flatpickr-calendar { border-radius: 6px; box-shadow: 0 5px 15px rgba(0,0,0,0.15); } */
/* .flatpickr-day.selected { background: #007bff; border-color: #007bff; } */


/* --------------------------------------------------------------
Inline Error Message Styling (Add this section)
-------------------------------------------------------------- */
.booking-error-message {
    color: #D8000C; /* Standard error red color */
    background-color: #FFD2D2; /* Light red background */
    border: px solid #D8000C; /* Red border */
    padding: 10px 15px; /* Padding inside the message box */
    margin-top: 15px; /* Space between instructions/total and error */
    margin-bottom: 0;
    border-radius: 5px; /* Match other elements or adjust */
    text-align: center; /* Center the error text */
    font-weight: normal; /* Adjust as needed */
    font-style: normal; /* Override potential italics */
    font-size: 0.9em; /* Slightly smaller font */
    clear: both; /* Ensure it appears below floated elements if needed */
}

/* Optional: Adjust alignment on small screens */
@media (max-width: 600px) {
     .booking-error-message {
          text-align: left; /* Align left on small screens */
     }
     /* Ensure other elements are also left-aligned if error exists */
     #custom-booking-form:has(.booking-error-message) #booking-total,
     #custom-booking-form:has(.booking-error-message) #booking-instructions.booking-note {
         /* text-align: left; */ /* Already handled by main responsive rule */
     }
}

/* Trip Type Tabs */
.trip-type-tabs {
    display: flex;
    margin-bottom: 25px;
    border-bottom: 2px solid #e0e0e0;
}

.trip-type-tab {
    flex: 1;
    text-align: center;
    padding: 15px;
    cursor: pointer;
    font-weight: 600;
    color: #666;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.trip-type-tab.active {
    color: #1e888d;
    border-bottom-color: #1e888d;
}

.trip-type-tab:hover {
    color: #1e888d;
}

.trip-type-tab input[type="radio"] {
    display: none;
}

/* Return Date/Time Fields */
.return-fields {
    display: none;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #e0e0e0;
}

.return-fields.visible {
    display: block;
}