/* DVS — Floating widgets: Contact (WhatsApp/Telegram/Email) + Accessibility */

/* === Floating Contact === */
.dvs-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}
.dvs-fab > * { pointer-events: auto; }

.dvs-fab-trigger {
  width: 56px; height: 56px;
  border-radius: 999px;
  border: 1px solid var(--m-line, rgba(10,10,11,0.10));
  background: var(--m-ink, #0A0A0B);
  color: var(--m-bone, #FBFAF6);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 30px -10px rgba(10,10,11,0.4);
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1), background 220ms;
}
.dvs-fab-trigger:hover { transform: translateY(-3px); background: var(--m-gold, #B08948); }
.dvs-fab-trigger svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.dvs-fab-menu {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
  align-items: stretch;   /* was flex-end: each pill shrank to its own label */
}
.dvs-fab.is-open .dvs-fab-menu { display: flex; }

.dvs-fab-link {
  /* was inline-flex + width:auto, so each pill sized to its own label and the
     stack came out ragged. Flex so they all share the widest one's width. */
  display: flex; width: 100%; box-sizing: border-box;
  align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px 10px 12px;
  background: #FFFFFF;
  border: 1px solid var(--m-line, rgba(10,10,11,0.10));
  border-radius: 999px;
  text-decoration: none;
  color: var(--m-ink, #0A0A0B);
  font-family: var(--m-font-body, system-ui), sans-serif;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 6px 20px -10px rgba(10,10,11,0.18);
  transition: border-color 200ms, transform 200ms, background 200ms;
  white-space: nowrap;
}
[dir="rtl"] .dvs-fab-link { padding: 10px 12px 10px 16px; }
.dvs-fab-link:hover { transform: translateY(-1px); border-color: var(--m-gold, #B08948); }
.dvs-fab-link-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--m-bone, #FBFAF6);
}
.dvs-fab-link-icon svg { width: 16px; height: 16px; }
/* the mail icon is a stroke-drawn svg with no inline attrs - without this it
   fills black and turns into a blob */
.dvs-fab-link-mail .dvs-fab-link-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.dvs-fab-link-wa .dvs-fab-link-icon { background: #25D366; color: #FFF; }
.dvs-fab-link-tg .dvs-fab-link-icon { background: #229ED9; color: #FFF; }
.dvs-fab-link-mail .dvs-fab-link-icon { background: var(--m-ink, #0A0A0B); color: var(--m-bone, #FBFAF6); }

.dvs-fab-close {
  position: absolute;
  top: -10px; right: -10px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--m-bone, #FBFAF6);
  border: 1px solid var(--m-line, rgba(10,10,11,0.12));
  display: none; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 12px;
  color: var(--m-ink, #0A0A0B);
}
.dvs-fab.is-open .dvs-fab-close { display: inline-flex; }
.dvs-fab-close svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; }
.dvs-fab.is-open .dvs-fab-trigger { background: var(--m-gold, #B08948); }

@media (max-width: 480px) {
  .dvs-fab { right: 14px; bottom: 14px; }
  .dvs-fab-link { font-size: 13px; }
}

/* === Accessibility widget === */
.dvs-a11y-btn {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 9000;
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--m-ink, #0A0A0B);
  color: var(--m-bone, #FBFAF6);
  border: 1px solid var(--m-line, rgba(10,10,11,0.10));
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(10,10,11,0.4);
  transition: transform 220ms, background 220ms;
}
.dvs-a11y-btn:hover { transform: translateY(-2px); background: var(--m-gold, #B08948); }
.dvs-a11y-btn svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
@media (max-width: 480px) {
  .dvs-a11y-btn { left: 14px; bottom: 14px; width: 44px; height: 44px; }
}

.dvs-a11y-panel {
  position: fixed;
  left: 24px;
  bottom: 84px;
  z-index: 9001;
  width: 300px; max-width: calc(100vw - 28px);
  background: #FFFFFF;
  border: 1px solid var(--m-line, rgba(10,10,11,0.10));
  border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(10,10,11,0.3);
  padding: 18px;
  display: none;
  font-family: var(--m-font-body, system-ui), sans-serif;
  color: var(--m-ink, #0A0A0B);
}
.dvs-a11y-panel.is-open { display: block; }
@media (max-width: 480px) {
  .dvs-a11y-panel { left: 14px; bottom: 70px; }
}

.dvs-a11y-title {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--m-font-display, serif);
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 14px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--m-line, rgba(10,10,11,0.10));
}
[lang="he"] .dvs-a11y-title { font-family: var(--m-font-display-he, serif); }
.dvs-a11y-close {
  appearance: none; border: 0; background: transparent;
  cursor: pointer; font-size: 18px; color: var(--m-ink);
  line-height: 1;
}
.dvs-a11y-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.dvs-a11y-opt {
  appearance: none;
  border: 1px solid var(--m-line, rgba(10,10,11,0.10));
  background: transparent;
  border-radius: 8px;
  padding: 10px 8px;
  font-family: var(--m-font-body, system-ui), sans-serif;
  font-size: 12px;
  color: var(--m-ink);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: border-color 180ms, background 180ms;
}
.dvs-a11y-opt:hover { border-color: var(--m-ink); }
.dvs-a11y-opt.is-active { background: var(--m-ink); color: var(--m-bone); border-color: var(--m-ink); }
.dvs-a11y-opt svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.dvs-a11y-reset {
  margin-top: 14px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--m-line);
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--m-font-body, system-ui);
  font-size: 13px;
  color: var(--m-ink);
}
.dvs-a11y-reset:hover { background: var(--m-ink); color: var(--m-bone); }
.dvs-a11y-statement {
  margin-top: 12px;
  text-align: center;
  font-size: 11px;
  color: var(--m-ink);
  opacity: 0.6;
}
.dvs-a11y-statement a { color: inherit; text-decoration: underline; }

/* Modes applied to <html> */
/* The site's type is px-based, so bumping the root font-size alone changes
   nothing visible. zoom scales the whole layout instead. */
html.dvs-a11y-bigtext { font-size: 18px; }
html.dvs-a11y-bigtext body { zoom: 1.12; }
html.dvs-a11y-hugetext { font-size: 20px; }
html.dvs-a11y-hugetext body { zoom: 1.25; }
html.dvs-a11y-highcontrast body.dsv-body {
  background: #000 !important;
  color: #FFFF00 !important;
}
html.dvs-a11y-highcontrast body.dsv-body * {
  background: transparent !important;
  color: #FFFF00 !important;
  border-color: #FFFF00 !important;
}
html.dvs-a11y-highcontrast body.dsv-body a { color: #00FFFF !important; }
html.dvs-a11y-highcontrast body.dsv-body img { filter: grayscale(1) contrast(1.3); }
html.dvs-a11y-readable * { font-family: Arial, sans-serif !important; }
html.dvs-a11y-links a { text-decoration: underline !important; }
html.dvs-a11y-stop *,
html.dvs-a11y-stop *::before,
html.dvs-a11y-stop *::after {
  animation: none !important;
  transition: none !important;
}
html.dvs-a11y-cursor, html.dvs-a11y-cursor * { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='12' fill='black' stroke='white' stroke-width='3'/></svg>") 16 16, auto !important; }

/* Focus styles for keyboard nav */
:focus-visible {
  outline: 2px solid var(--m-gold, #B08948) !important;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip-to-content link */
.dvs-skip {
  position: absolute;
  left: 12px;
  top: -40px;
  background: var(--m-ink);
  color: var(--m-bone);
  padding: 8px 14px;
  border-radius: 6px;
  font-family: var(--m-font-mono, monospace);
  font-size: 12px;
  z-index: 10000;
  text-decoration: none;
  transition: top 200ms;
}
.dvs-skip:focus { top: 12px; }

/* === Cookie / Privacy notice (minimal) === */
.dvs-cookie {
  position: fixed;
  inset-inline: 16px;
  /* keep clear of the floating contact/a11y buttons (56px + margin) */
  bottom: 92px;
  z-index: 8500;
  display: none;
  background: var(--m-ink, #0A0A0B);
  color: var(--m-bone, #FBFAF6);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 24px 60px -20px rgba(10,10,11,0.5);
  max-width: 480px;
  margin-inline-start: auto;
  font-family: var(--m-font-body, system-ui);
}
.dvs-cookie.is-visible { display: block; }
.dvs-cookie p { margin: 0 0 14px 0; font-size: 13px; line-height: 1.5; opacity: 0.9; }
.dvs-cookie a { color: var(--m-gold, #B08948); text-decoration: underline; }
.dvs-cookie-actions { display: flex; gap: 8px; }
.dvs-cookie button {
  appearance: none; border: 0; cursor: pointer;
  padding: 8px 16px; border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  transition: all 180ms;
}
.dvs-cookie-accept { background: var(--m-bone); color: var(--m-ink); }
.dvs-cookie-accept:hover { background: var(--m-gold, #B08948); }
.dvs-cookie-decline {
  background: transparent;
  color: var(--m-bone);
  border: 1px solid rgba(255,255,255,0.2) !important;
}
.dvs-cookie-decline:hover { border-color: var(--m-bone) !important; }