/**
 * OneTourismo transfers search form — visual override to match the Transfer
 * Kefalonia hero "Quick quote" card. CSS only; the plugin PHP/markup is
 * untouched. Written against the plugin's real rendered DOM.
 *
 * The shortcode is rendered inside .hero-card, which already provides the
 * translucent card (background, border, padding). Everything below is scoped
 * under .hero-card so it never leaks into the plugin's own results pages.
 *
 * DOM (transfers, single tab):
 *   main.ot_pp > .ot_pp-search-wr
 *     .main-search ... .onetourismo-app-tabs           (tab bar — hidden)
 *     .onetourismo-app-container.small-form
 *       .onetourismo-app-row.onetourismo-form.hide-form (THE FORM — forced visible)
 *         .onetourismo-app-col-md-4.relative-pos.form-columns
 *           .onetourismo-app-float-input.less-padding-top (WRAPPER div)
 *             select#...-from, select#...-to, label.float-label
 *         .onetourismo-app-col-md-3.relative-pos.form-columns
 *           input#transfers-dates.onetourismo-app-float-input, label, .tooltip
 *         .onetourismo-app-col-md-2.relative-pos.form-columns
 *           input#transfers-persons.onetourismo-app-float-input, label, .tooltip
 *         .onetourismo-app-col-md-3
 *           input.onetourismo-app-search-transfer[type=button]
 */

/* ---- Neutralise the plugin's shells so .hero-card is the only card ---- */
.hero-card .otpp-hotels-map,
.hero-card .ot_pp,
.hero-card .ot_pp-search-wr,
.hero-card .main-search,
.hero-card .onetourismo-app-container,
.hero-card .onetourismo-app-container.small-form{
  padding:0!important;margin:0!important;max-width:none!important;width:100%!important;
  background:transparent!important;box-shadow:none!important;border:0!important;color:var(--shell)!important;
}

/* Tab bar removed (transfers only) */
.hero-card .onetourismo-app-tabs,
.hero-card .main-search{display:none!important}

/* ---- The form itself ---- */
/* Force it visible: with a single tab the plugin may never strip .hide-form. */
.hero-card .onetourismo-form,
.hero-card .onetourismo-form.hide-form{
  display:flex!important;flex-direction:column;gap:14px;
  background:transparent!important;border:0!important;border-radius:0!important;
  padding:0!important;margin:0!important;
}
/* Kill the row negative margins from the plugin's grid */
.hero-card .onetourismo-form{margin-left:0!important;margin-right:0!important}

/* Columns become full-width stacked rows, no grid padding/background */
.hero-card .form-columns:not(.transfers-date-cell),
.hero-card .onetourismo-form > [class*="onetourismo-app-col-md-"]{
  width:100%!important;max-width:100%!important;flex:0 0 auto!important;
  padding:0!important;margin:0!important;float:none!important;background:transparent!important;
}

/* Each cell stacks: label (caption) on top, then field(s) */
.hero-card .relative-pos{position:relative;display:flex;flex-direction:column}

/* ---- Destination cell: .onetourismo-app-float-input is a WRAPPER div here,
   holding the two selects + label. Make it transparent and a flex column. ---- */
.hero-card .onetourismo-app-col-md-4 .onetourismo-app-float-input{
  display:flex;flex-direction:column;gap:14px;
  background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;
}

/* ---- The two transfer selects: plugin forces width:42%;height:14px;padding:0
   via an ID selector. Match ID specificity to make them full fields. ---- */
.hero-card #onetourismo-app-search-transfers-from,
.hero-card #onetourismo-app-search-transfers-to{
  width:100%!important;height:auto!important;min-height:0!important;float:none!important;
  margin:0!important;line-height:1.3!important;font-size:.9rem!important;
  padding:14px 34px 14px 14px!important;
  background:rgba(255,255,255,.96)!important;color:var(--ink)!important;
  border:none!important;border-radius:9px!important;
  -webkit-appearance:none;appearance:none;box-shadow:none!important;
  background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20fill='%23071a2b'%20d='M6%208L0%200h12z'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important;
}

/* ---- Date & Guests inputs: they carry .onetourismo-app-float-input (an
   <input>, grey bg, padding:27px 0 4px 0). Restore the field look. ---- */
.hero-card input.onetourismo-app-float-input{
  display:block;width:100%!important;
  background:rgba(255,255,255,.96)!important;color:var(--ink)!important;
  border:none!important;border-radius:9px!important;
  padding:14px 14px!important;margin:0!important;
  font-family:inherit!important;font-size:.9rem!important;line-height:1.3!important;
  height:auto!important;min-height:0!important;box-shadow:none!important;
}
.hero-card input.onetourismo-app-float-input.less-padding-top{padding:14px 14px!important}

