/* ==============================================
   Webi Digital Accessibility - Widget styles
   Version 1.0.0
   - Violet palette, soft rounded surfaces
   - List-style switch rows instead of tile grid
   - !important on critical visuals to beat theme overrides
   ============================================== */

/* ==============================================
   1) Floating launcher button
   ============================================== */
#webi-toggle {
    position: fixed !important;
    z-index: 999998 !important;
    background: var(--webi-primary, #5b21b6) !important;
    color: var(--webi-icon, #ffffff) !important;
    border: 3px solid rgba(255,255,255,0.85) !important;
    cursor: pointer !important;
    box-shadow: 0 0 0 4px rgba(91,33,182,0.22), 0 10px 24px rgba(17,12,46,0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit;
    box-sizing: border-box !important;
    line-height: 1 !important;
}
#webi-toggle:hover { transform: translateY(-3px) rotate(-6deg); box-shadow: 0 0 0 6px rgba(91,33,182,0.28), 0 14px 30px rgba(17,12,46,0.42) !important; }
#webi-toggle:focus-visible { outline: 3px solid #fbbf24 !important; outline-offset: 4px !important; }
#webi-toggle svg { width: 58% !important; height: 58% !important; fill: var(--webi-icon, #ffffff) !important; display: block !important; }

#webi-toggle.webi-pos-bottom-right { bottom: var(--webi-offset-y, 20px) !important; right: var(--webi-offset-x, 20px) !important; }
#webi-toggle.webi-pos-bottom-left  { bottom: var(--webi-offset-y, 20px) !important; left:  var(--webi-offset-x, 20px) !important; }
#webi-toggle.webi-pos-top-right    { top:    var(--webi-offset-y, 20px) !important; right: var(--webi-offset-x, 20px) !important; }
#webi-toggle.webi-pos-top-left     { top:    var(--webi-offset-y, 20px) !important; left:  var(--webi-offset-x, 20px) !important; }
#webi-toggle.webi-pos-middle-right { top: calc(50% + var(--webi-offset-y, 0px)) !important; right: var(--webi-offset-x, 20px) !important; transform: translateY(-50%); }
#webi-toggle.webi-pos-middle-left  { top: calc(50% + var(--webi-offset-y, 0px)) !important; left:  var(--webi-offset-x, 20px) !important; transform: translateY(-50%); }
#webi-toggle.webi-pos-middle-right:hover,
#webi-toggle.webi-pos-middle-left:hover { transform: translateY(-50%) scale(1.08) !important; }

#webi-toggle.webi-size-small  { width: 46px !important; height: 46px !important; }
#webi-toggle.webi-size-medium { width: 58px !important; height: 58px !important; }
#webi-toggle.webi-size-large  { width: 70px !important; height: 70px !important; }

#webi-toggle.webi-shape-circle  { border-radius: 50% !important; }
#webi-toggle.webi-shape-rounded { border-radius: 20px !important; }
#webi-toggle.webi-shape-square  { border-radius: 8px !important; }

/* ==============================================
   2) Panel
   ============================================== */
#webi-panel {
    position: fixed !important;
    top: 0 !important;
    width: 360px !important;
    max-width: 100vw !important;
    height: 100vh !important;
    background: #f5f3ff !important;
    color: #1e1b3a !important;
    box-shadow: -12px 0 40px rgba(17,12,46,0.28) !important;
    z-index: 999999 !important;
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.22,1,.36,1) !important;
    display: flex !important;
    flex-direction: column !important;
    direction: rtl !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}
/* Font is set via inline <style> in <head> based on admin setting.
   This is a non-!important fallback in case the inline style fails to load. */
#webi-panel { font-family: inherit; }
#webi-panel.webi-side-right { right: 0 !important; transform: translateX(100%); border-radius: 24px 0 0 24px !important; }
#webi-panel.webi-side-left  { left:  0 !important; box-shadow: 12px 0 40px rgba(17,12,46,0.28) !important; transform: translateX(-100%); border-radius: 0 24px 24px 0 !important; }
#webi-panel.webi-open       { transform: translateX(0) !important; }

