:root {
  --mptbm-primary: #F12971;
  --mptbm-sky: #f38fb3;
  --mptbm-sky-light: #EFFAFF;
  --mptbm-secondary: #1d2327;
  --mptbm-dark: #3a3e41;
  --mptbm-gray: #e0e0e0;
  --mptbm-light: #e0e0e0;
  --mptbm-white: #ffffff;
  --mptbm-black: #000000;
  --mptbm-yellow: #ffcb00;
  --mptbm-green: #00d704;
  --mptbm-red: #d91e1e;
  --mptbm-red-light: #f6dada;
}

.driver-panel header .title {
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
}

.driver-panel .booking-list {
  margin-bottom: 10px;
}

.driver-panel .booking-list i {
  color: var(--mptbm-primary);
}

.driver-panel .booking-list .item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: var(--mptbm-gray);
  flex-wrap: wrap;
  padding: 10px;
  padding-right: 40px;
  position: relative;
  color: var(--mptbm-dark);
  font-size: 14px;
  gap: 15px;
}

.driver-panel .booking-list .item>div {
  flex: 1 1 auto;
  min-width: 0;
  /* Ensures truncation works in flex items */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.driver-panel .booking-list .item .ref {
  font-weight: 700;
  color: var(--mptbm-white);
  background: var(--mptbm-primary);
  padding: 2px 8px;
  border-radius: 4px;
  flex: 0 0 auto;
  min-width: 80px;
  text-align: center;
}

.driver-panel .booking-list .item div:nth-child(2) {
  flex: 0 0 110px;
}

.driver-panel .booking-list .item div:nth-child(3) {
  flex: 0 0 85px;
}

.driver-panel .booking-list .item div:nth-child(4) {
  flex: 2 1 150px;
}

.driver-panel .booking-list .item div:nth-child(5) {
  flex: 1 1 120px;
  font-weight: 600;
}

@media (max-width: 767px) {
  .driver-panel .booking-list .item {
    gap: 10px;
  }

  .driver-panel .booking-list .item>div {
    flex: 1 1 calc(50% - 10px);
  }

  .driver-panel .booking-list .item .ref {
    flex: 0 0 100%;
    text-align: left;
    margin-bottom: 5px;
  }
}

.driver-panel .booking-list .item .mptbm-toggle {
  position: absolute;
  padding: 10px;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  cursor: pointer;
}

.driver-panel .booking-list .mptbm-collapsible {
  border: 1px solid var(--mptbm-gray);
  background-color: var(--mptbm-white);
  padding: 0 5px;
  display: none;
}

.driver-panel .booking-list .mptbm-collapsible .mptbm-status-notice {
  text-align: center;
  color: var(--mptbm-green);
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.driver-panel .booking-list .mptbm-collapsible header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mptbm-light);
  padding: 5px 0;
}

.driver-panel .booking-list .mptbm-collapsible header .transport-info {
  width: 50%;
}

.driver-panel .booking-list .mptbm-collapsible header .transport-info h5 {
  margin: 0;
}

.driver-panel .booking-list .mptbm-collapsible header .status-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .driver-panel .booking-list .mptbm-collapsible header {
    flex-direction: column;
    align-items: flex-start;
  }

  .driver-panel .booking-list .mptbm-collapsible header .transport-info,
  .driver-panel .booking-list .mptbm-collapsible header .status-info {
    width: 100%;
    justify-content: flex-start;
    margin-top: 5px;
  }
}

.driver-panel .booking-list .mptbm-collapsible header select {
  padding: 5px;
  border-radius: 0;
  border: 1px solid var(--mptbm-light);
  width: 180px;
}

.driver-panel .booking-list .mptbm-collapsible header button {
  padding: 5px;
  border-radius: 0;
  border: 1px solid var(--mptbm-light);
  background-color: var(--mptbm-primary);
  color: var(--mptbm-white);
  cursor: pointer;
  margin: 0;
  font-size: 14px;
}

.driver-panel .booking-list .mptbm-collapsible .booked-data {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 10px 5px;
  flex-wrap: wrap;
  gap: 20px;
}

.driver-panel .booking-list .mptbm-collapsible .booked-data .list {
  flex: 1 1 250px;
}

.driver-panel .booking-list .mptbm-collapsible .booked-data ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 13px;
}

.driver-panel .booking-list .mptbm-collapsible .booked-data ul li {
  margin-bottom: 8px;
}

.driver-panel .booking-list .mptbm-collapsible .booked-data ul b {
  display: block;
  margin-bottom: 2px;
  color: var(--mptbm-primary);
}

.driver-area {
  display: flex;
  justify-content: space-between;
  background-color: var(--mptbm-light);
  flex-wrap: wrap;
  padding: 5px;
  color: #626262;
  font-weight: 400;
  font-size: 12px;
  margin: 5px 0;
}

/* Compiled from Assets/sass/frontend/main.scss - do not hand-edit.
   The block below comes from _pro-enhancements.scss; change that file and
   re-run `npm run frontend`, or keep both in step by hand. */
