/* ======================================================================
   RouteOS Booking Widget (Public Frontend)
   Everything is scoped under .ro-booking-widget for WP/theme safety
   ====================================================================== */

.ro-booking-widget{
  container-type: inline-size;
  width: 100%;
  max-width: none;
  margin: 0;
  --ro-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --ro-font-size: 14px;

  --ro-input-font-size: 1rem;
  --ro-input-line-height: 1.5rem;

  --ro-surface: #ffffff;
  --ro-surface-2: #ffffff;
  --ro-text: #111827;
  --ro-field-text: #111827;
  --ro-muted: #6b7280;
  --ro-border: rgba(17,24,39,.10);

  --ro-primary: #0b5ed7;
  --ro-primary-contrast: #ffffff;
  --ro-focus: rgba(11,94,215,.22);

  --ro-ac-icon: var(--ro-muted);
  --ro-ac-icon-hover: var(--ro-primary);
  --ro-ac-icon-google: rgba(11,94,215,.75);

  --ro-radius: 18px;
  --ro-radius-sm: 14px;
  --ro-shadow-sm: 0 10px 28px rgba(17,24,39,.06);
  --ro-shadow: 0 18px 60px rgba(0,0,0,.12);
  --ro-timepicker-surface: #ffffff;
  --ro-timepicker-border: rgba(17,24,39,.10);
  --ro-timepicker-shadow: 0 22px 70px rgba(15,23,42,.18);
  --ro-timepicker-backdrop: rgba(15,23,42,.28);
  --ro-timepicker-step-bg: #f8fafc;
  --ro-timepicker-step-border: rgba(17,24,39,.10);
  --ro-timepicker-step-color: #111827;
  --ro-timepicker-muted: #6b7280;

  --ro-gap-mobile: 3px;
  --ro-gap-desktop: 5px;

  --ro-seg-radius: var(--ro-radius-sm);

  --ro-gap-submit-mobile: 6px;
  --ro-gap-submit-desktop: 10px;

  /* Journey dropdown (customizable) */
  --ro-journey-btn-bg: #fff;
  --ro-journey-btn-border: rgba(17,24,39,.12);
  --ro-journey-btn-radius: 10px;
  --ro-journey-btn-pad-y: 7px;
  --ro-journey-btn-pad-x: 10px;
  --ro-journey-btn-font: 800;
  --ro-journey-btn-shadow: none;

  --ro-journey-menu-bg: #fff;
  --ro-journey-menu-border: rgba(17,24,39,.12);
  --ro-journey-menu-radius: 12px;
  --ro-journey-menu-shadow: 0 18px 60px rgba(0,0,0,.12);

  --ro-journey-menu-pad: 10px;
  --ro-journey-item-pad-y: 14px;
  --ro-journey-item-pad-x: 14px;
  --ro-journey-item-gap: 12px;
  --ro-journey-item-hover: rgba(11,94,215,.10);
  --ro-journey-item-active: rgba(11,94,215,.10);

  font-family: var(--ro-font);
  font-size: var(--ro-font-size);
  color: var(--ro-text);
  background: transparent;
}

.ro-booking-widget,
.ro-booking-widget *{ box-sizing: border-box; }

.ro-timepicker-host{
  container-type: normal !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-family: var(--ro-font);
  font-size: var(--ro-font-size);
  color: var(--ro-text);
}

.ro-booking-widget input,
.ro-booking-widget select,
.ro-booking-widget button{ max-width: 100%; }

.ro-booking-wrap{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.ro-card{
  width: 100%;
  background: var(--ro-surface);
  border: 1px solid var(--ro-border);
  border-radius: var(--ro-radius);
  box-shadow: var(--ro-shadow-sm);
  padding: 14px;
}

/* ============ Form layout ============ */

.ro-form-flex{ display: block; }
.ro-form-right{ margin-top: var(--ro-gap-submit-mobile); }

@container (min-width: 992px){
  .ro-form-flex{
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 1.16fr) minmax(0, 1.20fr) 116px;
    gap: var(--ro-gap-desktop);
    align-items: start;
  }

  .ro-form-left{
    display: contents;
  }

  .ro-journey-row{
    grid-column: 1 / -1;
  }

  .ro-seg-row{
    grid-column: 1 / 4;
  }

  .ro-via-add-wrap-desktop,
  .ro-via-host,
  .ro-return-wrap{
    grid-column: 1 / 4;
  }

  .ro-form-right{
    grid-column: 4;
    grid-row: 2;
    margin-top: 0;
    display: flex;
    min-width: 0;
    align-self: stretch;
  }
}

/* Grid helpers */
.ro-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ro-gap-mobile);
}

/* Main row */
.ro-grid-cabcher{
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--ro-gap-mobile);
}

@container (min-width: 992px){
  .ro-grid{ gap: var(--ro-gap-desktop); }
  .ro-grid-cabcher{
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 1.16fr) minmax(0, 1.20fr);
    align-items: stretch;
    gap: var(--ro-gap-desktop);
  }
}

.ro-grid-dt{
  grid-template-columns: 1fr 0.75fr;
  gap: var(--ro-gap-mobile);
}
@container (min-width: 992px){
  .ro-grid-dt{
    grid-template-columns: 1fr 1fr;
    gap: var(--ro-gap-desktop);
  }
}

@container (max-width: 991.98px){
  .ro-grid-dt{
    grid-template-columns: 1fr;
  }
}

.ro-grid-return{
  grid-template-columns: 1fr;
  gap: var(--ro-gap-mobile);
}
@container (min-width: 992px){
  .ro-grid-return{ gap: var(--ro-gap-desktop); }
}