#webi-panel * { box-sizing: border-box; font-family: inherit; }

#webi-panel[inert] { pointer-events: none; }

/* --- Header --- */
#webi-panel .webi-header {
    background: linear-gradient(160deg, var(--webi-primary, #5b21b6) 0%, var(--webi-primary, #5b21b6) 55%, rgba(0,0,0,0.35) 260%) !important;
    background-color: var(--webi-primary, #5b21b6) !important;
    color: var(--webi-primary-text, #ffffff) !important;
    padding: 22px 22px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    border: 0 !important;
    border-bottom: 4px solid #fbbf24 !important;
    margin: 0 !important;
    min-height: 76px !important;
}
#webi-panel .webi-header h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--webi-primary-text, #ffffff) !important;
    line-height: 1.25 !important;
    background: transparent !important;
    border: 0 !important;
    text-shadow: none !important;
    letter-spacing: 0 !important;
}

#webi-panel .webi-close {
    background: rgba(255,255,255,0.16) !important;
    border: 2px solid rgba(255,255,255,0.55) !important;
    color: var(--webi-primary-text, #ffffff) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-size: 15px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .2s, transform .2s !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}
#webi-panel .webi-close:hover { background: rgba(255,255,255,0.32) !important; transform: rotate(90deg) !important; }
#webi-panel .webi-close:focus-visible { outline: 3px solid #fbbf24 !important; outline-offset: 2px !important; }
#webi-panel .webi-close span { color: inherit !important; font-size: inherit !important; }

/* --- Body --- */
#webi-panel .webi-body {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px 18px 8px !important;
    background: #f5f3ff !important;
    scrollbar-width: thin;
}

/* --- Sections --- */
#webi-panel .webi-section { margin: 0 0 20px 0 !important; padding: 0 !important; }
#webi-panel .webi-section h3 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #3b2a7a !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    background: transparent !important;
    border: 0 !important;
}
#webi-panel .webi-section h3::before {
    content: "" !important;
    width: 4px !important;
    height: 16px !important;
    border-radius: 2px !important;
    background: #fbbf24 !important;
    flex-shrink: 0 !important;
}

/* --- Quick row (3 cols) --- */
#webi-panel .webi-quick-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}
#webi-panel .webi-quick {
    background: #ffffff !important;
    border: 2px solid transparent !important;
    border-radius: 18px !important;
    padding: 14px 4px 12px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    color: #1e1b3a !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
    text-align: center !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    box-shadow: 0 2px 8px rgba(59,42,122,0.10) !important;
    margin: 0 !important;
    width: 100% !important;
    font-family: inherit !important;
}
#webi-panel .webi-quick:hover { border-color: var(--webi-primary, #5b21b6) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 18px rgba(59,42,122,0.18) !important; }
#webi-panel .webi-quick:focus-visible { outline: 3px solid var(--webi-primary, #5b21b6) !important; outline-offset: 2px !important; }
#webi-panel .webi-quick.webi-active { background: var(--webi-primary, #5b21b6) !important; color: var(--webi-primary-text, #ffffff) !important; border-color: #fbbf24 !important; box-shadow: 0 8px 18px rgba(91,33,182,0.35) !important; }
#webi-panel .webi-quick .webi-quick-icon {
    font-size: 20px !important;
    display: block !important;
    margin: 0 auto 6px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: inherit !important;
}

