/* =====================================================================
   Customer Portal - Responsive fixes (iPad + iPhone)
   Additive, breakpoint-scoped. Desktop (>=1025px) is never affected.
   Breakpoints:
     - Tablet / iPad ............ max-width: 1024px  (+ portrait 768-1024)
     - Phone / iPhone ........... max-width: 575.98px
     - Small phone .............. max-width: 480px
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) LISTINGS - action buttons (edit / delete / mail) side by side
      Pages: Users, Stored Locations, Rides, Invoices
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .rt-table-responsive td.actions,
    .ac-table-responsive td.actions,
    table.rt-table-responsive td[data-title="Actions"],
    table.ac-table-responsive td.actions {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        align-items: center;
        justify-content: flex-end;
    }

    .rt-table-responsive td.actions .btn-action,
    .ac-table-responsive td.actions .btn-action {
        margin: 0;
        flex: 0 0 auto;
    }

    /* Keep pagination / per-page footer from cramping on phones */
    .rt-table-responsive tfoot .d-flex,
    .ac-table-responsive tfoot .d-flex {
        flex-wrap: wrap;
        gap: 10px;
        row-gap: 10px;
    }
}

/* ---------------------------------------------------------------------
   2) HEADER / TOP MENU - keep labels on a single line, tidy buttons
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .user-page ul.top-menu-ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .user-page ul.top-menu-ul li a {
        white-space: nowrap;
    }

    .user-page ul.top-menu-ul .term {
        display: inline;
        white-space: nowrap;
    }

    .ride-head-bx {
        gap: 10px;
    }
}

@media (max-width: 991x) {
   
    .passenger-flight-grid {
        grid-template-columns: 1fr;
    }
    .vehicle-grid.vehicle-row-layout .vehicle-grid-item .rts-vehicle-slick-slider, .vehicle-grid.vehicle-row-layout .vehicle-grid-item .rts-vehicle-img {
        height: auto;
    }
    .sort-control {
        position: relative;
        top: 0;
        padding-right: 15px;
    }
}

@media (max-width: 575.98px) {
    .profile-page-heading {
        gap: 8px;
    }

    .profile-page-heading .rt-title {
        font-size: 18px;
        line-height: 1.25;
    }

    .ride-head-bx .new-reserve-link a {
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------------
   3) AUTH (customer-styled): Login, Forgot, Register
      Classes: register_login_main / login_reg_portal / form_main /
               input-field / input_submit / another_action
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .register_login_main {
        padding: 16px 0;
    }

    .register_login_main .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .register_login_main .login_register_info {
        margin-bottom: 18px;
    }

    .register_login_main .login_reg_portal {
        padding: 18px 16px;
    }

    .register_login_main .form_main {
        margin-top: 10px;
    }

    .register_login_main .form_main h3 {
        margin-bottom: 14px;
    }

    .register_login_main .input-field {
        margin-bottom: 14px;
    }

    .register_login_main .input-field .form-control {
        width: 100%;
    }

    .register_login_main .input_submit {
        margin-top: 4px;
    }

    .register_login_main .input_submit button {
        width: 100%;
    }

    .register_login_main .another_action {
        margin-top: 16px;
        text-align: center;
        line-height: 1.7;
    }
}

/* ---------------------------------------------------------------------
   4) AUTH (admin-layout based): Forgot / Reset via page-wrapper.auth
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .page-wrapper.auth .container {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    .page-wrapper.auth .card.rounded-plus {
        padding: 20px !important;
    }

    .page-wrapper.auth .logo_login {
        margin-bottom: 16px;
    }

    .page-wrapper.auth .row.no-gutters > [class*="col-"] {
        margin-bottom: 10px;
    }

    .page-wrapper.auth .btn-block,
    .page-wrapper.auth .row.no-gutters .btn {
        width: 100%;
        display: block;
    }

    .page-wrapper.auth .password-instruction ul {
        padding-left: 18px;
        margin-bottom: 0;
    }
}

/* ---------------------------------------------------------------------
   5) FORM ACTION BUTTONS side by side (Cancel + Add/Update)
      Pages: Add/Edit Location, Account forms
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .location-form-actions,
    .add-user .form-actions,
    .profile-form-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

    .location-form-actions .blue-border-btn,
    .location-form-actions .our-btn,
    .add-user .form-actions .blue-border-btn,
    .add-user .form-actions .our-btn,
    .profile-form-actions .blue-border-btn,
    .profile-form-actions .our-btn {
        flex: 1 1 0;
        text-align: center;
        margin: 0;
    }
}

/* ---------------------------------------------------------------------
   6) RESERVATION FLOW - step spacing + button centering (iPhone)
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .reservation-form .panel-body-book {
        padding: 14px;
    }

    .reservation-form .form-group,
    .panel-body-book .form-group {
        margin-bottom: 14px;
    }

    /* Step navigation buttons centered and comfortably spaced */
    .reservation-form .step-btns,
    .reservation-form .form-btns,
    .booking-step-actions,
    .panel-body-book .step-btns {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        margin-top: 16px;
    }

    .reservation-form .step-btns .our-btn,
    .reservation-form .step-btns .blue-border-btn,
    .booking-step-actions .our-btn,
    .booking-step-actions .blue-border-btn {
        min-width: 140px;
    }

    /* Vehicle list: avoid text overlap, add breathing room */
    .vehicle-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .vehicle-bx .vehicle-info,
    .selected_vehicle .step-info {
        word-break: break-word;
    }

    /* Pagination spacing under vehicle list */
    .vehicle-list-pagination,
    .reservation-form .pagination {
        margin-top: 14px;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------
   7) ROUND TRIP MODAL (iPhone)
      - Hide pickup flight-details section (must not show here)
      - Keep edit control on the right, tidy field alignment
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    #showReturnTripModal .passenger-flight-details,
    #showReturnTripModal .passenger-flight-bx .flight-info-inner,
    #showReturnTripModal .flight-details-section {
        display: none !important;
    }

    #showReturnTripModal .modal-dialog {
        margin: 8px;
    }

    #showReturnTripModal .panel-heading,
    #showReturnTripModal .panel-title-bx {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    #showReturnTripModal .panel-edit {
        margin-left: auto;
        text-align: right;
    }

    #showReturnTripModal .panel-body-book .row > [class*="col-"] {
        margin-bottom: 12px;
    }

    #showReturnTripModal #map {
        height: 240px !important;
    }
}

