/* ==============================================
   YMDigital Accessibility Widget - Frontend CSS
   v1.2.0
   - WCAG AA contrast (4.5:1+) on all internal text
   - Offset variables for pixel-precise positioning
   - Hardcoded credit; cannot be themed away
   - Properly scoped under #ymda-panel / #ymda-toggle
   ============================================== */

/* ==============================================
   1) Floating toggle button
   Uses --ymda-offset-x and --ymda-offset-y CSS
   variables, set by PHP based on admin settings.
   ============================================== */
#ymda-toggle {
    position: fixed !important;
    z-index: 999998 !important;
    background: var(--ymda-primary, #1e40af) !important;
    color: var(--ymda-icon, #ffffff) !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform .25s ease, box-shadow .25s ease;
    padding: 0 !important;
    margin: 0 !important;
    font-family: -apple-system, "Segoe UI", Rubik, Arial, sans-serif !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}
#ymda-toggle:hover,
#ymda-toggle:focus { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important; }
#ymda-toggle:focus-visible { outline: 3px solid #ffffff !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(0,0,0,0.8) !important; }
#ymda-toggle svg { width: 60% !important; height: 60% !important; fill: var(--ymda-icon, #ffffff) !important; display: block !important; }

/* Positions - all use the offset CSS vars */
#ymda-toggle.ymda-pos-bottom-right { bottom: var(--ymda-offset-y, 20px) !important; right: var(--ymda-offset-x, 20px) !important; }
#ymda-toggle.ymda-pos-bottom-left  { bottom: var(--ymda-offset-y, 20px) !important; left:  var(--ymda-offset-x, 20px) !important; }
#ymda-toggle.ymda-pos-top-right    { top:    var(--ymda-offset-y, 20px) !important; right: var(--ymda-offset-x, 20px) !important; }
#ymda-toggle.ymda-pos-top-left     { top:    var(--ymda-offset-y, 20px) !important; left:  var(--ymda-offset-x, 20px) !important; }
#ymda-toggle.ymda-pos-middle-right { top: calc(50% + var(--ymda-offset-y, 0px)) !important; right: var(--ymda-offset-x, 20px) !important; transform: translateY(-50%); }
#ymda-toggle.ymda-pos-middle-left  { top: calc(50% + var(--ymda-offset-y, 0px)) !important; left:  var(--ymda-offset-x, 20px) !important; transform: translateY(-50%); }
#ymda-toggle.ymda-pos-middle-right:hover,
#ymda-toggle.ymda-pos-middle-left:hover { transform: translateY(-50%) scale(1.08); }

/* Sizes */
#ymda-toggle.ymda-size-small  { width: 44px !important; height: 44px !important; }
#ymda-toggle.ymda-size-medium { width: 56px !important; height: 56px !important; }
#ymda-toggle.ymda-size-large  { width: 68px !important; height: 68px !important; }

/* Shapes */
#ymda-toggle.ymda-shape-circle  { border-radius: 50% !important; }
#ymda-toggle.ymda-shape-rounded { border-radius: 14px !important; }
#ymda-toggle.ymda-shape-square  { border-radius: 4px !important; }

/* ==============================================
   2) Panel
   ============================================== */
#ymda-panel {
    position: fixed !important;
    top: 0 !important;
    width: 340px !important;
    max-width: 100vw !important;
    height: 100vh !important;
    background: #ffffff !important;
    color: #111111 !important;             /* 19:1 on white - AAA */
    box-shadow: 0 0 40px rgba(0,0,0,0.3) !important;
    z-index: 999999 !important;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.16,1,.3,1) !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: -apple-system, "Segoe UI", Rubik, Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    direction: rtl !important;
    box-sizing: border-box !important;
}
#ymda-panel.ymda-side-right { right: 0 !important; transform: translateX(100%); }
#ymda-panel.ymda-side-left  { left:  0 !important; transform: translateX(-100%); }
#ymda-panel.ymda-open       { transform: translateX(0) !important; }

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