/* --- Option list (one column of switch rows) --- */
#webi-panel .webi-grid-2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#webi-panel .webi-btn {
    background: #ffffff !important;
    border: 2px solid transparent !important;
    border-radius: 16px !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
    font-size: 13.5px !important;
    color: #1e1b3a !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
    text-align: right !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    box-shadow: 0 1px 4px rgba(59,42,122,0.10) !important;
    margin: 0 !important;
    width: 100% !important;
    font-family: inherit !important;
}
#webi-panel .webi-btn:hover { border-color: var(--webi-primary, #5b21b6) !important; box-shadow: 0 4px 12px rgba(59,42,122,0.16) !important; }
#webi-panel .webi-btn:focus-visible { outline: 3px solid var(--webi-primary, #5b21b6) !important; outline-offset: 2px !important; }
#webi-panel .webi-btn svg {
    width: 34px !important;
    height: 34px !important;
    padding: 7px !important;
    border-radius: 10px !important;
    background: #ede9fe !important;
    fill: var(--webi-primary, #5b21b6) !important;
    display: block !important;
    flex-shrink: 0 !important;
}
#webi-panel .webi-btn span { color: inherit !important; flex: 1 !important; }
/* switch track on the trailing edge */
#webi-panel .webi-btn::after {
    content: "" !important;
    flex-shrink: 0 !important;
    width: 38px !important;
    height: 22px !important;
    border-radius: 11px !important;
    background: radial-gradient(circle at calc(100% - 11px) 50%, #ffffff 8px, transparent 8.5px), #b4acd3 !important;
    transition: background .2s ease !important;
}
#webi-panel .webi-btn.webi-active {
    background: var(--webi-primary, #5b21b6) !important;
    color: var(--webi-primary-text, #ffffff) !important;
    border-color: #fbbf24 !important;
    box-shadow: 0 6px 16px rgba(91,33,182,0.32) !important;
}
#webi-panel .webi-btn.webi-active svg { background: rgba(255,255,255,0.2) !important; fill: var(--webi-primary-text, #ffffff) !important; }
#webi-panel .webi-btn.webi-active::after {
    background: radial-gradient(circle at 11px 50%, currentColor 8px, transparent 8.5px), rgba(255,255,255,0.3) !important;
}

/* --- Counter widgets --- */
#webi-panel .webi-counter {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 2px solid #ddd6fe !important;
    border-radius: 999px !important;
    padding: 4px !important;
    gap: 6px !important;
    margin: 0 !important;
}
#webi-panel .webi-counter-btn {
    flex-shrink: 0 !important;
    width: 38px !important;
    height: 38px !important;
    border: 0 !important;
    background: var(--webi-primary, #5b21b6) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--webi-primary-text, #ffffff) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: transform .15s, box-shadow .15s !important;
    box-shadow: 0 2px 6px rgba(91,33,182,0.35) !important;
    font-family: inherit !important;
    line-height: 1 !important;
}
#webi-panel .webi-counter-btn:hover { transform: scale(1.08) !important; }
#webi-panel .webi-counter-btn:focus-visible { outline: 3px solid #fbbf24 !important; outline-offset: 2px !important; }
#webi-panel .webi-counter-label {
    flex: 1 !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1e1b3a !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* --- Reset --- */
#webi-panel .webi-reset-row { margin: 6px 0 16px 0 !important; padding: 0 !important; }
#webi-panel .webi-reset {
    width: 100% !important;
    background: #9f1239 !important;
    border: 2px solid #9f1239 !important;
    color: #ffffff !important;
    padding: 12px !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    transition: background .15s, transform .15s !important;
    box-shadow: 0 4px 12px rgba(159,18,57,0.30) !important;
    margin: 0 !important;
    font-family: inherit !important;
    line-height: 1.3 !important;
}
#webi-panel .webi-reset:hover { background: #881337 !important; border-color: #881337 !important; transform: translateY(-1px) !important; }
#webi-panel .webi-reset:focus-visible { outline: 3px solid #fbbf24 !important; outline-offset: 2px !important; }

/* --- Footer --- */
#webi-panel .webi-footer {
    flex-shrink: 0 !important;
    padding: 14px 18px !important;
    background: #1e1b3a !important;
    border-top: 0 !important;
    text-align: center !important;
    font-size: 12.5px !important;
    color: #e0dcf5 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}
#webi-panel .webi-footer a {
    color: #fcd34d !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    background: transparent !important;
}
#webi-panel .webi-footer a:hover { color: #ffffff !important; }
#webi-panel .webi-footer a:focus-visible { outline: 2px solid #fcd34d !important; outline-offset: 2px !important; }
#webi-panel .webi-statement-link { display: block !important; margin: 0 0 6px 0 !important; }
#webi-panel .webi-credit-line { display: block !important; color: #e0dcf5 !important; }