.ro-sr-only{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.ro-field{ min-width: 0; }
.ro-input-wrap{ position: relative; }
.ro-time-selects{ display: none !important; }
.ro-datetime-hidden-fields{ display: none !important; }
.ro-time-trigger,
.ro-datetime-trigger{
  cursor: pointer;
  user-select: none;
  caret-color: transparent;
}
.ro-timepicker{
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}
.ro-booking-widget.ro-timepicker-open .ro-timepicker,
.ro-timepicker-host.ro-timepicker-open .ro-timepicker{
  pointer-events: auto;
  opacity: 1;
}
.ro-timepicker-backdrop{
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--ro-timepicker-backdrop);
}
.ro-timepicker-panel{
  position: fixed;
  z-index: 1;
  pointer-events: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  overflow: hidden;
  background: var(--ro-timepicker-surface);
  color: var(--ro-text);
  border: 1px solid var(--ro-timepicker-border);
  box-shadow: var(--ro-timepicker-shadow);
  padding: 16px;
}
.ro-timepicker-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ro-timepicker-title{
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
}
.ro-timepicker-close{
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  padding: 0;
  border: 1px solid rgba(17,24,39,.18);
  border-radius: 999px;
  background: var(--ro-timepicker-step-bg);
  color: var(--ro-timepicker-step-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.ro-timepicker-close svg{
  width: 14px;
  height: 14px;
  display: block;
}
.ro-timepicker-close:hover,
.ro-timepicker-close:focus,
.ro-timepicker-close:focus-visible,
.ro-timepicker-close:active{
  transform: scale(1.06);
  background: #dbe3ee;
  color: #0f172a;
}
.ro-timepicker-body{
  display: grid;
  min-height: 0;
  align-items: start;
  overflow: auto;
}
.ro-timepicker.is-popover .ro-timepicker-body{
  grid-template-columns: minmax(308px, 1.34fr) 1px minmax(184px, .66fr);
  gap: 14px;
  overflow: visible;
}
.ro-timepicker.is-sheet .ro-timepicker-body{
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  overflow: hidden;
}
.ro-timepicker-date-pane,
.ro-timepicker-time-pane{
  display: grid;
  gap: 10px;
  min-width: 0;
}
.ro-timepicker.is-popover .ro-timepicker-time-pane{
  max-width: 208px;
}
.ro-timepicker-section-label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(17,24,39,.70);
}
.ro-timepicker-calendar-host{
  display: flex;
  justify-content: flex-start;
  position: relative;
  min-width: 0;
  overflow: visible;
}
.ro-timepicker-calendar-input{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}
.ro-timepicker-panel-divider{
  align-self: stretch;
  width: 1px;
  background: rgba(17,24,39,.08);
}
.ro-timepicker-composite{
  display: grid;
  grid-template-columns: minmax(0, 76px) auto minmax(0, 76px);
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.ro-timepicker-column{
  display: grid;
  gap: 6px;
}
.ro-timepicker-divider{
  font-size: 2.35rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ro-timepicker-muted);
}
.ro-timepicker-step{
  appearance: none;
  -webkit-appearance: none;
  min-height: 32px;
  border: 1px solid rgba(17,24,39,.18);
  border-radius: 12px;
  background: #edf1f6;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}
.ro-timepicker .ro-timepicker-step:hover,
.ro-timepicker .ro-timepicker-step:focus,
.ro-timepicker .ro-timepicker-step:focus-visible,
.ro-timepicker .ro-timepicker-step:active{
  background: #dbe3ee;
  color: #0f172a;
}
.ro-timepicker-step svg{
  width: 16px;
  height: 16px;
  display: block;
}
.ro-timepicker-step:disabled{
  opacity: .42;
  cursor: not-allowed;
}
.ro-timepicker .ro-timepicker-field{
  appearance: textfield;
  -moz-appearance: textfield;
  width: 100%;
  min-height: 58px;
  padding: .5rem .75rem;
  border: 1px solid rgba(17,24,39,.18);
  border-radius: 12px;
  background: #fff;
  color: var(--ro-field-text);
  text-align: center;
  font-family: inherit;
  font-style: normal;
  line-height: 1;
  font-size: clamp(2rem, 3.7vw, 2.35rem);
  font-weight: 600;
  letter-spacing: .04em;
}
.ro-timepicker-field:focus,
.ro-timepicker-step:focus,
.ro-timepicker-step:focus-visible{
  outline: none;
  border-color: var(--ro-primary);
  box-shadow: 0 0 0 4px var(--ro-focus);
}
.ro-timepicker-note{
  color: var(--ro-timepicker-muted);
  font-size: .875rem;
  line-height: 1.4;
}
.ro-timepicker-actions{
  display: flex;
}
.ro-timepicker-back,
.ro-timepicker-next{
  display: none;
}
.ro-timepicker .ro-timepicker-back[hidden],
.ro-timepicker .ro-timepicker-next[hidden],
.ro-timepicker .ro-timepicker-done[hidden]{
  display: none !important;
}
.ro-timepicker .ro-timepicker-back,
.ro-timepicker .ro-timepicker-next{
  border: 1px solid var(--ro-timepicker-step-border);
  background: var(--ro-timepicker-step-bg);
  color: var(--ro-timepicker-step-color);
  box-shadow: none;
}
.ro-timepicker .ro-timepicker-back:hover,
.ro-timepicker .ro-timepicker-back:focus,
.ro-timepicker .ro-timepicker-back:focus-visible,
.ro-timepicker .ro-timepicker-back:active,
.ro-timepicker .ro-timepicker-next:hover,
.ro-timepicker .ro-timepicker-next:focus,
.ro-timepicker .ro-timepicker-next:focus-visible,
.ro-timepicker .ro-timepicker-next:active{
  background: #dbe3ee;
  color: #0f172a;
  border-color: rgba(17,24,39,.18);
  box-shadow: 0 0 0 4px var(--ro-focus);
}
.ro-timepicker-done{
  width: 100%;
}
.ro-timepicker-calendar-host .flatpickr-calendar.inline{
  box-shadow: none;
  border: 0;
  background: transparent;
  width: 307.875px;
  max-width: 307.875px;
  min-width: 307.875px;
}
.ro-timepicker-calendar-host .flatpickr-months{
  margin-bottom: 4px;
  overflow: visible;
}
.ro-timepicker-calendar-host .flatpickr-months .flatpickr-month{
  overflow: visible;
}
.ro-timepicker-calendar-host .flatpickr-current-month{
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: rgba(0,0,0,.9);
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  transform: translate3d(0,0,0);
  white-space: nowrap;
}
.ro-timepicker-calendar-host .flatpickr-current-month .flatpickr-monthDropdown-months{
  all: unset;
  appearance: menulist;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  display: inline-block;
  width: auto;
  max-width: none;
  padding: 0 0 0 .5ch;
  margin: -1px 0 0;
  border: 0;
  background: transparent;
  color: rgba(0,0,0,.9);
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  box-shadow: none;
  vertical-align: initial;
  cursor: pointer;
}
.ro-timepicker-calendar-host .flatpickr-current-month .flatpickr-monthDropdown-months:hover{
  background: rgba(0,0,0,.05);
}
.ro-timepicker-calendar-host .flatpickr-current-month input.cur-year{
  all: unset;
  display: inline-block;
  width: 6ch;
  max-width: none;
  padding: 0 16px 0 .5ch;
  margin: 0;
  border: 0;
  background: transparent;
  color: rgba(0,0,0,.9);
  font-size: inherit;
  font-family: inherit;
  font-weight: 400;
  line-height: inherit;
  box-shadow: none;
  vertical-align: initial;
  cursor: text;
  box-sizing: border-box;
}
.ro-timepicker-calendar-host .flatpickr-current-month .numInputWrapper{
  width: 7.2ch;
  display: inline-block;
}
.ro-timepicker-calendar-host .flatpickr-current-month .numInputWrapper span{
  box-sizing: border-box;
}
.ro-timepicker-calendar-host .flatpickr-months .flatpickr-prev-month,
.ro-timepicker-calendar-host .flatpickr-months .flatpickr-next-month{
  color: rgba(0,0,0,.9);
  fill: rgba(0,0,0,.9);
}
.ro-timepicker-host .ro-timepicker .flatpickr-current-month .flatpickr-monthDropdown-months,
.ro-timepicker-host .ro-timepicker .flatpickr-current-month input.cur-year{
  min-height: 0 !important;
  height: auto !important;
  white-space: nowrap !important;
  letter-spacing: normal !important;
  max-width: none !important;
}
.ro-timepicker-calendar-host .flatpickr-weekday{
  color: var(--ro-timepicker-muted);
  font-weight: 700;
}
.ro-timepicker-calendar-host .flatpickr-day{
  font-weight: 400;
}
.ro-timepicker-calendar-host .flatpickr-innerContainer{
  overflow: visible;
}
.ro-timepicker-calendar-host .flatpickr-months{
  position: relative;
  z-index: 2;
}
.ro-timepicker-calendar-host .flatpickr-innerContainer{
  position: relative;
  z-index: 1;
}
.ro-timepicker.is-popover .ro-timepicker-panel{
  left: 0;
  top: 0;
  bottom: auto;
  width: min(620px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  border-radius: 24px;
  overflow: visible;
}
.ro-timepicker.is-popover .ro-timepicker-backdrop{
  background: transparent;
}
.ro-timepicker.is-sheet .ro-timepicker-panel{
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
}
.ro-timepicker.is-sheet .ro-timepicker-title{
  font-size: 1.05rem;
  text-align: center;
}
.ro-timepicker.is-sheet .ro-timepicker-header{
  gap: 8px;
}
.ro-timepicker.is-sheet .ro-timepicker-date-pane,
.ro-timepicker.is-sheet .ro-timepicker-time-pane{
  gap: 8px;
}
.ro-timepicker.is-sheet .ro-timepicker-calendar-host{
  justify-content: center;
}
.ro-timepicker.is-sheet .ro-timepicker-calendar-host .flatpickr-calendar.inline{
  width: min(294px, calc(100vw - 40px));
  max-width: min(294px, calc(100vw - 40px));
  min-width: min(294px, calc(100vw - 40px));
}
.ro-timepicker.is-sheet .ro-timepicker-composite{
  grid-template-columns: minmax(0, 68px) auto minmax(0, 68px);
  gap: 6px;
}
.ro-timepicker.is-sheet .ro-timepicker-field{
  min-height: 52px;
  font-size: clamp(1.95rem, 6vw, 2.35rem);
  padding: .5rem .6rem;
}
.ro-timepicker.is-sheet .ro-timepicker-step{
  min-height: 30px;
}
.ro-timepicker.is-sheet .ro-timepicker-note{
  display: none;
}
.ro-timepicker.is-sheet .ro-timepicker-panel-divider{
  width: auto;
  height: 1px;
}
.ro-timepicker.is-sheet .ro-timepicker-actions{
  padding-top: 4px;
}
.ro-timepicker.is-compact-sheet .ro-timepicker-panel{
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
}
.ro-timepicker.is-compact-sheet .ro-timepicker-title{
  font-size: 1rem;
}
.ro-timepicker.is-compact-sheet .ro-timepicker-body{
  gap: 10px;
}
.ro-timepicker.is-compact-sheet .ro-timepicker-date-pane,
.ro-timepicker.is-compact-sheet .ro-timepicker-time-pane{
  gap: 6px;
}
.ro-timepicker.is-compact-sheet .ro-timepicker-date-pane{
  display: none;
}
.ro-timepicker.is-compact-sheet .ro-timepicker-panel[data-ro-step="date"] .ro-timepicker-date-pane{
  display: grid;
}
.ro-timepicker.is-compact-sheet .ro-timepicker-panel[data-ro-step="date"] .ro-timepicker-time-pane,
.ro-timepicker.is-compact-sheet .ro-timepicker-panel[data-ro-step="date"] .ro-timepicker-panel-divider{
  display: none;
}
.ro-timepicker.is-compact-sheet .ro-timepicker-panel[data-ro-step="time"] .ro-timepicker-date-pane,
.ro-timepicker.is-compact-sheet .ro-timepicker-panel[data-ro-step="time"] .ro-timepicker-panel-divider{
  display: none;
}
.ro-timepicker.is-compact-sheet .ro-timepicker-panel[data-ro-step="time"] .ro-timepicker-time-pane{
  display: grid;
}
.ro-timepicker.is-compact-sheet .ro-timepicker-calendar-host .flatpickr-calendar.inline{
  width: min(276px, calc(100vw - 28px));
  max-width: min(276px, calc(100vw - 28px));
  min-width: min(276px, calc(100vw - 28px));
}
.ro-timepicker.is-compact-sheet .ro-timepicker-composite{
  grid-template-columns: minmax(0, 62px) auto minmax(0, 62px);
  gap: 4px;
}
.ro-timepicker.is-compact-sheet .ro-timepicker-field{
  min-height: 48px;
  font-size: clamp(1.75rem, 8vw, 2.1rem);
  padding: .45rem .45rem;
}
.ro-timepicker.is-compact-sheet .ro-timepicker-step{
  min-height: 28px;
}
.ro-timepicker.is-compact-sheet .ro-timepicker-divider{
  font-size: 2rem;
}
.ro-timepicker.is-compact-sheet .ro-timepicker-back,
.ro-timepicker.is-compact-sheet .ro-timepicker-next{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex: 1 1 0;
}
.ro-timepicker.is-compact-sheet .ro-timepicker-next{
  background: var(--ro-primary);
  color: var(--ro-primary-contrast);
  border-color: var(--ro-primary);
}
.ro-timepicker.is-compact-sheet .ro-timepicker-next:hover,
.ro-timepicker.is-compact-sheet .ro-timepicker-next:focus,
.ro-timepicker.is-compact-sheet .ro-timepicker-next:focus-visible,
.ro-timepicker.is-compact-sheet .ro-timepicker-next:active{
  background: #0b5ed7;
  color: var(--ro-primary-contrast);
  border-color: #0b5ed7;
}
.ro-timepicker.is-compact-sheet .ro-timepicker-actions{
  gap: 10px;
}
.ro-timepicker.is-compact-sheet .ro-timepicker-done{
  flex: 1 1 0;
}

/* =========================
   Journey dropdown
   ========================= */

.ro-journey-row{ margin-bottom: 10px; }
.ro-journey-dd{ position: relative; display: inline-block; }

.ro-journey-btn{
  appearance: none;
  border: 1px solid var(--ro-journey-btn-border);
  background: var(--ro-journey-btn-bg);
  color: var(--ro-text);
  border-radius: var(--ro-journey-btn-radius);
  padding: var(--ro-journey-btn-pad-y) var(--ro-journey-btn-pad-x);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-weight: var(--ro-journey-btn-font);
  line-height: 1;
  box-shadow: var(--ro-journey-btn-shadow);
}
.ro-journey-btn:focus,
.ro-journey-dd.is-open .ro-journey-btn{
  outline: none;
  border-color: var(--ro-primary);
  box-shadow: 0 0 0 4px var(--ro-focus);
}

.ro-journey-caret{
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ro-muted);
}
.ro-journey-caret svg{ width: 16px; height: 16px; display: block; }

.ro-journey-menu{
  display: none;
  position: absolute;
  z-index: 99999;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--ro-journey-menu-bg);
  border: 1px solid var(--ro-journey-menu-border);
  border-radius: 12px;
  box-shadow: var(--ro-journey-menu-shadow);
  padding: var(--ro-journey-menu-pad);
}

.ro-journey-item{
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ro-text);
  display: flex;
  align-items: center;
  gap: var(--ro-journey-item-gap);
  padding: var(--ro-journey-item-pad-y) var(--ro-journey-item-pad-x);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-weight: 800;
}
.ro-journey-item + .ro-journey-item{ margin-top: 10px; }
.ro-journey-item:hover,
.ro-journey-item:focus,
.ro-journey-item:active{ background: var(--ro-journey-item-hover) !important; color: var(--ro-text) !important; }
.ro-journey-item.is-active{ background: transparent !important; color: var(--ro-text) !important; }
.ro-journey-item.is-active:hover,
.ro-journey-item.is-active:focus,
.ro-journey-item.is-active:active{ background: var(--ro-journey-item-hover) !important; color: var(--ro-text) !important; }