/* Inert/closed visual hint - elements are still in DOM but not interactive */
#ymda-panel[inert] { pointer-events: none; }
#ymda-panel.ymda-open[inert] { pointer-events: auto; }   /* safety, shouldn't happen */

/* Header - uses computed primary-text for guaranteed contrast */
#ymda-panel .ymda-header {
    background: var(--ymda-primary, #1e40af);
    color: var(--ymda-primary-text, #ffffff);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
#ymda-panel .ymda-header h2 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ymda-primary-text, #ffffff);
    line-height: 1.3;
}

#ymda-panel .ymda-close {
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.4);
    color: var(--ymda-primary-text, #ffffff);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, border-color .2s;
    padding: 0;
}
#ymda-panel .ymda-close:hover { background: rgba(255,255,255,0.35); border-color: var(--ymda-primary-text, #ffffff); }
#ymda-panel .ymda-close:focus-visible { outline: 3px solid var(--ymda-primary-text, #ffffff); outline-offset: 2px; background: rgba(255,255,255,0.4); }

#ymda-panel .ymda-body { flex: 1; overflow-y: auto; padding: 16px; background: #ffffff; }

/* Quick row */
#ymda-panel .ymda-quick-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
#ymda-panel .ymda-quick {
    background: #ffffff;
    border: 2px solid #374151;             /* dark border, 8:1 on white */
    border-radius: 10px;
    padding: 10px 6px;
    cursor: pointer;
    font-size: 12px;
    color: #111111;                        /* 19:1 on white - AAA */
    transition: all .2s;
    text-align: center;
    font-weight: 600;
    line-height: 1.3;
}
#ymda-panel .ymda-quick:hover { background: var(--ymda-primary, #1e40af); color: var(--ymda-primary-text, #ffffff); border-color: var(--ymda-primary, #1e40af); }
#ymda-panel .ymda-quick:focus-visible { outline: 3px solid var(--ymda-primary, #1e40af); outline-offset: 2px; }
#ymda-panel .ymda-quick.ymda-active { background: var(--ymda-primary, #1e40af); color: var(--ymda-primary-text, #ffffff); border-color: var(--ymda-primary, #1e40af); }
#ymda-panel .ymda-quick .ymda-quick-icon { font-size: 18px; display: block; margin-bottom: 4px; }

/* Sections */
#ymda-panel .ymda-section { margin-bottom: 18px; }
#ymda-panel .ymda-section h3 {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;                        /* dark slate, 14:1 on white - AAA */
    margin: 0 0 8px;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
}

#ymda-panel .ymda-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Toggle buttons */
#ymda-panel .ymda-btn {
    background: #ffffff;
    border: 2px solid #374151;             /* 8:1 dark border on white */
    border-radius: 10px;
    padding: 12px 10px;
    cursor: pointer;
    font-size: 13px;
    color: #111111;                        /* AAA */
    transition: all .15s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    line-height: 1.3;
}
#ymda-panel .ymda-btn:hover { border-color: var(--ymda-primary, #1e40af); transform: translateY(-1px); }
#ymda-panel .ymda-btn:focus-visible { outline: 3px solid var(--ymda-primary, #1e40af); outline-offset: 2px; }
#ymda-panel .ymda-btn.ymda-active { background: var(--ymda-primary, #1e40af); color: var(--ymda-primary-text, #ffffff); border-color: var(--ymda-primary, #1e40af); }
#ymda-panel .ymda-btn svg { width: 22px; height: 22px; fill: currentColor; }

/* Counter widgets */
#ymda-panel .ymda-counter {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid #374151;
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
}
#ymda-panel .ymda-counter-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 2px solid var(--ymda-primary, #1e40af);
    background: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    color: var(--ymda-primary, #1e40af);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all .15s;
}
#ymda-panel .ymda-counter-btn:hover { background: var(--ymda-primary, #1e40af); color: var(--ymda-primary-text, #ffffff); }
#ymda-panel .ymda-counter-btn:focus-visible { outline: 3px solid var(--ymda-primary, #1e40af); outline-offset: 2px; }
#ymda-panel .ymda-counter-label {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #111111;                        /* AAA */
}

