/* ==========================================================================
   TechDeployers 1.6 – feature widgets: accessibility panel, chatbot, theme toggle,
   and the effects of the accessibility options. Plain CSS, no build step.
   ========================================================================== */

/* ---- Shared tokens (light) ------------------------------------------------ */
.tdf-a11y, .tdf-chat, .tdf-theme-btn {
	--tdf-accent: #2563eb;
	--tdf-accent-ink: #1d4ed8;
	--tdf-surface: #ffffff;
	--tdf-soft: #f1f5f9;
	--tdf-ink: #0f172a;
	--tdf-muted: #475569;
	--tdf-line: #e2e8f0;
	--tdf-bubble: #f1f5f9;
	--tdf-wa: #0b7a4b;
	--tdf-wa-hover: #096a40;
}
:is(html[data-td-theme="dark"], html.td-a11y-hc) :is(.tdf-a11y, .tdf-chat) {
	--tdf-accent: #60a5fa;
	--tdf-accent-ink: #93c5fd;
	--tdf-surface: #0f1a2e;
	--tdf-soft: #1a2740;
	--tdf-ink: #f1f5f9;
	--tdf-muted: #b6c2d4;
	--tdf-line: #2a3b5a;
	--tdf-bubble: #1a2740;
}

/* ---- Keyboard focus (visible on every control the widgets add) ------------ */
.tdf-a11y button:focus-visible, .tdf-chat button:focus-visible, .tdf-chat a:focus-visible, .tdf-theme-btn:focus-visible {
	outline: 3px solid var(--tdf-accent);
	outline-offset: 2px;
}

/* ---- Floating launchers --------------------------------------------------- */
.tdf-a11y, .tdf-chat { position: fixed; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 60; font-family: inherit; }
.tdf-pos-left { left: max(1rem, env(safe-area-inset-left)); }
.tdf-pos-right { right: max(1rem, env(safe-area-inset-right)); }
/* Both on the same side: stack the accessibility button above the chat button. */
.tdf-a11y.tdf-pos-right ~ .tdf-chat.tdf-pos-right, .tdf-a11y.tdf-pos-left ~ .tdf-chat.tdf-pos-left { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.5rem); }
html.td-lock .tdf-a11y, html.td-lock .tdf-chat { display: none; }