.hero-card .onetourismo-form select:focus,
.hero-card input.onetourismo-app-float-input:focus{
  outline:2px solid var(--cyan)!important;outline-offset:1px;
}
.hero-card input::placeholder{color:rgba(7,26,43,.5)}

/* ---- Float labels → small cyan captions ABOVE each field ---- */
.hero-card .onetourismo-app-float-label{
  position:static!important;display:block;order:-1;
  top:auto!important;left:auto!important;transform:none!important;
  font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cyan-bright)!important;margin:0 0 6px!important;padding:0!important;
  background:transparent!important;pointer-events:none;white-space:normal;
}

/* ---- Search / Apply buttons → theme cyan pill (plugin uses
   [type=button] + !important, so match that specificity). ---- */
.hero-card .onetourismo-app-search-transfer[type="button"],
.hero-card .onetourismo-app-apply-transfers-pax[type="button"]{
  display:block!important;width:100%!important;text-align:center;
  background-color:var(--cyan)!important;background-image:none!important;color:#04283a!important;
  border:none!important;border-radius:100px!important;text-transform:none!important;
  padding:14px 20px!important;margin:0!important;
  font-family:inherit!important;font-weight:600!important;font-size:.92rem!important;
  cursor:pointer;box-shadow:0 4px 14px rgba(78,195,232,.4)!important;
  transition:transform .15s,box-shadow .2s,background .2s;
}
.hero-card .onetourismo-app-search-transfer[type="button"]:hover,
.hero-card .onetourismo-app-apply-transfers-pax[type="button"]:hover{
  background-color:var(--cyan-bright)!important;color:#04283a!important;
  transform:translateY(-2px);box-shadow:0 8px 22px rgba(78,195,232,.5)!important;
}

/* ---- Lightpick calendar prev/next arrows ---- */
.hero-card .lightpick__toolbar{
  position:static!important;display:flex;gap:6px;margin:0!important;
}
.hero-card .lightpick__previous-action,
.hero-card .lightpick__next-action{
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--cyan)!important;color:#04283a!important;
  border:none!important;border-radius:8px!important;
  font-size:1rem;line-height:1!important;cursor:pointer;padding:0!important;margin:0!important;
  box-shadow:0 2px 8px rgba(78,195,232,.35);transition:background .15s,transform .12s;
}
.hero-card .lightpick__previous-action:hover,
.hero-card .lightpick__next-action:hover{
  background:var(--cyan-bright)!important;transform:translateY(-1px);
}

/* ---- Date tooltip footer: One way + time selects + Apply on one row ---- */
.hero-card .select-transfer-times{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px;
}
/* the two <p> (One way, "Select time") take the full width, sit above the row */
.hero-card .select-transfer-times > p{
  flex:0 0 100%;margin:0!important;font-size:.9rem;color:var(--ink);
}
.hero-card .select-transfer-times > p:first-child{order:-2}
.hero-card .select-transfer-times > p:nth-of-type(2){order:-1;font-weight:600}
/* time selects: equal share, on the same line as Apply */
.hero-card #timepicker_transfer_from,
.hero-card #timepicker_transfer_to{
  flex:1 1 0!important;min-width:0!important;width:auto!important;margin:0!important;
  padding:12px 12px!important;font-size:.9rem!important;
  border:1px solid var(--line)!important;border-radius:9px!important;
  background:#fff!important;color:var(--ink)!important;display:block!important;height:auto!important;
}
/* Apply button (this one is .set_transfers_date, NOT .onetourismo-app-apply-*) */
.hero-card .set_transfers_date{
  flex:0 0 auto;
  background:var(--cyan)!important;background-image:none!important;color:#04283a!important;
  border:none!important;border-radius:100px!important;text-transform:none!important;
  padding:12px 26px!important;margin:0!important;
  font-family:inherit!important;font-weight:600!important;font-size:.92rem!important;
  cursor:pointer;box-shadow:0 4px 14px rgba(78,195,232,.4)!important;
  transition:transform .15s,box-shadow .2s,background .2s;white-space:nowrap;
}
.hero-card .set_transfers_date:hover{
  background:var(--cyan-bright)!important;transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(78,195,232,.5)!important;
}

