/* Container */
.booking-container {
    max-width: 1000px; /* Increased from 900px to 1200px */
    width: 95%; /* Increased from 100% to use more screen space */
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(52, 152, 219, 0.2);
    overflow: hidden;
    animation: slideUp 0.8s ease-out;
    margin-top: 80px;
    margin-bottom: 80px;

}

/* pickup and dropoff location css */
/* Checkbox Styles */
.checkbox-group {
    margin: 0.75rem 0;
}

.checkbox-item {
    display: flex;
    align-items: center;
    margin: 0.5rem 0;
}

.checkbox-input {
    display: none;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    color: #2c3e50;
    transition: color 0.3s ease;
    user-select: none;
}

.checkbox-label:hover {
    color: #3498db;
}

/* Enhanced checkbox content for service options */
.checkbox-content {
    display: flex;
    flex-direction: column;
    margin-left: 0.5rem;
}

.checkbox-content strong {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.checkbox-content small {
    color: #7f8c8d;
    font-size: 0.85rem;
    line-height: 1.3;
}

/* Price section styling */
.price-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #3498db;
    border-radius: 12px;
    margin: 1.5rem 0;
    position: relative;
    overflow: hidden;
}

.price-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3498db, #2ecc71, #f39c12, #e74c3c);
}

.price-section .section-title {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.price-section .form-input.price-display-field {
    background: white;
    border: 2px solid #27ae60;
    font-size: 1.5rem;
    font-weight: 700;
    color: #27ae60;
    text-align: center;
    padding: 1rem;
}

.price-section .price-note {
    color: #7f8c8d;
    font-style: italic;
    text-align: center;
    margin-top: 0.5rem;
}

/* Readonly field styling */
.readonly-field {
    background-color: #f8f9fa !important;
    border: 2px solid #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 0.8;
}

.readonly-field:focus {
    border-color: #e9ecef !important;
    box-shadow: none !important;
    outline: none !important;
}

.readonly-field:hover {
    border-color: #e9ecef !important;
}

/* Readonly hint styling */
.readonly-hint {
    color: #6c757d !important;
    font-style: italic;
    font-weight: 500;
}

/* Disabled select styling */
select.readonly-field {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
}

select.readonly-field option {
    color: #6c757d !important;
    background-color: #f8f9fa !important;
}

.checkbox-dot {
    width: 20px;
    height: 20px;
    border: 2px solid #bdc3c7;
    border-radius: 4px;
    margin-right: 0.75rem;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-input:checked + .checkbox-label .checkbox-dot {
    background-color: #3498db;
    border-color: #3498db;
}

.checkbox-input:checked + .checkbox-label .checkbox-dot::after {
    content: '✓';
    color: white;
    font-weight: bold;
    font-size: 12px;
}

.checkbox-label:hover .checkbox-dot {
    border-color: #3498db;
    transform: scale(1.05);
}
/* End pickup and dropoff location css */

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

/* Header */
.booking-header {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    padding: 30px;
    
    text-align: center;
    position: relative;
    overflow: hidden;
}

.booking-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.05) 10px,
        rgba(255,255,255,0.05) 20px
    );
    animation: float 20s linear infinite;
}

@keyframes float {
    0% { transform: translateX(-50px) translateY(-50px); }
    100% { transform: translateX(50px) translateY(50px); }
}

.booking-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.booking-header p {
    font-size: 1.1rem;
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

/* Form Content */
.form-content {
    padding: 40px;
}

/* Contact Section */
.contact-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    border: 2px solid #dee2e6;
}

.section-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title i {
    color: #3498db;
}

/* Form Groups */
.form-group {
    margin-bottom: 25px;
    position: relative;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Labels */
.form-label {
    display: block;
    font-weight: 600; /*Increaces from 500*/
    color: #2c3e50; /* darkened from c3e50*/
    margin-bottom: 8px;
    font-size: 1rem; /*increased from 0.95 */
}

.required::after {
    content: '*';
    color: #e74c3c;
    margin-left: 4px;
}

/* Input Fields */
.form-input {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 400;
    background: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.form-input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
    transform: translateY(-2px);
}

.form-input::placeholder {
    color: #95a5a6;
    font-weight: 400;
}

/* Input Error States */
.form-input.error {
    border-color: #e74c3c;
    background-color: #fdf2f2;
    animation: shake 0.5s ease-in-out;
}

/* David, 11-Aug-2026: Terms & Conditions' checkbox has no border of its own
   to redden the way .form-input.error does -- highlights the whole section
   instead (real gap: this section was previously invisible on failure
   beyond a small line of red text, easy to miss on the same stage as the
   Pay Now/Submit button). */
.checkbox-section-error {
    border: 1px solid #e74c3c;
    border-radius: 8px;
    background-color: #fdf2f2;
    padding: 0.75rem;
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.form-input.success {
    border-color: #27ae60;
    background-color: #f8fff8;
}

/* Error Messages */
.error-message {
    color: #e74c3c;
    font-size: 0.85rem;
    margin-top: 8px;
    display: none;
    font-weight: 500;
}

.error-message.show {
    display: block;
    animation: fadeInError 0.3s ease-out;
}

@keyframes fadeInError {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.warning-message {
    color: #f39c12;
    font-size: 0.85rem;
    margin-top: 8px;
    display: none;
    font-weight: 500;
}

.warning-message.show {
    display: block;
    animation: fadeInError 0.3s ease-out;
}

/* Phone Input Group */
.phone-group {
    display: flex;
    gap: 0;
}

.phone-group .form-input:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    flex: 0 0 150px;
}

.phone-group .form-input:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    flex: 1;
}

/* Voucher Section */
.voucher-section {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.voucher-section .form-input {
    flex: 1;
}

.voucher-btn {
    padding: 15px 25px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.voucher-btn:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);
}

/* Tab Navigation */
.tab-navigation {
    display: flex;
    background: #f8f9fa;
    border-radius: 15px;
    padding: 8px;
    margin-bottom: 30px;
    gap: 8px;
}

.tab-btn {
    flex: 1;
    padding: 18px 24px;
    background: #b5d1e4;
    
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #7f8c8d;
    position: relative;
}

.tab-btn.active {
    background: #3498db;
    color: white;
    box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);
    transform: translateY(-2px);
}

