/* Visible keyboard focus (WCAG 2.4.7).

   style.css strips the focus ring off nearly everything that can hold focus -
   `.btn`, `input[type=text]`, `label`, `.control` all carry `outline: none`,
   several of them with !important. That leaves a keyboard user with nothing to
   follow. These rules put an indicator back for keyboard users only: :focus-visible
   does not fire for a plain mouse click, so the visual design is untouched.

   Loaded after style.css - the !important flags and the source order are what beat
   the `outline: none !important` rules already in there. */

summary:focus-visible,
select:focus-visible,
label:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible,
input[type="checkbox"]:focus-visible {
    border-color: #E84A38;
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid #A31F34 !important;
    outline-offset: 2px !important;
}
/* links inside body copy sit on white, keep the ring tight to the text */
.inner__main a:focus-visible,
.rte a:focus-visible,
p a:focus-visible,
li a:focus-visible,
.link:focus-visible {
    outline-offset: 1px !important;
    border-radius: 2px;
}

/* the counters in the passengers dropdown are small, an offset ring would sit on
   top of the +/- controls */
.steppers .steppers__value:focus-visible {
    outline-offset: 0 !important;
    border-radius: 4px;
}

.steppers .stepper:focus-visible {
    outline: 2px solid #A31F34 !important;
    outline-offset: 3px !important;
    border-radius: 50%;
}

.languages .popup button:focus-visible {
    background: #E84A38;
}

/* the city row the arrow keys are sitting on in the From / To dropdowns */
.select-list .select-list__item_highlighted {
    background: #F7F8FA;
    box-shadow: inset 3px 0 0 0 #E84A38;
}

.select-list .select-list__item_highlighted:focus {
    outline: none !important;
    border: none !important;
}

/* browsers without :focus-visible fall back to :focus, ring on mouse clicks and all */
@supports not selector(:focus-visible) {
    a:focus,
    button:focus,
    [role="button"]:focus,
    [role="tab"]:focus,
    [tabindex]:not([tabindex="-1"]):focus,
    select:focus{
        outline: 2px solid #A31F34 !important;
        outline-offset: 2px !important;
    }

    .steppers .stepper:focus {
        outline: 2px solid #A31F34 !important;
        outline-offset: 3px !important;
        border-radius: 50%;
    }
}