/* Dr. Yakir Clinic - dock: floating socials + one unified accessibility / cookies menu.
   Visual language is the original .float-btns / .a11y-btn / .a11y-panel / .a11y-action / .cookie-banner from style.css.
   Every rule is scoped under .dyk-dock so theme or Elementor kit rules for a, button and h2/h3 cannot leak in,
   and so this file wins over style.css whatever the print order. */

.dyk-dock {
  --dyk-soc-x: 22px;
  --dyk-soc-b: 22px;
  --dyk-col: 58px;
  --dyk-btn-x: 22px;
  --dyk-btn-b: 22px;
  --dyk-btn: 58px;
  --dyk-gap: 12px;
  --dyk-card-w: 300px;
  --dyk-sab: env(safe-area-inset-bottom, 0px);
  --dyk-sal: env(safe-area-inset-left, 0px);
  --dyk-sar: env(safe-area-inset-right, 0px);
  --dyk-vh: 100vh;
  /* cards sit above the unified button, right-aligned with it, and never reach into the socials column */
  --dyk-card-b: calc(var(--dyk-btn-b) + var(--dyk-btn) + var(--dyk-gap) + var(--dyk-sab));
  --dyk-card-r: calc(var(--dyk-btn-x) + var(--dyk-sar));
  --dyk-avoid: calc(var(--dyk-soc-x) + var(--dyk-sal) + var(--dyk-col) + 14px);
  --dyk-top: calc(var(--header-h, 76px) + env(safe-area-inset-top, 0px));
  --dyk-card-max-h: calc(var(--dyk-vh) - var(--dyk-card-b) - var(--dyk-top) - 8px);
  --dyk-z: 1500; /* the original .float-btns level: above .site-header (1000) and its open mobile nav, under #lightbox (2500) */
  font-family: var(--font-body, 'Heebo', sans-serif);
}
@supports (height: 100dvh) {
  .dyk-dock { --dyk-vh: 100dvh; }
}
/* logged-in admin bar pushes the fixed header down (bridge.css) */
body.admin-bar .dyk-dock { --dyk-top: calc(var(--header-h, 76px) + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .dyk-dock { --dyk-top: calc(var(--header-h, 76px) + 46px); }
}

/* ---------- Socials (original .float-btns) ---------- */
.dyk-dock .float-btns {
  position: fixed;
  top: auto;
  right: auto;
  bottom: calc(var(--dyk-soc-b) + var(--dyk-sab));
  left: calc(var(--dyk-soc-x) + var(--dyk-sal));
  z-index: var(--dyk-z);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.dyk-dock .float-btn {
  width: 58px;
  height: 58px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, .45);
  transition: transform var(--transition, .35s ease);
}
.dyk-dock .float-btn:hover, .dyk-dock .float-btn:focus { color: #fff; text-decoration: none; }
.dyk-dock .float-btn:hover { transform: scale(1.1); }
.dyk-dock .float-btn.float-sm { width: 46px; height: 46px; }

/* ---------- Unified button (original .a11y-btn spot and look) ---------- */
.dyk-dock .dyk-dock-btn {
  position: fixed;
  top: auto;
  left: auto;
  bottom: calc(var(--dyk-btn-b) + var(--dyk-sab));
  right: calc(var(--dyk-btn-x) + var(--dyk-sar));
  z-index: var(--dyk-z);
  width: var(--dyk-btn);
  height: var(--dyk-btn);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #14538a;
  color: #fff;
  display: grid;
  place-items: center;
  font: inherit;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, .45);
  transition: transform var(--transition, .35s ease), box-shadow var(--transition, .35s ease);
}
.dyk-dock .dyk-dock-btn:hover, .dyk-dock .dyk-dock-btn:focus { background: #14538a; color: #fff; }
.dyk-dock .dyk-dock-btn:hover { transform: scale(1.08); }
.dyk-dock .dyk-dock-btn[aria-expanded="true"] {
  box-shadow: 0 0 0 3px var(--gold-light, #e6c88a), 0 16px 36px -10px rgba(0, 0, 0, .45);
}

/* Cookie badge on the unified button: the same button opens the cookie preferences */
.dyk-dock .dyk-cookie-badge {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gold-light, #e6c88a), var(--gold, #c9a45c));
  color: var(--ink, #071522);
  box-shadow: 0 0 0 2px #14538a, 0 4px 10px -3px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.dyk-dock .dyk-cookie-badge svg { display: block; }
@media (max-width: 760px) {
  .dyk-dock .dyk-cookie-badge { width: 21px; height: 21px; top: -2px; left: -2px; }
  .dyk-dock .dyk-cookie-badge svg { width: 12px; height: 12px; }
}

/* ---------- Shared card geometry (panel + first-visit prompt) ---------- */
.dyk-dock .dyk-dock-panel,
.dyk-dock .dyk-cookie-prompt {
  position: fixed;
  top: auto;
  left: auto;
  bottom: var(--dyk-card-b);
  right: var(--dyk-card-r);
  z-index: var(--dyk-z);
  width: min(var(--dyk-card-w), calc(100% - var(--dyk-avoid) - var(--dyk-card-r)));
  margin: 0;
  direction: rtl;
  text-align: right;
  transform-origin: calc(100% - var(--dyk-btn) / 2) 100%;
}

/* ---------- Panel (original .a11y-panel look) ---------- */
.dyk-dock .dyk-dock-panel {
  max-height: min(760px, var(--dyk-card-max-h));
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--white, #fff);
  color: var(--text, #1b2b3a);
  border: 1px solid #dde8f1;
  border-radius: 18px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5);
  padding: 20px;
  display: none;
}
.dyk-dock .dyk-dock-panel.open { display: block; animation: dyk-pop .24s cubic-bezier(.22, .61, .36, 1); }
@keyframes dyk-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.dyk-dock .dyk-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 0 0 4px; }
.dyk-dock .dyk-dock-panel h2,
.dyk-dock .dyk-dock-panel h3 {
  font-family: var(--font-body, 'Heebo', sans-serif);
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink-2, #0c2436);
  letter-spacing: normal;
  text-transform: none;
  padding: 0;
}
.dyk-dock .dyk-dock-panel h2 { font-size: 1.15rem; margin: 0; }
.dyk-dock .dyk-dock-panel h3 { font-size: .98rem; margin: 0 0 2px; }
.dyk-dock .dyk-close {
  flex: none;
  width: 32px;
  height: 32px;
  min-height: 0;
  margin: -4px 0 0;
  margin-inline-end: -6px;
  padding: 0;
  border: 1px solid #d7e4ef;
  border-radius: 50%;
  background: #f4f9fd;
  color: var(--ink-2, #0c2436);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: none;
  transition: background var(--transition, .35s ease);
}
.dyk-dock .dyk-close:hover, .dyk-dock .dyk-close:focus { background: #e8f3fb; color: var(--ink-2, #0c2436); }
.dyk-dock .dyk-dock-panel .a11y-sub { font-size: .82rem; line-height: 1.5; color: var(--text-soft, #4d6274); margin: 0 0 16px; }

.dyk-dock .a11y-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; }
.dyk-dock .a11y-action {
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border: 1px solid #d7e4ef;
  background: #f4f9fd;
  border-radius: 12px;
  padding: 12px 8px;
  font-family: var(--font-body, 'Heebo', sans-serif);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: normal;
  color: var(--ink-2, #0c2436);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: none;
  transition: background var(--transition, .35s ease), border-color var(--transition, .35s ease);
}
.dyk-dock .a11y-action svg { flex: none; }
.dyk-dock .a11y-action:hover, .dyk-dock .a11y-action:focus { background: #e8f3fb; border-color: #d7e4ef; color: var(--ink-2, #0c2436); }
.dyk-dock .a11y-action[aria-pressed="true"] { background: var(--brand, #05669e); border-color: var(--brand, #05669e); color: #fff; }
.dyk-dock .a11y-reset { grid-column: 1 / -1; background: #fbeeee; border-color: #efd3d3; color: #8c3030; }
.dyk-dock .a11y-reset:hover, .dyk-dock .a11y-reset:focus { background: #f6dfdf; border-color: #efd3d3; color: #8c3030; }
.dyk-dock .dyk-dock-panel :focus-visible { outline: 3px solid var(--brand, #05669e); outline-offset: 2px; }

/* cookies section inside the panel */
.dyk-dock .dyk-cookies { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid #e4edf4; }
.dyk-dock .dyk-cookie-status { font-size: .8rem; line-height: 1.5; color: var(--text-soft, #4d6274); margin: 0 0 10px; }
.dyk-dock .dyk-cookie-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dyk-dock .a11y-action.dyk-choice { padding: 10px 8px; font-size: .84rem; }
.dyk-dock .dyk-cookie-link,
.dyk-dock .dyk-dock-panel .a11y-link {
  color: var(--brand, #05669e);
  font-size: .85rem;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dyk-dock .dyk-cookie-link { display: inline-block; margin-top: 10px; }
.dyk-dock .dyk-dock-panel .a11y-link { display: block; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #e4edf4; text-align: center; }
.dyk-dock .dyk-cookie-link:hover, .dyk-dock .dyk-dock-panel .a11y-link:hover { color: var(--ink-3, #123a58); }

/* ---------- First-visit cookie prompt (original .cookie-banner look, as a bubble on the unified button) ---------- */
.dyk-dock .dyk-cookie-prompt {
  background: rgba(7, 21, 34, .97);
  color: var(--text-inverse, #e8f2fa);
  border: 1px solid rgba(87, 196, 255, .3);
  border-radius: 18px;
  padding: 15px 16px 16px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .6);
}
.dyk-dock .dyk-cookie-prompt[hidden] { display: none; }
.dyk-dock .dyk-cookie-prompt.show { animation: dyk-rise .45s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes dyk-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.dyk-dock .dyk-cookie-prompt::after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: calc(var(--dyk-btn) / 2 - 8px);
  width: 14px;
  height: 14px;
  background: #081625;
  border-right: 1px solid rgba(87, 196, 255, .3);
  border-bottom: 1px solid rgba(87, 196, 255, .3);
  transform: rotate(45deg);
  border-bottom-right-radius: 3px;
}
.dyk-dock .dyk-cp-text { margin: 0 0 12px; font-size: .84rem; line-height: 1.6; color: #cfe3f2; }
.dyk-dock .dyk-cp-text a { white-space: nowrap; color: var(--brand-glow, #57c4ff); text-decoration: underline; text-underline-offset: 2px; }
.dyk-dock .dyk-cp-text a:hover { color: #9ad9ff; }
.dyk-dock .dyk-cp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dyk-dock .dyk-cp-actions .btn {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 9px 14px;
  border-radius: 999px;
  font-family: var(--font-body, 'Heebo', sans-serif);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* the gradient's light end is #1a7bb6 (not the original #2e9fd8): white text keeps 4.5:1 across the button */
.dyk-dock .dyk-cp-actions .btn-primary { background: linear-gradient(120deg, #1a7bb6, var(--brand, #05669e)); color: #fff; border: 0; }
.dyk-dock .dyk-cp-actions .btn-ghost { background: rgba(255, 255, 255, .07); color: var(--text-inverse, #e8f2fa); border: 1px solid rgba(255, 255, 255, .22); box-shadow: none; }
.dyk-dock .dyk-cp-actions .btn-ghost:hover, .dyk-dock .dyk-cp-actions .btn-ghost:focus { background: rgba(255, 255, 255, .15); color: #fff; }
/* tablets and desktops: a short bar beside the unified button, in the original banner's bottom band,
   because a card stacked above the button lands on the hero's gold CTA on common laptop screens */
@media (min-width: 761px) {
  .dyk-dock .dyk-cookie-prompt {
    bottom: calc(var(--dyk-btn-b) + var(--dyk-sab));
    right: calc(var(--dyk-btn-x) + var(--dyk-btn) + var(--dyk-gap) + var(--dyk-sar));
    width: min(860px, calc(100% - var(--dyk-avoid) - var(--dyk-btn-x) - var(--dyk-btn) - var(--dyk-gap) - var(--dyk-sar)));
    min-height: var(--dyk-btn);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
  }
  .dyk-dock .dyk-cp-text { flex: 1 1 auto; margin: 0; }
  .dyk-dock .dyk-cp-actions { flex: 0 0 auto; flex-wrap: nowrap; }
  .dyk-dock .dyk-cookie-prompt::after { bottom: calc(var(--dyk-btn) / 2 - 7px); right: -8px; transform: rotate(-45deg); }
}

/* ---------- Phones (original breakpoint) ---------- */
@media (max-width: 760px) {
  .dyk-dock {
    --dyk-soc-x: 14px;
    --dyk-soc-b: 14px;
    --dyk-col: 50px;
    --dyk-btn-x: 16px;
    --dyk-btn-b: 16px;
    --dyk-btn: 52px;
    --dyk-gap: 10px;
    --dyk-card-w: 320px;
  }
  .dyk-dock .float-btns { gap: 8px; }
  .dyk-dock .float-btn { width: 50px; height: 50px; }
  .dyk-dock .float-btn.float-sm { width: 42px; height: 42px; }
  /* original phone panel: full width between 12px gutters, painted over the socials while open */
  .dyk-dock .dyk-dock-panel { left: calc(12px + var(--dyk-sal)); right: calc(12px + var(--dyk-sar)); width: auto; padding: 16px; }
  .dyk-dock .a11y-actions, .dyk-dock .dyk-cookie-choices { gap: 8px; }
  /* original phone banner footprint: full width between 12px gutters at the bottom, over the socials and the button until a choice is made */
  .dyk-dock .dyk-cookie-prompt { left: calc(12px + var(--dyk-sal)); right: calc(12px + var(--dyk-sar)); bottom: calc(12px + var(--dyk-sab)); width: auto; padding: 13px 13px 14px; }
  .dyk-dock .dyk-cookie-prompt::after { display: none; }
}
/* portrait phones: the original banner hid the socials and the button under it; the shorter prompt would leave WhatsApp cut in half above it */
@media (max-width: 760px) and (min-height: 481px) {
  .dyk-dock:has(> .dyk-cookie-prompt.show) :is(.float-btns, .dyk-dock-btn) { opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
}
/* shorter screens (laptops at 768px, small phones): same look, tighter spacing, so less of the panel scrolls */
@media (max-height: 820px), (max-width: 760px) and (max-height: 920px) {
  .dyk-dock .dyk-dock-panel { padding: 16px; }
  .dyk-dock .dyk-cookies-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 10px; margin-bottom: 8px; }
  .dyk-dock .dyk-cookies-head .dyk-cookie-status { margin: 0; }
  .dyk-dock .dyk-dock-panel .a11y-sub { margin-bottom: 10px; }
  .dyk-dock .dyk-close { width: 28px; height: 28px; }
  .dyk-dock .a11y-actions, .dyk-dock .dyk-cookie-choices { gap: 8px; }
  .dyk-dock .a11y-action { padding: 8px 8px; gap: 4px; }
  .dyk-dock .a11y-action.dyk-choice { padding: 8px; }
  .dyk-dock .dyk-cookies { margin-top: 12px; padding-top: 12px; }
  .dyk-dock .dyk-cookie-status { margin-bottom: 8px; }
  .dyk-dock .dyk-cookie-link { margin-top: 6px; }
  .dyk-dock .dyk-dock-panel .a11y-link { margin-top: 8px; padding-top: 8px; }
}
@media (max-width: 760px) and (max-height: 920px) {
  .dyk-dock .dyk-dock-panel { padding: 14px; }
}
/* very short screens (phones in landscape): the prompt scrolls instead of reaching under the header */
@media (max-height: 480px) {
  .dyk-dock .dyk-cookie-prompt { max-height: var(--dyk-card-max-h); overflow: auto; overscroll-behavior: contain; }
  .dyk-dock .dyk-cookie-prompt::after { display: none; }
}
@media (max-width: 360px) {
  .dyk-dock .dyk-cp-actions .btn { padding: 8px 10px; font-size: .84rem; }
  .dyk-dock .a11y-action { font-size: .8rem; }
}

/* ---------- Focus rings that read on any page colour behind the floating buttons ----------
   white ring + navy ring (two-tone): one of the two always keeps 3:1 against what is behind */
.dyk-dock .float-btn:focus-visible,
.dyk-dock .dyk-dock-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  border-radius: 50%;
  box-shadow: 0 0 0 8px var(--ink, #071522), 0 16px 36px -10px rgba(0, 0, 0, .45);
}
/* the cookie prompt is dark: the original glow ring */
.dyk-dock .dyk-cookie-prompt :focus-visible { outline: 3px solid var(--brand-glow, #57c4ff); outline-offset: 2px; }

/* "skip to the accessibility menu" link next to the skip link (dock.js adds it) */
.skip-link.dyk-skip-a11y { right: auto; left: 16px; }

/* ---------- Text size: the site sizes text in rem, so the root grows with body.a11y-font-1/2 ---------- */
html:has(> body.a11y-font-1) { font-size: 112.5%; }
html:has(> body.a11y-font-2) { font-size: 125%; }

/* ---------- Invert colours: photos shown as background images turn back, like <img> (style.css) ---------- */
body.a11y-invert .e-gallery-image { filter: invert(1) hue-rotate(180deg); }

/* ---------- Never above the gallery lightbox, even if a wrapper traps its z-index ---------- */
body:has(#lightbox.open) .dyk-dock { visibility: hidden; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .dyk-dock .dyk-dock-panel.open, .dyk-dock .dyk-cookie-prompt.show { animation: none; }
  .dyk-dock .float-whatsapp::after { animation: none; display: none; }
}

/* ---------- Colour filters on <html>, not <body>: a filter on body makes it the containing block of every
   position:fixed descendant, so the dock, header and lightbox would jump to the end of the page. ---------- */
@supports selector(:has(*)) {
  html body.a11y-grayscale, html body.a11y-contrast, html body.a11y-invert { filter: none; }
  html:has(> body.a11y-grayscale) { --dyk-f-gray: grayscale(1); }
  html:has(> body.a11y-contrast) { --dyk-f-contrast: contrast(1.25); }
  html:has(> body.a11y-invert) { --dyk-f-invert: invert(1) hue-rotate(180deg); }
  html:has(> body.a11y-grayscale), html:has(> body.a11y-contrast), html:has(> body.a11y-invert) {
    filter: var(--dyk-f-gray, ) var(--dyk-f-contrast, ) var(--dyk-f-invert, );
  }
}

@media print {
  .dyk-dock { display: none !important; }
}