/* ==========================================================================
   UserWay accessibility widget — Evo design-system skin.

   SCOPE: the floating trigger button only.

   The widget's panel is rendered inside a cross-origin iframe served from
   cdn.userway.org, so nothing in this file can reach it. The panel's own
   appearance is not configurable from the page either — the iframe URL carries
   only `account`, `language` and a `tunings` payload, with no colour in it, so
   panel theming has to be changed in the UserWay dashboard for the account.

   `data-color` on the loader script in App.razor therefore affects the trigger
   button only: the vendor writes it as `background: <data-color> !important` in
   an INLINE style, which outranks any stylesheet declaration. That is why the
   button's fill comes from `data-color` rather than from here, and why the
   hover/active shades below are expressed as `filter: brightness()` instead of
   a `background-color` override.

   `!important` is used deliberately throughout: these rules have to win against
   the vendor's own injected stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Placement — bottom-right.

   The vendor default puts the trigger at the top-right, where it sits on top of
   the mobile install banner's close button. The panel iframe is positioned
   independently (fixed, full-viewport), so moving the button wrapper does not
   affect it.
   -------------------------------------------------------------------------- */
.uwy .userway_buttons_wrapper {
    top: auto !important;
    left: auto !important;
    right: 24px !important;
    bottom: 24px !important;
    /* The vendor anchors the wrapper with a negative `right` plus a
       translateX(-100%) nudge. Both halves have to go, or the button lands one
       button-width further left than the inset above asks for. */
    transform: none !important;
}

/* --------------------------------------------------------------------------
   Trigger buttons — accessibility menu and the (optional) translations menu.
   -------------------------------------------------------------------------- */
.uwy #userwayAccessibilityIcon.uai,
.uwy #userwayLstIcon.ulsti {
    border-radius: var(--border-radius-full, 9999px) !important;
    /* Elevation copied from the `.drop-shadow-400` token in main.css, the step
       the design system uses for floating surfaces. */
    box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.12), 0 10px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    /* Site convention is 0.2s ease. box-shadow is deliberately left out of the
       transition: it carries the keyboard focus ring below, which must appear
       instantly rather than fade in. */
    transition: filter 0.2s ease, transform 0.2s ease !important;
}

/* --------------------------------------------------------------------------
   Glyph — swap UserWay's generic figure for the design system's own
   `icon-wheelchair` (Icons/sprite.svg), in white.

   The vendor renders its glyph as a 44x44 <img> that fills the entire button,
   which is what makes the default read as a big generic pictogram rather than an
   Evo control. Evo icon buttons pair a 24px icon with a 44px target, so the
   vendor image is hidden and the icon is painted on its wrapper instead.
   -------------------------------------------------------------------------- */
.uwy #userwayAccessibilityIcon.uai .uiiw img.ui_w {
    /* visibility, not display: the vendor measures this node's box. */
    visibility: hidden !important;
}

.uwy #userwayAccessibilityIcon.uai .uiiw {
    background-image: url(../Icons/wheelchair-white.svg) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 24px 24px !important;
}

.uwy #userwayAccessibilityIcon.uai:hover,
.uwy #userwayLstIcon.ulsti:hover {
    /* Approximates --blue-sky-700 (#0046A8) against the inline --blue-sky-600
       fill, which cannot be overridden from a stylesheet. */
    filter: brightness(0.92) !important;
}

.uwy #userwayAccessibilityIcon.uai:active,
.uwy #userwayLstIcon.ulsti:active {
    /* Approximates --blue-sky-800 (#00357E). */
    filter: brightness(0.84) !important;
    transform: scale(0.96) !important;
}

/* The vendor paints its own blue outline on plain `:focus`, which fires on mouse
   clicks too. Drop it, then re-introduce a ring for keyboard focus only. Keep
   these two blocks in this order — equal specificity, so the later one wins. */
.uwy #userwayAccessibilityIcon.uai:focus,
.uwy #userwayLstIcon.ulsti:focus {
    outline: none !important;
}

/* Keyboard focus — mirrors the `.btn:focus:not(:disabled)` convention in
   main.css so the widget's focus treatment matches every other control. */
.uwy #userwayAccessibilityIcon.uai:focus-visible,
.uwy #userwayLstIcon.ulsti:focus-visible {
    outline: 2px solid var(--white, #ffffff) !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB)) !important;
}

/* --------------------------------------------------------------------------
   Responsive — tighter insets on small viewports, matching the site's
   768px breakpoint.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .uwy .userway_buttons_wrapper {
        right: 16px !important;
        bottom: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   Respect reduced-motion preferences.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .uwy #userwayAccessibilityIcon.uai,
    .uwy #userwayLstIcon.ulsti {
        transition: none !important;
    }

    .uwy #userwayAccessibilityIcon.uai:active,
    .uwy #userwayLstIcon.ulsti:active {
        transform: none !important;
    }
}

/* The widget is interactive chrome — never part of a printed page. */
@media print {
    .uwy {
        display: none !important;
    }
}