/* —— Privacy Popup Modal —— */
.snt-priv-popup__overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: rgba(0, 0, 0, 0.58);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
  animation: snt-overlay-in 0.18s ease both;
}

.snt-priv-popup__dialog {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 24px 64px rgba(0, 0, 0, 0.14);
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.snt-priv-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 13px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  gap: 8px;
}

.snt-priv-popup__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
  min-width: 0;
}

.snt-priv-popup__close {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: #666;
  padding: 3px 7px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}

.snt-priv-popup__close:hover {
  color: #111;
  background: rgba(0, 0, 0, 0.07);
}

.snt-priv-popup__body {
  padding: 18px 20px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 14px;
  line-height: 1.65;
  color: #333;
  white-space: pre-wrap !important;
  word-break: break-word;
  flex: 1 1 auto;
  min-height: 0;
  /* Hotfix 3 — Privacy popup TRUE LTR/RTL on the frontend.
     `unicode-bidi: plaintext` makes the body a per-paragraph BIDI
     island: every line of the pre-wrapped privacy text resolves
     its own direction from its first strong character, so English
     content always flows left-to-right (numbered lists "1.", "2."
     starting from the left) and Hebrew content always flows
     right-to-left — regardless of any inherited `direction:` from
     the host page or admin shell.  Belt + braces with the inline
     `direction` and physical `text-align` written by JS. */
  direction: inherit;
  text-align: start;
  unicode-bidi: plaintext !important;
}

/* ── HOTFIX 2 — TRUE LTR/RTL inheritance for the privacy popup.
   Selectors below DELIBERATELY combine the language scope class
   (`.snt-priv-popup--ltr` / `--rtl` set on overlay AND dialog by
   `sntOpenPrivacyPopup()`) with the `[dir]` attribute, which
   yields the highest possible specificity inside this stylesheet
   without resorting to `*` descendants.  Every direction-relevant
   property is locked with `!important` so that NO host page
   stylesheet (RTL admin chrome, theme `body.rtl` rules, etc.)
   can flip the popup back to the wrong axis.

   Why both `direction` AND physical `text-align`:
     • `direction` controls the BIDI base direction — drives
       text flow, list-item bullet side, ordered-list number side,
       paragraph natural alignment, and the meaning of `start` /
       `end`.
     • Physical `text-align: left` (LTR) / `right` (RTL) is the
       extra belt — even if some ancestor leaks `direction: rtl`
       we still hard-pin the visual alignment.

   Why scoped to the popup classes (not `*`):
     • We DON'T want to flip Hebrew text inside an English popup
       (mixed-content scenarios).  `direction: ltr` on the body
       does not change the rendering of strong-RTL characters —
       it only sets the base direction.  Each line's BIDI is
       computed normally by the browser. */

/* LTR popup — every element inside the dialog is anchored LTR */
.snt-priv-popup__overlay.snt-priv-popup--ltr,
.snt-priv-popup__overlay[dir="ltr"],
.snt-priv-popup__dialog.snt-priv-popup--ltr,
.snt-priv-popup__dialog[dir="ltr"],
.snt-priv-popup__dialog.snt-priv-popup--ltr .snt-priv-popup__header,
.snt-priv-popup__dialog.snt-priv-popup--ltr .snt-priv-popup__body,
.snt-priv-popup__dialog.snt-priv-popup--ltr .snt-priv-popup__title,
.snt-priv-popup__dialog.snt-priv-popup--ltr .snt-priv-popup__close,
.snt-priv-popup__dialog[dir="ltr"] .snt-priv-popup__header,
.snt-priv-popup__dialog[dir="ltr"] .snt-priv-popup__body,
.snt-priv-popup__dialog[dir="ltr"] .snt-priv-popup__title,
.snt-priv-popup__dialog[dir="ltr"] .snt-priv-popup__close {
  direction: ltr !important;
  unicode-bidi: isolate;
}
.snt-priv-popup__dialog.snt-priv-popup--ltr .snt-priv-popup__title,
.snt-priv-popup__dialog[dir="ltr"]            .snt-priv-popup__title,
.snt-priv-popup__dialog.snt-priv-popup--ltr .snt-priv-popup__body,
.snt-priv-popup__dialog[dir="ltr"]            .snt-priv-popup__body {
  text-align: left !important;
}

/* RTL popup — symmetric anchor */
.snt-priv-popup__overlay.snt-priv-popup--rtl,
.snt-priv-popup__overlay[dir="rtl"],
.snt-priv-popup__dialog.snt-priv-popup--rtl,
.snt-priv-popup__dialog[dir="rtl"],
.snt-priv-popup__dialog.snt-priv-popup--rtl .snt-priv-popup__header,
.snt-priv-popup__dialog.snt-priv-popup--rtl .snt-priv-popup__body,
.snt-priv-popup__dialog.snt-priv-popup--rtl .snt-priv-popup__title,
.snt-priv-popup__dialog.snt-priv-popup--rtl .snt-priv-popup__close,
.snt-priv-popup__dialog[dir="rtl"] .snt-priv-popup__header,
.snt-priv-popup__dialog[dir="rtl"] .snt-priv-popup__body,
.snt-priv-popup__dialog[dir="rtl"] .snt-priv-popup__title,
.snt-priv-popup__dialog[dir="rtl"] .snt-priv-popup__close {
  direction: rtl !important;
  unicode-bidi: isolate;
}
.snt-priv-popup__dialog.snt-priv-popup--rtl .snt-priv-popup__title,
.snt-priv-popup__dialog[dir="rtl"]            .snt-priv-popup__title,
.snt-priv-popup__dialog.snt-priv-popup--rtl .snt-priv-popup__body,
.snt-priv-popup__dialog[dir="rtl"]            .snt-priv-popup__body {
  text-align: right !important;
}

/* Pro `popupTextAlign` user preference (left / right / center /
   justify) is written inline by JS with `!important`, so it
   wins over the physical defaults above. */

#snt-root.snt-root {
  position: relative;
  z-index: 2147483000;
  pointer-events: none;
  box-sizing: border-box;
}

#snt-root.snt-root * {
  box-sizing: border-box;
}

#snt-root .snt-priv,
#snt-root .snt-ann {
  pointer-events: auto;
}

/* —— Privacy (matches stable 1.22 shadow layout / timing / button styling) —— */
#snt-root .snt-priv {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
}

#snt-root .snt-priv__box {
  position: fixed;
  left: 50%;
  bottom: var(--snt-priv-bottom-desk, 20px);
  transform: translate(-50%, 140%);
  opacity: 0;
  pointer-events: none;
  z-index: 2147483646;
  line-height: 1.4;
  color: #111;
  background: rgba(255, 255, 255, 0.75);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.07);
  width: fit-content;
  max-width: min(calc(100% - 24px), 820px);
  text-align: center;
  transition: transform 0.35s ease, opacity 0.35s ease;
  letter-spacing: normal;
  word-spacing: normal;
}

#snt-root .snt-priv__box--show {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

#snt-root .snt-priv__desktop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 100%;
}

#snt-root .snt-priv__desktop .snt-priv__text {
  display: inline;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  flex: 1 1 auto;
  min-width: 0;
}

#snt-root .snt-priv__mobile {
  display: none;
}

#snt-root .snt-priv__text {
  color: #111;
  text-align: center;
  white-space: normal;
  margin: 0;
}

#snt-root .snt-priv__plink {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
}

#snt-root .snt-priv__pbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.6);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  color: #111;
  text-decoration: none;
  font-family: inherit;
}

@media (max-width: 480px) {
  #snt-root .snt-priv__box {
    bottom: var(--snt-priv-bottom-mob, 20px);
    width: auto;
    max-width: calc(100% - 24px);
    min-width: min(280px, calc(100% - 24px));
  }

  #snt-root .snt-priv__box--show {
    transform: translate(-50%, 0);
  }

  #snt-root .snt-priv__desktop {
    display: none;
  }

  #snt-root .snt-priv__mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    text-align: center;
  }

  #snt-root .snt-priv__mobile .snt-priv__text {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  #snt-root .snt-priv__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
}

/* —— Announcement —— */
#snt-root .snt-ann {
  --snt-gap: 8px;
  --snt-di: 12px;
  --snt-mi: 12px;
  --snt-maxw: 1100px;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  min-width: 240px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  padding: 12px 16px;
  padding-inline-end: 28px;
  z-index: 99998;
}

#snt-root .snt-ann--visible {
  display: flex;
}

#snt-root .snt-ann--overlay.snt-ann--top,
#snt-root .snt-ann--overlay.snt-ann--bottom {
  position: fixed;
  left: 50%;
}

#snt-root .snt-ann--overlay.snt-ann--width-full {
  width: calc(100% - max(24px, calc(var(--snt-di) * 2)));
}

#snt-root .snt-ann--overlay.snt-ann--width-max {
  width: min(calc(100% - max(24px, calc(var(--snt-di) * 2))), var(--snt-maxw));
}

#snt-root .snt-ann--overlay.snt-ann--width-auto {
  width: max-content;
  max-width: calc(100% - max(24px, calc(var(--snt-di) * 2)));
  padding-inline-start: 22px;
  padding-inline-end: 34px;
}

/* Desktop auto-width: prevent inner flex wrapping so bar expands to content width */
@media (min-width: 481px) {
  #snt-root .snt-ann--overlay.snt-ann--width-auto .snt-ann__flow,
  #snt-root .snt-ann--overlay.snt-ann--width-auto .snt-ann__copy {
    flex-wrap: nowrap;
  }
}

#snt-root .snt-ann--push {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  left: auto;
  right: auto;
  transform: none; /* JS overrides during animation */
}

/* Push width-mode variants */
#snt-root .snt-ann--push.snt-ann--width-max {
  max-width: var(--snt-maxw, 1100px);
  margin-inline: auto;
  border-radius: 0 0 12px 12px;
}
#snt-root .snt-ann--push.snt-ann--width-auto {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  border-radius: 0 0 12px 12px;
  padding-inline-start: 22px;
  padding-inline-end: 34px;
}

/* Inline mode – normal flow, no fixed/absolute positioning */
#snt-root .snt-ann--inline {
  position: relative;
  margin-inline: auto;
  left: auto;
  right: auto;
}
#snt-root .snt-ann--inline.snt-ann--width-full {
  width: calc(100% - max(24px, calc(var(--snt-di) * 2)));
}
#snt-root .snt-ann--inline.snt-ann--width-max {
  width: min(calc(100% - max(24px, calc(var(--snt-di) * 2))), var(--snt-maxw));
}
#snt-root .snt-ann--inline.snt-ann--width-auto {
  width: max-content;
  max-width: calc(100% - max(24px, calc(var(--snt-di) * 2)));
  padding-inline-start: 22px;
  padding-inline-end: 34px;
}
@media (min-width: 481px) {
  #snt-root .snt-ann--inline.snt-ann--width-auto .snt-ann__flow,
  #snt-root .snt-ann--inline.snt-ann--width-auto .snt-ann__copy {
    flex-wrap: nowrap;
  }
}

/* ── Push & Inline: minimal strip — no card / box appearance ── *
 * Overlay keeps the frosted-glass card; push/inline render as a
 * clean transparent strip so the bar feels part of the page.       */
#snt-root .snt-ann--push,
#snt-root .snt-ann--inline {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0;
}

#snt-root .snt-dismiss {
  appearance: none;
  margin: 0;
  padding: 1px 3px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: #111;
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  inset-inline-start: auto;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

#snt-root .snt-dismiss:focus-visible {
  outline: 2px solid #2271b1;
  outline-offset: 1px;
}

#snt-root .snt-ann__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--snt-gap, 8px);
  min-width: 0;
  max-width: 100%;
}

#snt-root .snt-ann__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: max(0px, calc(var(--snt-gap, 8px) - 2px));
  min-width: 0;
  max-width: 100%;
}

#snt-root .snt-ann__emoji {
  font-size: 16px;
  line-height: 1;
  flex: 0 0 auto;
}

#snt-root .snt-ann__msg {
  color: #111;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#snt-root .snt-ann__link {
  color: #111 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  flex: 0 0 auto;
}

#snt-root .snt-ann__btn {
  /* Contextual effect color (System mode default = system indigo).
     CTA-flavored buttons (e.g. WhatsApp) override this below so the
     focus ring / pulse outline tracks the button's brand color instead
     of clashing with it. Stored as raw "r,g,b" so it composes cleanly
     into rgba() for soft, premium outlines. */
  --snt-fx-ctx: 99, 102, 241;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.65);
  color: #111;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  line-height: 1;
  /* Smooth handoff between System ↔ CTA mode and on focus changes. */
  transition: outline-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* CTA mode (WhatsApp / wa.me): switch the contextual color to brand green
   so any focus ring derived from --snt-fx-ctx blends with the button
   instead of clashing with it. Pulse / Glow effect colors continue to be
   driven by --snt-btn-pca / --snt-btn-gca (user-overridable). */
