/* This file has been separated into individual CSS files for better organization */
/* Please use the following separate files instead: */
/* - passenger-messaging.css */
/* - section-visibility.css */
/* - step-validation.css */
/* - navigation-buttons.css */
/* - error-validation.css */
/* - notifications.css */
/* - responsive.css */
/* - summary-box.css */
/* - car-card-selection.css */
 .step-navigation .btn-prev {
     width: 100%;
}
 td.header {
     font-weight: bold;
}
 .title-sb_info button {
     background-color: #000000;
     color: white;
     border: none;
     border-radius: 4px;
     padding: 16px 20px;
     cursor: pointer;
     width: 100%;
     font-size: 16px;
     margin-top: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50px;
     max-width: 220px;
     gap: 5px;
     margin: 0 auto;
     margin-top: 10px;
}
 .title-sb_info button svg {
     width: 19px;
     height: 19px;
}
 .booking-header {
     display: none;
}
/* ============================================ NEW LAYOUT: Sidebar (Summary + Search) + Results ============================================ */
 .selected-car_form {
     display: flex;
     gap: 20px;
     width: 100%;
     align-items: flex-start;
}
 .left-side_select {
     flex-basis: 30%;
     min-width: 300px;
     display: flex;
     flex-direction: column;
     gap: 20px;
}
/* Ensure car-results takes remaining space */
 .selected-car_form .car-results {
     flex: 1;
     max-width: 100%;
    /* Prevent overflow */
}
/* Ensure summary panel takes full width of its container (left-side_select) */
 .left-side_select .summary-panel {
     flex-basis: 100%;
     width: 100%;
}
 .left-side_select {
     flex-basis: calc(30% - 10px);
}
 div#selected-car_form {
     gap: 40px;
}
/* Responsive: Stack on mobile/tablet */
 @media (max-width: 1024px) {
     .selected-car_form {
         flex-direction: column;
    }
     .left-side_select {
         width: 100%;
         flex-basis: auto;
    }
     .selected-car_form .car-results {
         width: 100%;
    }
}
/* ============================================ VISA NOTICE STYLING ============================================ */
 .visa-notice {
     color: #666;
     font-size: 14px;
     font-style: italic;
     margin: 8px 0 12px;
     padding: 10px 15px;
     background: #f8f9fa;
     border-radius: 4px;
}
/* ============================================ INPUT ERROR STYLING ============================================ */
 .input-error {
     border-color: #F44336 !important;
     box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.2) !important;
     animation: shake 0.5s ease-in-out;
}
 @keyframes shake {
     0%, 100% {
         transform: translateX(0);
    }
     20%, 60% {
         transform: translateX(-5px);
    }
     40%, 80% {
         transform: translateX(5px);
    }
}
/* ============================================ BOOK NOW BUTTON STYLING ============================================ */
 .btn-book-now {
     background-color: #146AFF !important;
     color: white !important;
     font-weight: 600;
}
/* ============================================ HELPER TEXT STYLING ============================================ */
 .helper-text {
     color: #888;
     font-size: 13px;
     margin: 5px 0 0;
     padding: 0;
}
/* ============================================ MESSAGING APP DROPDOWN COMPACT STYLES ============================================ */
 .messaging-app-compact {
     margin-top: 10px;
}
 .messaging-app-row {
     display: flex;
     gap: 10px;
     align-items: center;
}
 .messaging-app-dropdown {
     min-width: 140px;
     height: 50px;
     padding: 10px 15px;
     border: 1px solid #c5c5c5;
     border-radius: 6px;
     font-size: 14px;
     font-weight: 500;
     color: #000;
     background-color: #fff;
     cursor: pointer;
}
 .messaging-app-dropdown:focus {
     outline: none;
     border-color: #4a90e2;
     box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}
 .messaging-app-input {
     flex: 1;
}
 .passenger-info-section > .divided, .passenger-info-section .driver-message-section {
     flex-basis: 100%;
}
 .main-content.active .step-navigation {
     display: none;
}
 .table-two {
     width: 100%;
     max-width: 600px;
     margin: 20px auto;
     border-collapse: separate;
     border-spacing: 0;
     background-color: #fff;
}
 .table-two th, .table-two td {
     padding: 15px;
     text-align: left;
     border-bottom: 1px solid #ddd;
}
 .table-two th {
     background-color: #146AFF;
     color: #fff;
     font-weight: bold;
}
 .table-two tr:last-child td {
     border-bottom: none;
}
 .table-two tr:hover {
     background-color: #d5d5d5;
     transition: background-color 0.3s;
}
 @media (max-width: 767px) {
     .messaging-app-row {
        flex-direction: row;
        gap: 8px;
    }
    .messaging-app-dropdown {
        min-width: 100px;
        flex: 0 0 35%;
    }
    .messaging-app-input {
        flex: 1;
    }
     div#transfer-list {
         padding: 12px;
    }
}
@media screen and (max-width: 768px) {
     .table-two th, .table-two td {
         padding: 10px;
         font-size: 14px;
    }
     .table-two {
         max-width: 100%;
    }

    /* Reduce placeholder font size for mobile */
    .input-field::placeholder {
        font-size: 13px !important;
    }
    .icon-arrow {
        margin-left: 5px;
        z-index: 10;
    }
}