.ro-journey-item-ic{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ro-muted);
}
.ro-journey-item.is-active .ro-journey-item-ic{ color: var(--ro-muted); }
.ro-journey-item-ic svg{ width: 18px; height: 18px; display: block; }

/* Return area */
.ro-return-wrap{ margin-top: 10px; }
.ro-return-title{
  font-weight: 900;
  letter-spacing: .01em;
  margin: 4px 0 8px 2px;
  color: var(--ro-text);
  font-size: 13px;
}

/* ------------------------------------------------------------------
   MOBILE (<992px): icons + placeholders, NO in-field labels
   ------------------------------------------------------------------ */
.ro-infield-label{ display:none; }

/* Icon mask */
.ro-input-wrap::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: var(--ro-muted);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  opacity: .9;
}

/* pickup pin */
.ro-input-wrap[data-icon="pickup"]::before{
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M18.364 4.636a9 9 0 0 1 .203 12.519l-.203 .210l-4.243 4.242a3 3 0 0 1 -4.097 .135l-.144 -.135l-4.244 -4.243a9 9 0 0 1 12.728 -12.728zm-6.364 3.364a3 3 0 1 0 0 6a3 3 0 0 0 0 -6' /></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M18.364 4.636a9 9 0 0 1 .203 12.519l-.203 .210l-4.243 4.242a3 3 0 0 1 -4.097 .135l-.144 -.135l-4.244 -4.243a9 9 0 0 1 12.728 -12.728zm-6.364 3.364a3 3 0 1 0 0 6a3 3 0 0 0 0 -6' /></svg>");
}