#snt-root .snt-ann__btn--whatsapp {
  --snt-fx-ctx: 37, 211, 102;
  background: #fff;
  color: #1a1a1a !important;
  border: 1.5px solid #25D366 !important;
  border-radius: 50px;
  padding: 6px 16px;
  gap: 6px;
}

/* Focus ring — soft, premium, contextual. Uses the same --snt-fx-ctx
   that CTA mode overrides, so System-mode buttons get an indigo halo and
   CTA buttons get a softened green halo (no harsh blue/green clash).
   Alpha intentionally low (0.30) for subtlety; thicker outer glow at 0.10
   adds depth without competing with the button's own color. */
#snt-root .snt-ann__btn:focus-visible {
  outline: 2px solid rgba(var(--snt-fx-ctx), 0.30);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--snt-fx-ctx), 0.10);
}
#snt-root .snt-ann__btn--whatsapp:hover {
  background: #f0fdf4;
  border-color: #1da851 !important;
}

/* WhatsApp Pulse — soft breathing glow; color overridden by JS via --snt-btn-pca/pcb for custom presets */
@keyframes snt-wa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--snt-btn-pca, rgba(37, 211, 102, 0.45)); }
  50%       { box-shadow: 0 0 0 7px var(--snt-btn-pcb, rgba(37, 211, 102, 0)); }
}
#snt-root .snt-ann__btn--wa-pulse {
  animation: snt-wa-pulse 2.8s ease-in-out infinite;
}

/* Design Style: Pulse — symmetrical breathing glow (colors driven by JS custom properties) */
@keyframes snt-bar-pulse {
  0%, 100% { box-shadow: 0 0 18px var(--snt-pc1, rgba(99,102,241,0.45)), 0 0 0 1px var(--snt-pc3, rgba(99,102,241,0.12)); }
  50%       { box-shadow: 0 0 38px var(--snt-pc2, rgba(99,102,241,0.80)), 0 0 0 3px var(--snt-pc3, rgba(99,102,241,0.18)); }
}
#snt-root .snt-ann--style-pulse {
  animation: snt-bar-pulse var(--snt-pd, 2.4s) ease-in-out infinite;
}

/* Indicator line — shown only for Glow effect (Pulse uses its own breathing glow animation) */
#snt-root .snt-ann--effect-on::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--snt-effect-color, #25d366);
  border-radius: 0 0 4px 4px;
  opacity: 0.85;
  pointer-events: none;
}

/* WhatsApp Glow — static shadow; color overridden by JS via --snt-btn-gca for custom presets */
#snt-root .snt-ann__btn--wa-glow {
  box-shadow: 0 0 8px 2px var(--snt-btn-gca, rgba(37, 211, 102, 0.40));
}
#snt-root .snt-ann__btn--wa-glow:hover {
  box-shadow: 0 0 14px 4px var(--snt-btn-gca, rgba(37, 211, 102, 0.60));
}

/* Actions group: always an inline-flex container.
   On desktop it participates in the flow as a natural single flex item —
   the LTR gap/margin rules on link and btn still apply inside it.
   On mobile compact the JS in show() sets margin-inline-start and gap
   directly as inline styles, ensuring the spacing works in all
   directions (LTR and RTL) regardless of CSS cascade. */
#snt-root .snt-ann__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--snt-gap, 8px);
  flex: 0 0 auto;
}

#snt-root .snt-ann__flow[dir="ltr"],
#snt-root .snt-ann__copy,
#snt-root .snt-ann__msg,
#snt-root .snt-ann__link,
#snt-root .snt-ann__btn {
  unicode-bidi: isolate;
}

#snt-root .snt-ann__flow[dir="ltr"] .snt-ann__btn {
  margin-inline-start: 6px !important;
}

#snt-root .snt-ann__flow[dir="ltr"] {
  gap: 10px;
}

#snt-root .snt-ann__flow[dir="ltr"] .snt-ann__copy {
  margin-inline-end: 4px;
}

#snt-root .snt-ann__flow[dir="ltr"] .snt-ann__link {
  margin-inline-start: 8px !important;
}

#snt-root .snt-ann__flow[dir="ltr"] .snt-ann__btn {
  margin-inline-start: 10px !important;
}

@media (max-width: 480px) {
  #snt-root .snt-ann--overlay.snt-ann--width-full {
    width: calc(100% - max(24px, calc(var(--snt-mi) * 2))) !important;
    left: var(--snt-mi);
    right: var(--snt-mi);
    transform: none;
  }

  #snt-root .snt-ann--overlay.snt-ann--width-max {
    width: min(
        calc(100% - max(24px, calc(var(--snt-mi) * 2))),
        var(--snt-maxw)
      ) !important;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  #snt-root .snt-ann--overlay.snt-ann--width-auto {
    width: fit-content !important;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: calc(100% - max(0px, calc(var(--snt-mi) * 2))) !important;
  }

  #snt-root .snt-ann {
    min-width: 0;
    padding: 10px 12px;
    padding-inline-end: 24px;
    justify-content: center;
  }

  #snt-root .snt-ann--overlay.snt-ann--top {
    text-align: center;
  }

  /* Push mode on mobile: always full width, no border-radius */
  #snt-root .snt-ann--push {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none; /* JS still handles slide/fade */
  }

  /* Inline mode on mobile: centered, max usable width */
  #snt-root .snt-ann--inline {
    width: calc(100% - max(24px, calc(var(--snt-mi) * 2))) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none;
  }

  #snt-root .snt-ann__btn {
    padding: 5px 10px;
    flex: 0 0 auto;
    margin-inline-start: 10px;
  }

  #snt-root .snt-ann--mobile-compact .snt-ann__flow {
    flex-wrap: nowrap;
    gap: 0;
  }

  /* Compact message block: single nowrap row, 4 px between emoji and text.
     padding-inline-end creates the guaranteed gap between the message text
     and the start of the actions block.  Container padding is always
     honoured — unlike a flex-item margin-inline-end on .snt-ann__msg which
     can be dropped by mobile browser reflow optimisations. */
  #snt-root .snt-ann--mobile-compact .snt-ann__copy {
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    padding-inline-end: 22px;
  }

  #snt-root .snt-ann--mobile-compact .snt-ann__msg {
    white-space: nowrap;
  }

  #snt-root .snt-ann--mobile-compact {
    min-width: 0;
    max-width: calc(100% - max(0px, calc(var(--snt-mi) * 2))) !important;
  }

  /* Compact: neutralise the LTR desktop copy end-margin (4 px no-important)
     so the JS-controlled margin-inline-start on the actions group is the
     sole gap between the message block and the actions block.
     The JS in show() sets that margin, gap, and inner link/btn margins as
     inline styles after compact detection, which overrides all CSS cascade. */
  #snt-root .snt-ann.snt-ann--mobile-compact .snt-ann__flow .snt-ann__copy {
    margin-inline-end: 0 !important;
  }

  /* Non-compact overlay auto-width: override the base fit-content rule so
     the bar expands to the full usable mobile width. Without this, the
     browser shrinks the bar to its min-content, compressing medium text. */
  #snt-root .snt-ann--overlay.snt-ann--width-auto:not(.snt-ann--mobile-compact) {
    width: calc(100% - max(24px, calc(var(--snt-mi) * 2))) !important;
  }

  /* Non-compact: wrapping, centering, and breathing room for medium/long text. */
  #snt-root .snt-ann:not(.snt-ann--mobile-compact) {
    max-width: calc(100% - max(24px, calc(var(--snt-mi) * 2))) !important;
    padding-inline: 8px !important;
    padding-inline-end: 22px !important;
    margin-inline: auto;
    text-align: center;
  }

  /* Flow wraps and centers all rows, including orphaned link/button rows. */
  #snt-root .snt-ann:not(.snt-ann--mobile-compact) .snt-ann__flow {
    flex-wrap: wrap;
    justify-content: center;
    gap: max(6px, var(--snt-gap, 8px)) !important;
  }

  /* Copy does NOT force full width — letting medium-length text stay on the
     same row as a short link/button avoids an unnecessary extra line break.
     For genuinely long text the copy's natural max-content still fills the
     bar, so wrapping still happens at the right point. */
  #snt-root .snt-ann:not(.snt-ann--mobile-compact) .snt-ann__copy {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100% !important;
    gap: max(4px, calc(var(--snt-gap, 8px) - 2px)) !important;
  }

  #snt-root .snt-ann:not(.snt-ann--mobile-compact) .snt-ann__msg {
    max-width: 100% !important;
    white-space: normal;
    word-break: break-word;
    text-align: center;
  }

  /* Link and button must not shrink on a wrapped row. */
  #snt-root .snt-ann:not(.snt-ann--mobile-compact) .snt-ann__link,
  #snt-root .snt-ann:not(.snt-ann--mobile-compact) .snt-ann__btn {
    flex: 0 0 auto;
  }
  /* Lead-active bar on mobile: use adequate screen width, keep balanced margins */
  #snt-root .snt-ann--lead-active:not(.snt-ann--push) {
    width: calc(100vw - 24px) !important;
    max-width: 480px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-inline: 0 !important;
    padding: 12px 10px !important;
    padding-inline-end: 26px !important;
  }
}

/* ── Design Style Presets — secondary CSS reinforcement (primary = inline !important via JS) ── */
#snt-root .snt-ann.snt-ann--overlay.snt-preset-gradient {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 60%, #a78bfa 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: 0 4px 24px rgba(99,102,241,0.55), 0 1px 4px rgba(0,0,0,0.12) !important;
  color: #ffffff !important;
}

#snt-root .snt-ann.snt-ann--overlay.snt-preset-glow {
  background: #0f172a !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(59,130,246,0.45) !important;
  box-shadow: 0 0 0 1px rgba(59,130,246,0.2), 0 0 24px rgba(59,130,246,0.75), 0 0 60px rgba(59,130,246,0.35) !important;
  color: #e0f2fe !important;
}

#snt-root .snt-ann.snt-ann--overlay.snt-preset-float {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.28), 0 6px 20px rgba(0,0,0,0.14) !important;
  border-radius: 20px !important;
  color: #1e293b !important;
}

/* ── V3 Lead Form Builder ────────────────────────────────────────────── */

/* When lead form is active, force the bar's inner flow into column/stacked mode */
#snt-root .snt-ann--lead-active { align-items: stretch; }
#snt-root .snt-ann--lead-active .snt-ann__flow {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
}
#snt-root .snt-ann--lead-active .snt-ann__copy {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
}

/* Lead mode: title row keeps icon + text on same horizontal line, subtitle below */
#snt-root .snt-ann__title-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  max-width: 100%;
}
/* In lead mode the close button sits at the block-end of the copy row */
#snt-root .snt-ann--lead-active .snt-dismiss {
  top: 2px;
  inset-inline-end: 4px;
}

/* Secondary message (below main message) */
#snt-root .snt-lead-secondary {
  display: block;
  width: 100%;
  font-size: 12px;
  margin-top: 2px;
  line-height: 1.4;
  text-align: center;
}

/* ── Form wrapper: stacked column ────────────────────────────────────── */
#snt-root .snt-lead-form {
  display: flex;
  flex-direction: column;
  align-items: center;    /* default: centered; overridden by alignment classes */
  gap: 6px;
  width: 100%;
  margin-top: 6px;
  box-sizing: border-box;
}

/* Form alignment — controls input text direction/alignment ONLY.
   Grid container direction is intentionally NOT set here; it comes exclusively
   from the bar [dir="rtl"] rule below so field positions never jump when
   the admin switches between Left / Center / Right / Auto. */
#snt-root .snt-lead-fields.snt-fields-ltr .snt-lead-input { text-align: left;   direction: ltr; }
#snt-root .snt-lead-fields.snt-fields-rtl .snt-lead-input { text-align: right;  direction: rtl; }
#snt-root .snt-lead-fields.snt-fields-center .snt-lead-input { text-align: center; }
/* Center: phone + email also centered */
#snt-root .snt-lead-fields.snt-fields-center .snt-lead-input[data-field="phone"],
#snt-root .snt-lead-fields.snt-fields-center .snt-lead-input[data-field="email"] { text-align: center; }
/* Email: direction defaults to LTR so typed characters never reverse (Unicode Bidi handles
   Latin text correctly even when the input itself is direction:rtl).
   The RTL override rules below re-apply direction:rtl when needed so the caret and
   placeholder both start from the right in RTL mode. */
#snt-root .snt-lead-fields .snt-lead-input[data-field="email"] { direction: ltr; text-align: left; }

