/* —— 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;
}

#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 {
  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;
}

#snt-root .snt-ann__btn--whatsapp {
  background: #fff;
  color: #1a1a1a !important;
  border: 1.5px solid #25D366 !important;
  border-radius: 50px;
  padding: 6px 16px;
  gap: 6px;
}
#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; }
}

/* ── 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: 3px 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 — two-row layout: title + hide btn on top, controls below —— */
.sna-preview__header {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 9px 12px 7px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}

.sna-preview__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.sna-preview__title {
  flex: 1 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;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.sna-preview__notice-sel {
  min-width: 0 !important;
  max-width: 130px !important;
  font-size: 11px;
  flex-shrink: 1;
}

#sn_preview_animation_btn.button-small {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 11px;
  padding: 2px 8px;
}

@media (max-width: 700px) {
  .sna-preview__notice-sel {
    max-width: 90px !important;
  }
}

@media (max-width: 480px) {
  .sna-preview__notice-sel {
    max-width: 72px !important;
    font-size: 10px;
  }
  #sn_preview_animation_btn.button-small {
    font-size: 10px;
    padding: 2px 6px;
  }
  .sna-preview__toggle-btn {
    font-size: 11px;
    padding: 2px 7px;
  }
}

/* —— 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;
}

/* —— 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 */
#snt-root .snt-ra.snt-ra--visible,
.snt-ra-footer-wrap .snt-ra.snt-ra--visible {
  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 (positioned near bottom)
   ================================================================ */
#snt-root .snt-ra--tab {
  position: fixed;
  bottom: 30px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 10px 6px;
  border-radius: var(--snt-ra-radius, 4px) var(--snt-ra-radius, 4px) 0 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

#snt-root .snt-ra--tab.snt-ra--pos-left   { left: 0; transform: rotate(180deg); border-radius: 0 4px 4px 0; }
#snt-root .snt-ra--tab.snt-ra--pos-right  { right: 0; transform: none; border-radius: 4px 0 0 4px; }
#snt-root .snt-ra--tab.snt-ra--pos-center { right: 0; transform: none; border-radius: 4px 0 0 4px; }

#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)
   ================================================================ */
#snt-root .snt-ra--handle {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  /* Collapsed state: thin elegant bar */
  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,
    min-width 0.28s ease-in-out,
    border-radius 0.25s ease-in-out,
    opacity 0.25s ease;
}

/* Collapsed visible bar — override base 0.9 */
#snt-root .snt-ra--handle.snt-ra--visible {
  opacity: 0.38;
}

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

/* ── Expanded state ── */
#snt-root .snt-ra--handle.snt-ra--expanded {
  height: 28px;
  border-radius: 6px 6px 0 0;
  opacity: 0.9 !important;
}

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

/* Position variants */
#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; }

/* Size variants — expanded heights and text padding */
#snt-root .snt-ra--handle.snt-ra--size-small  .snt-ra__text { padding: 4px 12px; font-size:  9px; }
#snt-root .snt-ra--handle.snt-ra--size-medium .snt-ra__text { padding: 5px 16px; font-size: 10px; }
#snt-root .snt-ra--handle.snt-ra--size-large  .snt-ra__text { padding: 6px 20px; font-size: 11px; }

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

/* 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;
  }
}

/* Mobile: slightly lower bottom for safe area spacing */
@media (max-width: 768px) {
  #snt-root .snt-ra--handle { bottom: 22px; }
}

/* ================================================================
   TYPE: ICON — Floating Icon (elegant, small circular button)
   ================================================================ */
#snt-root .snt-ra--icon {
  position: fixed;
  bottom: 30px;
  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;
}

@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);
  }
}

#snt-root .snt-ra--icon.snt-ra--pos-left   { left: 30px; }
#snt-root .snt-ra--icon.snt-ra--pos-center { left: 50%; transform: translateX(-50%); }
#snt-root .snt-ra--icon.snt-ra--pos-right  { right: 30px; left: auto; }

#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, minimal
   ================================================================ */
#snt-root .snt-ra--button {
  position: fixed;
  bottom: 80px;
  padding: 5px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

#snt-root .snt-ra--button.snt-ra--pos-left   { left: 16px; }
#snt-root .snt-ra--button.snt-ra--pos-center { left: 50%; transform: translateX(-50%); }
#snt-root .snt-ra--button.snt-ra--pos-right  { right: 16px; }

#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;
}

.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; }

/* ================================================================
   POSITION: custom pixel override (Pro)
   ================================================================ */
#snt-root .snt-ra--custom-pos.snt-ra--tab,
#snt-root .snt-ra--custom-pos.snt-ra--icon,
#snt-root .snt-ra--custom-pos.snt-ra--button {
  left: auto;
  right: auto;
  bottom: auto;
  top: var(--snt-ra-y, auto);
  right: var(--snt-ra-x, auto);
  transform: none;
}

/* ================================================================
   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 {
  animation: none;
}