/* Booking form V2. Loaded only when form V2 is active (see Event::ipBeforeController). */

/* Labels above the fields whose hints used to be cut off on phones */
.siteFormV2 .name-userTakeFrom > label,
.siteFormV2 .type-datepicker > label,
.siteFormV2 .name-transTime > label,
.siteFormV2 .name-userDestination > label,
.siteFormV2 .name-userSk > label {
    display: block;
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #363636;
}

.siteFormV2 .required > label:after {
    content: '\00a0*';
    color: #d0021b;
}

/* The theme floats date and time side by side, then passengers; the next fields start on a new row */
.siteFormV2 .name-userDestination,
.siteFormV2 .name-userName {
    clear: both;
}

/* Fields after the route stay greyed out until a route is picked */
.siteFormV2 .siteFormV2-locked,
.siteFormV2 .siteFormV2-locked .container-checkbox,
.siteFormV2 .siteFormV2-locked .mark {
    cursor: not-allowed;
}

.siteFormV2 .siteFormV2-locked {
    opacity: 0.5;
}

/* Faded white boxes rather than the theme's grey disabled ones, which blend into the form background */
.siteFormV2 .siteFormV2-locked input[disabled],
.siteFormV2 .siteFormV2-locked select[disabled],
.siteFormV2 .siteFormV2-locked textarea[disabled] {
    background-color: #fff;
}

/* Meanwhile the route select is the one field to fill, so it is outlined in teal,
   with the hint under it (see .siteFormV2-hint) pointing at it */
.siteFormV2.siteFormV2-noRoute select[name="userGoFrom"] {
    border-color: #0c5461;
    color: #0c5461;
    font-weight: 700;
    box-shadow: 0 0 0 4px rgba(12, 84, 97, 0.15);
}

.siteFormV2-price {
    padding: 2px 0 4px;
    font-size: 18px;
    color: #0c5461;
}

/* "Choose a route first", shown until a route is picked */
.siteFormV2-price.siteFormV2-hint {
    font-size: 15px;
    font-weight: 600;
    color: #0c5461;
}

.siteFormV2-price.siteFormV2-hint:before {
    content: '\2191\00a0';
}

/* Offer to fill in the details saved in this browser after the last booking */
.siteFormV2-autofill {
    clear: both;
    margin: 4px 0 16px;
    padding: 12px 14px;
    border: 1px solid #c5dde2;
    border-left: 4px solid #0c5461;
    background: #eaf3f5;
    font-size: 15px;
    line-height: 1.4;
    color: #363636;
}

.siteFormV2-autofill-title {
    font-weight: 700;
    color: #0c5461;
}

.siteFormV2-autofill-details {
    margin-top: 2px;
    overflow-wrap: break-word;
}

.siteFormV2-autofill-actions {
    margin-top: 10px;
}

.siteFormV2-autofill-actions button {
    margin: 0 8px 4px 0;
    padding: 6px 16px;
    border: 1px solid #0c5461;
    border-radius: 3px;
    background: #fff;
    font-weight: 700;
    color: #0c5461;
}

.siteFormV2-autofill-actions .siteFormV2-autofill-fill {
    background: #0c5461;
    color: #fff;
}

.siteFormV2-autofill-note {
    margin-top: 4px;
    font-size: 13px;
    color: #666;
}

/* The theme's style.css loads after this file and turns focused links white without an underline,
   and removes focus outlines (on buttons with !important); scoped to .siteFormV2 to win over it */
.siteFormV2 .siteFormV2-autofill-note a {
    color: #0c5461;
    text-decoration: underline;
}

.siteFormV2 .siteFormV2-autofill button:focus-visible,
.siteFormV2 .siteFormV2-autofill a:focus-visible {
    outline: 2px solid #0c5461 !important;
    outline-offset: 2px;
}

/* The theme puts 20px above and below each checkbox, too much between invoice and terms.
   Closer together, the invoice checkbox's floated (hidden) input would push the terms text aside */
.siteFormV2 .container-checkbox {
    margin: 6px 0;
    clear: both;
}

/* Errors in bright red under the field */
.siteFormV2 .form-group.has-error .form-control,
.siteFormV2 .form-group.has-error input {
    border-color: #d0021b;
}

.siteFormV2 .form-group.has-error .help-error {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #d0021b;
}

/* Bigger date picker with a solid background */
#ui-datepicker-div.ui-datepicker {
    width: 340px;
    max-width: calc(100vw - 20px);
    padding: 6px;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    z-index: 1000 !important;
}

#ui-datepicker-div .ui-datepicker-title {
    font-size: 18px;
    line-height: 2em;
}

#ui-datepicker-div th {
    padding: 6px 0;
    font-size: 13px;
}

#ui-datepicker-div td a,
#ui-datepicker-div td span {
    padding: 10px 0;
    font-size: 18px;
    text-align: center;
}

#ui-datepicker-div .ui-state-disabled {
    opacity: 0.3;
}

/* Bigger time picker; hours and minutes set apart by a gap, a divider and a teal tint on the minutes */
#ui-timepicker-div {
    max-width: 370px;
    max-width: min(370px, calc(100vw - 16px));
    padding: 6px;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

#ui-timepicker-div .ui-widget-header {
    font-size: 15px;
}

#ui-timepicker-div td a {
    padding: 8px 4px;
    font-size: 17px;
}

#ui-timepicker-div .ui-timepicker-hours {
    padding-right: 8px;
}

#ui-timepicker-div .ui-timepicker-minutes {
    padding-left: 8px;
    border-left: 2px solid #0c5461;
}

#ui-timepicker-div .ui-timepicker-minutes .ui-widget-header {
    border-color: #0c5461;
    background: #0c5461;
    color: #fff;
}

#ui-timepicker-div .ui-timepicker-minutes a.ui-state-default {
    border-color: #c5dde2;
    background: #eaf3f5;
    color: #0c5461;
}

#ui-timepicker-div .ui-timepicker-minutes a.ui-state-hover {
    border-color: #0c5461;
    background: #cfe3e8;
}

#ui-timepicker-div .ui-timepicker-minutes a.ui-state-active {
    border-color: #0c5461;
    background: #fff;
    color: #0c5461;
    font-weight: 700;
}