/* ---------------------------------------------------------------------
   8) INVOICE DETAILS (iPhone) - spacing + Additional Notes alignment
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .rc-invoice-details-header .row > [class*="col-"] {
        margin-bottom: 14px;
    }

    .rc-invoice-details-header dl {
        margin-bottom: 10px;
    }

    .rc-ride-action ul {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        padding-left: 0;
        list-style: none;
    }

    .rc-invoice-details-footer .row > [class*="col-"] {
        margin-bottom: 16px;
    }

    .rc-invoice-details-footer h4 {
        margin-top: 4px;
        margin-bottom: 8px;
    }

    .rc-invoice-details-total {
        overflow-x: auto;
    }

    .rc-invoice-details-total table {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------
   9) ACCOUNT / USER INFO & PAYMENT METHODS (iPad landscape + portrait)
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Grids collapse cleanly on iPad */
    .payment-card-grid,
    .payment-billing-grid,
    .account-info-grid,
    .user-info-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .add-user-main .row > [class*="col-"] {
        margin-bottom: 6px;
    }
}

@media (max-width: 767.98px) {
    .payment-card-grid,
    .payment-billing-grid,
    .account-info-grid,
    .user-info-grid {
        grid-template-columns: 1fr;
    }

    .payment-card-actions {
        display: flex;
        gap: 10px;
    }

    .payment-card-actions .our-btn,
    .payment-card-actions .blue-border-btn {
        flex: 1 1 0;
        width: auto;
        text-align: center;
    }
}