/* dropoff flag */
.ro-input-wrap[data-icon="dropoff"]::before{
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M4 5a1 1 0 0 1 .3 -.714a6 6 0 0 1 8.213 -.176l.351 .328a4 4 0 0 0 5.272 0l.249 -.227c.61 -.483 1.527 -.097 1.61 .676l.005 .113v9a1 1 0 0 1 -.3 .714a6 6 0 0 1 -8.213 .176l-.351 -.328a4 4 0 0 0 -5.136 -.114v6.552a1 1 0 0 1 -1.993 .117l-.007 -.117v-16z' /></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M4 5a1 1 0 0 1 .3 -.714a6 6 0 0 1 8.213 -.176l.351 .328a4 4 0 0 0 5.272 0l.249 -.227c.61 -.483 1.527 -.097 1.61 .676l.005 .113v9a1 1 0 0 1 -.3 .714a6 6 0 0 1 -8.213 .176l-.351 -.328a4 4 0 0 0 -5.136 -.114v6.552a1 1 0 0 1 -1.993 .117l-.007 -.117v-16z' /></svg>");
}

/* calendar */
.ro-input-wrap[data-icon="date"]::before{
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M8 12a1 1 0 0 1 1 1v4a1 1 0 0 1 -2 0v-4a1 1 0 0 1 1 -1' /><path d='M12 12a1 1 0 0 1 1 1v4a1 1 0 0 1 -2 0v-4a1 1 0 0 1 1 -1' /><path d='M16 12a1 1 0 0 1 1 1v4a1 1 0 0 1 -2 0v-4a1 1 0 0 1 1 -1' /><path d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M8 12a1 1 0 0 1 1 1v4a1 1 0 0 1 -2 0v-4a1 1 0 0 1 1 -1' /><path d='M12 12a1 1 0 0 1 1 1v4a1 1 0 0 1 -2 0v-4a1 1 0 0 1 1 -1' /><path d='M16 12a1 1 0 0 1 1 1v4a1 1 0 0 1 -2 0v-4a1 1 0 0 1 1 -1' /><path d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /></svg>");
}

