/* =========================================================
   eCab Search Component – CSS OVERRIDE (ONE BLOCK)
   Scope: .mpStyle.mptbm_transport_search_area
   Purpose: Override built-in plugin styles
   Notes:
   - Duplicates consolidated.
   - For every conflicting pair, ONE version is ACTIVE and the other is
     kept as a COMMENTED “OPTION B” so you can switch later.
   ========================================================= */

/* ---------- ROOT & PRIORITY ---------- */
.mpStyle.mptbm_transport_search_area {
  --gap: 16px;
  --radius: 10px;
  --border: #e5e7eb;
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --accent: #111827;
}

.mpStyle.mptbm_transport_search_area *,
.mpStyle.mptbm_transport_search_area *::before,
.mpStyle.mptbm_transport_search_area *::after {
  box-sizing: border-box !important;
}

/* =========================================================
   FORM LAYOUT – CHOOSE ONE (ACTIVE = FLEX)
   ========================================================= */

/* ✅ ACTIVE OPTION A — FLEX (recommended with your 50% width rules) */
.mpStyle.mptbm_transport_search_area .mpForm{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--gap) !important;
}

/* ❌ OPTION B — GRID (commented out: enable if you want grid layout)
.mpStyle.mptbm_transport_search_area .mpForm {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: var(--gap) !important;
}
@media (min-width: 1024px) {
  .mpStyle.mptbm_transport_search_area .mpForm {
    grid-template-columns: repeat(2, 1fr);
  }
}
*/

/* ---------- INPUT BLOCKS ---------- */
.mpStyle.mptbm_transport_search_area .inputList {
  width: 100% !important;
}

/* ---------- LABEL TEXT ---------- */
.mpStyle.mptbm_transport_search_area
.inputList label span:first-child {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
}

/* ---------- INPUTS ---------- */
.mpStyle.mptbm_transport_search_area .formControl {
  height: 48px !important;
  padding: 0 14px 0 42px !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-size: 15px !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.mpStyle.mptbm_transport_search_area .formControl:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(17,24,39,0.08) !important;
}

/* ---------- READONLY / DATE INPUT ---------- */
.mpStyle.mptbm_transport_search_area input[readonly] {
  cursor: pointer !important;
  background-color: #fafafa !important;
}

/* ---------- LEFT ICONS ---------- */
.mpStyle.mptbm_transport_search_area .mptbm_left_icon {
  position: absolute !important;
  font-size: 16px !important;
  pointer-events: none !important;
}

/* =========================================================
   DROPDOWN LISTS – CHOOSE ONE POSITIONING STYLE
   (ACTIVE = absolute dropdown anchored to .mp_input_select)
   ========================================================= */

/* FIX dropdown positioning */
.mpStyle.mptbm_transport_search_area .mp_input_select {
  position: relative !important;
}

/* ✅ ACTIVE OPTION A — Absolute, anchored dropdown */
.mpStyle.mptbm_transport_search_area .mp_input_select_list {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.08) !important;
  background: #fff !important;

  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  margin-top: 0 !important; /* avoid double spacing since top handles it */
}

/* ❌ OPTION B — Normal flow dropdown (commented out)
.mpStyle.mptbm_transport_search_area .mp_input_select_list {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.08) !important;
  background: #fff !important;
  margin-top: 6px !important;
  position: static !important;
}
*/

.mpStyle.mptbm_transport_search_area .mp_input_select_list li {
  padding: 10px 14px !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

.mpStyle.mptbm_transport_search_area .mp_input_select_list li:hover {
  background: #f3f4f6 !important;
}

/* ---------- SEARCH BUTTON ---------- */
.mpStyle.mptbm_transport_search_area #mptbm_get_vehicle {
  height: 52px !important;
  border-radius: var(--radius) !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .15s ease;
}

.mpStyle.mptbm_transport_search_area #mptbm_get_vehicle:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.15) !important;
}

/* ---------- MAP AREA ---------- */
.mpStyle.mptbm_transport_search_area .mptbm_map_area {
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
}