/* ---------------------------------------------------------------------
   13) GUEST HEADER - keep "New Reservation" + "Login" on one row
       Uses a .guest-head marker class (added in blade) so it works
       without relying on :has() browser support.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.rt-ride-details .res-number {
		position: relative;
		top: 0;
		right: 0;
		left: auto;
		margin-left: auto;
	}
	.rt-ride-action {
		margin-bottom: 15px;
	}
	.rt-ride-details {
		padding: 10px;
	}
	.rt-ride-details dl {
		margin-bottom: 15px;
	}
	.bottom-actions a {
		display: block;
		width: 100%;
		height: auto;
		padding: 7px 12px;
		border: 1px solid #b9d2ea;
		border-radius: 6px;
		background: #ffffff;
		color: var(--syncfs-primary);
		font-size: 14px;
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
		margin: 0;
		text-align: center;
		margin-top: 5px;
	}
	.bottom-actions {
		width: 100%;
	}
      .user-dropdown button {
        width: 100%;
        justify-content: center;
    }
    .customer-rides-table td {
        width: 100%;
        flex-direction: column;
    }
    
    .details-content dl {
        border-bottom: 1px solid #ccc;
        display: block;
        width: 100%;
    }
    .customer-rides-table .ride-detail-time h4, .customer-rides-table .ride-detail-time p {
        text-align: center;
    }
    .rt-ride-details h4 {
        background: var(--syncfs-btn-bg);
        padding: 5px 15px;
        color: #fff;
        font-weight: 600;
        font-size: 15px;
        text-align: center;
    }
    .location-form-page .location-form {
        padding: 0;
    }
    .sort-control {
        position: relative;
        top: 0;
        justify-content: flex-end
    }
    .selected_vehicle .rts-vehicle-img > img {
        max-width: 100%;  
        max-height: 100%;
    }
    .selected_vehicle .rts-col-max-width > .row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .step-info-vehicle-details {
        display: grid;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        align-items: center;
        grid-template-columns: 80px 80px;
    }
    .passenger-flight-grid {
        grid-template-columns: 1fr;
    }
    .passenger-flight-bx .form-group {
        margin-bottom: 15px;
    }
    .vehicle-grid.vehicle-row-layout .vehicle-grid-item .rts-vehicle-slick-slider, .vehicle-grid.vehicle-row-layout .vehicle-grid-item .rts-vehicle-img {
        height: auto;
    }
    .switch-field label, .switch-field input:checked+label {
        width: 50%;
    }
    .form_main form {
        display: block;
    }
    .form_main form .input-field {
        width: 100%;
        margin-bottom: 15px;
    }
    .ride-head-bx.guest-head {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        row-gap: 12px;
    }

    .ride-head-bx.guest-head .new-reserve-link {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }
    .new-reserve-link a {
        width: calc(50% - 15px);
        text-align: center;
        justify-content: center;
    }

    .ride-head-bx.guest-head .profile-menu.login-reserve-link {
        width: 100%;
        flex: 100%;
        margin-left: 0;
        justify-content: center;
    }

    .ride-head-bx.guest-head .login-reserve-link-2 {
        width: 100%;
        align-items: center;
    }

    /* Make the Login control match the "New Reservation" button */
    .ride-head-bx.guest-head .login-reserve-link-2 > a#showQuickLogin {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 36px;
        padding: 7px 14px;
        border: 1px solid var(--syncfs-border);
        border-radius: 6px;
        background: #f8fbff;
        color: var(--syncfs-primary);
        font-weight: 800;
        line-height: 1.2;
        width: 100%;
        justify-content: center;
    }
    .quick-signup-link, .quick-forgot-link, .quick-return-link {
        margin: 15px 0;
        font-weight: 600;
    }

    .ride-head-bx.guest-head .login-reserve-link-2 > a#showQuickLogin:hover,
    .ride-head-bx.guest-head .login-reserve-link-2 > a#showQuickLogin:focus {
        border-color: var(--syncfs-primary);
        background: var(--syncfs-btn-bg);
        color: #ffffff;
    }

    /* When the quick login / reset form is open, let it take the full row */
    .ride-head-bx.guest-head .login-head-form:not(.hide) {
        flex-basis: 100%;
        width: 100%;
    }
}