/* Reset */
#ymda-panel .ymda-reset-row { margin-top: 8px; margin-bottom: 16px; }
#ymda-panel .ymda-reset {
    width: 100%;
    background: #ffffff;
    border: 2px solid #991b1b;             /* red-800, 7.1:1 on white */
    color: #991b1b;                        /* AAA */
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    transition: all .15s;
}
#ymda-panel .ymda-reset:hover { background: #991b1b; color: #ffffff; }
#ymda-panel .ymda-reset:focus-visible { outline: 3px solid #991b1b; outline-offset: 2px; }

/* Footer - CREDIT IS HARD-CODED in the markup */
#ymda-panel .ymda-footer {
    flex-shrink: 0;
    padding: 14px 16px;
    background: #ffffff;
    border-top: 2px solid #374151;
    text-align: center;
    font-size: 13px;
    color: #1f2937;                        /* dark slate - AAA */
}
#ymda-panel .ymda-footer a {
    color: #1d4ed8;                        /* deeper blue, 6.8:1 on white - AAA Large, AA */
    text-decoration: underline;
    font-weight: 700;
}
#ymda-panel .ymda-footer a:hover,
#ymda-panel .ymda-footer a:focus-visible { color: #1e3a8a; outline: 2px solid #1e3a8a; outline-offset: 2px; }
#ymda-panel .ymda-statement-link { display: block; margin-bottom: 8px; }
#ymda-panel .ymda-credit-line { display: block; color: #1f2937; }

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

#ymda-reading-mask-top,
#ymda-reading-mask-bottom {
    position: fixed; left: 0; width: 100vw;
    background: rgba(0,0,0,0.7);
    pointer-events: none; z-index: 999997; display: none;
}
#ymda-reading-mask-top { top: 0; }
#ymda-reading-mask-bottom { bottom: 0; }
html.ymda-reading-mask-on #ymda-reading-mask-top,
html.ymda-reading-mask-on #ymda-reading-mask-bottom { display: block; }

/* ==============================================
   4) Accessibility modes (applied to <html>)
   Use :not() to exclude widget elements.
   ============================================== */

html.ymda-grayscale body { filter: grayscale(100%) !important; -webkit-filter: grayscale(100%) !important; }
html.ymda-grayscale #ymda-panel,
html.ymda-grayscale #ymda-toggle { filter: none !important; -webkit-filter: none !important; }

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

html.ymda-negative-contrast body { filter: invert(100%) hue-rotate(180deg) !important; -webkit-filter: invert(100%) hue-rotate(180deg) !important; }
html.ymda-negative-contrast body img, html.ymda-negative-contrast body video, html.ymda-negative-contrast body iframe { filter: invert(100%) hue-rotate(180deg); }
html.ymda-negative-contrast #ymda-panel, html.ymda-negative-contrast #ymda-toggle { filter: invert(100%) hue-rotate(180deg) !important; }

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

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

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

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

html.ymda-readable-font body :not(#ymda-panel, #ymda-panel *, #ymda-toggle, #ymda-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.ymda-big-cursor,
html.ymda-big-cursor body,
html.ymda-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.ymda-big-cursor body a,
html.ymda-big-cursor body button,
html.ymda-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.ymda-stop-animations,
html.ymda-stop-animations *,
html.ymda-stop-animations *::before,
html.ymda-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.ymda-stop-animations body img[src*=".gif"]:not(#ymda-panel img),
html.ymda-stop-animations body img[src$=".gif"]:not(#ymda-panel img) { visibility: hidden !important; }

html.ymda-focus-highlight body *:focus {
    outline: 4px solid #ffd700 !important;
    outline-offset: 2px !important;
    background-color: rgba(255, 215, 0, 0.15) !important;
}

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

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

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

/* ==============================================
   6) Mobile
   ============================================== */
@media (max-width: 480px) {
    #ymda-panel { width: 100vw !important; }
}

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