/* WP Accessibility Widget - στυλ */ #wpaw-toggle { position: fixed; /* Woodmart's off-canvas cart/sidebar and header use z-index up to 999999, so we go higher to make sure our button always stays clickable on top. */ z-index: 2147480000; width: var(--wpaw-icon-size, 56px); height: var(--wpaw-icon-size, 56px); border-radius: 50%; background: var(--wpaw-color, #2563eb); color: var(--wpaw-icon-color, #fff); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease, bottom 0.2s ease; } #wpaw-toggle:hover, #wpaw-toggle:focus-visible { transform: scale(1.06); outline: 3px solid #fff; outline-offset: 2px; } #wpaw-toggle svg { width: 60%; height: 60%; } .wpaw-pos-bottom-right { bottom: 20px; right: 20px; } .wpaw-pos-bottom-left { bottom: 20px; left: 20px; } .wpaw-pos-top-right { top: 20px; right: 20px; } .wpaw-pos-top-left { top: 20px; left: 20px; } #wpaw-panel { position: fixed; z-index: 2147479999; width: 320px; max-width: calc(100vw - 24px); max-height: 80vh; overflow-y: auto; background: #fff; color: #1a1a1a; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); padding: 16px; display: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.4; } #wpaw-panel.wpaw-open { display: block; } #wpaw-panel.wpaw-pos-bottom-right { bottom: 88px; right: 20px; } #wpaw-panel.wpaw-pos-bottom-left { bottom: 88px; left: 20px; } #wpaw-panel.wpaw-pos-top-right { top: 88px; right: 20px; } #wpaw-panel.wpaw-pos-top-left { top: 88px; left: 20px; } .wpaw-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; border-bottom: 1px solid #eee; padding-bottom: 8px; } .wpaw-panel-header h2 { font-size: 16px; margin: 0; font-weight: 600; } .wpaw-close-btn { background: transparent; border: none; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; } .wpaw-close-btn:hover, .wpaw-close-btn:focus-visible { background: #f0f0f0; } .wpaw-option-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #f7f7f8; border: 1px solid #e5e5e5; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; font-size: 14px; color: #1a1a1a; transition: background 0.15s ease; } .wpaw-option-btn:hover, .wpaw-option-btn:focus-visible { background: #eceef1; outline: 2px solid var(--wpaw-color, #2563eb); outline-offset: 1px; } .wpaw-option-btn.wpaw-active { background: var(--wpaw-color, #2563eb); color: var(--wpaw-icon-color, #fff); border-color: var(--wpaw-color, #2563eb); } .wpaw-option-btn .wpaw-icon { flex-shrink: 0; width: 18px; height: 18px; } .wpaw-fontsize-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .wpaw-fontsize-controls button { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid #e5e5e5; background: #f7f7f8; cursor: pointer; font-size: 16px; font-weight: 600; } .wpaw-fontsize-controls button:hover, .wpaw-fontsize-controls button:focus-visible { background: #eceef1; } .wpaw-reset-btn { width: 100%; padding: 10px; margin-top: 6px; border-radius: 8px; border: 1px solid #e5e5e5; background: #fff5f5; color: #b91c1c; cursor: pointer; font-size: 14px; font-weight: 600; } .wpaw-reset-btn:hover, .wpaw-reset-btn:focus-visible { background: #fee2e2; } .wpaw-statement-link { display: block; text-align: center; margin-top: 10px; padding: 8px; font-size: 13px; color: var(--wpaw-color, #2563eb); text-decoration: underline; } /* --- Καθολικές κλάσεις προσβασιμότητας εφαρμόζονται στο --- */ html.wpaw-contrast { filter: invert(1) hue-rotate(180deg); background: #000 !important; } html.wpaw-contrast img, html.wpaw-contrast video, html.wpaw-contrast svg, html.wpaw-contrast picture { filter: invert(1) hue-rotate(180deg); } html.wpaw-grayscale { filter: grayscale(100%); } html.wpaw-contrast.wpaw-grayscale { filter: invert(1) hue-rotate(180deg) grayscale(100%); } html.wpaw-underline-links a { text-decoration: underline !important; } html.wpaw-highlight-links a { background: #ffff00 !important; color: #000 !important; outline: 2px solid #000 !important; } html.wpaw-readable-font body, html.wpaw-readable-font p, html.wpaw-readable-font span, html.wpaw-readable-font li, html.wpaw-readable-font a, html.wpaw-readable-font div { font-family: Arial, Helvetica, sans-serif !important; } html.wpaw-big-line-height body, html.wpaw-big-line-height p, html.wpaw-big-line-height li { line-height: 1.9 !important; } html.wpaw-big-cursor, html.wpaw-big-cursor * { cursor: url("data:image/svg+xml;utf8,") 4 4, auto !important; } html.wpaw-pause-animations *, html.wpaw-pause-animations *::before, html.wpaw-pause-animations *::after { animation-play-state: paused !important; transition: none !important; } @media (max-width: 480px) { #wpaw-panel { width: calc(100vw - 24px); } } /* --- Συμβατότητα με Woodmart --- Το Woodmart εμφανίζει σε mobile μια σταθερή (fixed) μπάρα πλοήγησης στο κάτω μέρος της οθόνης (π.χ. .mobile-navigation-wrapper / .wd-mobile-navigation). Όταν ανιχνευτεί από το JS, προσθέτουμε την κλάση wpaw-has-mobile-nav στο #wpaw-root ώστε το κουμπί/panel να ανεβαίνει πάνω από αυτήν. */ @media (max-width: 991px) { #wpaw-root.wpaw-has-mobile-nav #wpaw-toggle.wpaw-pos-bottom-right, #wpaw-root.wpaw-has-mobile-nav #wpaw-toggle.wpaw-pos-bottom-left { bottom: calc(20px + var(--wpaw-mobile-nav-height, 60px)); } #wpaw-root.wpaw-has-mobile-nav #wpaw-panel.wpaw-pos-bottom-right, #wpaw-root.wpaw-has-mobile-nav #wpaw-panel.wpaw-pos-bottom-left { bottom: calc(88px + var(--wpaw-mobile-nav-height, 60px)); } }