/* ---------------------------------------------------------------------
   12) reCAPTCHA v3 BADGE - must not cover action buttons (Select Vehicle)
       Keep the badge visible (branding requirement) but give the page a
       bottom clearance so the last button always sits above the badge.
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .center-wrapper {
        padding-bottom: 0px !important;
    }
    .center-wrapper:has(.reservation-confirmation-card) {
        padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    }
    .bottom-footer {
        margin-top: 20px;
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
    }

    .grecaptcha-badge {
        right: -186px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        transition: right .3s ease !important;
    }

    .grecaptcha-badge:hover,
    .grecaptcha-badge:focus-within {
        right: 4px !important;
    }

    /* Full-width action buttons get a little breathing room from the badge */
    .reservation-form.table-bx {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }

    .reservation-form .select-vehicle,
    .reservation-form .our-btn.w-100 {
        margin-bottom: 6px;
    }
}

/* ---------------------------------------------------------------------
   11) HEADER QUICK LOGIN / QUICK RESET - keep Log in + Close side by side
       (existing CSS collapses everything to a single column on <=991px,
        which stacked both buttons full-width). Email/Password stay full.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .customer-rides-table tr td {
        background: #095fc21a !important;
        border-bottom: 1px solid #ffffff !important;
        gap: 0 !important;
    }
    .customer-rides-table {
        padding: 5px;
    }
    .customer-rides-table tr {
        padding: 10px;
    }
    .customer-rides-table .form-group {
        margin-bottom: 0;
    }
    .customer-rides-table label, .form-label {
        color: var(--syncfs-ink-2);
        font-size: 14px;
        font-weight: 800;
        margin: 0;
    }
    .ride-head-bx .quick-login-fields {
        grid-template-columns: 1fr 1fr !important;
        column-gap: 10px;
        row-gap: 10px;
    }

    .ride-head-bx .quick-login-fields .quick-email-col,
    .ride-head-bx .quick-login-fields .quick-password-col {
        grid-column: 1 / -1 !important;
    }

    .ride-head-bx .quick-login-fields .quick-submit-col {
        grid-column: 1 !important;
    }

    .ride-head-bx .quick-login-fields .quick-close-col {
        grid-column: 2 !important;
    }

    .ride-head-bx .quick-reset-fields {
        grid-template-columns: 1fr 1fr !important;
        column-gap: 10px;
        row-gap: 10px;
    }

    .ride-head-bx .quick-reset-fields .quick-email-col {
        grid-column: 1 / -1 !important;
    }

    .ride-head-bx .quick-reset-fields .quick-submit-col {
        grid-column: 1 !important;
    }

    .ride-head-bx .quick-reset-fields .quick-close-col {
        grid-column: 2 !important;
    }

    /* Buttons fill their half evenly and align on one line */
    .ride-head-bx .quick-submit-col .our-btn-sm,
    .ride-head-bx .quick-close-col .quick-close-btn {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------
   14) ACCOUNT INFO - Stored Phone / Email tables
       Stack rows and show data-title labels on iPad + phones.
       Desktop (>=1025px) keeps the regular table headers.
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .account-info-page .add-user.table-bx,
    .edit-user-page .add-user.table-bx {
        overflow: visible;
    }

    .contact-info-inner .stored-bx {
        overflow: visible;
    }

    .contact-info-inner .contact-table {
        display: block;
        width: 100%;
        table-layout: auto;
        border-top: 0;
    }

    .contact-info-inner .contact-table thead {
        display: none;
    }

    .contact-info-inner .contact-table tbody {
        display: block;
        width: 100%;
    }

    .contact-info-inner .contact-table tr {
        display: block;
        width: 100%;
        margin: 0 0 12px;
        overflow: visible;
        border: 1px solid var(--syncfs-border);
        border-radius: 8px;
        background: #ffffff;
    }

    .contact-info-inner .contact-table.table-striped > tbody > tr:nth-of-type(odd),
    .contact-info-inner .contact-table.table-striped tbody tr:nth-child(odd),
    .contact-info-inner .contact-table tbody tr:hover {
        background: #ffffff;
    }

    .contact-info-inner .contact-table.table-striped > tbody > tr:nth-of-type(odd) > * {
        --bs-table-accent-bg: transparent;
        background-color: transparent;
    }

    .contact-info-inner .contact-table tbody:last-child tr:last-child,
    .contact-info-inner .contact-table > tr:last-child {
        margin-bottom: 0;
    }

    .contact-info-inner .contact-table th,
    .contact-info-inner .contact-table td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        width: 100% !important;
        max-width: 100%;
        padding: 10px 12px;
        text-align: right;
        border-bottom: 1px solid var(--syncfs-border-2);
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .contact-info-inner .contact-table td:last-child {
        width: 100% !important;
        justify-content: flex-end;
        text-align: right;
        white-space: normal;
        border-bottom: 0;
    }

    .contact-info-inner .contact-table td[data-title]:not([data-title=""])::before {
        content: attr(data-title);
        flex: 0 0 38%;
        max-width: 38%;
        color: var(--syncfs-ink);
        font-size: 14px;
        font-weight: 800;
        line-height: 1.35;
        text-align: left;
    }

    .contact-info-inner .contact-table td[data-title="Actions"] {
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
    }

    .contact-info-inner .contact-table td[data-title="Actions"]::before {
        flex: 1 1 auto;
        max-width: none;
        margin-right: auto;
    }

    .contact-info-inner .contact-form-row .irs-custom-select,
    .contact-info-inner .contact-form-row .form-group {
        max-width: none;
        width: 100%;
    }

    .contact-info-inner .switch-field {
        display: inline-flex;
        float: none;
        flex: 0 0 auto;
    }

    .contact-info-inner .switch-field label {
        float: none;
    }

    .contact-info-inner .contact-form-row .irs-custom-select,
    .contact-info-inner .contact-form-row .form-group,
    .contact-info-inner .contact-table td > .form-control,
    .contact-info-inner .contact-table td > .form-select,
    .contact-info-inner .contact-table td > .form-group,
    .contact-info-inner .contact-table td > .irs-custom-select,
    .contact-info-inner .contact-table td > .switch-field,
    .contact-info-inner .contact-table td > .iti,
    .contact-info-inner .contact-table td > .select2-container {
        flex: 1 1 0;
        min-width: 0;
        max-width: 100% !important;
        width: auto !important;
    }

    .contact-info-inner .contact-form-row .iti,
    .contact-info-inner .contact-form-row .form-control,
    .contact-info-inner .contact-form-row .form-select {
        width: 100%;
    }

    .contact-info-inner #addContactBtn,
    .contact-info-inner #addEmailBtn {
        min-width: 88px;
    }
}