/* These children always stretch to full width regardless of form alignment */
#snt-root .snt-lead-form .snt-lead-fields,
#snt-root .snt-lead-form .snt-lead-success { align-self: stretch; width: 100%; }
/* Consent as a standalone direct child of the form column: full-width so alignment classes work */
#snt-root .snt-lead-form > .snt-lead-consent { align-self: stretch; width: 100%; }

/* ── Field grid ──────────────────────────────────────────────────────── */
#snt-root .snt-lead-fields {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
  width: 100%;
}

/* Width presets (applied to each .snt-lead-input) */
#snt-root .snt-lead-input.snt-lf-w25  { grid-column: span 3; }
#snt-root .snt-lead-input.snt-lf-w33  { grid-column: span 4; }
#snt-root .snt-lead-input.snt-lf-w50  { grid-column: span 6; }
#snt-root .snt-lead-input.snt-lf-w100 { grid-column: span 12; }
/* Default: span 6 if no width class set */
#snt-root .snt-lead-input:not(.snt-lf-w25):not(.snt-lf-w33):not(.snt-lf-w50):not(.snt-lf-w100) { grid-column: span 6; }

/* ── Input / textarea fields ─────────────────────────────────────────── */
#snt-root .snt-lead-input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(128,128,128,0.35);
  border-radius: 6px;
  background: rgba(255,255,255,0.15);
  color: rgb(17,17,17);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
  line-height: 34px;
}
#snt-root .snt-lead-input::placeholder { color: rgb(153,153,153); opacity: 0.7; }
#snt-root .snt-lead-input:focus { border-color: rgba(128,128,128,0.7); }

/* Notes textarea override */
#snt-root textarea.snt-lead-input {
  height: auto;
  min-height: 58px;
  resize: vertical;
  line-height: 1.4;
  padding: 8px 10px;
}

/* ── Submit button ───────────────────────────────────────────────────── */
#snt-root .snt-lead-btn {
  flex-shrink: 0;
  padding: 0 20px;
  height: 34px;
  line-height: 34px;
  border: none;
  border-radius: 6px;
  background: #ffffff;
  color: rgb(17,17,17);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, opacity .15s, box-shadow .15s;
  box-sizing: border-box;
}
#snt-root .snt-lead-btn:hover:not(:disabled) { opacity: 0.85; }
#snt-root .snt-lead-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Consent / Privacy row ───────────────────────────────────────────── */
#snt-root .snt-lead-consent {
  display: inline-flex;      /* shrink-wraps to content; align-self:stretch overrides when needed */
  align-items: center;       /* vertically centre checkbox + text */
  gap: 6px;
  font-size: 11px;
  color: rgba(17,17,17,0.75);
  cursor: pointer;
  line-height: 1.4;
  margin-top: 0;
  padding: 0;
  text-align: start;
}

/* Consent horizontal alignment */
#snt-root .snt-lead-consent.snt-consent-left    { justify-content: flex-start; text-align: left; }
#snt-root .snt-lead-consent.snt-consent-center  { justify-content: center;     text-align: center; }
#snt-root .snt-lead-consent.snt-consent-right   { justify-content: flex-end;   text-align: right; }
#snt-root .snt-lead-consent.snt-consent-justify { justify-content: space-between; }

/* When an explicit alignment class is set, the label must NOT grow (flex: 0 1 auto)
   so there is free space for justify-content to distribute the checkbox+text unit.
   "justify" intentionally keeps flex: 1 1 auto — the label fills the row for full-width stretch. */
#snt-root .snt-lead-consent.snt-consent-left .snt-lead-consent-label,
#snt-root .snt-lead-consent.snt-consent-center .snt-lead-consent-label,
#snt-root .snt-lead-consent.snt-consent-right .snt-lead-consent-label { flex: 0 1 auto; }

/* Checkbox: no extra margin so it sits exactly in the flex centre-line */
#snt-root .snt-lead-consent-chk  { flex-shrink: 0; margin: 0; cursor: pointer; accent-color: currentColor; }
#snt-root .snt-lead-consent-label { flex: 1 1 auto; }
#snt-root .snt-lead-consent-link  { color: rgba(70,70,70,0.9); text-decoration: underline; }
#snt-root .snt-lead-consent-link:hover { opacity: 0.8; }

/* ── Consent when placed INSIDE the fields grid (above-last-row) ── */
#snt-root .snt-lead-consent.snt-lead-consent--in-grid {
  grid-column: span 12;
  width: 100%;
  align-self: stretch;
}

/* ── Inline With Submit row — consent + button share one flex row ─────── */
#snt-root .snt-lead-inline-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  align-self: stretch; /* fill the form's flex column edge-to-edge on all screen sizes */
  box-sizing: border-box;
}
/* DOM order: [consent][btnRow]. direction:rtl (inherited from bar) flips to Privacy-right, Button-left. */
/* Consent inside inline row: grows to fill remaining space */
#snt-root .snt-lead-inline-row .snt-lead-consent {
  flex: 1 1 auto;
  width: auto;        /* override any width:100% from outer rules */
  align-self: center;
  min-width: 0;       /* prevent overflow on narrow screens */
}
/* Button row inside inline row: does NOT take full width */
#snt-root .snt-lead-inline-row .snt-lead-btn-row {
  flex: 0 0 auto;
  width: auto;
  align-self: stretch;
}
/* Wrap only on genuinely tiny screens (≤280px) — modern phones (375px+) stay inline */
@media (max-width: 280px) {
  #snt-root .snt-lead-inline-row { flex-wrap: wrap; }
  #snt-root .snt-lead-inline-row .snt-lead-consent { flex: 1 1 100%; }
  #snt-root .snt-lead-inline-row .snt-lead-btn-row  { flex: 1 1 100%; width: 100%; }
}

/* ── Send button row — independent from Privacy row ────────────────────── */
#snt-root .snt-lead-btn-row {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* AUTO: right in LTR (flex-end=right), left in RTL (flex-end=left due to direction:rtl) */
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
}
/* Button row alignment — set by its own class, NOT by form/field alignment */
/* direction:ltr on left/right ensures visual position is independent of bar RTL/LTR */
#snt-root .snt-lead-btn-row.snt-btn-align-left   { justify-content: flex-start; direction: ltr; }
#snt-root .snt-lead-btn-row.snt-btn-align-center  { justify-content: center; }
#snt-root .snt-lead-btn-row.snt-btn-align-right   { justify-content: flex-end;   direction: ltr; }
#snt-root .snt-lead-btn-row.snt-btn-align-full   .snt-lead-btn { width: 100%; align-self: stretch; }
/* Button width presets */
#snt-root .snt-lead-btn.snt-btn-w25  { width: 25%;     min-width: 0; padding-left: 0; padding-right: 0; text-align: center; }
#snt-root .snt-lead-btn.snt-btn-w33  { width: 33.333%; min-width: 0; padding-left: 0; padding-right: 0; text-align: center; }
#snt-root .snt-lead-btn.snt-btn-w50  { width: 50%;     min-width: 0; padding-left: 0; padding-right: 0; text-align: center; }
#snt-root .snt-lead-btn.snt-btn-w100 { width: 100%; }

/* ── Success message ─────────────────────────────────────────────────── */
#snt-root .snt-lead-success {
  width: 100%;
  text-align: center;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.95;
}

/* ── Spacing presets ─────────────────────────────────────────────────── */
#snt-root .snt-ann--lead-spacing-compact  .snt-lead-form   { gap: 4px; margin-top: 4px; }
#snt-root .snt-ann--lead-spacing-compact  .snt-lead-fields { gap: 4px; }
#snt-root .snt-ann--lead-spacing-compact  .snt-lead-btn    { padding: 0 12px; }
#snt-root .snt-ann--lead-spacing-spacious .snt-lead-form   { gap: 10px; margin-top: 10px; }
#snt-root .snt-ann--lead-spacing-spacious .snt-lead-fields { gap: 8px; }
#snt-root .snt-ann--lead-spacing-spacious .snt-lead-btn    { padding: 0 24px; }

/* ── Field-gap presets ───────────────────────────────────────────────── */
#snt-root .snt-lead-fields.snt-fgap-small  { gap: 3px; }
#snt-root .snt-lead-fields.snt-fgap-medium { gap: 6px; }
#snt-root .snt-lead-fields.snt-fgap-large  { gap: 10px; }

/* ── Validation error pulse ──────────────────────────────────────────── */
#snt-root .snt-lead-input[aria-invalid="true"] { animation: snt-shake .3s ease; }
@keyframes snt-shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ── RTL — scoped to the bar having dir="rtl" ────────────────────────── */
/* Grid direction: set here ONLY — alignment classes never touch the grid container,
   so field positions are stable no matter which alignment setting is chosen. */
#snt-root .snt-ann[dir="rtl"] .snt-lead-fields { direction: rtl; }
/* RTL: consent inherits direction:rtl from bar — flex naturally flows right-to-left.
   NO row-reverse; adding it on a direction:rtl container double-reverses and puts
   the checkbox on the wrong (left) side. */
#snt-root .snt-ann[dir="rtl"] .snt-lead-consent {
  direction: rtl;
  text-align: right;
}
#snt-root .snt-ann[dir="rtl"] .snt-lead-consent.snt-consent-center {
  justify-content: center;
}
/* In RTL flex, flex-start = visual RIGHT; flex-end = visual LEFT */
#snt-root .snt-ann[dir="rtl"] .snt-lead-consent.snt-consent-right { justify-content: flex-start; }
#snt-root .snt-ann[dir="rtl"] .snt-lead-consent.snt-consent-left  { justify-content: flex-end;   }
/* LTR is the default — explicit for clarity */
#snt-root .snt-ann[dir="ltr"] .snt-lead-consent {
  direction: ltr;
  text-align: left;
}
/* Agreement row: when explicit Right alignment (snt-fields-rtl) is active,
   consent also inherits RTL so checkbox + text appear in correct order. */
#snt-root .snt-lead-fields.snt-fields-rtl ~ .snt-lead-consent {
  direction: rtl;
  text-align: right;
}
/* Email placeholder in auto-RTL / Right-alignment modes: explicitly sets direction + text-align
   to ensure correct placeholder display, complementing the direction:rtl on the input itself.
   Excluded from Left mode (snt-fields-ltr) and Center mode (snt-fields-center). */
#snt-root .snt-ann[dir="rtl"] .snt-lead-fields:not(.snt-fields-ltr):not(.snt-fields-center) .snt-lead-input[data-field="email"]::placeholder {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}
/* Email in RTL modes: direction:rtl moves caret to the right; browser Bidi handles Latin chars normally.
   text-align:right visually anchors the text to the right edge. */
#snt-root .snt-ann[dir="rtl"] .snt-lead-fields:not(.snt-fields-ltr):not(.snt-fields-center) .snt-lead-input[data-field="email"] { direction: rtl; text-align: right; }
/* Email in explicit Right-alignment mode (snt-fields-rtl): same treatment */
#snt-root .snt-lead-fields.snt-fields-rtl .snt-lead-input[data-field="email"] { direction: rtl; text-align: right; }

/* ── Field Position / Alignment — controls auto-placement direction within the grid ── */
/* Right: grid items auto-place from right to left */
#snt-root .snt-ann .snt-lead-fields.snt-fpos-right { direction: rtl; }
/* Left: grid items auto-place from left to right (explicit LTR — wins over RTL bar rule) */
#snt-root .snt-ann .snt-lead-fields.snt-fpos-left  { direction: ltr; }
/* Center: switch to flex with justify-content:center for centered distribution */
#snt-root .snt-lead-fields.snt-fpos-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#snt-root .snt-lead-fields.snt-fpos-center .snt-lead-input          { flex: 0 0 auto; }
#snt-root .snt-lead-fields.snt-fpos-center .snt-lead-input.snt-lf-w25  { width: calc(25% - 5px); }
#snt-root .snt-lead-fields.snt-fpos-center .snt-lead-input.snt-lf-w33  { width: calc(33.333% - 4px); }
#snt-root .snt-lead-fields.snt-fpos-center .snt-lead-input.snt-lf-w50  { width: calc(50% - 3px); }
#snt-root .snt-lead-fields.snt-fpos-center .snt-lead-input.snt-lf-w100 { width: 100%; }
#snt-root .snt-lead-fields.snt-fpos-center .snt-lead-input:not(.snt-lf-w25):not(.snt-lf-w33):not(.snt-lf-w50):not(.snt-lf-w100) { width: calc(50% - 3px); }
/* Consent inside centered flex grid */
#snt-root .snt-lead-fields.snt-fpos-center .snt-lead-consent--in-grid { flex: 0 0 100%; width: 100%; }
/* Auto: no class needed — inherits direction from bar [dir] attribute */
/* Full (stretch): same as auto/default — grid fills 100% of available space */

