/*
 * EK Hyva: accessible Freshchat launcher + dialog chrome.
 */

/* Fixed launcher, bottom-right. It stays in DOM order after the footer, so its
   visual position does not affect the keyboard order. */
.ek-chat {
    position: fixed;
    right: 20px;
    bottom: 21px;
    z-index: 2222;
}
.ek-chat[hidden] {
    display: none;
}

.ek-chat__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;   /* 60x60 target: well above WCAG 2.5.8 (24px) */
    height: 60px;
    padding: 0;
    border: 0;
    border-radius: 34px 8px 34px 34px;
    /* #8b0b04 vs page white = 9.78:1, white icon on it = 9.78:1 (1.4.11 needs 3:1) */
    background-color: #8b0b04;
    color: #fff;
    box-shadow: 0 5px 4px 0 rgb(0 0 0 / 26%);
    cursor: pointer;
}
.ek-chat__button:hover {
    background-color: #6f0903;
}

/*
 * Focus indicator (WCAG 2.4.7 visible focus, 1.4.11 non-text contrast 3:1).
 * The button floats over arbitrary content (photos, dark banners, white
 * footer), so a single colour cannot be guaranteed 3:1 against everything.
 * A two-tone ring solves that: the white inner ring contrasts 9.78:1 with the
 * red button and with dark backgrounds, the #111 outer ring contrasts 18.9:1
 * with the white ring and with light backgrounds. Total 5px thick, enclosing
 * the whole control (also meets the 2.2 "focus appearance" guidance).
 * :focus-visible keeps it off for mouse clicks; keyboard focus always shows it.
 */
.ek-chat__button:focus {
    outline: none;
}
.ek-chat__button:focus-visible {
    /* transparent outline is still painted in Windows forced-colors mode,
       where box-shadow is removed — keeps focus visible in High Contrast. */
    outline: 3px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #111;
}

.ek-chat__button[aria-busy="true"] {
    cursor: progress;
    opacity: 0.8;
}

.ek-chat__icon {
    pointer-events: none;
}

/* Entry animation only for users who have not asked for reduced motion (2.3.3). */
@media (prefers-reduced-motion: no-preference) {
    .ek-chat__button {
        animation: ek-chat-zoom 0.5s both;
    }
    .ek-chat__button[aria-busy="true"] .ek-chat__icon {
        animation: ek-chat-pulse 1.2s ease-in-out infinite;
    }
}
@keyframes ek-chat-zoom {
    from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    50%  { opacity: 1; }
}
@keyframes ek-chat-pulse {
    50% { opacity: 0.4; }
}

/* Visually hidden but available to screen readers. */
.ek-chat__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;
}

/*
 * "Close chat" button injected into Freshchat's #fc_frame. Hidden until it
 * has keyboard focus (it is the first stop in the dialog) so it does not cover
 * Freshchat's own header; mouse users keep Freshchat's own close control.
 */
.ek-chat__close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2147483647;
    padding: 6px 12px;
    border: 0;
    border-radius: 4px;
    background: #111;
    color: #fff;
    font: 600 14px/1.4 system-ui, sans-serif;
    cursor: pointer;
    /* Off-screen until focused, same pattern as a skip link. */
    transform: translateY(-200%);
    opacity: 0;
}
/* :focus-visible, not :focus: when the chat is opened with the mouse, focus is
   still placed here (so Escape works) but the button stays hidden. It appears
   only for keyboard focus, i.e. when the user Tabs/Shift+Tabs onto it. */
.ek-chat__close:focus-visible {
    transform: none;
    opacity: 1;
    outline: 3px solid transparent;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #8b0b04;
}

/* Focus sentinels that wrap Tab/Shift+Tab inside the dialog: no visual box. */
.ek-chat__sentinel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    outline: none;
}

/* Freshchat's iframe gets the ring when it receives focus from our script. */
#fc_frame #fc_widget:focus-visible {
    outline: 3px solid #111;
    outline-offset: -3px;
}