/* clock */
.ro-input-wrap[data-icon="time"]::before{
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M17 3.34a10 10 0 1 1 -15 8.66l.005 -.324a10 10 0 0 1 14.995 -8.336m-5 2.66a1 1 0 0 0 -1 1v5.026l.009 .105l.02 .107l.04 .129l.048 .102l.046 .078l.042 .06l.069 .08l.088 .083l.083 .062l3 2a1 1 0 1 0 1.11 -1.664l-2.555 -1.704v-4.464a1 1 0 0 0 -.883 -.993z' /></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M17 3.34a10 10 0 1 1 -15 8.66l.005 -.324a10 10 0 0 1 14.995 -8.336m-5 2.66a1 1 0 0 0 -1 1v5.026l.009 .105l.02 .107l.04 .129l.048 .102l.046 .078l.042 .06l.069 .08l.088 .083l.083 .062l3 2a1 1 0 1 0 1.11 -1.664l-2.555 -1.704v-4.464a1 1 0 0 0 -.883 -.993z' /></svg>");
}

/* stop (VIA) icon */
.ro-input-wrap[data-icon="stop"]::before{
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0' /><path d='M12.794 21.322a2 2 0 0 1 -2.207 -.422l-4.244 -4.243a8 8 0 1 1 13.59 -4.616' /><path d='M16 19h6' /><path d='M19 16v6' /></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0' /><path d='M12.794 21.322a2 2 0 0 1 -2.207 -.422l-4.244 -4.243a8 8 0 1 1 13.59 -4.616' /><path d='M16 19h6' /><path d='M19 16v6' /></svg>");
}

.ro-booking-widget .ro-input{
  width: 100%;
  background: var(--ro-surface-2);
  border: 1px solid var(--ro-border);
  outline: none;
  font-size: var(--ro-input-font-size);
  line-height: var(--ro-input-line-height);
  padding: 16px 16px 16px 42px;
  min-height: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ro-booking-widget .ro-input:focus{
  border-color: var(--ro-primary);
  box-shadow: 0 0 0 4px var(--ro-focus);
}

.ro-booking-widget .ro-input[aria-invalid="true"]{
  border-color: #dc2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, .14);
}

.ro-input-wrap.ro-input-wrap-error::before{
  background: #dc2626;
}

.ro-booking-widget .ro-input::placeholder{
  font-weight: 400;
  opacity: .70;
}

.ro-ac-hint{
  display: none;
  margin-top: 8px;
  color: #b91c1c;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
}

.ro-clear-btn{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  padding: 0;
  flex: 0 0 28px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.12);
  background: #fff;
  color: var(--ro-muted);
  display: none;
  font-size: 18px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  appearance: none;
  -webkit-appearance: none;
}
.ro-clear-btn:hover{ background: rgba(0,0,0,.04); color: var(--ro-text); }
.ro-clear-btn:focus{ outline: none; box-shadow: 0 0 0 4px var(--ro-focus); }

@container (min-width: 992px){
  .ro-input-wrap::before{ display:none; }

  .ro-booking-widget .ro-input-wrap .ro-infield-label{
    display:block;
    position:absolute;
    left: 16px;
    top: 14px;
    font-size: 12px;
    font-weight: 700;
    color: #111827;
    text-transform: capitalize;
    pointer-events:none;
    line-height: 1.1;
    letter-spacing: .01em;
  }

  .ro-booking-widget .ro-input{
    min-height: 72px;
    padding: 38px 44px 18px 16px;
  }

  .ro-booking-widget .ro-input::placeholder{ opacity: .55; }
}