/* ==============================================
   3) Reading helpers
   ============================================== */
#webi-reading-guide {
    position: fixed; left: 0; width: 100vw; height: 36px;
    background: rgba(0,0,0,0.55);
    border-top: 2px solid #22d3ee;
    border-bottom: 2px solid #22d3ee;
    pointer-events: none; z-index: 999997; top: 0; display: none;
}
html.webi-reading-guide-on #webi-reading-guide { display: block; }
#webi-reading-mask-top, #webi-reading-mask-bottom {
    position: fixed; left: 0; width: 100vw;
    background: rgba(0,0,0,0.7); pointer-events: none; z-index: 999997; display: none;
}
#webi-reading-mask-top { top: 0; }
#webi-reading-mask-bottom { bottom: 0; }
html.webi-reading-mask-on #webi-reading-mask-top,
html.webi-reading-mask-on #webi-reading-mask-bottom { display: block; }

/* ==============================================
   4) Accessibility modes
   ============================================== */

/* --- Grayscale ---
   IMPORTANT: filter must NOT be applied to <body> directly, because that
   would turn body into the containing block for our position:fixed panel,
   making it "snap" out of the viewport. Instead, we filter body's DIRECT
   CHILDREN, excluding the widget. body itself has no filter, so the panel
   stays positioned relative to the viewport. */
html.webi-grayscale body > *:not(#webi-panel):not(#webi-toggle):not(#webi-reading-guide):not(#webi-reading-mask-top):not(#webi-reading-mask-bottom) {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
}