/* ── Mobile (≤ 640px) ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Consent: always full-width on mobile — UNLESS inside inline-row (inline-row keeps its own layout) */
  #snt-root .snt-lead-consent { width: 100%; }
  #snt-root .snt-lead-inline-row .snt-lead-consent { flex: 1 1 auto; width: auto; }
  /* Button: taller on mobile but respects its configured width (not forced to 100%) */
  #snt-root .snt-lead-btn { height: 40px; line-height: 40px; }
  /* Only full-width when explicitly set */
  #snt-root .snt-lead-btn.snt-btn-w100,
  #snt-root .snt-lead-btn-row.snt-btn-align-full .snt-lead-btn { width: 100%; align-self: stretch; }
}

/* ── Very narrow (≤ 320px) ───────────────────────────────────────────── */
/* Only collapse field widths on genuinely tiny screens (older devices).
   Modern phones (375px+) keep the configured 50/50 layout intact. */
@media (max-width: 320px) {
  #snt-root .snt-lead-input { grid-column: span 12; }
  /* Phase 3.30.0 hotfix — Mirror the data-input collapse so layout
     blocks reflow to full width on tiny screens (parity with field
     reflow keeps the visual rhythm intact). */
  #snt-root .snt-lead-fields .snt-lf-block { grid-column: span 12; }
}

/* ── Phase 1 (Pro): Choice fields (Dropdown / Radio / Checkboxes) ────────
   Layout strategy:
     • The wrapper `.snt-lf-choice-wrap` participates in the existing
       12-col `.snt-lead-fields` grid via the same `.snt-lf-w*` width
       classes, so a Dropdown set to width 50 visually footprints the
       same as a text field set to width 50.
     • Inside the wrapper, radio/checkbox groups use a CSS Grid whose
       column count is driven by `.snt-lf-choice-cols-N` (1..6) on
       desktop and `.snt-lf-choice-mcols-N` (1..3) on mobile.
     • Direction:
         – `.snt-lf-choice-vertical`   = always 1 visual column (stacked).
         – `.snt-lf-choice-horizontal` = uses the column-count classes.
     • RTL is handled with logical properties only (`margin-inline-end`,
       `padding-inline-start`, `text-align: start`). No left/right
       hard-coding — the bar's `dir="rtl"` attribute is sufficient. */
#snt-root .snt-lf-choice-wrap {
  /* Default: span 6 in the 12-col grid (matches the legacy default for
     fields with no width class). The .snt-lf-w* classes win when set. */
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: start;
  min-width: 0; /* allow shrinking inside the grid track */
}
#snt-root .snt-lf-choice-wrap.snt-lf-w25  { grid-column: span 3; }
#snt-root .snt-lf-choice-wrap.snt-lf-w33  { grid-column: span 4; }
#snt-root .snt-lf-choice-wrap.snt-lf-w50  { grid-column: span 6; }
#snt-root .snt-lf-choice-wrap.snt-lf-w100 { grid-column: span 12; }

/* Phase 1 Polish B — Visually-hidden utility for the optional
   `show_label` toggle. The label *element* stays in the DOM (so
   screen readers still announce it and any future scripted hooks
   can read its text content), but it is removed from the visual
   layout entirely — zero geometry impact, no extra `gap` consumed,
   no clip-rect glitches in dense flex/grid containers. The `clip`
   variant is the cross-browser-safe combination used by the WP
   Core Editor and Bootstrap's `.visually-hidden`; the modern
   `clip-path: inset(50%)` lands at the bottom for browsers that
   ignore the legacy clip declaration (IE11 path is dead anyway). */
#snt-root .snt-vh {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
#snt-root .snt-lf-choice-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 2px;
  text-align: start;
  line-height: 1.3;
  color: inherit;
}

#snt-root .snt-lf-choice-group {
  display: grid;
  gap: 6px 12px;
  align-items: start;
  text-align: start;
}
/* Vertical = stacked, single column always */
#snt-root .snt-lf-choice-group.snt-lf-choice-vertical {
  grid-template-columns: 1fr;
}
/* Horizontal = N-column grid (desktop), wraps gracefully when narrow */
#snt-root .snt-lf-choice-group.snt-lf-choice-horizontal.snt-lf-choice-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
#snt-root .snt-lf-choice-group.snt-lf-choice-horizontal.snt-lf-choice-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#snt-root .snt-lf-choice-group.snt-lf-choice-horizontal.snt-lf-choice-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#snt-root .snt-lf-choice-group.snt-lf-choice-horizontal.snt-lf-choice-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#snt-root .snt-lf-choice-group.snt-lf-choice-horizontal.snt-lf-choice-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#snt-root .snt-lf-choice-group.snt-lf-choice-horizontal.snt-lf-choice-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

#snt-root .snt-lf-choice-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.3;
  color: inherit;
  text-align: start;
  /* Logical inline padding ensures RTL keeps the touch target spacing
     mirrored without extra CSS — works across LTR / RTL / vertical
     writing modes. */
  padding-inline-start: 0;
  padding-inline-end: 0;
  min-height: 22px;
}
#snt-root .snt-lf-choice-opt input.snt-lf-choice-input {
  flex: 0 0 auto;
  margin: 0;
  /* Inherit the form's text colour for the native control accent so
     radios / checkboxes read consistently against any bar background. */
  accent-color: currentColor;
  cursor: pointer;
}
#snt-root .snt-lf-choice-opt .snt-lf-choice-text {
  flex: 1 1 auto;
  white-space: normal;
  word-break: break-word;
}

/* Dropdown <select> — fully styled to match the rest of the lead form.
   Phase 1 polish:
     • appearance:none kills the platform-native chevron so we draw our
       own consistent SVG arrow that respects fieldTextColor (currentColor
       via a CSS variable so the same SVG works on light AND dark bars).
     • height/border/typography all inherit from .snt-lead-input above —
       the only extras here are the chevron asset, end-side padding to
       prevent option text from running under the chevron, and an RTL
       branch that swaps the chevron to the inline-start edge.
     • Native dropdown panel (the popup that browsers render when
       <select> is opened) is intentionally NOT customised — keeping it
       browser-native preserves accessibility (keyboard nav, screen-
       reader announcements) and avoids shipping a custom-select JS
       library, per the spec. */
#snt-root .snt-lf-choice-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Phase 1 Polish (PART 3) — Micro-polished chevron. Trimmed
     further from the previous 10 × 6 / 1.4 px / `#6b7280` (slate-500):
       • viewBox  10×6 →  8×5  (smaller intrinsic glyph)
       • stroke   1.4  →  1.2  (thinner profile)
       • colour   #6b7280 → #9ca3af (gray-400, softer)
       • opacity  via colour alpha — kept full so it stays crisp
                  on retina without anti-alias muddying
       • size     8×5 px rendered (was 10×6)
       • position kept at `right 10px center` — paired with the
                  reduced 24 px inline-end padding it sits a
                  reasonable 6 px away from the visible right
                  edge of the option text run.
     Result: a subtle, almost-decorative caret that says
     "expandable" without competing with the option text, while
     remaining clearly visible across light + tinted bars. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none' stroke='%239ca3af' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-size: 8px 5px;
  background-position: right 10px center;
  padding-inline-end: 24px;
  cursor: pointer;
  /* Vertical centering: line-height: normal works across browsers
     better than matching the <input> trick of line-height = height,
     since <select> renders its inner option using its own metrics. */
  line-height: normal;
  text-overflow: ellipsis;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
/* Phase 1 Polish (PART 2) — Closed-state micro-polish. Hover/focus
   tokens stay aligned with `.snt-lead-input:focus` so tabbing
   between text inputs and the dropdown produces a consistent
   affordance. The 3-px halo at .10 alpha is intentionally subtle
   — matches the WP Core focus convention without competing with
   the bar's own colour scheme. The hover border tightens by
   ~6 alpha-units vs base for a quiet "I'm interactive" cue. */
#snt-root .snt-lf-choice-select:hover {
  border-color: rgba(128,128,128,0.55);
}
#snt-root .snt-lf-choice-select:focus,
#snt-root .snt-lf-choice-select:focus-visible {
  border-color: rgba(128,128,128,0.7);
  box-shadow: 0 0 0 3px rgba(128,128,128,0.10);
}
/* RTL: chevron lives on the visual-left under [dir="rtl"]. Note the
   padding stays `padding-inline-end: 24px` (same as base) because
   `inline-end` is direction-aware — under RTL it maps to the left
   physical edge, which is exactly where the chevron sits, so the
   logical longhand handles both writing modes without any swap. We
   only need to flip `background-position` to the inline-start
   visual edge. The bar's [dir="rtl"] attribute is the single
   source of truth, so we don't detect language here. */
#snt-root .snt-ann[dir="rtl"] .snt-lf-choice-select {
  background-position: left 10px center;
}
/* IE/Edge legacy native dropdown arrow suppression (defensive: modern
   Edge / Chromium honour appearance:none, but a stale render surface
   on the bar's container could otherwise show a duplicate arrow). */
#snt-root .snt-lf-choice-select::-ms-expand { display: none; }
/* Native <option> popup — the menu rendered when the <select> opens
   cannot be styled cross-browser, but we can at least normalise the
   font + colour of each <option> so the popup reads consistently
   with the rest of the form. Browsers use the host's text/bg
   defaults if these are unset, which on dark bars produced
   white-on-white unreadable popups. */
#snt-root .snt-lf-choice-select option {
  background: #fff;
  color: #1f2937;
  font-family: inherit;
}

/* Mobile: column-count override (1..3 only — full grid would be unusable
   on phones). The cols-1 fallback ensures vertical mode looks the same
   on mobile as desktop. */
@media (max-width: 640px) {
  #snt-root .snt-lf-choice-group.snt-lf-choice-horizontal.snt-lf-choice-mcols-1 { grid-template-columns: 1fr; }
  #snt-root .snt-lf-choice-group.snt-lf-choice-horizontal.snt-lf-choice-mcols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #snt-root .snt-lf-choice-group.snt-lf-choice-horizontal.snt-lf-choice-mcols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Choice wrapper falls to full-width on phones for readability — this
     mirrors the .snt-lead-input behaviour at ≤320px but kicks in
     earlier because choice groups need more horizontal room than a
     single text field. */
  #snt-root .snt-lf-choice-wrap { grid-column: span 12; }

  /* STRICT FINAL FIX v2 (PART 2) — Match privacy consent checkbox
     size on mobile, exactly.
     ────────────────────────────────────────────────────────────
     The reference target `.snt-lead-consent-chk` lives inside
     `.snt-lead-consent { font-size: 11px }`. Mobile UAs (iOS
     Safari, Android Chrome) size native checkbox/radio glyphs in
     proportion to the input's effective font-size. The choice
     options' parent `.snt-lf-choice-opt` is 12px — one px larger
     than the privacy parent — so without this rule the choice
     control renders one tick larger than the privacy checkbox.
     Forcing the choice input's OWN font-size to 11px puts BOTH
     controls in the SAME UA-native sizing pipeline → pixel
     identical on every mobile browser.

     Pure UA rendering — no `inline-size`, `block-size`,
     `aspect-ratio`, `box-sizing`, or `line-height` overrides. UA
     stylesheets already paint radios as perfect circles and
     checkboxes as perfect squares; we don't second-guess them.

     Desktop unaffected. Privacy unaffected (separate selector). */
  #snt-root .snt-lf-choice-opt input.snt-lf-choice-input {
    font-size: 11px;
  }
}

/* ── Phase 1 Polish — Custom Select (.snt-cs) ───────────────────────────
   A progressive-enhancement wrapper that visually replaces the native
   `<select>` for Lead Form Dropdown fields ONLY (radio/checkbox groups
   and text-style inputs are untouched). The native `<select>` stays in
   the DOM as the value carrier so:
     • the existing submit collector (`.snt-lead-input` query) reads its
       `.value` without modification,
     • HTML5 form constraints (`required`) continue to participate,
     • the `sn_field_{id}` POST contract is preserved (Phase 2-safe),
     • assistive tech can fall through to native form semantics if the
       custom layer fails to enhance for any reason.
   The custom shell renders an ARIA combobox/listbox pair on top, so
   sighted users get a polished Site-Notice-styled UI while the
   underlying form mechanics stay intact. Logical CSS properties
   throughout — RTL works automatically via the bar's [dir] attribute. */

/* Wrapper: same grid footprint as the native select had. */
#snt-root .snt-cs {
  position: relative;
  display: block;
  inline-size: 100%;
  box-sizing: border-box;
}