/* ---------- REMOVE PLUGIN NOISE ---------- */
.mpStyle.mptbm_transport_search_area .divider,
.mpStyle.mptbm_transport_search_area ._equalChild_separatorRight {
  display: none !important;
}



/* =========================================================
   2-UP FIELDS (50% width) – CLEAN & STABLE
   Works on mobile + desktop
   ========================================================= */

/* Default: everything full width */
.mpStyle.mptbm_transport_search_area .mpForm .inputList{
  width: 100% !important;
}

/* ---------- Pickup Date + Pickup Time ---------- */
.mpStyle.mptbm_transport_search_area
.inputList:has(#mptbm_start_date),
.mpStyle.mptbm_transport_search_area
.inputList:has(#mptbm_start_time){
  width: calc(50% - (var(--gap) / 2)) !important;
}

/* ---------- Maximum Passenger + Maximum Bag ---------- */
.mpStyle.mptbm_transport_search_area
.inputList:has(#mptbm_max_passenger),
.mpStyle.mptbm_transport_search_area
.inputList:has(#mptbm_max_bag){
  width: calc(50% - (var(--gap) / 2)) !important;
}

/* =========================================================
   Transfer Type – make One Way / Return look like input fields
   Radio placed where icons are (left inside)
   ========================================================= */

/* Group stays 2-up */
.mpStyle.mptbm_transport_search_area .mptbm-radio-group{
  display: flex !important;
  gap: var(--gap) !important;
}

/* ✅ ACTIVE OPTION A — With optical correction (-1px) */
.mpStyle.mptbm_transport_search_area .mptbm-radio{
  flex: 1 1 0 !important;
  height: 48px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 14px 0 42px !important; /* same left padding as inputs */
  position: relative !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* Put the radio where the icon usually sits */
.mpStyle.mptbm_transport_search_area .mptbm-radio input[type="radio"]{
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) translateY(-1px) !important; /* optical correction */
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  accent-color: #111827;
  pointer-events: none; /* click the whole "field" */
}

/* Text like input text */
.mpStyle.mptbm_transport_search_area .mptbm-radio span{
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: #111827 !important;

  display: flex !important;
  align-items: center !important;
}

/* ❌ OPTION B — No optical correction (commented out)
.mpStyle.mptbm_transport_search_area .mptbm-radio input[type="radio"]{
  transform: translateY(-50%) !important;
}
*/

/* No icon in this component */
.mpStyle.mptbm_transport_search_area .mptbm-transfer-type .mptbm_left_icon,
.mpStyle.mptbm_transport_search_area .mptbm-transfer-type i.mptbm_left_icon{
  display: none !important;
}

/* Selected state: subtle border emphasis (no background fill) */
.mpStyle.mptbm_transport_search_area .mptbm-radio.active{
  border-color: #111827 !important;
  box-shadow: 0 0 0 2px rgba(17,24,39,0.08) !important;
  background: #fff !important;
  color: #111827 !important;
}

/* Remove any old hover/pill styling */
.mpStyle.mptbm_transport_search_area .mptbm-radio:hover{
  background: #fff !important;
}

.mpStyle.mptbm_transport_search_area
.inputList.mptbm-transfer-type {
  margin-top: 24px !important; /* adjust: 16 / 24 / 32 */
}

/* =========================================================
   Datepicker – restore card + shadow, clean header, dot select
   ========================================================= */

/* Card container + Center aligned with the form */
#ui-datepicker-div{
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.12) !important;
  padding: 12px !important;

  /* Center alignment */
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;

  /* Optional spacing tweak */
  margin-top: 8px !important;
}

/* Ensure it sits above the form nicely */
.mpStyle.mptbm_transport_search_area{
  position: relative;
}

/* =========================================================
   Datepicker header – CHOOSE ONE (ACTIVE = NO DIVIDER/BAR)
   ========================================================= */

/* ✅ ACTIVE OPTION A — No divider/bar under header */
#ui-datepicker-div .ui-datepicker-header{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-bottom: 8px !important;
  padding-bottom: 8px !important;
  border-bottom: none !important;
}