@media (max-width: 575.98px) {
    .contact-info-inner .contact-table td {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    .contact-info-inner .contact-table td[data-title]:not([data-title=""])::before {
        flex: 0 0 auto;
        max-width: 100%;
        margin-bottom: 4px;
    }

    .contact-info-inner .contact-table td[data-title="Actions"] {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        text-align: right;
    }

    .contact-info-inner .contact-table td[data-title="Actions"]::before {
        margin-bottom: 0;
        margin-right: auto;
        text-align: left;
    }

    .contact-info-inner .contact-table td > .form-control,
    .contact-info-inner .contact-table td > .form-select,
    .contact-info-inner .contact-table td > .form-group,
    .contact-info-inner .contact-table td > .irs-custom-select,
    .contact-info-inner .contact-table td > .switch-field,
    .contact-info-inner .contact-table td > .iti,
    .contact-info-inner .contact-table td > .select2-container {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto;
    }
}

/* ---------------------------------------------------------------------
   15) ACCOUNT INFO / EDIT USER - layout from Bootstrap 991px down
       Form cards, fields, header, and contact controls stay usable
       after col-lg columns collapse.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .account-info-page,
    .edit-user-page {
        overflow: visible;
        max-width: 100%;
    }

    .account-info-page .add-user.table-bx,
    .edit-user-page .add-user.table-bx {
        overflow: visible;
    }

    .account-info-page .add-user.table-bx > form,
    .edit-user-page .add-user.table-bx > form,
    .account-info-page .contact-info-inner,
    .edit-user-page .contact-info-inner {
        padding: 16px 14px 12px;
    }

    .account-info-page .account-info-form-grid,
    .edit-user-page .edit-user-form-grid {
        --bs-gutter-x: 0;
        --bs-gutter-y: 14px;
    }

    .account-info-page .add-user-main,
    .edit-user-page .add-user-main {
        height: auto;
        padding: 14px;
    }

    .account-info-page .add-user-main .form-control,
    .account-info-page .add-user-main .form-select,
    .edit-user-page .add-user-main .form-control,
    .edit-user-page .add-user-main .form-select {
        width: 100%;
        max-width: 100%;
    }

    .account-info-page .status-switch-field,
    .edit-user-page .status-switch-field {
        width: 100%;
        max-width: 280px;
    }

    .account-info-page .account-info-submit-col,
    .edit-user-page .edit-user-submit-col {
        text-align: center;
    }

    .account-info-page .account-info-submit-col .our-btn,
    .edit-user-page .edit-user-submit-col .our-btn {
        width: 100%;
        max-width: 280px;
    }

    .account-info-page .new-reserve-link,
    .account-info-page .profile-menu,
    .edit-user-page .new-reserve-link,
    .edit-user-page .profile-menu {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        justify-content: flex-start;
    }

    .account-info-page #addressSuggestions,
    .edit-user-page #addressSuggestions {
        z-index: 30;
        max-width: 100%;
    }

    .contact-info-inner .iti,
    .contact-info-inner .iti .form-control {
        width: 100%;
        max-width: 100%;
    }

    .contact-info-inner .email-form-row .select2-container,
    .contact-info-inner .editOptions + .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .contact-info-inner .updateEmail,
    .contact-info-inner .cancelEdit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        white-space: nowrap;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .account-info-page .add-user-main .row > [class*="col-lg-6"],
    .edit-user-page .add-user-main .row > [class*="col-lg-6"] {
        flex: 0 0 auto;
        width: 50%;
        max-width: 50%;
    }
}

@media (max-width: 575.98px) {
    .account-info-page .add-user.table-bx > form,
    .edit-user-page .add-user.table-bx > form,
    .account-info-page .contact-info-inner,
    .edit-user-page .contact-info-inner {
        padding: 14px 12px 10px;
    }

    .account-info-page .account-info-submit-col .our-btn,
    .edit-user-page .edit-user-submit-col .our-btn {
        width: 100%;
        max-width: none;
    }

    .account-info-page .status-switch-field,
    .edit-user-page .status-switch-field {
        max-width: none;
    }
}

/* ---------------------------------------------------------------------
   10) iPad - remove awkward blank space on listing pages
       (empty flex tracks / min-heights leaving gaps)
   --------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
    .center-wrapper {
        min-height: auto;
    }

    .add-location-table.table-bx,
    .ride-table.table-bx,
    .add-user.table-bx {
        min-height: auto;
    }

    .filter-main {
        margin-bottom: 12px;
    }
}

/* ---------------------------------------------------------------------
   16) LISTING TABLES - stack rows and show data-title labels
       Users, Payments, Locations, Rides, Invoices
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
    
    .ride-table.table-bx,
    .user-table.table-bx,
    .add-location-table.table-bx {
        overflow-x: visible;
    }
    .filter-form-main .form-group .input-group {
        gap: 15px;
    }
    .filter-form-main .form-group .input-group .input-group-append {
        width: 100%;
    }

    .rt-table-responsive,
    .ac-table-responsive {
        display: block;
        width: 100%;
        min-width: 0 !important;
        table-layout: auto;
    }

    .customer-rides-table {
        min-width: 0 !important;
    }

    .rt-table-responsive thead,
    .ac-table-responsive thead {
        display: none;
    }

    .rt-table-responsive tbody,
    .ac-table-responsive tbody,
    .rt-table-responsive tfoot,
    .ac-table-responsive tfoot {
        display: block;
        width: 100%;
    }

    .rt-table-responsive tbody > tr:not(.collapse):not(.collapse-row),
    .ac-table-responsive tbody > tr {
        display: block;
        width: 100%;
        margin: 0 0 12px;
        overflow: visible;
        border: 1px solid var(--syncfs-border);
        border-radius: 8px;
        background: #ffffff;
    }

    .rt-table-responsive.table-striped tbody > tr:nth-of-type(odd),
    .rt-table-striped.rt-table-responsive tbody > tr:nth-child(odd),
    .ac-table-responsive.table-striped tbody > tr:nth-child(odd),
    .rt-table-responsive tbody > tr:hover,
    .ac-table-responsive tbody > tr:hover {
        background: #ffffff;
    }
    .customer-rides-table .rt-table-charges td:last-child, .customer-rides-table .rt-table-charges tfoot td {
        text-align: left;
        white-space: nowrap;
        width: auto;
        display: table-cell;
    }
    .customer-rides-table th, .customer-rides-table td {
        padding: 12px 10px;
        vertical-align: middle;
        overflow-wrap: anywhere;
        word-break: break-word;
        width: 100%;
        font-weight: 500;
    }
    .rt-table-responsive tbody > tr:not(.collapse):not(.collapse-row) > td:not([colspan]),
    .ac-table-responsive tbody > tr > td:not([colspan]) {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        width: 100% !important;
        max-width: 100%;
        padding: 10px 12px;
        text-align: left;
        border-bottom: 1px solid var(--syncfs-border-2);
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
    }

    .rt-table-responsive tbody > tr:not(.collapse):not(.collapse-row) > td:last-child:not([colspan]),
    .ac-table-responsive tbody > tr > td:last-child:not([colspan]) {
        border-bottom: 0;
    }

    .rt-table-responsive tbody > tr > td[data-title]:not([data-title=""])::before,
    .ac-table-responsive tbody > tr > td[data-title]:not([data-title=""])::before {
        content: attr(data-title);
        flex: 0 0 38%;
        max-width: 38%;
        color: var(--syncfs-ink);
        font-size: 14px;
        font-weight: 800;
        line-height: 1.35;
        text-align: left;
    }

    .rt-table-responsive tbody > tr > td[data-title="Actions"],
    .rt-table-responsive tbody > tr > td.actions,
    .rt-table-responsive tbody > tr > td.rides-actions-col,
    .ac-table-responsive tbody > tr > td[data-title="Actions"],
    .ac-table-responsive tbody > tr > td.actions {
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
    }

    .rt-table-responsive tbody > tr > td[data-title="Actions"]::before,
    .ac-table-responsive tbody > tr > td[data-title="Actions"]::before {
        flex: 1 1 auto;
        max-width: none;
        margin-right: auto;
    }

    .rt-table-responsive tbody > tr.collapse > td,
    .rt-table-responsive tbody > tr.collapse-row > td {
        display: block;
        width: 100%;
        border: 0;
    }

    .rt-table-responsive tfoot tr,
    .ac-table-responsive tfoot tr,
    .rt-table-responsive tfoot td,
    .ac-table-responsive tfoot td {
        display: block;
        width: 100%;
    }

    .customer-rides-table .rides-status-col,
    .customer-rides-table .rides-total-col,
    .customer-rides-table .rides-actions-col,
    .customer-rides-table .rides-conf-col,
    .customer-rides-table .rides-date-col,
    .customer-rides-table .rides-passenger-col,
    .customer-rides-table .rides-routing-col {
        text-align: right;
        width: 100% !important;
        justify-content: space-between;
    }
}

@media (max-width: 575.98px) {
    .ac-table-responsive tbody > tr > td:not([colspan]) {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    .rt-table-responsive tbody > tr > td[data-title]:not([data-title=""])::before,
    .ac-table-responsive tbody > tr > td[data-title]:not([data-title=""])::before {
        flex: 0 0 auto;
        max-width: 100%;
        margin-bottom: 4px;
    }

    .rt-table-responsive tbody > tr > td[data-title="Actions"],
    .rt-table-responsive tbody > tr > td.actions,
    .rt-table-responsive tbody > tr > td.rides-actions-col,
    .ac-table-responsive tbody > tr > td[data-title="Actions"],
    .ac-table-responsive tbody > tr > td.actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        text-align: right;
    }

    .rt-table-responsive tbody > tr > td[data-title="Actions"]::before,
    .ac-table-responsive tbody > tr > td[data-title="Actions"]::before {
        margin-bottom: 0;
        margin-right: auto;
        text-align: left;
    }
}