/* ------------------ Segmented rounding (main + return) ------------------ */

.ro-seg .ro-input{ border-radius: 0; }
.ro-seg--via .ro-input{ border-radius: var(--ro-seg-radius) !important; }

@container (min-width: 992px){
  .ro-seg--from .ro-input{
    border-top-left-radius: var(--ro-seg-radius);
    border-bottom-left-radius: var(--ro-seg-radius);
  }
  .ro-seg--to .ro-input,
  .ro-seg--date .ro-input{ border-radius: 0; }
  .ro-seg--time .ro-input{
    border-top-right-radius: var(--ro-seg-radius);
    border-bottom-right-radius: var(--ro-seg-radius);
  }
  #ro-return-wrap .ro-seg--date .ro-input{
    border-top-left-radius: var(--ro-seg-radius);
    border-bottom-left-radius: var(--ro-seg-radius);
  }
  .ro-field--schedule .ro-seg--date .ro-input{
    border-top-right-radius: var(--ro-seg-radius);
    border-bottom-right-radius: var(--ro-seg-radius);
  }
}

@container (max-width: 991.98px){
  .ro-seg--from .ro-input{
    border-top-left-radius: var(--ro-seg-radius);
    border-top-right-radius: var(--ro-seg-radius);
  }
  .ro-seg--to .ro-input{
    border-bottom-left-radius: var(--ro-seg-radius);
    border-bottom-right-radius: var(--ro-seg-radius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .ro-seg--date .ro-input,
  .ro-seg--time .ro-input{ border-radius: var(--ro-seg-radius); }

  #ro-return-wrap .ro-seg--date .ro-input,
  #ro-return-wrap .ro-seg--time .ro-input{
    border-radius: var(--ro-seg-radius) !important;
  }
}

/* Buttons */
.ro-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: var(--ro-radius-sm);
  border: 1px solid rgba(17,24,39,.12);
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  color: var(--ro-text);
  font-weight: 800;
  letter-spacing: .02em;
  min-height: 56px;
}

.ro-submit-btn{
  min-height: 58px;
}

.ro-submit-label--desktop{
  display: none;
}

@container (min-width: 992px){
  .ro-submit-btn{
    height: 82px;
    min-height: 82px;
    padding: 0 14px;
  }

  .ro-submit-label--mobile{
    display: none;
  }

  .ro-submit-label--desktop{
    display: inline;
  }
}

.ro-customer-primary-btn{
  box-shadow: none;
}

.ro-btn-primary{
  background: var(--ro-primary);
  border-color: var(--ro-primary);
  color: var(--ro-primary-contrast);
}
/* Submit button hover */
.ro-btn-primary:hover{
  background: #1d4ed8;
  border-color: #1d4ed8;
}

/* Optional: smooth transition */
.ro-btn-primary{
  transition: background .15s ease, border-color .15s ease;
}
.ro-btn-block{ width: 100%; }
.ro-btn:disabled{ opacity: .55; cursor: not-allowed; }

.ro-btn[aria-busy="true"]{
  position: relative;
  pointer-events: none;
}

.ro-btn[aria-busy="true"]::before{
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: ro-btn-spin .7s linear infinite;
}


.ro-submit-btn[aria-busy="true"]{
  color: transparent !important;
}

.ro-submit-btn[aria-busy="true"]::before{
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border-color: var(--ro-primary-contrast);
  border-right-color: transparent;
}



@keyframes ro-btn-spin{
  to { transform: rotate(360deg); }
}

.ro-mini-note{
  margin-top: 10px;
  font-size: 12px;
  color: var(--ro-muted);
}

/* Alerts */
.ro-alert{
  border: 1px solid rgba(17,24,39,.12);
  background: #fff;
  border-radius: var(--ro-radius-sm);
  padding: 10px 12px;
}
.ro-alert-error{
  border-color: rgba(220,38,38,.25);
  background: rgba(220,38,38,.06);
}

/* ---------------- Autocomplete dropdown ---------------- */

/* IMPORTANT: list is now rendered inside .ro-input-wrap */
.ro-ac-anchor{
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  z-index: 100010;
  display: none;
}

/* the actual scrollable panel */
.ro-ac-list{
  position: relative;
  margin: 0;
  background: #fff;
  border: 1px solid rgba(17,24,39,.12);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.10);
  max-height: var(--ro-ac-max-height, 320px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 8px;
}

.ro-ac-section{
  padding: 12px 12px 8px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(17,24,39,.70);
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 0;
  background: transparent;
}
.ro-ac-section:not(:first-child){
  margin-top: 6px;
}

.ro-ac-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 11px 12px;
  cursor: pointer;
  border-bottom: 0;
  border-radius: 12px;
}
.ro-ac-item:hover{ background: rgba(11,94,215,.06); }
.ro-ac-item.is-active{ background: rgba(11,94,215,.10); }

.ro-ac-item.ro-ac-loading,
.ro-ac-item.ro-ac-empty{ cursor: default; }
.ro-ac-item.ro-ac-loading:hover,
.ro-ac-item.ro-ac-empty:hover{ background: transparent; }

.ro-ac-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  color: var(--ro-ac-icon, var(--ro-muted));
  margin-top: 2px;
}
.ro-ac-item:hover .ro-ac-icon,
.ro-ac-item.is-active .ro-ac-icon{ color: var(--ro-ac-icon-hover, var(--ro-primary)); }
.ro-ac-item[data-source="google"] .ro-ac-icon{ color: var(--ro-ac-icon-google, rgba(11,94,215,.75)); }
.ro-ac-icon svg{ width:18px !important; height:18px !important; display:block; }