.tdf-a11y-btn, .tdf-chat-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
	min-width: 3.5rem; height: 3.5rem; padding: 0; border: 0; border-radius: 9999px; cursor: pointer;
	color: #fff; background: var(--tdf-accent, #2563eb); box-shadow: 0 10px 28px -8px rgb(37 99 235 / .65), 0 2px 6px rgb(15 23 42 / .2);
	font-weight: 700; font-size: .9375rem; line-height: 1; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.tdf-a11y-btn { width: 3.5rem; background: #0f172a; box-shadow: 0 10px 28px -8px rgb(15 23 42 / .6), 0 2px 6px rgb(15 23 42 / .2); border: 2px solid rgb(255 255 255 / .85); }
.tdf-chat-btn { padding: 0 1.25rem 0 1.1rem; background: linear-gradient(135deg, #2563eb, #4f46e5); }
.tdf-a11y-btn:hover, .tdf-chat-btn:hover { transform: translateY(-2px); }
:is(html[data-td-theme="dark"], html.td-a11y-hc) .tdf-a11y-btn { background: #1d4ed8; border-color: rgb(255 255 255 / .6); }
.tdf-chat-btn svg, .tdf-a11y-btn svg { flex: none; }
@media (max-width: 480px) {
	.tdf-chat-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.tdf-chat-btn { padding: 0; width: 3.5rem; }
}

/* ---- Panels (shared) ------------------------------------------------------ */
.tdf-a11y-panel, .tdf-chat-panel {
	position: fixed; bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.5rem); z-index: 61;
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--tdf-surface); color: var(--tdf-ink); border: 1px solid var(--tdf-line); border-radius: 1.25rem;
	box-shadow: 0 30px 70px -20px rgb(2 6 23 / .45), 0 4px 14px rgb(2 6 23 / .12);
	opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .2s ease, transform .25s ease;
}
.tdf-a11y-panel[hidden], .tdf-chat-panel[hidden] { display: none; }
.tdf-a11y-panel.is-open, .tdf-chat-panel.is-open { opacity: 1; transform: none; }
.tdf-a11y.tdf-pos-left .tdf-a11y-panel, .tdf-chat.tdf-pos-left .tdf-chat-panel { left: max(1rem, env(safe-area-inset-left)); }
.tdf-a11y.tdf-pos-right .tdf-a11y-panel, .tdf-chat.tdf-pos-right .tdf-chat-panel { right: max(1rem, env(safe-area-inset-right)); }
.tdf-a11y.tdf-pos-right ~ .tdf-chat.tdf-pos-right .tdf-chat-panel, .tdf-a11y.tdf-pos-left ~ .tdf-chat.tdf-pos-left .tdf-chat-panel { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.5rem + 4.5rem); }

.tdf-x {
	display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem;
	border: 0; border-radius: 9999px; cursor: pointer; color: inherit; background: transparent; transition: background-color .15s ease;
}
.tdf-x:hover { background: rgb(127 127 127 / .18); }

/* ---- Accessibility panel -------------------------------------------------- */
.tdf-a11y-panel { width: 21rem; max-width: calc(100vw - 2rem); max-height: calc(100vh - 9rem); max-height: calc(100dvh - 9rem); }
.tdf-a11y-head { display: flex; align-items: center; justify-content: space-between; padding: .5rem .5rem .5rem 1.1rem; border-bottom: 1px solid var(--tdf-line); }
.tdf-a11y-head h2 { margin: 0; font-size: 1.0625rem; font-weight: 800; color: var(--tdf-ink); }
.tdf-a11y-body { padding: 1rem; overflow-y: auto; overscroll-behavior: contain; }
.tdf-size { display: flex; align-items: center; gap: .5rem; margin-bottom: .85rem; padding: .5rem .6rem; border-radius: .9rem; background: var(--tdf-soft); }
.tdf-size-label { flex: 1; font-size: .875rem; font-weight: 700; }
.tdf-size button { min-width: 2.75rem; height: 2.5rem; border: 1px solid var(--tdf-line); border-radius: .65rem; background: var(--tdf-surface); color: var(--tdf-ink); font-weight: 800; font-size: .95rem; cursor: pointer; }
.tdf-size button:hover:not(:disabled) { border-color: var(--tdf-accent); color: var(--tdf-accent); }
.tdf-size button:disabled { opacity: .4; cursor: not-allowed; }
.tdf-size-val { min-width: 3.2rem; text-align: center; font-weight: 700; font-size: .875rem; }
.tdf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tdf-opt {
	display: flex; align-items: center; gap: .55rem; min-height: 3rem; padding: .5rem .65rem; text-align: left;
	border: 1.5px solid var(--tdf-line); border-radius: .85rem; background: var(--tdf-surface); color: var(--tdf-ink);
	font-size: .8125rem; font-weight: 600; line-height: 1.25; cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.tdf-opt:hover { border-color: var(--tdf-accent); }
.tdf-opt-ico { flex: none; width: 1.15rem; height: 1.15rem; border-radius: .35rem; border: 2px solid var(--tdf-muted); position: relative; }
.tdf-opt[aria-pressed="true"] { border-color: var(--tdf-accent); background: rgb(37 99 235 / .1); }
.tdf-opt[aria-pressed="true"] .tdf-opt-ico { background: var(--tdf-accent); border-color: var(--tdf-accent); }
.tdf-opt[aria-pressed="true"] .tdf-opt-ico::after { content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tdf-reset {
	width: 100%; margin-top: .85rem; min-height: 2.75rem; border: 1.5px solid var(--tdf-line); border-radius: .85rem; background: var(--tdf-soft);
	color: var(--tdf-ink); font-weight: 700; font-size: .875rem; cursor: pointer;
}
.tdf-reset:hover { border-color: var(--tdf-accent); color: var(--tdf-accent); }
.tdf-a11y-note { margin: .75rem 0 0; font-size: .75rem; color: var(--tdf-muted); }
@media (max-width: 480px) {
	.tdf-a11y-panel { left: .75rem !important; right: .75rem !important; width: auto; max-width: none; }
}

/* ---- Chatbot panel -------------------------------------------------------- */
.tdf-chat-panel { width: 24rem; max-width: calc(100vw - 2rem); height: min(37.5rem, calc(100vh - 9rem)); height: min(37.5rem, calc(100dvh - 9rem)); }
.tdf-chat-head { display: flex; align-items: center; gap: .65rem; padding: .75rem .6rem .75rem 1rem; color: #fff; background: linear-gradient(135deg, #2563eb, #4338ca); }
.tdf-chat-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: rgb(255 255 255 / .18); }
.tdf-chat-ttl { flex: 1; min-width: 0; }
.tdf-chat-ttl p { margin: 0; }
#tdf-chat-title { font-weight: 800; font-size: 1rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdf-chat-sub { font-size: .75rem; opacity: .9; }
.tdf-chat-sub::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .35rem; border-radius: 9999px; background: #4ade80; }
.tdf-chat-head .tdf-x:hover { background: rgb(255 255 255 / .2); }
.tdf-chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; display: flex; flex-direction: column; gap: .65rem; scroll-behavior: smooth; }
.tdf-chat-log:focus-visible { outline: 3px solid var(--tdf-accent); outline-offset: -3px; }
.tdf-msg { max-width: 88%; padding: .65rem .9rem; border-radius: 1.1rem; font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; animation: tdf-in .25s ease both; }
.tdf-msg.bot { align-self: flex-start; background: var(--tdf-bubble); color: var(--tdf-ink); border-bottom-left-radius: .35rem; }
.tdf-msg.me { align-self: flex-end; background: var(--tdf-accent); color: #fff; border-bottom-right-radius: .35rem; }
:is(html[data-td-theme="dark"], html.td-a11y-hc) .tdf-msg.me { background: #1d4ed8; }
.tdf-typing { display: inline-flex; gap: .25rem; align-items: center; padding: .85rem .9rem; }
.tdf-typing i { width: .45rem; height: .45rem; border-radius: 9999px; background: var(--tdf-muted); animation: tdf-dot 1s infinite ease-in-out; }
.tdf-typing i:nth-child(2) { animation-delay: .15s; } .tdf-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tdf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tdf-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }

.tdf-chips { align-self: stretch; display: flex; flex-wrap: wrap; gap: .5rem; animation: tdf-in .25s ease both; }
.tdf-chip {
	min-height: 2.75rem; padding: .5rem .95rem; border: 1.5px solid var(--tdf-accent); border-radius: 9999px; background: var(--tdf-surface); color: var(--tdf-accent-ink);
	font-size: .875rem; font-weight: 700; line-height: 1.25; text-align: left; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.tdf-chip:hover { background: var(--tdf-accent); color: #fff; }
.tdf-chip.is-wa { border-color: var(--tdf-wa); color: var(--tdf-wa); }
:is(html[data-td-theme="dark"], html.td-a11y-hc) .tdf-chip.is-wa { border-color: #34d399; color: #6ee7b7; }
.tdf-chip.is-wa:hover { background: var(--tdf-wa); color: #fff; }
.tdf-chip.is-quiet { border-color: var(--tdf-line); color: var(--tdf-muted); }

.tdf-card { align-self: stretch; padding: .9rem 1rem 1rem; border: 1px solid var(--tdf-line); border-radius: 1rem; background: var(--tdf-surface); box-shadow: 0 8px 22px -14px rgb(15 23 42 / .35); animation: tdf-in .25s ease both; }
.tdf-card h3 { margin: 0 0 .25rem; font-size: 1.0625rem; font-weight: 800; color: var(--tdf-ink); line-height: 1.3; }
.tdf-card p { margin: 0 0 .75rem; font-size: .875rem; line-height: 1.55; color: var(--tdf-muted); white-space: pre-line; }
.tdf-price {
	display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; margin: 0 0 .5rem; padding: .7rem .9rem; box-sizing: border-box;
	border-radius: .85rem; border: 1.5px dashed var(--tdf-accent); background: rgb(37 99 235 / .08); color: var(--tdf-ink); text-decoration: none;
}
.tdf-price:hover { background: rgb(37 99 235 / .16); }
.tdf-price-k { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tdf-muted); }
.tdf-price-v { font-size: 1.125rem; font-weight: 800; color: var(--tdf-accent-ink); text-align: right; line-height: 1.25; }
.tdf-wa {
	display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 2.9rem; box-sizing: border-box; padding: .6rem 1rem; border-radius: .85rem;
	background: var(--tdf-wa); color: #fff !important; font-weight: 800; font-size: .9375rem; text-decoration: none !important; transition: background-color .15s ease;
}
.tdf-wa:hover { background: var(--tdf-wa-hover); }
.tdf-chat-foot { display: flex; gap: .5rem; padding: .55rem .75rem; border-top: 1px solid var(--tdf-line); background: var(--tdf-surface); }
.tdf-foot-btn { flex: 1; min-height: 2.5rem; border: 1px solid var(--tdf-line); border-radius: .75rem; background: var(--tdf-soft); color: var(--tdf-ink); font-weight: 700; font-size: .8125rem; cursor: pointer; }
.tdf-foot-btn:hover:not(:disabled) { border-color: var(--tdf-accent); color: var(--tdf-accent); }
.tdf-foot-btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 480px) {
	.tdf-chat-panel { left: .75rem !important; right: .75rem !important; width: auto; max-width: none; bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.25rem); height: min(40rem, calc(100vh - 6.5rem)); height: min(40rem, calc(100dvh - 6.5rem)); }
	.tdf-a11y.tdf-pos-right ~ .tdf-chat.tdf-pos-right .tdf-chat-panel, .tdf-a11y.tdf-pos-left ~ .tdf-chat.tdf-pos-left .tdf-chat-panel { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.25rem); }
}
@media (max-height: 520px) { .tdf-chat-panel { height: calc(100vh - 6rem); } }

/* ---- Theme toggle (header) ------------------------------------------------ */
.tdf-theme-btn {
	display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; padding: 0; cursor: pointer;
	border-radius: 9999px; border: 1px solid var(--h-line, rgb(15 23 42 / .1)); background: var(--h-chip, rgb(15 23 42 / .04)); color: var(--h-fg, #334155);
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.tdf-theme-btn:hover { background: var(--h-hover, rgb(37 99 235 / .09)); color: var(--h-strong, #0f172a); }
.tdf-theme-btn:focus-visible { outline: 2px solid var(--h-accent, #2563eb); outline-offset: 2px; }
.tdf-theme-btn .tdf-ico-sun { display: none; }
html[data-td-theme="dark"] .tdf-theme-btn .tdf-ico-sun { display: block; }
html[data-td-theme="dark"] .tdf-theme-btn .tdf-ico-moon { display: none; }
.td-hdr-actions { display: flex; align-items: center; gap: .5rem; }

/* ---- Effects of the accessibility options --------------------------------- */
html.td-a11y-fsm2 { font-size: 87.5%; } html.td-a11y-fsm1 { font-size: 93.75%; }
html.td-a11y-fsp1 { font-size: 112.5%; } html.td-a11y-fsp2 { font-size: 125%; } html.td-a11y-fsp3 { font-size: 150%; }

html.td-a11y-readable body, html.td-a11y-readable body *:not(svg):not(svg *) { font-family: Verdana, Tahoma, "Trebuchet MS", Arial, sans-serif !important; letter-spacing: .02em; word-spacing: .08em; }
html.td-a11y-spacing :is(p, li, dd, td, th, blockquote, figcaption, label, h1, h2, h3, h4) { line-height: 1.9 !important; letter-spacing: .03em; word-spacing: .12em; }
html.td-a11y-spacing :is(p, li) { margin-bottom: .35em; }
html.td-a11y-links a:not(.tdf-wa):not(.tdf-price) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px; outline: 2px solid #f59e0b; outline-offset: 2px; border-radius: 3px; }
html.td-a11y-motion *, html.td-a11y-motion *::before, html.td-a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.td-a11y-motion .td-js .td-reveal, html.td-a11y-motion.td-js .td-reveal { opacity: 1 !important; transform: none !important; }
html.td-a11y-cursor, html.td-a11y-cursor * { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'><path d='M4 2l15 9-6.5 1.6L9.5 19z' fill='black' stroke='white' stroke-width='1.6' stroke-linejoin='round'/></svg>") 4 2, auto !important; }
html.td-a11y-gray { filter: grayscale(1); }
html.td-a11y-focus :focus, html.td-a11y-focus :focus-visible { outline: 4px solid #f59e0b !important; outline-offset: 3px !important; box-shadow: 0 0 0 2px #000 !important; }

/* Keyboard users always get a clearly visible focus ring on the site's own controls. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline-offset: 2px; }

/* ---- Auto popup: notification dot + pulse (v1.7). Nothing here changes the page layout. ---- */
.tdf-chat-btn { position: relative; }
.tdf-badge {
	position: absolute; top: -.2rem; right: -.2rem; min-width: 1.4rem; height: 1.4rem; padding: 0 .3rem; box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px;
	background: #dc2626; color: #fff; border: 2px solid #fff; font-size: .75rem; font-weight: 800; line-height: 1;
}
.tdf-badge[hidden] { display: none; }
.tdf-chat-btn.is-alert::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	box-shadow: 0 0 0 0 rgb(37 99 235 / .55); animation: tdf-pulse 1.8s ease-out infinite;
}
@keyframes tdf-pulse { 0% { box-shadow: 0 0 0 0 rgb(37 99 235 / .55); } 80%, 100% { box-shadow: 0 0 0 .9rem rgb(37 99 235 / 0); } }
html.td-a11y-motion .tdf-chat-btn.is-alert::after { animation: none; }
.tdf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
	.tdf-chat-btn.is-alert::after { animation: none; box-shadow: 0 0 0 .3rem rgb(37 99 235 / .35); }
	.tdf-a11y-panel, .tdf-chat-panel, .tdf-msg, .tdf-chips, .tdf-card { transition: none; animation: none; }
	.tdf-typing i { animation: none; opacity: .7; }
}
@media print { .tdf-a11y, .tdf-chat, .tdf-theme-btn { display: none !important; } }

/* Big text on a phone: keep the header bar (logo + theme button + menu button) inside the screen instead of
   scaling it with the page text. The menu panel and the page itself still use the chosen text size. */
@media (max-width: 639px) {
	html.td-a11y-fsp1 .td-hdr-row { zoom: .889; }
	html.td-a11y-fsp2 .td-hdr-row { zoom: .8; }
	html.td-a11y-fsp3 .td-hdr-row { zoom: .667; }
}
@media (max-width: 359px) {
	html.td-a11y-fsp1 .td-hdr-row { zoom: .8; }
	html.td-a11y-fsp2 .td-hdr-row { zoom: .7; }
	html.td-a11y-fsp3 .td-hdr-row { zoom: .58; }
}
/* Larger text: long words wrap instead of pushing the page sideways. */
html[class*="td-a11y-fsp"] main :is(h1, h2, h3, h4, p, a, span, li, label, dd, dt) { overflow-wrap: anywhere; }
html[class*="td-a11y-fsp"] main :is([class*="grid"], [class*="flex"]) > * { min-width: 0; }
@media (max-width: 359px) { html[class*="td-a11y-fsp"] .td-footer .text-2xl { font-size: 1.25rem; } }

/* Contrast (WCAG AA): white text on the testimonial category badges. */
.td-vcard .bg-orange-500 { background-color: #c2410c; }
.td-vcard .bg-blue-500 { background-color: #2563eb; }
.td-vcard .bg-purple-500 { background-color: #9333ea; }
.td-vcard .bg-pink-500 { background-color: #be185d; }
.td-vcard .bg-green-500 { background-color: #15803d; }
.td-vcard .bg-cyan-500 { background-color: #0e7490; }
.td-vcard .bg-amber-500 { background-color: #b45309; }