/* ❌ OPTION B — With divider under header (commented out)
#ui-datepicker-div .ui-datepicker-header{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-bottom: 14px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid #e5e7eb !important;
}
*/

/* Month/year row centered + GAP */
#ui-datepicker-div .ui-datepicker-title{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important; /* pick 12px or 14px */
  font-weight: 600 !important;
  color: #111827 !important;
  background-color: #ffffff !important;
}

/* Month/year selects (squared, proper caret padding) */
#ui-datepicker-div .ui-datepicker-title select.ui-datepicker-month,
#ui-datepicker-div .ui-datepicker-title select.ui-datepicker-year{
  height: 38px !important;
  min-width: 96px !important;
  padding: 0 34px 0 14px !important;   /* right padding makes room for caret */
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;      /* squared */
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  color: #111827 !important;

  -webkit-appearance: menulist !important;
  appearance: menulist !important;
}

/* Add spacing between month/year (extra safety) */
#ui-datepicker-div .ui-datepicker-title select + select{
  margin-left: 12px !important;
}

/* =========================================================
   Prev / Next arrows – CHOOSE SIZE (ACTIVE = 38px)
   ========================================================= */

/* ✅ ACTIVE OPTION A — 38px controls */
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next{
  background: transparent !important;
  border: none !important;
  width: 38px !important;
  height: 38px !important;
  top: 6px !important;
  cursor: pointer !important;
}

/* ❌ OPTION B — 40px controls (commented out)
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next{
  background: transparent !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  top: 6px !important;
  cursor: pointer !important;
}
*/

/* Hide jQuery UI icon sprite + any default span */
#ui-datepicker-div .ui-datepicker-prev .ui-icon,
#ui-datepicker-div .ui-datepicker-next .ui-icon,
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span{
  display: none !important;
}

/* Use text chevrons (always visible) */
#ui-datepicker-div .ui-datepicker-prev::before{
  content: "‹" !important;
  color: #111827 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 38px !important; /* match ACTIVE size */
  display: block !important;
  text-align: center !important;
}
#ui-datepicker-div .ui-datepicker-next::before{
  content: "›" !important;
  color: #111827 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 38px !important; /* match ACTIVE size */
  display: block !important;
  text-align: center !important;
RIGHT: 0px !important;
}

#ui-datepicker-div .ui-datepicker-prev:hover::before,
#ui-datepicker-div .ui-datepicker-next:hover::before{
  opacity: .65 !important;
}

/* --- Remove any background blocks under the calendar --- */
#ui-datepicker-div .ui-datepicker-calendar,
#ui-datepicker-div .ui-datepicker-calendar tbody,
#ui-datepicker-div .ui-datepicker-calendar tr,
#ui-datepicker-div .ui-datepicker-calendar td{
  background: transparent !important;
  border: none !important;
}

/* Remove “tile” background/borders around every day */
#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #111827 !important;
  position: relative !important;
  z-index: 1;
  border-radius: 10px !important;
}

/* No hover box */
#ui-datepicker-div .ui-datepicker-calendar td a:hover{
  background: transparent !important;
}

/* Selected day = round dot under number */
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active{
  background: transparent !important;
  color: #fff !important;
}

#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #111827;
  transform: translate(-50%, -50%);
  z-index: -1;
}

/* Today subtle underline (no background) */
#ui-datepicker-div .ui-datepicker-today a{
  text-decoration: underline;
  text-underline-offset: 4px;
  background: transparent !important;
}

/* Disabled days */
#ui-datepicker-div .ui-datepicker-unselectable span{
  color: #9ca3af !important;
  opacity: .5 !important;
  background: transparent !important;
}
@media only screen and (min-width: 10px) {
  .mpStyle.mptbm_transport_search_area {
    background: transparent !important;
  }

@media only screen and (min-width: 10px) {
	    div.mptbm_transport_search_area div.tabsContentNext {
    background: transparent !important;
  }}

@media (min-width: 769px) {
  div.mptbm_transport_search_area .mptbm_search_area.inputHorizontal {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}