/* The native <select> is visually clipped but still present in the
   accessibility tree + form value graph. `clip-path` is preferred over
   `display: none` because the existing submit-collector loop skips
   inputs whose inline `style.display === "none"` — clipping keeps the
   element "visible" to that check while making it invisible + inert
   to sighted/pointer users. `tabindex="-1"` on the element itself
   removes it from the tab order (the custom trigger takes its place). */
#snt-root .snt-cs__native {
  position: absolute !important;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  clip-path: inset(50%);
  -webkit-clip-path: inset(50%);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  /* Defensive: clear chevron / background-image inherited from the
     `.snt-lf-choice-select` rule above — the native is no longer the
     visible surface, so any background asset on it is wasted bytes and
     could re-appear if a stale render surface ignores the clip. */
  background-image: none !important;
}

/* Trigger button — mirrors `.snt-lead-input` visual tokens so the
   custom dropdown reads as part of the form (height/border/radius/
   typography/transitions all inherit via inline style applied by JS
   for parity with the surrounding text inputs). Only the layout +
   chevron rules live here. */
#snt-root .snt-cs__trigger {
  /* layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  box-sizing: border-box;
  padding-block: 0;
  padding-inline: 10px 10px;
  margin: 0;
  /* visual base — overridden inline by JS to match field tokens */
  font-family: inherit;
  font-size: inherit;
  line-height: normal;
  color: inherit;
  background: transparent;
  border: 1px solid rgba(128,128,128,0.35);
  border-radius: 6px;
  cursor: pointer;
  text-align: start;
  /* native button reset */
  appearance: none;
  -webkit-appearance: none;
  /* same transition profile as `.snt-lf-choice-select` for parity */
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#snt-root .snt-cs__trigger:hover {
  border-color: rgba(128,128,128,0.55);
}
#snt-root .snt-cs__trigger:focus,
#snt-root .snt-cs__trigger:focus-visible {
  outline: none;
  border-color: rgba(128,128,128,0.7);
  box-shadow: 0 0 0 3px rgba(128,128,128,0.10);
}
/* When the menu is open, give the trigger a slightly more pronounced
   focus ring so the open/closed states are visually distinct. */
#snt-root .snt-cs__trigger[aria-expanded="true"] {
  border-color: rgba(128,128,128,0.7);
  box-shadow: 0 0 0 3px rgba(128,128,128,0.12);
}

/* Trigger label — ellipsis on overflow, soft placeholder colour when
   no value is selected. The `data-placeholder` attribute toggles
   between selected-value styling and placeholder styling so we don't
   need ::-internal-shadow tricks. */
#snt-root .snt-cs__label {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
}
#snt-root .snt-cs__trigger[data-placeholder="1"] .snt-cs__label {
  opacity: 0.6;
}

/* Chevron — same 8×5 / 1.2 px gray-400 caret used by `.snt-lf-choice-select`
   for visual parity. Inline SVG via `background-image` on a flex item
   keeps the asset cacheable and scales crisply at any DPR. */
#snt-root .snt-cs__chev {
  flex: 0 0 auto;
  inline-size: 8px;
  block-size: 5px;
  margin-inline-start: 6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none' stroke='%239ca3af' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .15s ease;
}
#snt-root .snt-cs__trigger[aria-expanded="true"] .snt-cs__chev {
  transform: rotate(180deg);
}

/* Listbox menu — JS portals this element to `document.body` while
   open (escapes all ancestor `overflow: hidden` / `transform` /
   `filter` / stacking-context constraints in one shot), then returns
   it to the wrapper on close. Because the menu can live OUTSIDE
   the `#snt-root` host while open, its rules are intentionally
   un-prefixed so the styling applies in either DOM location. The
   class name is already namespaced (`snt-cs__menu`) enough to be
   safe from theme bleed.
   Width/position are written inline by JS based on the trigger's
   getBoundingClientRect() — the rule provides only the visual
   skin (background, border, shadow, padding, scrolling). */
.snt-cs__menu {
  position: fixed;
  z-index: 2147483646;
  inset-block-start: auto;
  inset-inline-start: auto;
  max-block-size: 240px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #ffffff;
  color: #1f2937;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Refined default typography — Lead Form typography overrides apply
     via inline styles set by the enhancer, so these only matter when
     the localizer payload is unset (e.g. legacy notice configs).
     Slightly compact line-height + softer weight feel less browser-
     native and more SaaS-modern. */
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.35;
  /* animate-in: subtle fade + tiny rise */
  animation: snt-cs-fade-in 120ms ease-out;
}
.snt-cs__menu[hidden] { display: none; }

@keyframes snt-cs-fade-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Option row — compact tap target on desktop, more comfortable on
   mobile via the breakpoint below. `aria-selected` paints the active
   option; `data-highlight="1"` paints the keyboard-highlighted row
   without committing the selection (kept distinct so the user always
   sees both "what I came in with" + "what arrow keys are pointing
   at").
   Padding tightened from `6px / 10px` → `5px / 10px` and an explicit
   tight `line-height` to match the menu's compact default — keeps
   options readable on every modern font without feeling chunky
   like a native browser dropdown. */
.snt-cs__opt {
  display: block;
  padding-block: 5px;
  padding-inline: 10px;
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: 1.35;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: start;
  user-select: none;
  -webkit-user-select: none;
}
.snt-cs__opt:hover,
.snt-cs__opt[data-highlight="1"] {
  background: rgba(0,0,0,0.05);
}
.snt-cs__opt[aria-selected="true"] {
  background: rgba(59,91,219,0.10);
  color: #1d2327;
  font-weight: 500;
}
.snt-cs__opt[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* RTL: chevron sits at the visual-left, options align inline-start.
   Logical properties handle most of this automatically — explicit
   rule kept for the in-bar trigger so the chevron rotate-origin
   remains symmetric in either direction. */
#snt-root .snt-ann[dir="rtl"] .snt-cs__trigger,
#snt-root .snt-ann[dir="rtl"] .snt-cs__label { text-align: start; }
/* Portal'd menu under RTL: opt text-align logical (no #snt-root
   ancestor in the portal'd state, so we rely on the inline
   `direction: rtl` set by JS + `text-align: start` in the base rule). */

/* Mobile: roomier tap targets (44 px CSS pixel guideline). The
   trigger's height is set inline by JS (matches the lead-input
   field-size token), so we only adjust the option list here. */
@media (max-width: 640px) {
  .snt-cs__menu {
    max-block-size: 60vh;
  }
  .snt-cs__opt {
    padding-block: 9px;
    padding-inline: 12px;
  }
}

/* RTL: native HTML form controls already handle direction inheritance.
   No left/right rules needed — logical CSS properties above + the bar's
   dir="rtl" attribute take care of everything. The select's dropdown
   arrow stays in the inline-end edge automatically. */

/* ── V2.0 Dots Navigation ────────────────────────────────────────────── */
#snt-root .snt-nav-dots,
body > .snt-nav-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0 3px;
  gap: 0;
  pointer-events: auto;
}
/* Alignment variants */
#snt-root .snt-nav-dots--left,
body > .snt-nav-dots.snt-nav-dots--left  { justify-content: flex-start; padding-left: 12px; }
#snt-root .snt-nav-dots--right,
body > .snt-nav-dots.snt-nav-dots--right { justify-content: flex-end; padding-right: 12px; }

#snt-root .snt-nav-dot,
body > .snt-nav-dots .snt-nav-dot {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  pointer-events: auto;
  /* Size, color, opacity all driven by inline JS — transition uses CSS var set on container */
  transition:
    background   var(--snt-dot-tr, 0.25s) ease,
    opacity      var(--snt-dot-tr, 0.25s) ease,
    width        var(--snt-dot-tr, 0.25s) ease,
    height       var(--snt-dot-tr, 0.25s) ease,
    transform    var(--snt-dot-tr, 0.25s) ease,
    box-shadow   var(--snt-dot-tr, 0.25s) ease;
}
#snt-root .snt-nav-dot.is-active,
body > .snt-nav-dots .snt-nav-dot.is-active {
  transform: none;
}
/* Hover effect — scale up on hover, driven by CSS variable */
#snt-root .snt-nav-dots--hover .snt-nav-dot:hover,
body > .snt-nav-dots.snt-nav-dots--hover .snt-nav-dot:hover {
  transform: scale(var(--snt-dot-hover-scale, 1.15));
  opacity: 1 !important;
}
/* Glow preset — active dot shows soft outer glow */
#snt-root .snt-nav-dot--glow.is-active,
body > .snt-nav-dots .snt-nav-dot--glow.is-active {
  box-shadow: 0 0 8px 3px var(--snt-dot-glow-color, rgba(255,255,255,0.7));
}
/* Pulse preset — active dot shows outward ripple */
@keyframes snt-dot-pulse {
  0%   { box-shadow: 0 0 0 0    var(--snt-dot-pulse-color, rgba(255,255,255,0.6)); }
  60%  { box-shadow: 0 0 0 6px  transparent; }
  100% { box-shadow: 0 0 0 0    transparent; }
}
#snt-root .snt-nav-dot--pulse.is-active,
body > .snt-nav-dots .snt-nav-dot--pulse.is-active {
  animation: snt-dot-pulse 1.8s ease-out infinite;
}
#snt-root .snt-nav-dot:focus-visible,
body > .snt-nav-dots .snt-nav-dot:focus-visible {
  outline: 2px solid rgba(255,255,255,0.5);
  outline-offset: 2px;
}

/* —— Admin: Preview Show/Hide toggle button (desktop + mobile) —— */
.sna-preview__toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  background: #f0f4ff;
  border: 1px solid #c7d7f5;
  border-radius: 5px;
  color: #2563eb;
  white-space: nowrap;
  line-height: 1.5;
  flex-shrink: 0;
}

.sna-preview__toggle-btn:hover {
  background: #e4eaff;
  border-color: #a5b8f0;
}

/* Compact state: hide bar frame only — popup mini preview stays visible */
.sna-preview.is-compact .sn-preview-frame {
  display: none;
}

/* —— Admin: Preview header — single horizontal row layout
       Title on the start side, all controls grouped on the end side.
       Uses logical properties so RTL is fully mirrored automatically. —— */
.sna-preview__header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding-block: 8px !important;
  padding-inline: 12px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}

.sna-preview__title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  color: #1d2327;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.sna-preview__header-actions {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

/* Notice dropdown: roomy on desktop, responsive on mobile (no hard fixed width). */
.sna-preview__notice-sel {
  flex: 1 1 180px;
  min-width: 120px;
  max-width: 240px;
  height: 28px;
  font-size: 12px;
  padding-block: 2px;
  padding-inline: 8px;
  border-radius: 5px;
  border: 1px solid var(--sna-border, #d0d5dd);
  background: #fff;
  color: var(--sna-text-2, #374151);
  line-height: 1.4;
}

#sn_preview_animation_btn.button-small {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 11.5px;
  padding: 3px 10px;
  height: 28px;
  line-height: 1.4;
}

/* —— Mobile: compact, touch-friendly, single row when possible ——
   `.sn-admin-wrap` prefix is used to match/beat the specificity of the
   admin.css base rules so these compact overrides always apply on the
   settings page at narrow breakpoints. */
@media (max-width: 700px) {
  .sn-admin-wrap .sna-preview__header {
    gap: 6px;
    padding-block: 6px;
    padding-inline: 10px;
  }
  .sn-admin-wrap .sna-preview__header-actions {
    gap: 5px;
  }
  .sn-admin-wrap .sna-preview__notice-sel {
    flex: 1 1 130px;
    min-width: 100px;
    max-width: 100%;
    height: 26px;
    font-size: 11.5px;
    padding-inline: 6px;
  }
  .sn-admin-wrap #sn_preview_animation_btn.button-small {
    font-size: 11px;
    padding: 2px 8px;
    height: 26px;
    min-height: 26px;
  }
  .sn-admin-wrap .sna-preview__toggle-btn {
    font-size: 11.5px;
    padding: 3px 9px;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .sn-admin-wrap .sna-preview__title {
    flex-basis: 100%;
  }
  .sn-admin-wrap .sna-preview__header-actions {
    justify-content: flex-start;
    flex-basis: 100%;
  }
  .sn-admin-wrap .sna-preview__notice-sel {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* —— Admin: Privacy Popup Mini Preview —— */
.sna-priv-popup-mini {
  padding: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  width: 100%;
}

/* Toggle row: label + show/hide button side by side */
.sna-priv-popup-mini__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px 6px;
}

.sna-priv-popup-mini__label {
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0;
  line-height: 1;
}

/* Collapsible body wrapper */
#sna-popup-preview-body {
  padding: 0 14px 14px;
}

.sna-priv-popup-mini__card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.13);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.sna-priv-popup-mini__header {
  padding: 9px 13px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  background: #fafafa;
}

