/* ==========================================================
Accessibility Widget CSS - v11 (Neutral Blue, Improved UI)
========================================================== */
/* ---------------------------
BRANDING VARIABLES
--------------------------- */
:root {
/* Primary (chrome): ink premium — launcher, header */
--aw-color-primary-start: #0f172a;
--aw-color-primary-end: #1e293b;
/* Accent (brand): rosu Valenys — stari active, butoane inline */
--aw-accent-start: #cd2122;
--aw-accent-end: #a81a1b;
/* Success: green */
--aw-color-success-start: #22c55e;
--aw-color-success-end: #16a34a;
/* Danger: red */
--aw-color-danger-start: #f97373;
--aw-color-danger-end: #ef4444;
--aw-radius-lg: 18px;
--aw-radius-md: 12px;
--aw-radius-sm: 9px;
--aw-z-launcher: 999999999;
--aw-z-overlay: 999999998;
--aw-z-modal: 999999999;
--aw-bg-panel: #ffffff;
--aw-bg-section: #ffffff;
--aw-bg-body: #f8fafc;
--aw-bg-subtle: #f1f5f9;
--aw-text-main: #0f172a;
--aw-text-dim: #475569;
--aw-border: #e2e8f0;
--aw-border-strong: #cbd5e1;
--aw-scrollbar: #cbd5e1;
--aw-scrollbar-hover: #94a3b8;
}
/* ==========================================================
ACCESSIBILITY MODES (functional classes toggled on )
========================================================== */
/* FONT SIZE SCALING — aplicată acum prin JS (applyFontScaling în
accessibility-widget.js): fiecare element e scalat din mărimea lui ORIGINALĂ
(factori reali 1.25/1.5/1.75/2), ca să nu micșoreze titlurile cu px expliciți
și să scaleze corect tot textul. Clasele .aw-font-scale-* nu se mai folosesc. */
/* LINE HEIGHT – 4 nivele (conținut, nu widget) */
html.aw-line-height-1 body > *:not([id^="aw-"]):not([class*="aw-"]), html.aw-line-height-1 body > *:not([id^="aw-"]):not([class*="aw-"]) * { line-height: 1.25 !important; }
html.aw-line-height-2 body > *:not([id^="aw-"]):not([class*="aw-"]), html.aw-line-height-2 body > *:not([id^="aw-"]):not([class*="aw-"]) * { line-height: 1.5 !important; }
html.aw-line-height-3 body > *:not([id^="aw-"]):not([class*="aw-"]), html.aw-line-height-3 body > *:not([id^="aw-"]):not([class*="aw-"]) * { line-height: 1.75 !important; }
html.aw-line-height-4 body > *:not([id^="aw-"]):not([class*="aw-"]), html.aw-line-height-4 body > *:not([id^="aw-"]):not([class*="aw-"]) * { line-height: 2 !important; }
/* LETTER SPACING – 4 nivele (conținut, nu widget) */
html.aw-letter-spacing-1 body > *:not([id^="aw-"]):not([class*="aw-"]), html.aw-letter-spacing-1 body > *:not([id^="aw-"]):not([class*="aw-"]) * { letter-spacing: 0.04em !important; }
html.aw-letter-spacing-2 body > *:not([id^="aw-"]):not([class*="aw-"]), html.aw-letter-spacing-2 body > *:not([id^="aw-"]):not([class*="aw-"]) * { letter-spacing: 0.08em !important; }
html.aw-letter-spacing-3 body > *:not([id^="aw-"]):not([class*="aw-"]), html.aw-letter-spacing-3 body > *:not([id^="aw-"]):not([class*="aw-"]) * { letter-spacing: 0.12em !important; }
html.aw-letter-spacing-4 body > *:not([id^="aw-"]):not([class*="aw-"]), html.aw-letter-spacing-4 body > *:not([id^="aw-"]):not([class*="aw-"]) * { letter-spacing: 0.16em !important; }
/* WORD SPACING – 4 nivele (conținut, nu widget) — control independent de letter spacing */
html.aw-word-spacing-1 body > *:not([id^="aw-"]):not([class*="aw-"]), html.aw-word-spacing-1 body > *:not([id^="aw-"]):not([class*="aw-"]) * { word-spacing: 0.1em !important; }
html.aw-word-spacing-2 body > *:not([id^="aw-"]):not([class*="aw-"]), html.aw-word-spacing-2 body > *:not([id^="aw-"]):not([class*="aw-"]) * { word-spacing: 0.2em !important; }
html.aw-word-spacing-3 body > *:not([id^="aw-"]):not([class*="aw-"]), html.aw-word-spacing-3 body > *:not([id^="aw-"]):not([class*="aw-"]) * { word-spacing: 0.3em !important; }
html.aw-word-spacing-4 body > *:not([id^="aw-"]):not([class*="aw-"]), html.aw-word-spacing-4 body > *:not([id^="aw-"]):not([class*="aw-"]) * { word-spacing: 0.4em !important; }
/* BACKWARD COMPAT generic spacing / line-height */
html.aw-letter-spacing,
html.aw-letter-spacing * {
letter-spacing: 0.08em !important;
word-spacing: 0.16em !important;
}
html.aw-line-height,
html.aw-line-height * {
line-height: 1.8 !important;
}
/* BOLD TEXT */
html.aw-bold-text,
html.aw-bold-text * {
font-weight: 600 !important;
}
/* TEXT ALIGNMENT */
html.aw-align-left,
html.aw-align-left * {
text-align: left !important;
}
html.aw-align-center,
html.aw-align-center * {
text-align: center !important;
}
html.aw-align-right,
html.aw-align-right * {
text-align: right !important;
}
html.aw-align-justify,
html.aw-align-justify * {
text-align: justify !important;
}
/* DYSLEXIA FONT */
@font-face {
font-family: "AWDyslexic";
src: local("OpenDyslexic"),
local("OpenDyslexic-Regular"),
local("Atkinson Hyperlegible");
}
html.aw-dyslexia-font,
html.aw-dyslexia-font * {
font-family: "AWDyslexic", Arial, sans-serif !important;
letter-spacing: 0.08em !important;
}
/* CONTRAST MODES */
html.aw-dark-mode,
html.aw-dark-mode body,
html.aw-dark-mode * {
background-color: #0b1120 !important;
color: #e5e7eb !important;
border-color: #6b7280 !important;
box-shadow: none !important;
text-shadow: none !important;
}
html.aw-light-mode,
html.aw-light-mode body,
html.aw-light-mode * {
background-color: #ffffff !important;
color: #111827 !important;
border-color: #111827 !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* HIGH CONTRAST — fundal întunecat + text galben. NU pictăm fiecare element în
negru (asta ascundea imagini, logo-uri și containere -> pagină complet neagră).
Fundalul negru vine de pe body; restul devine transparent; media rămâne vizibilă. */
html.aw-high-contrast body { background-color: #000000 !important; }
html.aw-high-contrast body *:not([id^="aw-"]):not([class*="aw-"]) {
background-color: transparent !important;
color: #facc15 !important;
border-color: #facc15 !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* Media își păstrează conținutul (nu o forțăm pe negru). */
html.aw-high-contrast body :is(img,svg,video,picture,canvas,iframe,object,embed):not([id^="aw-"]):not([class*="aw-"]) {
background-color: transparent !important;
}
/* CONTRAST INVERSAT (invert colors) — un singur filtru pe conținutul paginii,
NICIODATĂ pe widget. (body>* aplică o singură dată => fără dublă-inversare.) */
html.aw-invert-colors body > *:not([id^="aw-"]):not([class*="aw-"]) {
filter: invert(1) hue-rotate(180deg) !important;
}
/* DALTONISM FILTERS — 8 modes, applied ONCE on the root (filtering every
element via `*` compounds the matrix on nested nodes; the root is correct) */
html.aw-color-filter-protanomaly body > *:not([id^="aw-"]):not([class*="aw-"]) { filter: url("#aw-svg-filter-protanomaly") !important; }
html.aw-color-filter-deuteranomaly body > *:not([id^="aw-"]):not([class*="aw-"]) { filter: url("#aw-svg-filter-deuteranomaly") !important; }
html.aw-color-filter-tritanomaly body > *:not([id^="aw-"]):not([class*="aw-"]) { filter: url("#aw-svg-filter-tritanomaly") !important; }
html.aw-color-filter-protanopia body > *:not([id^="aw-"]):not([class*="aw-"]) { filter: url("#aw-svg-filter-protanopia") !important; }
html.aw-color-filter-deuteranopia body > *:not([id^="aw-"]):not([class*="aw-"]) { filter: url("#aw-svg-filter-deuteranopia") !important; }
html.aw-color-filter-tritanopia body > *:not([id^="aw-"]):not([class*="aw-"]) { filter: url("#aw-svg-filter-tritanopia") !important; }
html.aw-color-filter-achromatomaly body > *:not([id^="aw-"]):not([class*="aw-"]) { filter: url("#aw-svg-filter-achromatomaly") !important; }
html.aw-color-filter-achromatopsia body > *:not([id^="aw-"]):not([class*="aw-"]) { filter: url("#aw-svg-filter-achromatopsia") !important; }
/* SATURATION & MONOCHROME — pe conținutul paginii (body>*), NU pe widget */
html.aw-high-saturation body > *:not([id^="aw-"]):not([class*="aw-"]) { filter: saturate(1.8) !important; }
html.aw-low-saturation body > *:not([id^="aw-"]):not([class*="aw-"]) { filter: saturate(0.5) !important; }
html.aw-monochrome body > *:not([id^="aw-"]):not([class*="aw-"]) { filter: grayscale(1) !important; }
/* HIGHLIGHT HEADINGS */
/* HIGHLIGHT HEADINGS — doar un contur (outline) care NU ocupă spațiu în layout.
Fără background și fără padding (padding schimba dimensiunea -> rupea layout-ul). */
html.aw-highlight-headings :is(h1,h2,h3,h4,h5,h6) {
outline: 2px solid #0ea5e9 !important;
outline-offset: 2px !important;
}
/* HIGHLIGHT LINKS */
/* HIGHLIGHT LINKS — subliniere clară (independentă de culoare, WCAG 1.4.1). FĂRĂ
chenar (outline) și FĂRĂ fundal — acelea umpleau pagina cu cutii și rupeau
vizual layout-ul. Păstrăm culoarea linkului din temă. */
html.aw-highlight-links a,
html.aw-highlight-links a * {
text-decoration: underline !important;
text-underline-offset: 2px !important;
text-decoration-thickness: 2px !important;
}
/* BIG CURSOR */
html.aw-big-cursor,
html.aw-big-cursor * {
cursor: url("data:image/svg+xml;utf8,") 4 4, auto !important;
}
/* REDUCE MOTION */
html.aw-reduce-motion *,
html.aw-reduce-motion *::before,
html.aw-reduce-motion *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0ms !important;
scroll-behavior: auto !important;
}
}
/* FOCUS OUTLINE */
html.aw-focus-outline *:focus,
html.aw-keyboard-nav *:focus {
outline: 3px solid #0ea5e9 !important;
outline-offset: 3px !important;
box-shadow: 0 0 0 2px rgba(14,165,233,0.5) !important;
}
/* HIDE IMAGES */
html.aw-hide-images img,
html.aw-hide-images picture,
html.aw-hide-images video,
html.aw-hide-images figure {
visibility: hidden !important;
}
/* READING GUIDE (linie de citire) */
.aw-reading-guide {
position: fixed;
left: 0;
right: 0;
height: 30px;
background: rgba(59,130,246,0.08);
border-top: 2px solid rgba(37,99,235,0.9);
border-bottom: 2px solid rgba(37,99,235,0.9);
pointer-events: none;
z-index: calc(var(--aw-z-overlay) - 1);
display: none; /* ascuns implicit */
}
/* Afisam linia DOAR cand este activata optiunea in widget */
html.aw-reading-guide-active .aw-reading-guide {
display: block;
}
/* READING MASK – interior clar, exterior întunecat */
.aw-reading-mask-overlay {
position: fixed;
inset: 0;
background: transparent; /* fără strat întunecat global */
pointer-events: none;
z-index: var(--aw-z-overlay);
display: none;
}
html.aw-reading-mask-active .aw-reading-mask-overlay {
display: block;
}
.aw-reading-mask-window {
position: fixed;
left: 0;
right: 0;
height: 5rem;
/* doar linii sus / jos pentru ghidare */
border-top: 2px solid rgba(37,99,235,0.9);
border-bottom: 2px solid rgba(37,99,235,0.9);
border-left: 0;
border-right: 0;
/* interior clar */
background: transparent;
/* întunecăm doar zona din afara ferestrei */
box-shadow: 0 0 0 9999px rgba(0,0,0,0.6);
pointer-events: none;
z-index: calc(var(--aw-z-overlay) + 1);
display: none;
transition: top 0.05s ease-out;
}
html.aw-reading-mask-active .aw-reading-mask-window {
display: block;
}
/* READER MODE */
html.aw-reader-mode body * {
background: #ffffff !important;
color: #111827 !important;
border-color: transparent !important;
text-shadow: none !important;
}
html.aw-reader-mode header,
html.aw-reader-mode nav,
html.aw-reader-mode aside,
html.aw-reader-mode footer,
html.aw-reader-mode [role="banner"],
html.aw-reader-mode [role="navigation"],
html.aw-reader-mode [role="contentinfo"],
html.aw-reader-mode [class*="sidebar"],
html.aw-reader-mode [class*="menu"],
html.aw-reader-mode [class*="ads"],
html.aw-reader-mode [class*="advert"] {
display: none !important;
}
html.aw-reader-mode main,
html.aw-reader-mode article,
html.aw-reader-mode [role="main"],
html.aw-reader-mode [role="article"] {
max-width: 800px !important;
margin: 1rem auto !important;
font-size: 1.1em !important;
line-height: 1.8 !important;
}
/* ==========================================================
WIDGET UI
========================================================== */
/* LAUNCHER */
#aw-launcher {
position: fixed;
bottom: 1.25rem;
width: 56px;
height: 56px;
border-radius: 999px;
background: linear-gradient(135deg, var(--aw-color-primary-start) 0%, var(--aw-color-primary-end) 100%);
color: #ffffff;
border: none;
cursor: pointer;
z-index: var(--aw-z-launcher);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 25px rgba(15,23,42,0.4);
transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
#aw-launcher.aw-launcher-left { left: 1.25rem; right: auto; }
#aw-launcher.aw-launcher-right { right: 1.25rem; left: auto; }
#aw-launcher:hover {
transform: translateY(-2px) scale(1.03);
box-shadow: 0 14px 32px rgba(15,23,42,0.6);
}
#aw-launcher:focus {
outline: 3px solid #0ea5e9;
outline-offset: 2px;
}
#aw-launcher svg {
width: 26px;
height: 26px;
}
/* Tooltip (info-bulă) */
.aw-tooltip {
position: absolute;
background: #111827;
color: #e5e7eb;
font-size: 11px;
line-height: 1.3;
padding: 0.45rem 0.7rem;
border-radius: var(--aw-radius-sm);
box-shadow: 0 10px 20px rgba(15,23,42,0.6);
z-index: calc(var(--aw-z-modal) + 10);
max-width: 220px;
display: none;
}
.aw-tooltip[data-show="true"] {
display: block;
}
/* PANEL BACKDROP */
#aw-panel-backdrop {
position: fixed;
inset: 0;
background: rgba(15,23,42,0.6);
z-index: var(--aw-z-overlay);
display: none;
backdrop-filter: blur(2px);
}
/* PANEL */
#aw-panel {
position: fixed;
bottom: 5rem;
width: 500px;
max-width: calc(100vw - 2rem);
max-height: 85vh;
background: var(--aw-bg-panel);
color: var(--aw-text-main);
border-radius: var(--aw-radius-lg);
box-shadow: 0 24px 60px rgba(15,23,42,0.55);
z-index: var(--aw-z-modal);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
display: none;
flex-direction: column;
overflow: hidden;
left: 1.5rem;
right: auto;
}
#aw-panel.aw-panel-right {
left: auto;
right: 1.5rem;
}
/* PANEL HEADER */
#aw-panel header {
background: linear-gradient(135deg, var(--aw-color-primary-start) 0%, var(--aw-color-primary-end) 100%);
color: #ffffff;
padding: 0.9rem 1.15rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
border-radius: var(--aw-radius-lg) var(--aw-radius-lg) 0 0;
}
#aw-panel header h2 {
font-size: 15px;
line-height: 1.4;
margin: 0;
font-weight: 600;
}
/* Logo client (white-label) — în antetul panoului */
.aw-brand-logo {
display: block; /* logo pe rândul lui, deasupra titlului (nu pe același rând) */
height: auto;
width: auto;
max-height: 32px;
max-width: 160px;
object-fit: contain;
margin: 0 0 8px 0;
}
/* CLOSE BUTTON */
#aw-close-btn {
background: rgba(15,23,42,0.15);
color: #f9fafb;
border: 1px solid rgba(148,163,184,0.6);
border-radius: var(--aw-radius-sm);
font-size: 12px;
font-weight: 600;
padding: 0.45rem 0.7rem;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
white-space: nowrap;
}
#aw-close-btn:hover {
background: rgba(15,23,42,0.28);
border-color: rgba(148,163,184,0.9);
transform: translateY(-1px);
}
#aw-close-btn:focus {
outline: 3px solid #0ea5e9;
outline-offset: 2px;
}
/* HEADER ACTIONS + RESET ALL (#18) */
.aw-header-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
#aw-reset-all-btn {
background: rgba(255,255,255,0.12);
color: #ffffff;
border: 1px solid rgba(255,255,255,0.35);
border-radius: var(--aw-radius-sm);
font-size: 12px;
font-weight: 600;
padding: 0.45rem 0.7rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
#aw-reset-all-btn:hover {
background: rgba(255,255,255,0.22);
border-color: rgba(255,255,255,0.6);
transform: translateY(-1px);
}
#aw-reset-all-btn:focus {
outline: 3px solid #0ea5e9;
outline-offset: 2px;
}
/* HIDE WIDGET — buton în header + meniu (sesiune / 24h / o săptămână) */
.aw-hide-wrap { position: relative; display: inline-flex; }
#aw-hide-btn {
background: rgba(255,255,255,0.12);
color: #ffffff;
border: 1px solid rgba(255,255,255,0.35);
border-radius: var(--aw-radius-sm);
padding: 0.4rem 0.5rem;
cursor: pointer;
display: inline-flex;
align-items: center;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
#aw-hide-btn:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.6); transform: translateY(-1px); }
#aw-hide-btn:focus { outline: 3px solid #0ea5e9; outline-offset: 2px; }
#aw-hide-menu {
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 20;
min-width: 210px;
background: #ffffff;
border: 1px solid var(--aw-border);
border-radius: var(--aw-radius-md);
box-shadow: 0 12px 32px rgba(15,23,42,0.28);
padding: 6px;
}
#aw-hide-menu button {
display: block;
width: 100%;
text-align: left;
background: transparent;
border: 0;
border-radius: var(--aw-radius-sm);
padding: 0.6rem 0.7rem;
font-size: 13px;
font-weight: 500;
color: var(--aw-text-main);
cursor: pointer;
}
#aw-hide-menu button:hover { background: var(--aw-bg-subtle); }
#aw-hide-menu button:focus { outline: 2px solid #0ea5e9; outline-offset: -2px; }
/* LANGUAGE — insignă în header (steag + cod) */
#aw-lang-badge {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(255,255,255,0.14); color: #ffffff;
border: 1px solid rgba(255,255,255,0.35); border-radius: var(--aw-radius-sm);
padding: 0.35rem 0.55rem; font-size: 12px; font-weight: 700; cursor: pointer;
text-transform: uppercase; letter-spacing: .02em;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
#aw-lang-badge:hover { background: rgba(255,255,255,0.24); border-color: rgba(255,255,255,0.6); transform: translateY(-1px); }
#aw-lang-badge:focus { outline: 3px solid #0ea5e9; outline-offset: 2px; }
.aw-lang-flag { font-size: 1.1em; line-height: 1; }
/* LANGUAGE — combobox cu căutare */
.aw-lang-combo { position: relative; width: 100%; }
.aw-lang-trigger {
display: flex; align-items: center; gap: 8px; width: 100%;
background: #fff; color: var(--aw-text-main);
border: 1px solid var(--aw-border); border-radius: var(--aw-radius-sm);
padding: 0.6rem 0.7rem; font-size: 14px; font-weight: 500; cursor: pointer; text-align: left;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.aw-lang-trigger:hover { border-color: var(--aw-accent-start); }
.aw-lang-trigger:focus { outline: 3px solid #0ea5e9; outline-offset: 2px; }
.aw-lang-trigger-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-lang-caret { width: 16px; height: 16px; flex: 0 0 auto; color: var(--aw-text-dim); }
.aw-lang-pop {
display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
background: #fff; border: 1px solid var(--aw-border); border-radius: var(--aw-radius-md);
box-shadow: 0 14px 36px rgba(15,23,42,0.30); padding: 8px;
}
.aw-lang-search {
width: 100%; box-sizing: border-box; margin-bottom: 6px;
padding: 0.55rem 0.65rem; font-size: 13px; color: var(--aw-text-main);
background: var(--aw-bg-subtle); border: 1px solid var(--aw-border); border-radius: var(--aw-radius-sm);
}
.aw-lang-search:focus { outline: 2px solid #0ea5e9; outline-offset: 0; border-color: var(--aw-accent-start); }
.aw-lang-list { max-height: 280px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.aw-lang-opt {
display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
background: transparent; border: 0; border-radius: var(--aw-radius-sm);
padding: 0.5rem 0.6rem; font-size: 14px; color: var(--aw-text-main); cursor: pointer;
}
.aw-lang-opt:hover { background: var(--aw-bg-subtle); }
.aw-lang-opt-active { background: var(--aw-bg-subtle); font-weight: 600; }
.aw-lang-opt-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-lang-opt-code { font-size: 11px; font-weight: 600; color: var(--aw-text-dim); text-transform: uppercase; }
.aw-lang-empty { padding: 0.7rem; font-size: 13px; color: var(--aw-text-dim); text-align: center; }
[dir="rtl"] .aw-lang-trigger, [dir="rtl"] .aw-lang-opt { text-align: right; }
/* PANEL CONTENT */
#aw-panel-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
background: var(--aw-bg-body);
padding: 0.9rem;
scrollbar-width: thin;
scrollbar-color: var(--aw-scrollbar) var(--aw-bg-body);
}
#aw-panel-content::-webkit-scrollbar {
width: 8px;
}
#aw-panel-content::-webkit-scrollbar-track {
background: var(--aw-bg-body);
}
#aw-panel-content::-webkit-scrollbar-thumb {
background: var(--aw-scrollbar);
border-radius: 999px;
}
#aw-panel-content::-webkit-scrollbar-thumb:hover {
background: var(--aw-scrollbar-hover);
}
/* SECTIONS */
.aw-section {
background: var(--aw-bg-section);
border: 1px solid var(--aw-border);
border-radius: var(--aw-radius-md);
padding: 0.9rem;
margin-bottom: 0.9rem;
box-shadow: 0 2px 4px rgba(15,23,42,0.04);
}
.aw-section h3 {
margin: 0 0 0.4rem;
font-size: 16px;
font-weight: 600;
line-height: 1.4;
color: #0f172a;
}
.aw-section p {
margin: 0 0 0.75rem;
font-size: 13px;
line-height: 1.5;
color: var(--aw-text-dim);
}
/* CONTROL ROWS */
.aw-control-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* BUTTONS & TOGGLES */
.aw-btn,
.aw-toggle {
appearance: none;
cursor: pointer;
background: #fff;
border: 1px solid var(--aw-border);
color: var(--aw-text-main);
border-radius: var(--aw-radius-sm);
font-size: 13px;
font-weight: 500;
line-height: 1.35;
padding: 0.85rem 0.7rem;
text-align: center;
flex: 1 1 calc(50% - 0.25rem);
min-width: 0;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
box-shadow: 0 1px 2px rgba(15,23,42,0.05);
position: relative;
}
.aw-btn:hover,
.aw-toggle:hover {
background-color: var(--aw-bg-subtle);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(15,23,42,0.12);
border-color: var(--aw-accent-start);
}
.aw-btn:focus,
.aw-toggle:focus {
outline: 3px solid #0ea5e9;
outline-offset: 2px;
}
/* Active toggles — accent rosu brand */
.aw-toggle[aria-pressed="true"] {
background: linear-gradient(135deg, var(--aw-accent-start) 0%, var(--aw-accent-end) 100%);
box-shadow: 0 3px 10px rgba(205,33,34,0.35);
border-color: transparent;
color: #fff;
font-weight: 600;
}
.aw-btn[aria-pressed="true"] {
box-shadow: 0 0 0 2px var(--aw-accent-start);
border-color: var(--aw-accent-start);
}
/* INLINE CONTROLS (font size / line height / spacing) */
.aw-inline-controls {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.5rem;
flex: 1 1 100%;
background: #f9fafb;
border: 1px solid var(--aw-border);
border-radius: var(--aw-radius-sm);
padding: 0.45rem 0.55rem;
}
.aw-inline-btn {
appearance: none;
cursor: pointer;
background: linear-gradient(135deg, var(--aw-accent-start) 0%, var(--aw-accent-end) 100%);
color: #ffffff;
border: none;
border-radius: var(--aw-radius-sm);
font-size: 13px;
font-weight: 700;
padding: 0.45rem 0.7rem;
min-width: 44px;
transition: transform 0.18s ease, box-shadow 0.18s ease;
box-shadow: 0 2px 6px rgba(205,33,34,0.28);
}
.aw-inline-btn:hover {
transform: scale(1.04);
box-shadow: 0 4px 8px rgba(15,23,42,0.25);
}
.aw-inline-btn:focus {
outline: 3px solid #0ea5e9;
outline-offset: 2px;
}
.aw-font-level-label-title {
font-size: 12px;
color: #4b5563;
white-space: nowrap;
}
.aw-font-level-label {
font-size: 13px;
font-weight: 700;
color: #111827;
flex: 1;
text-align: center;
min-width: 50px;
}
/* CONTACT BOX (folosit pentru link-uri utile) */
.aw-contact-box {
font-size: 12px;
line-height: 1.6;
background: #f9fafb;
border: 1px solid var(--aw-border);
border-radius: var(--aw-radius-sm);
padding: 0.75rem;
}
.aw-contact-box > div {
margin-bottom: 0.45rem;
}
.aw-contact-box > div:last-child {
margin-bottom: 0;
}
/* Titlurile „Politica de accesibilitate:" / „Politica de confidențialitate:" — negre
(nu albe), pentru contrast pe fundalul deschis al casetei. */
.aw-contact-box strong {
color: #0e0e10;
}
.aw-contact-box a {
color: #1d4ed8;
text-decoration: none;
font-weight: 600;
}
.aw-contact-box a:hover {
text-decoration: underline;
}
/* VIRTUAL KEYBOARD */
#aw-virtual-keyboard {
position: fixed;
left: 50%;
bottom: 0.5rem;
transform: translateX(-50%);
background:#0f172a;
color:#e5e7eb;
border-radius: var(--aw-radius-md);
box-shadow:0 24px 48px rgba(15,23,42,0.75);
padding:0.5rem;
font-size:14px;
line-height:1.4;
z-index: calc(var(--aw-z-modal) + 200);
display:none;
max-width:90vw;
}
#aw-virtual-keyboard .aw-vk-row {
display:flex;
flex-wrap:nowrap;
gap:0.25rem;
margin-bottom:0.25rem;
}
#aw-virtual-keyboard button {
flex:0 0 auto;
min-width:32px;
background:#1f2937;
color:#e5e7eb;
border:0;
border-radius: var(--aw-radius-sm);
padding:0.45rem 0.5rem;
font-size:13px;
font-weight:600;
line-height:1.2;
cursor:pointer;
transition: background 0.18s ease, transform 0.18s ease;
}
#aw-virtual-keyboard button:hover {
background:#374151;
transform: translateY(-1px);
}
#aw-virtual-keyboard button:focus {
outline:3px solid #0ea5e9;
outline-offset:2px;
}
/* Footer links in widget */
.aw-footer-links {
margin-top: 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
font-size: 13px;
}
.aw-link-button {
background: none;
border: 0;
padding: 0;
color: #1d4ed8;
cursor: pointer;
text-decoration: underline;
}
.aw-link-inline {
color: #1d4ed8;
text-decoration: underline;
}
/* ============================
Declarație de accesibilitate – modal light
============================ */
#aw-accessibility-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
/* peste TOT: z-index maxim, deasupra oricarui element din pagina gazda (#19) */
z-index: 2147483646;
display: none;
backdrop-filter: blur(2px);
}
#aw-accessibility-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #ffffff;
color: #111827;
padding: 1.5rem 1.75rem;
max-width: 720px;
min-width: 320px;
max-height: 80vh;
overflow-y: auto;
border-radius: 16px;
box-shadow: 0 28px 60px rgba(15, 23, 42, 0.35);
/* z-index maxim — deasupra backdrop-ului, a panoului si a oricarui div din pagina (#19) */
z-index: 2147483647;
display: none;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
line-height: 1.6;
}
#aw-accessibility-modal h2 {
font-size: 1.2rem;
margin-bottom: 0.75rem;
font-weight: 600;
color: #111827;
}
#aw-accessibility-modal h3 {
font-size: 0.98rem;
margin-top: 0.9rem;
margin-bottom: 0.4rem;
font-weight: 600;
color: #111827;
}
#aw-accessibility-modal p {
font-size: 0.9rem;
line-height: 1.7;
margin-bottom: 0.55rem;
color: #4b5563;
}
#aw-accessibility-modal ul {
margin-left: 1.25rem;
margin-bottom: 0.6rem;
padding-left: 0;
}
#aw-accessibility-modal li {
font-size: 0.9rem;
line-height: 1.7;
color: #4b5563;
margin-bottom: 0.2rem;
}
#aw-accessibility-modal strong {
color: #111827;
}
/* Buton închidere – stil light */
#aw-accessibility-modal-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: #e5e7eb;
border: 0;
color: #111827;
cursor: pointer;
border-radius: 999px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
transition: background 0.15s ease, transform 0.15s ease;
}
#aw-accessibility-modal-close:hover {
background: #d1d5db;
transform: translateY(-1px);
}
#aw-accessibility-modal-close:focus {
outline: 3px solid #2563eb;
outline-offset: 2px;
}
/* POWERED BY */
.aw-powered-by {
font-size: 11px;
line-height: 1.5;
text-align: center;
margin-top: 1rem;
color: #6b7280;
padding-top: 0.75rem;
border-top: 1px solid var(--aw-border);
}
.aw-powered-by a {
color: #1d4ed8;
text-decoration: none;
font-weight: 600;
}
.aw-powered-by a:hover {
text-decoration: underline;
}
/* RESPONSIVE */
@media (max-width: 480px) {
#aw-panel {
left: 0.5rem;
right: auto;
bottom: 4.5rem;
width: calc(100vw - 1rem);
max-height: 80vh;
}
#aw-panel.aw-panel-right {
right: 0.5rem;
left: auto;
}
#aw-launcher {
bottom: 0.75rem;
width: 48px;
height: 48px;
}
#aw-launcher svg {
width: 22px;
height: 22px;
}
}
/* ==========================================================
v12 — PREMIUM CONTROLS + NEW ACCESSIBILITY FEATURES
========================================================== */
/* Inline SVG icons inside controls (replace emoji) */
.aw-toggle, .aw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; }
.aw-toggle svg, .aw-btn svg, .aw-section h3 svg { width: 18px; height: 18px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* CARD-STYLE CONTROL ROWS — iconita mai mare, centrata sus; text centrat dedesubt */
.aw-control-row.aw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.aw-control-row.aw-cards .aw-toggle, .aw-control-row.aw-cards .aw-btn { flex-direction: column; gap: 8px; padding: 16px 10px; min-width: 0; }
.aw-control-row.aw-cards .aw-toggle svg, .aw-control-row.aw-cards .aw-btn svg { width: 26px; height: 26px; }
.aw-section h3 { display: flex; align-items: center; gap: 0.5rem; }
.aw-section h3 svg { width: 19px; height: 19px; color: var(--aw-accent-start); }
/* Header title: explicit white — defended against host-page global h1/h2/h3
color rules. The widget injects into arbitrary sites; relying on color
inheritance lets a host `h2{color:...}` rule darken the title on the navy bar. */
#aw-panel header h2,
#aw-panel header h2 span { color: #ffffff !important; }
#aw-panel .aw-section h3 { color: var(--aw-text-main) !important; }
#aw-panel .aw-section p { color: var(--aw-text-dim) !important; }
/* Defend the panel box against host generic-tag rules: #aw-panel is a ,
so a host `section{padding:64px 0}` injects white space at top/bottom. */
#aw-panel { padding: 0 !important; margin: 0 !important; }
#aw-panel header { margin: 0 !important; }
/* Swatch colors via attribute selectors (id-scoped + !important => immune to the
global background/text color modes; no inline !important needed). */
#aw-panel .aw-swatch[data-bg="red"], #aw-panel .aw-swatch[data-text="red"] { background: #dc2626 !important; }
#aw-panel .aw-swatch[data-bg="orange"], #aw-panel .aw-swatch[data-text="orange"] { background: #ea580c !important; }
#aw-panel .aw-swatch[data-bg="violet"], #aw-panel .aw-swatch[data-text="violet"] { background: #7c3aed !important; }
#aw-panel .aw-swatch[data-bg="teal"], #aw-panel .aw-swatch[data-text="teal"] { background: #0d9488 !important; }
#aw-panel .aw-swatch[data-bg="blue"], #aw-panel .aw-swatch[data-text="blue"] { background: #2563eb !important; }
#aw-panel .aw-swatch[data-bg="white"], #aw-panel .aw-swatch[data-text="white"] { background: #ffffff !important; }
#aw-panel .aw-swatch[data-bg="black"], #aw-panel .aw-swatch[data-text="black"] { background: #0f172a !important; }
/* Active toggle — flat brand red (premium, replaces gradient) */
.aw-toggle[aria-pressed="true"] {
background: var(--aw-accent-start);
box-shadow: 0 2px 8px rgba(205,33,34,0.30);
border-color: transparent;
color: #fff;
font-weight: 600;
}
/* Field label + premium select (daltonism) */
.aw-field-label { display: block; font-size: 12px; font-weight: 600; color: var(--aw-text-dim); margin-bottom: 0.4rem; }
.aw-select {
width: 100%; padding: 0.65rem 0.7rem; font: inherit; font-size: 13px; font-weight: 500;
color: var(--aw-text-main); background: #fff; border: 1.5px solid var(--aw-border-strong);
border-radius: var(--aw-radius-sm); cursor: pointer; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 0.6rem center; padding-right: 2rem;
}
.aw-select:focus { outline: none; border-color: var(--aw-accent-start); box-shadow: 0 0 0 3px rgba(205,33,34,0.2); }
/* Color swatches (background + text palettes) */
.aw-swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.aw-swatch {
width: 32px; height: 32px; border-radius: 8px; border: 2px solid var(--aw-border);
cursor: pointer; padding: 0; position: relative; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.aw-swatch:hover { transform: scale(1.08); }
.aw-swatch:focus-visible { outline: 3px solid #0ea5e9; outline-offset: 2px; }
.aw-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--aw-accent-start); }
.aw-swatch-clear {
width: auto; min-height: 32px; padding: 0 0.7rem; font-size: 12px; font-weight: 600;
color: var(--aw-text-dim); background: #fff; border: 1px solid var(--aw-border); border-radius: 8px; cursor: pointer;
}
.aw-swatch-clear:hover { background: var(--aw-bg-subtle); }
.aw-swatch-clear[aria-pressed="true"] { border-color: var(--aw-accent-start); color: var(--aw-accent-start); }
/* SMART CONTRAST — push text/links to a strong, readable contrast */
html.aw-smart-contrast body, html.aw-smart-contrast p, html.aw-smart-contrast li,
html.aw-smart-contrast span, html.aw-smart-contrast td, html.aw-smart-contrast th,
html.aw-smart-contrast label, html.aw-smart-contrast dd, html.aw-smart-contrast dt,
html.aw-smart-contrast h1, html.aw-smart-contrast h2, html.aw-smart-contrast h3,
html.aw-smart-contrast h4, html.aw-smart-contrast h5, html.aw-smart-contrast h6 {
color: #0b1120 !important; text-shadow: none !important;
}
html.aw-smart-contrast a, html.aw-smart-contrast a * { color: #0a3aa0 !important; text-decoration: underline !important; }
/* BACKGROUND COLOR PALETTE */
html.aw-bg-red body, html.aw-bg-red * { background-color: #7f1d1d !important; }
html.aw-bg-orange body, html.aw-bg-orange * { background-color: #7c2d12 !important; }
html.aw-bg-violet body, html.aw-bg-violet * { background-color: #4c1d95 !important; }
html.aw-bg-teal body, html.aw-bg-teal * { background-color: #134e4a !important; }
html.aw-bg-blue body, html.aw-bg-blue * { background-color: #1e3a8a !important; }
html.aw-bg-white body, html.aw-bg-white * { background-color: #ffffff !important; }
html.aw-bg-black body, html.aw-bg-black * { background-color: #000000 !important; }
/* TEXT COLOR PALETTE */
html.aw-text-red body, html.aw-text-red * { color: #dc2626 !important; }
html.aw-text-orange body, html.aw-text-orange * { color: #ea580c !important; }
html.aw-text-violet body, html.aw-text-violet * { color: #7c3aed !important; }
html.aw-text-teal body, html.aw-text-teal * { color: #0d9488 !important; }
html.aw-text-blue body, html.aw-text-blue * { color: #2563eb !important; }
html.aw-text-white body, html.aw-text-white * { color: #ffffff !important; }
html.aw-text-black body, html.aw-text-black * { color: #000000 !important; }
/* ===== WIDGET ISOLATION (bulletproof) — no page mode / selection may restyle it ==
Step 1: EVERY widget descendant resets to transparent background + inherited
color + neutral border + no filter — this beats the `html.aw-MODE *` rules.
Step 2: only real surfaces re-assert their colors (higher specificity wins).
Net effect: nothing selected in the widget (or any page mode) can recolor it. */
html[class*="aw-"] #aw-panel, html[class*="aw-"] #aw-panel *,
html[class*="aw-"] #aw-launcher, html[class*="aw-"] #aw-launcher *,
html[class*="aw-"] #aw-panel-backdrop,
html[class*="aw-"] #aw-accessibility-modal, html[class*="aw-"] #aw-accessibility-modal * {
background-color: transparent !important;
color: inherit !important;
border-color: var(--aw-border) !important;
text-shadow: none !important;
filter: none !important;
}
/* Surfaces */
html[class*="aw-"] #aw-panel { background: var(--aw-bg-panel) !important; color: var(--aw-text-main) !important; }
html[class*="aw-"] #aw-panel-content { background: var(--aw-bg-body) !important; }
html[class*="aw-"] #aw-panel .aw-section { background: var(--aw-bg-section) !important; }
html[class*="aw-"] #aw-panel .aw-inline-controls { background: var(--aw-bg-subtle) !important; }
html[class*="aw-"] #aw-panel header { background: linear-gradient(135deg, var(--aw-color-primary-start) 0%, var(--aw-color-primary-end) 100%) !important; }
html[class*="aw-"] #aw-panel header, html[class*="aw-"] #aw-panel header * { color: #fff !important; }
html[class*="aw-"] #aw-launcher { background: linear-gradient(135deg, var(--aw-color-primary-start) 0%, var(--aw-color-primary-end) 100%) !important; color: #fff !important; }
html[class*="aw-"] #aw-accessibility-modal { background: #fff !important; color: var(--aw-text-main) !important; }
/* Controls */
html[class*="aw-"] #aw-panel .aw-toggle,
html[class*="aw-"] #aw-panel .aw-btn,
html[class*="aw-"] #aw-panel .aw-select { background: #fff !important; color: var(--aw-text-main) !important; }
html[class*="aw-"] #aw-panel .aw-lang-trigger,
html[class*="aw-"] #aw-panel .aw-lang-pop,
html[class*="aw-"] #aw-panel .aw-lang-search,
html[class*="aw-"] #aw-panel .aw-lang-list { background: #fff !important; color: var(--aw-text-main) !important; }
html[class*="aw-"] #aw-panel .aw-toggle[aria-pressed="true"] { background: var(--aw-accent-start) !important; color: #fff !important; border-color: transparent !important; }
html[class*="aw-"] #aw-panel .aw-inline-btn { background: var(--aw-accent-start) !important; color: #fff !important; }
/* Text roles */
html[class*="aw-"] #aw-panel h3 { color: var(--aw-text-main) !important; }
html[class*="aw-"] #aw-panel p,
html[class*="aw-"] #aw-panel .aw-field-label,
html[class*="aw-"] #aw-panel .aw-font-level-label-title { color: var(--aw-text-dim) !important; }
html[class*="aw-"] #aw-panel .aw-font-level-label { color: var(--aw-text-main) !important; }
html[class*="aw-"] #aw-panel .aw-link-button,
html[class*="aw-"] #aw-panel .aw-link-inline,
html[class*="aw-"] #aw-panel .aw-contact-box a,
html[class*="aw-"] #aw-panel .aw-powered-by a { color: #1d4ed8 !important; }
/* Titlurile politicilor din caseta „Linkuri utile" rămân negre în orice temă. */
html[class*="aw-"] #aw-panel .aw-contact-box strong { color: #0e0e10 !important; }
/* Dark-themed widget parts keep their own theme + stay immune to filters */
html[class*="aw-"] #aw-tooltip { background: #111827 !important; color: #e5e7eb !important; filter: none !important; text-shadow: none !important; }
html[class*="aw-"] #aw-virtual-keyboard { background: #0f172a !important; filter: none !important; }
html[class*="aw-"] #aw-virtual-keyboard button { background: #1f2937 !important; color: #e5e7eb !important; }
/* Hide-widget dropdown (session / 24h / week) — it sits inside the dark panel
header but is a light popover like the language list. Without this, the
header `*{color:#fff}` theme rule and the contrast `*` rules paint white
text on its white surface, hiding the items whenever any accessibility
option is active. Two IDs keep it above `#aw-panel header *`. */
html[class*="aw-"] #aw-panel #aw-hide-menu { background: #fff !important; }
html[class*="aw-"] #aw-panel #aw-hide-menu button { background: #fff !important; color: var(--aw-text-main) !important; }
html[class*="aw-"] #aw-panel #aw-hide-menu button * { color: var(--aw-text-main) !important; }
html[class*="aw-"] #aw-panel #aw-hide-menu button:hover { background: var(--aw-bg-subtle) !important; }
/* BIG CURSORS — white + black variants (48px) */
html.aw-cursor-white, html.aw-cursor-white * {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' stroke='%23000000' stroke-width='1.5' d='M2 2 L20 12 L13 14 L16 22 L12 23 L9 15 L2 18 Z'/%3E%3C/svg%3E") 4 4, auto !important;
}
html.aw-cursor-black, html.aw-cursor-black * {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' stroke='%23ffffff' stroke-width='1.5' d='M2 2 L20 12 L13 14 L16 22 L12 23 L9 15 L2 18 Z'/%3E%3C/svg%3E") 4 4, auto !important;
}
/* SLOW CURSOR — eased follower ring (movement handled in JS) */
#aw-slow-cursor {
position: fixed; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
border: 3px solid var(--aw-accent-start); background: rgba(205,33,34,0.12);
pointer-events: none; z-index: 2147483646; transform: translate(-50%, -50%);
display: none; will-change: left, top;
}
html.aw-slow-cursor #aw-slow-cursor { display: block; }
/* BLUE-LIGHT FILTER — warm multiply overlay */
#aw-blue-light-overlay {
position: fixed; inset: 0; background: #ff8a00; opacity: 0.18;
mix-blend-mode: multiply; pointer-events: none; z-index: 999999990; display: none;
}
html.aw-blue-light #aw-blue-light-overlay { display: block; }
/* Reduced motion: neutralize the slow-cursor easing */
@media (prefers-reduced-motion: reduce) {
#aw-slow-cursor { transition: none !important; }
}
/* Prominent Accessibility Statement button (top of panel) */
.aw-statement-btn {
display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
margin-bottom: 0.9rem; padding: 0.85rem 1rem; border: none; border-radius: var(--aw-radius-md);
background: linear-gradient(135deg, var(--aw-accent-start) 0%, var(--aw-accent-end) 100%);
color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
box-shadow: 0 4px 12px rgba(205,33,34,0.28); transition: transform .18s ease, box-shadow .18s ease;
}
.aw-statement-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(205,33,34,0.36); }
.aw-statement-btn:focus-visible { outline: 3px solid #0ea5e9; outline-offset: 2px; }
.aw-statement-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
html[class*="aw-"] #aw-panel .aw-statement-btn { background: linear-gradient(135deg, var(--aw-accent-start) 0%, var(--aw-accent-end) 100%) !important; color: #fff !important; }
html[class*="aw-"] #aw-panel .aw-statement-btn * { color: #fff !important; }
/* Launcher active-state badge (check) */
.aw-launcher-badge {
position: absolute; top: -3px; right: -3px; width: 19px; height: 19px; border-radius: 50%;
background: var(--aw-accent-start); color: #fff; align-items: center; justify-content: center;
border: 2px solid #fff; box-shadow: 0 2px 6px rgba(15,23,42,0.4);
}
html[class*="aw-"] #aw-launcher .aw-launcher-badge { background: var(--aw-accent-start) !important; color: #fff !important; }
.aw-launcher-badge svg { width: 11px; height: 11px; }
/* Heading-color swatches (visual squares) */
#aw-panel .aw-swatch[data-title="red"] { background: #dc2626 !important; }
#aw-panel .aw-swatch[data-title="orange"] { background: #ea580c !important; }
#aw-panel .aw-swatch[data-title="violet"] { background: #7c3aed !important; }
#aw-panel .aw-swatch[data-title="teal"] { background: #0d9488 !important; }
#aw-panel .aw-swatch[data-title="blue"] { background: #2563eb !important; }
#aw-panel .aw-swatch[data-title="white"] { background: #ffffff !important; }
#aw-panel .aw-swatch[data-title="black"] { background: #0f172a !important; }
/* HEADING COLOR (titles) — pe pagină; widgetul e protejat de blocul de izolare */
html.aw-title-red :is(h1,h2,h3,h4,h5,h6) { color: #dc2626 !important; }
html.aw-title-orange :is(h1,h2,h3,h4,h5,h6) { color: #ea580c !important; }
html.aw-title-violet :is(h1,h2,h3,h4,h5,h6) { color: #7c3aed !important; }
html.aw-title-teal :is(h1,h2,h3,h4,h5,h6) { color: #0d9488 !important; }
html.aw-title-blue :is(h1,h2,h3,h4,h5,h6) { color: #2563eb !important; }
html.aw-title-white :is(h1,h2,h3,h4,h5,h6) { color: #ffffff !important; }
html.aw-title-black :is(h1,h2,h3,h4,h5,h6) { color: #0f172a !important; }
/* HIGHLIGHT HOVER — evidențiază elementul de sub cursor (pagină, nu widget) */
html.aw-highlight-hover body > *:not([id^="aw-"]):not([class*="aw-"]):hover,
html.aw-highlight-hover body > *:not([id^="aw-"]):not([class*="aw-"]) *:hover {
outline: 2px solid #1d4ed8 !important; outline-offset: 1px !important;
}
/* UNDERLINE CONTENT — subliniază linkurile și textul de conținut (pagină, nu widget) */
html.aw-underline-content body > *:not([id^="aw-"]):not([class*="aw-"]) a,
html.aw-underline-content body > a:not([id^="aw-"]):not([class*="aw-"]) {
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 2px !important;
}
html.aw-underline-content body > *:not([id^="aw-"]):not([class*="aw-"]) :is(p,li,h1,h2,h3,h4,h5,h6,blockquote,figcaption,dd,dt,td,th),
html.aw-underline-content body > :is(p,li,h1,h2,h3,h4,h5,h6,blockquote):not([id^="aw-"]):not([class*="aw-"]) {
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
/* VOICE NAV — toast de stare pentru „Vorbește pentru a naviga" (microfon) */
#aw-voice-status {
position: fixed;
left: 50%;
bottom: 1.25rem;
transform: translateX(-50%);
z-index: 2147483646;
background: #0f172a;
color: #ffffff;
font: 600 14px system-ui, -apple-system, "Segoe UI", sans-serif;
padding: 0.6rem 1rem;
border-radius: 999px;
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
max-width: 90vw;
text-align: center;
pointer-events: none;
}
#aw-voice-status[data-error="1"] { background: #b91c1c; }
/* READING MODE — păstrează header-ul widgetului vizibil (altfel `header{display:none}` îl ascunde) */
html.aw-reader-mode #aw-panel header { display: flex !important; }
/* Report-a-problem button (secondary, links to contact page) */
.aw-report-btn {
display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
margin-top: 0.6rem; padding: 0.75rem 1rem; border: 1.5px solid var(--aw-border-strong);
border-radius: var(--aw-radius-md); background: #fff; color: var(--aw-text-main);
font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none;
transition: background .18s ease, border-color .18s ease;
}
.aw-report-btn:hover { background: var(--aw-bg-subtle); border-color: var(--aw-text-dim); text-decoration: none; }
.aw-report-btn:focus-visible { outline: 3px solid #0ea5e9; outline-offset: 2px; }
.aw-report-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
html[class*="aw-"] #aw-panel .aw-report-btn { background: #fff !important; color: var(--aw-text-main) !important; }
html[class*="aw-"] #aw-panel .aw-report-btn * { color: var(--aw-text-main) !important; }
/* Powered-by logo (small) */
.aw-powered-by .aw-powered-logo { height: 16px; width: auto; max-width: 110px; vertical-align: middle; display: inline-block; margin-left: 3px; }
html[class*="aw-"] #aw-panel .aw-powered-by .aw-powered-logo { filter: none !important; }