/* ---- Pop-over panels (date calendar + guests picker) stay white cards ---- */
.hero-card .onetourismo-app-tooltip{
  position:absolute;background:#fff!important;color:var(--ink)!important;
  border:1px solid var(--line)!important;border-radius:12px!important;
  box-shadow:0 24px 50px rgba(11,37,64,.28)!important;
  padding:18px!important;margin-top:8px;z-index:200;left:0;top:100%;min-width:320px;
}
/* the date calendar needs room for 7 day-columns */
.hero-card .onetourismo-app-tooltip.transfers-dates{min-width:440px}
.hero-card .onetourismo-app-tooltip.transfers-dates .lightpick,
.hero-card .onetourismo-app-tooltip.transfers-dates .lightpick__month{width:100%!important}
.hero-card .onetourismo-app-tooltip strong{color:var(--ink)!important}
.hero-card .onetourismo-app-tooltip small{color:#4a637a!important}
.hero-card .month-year-display-transfers{
  font-family:'Fraunces',Georgia,serif;font-weight:600;color:var(--navy)!important;margin-bottom:8px;
}
/* inside the tooltip: lay out each guest type as label + stepper pairs.
   The plugin emits 4 flat col-md-3 cells: [Adults label][Adults stepper]
   [Children label][Children stepper]. We size each to 50% so Adults sits on
   the first line and Children on the second, label-left / stepper-right. */
.hero-card .onetourismo-app-tooltip .onetourismo-app-row{
  display:flex;flex-wrap:wrap;align-items:center;margin:0;row-gap:14px;
}
.hero-card .onetourismo-app-tooltip .onetourismo-app-col-md-3{
  width:50%!important;flex:0 0 50%!important;max-width:50%!important;
  padding:0 6px!important;background:transparent!important;
  display:flex;align-items:center;min-height:40px;
}
/* stepper cells (even positions) push their control to the right */
.hero-card .onetourismo-app-tooltip .onetourismo-app-col-md-3:nth-child(2n){
  justify-content:flex-end;
}
.hero-card .onetourismo-app-tooltip [class*="onetourismo-app-col-md-"]{
  background:transparent!important;
}
.hero-card .onetourismo-app-tooltip .onetourismo-app-col-md-12{
  flex:0 0 100%!important;width:100%!important;max-width:100%!important;padding:0 6px!important;
  display:block;
}
.hero-card .onetourismo-app-tooltip .relative-pos{display:block}
/* enough room so the two pairs never collide */
.hero-card .onetourismo-app-tooltip.transfers-pax{min-width:440px}

/* Quantity steppers */
.hero-card .onetourismo-app-quantity{
  display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;background:#fff!important;float:none;
}
.hero-card .onetourismo-app-quantity-btn{
  width:34px;height:34px;border:none;background:var(--mist)!important;color:var(--navy)!important;
  font-weight:700;line-height:1;cursor:pointer;padding:0!important;margin:0!important;
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;
}
.hero-card .onetourismo-app-quantity-btn.left{border-right:1px solid var(--line)!important}
.hero-card .onetourismo-app-quantity-btn.right{border-left:1px solid var(--line)!important}
.hero-card .onetourismo-app-quantity-btn:hover{background:var(--cyan)!important;color:#04283a!important}
.hero-card .onetourismo-app-quantity-input{
  width:46px!important;height:34px!important;text-align:center;border:none!important;
  background:#fff!important;color:var(--ink)!important;font-size:.95rem!important;padding:0!important;
}
.hero-card .onetourismo-app-tooltip select{
  border:1px solid var(--line)!important;border-radius:8px!important;padding:8px 10px!important;
  font-family:inherit;color:var(--ink)!important;background:#fff!important;width:100%!important;height:auto!important;
}
.hero-card .onetourismo-app-row hr{margin:16px 0!important;background:var(--line)!important;border:0;height:1px}

@media(max-width:900px){
  .hero-card .onetourismo-app-tooltip{min-width:0;width:100%}
  .hero-card .onetourismo-app-tooltip.transfers-pax{min-width:0}
}

/* =====================================================================
   RESULTS PAGE — transfers-search-results form (NOT inside .hero-card).
   The plugin renders the search bar full-width here with the same classes,
   but without our card scope, so its popovers overflow the viewport and the
   guest/time rows break. These rules fix the FORM only (not the results grid).
   Scoped to .ot_pp so the results listing is untouched; the homepage's
   .hero-card rules are more specific and still win there.
   ===================================================================== */

/* Popovers must not overflow the page. Keep them anchored under their field,
   cap width, and (for the right-side guests popover) align to the right edge. */
.ot_pp .onetourismo-app-tooltip{
  position:absolute;z-index:200;top:100%;margin-top:8px;
  background:#fff!important;color:var(--ink)!important;
  border:1px solid var(--line)!important;border-radius:12px!important;
  box-shadow:0 24px 50px rgba(11,37,64,.28)!important;padding:18px!important;
  max-width:min(560px,92vw);box-sizing:border-box;
}
/* the field cell must anchor the popover */
.ot_pp .relative-pos{position:relative}
/* guests popover sits near the right side → anchor to the right so it opens
   inward instead of spilling off-screen */
.ot_pp .onetourismo-app-tooltip.transfers-pax{left:auto;right:0;min-width:420px}
.ot_pp .onetourismo-app-tooltip.transfers-dates{left:0;right:auto;min-width:440px}

/* Guests: pair Adults / Children as label-left + stepper-right, two rows,
   so the "+" never pushes past the popover edge. */
.ot_pp .onetourismo-app-tooltip .onetourismo-app-row{
  display:flex;flex-wrap:wrap;align-items:center;margin:0!important;row-gap:14px;
}
.ot_pp .onetourismo-app-tooltip .onetourismo-app-col-md-3{
  width:50%!important;flex:0 0 50%!important;max-width:50%!important;
  padding:0 6px!important;display:flex;align-items:center;min-height:40px;
  float:none!important;
}
.ot_pp .onetourismo-app-tooltip .onetourismo-app-col-md-3:nth-child(2n){justify-content:flex-end}
.ot_pp .onetourismo-app-tooltip .onetourismo-app-col-md-12{
  flex:0 0 100%!important;width:100%!important;max-width:100%!important;padding:0 6px!important;float:none!important;
}

/* Quantity steppers */
.ot_pp .onetourismo-app-quantity{
  display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;background:#fff!important;float:none!important;
}
.ot_pp .onetourismo-app-quantity-btn{
  width:34px;height:34px;border:none;background:var(--mist)!important;color:var(--navy)!important;
  font-weight:700;line-height:1;cursor:pointer;padding:0!important;margin:0!important;
  display:flex;align-items:center;justify-content:center;
}
.ot_pp .onetourismo-app-quantity-btn:hover{background:var(--cyan)!important;color:#04283a!important}
.ot_pp .onetourismo-app-quantity-input{
  width:46px!important;height:34px!important;text-align:center;border:none!important;
  background:#fff!important;color:var(--ink)!important;padding:0!important;
}

/* Child-age select inside guests popover */
.ot_pp .onetourismo-app-tooltip select{
  border:1px solid var(--line)!important;border-radius:8px!important;padding:8px 10px!important;
  font-family:inherit;color:var(--ink)!important;background:#fff!important;height:auto!important;
}

/* Date popover: One way + time selects + Apply on one tidy row */
.ot_pp .select-transfer-times{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px;
}
.ot_pp .select-transfer-times > p{flex:0 0 100%;margin:0!important;font-size:.9rem;color:var(--ink)}
.ot_pp .select-transfer-times > p:first-child{order:-2}
.ot_pp .select-transfer-times > p:nth-of-type(2){order:-1;font-weight:600}
.ot_pp #timepicker_transfer_from,
.ot_pp #timepicker_transfer_to{
  flex:1 1 0!important;min-width:0!important;width:auto!important;margin:0!important;
  padding:12px 12px!important;border:1px solid var(--line)!important;border-radius:9px!important;
  background:#fff!important;color:var(--ink)!important;height:auto!important;
}

/* Lightpick prev/next arrows */
.ot_pp .lightpick__toolbar{position:static!important;display:flex;gap:6px;margin:0!important}
.ot_pp .lightpick__previous-action,
.ot_pp .lightpick__next-action{
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--cyan)!important;color:#04283a!important;border:none!important;border-radius:8px!important;
  cursor:pointer;padding:0!important;margin:0!important;
}
.ot_pp .lightpick__previous-action:hover,
.ot_pp .lightpick__next-action:hover{background:var(--cyan-bright)!important}

/* Both Apply buttons → theme pill (guests .onetourismo-app-apply-transfers-pax
   and dates .set_transfers_date) */
.ot_pp .onetourismo-app-apply-transfers-pax[type="button"],
.ot_pp .set_transfers_date{
  flex:0 0 auto;background:var(--cyan)!important;background-image:none!important;color:#04283a!important;
  border:none!important;border-radius:100px!important;text-transform:none!important;
  padding:12px 26px!important;margin:0!important;font-family:inherit!important;font-weight:600!important;
  cursor:pointer;box-shadow:0 4px 14px rgba(78,195,232,.4)!important;white-space:nowrap;
}
.ot_pp .onetourismo-app-apply-transfers-pax[type="button"]:hover,
.ot_pp .set_transfers_date:hover{background:var(--cyan-bright)!important}

/* Search button on the results form → theme pill too */
.ot_pp .onetourismo-app-search-transfer[type="button"]{
  background-color:var(--cyan)!important;background-image:none!important;color:#04283a!important;
  border:none!important;border-radius:100px!important;text-transform:none!important;
  width:100%!important;height:auto!important;min-height:52px!important;
  padding:16px 20px!important;font-weight:600!important;font-size:.95rem!important;
  box-shadow:0 4px 14px rgba(78,195,232,.4)!important;cursor:pointer;
  transition:transform .15s,box-shadow .2s,background .2s;
}
.ot_pp .onetourismo-app-search-transfer[type="button"]:hover{
  background-color:var(--cyan-bright)!important;transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(78,195,232,.5)!important;
}
/* the button's column should stretch so the button can fill the row height,
   matching the Destination / Date field boxes beside it */
.ot_pp .onetourismo-form{align-items:stretch}
.ot_pp .onetourismo-form > .onetourismo-app-col-md-3:last-child{
  display:flex;align-items:center;justify-content:center;
}
.ot_pp .onetourismo-form > .onetourismo-app-col-md-3:last-child .onetourismo-app-search-transfer[type="button"]{
  min-height:56px!important;
}

@media(max-width:900px){
  .ot_pp .onetourismo-app-tooltip{max-width:92vw;min-width:0!important;left:0;right:auto}
  .ot_pp .onetourismo-app-tooltip.transfers-pax{min-width:0!important}
}

/* =====================================================================
   TRIP TYPE TABS + SPLIT DATE FIELDS (Return / One way)
   Used by the customised transfers search form.
   ===================================================================== */

/* the tab row spans the full form width, above the fields */
.trip-type-wrap{width:100%;flex:0 0 100%;max-width:100%;padding:0 0 10px!important;background:transparent!important}
.transfers-trip-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:100px;background:rgba(255,255,255,.14)}
.hero-card .transfers-trip-tabs{background:rgba(255,255,255,.14)}
.ot_pp:not(.hero-card) .transfers-trip-tabs{background:var(--mist)}
.transfers-trip-tabs .trip-tab{
  border:none;background:transparent;cursor:pointer;
  padding:8px 18px;border-radius:100px;
  font-family:inherit;font-size:.85rem;font-weight:600;color:var(--shell);
  transition:background .2s,color .2s;
}
.ot_pp:not(.hero-card) .transfers-trip-tabs .trip-tab{color:var(--navy)}
.transfers-trip-tabs .trip-tab:hover{background:rgba(255,255,255,.12)}
.transfers-trip-tabs .trip-tab.is-active{background:var(--cyan);color:#04283a}

/* the two date cells behave like the other fields */
.transfers-date-cell{position:relative}

/* time row inside each date popover: label on top, select + Apply on one line */
.onetourismo-app-tooltip .select-transfer-times{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;
}
.onetourismo-app-tooltip .select-transfer-times .stt-label{
  flex:0 0 100%;margin:0!important;font-weight:600;font-size:.9rem;color:var(--ink);
}
.onetourismo-app-tooltip #timepicker_transfer_from,
.onetourismo-app-tooltip #timepicker_transfer_to{
  flex:1 1 0!important;min-width:0!important;width:auto!important;margin:0!important;
  padding:12px!important;border:1px solid var(--line)!important;border-radius:9px!important;
  background:#fff!important;color:var(--ink)!important;height:auto!important;font-family:inherit;
}
.onetourismo-app-tooltip .set_transfers_date_from,
.onetourismo-app-tooltip .set_transfers_date_to{
  flex:0 0 auto;background:var(--cyan)!important;background-image:none!important;color:#04283a!important;
  border:none!important;border-radius:100px!important;text-transform:none!important;
  padding:12px 26px!important;margin:0!important;
  font-family:inherit!important;font-weight:600!important;font-size:.92rem!important;
  cursor:pointer;box-shadow:0 4px 14px rgba(78,195,232,.4)!important;white-space:nowrap;
  transition:transform .15s,box-shadow .2s,background .2s;
}
.onetourismo-app-tooltip .set_transfers_date_from:hover,
.onetourismo-app-tooltip .set_transfers_date_to:hover{
  background:var(--cyan-bright)!important;transform:translateY(-2px);
}