.sna-priv-popup-mini__title {
  font-size: 12px;
  font-weight: 700;
  color: #111;
  display: block;
  letter-spacing: -0.01em;
}

.sna-priv-popup-mini__body {
  position: relative;
  padding: 9px 13px 0;
  max-height: 58px;
  overflow: hidden;
}

.sna-priv-popup-mini__text {
  font-size: 12px;
  line-height: 1.6;
  color: #555;
  white-space: pre-wrap;
  word-break: break-word;
  display: block;
  text-align: inherit;
}

.sna-priv-popup-mini__fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.96) 80%, rgba(255,255,255,1) 100%);
  pointer-events: none;
}

.sna-priv-popup-mini__footer {
  padding: 8px 13px 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sna-priv-popup-mini__open-btn {
  appearance: none;
  background: #2271b1;
  border: none;
  border-radius: 6px;
  padding: 7px 20px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  line-height: 1.4;
  white-space: nowrap;
  min-height: 32px;
  transition: background 0.13s;
}

.sna-priv-popup-mini__open-btn:hover {
  background: #135e96;
}

@media (max-width: 600px) {
  .sna-priv-popup-mini__toggle-row {
    padding: 8px 10px 5px;
  }
  #sna-popup-preview-body {
    padding: 0 10px 12px;
  }
  .sna-priv-popup-mini__open-btn {
    width: 100%;
    text-align: center;
    min-height: 38px;
  }
}

/* —— Admin: Privacy Popup Full Preview Modal —— */
.sna-priv-popup-modal__overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.58);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
  animation: snt-overlay-in 0.18s ease both;
}

.sna-priv-popup-modal__dialog {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 24px 64px rgba(0, 0, 0, 0.14);
  width: 92%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.sna-priv-popup-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  gap: 8px;
}

.sna-priv-popup-modal__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
  min-width: 0;
}

.sna-priv-popup-modal__close {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: #666;
  padding: 3px 7px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}

.sna-priv-popup-modal__close:hover {
  color: #111;
  background: rgba(0, 0, 0, 0.07);
}

.sna-priv-popup-modal__body {
  padding: 16px 18px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 14px;
  line-height: 1.65;
  color: #333;
  white-space: pre-wrap;
  word-break: break-word;
  flex: 1 1 auto;
  min-height: 0;
  /* Hotfix — Privacy popup LTR/RTL bug (admin Live Preview).
     Mirror the frontend popup behaviour: inherit direction from
     the dialog and use logical `start` alignment. */
  direction: inherit;
  text-align: start;
  unicode-bidi: isolate;
}

/* HOTFIX 2 — TRUE LTR/RTL inheritance for the admin Live Preview.
   Mirrors the frontend hotfix (see `.snt-priv-popup__*` block
   above).  Combines the popup-language scope classes
   (`sna-priv-popup-modal--ltr` / `--rtl`) with `[dir]` for
   maximum specificity, locks `direction` and physical
   `text-align` with `!important`. */
.sna-priv-popup-modal__overlay.sna-priv-popup-modal--ltr,
.sna-priv-popup-modal__overlay[dir="ltr"],
.sna-priv-popup-modal__dialog.sna-priv-popup-modal--ltr,
.sna-priv-popup-modal__dialog[dir="ltr"],
.sna-priv-popup-modal__dialog.sna-priv-popup-modal--ltr .sna-priv-popup-modal__header,
.sna-priv-popup-modal__dialog.sna-priv-popup-modal--ltr .sna-priv-popup-modal__body,
.sna-priv-popup-modal__dialog.sna-priv-popup-modal--ltr .sna-priv-popup-modal__title,
.sna-priv-popup-modal__dialog.sna-priv-popup-modal--ltr .sna-priv-popup-modal__close,
.sna-priv-popup-modal__dialog[dir="ltr"] .sna-priv-popup-modal__header,
.sna-priv-popup-modal__dialog[dir="ltr"] .sna-priv-popup-modal__body,
.sna-priv-popup-modal__dialog[dir="ltr"] .sna-priv-popup-modal__title,
.sna-priv-popup-modal__dialog[dir="ltr"] .sna-priv-popup-modal__close {
  direction: ltr !important;
  unicode-bidi: isolate;
}
.sna-priv-popup-modal__dialog.sna-priv-popup-modal--ltr .sna-priv-popup-modal__title,
.sna-priv-popup-modal__dialog[dir="ltr"]                  .sna-priv-popup-modal__title,
.sna-priv-popup-modal__dialog.sna-priv-popup-modal--ltr .sna-priv-popup-modal__body,
.sna-priv-popup-modal__dialog[dir="ltr"]                  .sna-priv-popup-modal__body {
  text-align: left !important;
}

.sna-priv-popup-modal__overlay.sna-priv-popup-modal--rtl,
.sna-priv-popup-modal__overlay[dir="rtl"],
.sna-priv-popup-modal__dialog.sna-priv-popup-modal--rtl,
.sna-priv-popup-modal__dialog[dir="rtl"],
.sna-priv-popup-modal__dialog.sna-priv-popup-modal--rtl .sna-priv-popup-modal__header,
.sna-priv-popup-modal__dialog.sna-priv-popup-modal--rtl .sna-priv-popup-modal__body,
.sna-priv-popup-modal__dialog.sna-priv-popup-modal--rtl .sna-priv-popup-modal__title,
.sna-priv-popup-modal__dialog.sna-priv-popup-modal--rtl .sna-priv-popup-modal__close,
.sna-priv-popup-modal__dialog[dir="rtl"] .sna-priv-popup-modal__header,
.sna-priv-popup-modal__dialog[dir="rtl"] .sna-priv-popup-modal__body,
.sna-priv-popup-modal__dialog[dir="rtl"] .sna-priv-popup-modal__title,
.sna-priv-popup-modal__dialog[dir="rtl"] .sna-priv-popup-modal__close {
  direction: rtl !important;
  unicode-bidi: isolate;
}
.sna-priv-popup-modal__dialog.sna-priv-popup-modal--rtl .sna-priv-popup-modal__title,
.sna-priv-popup-modal__dialog[dir="rtl"]                  .sna-priv-popup-modal__title,
.sna-priv-popup-modal__dialog.sna-priv-popup-modal--rtl .sna-priv-popup-modal__body,
.sna-priv-popup-modal__dialog[dir="rtl"]                  .sna-priv-popup-modal__body {
  text-align: right !important;
}

/* HOTFIX 2 — admin mini preview true direction inheritance.
   Combines language scope classes with `[dir]` attribute to win
   any specificity contest with the surrounding admin chrome. */
.sna-priv-popup-mini__card.sna-priv-popup-mini--ltr,
.sna-priv-popup-mini__card[dir="ltr"],
.sna-priv-popup-mini__card.sna-priv-popup-mini--ltr .sna-priv-popup-mini__text,
.sna-priv-popup-mini__card.sna-priv-popup-mini--ltr .sna-priv-popup-mini__title,
.sna-priv-popup-mini__card[dir="ltr"] .sna-priv-popup-mini__text,
.sna-priv-popup-mini__card[dir="ltr"] .sna-priv-popup-mini__title,
.sna-priv-popup-mini__text[dir="ltr"] {
  direction: ltr !important;
  unicode-bidi: isolate;
}
.sna-priv-popup-mini__card.sna-priv-popup-mini--ltr .sna-priv-popup-mini__text,
.sna-priv-popup-mini__card.sna-priv-popup-mini--ltr .sna-priv-popup-mini__title,
.sna-priv-popup-mini__card[dir="ltr"] .sna-priv-popup-mini__text,
.sna-priv-popup-mini__card[dir="ltr"] .sna-priv-popup-mini__title {
  text-align: left !important;
}
.sna-priv-popup-mini__card.sna-priv-popup-mini--rtl,
.sna-priv-popup-mini__card[dir="rtl"],
.sna-priv-popup-mini__card.sna-priv-popup-mini--rtl .sna-priv-popup-mini__text,
.sna-priv-popup-mini__card.sna-priv-popup-mini--rtl .sna-priv-popup-mini__title,
.sna-priv-popup-mini__card[dir="rtl"] .sna-priv-popup-mini__text,
.sna-priv-popup-mini__card[dir="rtl"] .sna-priv-popup-mini__title,
.sna-priv-popup-mini__text[dir="rtl"] {
  direction: rtl !important;
  unicode-bidi: isolate;
}
.sna-priv-popup-mini__card.sna-priv-popup-mini--rtl .sna-priv-popup-mini__text,
.sna-priv-popup-mini__card.sna-priv-popup-mini--rtl .sna-priv-popup-mini__title,
.sna-priv-popup-mini__card[dir="rtl"] .sna-priv-popup-mini__text,
.sna-priv-popup-mini__card[dir="rtl"] .sna-priv-popup-mini__title {
  text-align: right !important;
}

/* —— Privacy Popup entry animations —— */
@keyframes snt-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes snt-popup-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes snt-popup-scale {
  from { opacity: 0; transform: scale(0.90); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes snt-popup-slide {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.snt-priv-popup__dialog.snt-popup-anim--fade.snt-popup-anim--in,
.sna-priv-popup-modal__dialog.snt-popup-anim--fade.snt-popup-anim--in {
  animation: snt-popup-fade  0.20s ease both;
}
.snt-priv-popup__dialog.snt-popup-anim--scale.snt-popup-anim--in,
.sna-priv-popup-modal__dialog.snt-popup-anim--scale.snt-popup-anim--in {
  animation: snt-popup-scale 0.22s cubic-bezier(0.34,1.56,0.64,1) both;
}
.snt-priv-popup__dialog.snt-popup-anim--slide.snt-popup-anim--in,
.sna-priv-popup-modal__dialog.snt-popup-anim--slide.snt-popup-anim--in {
  animation: snt-popup-slide 0.22s ease both;
}

@media (max-width: 600px) {
  .sna-priv-popup-modal__overlay {
    padding: 10px;
    align-items: flex-end;
  }
  .sna-priv-popup-modal__dialog {
    width: 100%;
    max-width: 100%;
    border-radius: 12px 12px 0 0;
    max-height: 82vh;
  }
}

/* —— Admin: Privacy Popup section label —— */
.sna-priv-popup-section-label {
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 10px 0 4px;
  margin-bottom: 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

/* —— Admin: Privacy Link Behavior block —— */
.sna-priv-action-block {
  background: #f8f9fb;
  border: 1px solid #e2e4e7;
  border-radius: 8px;
  padding: 12px 14px 10px;
  margin-top: 4px;
}

.sna-priv-action-block__title {
  font-size: 12px;
  font-weight: 700;
  color: #1d2327;
  margin-bottom: 3px;
  line-height: 1.3;
}

.sna-priv-action-block__desc {
  font-size: 11.5px;
  color: #50575e;
  margin: 0 0 8px;
  line-height: 1.4;
}

.sna-priv-action-hints {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 7px;
}

.sna-priv-action-hint {
  font-size: 11px;
  color: #50575e;
  line-height: 1.4;
}

.sna-badge--recommended {
  display: inline-block;
  background: #eef2ff;
  color: #3b5bdb;
  border: 1px solid #c7d7f5;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1.5;
}

/* —— Admin: PRO locked card inside popup fields —— */
#sn_priv_popup_fields .sna-card--pro-locked .sna-fields {
  user-select: none;
}
#sn_priv_popup_fields .sna-pro-overlay {
  font-size: 12px;
  line-height: 1.5;
}

/* —— Prevent body overflow during popup —— */
body.snt-popup-open {
  overflow: hidden;
}

/* ================================================================
   RE-ACCESS ELEMENT — shown after user accepts privacy consent
   Supports 5 types: tab, handle, icon, button, footer
   ================================================================ */

/* Base: common to all types */
#snt-root .snt-ra,
.snt-ra-footer-wrap .snt-ra {
  --snt-ra-bg: #1d2327;
  --snt-ra-color: #ffffff;
  --snt-ra-radius: 4px;
  --snt-ra-opacity-hover: 1;
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.03em;
  background: var(--snt-ra-bg);
  color: var(--snt-ra-color);
  border-radius: var(--snt-ra-radius);
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.18s ease;
  white-space: nowrap;
  z-index: 2147483600;
  box-sizing: border-box;
}

/* Visible state — opacity driven by the user's Re-Access Opacity slider
   via the `--snt-ra-opacity` CSS variable (set inline on the element by
   site-notice.js). Falls back to 0.9 for safety when the variable is not
   present (e.g. legacy callers). Applies uniformly to tab / icon / footer
   types; the handle type has its own visible-state rule below that also
   uses this variable but with a different fallback (0.38) to preserve
   the handle's intentionally subtle resting appearance. */
#snt-root .snt-ra.snt-ra--visible,
.snt-ra-footer-wrap .snt-ra.snt-ra--visible {
  opacity: var(--snt-ra-opacity, 0.9);
  pointer-events: auto;
}

/* Hover */
#snt-root .snt-ra:hover,
.snt-ra-footer-wrap .snt-ra:hover {
  opacity: var(--snt-ra-opacity-hover) !important;
}

/* Focus */
#snt-root .snt-ra:focus-visible,
.snt-ra-footer-wrap .snt-ra:focus-visible {
  outline: 2px solid rgba(99,102,241,0.7);
  outline-offset: 2px;
}

/* ── Size variants ── */
#snt-root .snt-ra--size-small  { font-size: 10px; }
#snt-root .snt-ra--size-medium { font-size: 11px; }
#snt-root .snt-ra--size-large  { font-size: 13px; }

/* ================================================================
   TYPE: TAB — fixed vertical side tab, vertically centered
   Simplified: equal border radius, no directional flipping.
   Allowed positions: middle-left, middle-right only.
   ================================================================ */
#snt-root .snt-ra--tab {
  position: fixed;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 10px 6px;
  border-radius: var(--snt-ra-radius, 4px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

#snt-root .snt-ra--tab.snt-ra--pos-middle-left {
  left: 0;
  top: calc(50% - var(--snt-ra-y-offset, 0px));
  transform: translateY(-50%);
}

#snt-root .snt-ra--tab.snt-ra--pos-middle-right {
  right: 0;
  left: auto;
  top: calc(50% - var(--snt-ra-y-offset, 0px));
  transform: translateY(-50%);
}

#snt-root .snt-ra--tab.snt-ra--pos-top-left {
  left: 0;
  top: calc(16px + var(--snt-ra-y-offset, 0px));
}