.ro-ac-txt{ min-width: 0; flex: 1 1 auto; }
.ro-ac-one-line{
  display:flex;
  gap:8px;
  align-items: baseline;
  white-space: normal;
  overflow: visible;
  line-height: 1.25;
  word-break: break-word;
}
.ro-ac-main-inline{ font-weight: 400; }
.ro-ac-sub-inline{ font-size: 12px; color: var(--ro-muted); }
.ro-ac-hl{ font-weight: 800; color: inherit; }

/* ---------------- Flatpickr styling ---------------- */
.flatpickr-calendar{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.10);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
.flatpickr-day{ border-radius: 10px; }
.flatpickr-day:hover{ background: rgba(0,0,0,.06); }
.flatpickr-day.today{ border-color: rgba(0,0,0,.25); }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
  background: #111;
  border-color: #111;
  color: #fff;
}


/* ------------------------------ Via stops ------------------------------ */

.ro-via-add-wrap{ margin-top: 6px; margin-bottom: 6px; }
.ro-via-add-wrap-desktop{ display: none; }

.ro-via-add{
  appearance:none;
  background: transparent !important;
  border: 0;
  padding: 6px 0 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  color: var(--ro-text) !important;
  cursor: pointer;
  opacity: .85;
  text-decoration: none;
  box-shadow: none;
}
.ro-via-add:hover,
.ro-via-add:focus,
.ro-via-add:active{ background: transparent !important; color: var(--ro-text) !important; opacity: 1; text-decoration: underline; box-shadow: none; }

.ro-via-host{ margin-top: 6px; }
.ro-via-row{ margin-top: 10px; position: relative; }

.ro-via-mobile-host{ margin-top: var(--ro-gap-mobile); margin-bottom: var(--ro-gap-mobile); }

@container (min-width: 992px){
  .ro-via-add-wrap-mobile{ display: none !important; }
  .ro-via-add-wrap-desktop{
    margin-top: 2px;
    margin-bottom: 0;
  }
  .ro-via-host{ margin-top: 2px; }
  .ro-return-wrap{ margin-top: 4px; }
}

.ro-via-input-wrap{ position: relative; }
@container (max-width: 991.98px){
  .ro-via-add-wrap-desktop{ display: none !important; }
  .ro-seg--via .ro-input{ background: rgba(0,0,0,.02); }
  .ro-seg--via .ro-input{ border-radius: 0 !important; }
  .ro-via-mobile-host:empty{
    display: none !important;
    margin: 0 !important;
  }
  .ro-via-host{ margin-top: 0 !important; margin-bottom: 0 !important; }
  .ro-via-row{ margin-top: 0; position: relative; }
  .ro-via-row + .ro-via-row{ margin-top: 3px; }
}

.ro-via-remove{
  position: absolute;
  right: -8px;
  top: -8px;
  z-index: 6;

  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  padding: 0;
  flex: 0 0 28px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.98) !important;
  color: var(--ro-text) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.ro-via-remove:hover,
.ro-via-remove:focus,
.ro-via-remove:active{
  transform: scale(1.06);
  background: rgb(255, 80, 80) !important;
  color: #fff !important;
  text-decoration: none;
  box-shadow: none;
}