/* both date popovers get the themed card look on either page */
.transfers-dates-from,
.transfers-dates-to{min-width:440px}
@media(max-width:900px){
  .transfers-dates-from,
  .transfers-dates-to{min-width:0;max-width:92vw}
}


/* =====================================================================
   SPLIT DATE POPOVERS — layout fix
   The popover must stack: month title -> calendar -> time row.
   Lightpick's toolbar (prev/next) is positioned absolutely by the plugin,
   which made it land on top of the time row. Force a normal flow layout.
   ===================================================================== */
.transfers-dates-from,
.transfers-dates-to{
  display:flex;flex-direction:column;
}
.transfers-dates-from .month-year-display-transfers,
.transfers-dates-to .month-year-display-transfers{order:1;margin-bottom:6px}
.transfers-dates-from .lp-holder,
.transfers-dates-to .lp-holder{order:2;width:100%}
/* Lightpick injects its own <section class="lightpick"> as a SIBLING of the
   holder, so it needs an explicit order too or it floats to the top. */
.transfers-dates-from > .lightpick,
.transfers-dates-to > .lightpick{order:2;width:100%}
.transfers-dates-from .select-transfer-times,
.transfers-dates-to .select-transfer-times{order:3;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
/* hidden helper input must not take part in the flex flow */
.transfers-dates-from > input[type="text"][style*="none"],
.transfers-dates-to > input[type="text"][style*="none"]{order:0}

/* keep Lightpick's own chrome inside the flow (no overlap) */
.transfers-dates-from .lightpick,
.transfers-dates-to .lightpick{position:static!important;box-shadow:none!important;width:100%!important}
.transfers-dates-from .lightpick__month-title-bar,
.transfers-dates-to .lightpick__month-title-bar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;
}
.transfers-dates-from .lightpick__toolbar,
.transfers-dates-to .lightpick__toolbar{
  position:static!important;top:auto!important;right:auto!important;
  display:flex;gap:6px;margin:0!important;
}
/* make sure days are clickable (nothing overlaying them) */
.transfers-dates-from .lightpick__days,
.transfers-dates-to .lightpick__days{position:relative;z-index:1}
.transfers-dates-from .select-transfer-times,
.transfers-dates-to .select-transfer-times{position:relative;z-index:2}