#snt-root .snt-ra--tab.snt-ra--pos-top-right {
  right: 0;
  left: auto;
  top: calc(16px + var(--snt-ra-y-offset, 0px));
}

#snt-root .snt-ra--tab.snt-ra--pos-bottom-left {
  left: 0;
  bottom: calc(16px + var(--snt-ra-y-offset, 0px));
  top: auto;
}

#snt-root .snt-ra--tab.snt-ra--pos-bottom-right {
  right: 0;
  left: auto;
  bottom: calc(16px + var(--snt-ra-y-offset, 0px));
  top: auto;
}

#snt-root .snt-ra--tab.snt-ra--size-small  { padding: 8px 5px;  font-size: 10px; }
#snt-root .snt-ra--tab.snt-ra--size-medium { padding: 10px 6px; font-size: 11px; }
#snt-root .snt-ra--tab.snt-ra--size-large  { padding: 13px 8px; font-size: 13px; }

/* ================================================================
   TYPE: HANDLE — Minimal Handle (collapses to a thin elegant bar)
   Two sub-types:
     snt-ra--handle-h  Horizontal bar — used for Top and Bottom positions
     snt-ra--handle-v  Vertical bar   — used for Middle Left / Middle Right
   Always expands toward screen center.
   ================================================================ */
#snt-root .snt-ra--handle {
  position: fixed;
  /* Fallback: bottom-center (for old saved data without subtype class) */
  bottom: calc(0px + var(--snt-ra-y-offset, 0px));
  left: 50%;
  transform: translateX(-50%);
  height: 4px;
  min-width: 52px;
  padding: 0;
  overflow: hidden;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.12);
  transition:
    height 0.3s ease-in-out,
    width 0.3s ease-in-out,
    min-width 0.28s ease-in-out,
    border-radius 0.25s ease-in-out,
    opacity 0.25s ease;
}

/* Collapsed visible bar — opacity driven by the user's Re-Access Opacity
   slider via the `--snt-ra-opacity` CSS variable. Falls back to 0.38 to
   preserve the handle's deliberately subtle resting appearance when no
   user value is set. The expanded and :hover states below use !important
   on purpose, so the user value drives only the resting/collapsed state. */
#snt-root .snt-ra--handle.snt-ra--visible {
  opacity: var(--snt-ra-opacity, 0.38);
}

/* Expanded state — shared */
#snt-root .snt-ra--handle.snt-ra--expanded {
  opacity: 0.9 !important;
}

/* Text label inside handle */
#snt-root .snt-ra--handle .snt-ra__text {
  display: block;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: opacity 0.2s ease 0.06s;
  -webkit-user-select: none;
  user-select: none;
}

#snt-root .snt-ra--handle.snt-ra--expanded .snt-ra__text {
  opacity: 1;
}

/* Subtle hover lift (pointer devices only) */
@media (hover: hover) {
  #snt-root .snt-ra--handle:hover {
    opacity: 0.6 !important;
  }
  #snt-root .snt-ra--handle.snt-ra--expanded:hover {
    opacity: var(--snt-ra-opacity-hover) !important;
  }
}

/* ── Horizontal Handle (top / bottom positions) ── */
#snt-root .snt-ra--handle-h {
  height: 4px;
  min-width: 52px;
  width: auto;
}

/* Horizontal text */
#snt-root .snt-ra--handle-h .snt-ra__text        { padding: 5px 16px; font-size: 10px; }
#snt-root .snt-ra--handle-h.snt-ra--size-small  .snt-ra__text { padding: 4px 12px; font-size:  9px; }
#snt-root .snt-ra--handle-h.snt-ra--size-medium .snt-ra__text { padding: 5px 16px; font-size: 10px; }
#snt-root .snt-ra--handle-h.snt-ra--size-large  .snt-ra__text { padding: 6px 20px; font-size: 11px; }

/* Horizontal expanded heights */
#snt-root .snt-ra--handle-h.snt-ra--size-small.snt-ra--expanded  { height: 24px; }
#snt-root .snt-ra--handle-h.snt-ra--size-medium.snt-ra--expanded { height: 28px; }
#snt-root .snt-ra--handle-h.snt-ra--size-large.snt-ra--expanded  { height: 32px; }

/* Bottom positions — expand upward */
#snt-root .snt-ra--handle-h.snt-ra--pos-bottom-left,
#snt-root .snt-ra--handle-h.snt-ra--pos-bottom-center,
#snt-root .snt-ra--handle-h.snt-ra--pos-bottom-right {
  bottom: calc(0px + var(--snt-ra-y-offset, 0px));
  top: auto;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.12);
}
#snt-root .snt-ra--handle-h.snt-ra--pos-bottom-left.snt-ra--expanded,
#snt-root .snt-ra--handle-h.snt-ra--pos-bottom-center.snt-ra--expanded,
#snt-root .snt-ra--handle-h.snt-ra--pos-bottom-right.snt-ra--expanded {
  border-radius: 6px 6px 0 0;
}
#snt-root .snt-ra--handle-h.snt-ra--pos-bottom-left   { left: 24px; transform: none; }
#snt-root .snt-ra--handle-h.snt-ra--pos-bottom-center { left: 50%;  transform: translateX(-50%); }
#snt-root .snt-ra--handle-h.snt-ra--pos-bottom-right  { right: 24px; left: auto; transform: none; }

/* Top positions — expand downward */
#snt-root .snt-ra--handle-h.snt-ra--pos-top-left,
#snt-root .snt-ra--handle-h.snt-ra--pos-top-center,
#snt-root .snt-ra--handle-h.snt-ra--pos-top-right {
  top: calc(0px + var(--snt-ra-y-offset, 0px));
  bottom: auto;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}
#snt-root .snt-ra--handle-h.snt-ra--pos-top-left.snt-ra--expanded,
#snt-root .snt-ra--handle-h.snt-ra--pos-top-center.snt-ra--expanded,
#snt-root .snt-ra--handle-h.snt-ra--pos-top-right.snt-ra--expanded {
  border-radius: 0 0 6px 6px;
}
#snt-root .snt-ra--handle-h.snt-ra--pos-top-left   { left: 24px; transform: none; }
#snt-root .snt-ra--handle-h.snt-ra--pos-top-center { left: 50%;  transform: translateX(-50%); }
#snt-root .snt-ra--handle-h.snt-ra--pos-top-right  { right: 24px; left: auto; transform: none; }

/* Mobile bottom/top offset */
@media (max-width: 768px) {
  #snt-root .snt-ra--handle-h.snt-ra--pos-bottom-left,
  #snt-root .snt-ra--handle-h.snt-ra--pos-bottom-center,
  #snt-root .snt-ra--handle-h.snt-ra--pos-bottom-right {
    bottom: calc(4px + var(--snt-ra-y-offset, 0px));
  }
  #snt-root .snt-ra--handle-h.snt-ra--pos-top-left,
  #snt-root .snt-ra--handle-h.snt-ra--pos-top-center,
  #snt-root .snt-ra--handle-h.snt-ra--pos-top-right {
    top: calc(4px + var(--snt-ra-y-offset, 0px));
  }
}

/* ── Vertical Handle (middle-left / middle-right) — expands toward center ── */
#snt-root .snt-ra--handle-v {
  width: 4px;
  min-height: 52px;
  height: auto;
  min-width: 0;
  top: calc(50% - var(--snt-ra-y-offset, 0px));
  left: auto;
  bottom: auto;
  transform: translateY(-50%);
}

/* Vertical text — horizontal reading direction */
#snt-root .snt-ra--handle-v .snt-ra__text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 12px;
  writing-mode: horizontal-tb;
  font-size: 10px;
}
#snt-root .snt-ra--handle-v.snt-ra--size-small  .snt-ra__text { padding: 0 10px; font-size:  9px; }
#snt-root .snt-ra--handle-v.snt-ra--size-medium .snt-ra__text { padding: 0 12px; font-size: 10px; }
#snt-root .snt-ra--handle-v.snt-ra--size-large  .snt-ra__text { padding: 0 14px; font-size: 11px; }

/* Vertical min-height by size */
#snt-root .snt-ra--handle-v.snt-ra--size-small  { min-height: 44px; }
#snt-root .snt-ra--handle-v.snt-ra--size-medium { min-height: 52px; }
#snt-root .snt-ra--handle-v.snt-ra--size-large  { min-height: 64px; }

/* Vertical expanded widths */
#snt-root .snt-ra--handle-v.snt-ra--size-small.snt-ra--expanded  { width: 60px; }
#snt-root .snt-ra--handle-v.snt-ra--size-medium.snt-ra--expanded { width: 76px; }
#snt-root .snt-ra--handle-v.snt-ra--size-large.snt-ra--expanded  { width: 90px; }

/* Middle left — expands to the right (toward center) */
#snt-root .snt-ra--handle-v.snt-ra--pos-middle-left {
  left: 0;
  border-radius: 0 3px 3px 0;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.12);
}
#snt-root .snt-ra--handle-v.snt-ra--pos-middle-left.snt-ra--expanded {
  border-radius: 0 6px 6px 0;
}

/* Middle right — expands to the left (toward center) */
#snt-root .snt-ra--handle-v.snt-ra--pos-middle-right {
  right: 0;
  left: auto;
  border-radius: 3px 0 0 3px;
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.12);
}
#snt-root .snt-ra--handle-v.snt-ra--pos-middle-right.snt-ra--expanded {
  border-radius: 6px 0 0 6px;
}

/* Legacy position variants (backward compat for old 3-value system) */
#snt-root .snt-ra--handle.snt-ra--pos-left   { left: 24px; transform: none; }
#snt-root .snt-ra--handle.snt-ra--pos-center { left: 50%; transform: translateX(-50%); }
#snt-root .snt-ra--handle.snt-ra--pos-right  { left: auto; right: 24px; transform: none; }


/* ================================================================
   TYPE: ICON — Floating Icon (elegant, small circular button)
   All 9 positions supported. Y-offset = vertical nudge,
   X-offset = horizontal nudge. Neither overrides the position.
   ================================================================ */
#snt-root .snt-ra--icon {
  position: fixed;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.12);
  transition: opacity 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* ── Top row ── */
#snt-root .snt-ra--icon.snt-ra--pos-top-left {
  top:  calc(16px - var(--snt-ra-y-offset, 0px));
  left: calc(16px + var(--snt-ra-x-offset, 0px));
}
#snt-root .snt-ra--icon.snt-ra--pos-top-center {
  top:  calc(16px - var(--snt-ra-y-offset, 0px));
  left: calc(50% + var(--snt-ra-x-offset, 0px));
  transform: translateX(-50%);
}
#snt-root .snt-ra--icon.snt-ra--pos-top-right {
  top:   calc(16px - var(--snt-ra-y-offset, 0px));
  right: calc(16px + var(--snt-ra-x-offset, 0px));
}