@container (max-width: 991.98px){
  .ro-grid-cabcher{
    row-gap: 3px !important;
    column-gap: 3px !important;
  }
}
@container (max-width: 991.98px){ /* List containers should not add spacing when empty, but MUST NOT zero font-size/line-height (it kills dropdown text). */ #ro-from-list, #ro-to-list{ margin: 0 !important; padding: 0 !important; min-height: 0 !important; } /* If the list containers are empty, hide them so they don't create gap */ #ro-from-list:empty, #ro-to-list:empty{ display: none !important; } /* Via host behavior (keep) */ .ro-via-mobile-host{ margin: 0 !important; padding: 0 !important; min-height: 0 !important; } .ro-via-mobile-host:not(:has(.ro-via-row)){ display: none !important; } }

.ro-booking-widget .ro-journey-btn,
.ro-booking-widget .ro-journey-btn:hover,
.ro-booking-widget .ro-journey-btn:focus,
.ro-booking-widget .ro-journey-btn:active{
  background: var(--ro-journey-btn-bg) !important;
  color: var(--ro-text) !important;
  text-decoration: none;
  box-shadow: var(--ro-journey-btn-shadow);
}

.ro-booking-widget .ro-journey-item,
.ro-booking-widget .ro-journey-item:hover,
.ro-booking-widget .ro-journey-item:focus,
.ro-booking-widget .ro-journey-item:active,
.ro-booking-widget .ro-via-add,
.ro-booking-widget .ro-via-add:hover,
.ro-booking-widget .ro-via-add:focus,
.ro-booking-widget .ro-via-add:active,
.ro-booking-widget .ro-via-remove,
.ro-booking-widget .ro-via-remove:hover,
.ro-booking-widget .ro-via-remove:focus,
.ro-booking-widget .ro-via-remove:active{
  border-image: none;
}
.ro-booking-widget .ro-clear-btn,
.ro-booking-widget .ro-clear-btn:hover,
.ro-booking-widget .ro-clear-btn:focus,
.ro-booking-widget .ro-clear-btn:active,
.ro-booking-widget .ro-via-remove,
.ro-booking-widget .ro-via-remove:hover,
.ro-booking-widget .ro-via-remove:focus,
.ro-booking-widget .ro-via-remove:active{
  margin: 0;
}
.ro-clear-btn svg,
.ro-via-remove svg{
  width: 14px;
  height: 14px;
  display: block;
  flex: 0 0 14px;
  pointer-events: none;
}

.ro-booking-widget .ro-journey-btn:focus,
.ro-booking-widget .ro-journey-dd.is-open .ro-journey-btn{
  outline: none;
  border-color: var(--ro-primary);
  box-shadow: 0 0 0 4px var(--ro-focus) !important;
}

/* Theme isolation hardening ------------------------------------------------- */
.ro-booking-widget input,
.ro-booking-widget select,
.ro-booking-widget textarea{
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.ro-booking-widget button[class^="ro"],
.ro-booking-widget button[class*=" ro"]{
  font-family: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.ro-booking-widget button[class^="ro"],
.ro-booking-widget button[class*=" ro"],
.ro-booking-widget a[class^="ro-btn"],
.ro-booking-widget a[class*=" ro-btn"]{
  appearance: none;
  -webkit-appearance: none;
  background-image: none !important;
  text-transform: none;
  margin: 0;
}

.ro-booking-widget .ro-input:focus-visible{
  border-color: var(--ro-primary);
  box-shadow: 0 0 0 4px var(--ro-focus);
}

.ro-booking-widget .ro-btn,
.ro-booking-widget button.ro-btn,
.ro-booking-widget a.ro-btn,
.ro-booking-widget .ro-btn:hover,
.ro-booking-widget .ro-btn:focus,
.ro-booking-widget .ro-btn:focus-visible,
.ro-booking-widget .ro-btn:active{
  text-decoration: none !important;
  background-image: none !important;
  border-image: none;
}

.ro-booking-widget .ro-btn{
  font-size: 14px;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}

@container (max-width: 991.98px){
  .ro-booking-widget .ro-submit-btn{
    font-size: 15px;
  }
}

.ro-booking-widget .ro-btn:focus,
.ro-booking-widget .ro-btn:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 4px var(--ro-focus) !important;
}

.ro-booking-widget .ro-btn:not(.ro-btn-primary):not(.ro-btn-secondary):hover,
.ro-booking-widget .ro-btn:not(.ro-btn-primary):not(.ro-btn-secondary):focus,
.ro-booking-widget .ro-btn:not(.ro-btn-primary):not(.ro-btn-secondary):focus-visible,
.ro-booking-widget .ro-btn:not(.ro-btn-primary):not(.ro-btn-secondary):active{
  background: #fff !important;
  border-color: rgba(17,24,39,.12) !important;
  color: var(--ro-text) !important;
}

.ro-booking-widget .ro-btn-primary,
.ro-booking-widget .ro-btn-primary:focus,
.ro-booking-widget .ro-btn-primary:focus-visible{
  background: var(--ro-primary) !important;
  border-color: var(--ro-primary) !important;
  color: var(--ro-primary-contrast) !important;
}

.ro-booking-widget .ro-btn-primary:hover,
.ro-booking-widget .ro-btn-primary:active{
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: var(--ro-primary-contrast) !important;
}

.ro-booking-widget .ro-btn-secondary,
.ro-booking-widget .ro-btn-secondary:hover,
.ro-booking-widget .ro-btn-secondary:focus,
.ro-booking-widget .ro-btn-secondary:focus-visible,
.ro-booking-widget .ro-btn-secondary:active{
  background: #fff !important;
  border-color: rgba(17,24,39,.12) !important;
  color: var(--ro-text) !important;
}

.ro-booking-widget .ro-journey-btn,
.ro-booking-widget .ro-journey-btn:hover,
.ro-booking-widget .ro-journey-btn:focus,
.ro-booking-widget .ro-journey-btn:focus-visible,
.ro-booking-widget .ro-journey-btn:active{
  background: var(--ro-journey-btn-bg) !important;
  color: var(--ro-text) !important;
  text-decoration: none;
  border-image: none;
}

.ro-booking-widget .ro-journey-btn:focus,
.ro-booking-widget .ro-journey-btn:focus-visible,
.ro-booking-widget .ro-journey-dd.is-open .ro-journey-btn{
  outline: none;
  border-color: var(--ro-primary) !important;
  box-shadow: 0 0 0 4px var(--ro-focus) !important;
}

.ro-booking-widget .ro-journey-item,
.ro-booking-widget .ro-journey-item:hover,
.ro-booking-widget .ro-journey-item:focus,
.ro-booking-widget .ro-journey-item:focus-visible,
.ro-booking-widget .ro-journey-item:active{
  border-image: none;
  outline: none;
}

.ro-booking-widget .ro-journey-item:hover,
.ro-booking-widget .ro-journey-item:focus,
.ro-booking-widget .ro-journey-item:focus-visible,
.ro-booking-widget .ro-journey-item:active{
  background: var(--ro-journey-item-hover) !important;
  color: var(--ro-text) !important;
  box-shadow: none !important;
}

.ro-booking-widget .ro-journey-item.is-active{
  background: transparent !important;
  color: var(--ro-text) !important;
  box-shadow: none !important;
}

.ro-booking-widget .ro-journey-item.is-active:hover,
.ro-booking-widget .ro-journey-item.is-active:focus,
.ro-booking-widget .ro-journey-item.is-active:focus-visible,
.ro-booking-widget .ro-journey-item.is-active:active{
  background: var(--ro-journey-item-hover) !important;
  color: var(--ro-text) !important;
  box-shadow: none !important;
}

.ro-booking-widget .ro-via-add:hover,
.ro-booking-widget .ro-via-add:focus,
.ro-booking-widget .ro-via-add:focus-visible,
.ro-booking-widget .ro-via-add:active{
  background: transparent !important;
  color: var(--ro-text) !important;
  text-decoration: underline;
  box-shadow: none !important;
}

.ro-booking-widget .ro-clear-btn:focus,
.ro-booking-widget .ro-clear-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--ro-focus) !important;
}

.ro-booking-widget .ro-via-remove:hover,
.ro-booking-widget .ro-via-remove:focus,
.ro-booking-widget .ro-via-remove:focus-visible,
.ro-booking-widget .ro-via-remove:active{
  outline: none;
  box-shadow: none !important;
}