/* =====================================================================
   ONE-WAY PILL SWITCH + DEPARTURE/RETURN TABS
   The switch sits BELOW the date fields. Default ON = one way (no tabs).
   Switching it off reveals the Departure / Return tabs.
   ===================================================================== */
.trip-type-wrap{
  display:flex;flex-direction:column;gap:12px;
  width:100%;flex:0 0 100%;max-width:100%;
  padding:2px 0 0!important;background:transparent!important;
}

/* --- pill switch --- */
.oneway-switch{
  display:inline-flex;align-items:center;gap:12px;cursor:pointer;user-select:none;
  font-family:inherit;font-size:.92rem;font-weight:600;
}
.oneway-switch input{position:absolute;opacity:0;width:0;height:0}
.oneway-switch .oneway-track{
  width:46px;height:26px;flex:0 0 46px;border-radius:100px;position:relative;
  background:rgba(255,255,255,.22);
  transition:background .22s ease;
}
.oneway-switch .oneway-track::after{
  content:"";position:absolute;top:3px;left:3px;
  width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  transition:transform .22s ease;
}
.oneway-switch input:checked + .oneway-track{background:var(--cyan)}
.oneway-switch input:checked + .oneway-track::after{transform:translateX(20px)}
.oneway-switch input:focus-visible + .oneway-track{outline:2px solid var(--cyan);outline-offset:3px}
.oneway-switch .oneway-text{color:#fff;opacity:1}

/* light backgrounds (results page) */
.ot_pp .oneway-switch .oneway-text{color:var(--navy)}
.ot_pp .oneway-switch .oneway-track{background:rgba(7,26,43,.22)}
.ot_pp .oneway-switch input:checked + .oneway-track{background:var(--cyan)}

/* keep the One way label crisp white on the dark hero card */
/* inside the dark hero card the label must be white (beats the .ot_pp rule) */
.hero-card .ot_pp .oneway-switch .oneway-text,
.hero-card .oneway-switch .oneway-text{color:#fff!important;opacity:1}
.hero-card .ot_pp .oneway-switch .oneway-track{background:rgba(255,255,255,.22)}
.hero-card .ot_pp .oneway-switch input:checked + .oneway-track{background:var(--cyan)}

/* =====================================================================
   DATE ROW — Departure + Return side by side
   One way ON  -> only Departure, full width
   One way OFF -> Departure | Return, 50/50
   ===================================================================== */
.transfers-dates-row{
  display:flex;gap:14px;width:100%;flex:0 0 100%;max-width:100%;
  padding:0!important;background:transparent!important;
}
.transfers-dates-row > .transfers-date-cell{
  flex:1 1 0!important;min-width:0!important;
  width:auto!important;max-width:none!important;
  padding:0!important;margin:0!important;background:transparent!important;
  position:relative;float:none!important;
}
/* inputs must be allowed to shrink inside the flex cells */
.transfers-dates-row > .transfers-date-cell > input.onetourismo-app-float-input{
  width:100%!important;min-width:0!important;box-sizing:border-box;
}
/* when the return cell is hidden, departure takes the whole row */
.transfers-dates-row > #cell-date-to[style*="none"] + *{flex:1 1 100%}

/* the popovers inside the row still need room: let them break out */
.transfers-dates-row .onetourismo-app-tooltip{
  min-width:440px;max-width:min(560px,92vw);
}
/* the return popover opens toward the left so it can't leave the card */
.transfers-dates-row #cell-date-to .onetourismo-app-tooltip{left:auto;right:0}

@media(max-width:620px){
  .transfers-dates-row{flex-direction:column}
  .transfers-dates-row .onetourismo-app-tooltip{min-width:0;max-width:92vw;left:0;right:auto}
}

/* =====================================================================
   RESULTS PAGE FORM (.internal-hotel-page)
   The plugin renders the search bar as a horizontal row here. Our
   customised markup adds a nested date row + the One way switch, so lay
   the whole thing out explicitly:
     Destination | Departure | Return | Guests | Search
   ===================================================================== */
.internal-hotel-page{
  display:flex!important;flex-wrap:wrap;align-items:flex-end;gap:12px;
  margin:0!important;
}

/* ---- Results page: all form fields = 62px height ---- */
.internal-hotel-page .select2-selection--single,
.internal-hotel-page #onetourismo-app-search-transfers-from,
.internal-hotel-page #onetourismo-app-search-transfers-to,
.internal-hotel-page input.onetourismo-app-float-input,
.internal-hotel-page .transfers-date-cell > input.onetourismo-app-float-input,
.internal-hotel-page #transfers-persons,
.internal-hotel-page .onetourismo-app-search-transfer[type="button"]{
  height:62px!important;min-height:62px!important;
  box-sizing:border-box!important;
  display:flex!important;align-items:center!important;
}
.internal-hotel-page .select2-selection--single .select2-selection__rendered{
  line-height:normal!important;padding:0!important;
  display:flex;align-items:center;
}
.internal-hotel-page .select2-selection--single .select2-selection__arrow{
  height:62px!important;top:0!important;
}
.internal-hotel-page .select2-selection--single{
  min-height:0!important;
}

/* every direct column becomes an auto-sized flex item, not a grid column */
.internal-hotel-page > [class*="onetourismo-app-col-md-"]{
  width:auto!important;max-width:none!important;flex:1 1 160px!important;
  margin:0!important;padding:0!important;float:none!important;
}

/* destination cell much wider — it holds two selects side by side */
.internal-hotel-page > .onetourismo-app-col-md-4{flex:2.6 1 340px!important}

/* the date row (departure + return) narrower */
.internal-hotel-page > .transfers-dates-row{
  flex:1.4 1 260px!important;display:flex;gap:12px;align-items:flex-end;
}
.internal-hotel-page .transfers-dates-row > .transfers-date-cell{
  flex:1 1 0!important;min-width:0!important;width:auto!important;max-width:none!important;
}

/* guests narrower */
.internal-hotel-page > .onetourismo-app-col-md-2{flex:0 1 130px!important}

/* One way switch: pulled OUT of the flex row so it can't break the line.
   Anchored to the TOP of the wrapper (just under the field row) rather than
   the bottom — the wrapper grows as the plugin appends its own rows, so a
   bottom anchor would drift below them.
   The field row is ~52px tall, so 60px clears it with a small gap. */
.internal-hotel-page{position:relative;padding-top:0!important}
.internal-hotel-page > .trip-type-wrap{
  position:absolute!important;left:0;top:64px;
  width:auto!important;flex:0 0 auto!important;
  padding:0!important;margin:0!important;
}
/* push everything the plugin appends below the switch */
.internal-hotel-page > .onetourismo-app-row.mt-5,
.internal-hotel-page > .onetourismo-app-row.mt-2{margin-top:52px!important}

/* rows the plugin appends after the form take their own full-width line */
.internal-hotel-page > .onetourismo-app-row,
.internal-hotel-page > .mt-5,
.internal-hotel-page > .mt-2{flex:0 0 100%!important;width:100%!important}
.internal-hotel-page > .onetourismo-app-col-md-3:last-of-type{flex:0 0 160px!important}

/* search button matches the field height on this page */
.internal-hotel-page .onetourismo-app-search-transfer[type="button"]{
  width:100%!important;min-height:52px!important;padding:14px 20px!important;
  border-radius:100px!important;
}

/* popovers inside the results form must not spill off-screen */
.internal-hotel-page .onetourismo-app-tooltip{
  max-width:min(560px,92vw);
}
.internal-hotel-page #cell-date-to .onetourismo-app-tooltip,
.internal-hotel-page .transfers-pax{left:auto;right:0}

@media(max-width:900px){
  .internal-hotel-page > [class*="onetourismo-app-col-md-"],
  .internal-hotel-page > .transfers-dates-row{flex:1 1 100%!important}
  .internal-hotel-page .transfers-dates-row{flex-wrap:wrap}
  .internal-hotel-page .onetourismo-app-tooltip{left:0;right:auto;max-width:92vw}
}

/* =====================================================================
   DESTINATION SELECT2 WITH TYPE ICONS (airport / port / location)
   ===================================================================== */
/* icon + label row inside options and the selected value */
.dest-opt{display:inline-flex;align-items:center;gap:8px;min-width:0}
.dest-opt .dest-ico{
  flex:0 0 16px;width:16px!important;height:16px!important;display:inline-block;
  color:#0891b2;fill:#0891b2;
}
.dest-opt .dest-ico path{fill:#0891b2}
.dest-opt .dest-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the Select2 container should match our field look */
.hero-card .select2-container,
.internal-hotel-page .select2-container{width:100%!important}
.hero-card .select2-container--default .select2-selection--single,
.internal-hotel-page .select2-container--default .select2-selection--single{
  height:auto!important;min-height:46px;display:flex;align-items:center;
  background:rgba(255,255,255,.96)!important;border:none!important;border-radius:9px!important;
  padding:6px 30px 6px 12px!important;box-shadow:none!important;
}
.hero-card .select2-container--default .select2-selection--single .select2-selection__rendered,
.internal-hotel-page .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--ink,#0b2540)!important;line-height:1.3!important;padding:0!important;
}
.hero-card .select2-container--default .select2-selection--single .select2-selection__arrow,
.internal-hotel-page .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:100%!important;right:10px!important;
}
.hero-card .select2-container--default .select2-selection--single .select2-selection__placeholder{
  color:rgba(7,26,43,.5)!important;
}

/* dropdown panel */
.select2-dropdown{
  border:1px solid var(--line,#dbe6ef)!important;border-radius:10px!important;
  box-shadow:0 18px 40px rgba(11,37,64,.22)!important;overflow:hidden;
}
.select2-container--default .select2-results__option{
  padding:9px 12px!important;color:var(--ink,#0b2540)!important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--cyan,#4ec3e8)!important;color:#04283a!important;
}
.select2-container--default .select2-results__option--highlighted .dest-ico{color:#04283a!important}
.select2-container--default .select2-search--dropdown .select2-search__field{
  border:1px solid var(--line,#dbe6ef)!important;border-radius:8px!important;padding:8px 10px!important;
}

/* =====================================================================
   Each destination select is wrapped in its own .tk-select-wrap, which is
   also its Select2 dropdownParent. The dropdown renders inside this wrapper
   directly below the field — fully isolated from the sibling select, so
   clicking never cross-wires (fixes the open-and-close flicker).
   ===================================================================== */
.tk-select-wrap{position:relative;display:block;width:100%}
.tk-select-wrap .select2-container{width:100%!important;z-index:5}
.tk-select-wrap .select2-container--open{z-index:9999}
/* dropdown pinned directly under this wrapper's field — force BELOW even if
   Select2 tries to flip it above */
.tk-select-wrap .select2-dropdown,
.tk-select-wrap .select2-dropdown--above,
.tk-select-wrap .select2-dropdown--below{
  position:absolute!important;top:100%!important;bottom:auto!important;
  left:0!important;right:auto!important;width:100%!important;
  margin-top:4px;
  border:1px solid var(--line,#dbe6ef)!important;border-radius:10px!important;
  box-shadow:0 18px 40px rgba(11,37,64,.22)!important;
}
/* selection box clickable on top; label never intercepts */
.onetourismo-app-float-input .select2-selection{pointer-events:auto!important}
.onetourismo-app-float-input .onetourismo-app-float-label{pointer-events:none!important}

/* =====================================================================
   RESULTS PAGE ONLY: From / To selects side by side.
   The two .tk-select-wrap divs live in the Destination cell; on the results
   page lay them out as two columns. (Homepage keeps them stacked.)
   ===================================================================== */
.internal-hotel-page .onetourismo-app-float-input{
  display:flex;flex-wrap:nowrap;gap:10px;align-items:flex-start;
}
.internal-hotel-page .onetourismo-app-float-input .tk-select-wrap{
  flex:1 1 0;min-width:0;width:auto;
}
/* the float label spans the full width above the two selects */
.internal-hotel-page .onetourismo-app-float-input > .onetourismo-app-float-label{
  flex:0 0 100%;order:-1;
}