/* ── Middle row ── */
#snt-root .snt-ra--icon.snt-ra--pos-middle-left {
  top:  calc(50% - var(--snt-ra-y-offset, 0px));
  left: calc(16px + var(--snt-ra-x-offset, 0px));
  transform: translateY(-50%);
}
#snt-root .snt-ra--icon.snt-ra--pos-center {
  top:  calc(50% - var(--snt-ra-y-offset, 0px));
  left: calc(50% + var(--snt-ra-x-offset, 0px));
  transform: translate(-50%, -50%);
}
#snt-root .snt-ra--icon.snt-ra--pos-middle-right {
  top:   calc(50% - var(--snt-ra-y-offset, 0px));
  right: calc(16px + var(--snt-ra-x-offset, 0px));
  transform: translateY(-50%);
}

/* ── Bottom row ── */
#snt-root .snt-ra--icon.snt-ra--pos-bottom-left {
  bottom: calc(16px + var(--snt-ra-y-offset, 0px));
  left:   calc(16px + var(--snt-ra-x-offset, 0px));
}
#snt-root .snt-ra--icon.snt-ra--pos-bottom-center {
  bottom: calc(16px + var(--snt-ra-y-offset, 0px));
  left:   calc(50% + var(--snt-ra-x-offset, 0px));
  transform: translateX(-50%);
}
#snt-root .snt-ra--icon.snt-ra--pos-bottom-right {
  bottom: calc(16px + var(--snt-ra-y-offset, 0px));
  right:  calc(16px + var(--snt-ra-x-offset, 0px));
}

@media (hover: hover) {
  #snt-root .snt-ra--icon.snt-ra--visible:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(0,0,0,0.22), 0 2px 5px rgba(0,0,0,0.14);
  }
  /* Positions with translateX(-50%): combine to avoid clobbering centering */
  #snt-root .snt-ra--icon.snt-ra--pos-top-center.snt-ra--visible:hover,
  #snt-root .snt-ra--icon.snt-ra--pos-bottom-center.snt-ra--visible:hover {
    transform: translateX(-50%) scale(1.08);
  }
  /* Positions with translateY(-50%) */
  #snt-root .snt-ra--icon.snt-ra--pos-middle-left.snt-ra--visible:hover,
  #snt-root .snt-ra--icon.snt-ra--pos-middle-right.snt-ra--visible:hover {
    transform: translateY(-50%) scale(1.08);
  }
  /* True center uses translate(-50%, -50%) */
  #snt-root .snt-ra--icon.snt-ra--pos-center.snt-ra--visible:hover {
    transform: translate(-50%, -50%) scale(1.08);
  }
}

#snt-root .snt-ra--icon.snt-ra--size-small  { width: 28px; height: 28px; }
#snt-root .snt-ra--icon.snt-ra--size-medium { width: 36px; height: 36px; }
#snt-root .snt-ra--icon.snt-ra--size-large  { width: 44px; height: 44px; }

#snt-root .snt-ra--icon svg { display: block; }

/* ================================================================
   TYPE: BUTTON — pill-style floating button
   All 9 positions supported. Y/X offsets work same as icon.
   ================================================================ */
#snt-root .snt-ra--button {
  position: fixed;
  padding: 5px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* ── Top row ── */
#snt-root .snt-ra--button.snt-ra--pos-top-left {
  top:  calc(20px - var(--snt-ra-y-offset, 0px));
  left: calc(16px + var(--snt-ra-x-offset, 0px));
}
#snt-root .snt-ra--button.snt-ra--pos-top-center {
  top:  calc(20px - var(--snt-ra-y-offset, 0px));
  left: calc(50% + var(--snt-ra-x-offset, 0px));
  transform: translateX(-50%);
}
#snt-root .snt-ra--button.snt-ra--pos-top-right {
  top:   calc(20px - var(--snt-ra-y-offset, 0px));
  right: calc(16px + var(--snt-ra-x-offset, 0px));
}

/* ── Middle row ── */
#snt-root .snt-ra--button.snt-ra--pos-middle-left {
  top:  calc(50% - var(--snt-ra-y-offset, 0px));
  left: calc(16px + var(--snt-ra-x-offset, 0px));
  transform: translateY(-50%);
}
#snt-root .snt-ra--button.snt-ra--pos-center {
  top:  calc(50% - var(--snt-ra-y-offset, 0px));
  left: calc(50% + var(--snt-ra-x-offset, 0px));
  transform: translate(-50%, -50%);
}
#snt-root .snt-ra--button.snt-ra--pos-middle-right {
  top:   calc(50% - var(--snt-ra-y-offset, 0px));
  right: calc(16px + var(--snt-ra-x-offset, 0px));
  transform: translateY(-50%);
}

/* ── Bottom row ── */
#snt-root .snt-ra--button.snt-ra--pos-bottom-left {
  bottom: calc(20px + var(--snt-ra-y-offset, 0px));
  left:   calc(16px + var(--snt-ra-x-offset, 0px));
}
#snt-root .snt-ra--button.snt-ra--pos-bottom-center {
  bottom: calc(20px + var(--snt-ra-y-offset, 0px));
  left:   calc(50% + var(--snt-ra-x-offset, 0px));
  transform: translateX(-50%);
}
#snt-root .snt-ra--button.snt-ra--pos-bottom-right {
  bottom: calc(20px + var(--snt-ra-y-offset, 0px));
  right:  calc(16px + var(--snt-ra-x-offset, 0px));
}

#snt-root .snt-ra--button.snt-ra--size-small  { padding: 4px 9px;  font-size: 10px; }
#snt-root .snt-ra--button.snt-ra--size-medium { padding: 5px 12px; font-size: 11px; }
#snt-root .snt-ra--button.snt-ra--size-large  { padding: 7px 16px; font-size: 13px; }

/* ================================================================
   TYPE: FOOTER LINK — subtle fixed link floating at bottom center
   Not inserted into footer DOM; floats above page structure
   ================================================================ */
.snt-ra-footer-wrap {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483600;
  pointer-events: none;
  white-space: nowrap;
}

/* Position variants for footer wrap */
.snt-ra-footer-wrap--bottom-left {
  left: 20px;
  right: auto;
  transform: none;
}
.snt-ra-footer-wrap--bottom-right {
  right: 20px;
  left: auto;
  transform: none;
}
/* bottom-center uses the default above (left:50% + translateX(-50%)) */

.snt-ra-footer-wrap .snt-ra--footer {
  position: static;
  display: inline;
  background: transparent;
  color: rgba(0, 0, 0, 0.5);
  font-size: 11px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.18s ease, color 0.15s ease;
  writing-mode: initial;
}

.snt-ra-footer-wrap .snt-ra--footer:hover { color: rgba(0, 0, 0, 0.8); }

.snt-ra-footer-wrap .snt-ra--footer.snt-ra--visible { opacity: 0.65; }

/* ================================================================
   EFFECTS (Pro)
   ================================================================ */
@keyframes snt-ra-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
  50%       { box-shadow: 0 0 0 5px rgba(99,102,241,0.25); }
}

#snt-root .snt-ra--effect-pulse.snt-ra--visible {
  animation: snt-ra-pulse 2.4s ease infinite;
}

#snt-root .snt-ra--effect-fade.snt-ra--visible {
  animation: snt-ra-fade-cycle 3s ease-in-out infinite;
}

@keyframes snt-ra-fade-cycle {
  0%, 100% { opacity: 0.65; }
  50%       { opacity: 1; }
}

#snt-root .snt-ra--effect-scale.snt-ra--visible {
  animation: snt-ra-scale-pulse 2.8s ease infinite;
}

@keyframes snt-ra-scale-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}

/* Scale must not interfere with translate-based centering */
#snt-root .snt-ra--pos-center.snt-ra--effect-scale,
#snt-root .snt-ra--pos-top-center.snt-ra--effect-scale,
#snt-root .snt-ra--pos-bottom-center.snt-ra--effect-scale,
#snt-root .snt-ra--pos-middle-left.snt-ra--effect-scale,
#snt-root .snt-ra--pos-middle-right.snt-ra--effect-scale {
  animation: none;
}

/* ================================================================
   PHASE 3.30.0 — LAYOUT BLOCKS (text_block / message_block / spacer)
   ================================================================
   Layout / visual elements rendered by sntBuildFields() alongside
   the existing data fields. They share the .snt-lead-fields 12-col
   grid via .snt-lf-w25/33/50/100 so the per-element width chooser
   continues to work uniformly. All sizing/spacing uses logical CSS
   properties so RTL behaves identically to LTR. */
#snt-root .snt-lead-fields .snt-lf-block {
  box-sizing: border-box;
  min-inline-size: 0;
  align-self: stretch;
}
/* Phase 3.30.0 hotfix — Layout blocks must participate in the same
   12-col `.snt-lead-fields` grid as data fields. The existing
   `.snt-lead-input.snt-lf-w*` rules above are scoped to inputs only,
   so without this twin block layout elements would default to a
   single grid track (1/12 width) and a longer Message Block content
   would visibly wrap as one-letter-per-line (the "alphabet-like
   broken vertical text" reported on 3.30.0). Selectors mirror the
   `.snt-lead-input.snt-lf-w*` rules byte-for-byte so widths line up
   pixel-perfect across data and layout elements. */
#snt-root .snt-lead-fields .snt-lf-block.snt-lf-w25  { grid-column: span 3; }
#snt-root .snt-lead-fields .snt-lf-block.snt-lf-w33  { grid-column: span 4; }
#snt-root .snt-lead-fields .snt-lf-block.snt-lf-w50  { grid-column: span 6; }
#snt-root .snt-lead-fields .snt-lf-block.snt-lf-w100 { grid-column: span 12; }
#snt-root .snt-lead-fields .snt-lf-block:not(.snt-lf-w25):not(.snt-lf-w33):not(.snt-lf-w50):not(.snt-lf-w100) { grid-column: span 12; }
/* Centered flex mode (`.snt-fpos-center` switches `.snt-lead-fields`
   from grid to flex) — give layout blocks the same width calc as
   data inputs so they don't collapse to intrinsic content width. */
#snt-root .snt-lead-fields.snt-fpos-center .snt-lf-block          { flex: 0 0 auto; }
#snt-root .snt-lead-fields.snt-fpos-center .snt-lf-block.snt-lf-w25  { width: calc(25% - 5px); }
#snt-root .snt-lead-fields.snt-fpos-center .snt-lf-block.snt-lf-w33  { width: calc(33.333% - 4px); }
#snt-root .snt-lead-fields.snt-fpos-center .snt-lf-block.snt-lf-w50  { width: calc(50% - 3px); }
#snt-root .snt-lead-fields.snt-fpos-center .snt-lf-block.snt-lf-w100 { width: 100%; }
#snt-root .snt-lead-fields.snt-fpos-center .snt-lf-block:not(.snt-lf-w25):not(.snt-lf-w33):not(.snt-lf-w50):not(.snt-lf-w100) { width: 100%; }
/* Text Block — compact title + body. Inherits the form's font so
   it visually fits as native form content (NOT chrome). */
#snt-root .snt-lead-fields .snt-lf-block--text_block {
  padding: 0;
}
#snt-root .snt-lead-fields .snt-lf-block--text_block .snt-lf-block__title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  margin-block-end: 2px;
  color: inherit;
}
#snt-root .snt-lead-fields .snt-lf-block--text_block .snt-lf-block__content {
  font-size: 12px;
  line-height: 1.45;
  color: inherit;
  opacity: 0.85;
}
/* Message Block — slightly stronger visual treatment for longer
   explanatory content. Subtle background + start-aligned border so
   the block reads as a callout without dominating the form. */
#snt-root .snt-lead-fields .snt-lf-block--message_block {
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(127,127,127,0.06);
  border-inline-start: 3px solid rgba(99,102,241,0.45);
}
#snt-root .snt-lead-fields .snt-lf-block--message_block .snt-lf-block__title {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  margin-block-end: 4px;
  color: inherit;
}
#snt-root .snt-lead-fields .snt-lf-block--message_block .snt-lf-block__content {
  font-size: 13px;
  line-height: 1.5;
  color: inherit;
  opacity: 0.9;
  white-space: normal;
  word-wrap: break-word;
}
/* Spacer — pure transparent space by default; the divider line is
   appended only when `line=1`. The wrapper carries the configured
   block-size; the inner .snt-lf-block__line uses logical inline-size
   so RTL is byte-identical. */
#snt-root .snt-lead-fields .snt-lf-block--spacer {
  display: block;
  inline-size: 100%;
  pointer-events: none;
}
#snt-root .snt-lead-fields .snt-lf-block--spacer .snt-lf-block__line {
  border-radius: 1px;
}
/* RTL inheritance: .snt-lead-fields already sets direction: rtl on
   the parent under .snt-ann[dir="rtl"], so the logical properties
   above flip automatically — no per-direction overrides required. */