.tab-btn:hover:not(.active) {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
}

/* Tab Content */
.tab-content {
    display: none;
    animation: fadeInTab 0.5s ease-out;
}

.tab-content.active {
    display: block;
}

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

/* Form Sections */
.form-section {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.form-section:hover {
    border-color: #dee2e6;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* Radio Groups */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
}

.radio-item {
    position: relative;
}

.radio-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    color: #2c3e50;
    min-width: fit-content;
}

.radio-label:hover {
    border-color: #3498db;
    background: rgba(52, 152, 219, 0.05);
}

.radio-input:checked + .radio-label {
    background: #3498db;
    color: white;
    border-color: #3498db;
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.radio-input:disabled + .radio-label {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f8f9fa;
}

.radio-dot {
    width: 20px;
    height: 20px;
    border: 2px solid #bdc3c7;
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
}

.radio-input:checked + .radio-label .radio-dot {
    border-color: white;
    background: white;
}

.radio-input:checked + .radio-label .radio-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #3498db;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Dynamic Fields */
.dynamic-fields {
    margin-top: 20px;
    animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        max-height: 1000px;
        transform: translateY(0);
    }
}

/* Textarea */
.form-textarea {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

/* Car Selection */
.car-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.car-card {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
}

.car-card:hover {
    border-color: #3498db;
    box-shadow: 0 10px 30px rgba(52, 152, 219, 0.2);
    transform: translateY(-5px);
}

.car-card.selected {
    border-color: #3498db;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    box-shadow: 0 15px 35px rgba(52, 152, 219, 0.4);
}

.car-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.car-card:hover .car-image {
    transform: scale(1.05);
}

.car-info {
    padding: 20px;
}

.car-name {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.car-features {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* File Upload */
.file-upload {
    position: relative;
    display: inline-block;
    width: 100%;
}

.file-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 25px;
    border: 2px dashed #bdc3c7;
    border-radius: 12px;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.file-label:hover {
    border-color: #3498db;
    background: rgba(52, 152, 219, 0.05);
}

.file-input:focus + .file-label {
    border-color: #3498db;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
}

.file-preview {
    margin-top: 15px;
    padding: 15px;
    background: #e8f5e8;
    border-radius: 8px;
    display: none;
}

/* Submit Button */
.submit-btn {
    width: 100%;
    padding: 20px;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    border: none;
    border-radius: 15px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    margin-top: 30px;
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.submit-btn:hover::before {
    left: 100%;
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(52, 152, 219, 0.4);
}

.submit-btn:active {
    transform: translateY(-1px);
}

.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Loading Spinner */
.loading-spinner {
    display: none;
    margin-right: 10px;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-50px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.modal-icon.success {
    color: #27ae60;
}

.modal-icon.error {
    color: #e74c3c;
}

/* Responsive Design */
@media (max-width: 768px) {
    .booking-container {
        margin: 10px;
        border-radius: 15px;
    }

    .form-content {
        padding: 25px;
    }

    .contact-section {
        padding: 20px;
    }

    .booking-header {
       
        padding: 25px;
    }

    .booking-header h1 {
        font-size: 2rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .tab-navigation {
        flex-direction: column;
        gap: 10px;
    }

    .radio-group {
        flex-direction: column;
    }

    .radio-label {
        width: 100%;
    }

.phone-group {
    display: flex;
    gap: 0;
}

.phone-group .form-input {
    height: 56px; /* Fixed height for consistency */
    box-sizing: border-box;
}

.phone-group .form-input:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    flex: 0 0 150px;
}

.phone-group .form-input:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    flex: 1;
}

/* Select specific styling to prevent height issues */
.phone-group select.form-input {
    height: 56px !important;
    min-height: 56px;
    max-height: 56px;
    overflow: hidden;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 12px;
    padding-right: 40px;
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
    .phone-group {
        flex-direction: column;
        gap: 15px;
    }

    .phone-group .form-input {
        height: 56px !important; /* Enforce consistent height */
        min-height: 56px;
        flex: none;
    }

    .phone-group .form-input:first-child,
    .phone-group .form-input:last-child {
        border-radius: 12px;
        border: 2px solid #e9ecef;
    }
    
    /* Specific styling for select on mobile */
    .phone-group select.form-input {
        height: 56px !important;
        max-height: 56px !important;
        overflow: hidden;
    }
}

/* Additional fallback for very small screens */
@media (max-width: 480px) {
    .phone-group select.form-input,
    .phone-group input.form-input {
        height: 52px !important;
        min-height: 52px;
        max-height: 52px;
    }
}

    .phone-group .form-input:first-child,
    .phone-group .form-input:last-child {
        border-radius: 12px;
        border: 2px solid #e9ecef;
    }

    .voucher-section {
        flex-direction: column;
    }

    .car-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
   

    .booking-header h1 {
        font-size: 1.8rem;
    }

    .form-content {
        padding: 20px;
    }

    .form-section {
        padding: 20px;
    }
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus indicators */
*:focus {
    outline: 2px solid #3498db;
    outline-offset: 2px;
}

.form-input:focus,
.radio-input:focus + .radio-label {
    outline: none;
}

/* Item P contextual help links (docs/ADDENDUM_item_P_site_ia_restructure.md,
   12-Aug-2026): small "What's this?" links next to CDW/young-driver/extra-
   driver/licence-photo/card-hold, pointing at the matching anchor on the
   new /car-hire/insurance page. target="_blank" deliberately -- this form
   has its own draft-save/resume machinery precisely because losing
   in-progress booking data is a known, previously-fixed problem elsewhere
   in this project; a contextual help link must not risk the same thing by
   navigating the client away from their booking. Presentation-only, no
   change to any pricing/validation logic. */
.field-help-link {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.8rem;
    color: #3498db;
    text-decoration: underline;
    white-space: nowrap;
}

.field-help-link:hover {
    color: #2980b9;
}

/* ---------------------------------------------------------------------------
   David, 08-Sep-2026: "keep the pickup details and drop-off details grouped
   together under the same column such that all the pickup details are on the
   left and all the dropoff details are on the right."

   The four blocks are siblings in source order -- pickup toggle, pickup
   address, drop-off toggle, drop-off address -- so the columns are assigned
   explicitly rather than left to auto-flow, which would have put the pickup
   address opposite its own toggle.

   ⚠ A hidden block does not render at all, so a leg the client collects
   themselves leaves the other column where it is instead of a gap.
   --------------------------------------------------------------------------- */
.car-locations-grid {
    display: grid;
    /* ⚠ minmax(0, 1fr), not 1fr. A grid track's default minimum is its
       CONTENT, so one long accommodation name or a wide village select would
       push the column past its share and the whole form sideways. This
       section is also relocated into a composer row (24-Aug), which is
       narrower than the page it was designed on, so the guard earns its keep
       in a place the page-width test never visits. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 1.75rem;
    align-items: start;
}
/* ⚠ The ROW is explicit as well as the column. Left to auto-placement the
   drop-off pair lands in rows 3 and 4 -- correct column, but starting
   halfway down the page, level with the pickup ADDRESS instead of its own
   toggle. Measured before fixing: 2410/2591 on the left against 2587/3147
   on the right. */
.car-locations-grid > #carPickupModeGroup { grid-column: 1; grid-row: 1; }
.car-locations-grid > #carPickupAddressDetails { grid-column: 1; grid-row: 2; }
.car-locations-grid > #carDropoffModeGroup { grid-column: 2; grid-row: 1; }
.car-locations-grid > #carDropoffAddressDetails { grid-column: 2; grid-row: 2; }

/* A visible seam between the two, so it reads as two columns rather than one
   wide form that happens to wrap. */
.car-locations-grid > #carDropoffModeGroup,
.car-locations-grid > #carDropoffAddressDetails {
    padding-left: 1.75rem;
    border-left: 1px solid #e6eaee;
}

/* One column on a phone, in the original reading order: pickup, then
   drop-off. Explicit `grid-column: 1` on all four, or the drop-off pair
   would keep asking for a second column that no longer exists. */
@media (max-width: 768px) {
    .car-locations-grid { grid-template-columns: 1fr; }
    .car-locations-grid > #carPickupModeGroup { grid-column: 1; grid-row: 1; }
    .car-locations-grid > #carPickupAddressDetails { grid-column: 1; grid-row: 2; }
    .car-locations-grid > #carDropoffModeGroup { grid-column: 1; grid-row: 3; }
    .car-locations-grid > #carDropoffAddressDetails { grid-column: 1; grid-row: 4; }
    .car-locations-grid > #carDropoffModeGroup,
    .car-locations-grid > #carDropoffAddressDetails {
        padding-left: 0;
        border-left: 0;
    }
    .car-locations-grid > #carDropoffModeGroup { margin-top: 1.25rem; }
}