/* ============================================== YMDigital Accessibility Widget - Frontend CSS v1.3.0 - Visual refresh - Subtle 1px borders, soft shadows for depth - !important on critical visuals to beat theme overrides - Compact spacing - No horizontal scroll ============================================== */ /* ============================================== 1) Floating toggle button ============================================== */ #ymda-toggle { position: fixed !important; z-index: 999998 !important; background: var(--ymda-primary, #1e40af) !important; color: var(--ymda-icon, #ffffff) !important; border: 0 !important; cursor: pointer !important; box-shadow: 0 6px 20px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.12) !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: transform .25s ease, box-shadow .25s ease !important; padding: 0 !important; margin: 0 !important; font-family: inherit; box-sizing: border-box !important; line-height: 1 !important; } #ymda-toggle:hover { transform: scale(1.08); box-shadow: 0 10px 28px rgba(0,0,0,0.25), 0 4px 8px rgba(0,0,0,0.15) !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.4) !important; } #ymda-toggle svg { width: 60% !important; height: 60% !important; fill: var(--ymda-icon, #ffffff) !important; display: block !important; } #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) !important; } #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; } #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: 6px !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: #111827 !important; box-shadow: -8px 0 32px rgba(0,0,0,0.18) !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; 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