/* Keep every planner divider tied to its actual grid cell. */
.ref-plan-field .ref-time-control { display: block; position: relative; width: 100%; min-height: 1.55rem; text-transform: none; letter-spacing: normal; }
.ref-time-control input { display: block; min-height: 1.55rem; padding-right: 1.65rem; cursor: pointer; }
.ref-time-control input[data-empty="true"]:not(:focus) { color: transparent; }
.ref-time-control input[data-empty="true"]:not(:focus)::-webkit-datetime-edit { opacity: 0; }
.ref-time-placeholder { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: #6c746d; font: 500 .8rem/1.35 var(--sans); pointer-events: none; }
.ref-time-control input:not([data-empty="true"]) ~ .ref-time-placeholder,
.ref-time-control input:focus ~ .ref-time-placeholder { display: none; }
.ref-time-icon { position: absolute; right: .1rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; pointer-events: none; color: #596159; }
.ref-time-control input::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; }
.reference-home footer.site-footer .footer-trust { display: flex; gap: .65rem 1.2rem; margin-top: 1.5rem; font-size: .61rem; line-height: 1.65; letter-spacing: .07em; }
.reference-home footer.site-footer .footer-trust span { display: block; }
@media (min-width: 1101px) {
  .ref-planner-form .ref-time-field { border-bottom: 1px solid #d8d5ca; }
}
@media (max-width: 1100px) and (min-width: 881px) {
  .ref-planner-form { grid-template-areas: "title title title" "journey pickup destination" "date time passengers" "luggage flight vehicle" "action action action"; }
  .ref-planner-title { grid-area: title; border-right: 0; }
  .ref-planner-form .ref-plan-field { border-right: 1px solid #d8d5ca; border-bottom: 1px solid #d8d5ca; }
  .ref-plan-field.ref-destination-field, .ref-plan-field.ref-pax, .ref-plan-field.ref-vehicle { border-right: 0; }
}
@media (max-width: 880px) {
  .ref-planner-form { grid-template-areas: "title title" "journey pickup" "destination date" "time passengers" "luggage flight" "luggage vehicle" "action action"; }
  .ref-planner-title { grid-area: title; border-right: 0; }
  .ref-planner-form .ref-plan-field { border-right: 0; border-bottom: 1px solid #d8d5ca; }
  .ref-planner-form .ref-journey-field,
  .ref-planner-form .ref-destination-field,
  .ref-planner-form .ref-time-field,
  .ref-planner-form .ref-luggage-field { border-right: 1px solid #d8d5ca; }
  .ref-plan-action { border-top: 0; }
}
@media (max-width: 1100px) {
  .ref-journey-field { grid-area: journey; }
  .ref-pickup-field { grid-area: pickup; }
  .ref-destination-field { grid-area: destination; }
  .ref-date { grid-area: date; }
  .ref-time-field { grid-area: time; }
  .ref-pax { grid-area: passengers; }
  .ref-luggage-field { grid-area: luggage; }
  .ref-flight { grid-area: flight; }
  .ref-vehicle { grid-area: vehicle; }
  .ref-plan-action { grid-area: action; }
}
@media (max-width: 600px) {
  .ref-time-placeholder { font-size: .73rem; }
  /* Avoid Safari zooming the page when opening the native time picker. */
  .ref-time-control input { font-size: 16px; }
}