/* =========================================================================
   Vehicle imagery, long labels and the driver payout/profile UI.

   Everything below overrides the free plugin's own frontend styles rather than
   editing them, so the free build keeps its current look when Pro is inactive.
   The Pro stylesheet is enqueued with mptbm_style as a dependency so it is
   always printed after the rules it adjusts.
   ========================================================================= */

/* ----- Full vehicle photos ------------------------------------------------
   The stock rules crop vehicle photography to a fixed box with
   background-size:cover / object-fit:cover, which slices the front and rear off
   a car shot. contain keeps the whole vehicle in frame; the neutral backdrop
   fills whatever letterboxing that leaves. */
.mptbm-directory-image {
    width: 100%;
    height: 460px;
    min-height: 460px;
    object-fit: contain;
    object-position: center top;
    display: block;
    background: #f7f8f7;
}
.mptbm-vpage-hero--photo {
    height: 560px;
    min-height: 560px;
    overflow: hidden;
    background: #f7f8f7;
}
.mptbm-vpage-hero--photo .mptbm-vpage-hero-bg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    display: block;
}
.mptbm_transport_search_area .mptbm_vehicle_image {
    background: #f7f8f7;
    overflow: hidden;
}
.mptbm_transport_search_area .mptbm_vehicle_image .bg_image_area,
.mptbm_transport_search_area .mptbm_vehicle_image .bg_image_area > div {
    min-height: 280px;
}
.mptbm_transport_search_area .mptbm_vehicle_image .bg_image_area > div {
    width: 100%;
    height: 100%;
    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    /* The stock sheet zooms this layer on hover, which re-crops the photo we
       just finished un-cropping. */
    transform: none !important;
}

/* ----- Long feature / service labels --------------------------------------
   Feature chips on the search-result card are single-line with an ellipsis and
   a 180px cap (110px on mobile), so a longer service name is cut off mid-word.
   Let the chip grow to a second line instead. Note the card template also
   shortens the text to 24 characters in PHP before it reaches the browser -
   that cap lives in the free plugin and CSS cannot undo it. */
.mptbm_transport_search_area ul.mptbm_features_grid > li.mptbm_feature_item {
    align-items: flex-start;
}
.mptbm_transport_search_area ul.mptbm_features_grid > li.mptbm_feature_item .mptbm_feature_text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.mptbm_transport_search_area ul.mptbm_features_grid > li.mptbm_feature_item .mptbm_feature_value {
    overflow: visible;
    text-overflow: clip;
}
.mptbm-vpage-feature-text,
.mptbm-vpage-addon-name {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ----- Driver panel: payout schedule note, share link, payout card -------- */
.mptbm-payout-schedule-note {
    margin: 10px 0 20px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e3a8a;
}
.mptbm-dvehicle-name > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mptbm-dvehicle-name small {
    font-size: 12px;
    font-weight: 500;
}
.mptbm-dvehicle-name small a {
    text-decoration: none;
}
.mptbm-no-vehicles {
    margin: 0 0 12px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}
.mptbm-share-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.mptbm-share-link input {
    flex: 1 1 240px;
    min-width: 0;
    font-size: 12px;
}
.mptbm-share-feedback {
    font-size: 12px;
    color: #15803d;
}
.mptbm-payout-card {
    margin: 20px 0;
}
.mptbm-payout-status {
    font-weight: 700;
}
.mptbm-payout-status.status-connected {
    color: #15803d;
}
.mptbm-payout-status.status-restricted,
.mptbm-payout-status.status-error {
    color: #b45309;
}
.mptbm-connect-payout-msg {
    margin-left: 8px;
}
.mptbm-payout-destination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.mptbm-payout-destination label {
    flex: 0 0 100%;
    font-size: 12px;
    font-weight: 600;
}
.mptbm-payout-destination input {
    flex: 1 1 240px;
    min-width: 0;
}
.mptbm-payout-status.status-not_connected {
    color: #6b7280;
}
.mptbm-payout-history {
    margin-top: 20px;
}
.mptbm-payout-table-wrap {
    overflow-x: auto;
}
.mptbm-payout-history table {
    width: 100%;
    border-collapse: collapse;
}
.mptbm-payout-history th,
.mptbm-payout-history td {
    padding: 9px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .mptbm-directory-image {
        height: 430px;
        min-height: 430px;
    }
    .mptbm-vpage-hero--photo {
        height: 480px;
        min-height: 480px;
    }
    .mptbm_transport_search_area .mptbm_vehicle_image,
    .mptbm_transport_search_area .mptbm_vehicle_image .bg_image_area,
    .mptbm_transport_search_area .mptbm_vehicle_image .bg_image_area > div {
        height: 360px;
        min-height: 360px;
    }
    .mptbm_transport_search_area ul.mptbm_features_grid > li.mptbm_feature_item .mptbm_feature_text {
        max-width: none;
    }
}
/*# sourceMappingURL=mptbm_pro.css.map */