html.webi-high-contrast body :not(#webi-panel, #webi-panel *, #webi-toggle, #webi-toggle *, #webi-reading-guide, #webi-reading-mask-top, #webi-reading-mask-bottom) {
    background-color: #000 !important; color: #ffff00 !important; border-color: #ffff00 !important;
}
html.webi-high-contrast body { background: #000 !important; color: #ffff00 !important; }
html.webi-high-contrast body a:not(#webi-panel a):not(#webi-toggle) { color: #00ffff !important; }
html.webi-high-contrast body img:not(#webi-panel img),
html.webi-high-contrast body video:not(#webi-panel video) { filter: brightness(.85) contrast(1.15); }

/* --- Negative contrast (invert) ---
   Same fix as grayscale: filter on direct body children, not body itself.
   This keeps our position:fixed panel anchored to the viewport. */
html.webi-negative-contrast body > *:not(#webi-panel):not(#webi-toggle):not(#webi-reading-guide):not(#webi-reading-mask-top):not(#webi-reading-mask-bottom) {
    filter: invert(100%) hue-rotate(180deg) !important;
    -webkit-filter: invert(100%) hue-rotate(180deg) !important;
}
/* Body bg might show through gaps - explicitly invert white→black */
html.webi-negative-contrast body { background-color: #000 !important; }
/* Double-invert media so it looks normal (parent inverts once, this inverts again) */
html.webi-negative-contrast body img:not(#webi-panel img):not(#webi-toggle img),
html.webi-negative-contrast body video:not(#webi-panel video):not(#webi-toggle video),
html.webi-negative-contrast body iframe:not(#webi-panel iframe):not(#webi-toggle iframe) {
    filter: invert(100%) hue-rotate(180deg);
}

html.webi-light-bg body :not(#webi-panel, #webi-panel *, #webi-toggle, #webi-toggle *, #webi-reading-guide, #webi-reading-mask-top, #webi-reading-mask-bottom) {
    background-color: #fff !important; color: #000 !important; border-color: #666 !important;
}
html.webi-light-bg body { background: #fff !important; color: #000 !important; }
html.webi-light-bg body a:not(#webi-panel a):not(#webi-toggle) { color: #0033a0 !important; }

html.webi-dark-bg body :not(#webi-panel, #webi-panel *, #webi-toggle, #webi-toggle *, #webi-reading-guide, #webi-reading-mask-top, #webi-reading-mask-bottom) {
    background-color: #1a1a1a !important; color: #f5f5f5 !important; border-color: #666 !important;
}
html.webi-dark-bg body { background: #1a1a1a !important; color: #f5f5f5 !important; }
html.webi-dark-bg body a:not(#webi-panel a):not(#webi-toggle) { color: #80b3ff !important; }

html.webi-underline-links body a:not(#webi-panel a):not(#webi-toggle) { text-decoration: underline !important; }

html.webi-highlight-links body a:not(#webi-panel a):not(#webi-toggle) {
    background-color: #ffff00 !important; color: #000 !important;
    outline: 2px solid #000 !important; padding: 0 3px !important;
}

html.webi-readable-font body :not(#webi-panel, #webi-panel *, #webi-toggle, #webi-toggle *) {
    font-family: Arial, "Segoe UI", Tahoma, Verdana, sans-serif !important;
    letter-spacing: 0.5px !important;
    line-height: 1.7 !important;
    font-weight: normal !important;
}

html.webi-big-cursor,
html.webi-big-cursor body,
html.webi-big-cursor body * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'><path fill='%23000' stroke='%23fff' stroke-width='1.5' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.36z'/></svg>"), auto !important;
}
html.webi-big-cursor body a,
html.webi-big-cursor body button,
html.webi-big-cursor body [role="button"] {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'><path fill='%23fff' stroke='%23000' stroke-width='1.5' d='M13 2.05V5.08C16.39 5.57 19 8.47 19 12c0 .9-.18 1.75-.5 2.54l2.62 1.52A8.94 8.94 0 0 0 22 12c0-5.18-3.95-9.45-9-9.95M12 19c-3.87 0-7-3.13-7-7c0-3.53 2.61-6.43 6-6.92V2.05c-5.06.5-9 4.76-9 9.95c0 5.52 4.47 10 9.99 10c3.31 0 6.24-1.61 8.06-4.09l-2.6-1.53C16.17 17.98 14.21 19 12 19'/></svg>"), pointer !important;
}

html.webi-stop-animations,
html.webi-stop-animations *,
html.webi-stop-animations *::before,
html.webi-stop-animations *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}
html.webi-stop-animations body img[src*=".gif"]:not(#webi-panel img),
html.webi-stop-animations body img[src$=".gif"]:not(#webi-panel img) { visibility: hidden !important; }

html.webi-focus-highlight body *:focus {
    outline: 4px solid #22d3ee !important;
    outline-offset: 2px !important;
    background-color: rgba(34, 211, 238, 0.18) !important;
}

/* ==============================================
   5) Text scaling
   ============================================== */
html.webi-text-scaled { font-size: calc(100% * var(--webi-text-scale, 1)) !important; }

html.webi-line-scaled body p:not(#webi-panel p),
html.webi-line-scaled body li:not(#webi-panel li),
html.webi-line-scaled body div:not(#webi-panel, #webi-panel *),
html.webi-line-scaled body span:not(#webi-panel span),
html.webi-line-scaled body a:not(#webi-panel a),
html.webi-line-scaled body td:not(#webi-panel td),
html.webi-line-scaled body label:not(#webi-panel label),
html.webi-line-scaled body blockquote:not(#webi-panel blockquote) {
    line-height: var(--webi-line-height, 1.5) !important;
}

html.webi-letter-scaled body :not(#webi-panel, #webi-panel *, #webi-toggle, #webi-toggle *) {
    letter-spacing: var(--webi-letter-spacing, normal) !important;
}

/* ==============================================
   6) Mobile
   ============================================== */
@media (max-width: 480px) {
    #webi-panel, #webi-panel.webi-side-right, #webi-panel.webi-side-left { width: 100vw !important; max-width: 100vw !important; border-radius: 0 !important; }
}

/* ==============================================
   7) Respect prefers-reduced-motion
   ============================================== */
@media (prefers-reduced-motion: reduce) {
    #webi-panel, #webi-toggle { transition: none !important; }
}