@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --sl-bg-page: #f4f3f9;
  --sl-color-text: #060721;
  --sl-color-primary: #006aff;
  --sl-color-muted: #5c7187;
  --sl-border: #e5e7eb;
  --sl-radius-lg: 12px;
  --sl-shadow-card:
    0 1px 3px 0 rgba(96, 108, 128, 0.05),
    0 1px 2px -1px rgba(96, 108, 128, 0.05);
  --sl-brand-green: #2fcc72;
  --sl-brand-green-hover: #008a44;
  --sl-tab-active-bg: #2d3748;
  --sl-tab-inactive-bg: #e8eaed;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../font/SalesforceSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../font/SalesforceSans-Bold.woff2") format("woff2");
}

.shadow-custom {
  box-shadow: 0 1px 3px 0 rgba(96, 108, 128, 0.05);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* The percentage height chain starts here: `h-full` / `height:100%` descendants resolve
   against nothing unless html and body carry a definite height of their own. */
html,
body {
  height: 100%;
}

/* Access gate (see the inline script in index.html). The attribute is set during head parse, so
   this hides the app markup before it can paint — the script then replaces the body once the DOM
   is ready. Without the `visibility` rule the real UI flashes for one frame first. */
html[data-sl-access-denied="true"] body > *:not(.sl-access-denied) {
  visibility: hidden !important;
}

html[data-sl-access-denied="true"],
html[data-sl-access-denied="true"] body {
  overflow: hidden;
  background: var(--sl-bg-page);
}

.sl-access-denied {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 100vh;
  padding: 2rem 1rem;
  text-align: center;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--sl-color-text);
}

.sl-access-denied h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.sl-access-denied p {
  margin: 0;
  max-width: 32rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sl-color-muted);
}

body {
  background-color: var(--sl-bg-page);
  color: var(--sl-color-text);
  min-width: 0;
  overflow-x: hidden;
}

/* Mobile viewport fix:
   Tailwind `h-screen` uses 100vh, which can clip content under the browser UI on small screens.
   Prefer dynamic viewport units when supported so top content isn't cut off while scrolling. */
.h-screen {
  min-height: 100vh;
}
@supports (height: 100dvh) {
  .h-screen {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
  }
}

/* typography */

.heading {
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.75rem;
  letter-spacing: -0.01em;
}

.bodyText {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.smallText {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5rem;
}

/* Centered app shell — avoids edge-to-edge stretch on ultrawide monitors */
.customContainer {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
}

/* Message selection card (template dropdown) — Figma-style panel */
.sl-msg-selection {
  max-width: 100%;
  overflow: visible;
  position: relative;
  z-index: 1;
}

/* Brand logo — fixed visual size; never stretch to full width */
.sl-brand-logo-wrap {
  max-width: min(15rem, 55vw);
  width: 100%;
}

.sl-brand-logo {
  height: 2.125rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.sl-topmenu-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
  justify-self: start;
}

.sl-topmenu-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  text-align: center;
  justify-self: center;
  min-width: 0;
}

.sl-topmenu-end {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  justify-content: flex-end;
  justify-self: end;
  min-width: 0;
}

.sl-topmenu-brand-logo {
  height: 2rem;
  width: auto;
  max-width: min(9.125rem, 42vw);
  object-fit: contain;
  object-position: left center;
}

@media (min-width: 640px) {
  .sl-brand-logo {
    height: 2.125rem;
  }

  .sl-brand-logo-wrap {
    max-width: 16.25rem;
  }

  .sl-topmenu-brand-logo {
    height: 2.125rem;
    max-width: min(10rem, 48vw);
  }
}

.noOutline:focus {
  outline: none;
}

.messageCardContainer ::-webkit-scrollbar {
  height: 0;
}

button {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5rem;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--sl-color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Step tabs (Figma pill style) — updateTabs toggles .text-primary / .text-secondaryText */
#tab-list.sl-pill-tabs {
  border-bottom: none;
  display: inline-flex;
  gap: 0.5rem;
  padding: 0.375rem;
  /* margin: 0 16px 0; */
  background: #eef0f3;
  border-radius: 0.5rem;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

#tab-list.sl-pill-tabs > li {
  border-bottom: none !important;
  margin-bottom: 0;
  border-radius: 0.25rem;
  padding: 0.625rem 1.125rem !important;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

#tab-list.sl-pill-tabs > li.text-primary {
  background: var(--sl-tab-active-bg);
  color: #ffffff !important;
  font-weight: 600;
}

#tab-list.sl-pill-tabs > li.text-primary .bodyText {
  color: #ffffff !important;
}

#tab-list.sl-pill-tabs > li.text-secondaryText {
  color: #4a5568 !important;
  font-weight: 500;
}

#tab-list.sl-pill-tabs > li.text-secondaryText .bodyText {
  color: #4a5568 !important;
}

.sl-config-card .heading {
  color: var(--sl-color-text);
}

/* Step complete — green checkmark on past steps (Figma) */
#tab-list.sl-pill-tabs > li .sl-tab-check {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--sl-brand-green);
}

#tab-list.sl-pill-tabs > li.sl-tab-done .sl-tab-check {
  display: inline-flex;
}

#tab-list.sl-pill-tabs > li.text-primary .sl-tab-check {
  display: none;
}

.sl-preview-toggle {
  display: flex !important;
  width: 100%;
  max-width: 21rem;
  gap: 0 !important;
  padding: 0.375rem;
  background: #eef0f3;
  border-radius: 0.5rem;
}

/* `gap` was not always visible between the two pills — margin is reliable */
.sl-preview-toggle-btn + .sl-preview-toggle-btn {
  margin-left: 10px !important;
}

.sl-preview-toggle-btn {
  flex: 1;
  border: none;
  background: transparent;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #4a5568;
  border-radius: 0.375rem;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  font-family: inherit;
}

/* Secondary plain body: align first line with top padding (no “floating” block) */
#jsonInputSecondaryPlain.sl-secondary-body-plain {
  box-sizing: border-box;
  vertical-align: top;
  line-height: 1.4 !important;
  padding: 6px 10px 10px !important;
  text-align: left !important;
  text-indent: 0 !important;
  direction: ltr;
}

.sl-preview-toggle-btn--active {
  background: var(--sl-tab-active-bg);
  color: #ffffff;
}

.sl-preview-toggle-btn:not(.sl-preview-toggle-btn--active):hover {
  color: var(--sl-color-text);
}

.sl-preview-toggle-btn:disabled {
  color: #94a3b8;
  background: transparent;
  cursor: not-allowed;
  opacity: 0.6;
}

.sl-preview-toggle-btn:disabled:hover {
  color: #94a3b8;
  background: transparent;
}

/* Live preview: numbered strip picker (sync with primary / secondary per row) */
.sl-preview-strip-shell {
  width: 100%;
  max-width: 22rem;
  margin: 0.375rem auto 0.375rem;
}

.sl-preview-strip-nav {
  gap: 1rem;
  padding-block: 0.5rem;
  /* flex-start: centering clipped pill "1" and "10" when 10 cards overflow the column */
  justify-content: flex-start;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sl-preview-strip-nav::-webkit-scrollbar {
  display: none;
}

/* Hide native scrollbar on tab tracks; use ‹ › arrows when many cards (overflow still scrolls). */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Configuration CARD 1…N tabs — keep left-aligned; do not change this row for preview layout. */
#sl-content-sub-tabs-shell .sl-content-sub-tabs-track {
  justify-content: flex-start;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#sl-content-sub-tabs-shell .sl-content-sub-tabs-track::-webkit-scrollbar {
  display: none;
}

/* Live preview numbered pills only (not #contentSubTabs). */
.sl-preview-strip-shell:not(.sl-content-sub-tabs-shell--scrollable) .sl-preview-strip-nav {
  justify-content: center;
}

.sl-preview-strip-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: #94a3b8;
  background: #ffffff;
  border: 1px solid #dbe3ea;
  border-radius: 0.5rem;
  cursor: pointer;
  font-family: inherit;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  margin-bottom: -1px;
  white-space: nowrap;
}
.sl-preview-strip-pill:hover {
  color: #64748b;
  border-color: #cbd5e1;
}
.sl-preview-strip-pill--active {
  color: #00a651;
  background-color: #ffffff;
  border-color: #00a651;
  border-bottom-color: #00a651;
  box-shadow: none;
  font-weight: 400;
}
.sl-preview-strip-pill--active:hover {
  color: #00a651;
  background-color: #ffffff;
  border-color: #00a651;
}
.sl-preview-strip-pill-label {
  display: none;
}
.sl-preview-strip-pill-label--full {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.sl-preview-strip-pill--full-label {
  min-width: 7.5rem;
  padding: 0.5rem 0.75rem;
}
.sl-preview-strip-pill-num {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.sl-preview-strip-pill-sec {
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.7rem;
  height: 0.7rem;
  min-width: 0.7rem;
  min-height: 0.7rem;
  padding: 0;
  border-radius: 9999px;
  border: 1px solid #ffffff;
  color: transparent;
  font-size: 0;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  pointer-events: none;
}
/* Toggle on, configuration incomplete */
.sl-preview-strip-pill-sec--partial {
  background: #94a3b8;
}
/* Secondary fully configured */
.sl-preview-strip-pill-sec--complete {
  background: #00a651;
}
/* Active card: green outline only (pill--active). Dot color follows partial vs complete. */
.sl-preview-strip-pill--active .sl-preview-strip-pill-sec--partial {
  background: #94a3b8;
}
.sl-preview-strip-pill--active .sl-preview-strip-pill-sec--complete {
  background: #00a651;
}
.sl-preview-strip-pill-dot {
  display: none;
}

#customPaginationDots,
#customSecondaryPaginationDots {
  display: none !important;
}

.pagination-dots,
.pagination-dot-customPaginationDots,
.pagination-dot-customSecondaryPaginationDots {
  display: none !important;
}

/* Primary CTA (Next) — brand green; label white by default, dark on hover */
#nextButton:not(:disabled),
#nextButtonSecondary:not(:disabled),
#verifyButton.sl-validate-json {
  background-color: var(--sl-brand-green) !important;
  border-color: var(--sl-brand-green) !important;
  color: #ffffff !important;
}

#nextButton:not(:disabled) img,
#nextButtonSecondary:not(:disabled) img {
  filter: brightness(0) invert(1);
  transition: filter 0.15s ease;
}

#validateBtn.sl-validate-json--ok {
  background: #ffffff !important;
  border: 1px solid #dbe3ea !important;
  color: #273444 !important;
  box-shadow: none !important;
}

#validateBtn.sl-validate-json--ok:hover {
  background: #f8fafc !important;
  border-color: #dbe3ea !important;
}

#validateBtn.sl-validate-json--ok #validateBtnLabel {
  color: #16a34a !important;
  letter-spacing: 0.12em;
}

#validateBtn.sl-validate-json--ok img,
#validateBtn.sl-validate-json--ok:hover img {
  filter: none !important;
}

#validateBtn.sl-validate-json--bad {
  border-color: #fca5a5;
  color: #b91c1c;
  background-color: #fef2f2;
}

#nextButton:not(:disabled):hover,
#nextButtonSecondary:not(:disabled):hover {
  background-color: var(--sl-brand-green-hover) !important;
  border-color: var(--sl-brand-green-hover) !important;
  color: #0f172a !important;
}

#nextButton:not(:disabled):hover img,
#nextButtonSecondary:not(:disabled):hover img {
  filter: none;
}

/* Live preview column — Figma: airy strip beside form, phone vertically centered */
.sl-preview-column {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 0.75rem 1rem;
  background: #f7fafc;
}

/* Respect safe-area and prevent top clipping on small screens */
@supports (padding: max(0px)) {
  .sl-preview-column {
    padding-top: max(0.75rem, env(safe-area-inset-top));
  }
}

@media (min-width: 1280px) {
  .sl-preview-column {
    padding: 0.5rem 1.25rem 1.5rem 1rem;
    border-left: 1px solid rgba(226, 232, 240, 0.9);

     overflow-y: auto;   
     overflow-x: hidden;

  scroll-padding-top: 0;  /* prevents anchor/focus from hiding behind a sticky bar */

overscroll-behavior: contain;
  }
}

@media (min-width: 1440px) {
  .sl-preview-column {
    position: sticky;
    top: 1.5rem;
    /* stretch: match the config column cross-size. flex-start collapsed height when Swiper/WASM
       had no intrinsic height yet, hiding carousel cards until window resize. */
    align-self: stretch;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding-right: 12px;
  }
}

.sl-preview-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* border: 1px solid var(--sl-border); */
  border-radius: 0.75rem;
  /* padding: 1.375rem 1.25rem 1.5rem; */
  /* box-shadow: var(--sl-shadow-card); */
}

.sl-preview-panel-header {
  flex-shrink: 0;
  /* margin-bottom: 1.125rem; */
  padding-bottom: 0.125rem;
  text-align: center;
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: column;
}

.sl-preview-engine-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #555f71;
  line-height: 1.3;
}

.sl-preview-engine-subtitle {
  font-size: 0.6875rem;
  font-weight: 400;
  color: #546166;
  margin-top: 0.375rem;
  line-height: 1.45;
  max-width: 18.75rem;
}

.sl-message-summary {
  flex-shrink: 0;
  margin-top: 1rem;
  padding: 10px 16px 10px 16px;
  border: 1px solid rgba(0, 166, 81, 0.45);
  border-radius: 0.625rem;
  background: #fafcfb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  text-align: center;
}

.sl-message-summary h3 {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: #4a5568;
  /* margin-bottom: 0.875rem; */
}

.sl-message-summary dl {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  margin: 0;
  width: 100%;
}

.sl-message-summary dt {
  width: 50%;
  color: #546166;
  font-weight: 500;
  text-align: left;
  padding: 0.25rem 0;
}

.sl-message-summary dd {
   width: 50%;
  font-weight: 600;
  color: #1a202c;
  text-align: right;
  text-transform: capitalize;
  padding: 0.25rem 0;
}

.sl-json-toolbar button.sl-json-icon-btn {
  background: transparent;
  border: 1px solid var(--sl-border);
  color: var(--sl-color-text);
}

.sl-json-toolbar button.sl-json-icon-btn:hover {
  background: #f3f4f6;
}

.sl-json-editor-shell {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 100%;
  min-height: 22rem;
  max-height: min(58vh, 36rem);
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 1.125rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  overflow: hidden;
}

/* Secondary configure tab: use more vertical space for long JSON payloads */
#jsonInputSecondarySection .sl-json-editor-shell {
  min-height: clamp(18rem, 44vh, 34rem);
  max-height: min(62vh, 40rem);
}

.sl-json-editor-toolbar {
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  /* background-color: #FBFCFD; */
  /* padding: 0.875rem 1.1875rem 0.75rem; */
  /* border-bottom: 1px solid var(--sl-border); */
  /* position: absolute;
 top: 1rem;
 right: 20px; */
}

.sl-json-editor-toolbar .sl-json-icon-btn {
  flex: 0 0 auto;
  width: 2.0625rem;
  height: 2.0625rem;
  border-radius: 0.5rem;
  background: #ffffff;
}

.sl-json-editor-surface {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  min-height: 0;
  background: #ffffff;
}

.sl-json-editor-gutter {
  flex: 0 0 3.25rem;
  display: flex;
  align-self: stretch;
  justify-content: flex-end;
  padding: 1rem 0.75rem 1rem 0.5rem;
  background: #eff4f780;
  border-right: 1px solid #a7b4ba1a;
  color: #707d8280;
  user-select: none;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.sl-json-editor-gutter::-webkit-scrollbar {
  display: none;
}

.sl-json-editor-line-numbers {
  width: 100%;
  margin: 0;
  font-family:
    "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
  font-size: 0.875rem;
  line-height: 1.625rem;
  text-align: center;
  white-space: pre;
}

.sl-json-editor-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  position: relative;
}

/* Pencil icon (shared data URI) */
#imageUrlFieldWrap {
  position: relative;
  padding-right: 2.25rem;
  background-color: #ffffff;
}

#imageUrlInput {
  font-size: 1rem;
  line-height: 1.5;
  background-color: transparent !important;
}

#imageUrlInput::selection {
  background-color: rgba(0, 166, 81, 0.18);
  color: inherit;
}

#imageUrlFieldWrap::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 1.125rem;
  height: 1.125rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h3.75L19.81 7.94a2.65 2.65 0 1 0-3.75-3.75L3 17.25V21z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* JSON editor: pencil at bottom-right corner of the code panel */
.sl-json-editor-main::after {
  content: "";
  position: absolute;
  top: auto;
  bottom: 8px;
  right: 8px;
  width: 1.125rem;
  height: 1.125rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h3.75L19.81 7.94a2.65 2.65 0 1 0-3.75-3.75L3 17.25V21z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* Editable fields: corner pencil only — keep global input/textarea background (#eff4f780) */
#tab-content textarea:not([readonly]):not([disabled]):not(.json-editor-textarea) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h3.75L19.81 7.94a2.65 2.65 0 1 0-3.75-3.75L3 17.25V21z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-origin: border-box !important;
  background-position: right 8px bottom 8px !important;
  background-size: 1.125rem 1.125rem !important;
  padding-right: 2.25rem !important;
}

#tab-content input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="image"]):not([readonly]):not([disabled]):not(#imageUrlInput) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h3.75L19.81 7.94a2.65 2.65 0 1 0-3.75-3.75L3 17.25V21z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-origin: border-box !important;
  background-position: right 8px center !important;
  background-size: 1.125rem 1.125rem !important;
  padding-right: 2.25rem !important;
}

.json-editor-textarea {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: 100%;
  padding: 1rem 1.25rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #0f172a;
  font-family:
    "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
  font-size: 0.875rem;
  line-height: 1.625rem;
  letter-spacing: 0;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  tab-size: 2;
  box-shadow: none !important;
  resize: none;
  overflow: auto;
  box-sizing: border-box;
}

.json-editor-textarea:focus {
  outline: none;
}

.json-editor-textarea::placeholder {
  color: #94a3b8;
}

.sl-json-editor-shell:has(#jsonInput.textarea-invalid),
.sl-json-editor-shell:has(#jsonInputSecondary.textarea-invalid) {
  border-color: #d02626;
  box-shadow: 0 0 0 1px rgba(208, 38, 38, 0.12);
}

.sl-json-editor-shell:has(#jsonInput:focus-visible),
.sl-json-editor-shell:has(#jsonInputSecondary:focus-visible) {
  border-color: var(--sl-color-primary);
  box-shadow: 0 0 0 3px rgba(0, 106, 255, 0.14);
}

#secondaryValidateBtn.sl-validate-json--ok {
  background: #ffffff !important;
  border: 1px solid #dbe3ea !important;
  color: #273444 !important;
  box-shadow: none !important;
}

#secondaryValidateBtn.sl-validate-json--ok #secondaryValidateBtnLabel {
  color: #16a34a !important;
  letter-spacing: 0.12em;
}

#secondaryValidateBtn.sl-validate-json--ok img,
#secondaryValidateBtn.sl-validate-json--ok:hover img {
  filter: none !important;
}

#secondaryValidateBtn.sl-validate-json--ok:hover {
  background: #f8fafc !important;
  border-color: #dbe3ea !important;
}

#secondaryValidateBtn.sl-validate-json--bad {
  border-color: #fca5a5;
  color: #b91c1c;
  background-color: #fef2f2;
}

@media (max-width: 640px) {
  .sl-json-editor-toolbar {
    gap: 0.375rem;
    padding: 0.75rem 0.875rem 0.6875rem;
  }

  .sl-json-editor-shell {
    min-height: 18rem;
    max-height: min(52vh, 30rem);
  }

  #jsonInputSecondarySection .sl-json-editor-shell {
    min-height: clamp(16rem, 40vh, 28rem);
    max-height: min(56vh, 34rem);
  }

  .sl-json-editor-gutter {
    flex-basis: 2.75rem;
    padding: 0.875rem 0.5rem 0.875rem 0.375rem;
  }

  .json-editor-textarea {
    padding: 0.875rem 0.875rem 0.875rem 1rem !important;
    font-size: 0.8125rem;
  }

  .sl-json-editor-line-numbers {
    font-size: 0.8125rem;
  }
}

input::placeholder {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5rem;
}

textarea::placeholder {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.bg-primaryComponentBg {
  background-color: #ffffff;
}

.bg-secondaryComponentBg {
  background-color: #f6f6f6;
}

.text-primary {
  color: #006aff;
}

.text-secondaryText {
  color: #5c7187;
}

.border-primary {
  border-color: #006aff;
}

.bg-primary {
  background-color: #006aff;
}

.switch {
  --button-width: 1.75em;
  /* 50% of 3.5em */
  --button-height: 1em;
  /* 50% of 2em */
  --toggle-diameter: 0.75em;
  /* 50% of 1.5em */
  --button-toggle-offset: calc(
    (var(--button-height) - var(--toggle-diameter)) / 2
  );
  --toggle-shadow-offset: 5px;
  /* 50% of 10px */
  --toggle-wider: 1.5em;
  /* 50% of 3em */
  --color-grey: #cccccc;
  --color-green: #4296f4;
  display: flex;
}

.slider {
  display: inline-block;
  width: var(--button-width);
  height: var(--button-height);
  background-color: var(--color-grey);
  border-radius: calc(var(--button-height) / 2);
  position: relative;
  transition: 0.3s all ease-in-out;
}

.slider::after {
  content: "";
  display: inline-block;
  width: var(--toggle-diameter);
  height: var(--toggle-diameter);
  background-color: #fff;
  border-radius: calc(var(--toggle-diameter) / 2);
  position: absolute;
  top: var(--button-toggle-offset);
  transform: translateX(var(--button-toggle-offset));
  box-shadow: var(--toggle-shadow-offset) 0
    calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
  transition: 0.3s all ease-in-out;
}

.switch input[type="checkbox"]:checked + .slider {
  background-color: var(--color-green);
}

.switch input[type="checkbox"]:checked + .slider::after {
  transform: translateX(
    calc(
      var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)
    )
  );
  box-shadow: calc(var(--toggle-shadow-offset) * -1) 0
    calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.switch input[type="checkbox"] {
  display: none;
}

.switch input[type="checkbox"]:active + .slider::after {
  width: var(--toggle-wider);
}

.switch input[type="checkbox"]:checked:active + .slider::after {
  transform: translateX(
    calc(
      var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)
    )
  );
}

.text-error {
  color: #d02626;
  font-size: 14px;
  line-height: 24px;
}

/* Error / validation copy — heading 18px, body 14px */
.sl-error-heading {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

.sl-error-text {
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
}

.sl-error-text--muted {
  color: #5c7187;
}

p[id^="error"] {
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
}

.text-success {
  color: #28a745;
}

.bg-secondary {
  background-color: #8b8b8b;
}

select > option {
  padding-top: 12px !important;
}

.textarea-invalid {
  border: 1px solid #d02626;
}

/* Toast Container and Toast Styling */
.toast-container {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 2rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.toast {
  display: flex;
  align-items: center;
  background-color: #333;
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  font-size: 14px;
  opacity: 0;
  transform: translateY(-50px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.hide {
  opacity: 0;
  transform: translateY(-50px);
}

/* Optional: Customize the colors for error, success, or other types */
.toast.error {
  background-color: #e74c3c;
}

.toast.success {
  background-color: #2ecc71;
}

/* .message-card-button{
  width: 100%;
}

swiper-slide{
  min-width: 150px !important;
} */

.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 16px !important;
}

swiper-slide > .bubble {
margin-top: 0 !important;
}
.customSwiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto !important;
}



.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-slide button {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.select-wrapper select {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  /* Adjust padding to make space for the custom icon */
  appearance: none;
  /* Removes the default arrow */
  background: white;
  border: 1px solid #e8edf3;
  border-radius: 0.25rem;
  font-size: 1rem;
}

select option:disabled {
  color: #5c7187;
  /* Gray color for placeholder text */
}

/* Applying styling to the selected option */
select option:not(:disabled) {
  color: #060721;
  /* Black color for selected options */
}

.customSwiper-container swiper-slide {
  height: auto !important;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.pagination-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  gap: 8px;
  margin-left: auto;
  margin-right: auto;
}
.pagination-dots:empty {
  display: none;
}

.pagination-dot.pagination-dot-customPaginationDots.pagination-dot-customSecondaryPaginationDots {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #d1d5db;
  margin: 0 5px;
  cursor: pointer;
}

.pagination-dot.active.pagination-dot-customPaginationDots.active.pagination-dot-customSecondaryPaginationDots.active {
  background-color: #2563eb;
}

.pagination-dot-customPaginationDots {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.55);
  margin: 0 4px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pagination-dot-customPaginationDots.active {
  background-color: #ffffff;
}

.pagination-dot-customSecondaryPaginationDots {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.55);
  margin: 0 4px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pagination-dot-customSecondaryPaginationDots.active {
  background-color: #ffffff;
}

.TopMenu {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.25rem 0.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem 0.5rem 1rem;
  background-color: #ffffff;
  border-bottom: 1px solid var(--sl-border);
  box-sizing: border-box;
}

.TopMenu h3.menuitems {
  color: var(--sl-color-muted);
  font-weight: 400;
}

.menuitems {
  display: inline-block;
  margin: 0.625rem;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sl-color-primary);
  /* Text color for links */
}

a.menuitems {
  background-color: transparent;
  /* Removes the button background */
  color: #007bff;
  /* Keeps the text color */
  border: none;
  /* Removes the border */
  padding: 0;
  /* Removes the padding to eliminate button-like appearance */
  cursor: pointer;
  transition:
    color 0.3s ease,
    text-decoration 0.3s ease;
}

a.menuitems:hover {
  color: #0056b3;
  text-decoration: underline;
}

.faq {
  border-radius: 0;
  /* Removes border-radius */
}

.Floatingwdw {
  position: absolute;
  right: 0;
  top: 3.5625rem;
  height: 31.875rem;
  width: min(28.125rem, calc(100vw - 2rem));
  z-index: 4;
  border: 2px solid;
  max-height: 35.5625rem;
  overflow-y: auto;
  border: 1px solid;
  padding: 0.625rem;
  box-shadow:
    0 4px 10px rgba(255, 253, 253, 0.1),
    /* Horizontal, vertical, blur, spread */ 0 2px 4px rgba(255, 252, 252, 0.1);
  /* Creates a smooth, elegant shadow */
  background-color: white;
  /* Optional: adds background to the box */
  border-radius: 0.5rem;
  /* Optional: rounds the corners for a smoother appearance */
  margin-top: 1.25rem;
  margin-bottom: 3.125rem;
  margin-right: auto;
  margin-left: auto;
}

.visible {
  display: block;
}

.invisible {
  display: none;
}

.intro-textbox {
  width: 90%;
  /* Make the text box adapt to the container width */
  max-width: 100%;
  /* Prevent overflow */
  padding: 0.625rem;
  margin-left: 1.25rem;
  margin-right: 1.25rem;
  margin-top: 0.625rem;
  font-size: 0.875rem;
  border-radius: 0.3125rem;
  border: 1px solid #ccc;
  resize: none;
  /* Prevents resizing the box */
  box-sizing: border-box;
  /* Ensures padding is included in width calculation */
  height: auto;
  min-height: 7.5rem;
  /* Ensures enough space for 4 to 7 lines */
}

.release-details-list {
  margin-top: 10px;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.5;
  list-style: none;
  font-size: 14px;
}

.release-details-list li::before {
  content: ">";
  margin-right: 8px;
  color: #007bff;
  font-weight: bold;
}

.amodal {
  right: 0px;
  transition: 0.6s cubic-bezier(0.37, 0.61, 0.25, 1);
  overflow: hidden;
}

.rmodal {
  right: -100vw;
  transition: 0.6s cubic-bezier(0.37, 0.61, 0.25, 1);
}

#jsonDisplay {
  color: #d4d4d4;
  line-height: 1.6;
}

#jsonDisplay:focus {
  outline: 2px solid #0066cc;
}

.json-key {
  color: #9cdcfe;
}

.json-string {
  color: #ce9178;
}

.json-number {
  color: #b5cea8;
}

.json-boolean {
  color: #569cd6;
}

.json-null {
  color: #569cd6;
}

.json-bracket {
  color: #ffd700;
}

#jsonInput::-webkit-scrollbar-track {
  background-color: #f8fafc;
}

#jsonInput::-webkit-scrollbar {
  width: 0.75rem;
  height: 0.75rem;
  background-color: #f8fafc;
}

#jsonInput::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.75);
  border-radius: 999px;
  border: 3px solid #f8fafc;
}

#copyBtn,
#resetBtn,
#formatBtn {
  background: #f8fafc;
  border: 1px solid #a7b4ba33;
  padding: 10px !important;
  border-radius: 4px;
  color: #546166;
}

.custom-select-dropdown {
  position: fixed;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: calc(100vw - 1rem);
  max-height: min(60vh, 22.5rem);
  overflow-x: hidden;
  z-index: 5000;
  background: #ffffff;
  border: 1px solid var(--sl-border);
  border-radius: 0.5rem;
  box-shadow:
    0 10px 40px rgba(15, 23, 42, 0.12),
    0 4px 12px rgba(15, 23, 42, 0.08);
}

.custom-select-option:hover {
  background-color: #f3f4f6;
}

.custom-select-option.selected {
  background-color: #e5e7eb;
}

.custom-select-search {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
}

.custom-select-search,
.custom-select-dropdown > #loadingIndicator,
.custom-select-dropdown > #noResults {
  flex-shrink: 0;
}

.custom-select-dropdown.hidden {
  display: none;
}

.custom-select-dropdown[data-open-direction="up"] .custom-select-search {
  top: auto;
  bottom: 0;
}

#optionsList {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(45vh, 18rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#optionsList::-webkit-scrollbar {
  width: 0.375rem;
}

#optionsList::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.7);
  border-radius: 9999px;
}

.custom-select-option {
  transition: background-color 0.15s ease;
}

/* #tab-content, */
/* #primary-content {
  overflow: visible;
} */

/* Quick Reply Styles */
.quick-reply-container {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.75rem 0.625rem;
  /* background-color: #f8f9fa; */
  /* border-top: 1px solid #e0e0e0; */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  margin-top: 1.25rem;
}

.quick-reply-container::-webkit-scrollbar {
  height: 4px;
}

.quick-reply-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.quick-reply-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 2px;
}

.quick-reply-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 5rem;
  max-width: 7.5rem;
  padding: 0.625rem;
  background: #848d9e;
  border: 1px solid #e0e0e0;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.quick-reply-item:hover {
  background-color: #050505;
  border-color: gray;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(148, 148, 148, 0.1);
}

.quick-reply-item:active {
  transform: translateY(0);
}

.quick-reply-image {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.375rem;
}

.quick-reply-label {
  font-size: 0.75rem;
  text-align: center;
  color: #ffffff;
  word-wrap: break-word;
  line-height: 1.3;
  font-weight: 500;
}

.flex-button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

img.image,
img.icon {
  max-width: 100%;
  display: block;
  margin: 0;
  padding: 0;
}

.carousel {
  display: inline-flex;
  gap: 1rem;
  padding-bottom: 0.5rem;
  max-width: 100%;
  overflow-x: auto;
}

.filler {
  flex: 1 1 auto;
}

pre.sample {
  background: #1e293b;
  color: #f1f5f9;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  font-size: 0.75rem;
  overflow: auto;
}

footer {
  margin-top: 2rem;
  font-size: 0.7rem;
  color: #555;
  text-align: center;
}

/* Video two-part container styles */
.video-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  align-items: stretch;
  margin: 0;
  padding: 0;
}

.video-preview {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.video-preview img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  max-height: 220px;
}

.video-player {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 2px 6px #00000014;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: auto;
  /* max-width removed to prevent stretching */
  max-height: 180px;
  background: #000;
}

/* Remove padding for nano bubbles so they render at exactly 120px wide */
.bubble[style*="width:120px"] > .header,
.bubble[style*="width:120px"] > .body,
.bubble[style*="width:120px"] > .footer,
.bubble[style*="width:120px"] > .hero {
  padding: 0 !important;
}
/* ============================================
   Content sub-tabs (Textual / Visual — shown for mixed messages)
   ============================================ */

.sl-content-sub-tabs-shell {
  position: relative;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 0.375rem;
  padding-bottom: 4px;
}

.sl-content-sub-tabs-track {
  scroll-behavior: smooth;
  /* padding-right: 40px; */
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0.5rem 0.125rem;
}

.sl-content-sub-tabs-shell:has(.sl-content-sub-tabs-arrow--left:not([hidden]))
  .sl-content-sub-tabs-track {
  padding-left: 8px;
}

.sl-content-sub-tabs-shell:has(.sl-content-sub-tabs-arrow--right:not([hidden]))
  .sl-content-sub-tabs-track {
  padding-right: 8px;
}

/* .sl-content-sub-tabs-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #d0d7e2;
  border-radius: 9999px;
  background: #5A6367;
  color: #5c7187;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
  transform: translateY(-50%);
  transition:
    opacity 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
} */

.sl-content-sub-tabs-arrow {
  position: static;
  transform: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  min-width: 2.125rem;
  border: 1px solid #d0d7e2;
  border-radius: 9999px;
  background: #5a6367;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
  transition:
    opacity 0.15s ease,
    box-shadow 0.15s ease;
  cursor: pointer;
}

.sl-content-sub-tabs-arrow span {
  color: #ffffff;
  font-size: 1.375rem;
  line-height: 1;
}

.sl-content-sub-tabs-arrow:hover {
  color: var(--sl-color-text);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16);
}

.sl-content-sub-tabs-arrow[hidden] {
  display: none !important;
}

.sl-content-sub-tabs-arrow--left {
  left: unset;
}

.sl-content-sub-tabs-arrow--right {
  right: unset;
}

.sl-content-sub-tab {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--sl-color-text);
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
  font-family: inherit;
  text-transform: uppercase;
  margin-bottom: -1px;
  margin-right: 8px;
  min-width: 9rem;
  border-radius: 0.25rem;
  border: 1px solid var(--sl-brand-green);
}
#secondaryFlexCarouselCardsShell #secondaryFlexCarouselCardsRow .sl-content-sub-tab{
border-radius: 4px !important;
}

.sl-content-sub-tab:not(.sl-content-sub-tab--active):hover {
  border-color: #00a651;
}

.sl-content-sub-tab--active:hover {
  color: #ffffff;
  background-color: #00a651;
  border-color: #00a651;
}

.sl-content-sub-tab--active {
  color: #ffffff;
  background-color: #00a651;
  border-color: #00a651;
  border-bottom-color: #00a651;
  box-shadow: 0px 2px 4px -2px #0000001a;
  box-shadow: 0px 4px 6px -1px #0000001a;
  font-weight: 400;
}

#tab-btn-textual.sl-content-sub-tab,
#tab-btn-visual.sl-content-sub-tab,
.sl-content-sub-tab.message-card-button {
  min-width: 7.5rem;
  text-transform: uppercase;
}

.sl-content-sub-tab.message-card-button {
  padding: 0.625rem 0.875rem;
  white-space: nowrap;
}

/* Textual / Visual / Card sub-tabs: green check image (same as main step tabs) */
.sl-content-sub-tab.sl-mixed-card-tab .sl-tab-check,
.sl-content-sub-tab.message-card-button .sl-tab-check,
.sl-content-sub-tab.sl-mixed-segment-tab .sl-tab-check,
.sl-content-sub-tab.sl-secondary-flex-card-tab .sl-tab-check,
#tab-btn-textual.sl-content-sub-tab .sl-tab-check,
#tab-btn-visual.sl-content-sub-tab .sl-tab-check,
#secondaryFlexCarouselTabContent.sl-content-sub-tab .sl-tab-check,
#secondaryFlexCarouselTabAction.sl-content-sub-tab .sl-tab-check {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.sl-content-sub-tab.sl-mixed-card-tab.sl-content-sub-tab--done .sl-tab-check,
.sl-content-sub-tab.message-card-button.sl-content-sub-tab--done .sl-tab-check,
.sl-content-sub-tab.sl-mixed-segment-tab.sl-content-sub-tab--done .sl-tab-check,
.sl-content-sub-tab.sl-secondary-flex-card-tab.sl-content-sub-tab--done .sl-tab-check,
#tab-btn-textual.sl-content-sub-tab--done .sl-tab-check,
#tab-btn-visual.sl-content-sub-tab--done .sl-tab-check,
#secondaryFlexCarouselTabContent.sl-content-sub-tab--done .sl-tab-check,
#secondaryFlexCarouselTabAction.sl-content-sub-tab--done .sl-tab-check {
  display: inline-flex;
}

.sl-content-sub-tab.sl-mixed-card-tab.sl-content-sub-tab--done.sl-content-sub-tab--active
  .sl-tab-check
  img,
.sl-content-sub-tab.message-card-button.sl-content-sub-tab--done.sl-content-sub-tab--active
  .sl-tab-check
  img,
.sl-content-sub-tab.sl-mixed-segment-tab.sl-content-sub-tab--done.sl-content-sub-tab--active
  .sl-tab-check
  img,
.sl-content-sub-tab.sl-secondary-flex-card-tab.sl-content-sub-tab--done.sl-content-sub-tab--active
  .sl-tab-check
  img,
#tab-btn-textual.sl-content-sub-tab--done.sl-content-sub-tab--active .sl-tab-check img,
#tab-btn-visual.sl-content-sub-tab--done.sl-content-sub-tab--active .sl-tab-check img,
#secondaryFlexCarouselTabContent.sl-content-sub-tab--done.sl-content-sub-tab--active .sl-tab-check img,
#secondaryFlexCarouselTabAction.sl-content-sub-tab--done.sl-content-sub-tab--active .sl-tab-check img {
  filter: brightness(0) invert(1);
}

/* Secondary FLEX carousel card tabs — S-CARD pills with action badges */
.sl-content-sub-tab.sl-secondary-flex-card-tab {
  min-width: auto;
  text-transform: none;
  padding: 0.4375rem 0.75rem;
  white-space: nowrap;
  margin-right: 0;
  border-radius: 9999px;
  background: #ffffff;
  color: #060721;
  border: 1px solid #00a651;
  box-shadow: none;
}

.sl-content-sub-tab.sl-secondary-flex-card-tab:not(.sl-content-sub-tab--active):hover {
  background: #f0fdf4;
  color: #00a651;
  border-color: #00a651;
}

.sl-content-sub-tab.sl-secondary-flex-card-tab.sl-content-sub-tab--active {
  background: #00a651;
  color: #ffffff;
  border-color: #00a651;
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.sl-secondary-card-tab-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.sl-secondary-card-tab-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.sl-secondary-card-tab-dot--ok {
  background: #00a651;
}

.sl-secondary-card-tab-dot--warn {
  background: #f97316;
}

.sl-content-sub-tab.sl-secondary-flex-card-tab.sl-content-sub-tab--active
  .sl-secondary-card-tab-dot--ok {
  background: #ffffff;
}

.sl-content-sub-tab.sl-secondary-flex-card-tab.sl-content-sub-tab--active
  .sl-secondary-card-tab-dot--warn {
  background: #fde68a;
}

.sl-secondary-card-tab-label {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sl-secondary-card-tab-action {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.125rem 0.4375rem;
  border-radius: 9999px;
  background: rgba(0, 166, 81, 0.14);
  color: #00875a;
}

.sl-content-sub-tab.sl-secondary-flex-card-tab.sl-content-sub-tab--active .sl-secondary-card-tab-action {
  background: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

/* Secondary carousel shell (header + card pills + editor body) */
.sl-secondary-carousel-shell {
  border: 1px solid #b8dfc8;
  border-radius: 0.625rem;
  padding: 0px;
}

.sl-secondary-carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  min-width: 0;
  padding: 12px 12px;
  border-bottom: 1px #b8dfc8 solid;
  margin-bottom: 6px !important;
  border-radius: 9px 9px 0px 0px;
  background: #eff4f7;
}

.sl-secondary-carousel-title {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0a0224;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-width: 0;
  flex: 1 1 auto;
}

.sl-secondary-carousel-title-dot {
  font-size: 0.625rem;
  line-height: 1;
}

.sl-secondary-carousel-count {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #00a651;
  background: #ffffff;
  border: 1px solid #00a651;
  border-radius: 9999px;
  padding: 0.1875rem 0.625rem;
  white-space: nowrap;
}

.sl-secondary-carousel-cards-shell {
  margin-bottom: 0.875rem;
}

.sl-secondary-carousel-cards-row {
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.sl-secondary-carousel-body {
  background: #ffffff;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  border-top: 1px solid #b8dfc8;
}

/* Content / Action sub-tabs — underline style with status dots */
.sl-content-sub-tab.sl-secondary-carousel-segment-tab {
  flex: 1 1 50%;
  width: 50%;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin-right: 0;
  margin-bottom: -1px;
  padding: 0.5rem 0.125rem;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: #00a651 !important;
  box-shadow: none !important;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.sl-content-sub-tab.sl-secondary-carousel-segment-tab:not(.sl-content-sub-tab--active):hover {
  background: transparent !important;
  color: #00875a !important;
  border-color: transparent !important;
}

.sl-content-sub-tab.sl-secondary-carousel-segment-tab.sl-content-sub-tab--active {
  color: #00a651 !important;
  border-bottom-color: #00a651 !important;
}


.sl-secondary-segment-tab-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.sl-secondary-segment-tab-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: none !important;
}

.sl-secondary-segment-tab-dot--ok {
  background: #00a651;
}

.sl-secondary-segment-tab-dot--muted {
  background: #a7d9bc;
}

.sl-secondary-segment-tab-dot--warn {
  background: #f97316;
}

.sl-secondary-segment-tab-label {
  font-size: 0.875rem;
  font-weight: 600;
}

.sl-content-sub-tab.sl-secondary-carousel-segment-tab .sl-tab-check {
  display: none !important;
}

/* Secondary carousel — layout constraints + prevent global sub-tab min-width overrides */
.sl-secondary-carousel-shell,
.sl-secondary-flex-carousel-layout,
#secondaryFlexCarouselPanel,
#secondaryFlexImagePanel {
  min-width: 0;
  max-width: 100%;
}

#secondaryFlexImagePanel {
  position: relative;
  min-height: 8rem;
}

#secondaryFlexBodyModeSection.sl-secondary-flex-template-in-shell {
  padding: 0.75rem 0.75rem 0.5rem;
  border-bottom: 1px solid #d8e8de;
}

#secondaryFlexCarouselCardsShell.sl-secondary-carousel-cards-shell {
  min-width: 0;
  width: 100%;
}

#secondaryFlexCarouselCardsRow.sl-secondary-carousel-cards-row {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.sl-mixed-card-tab-wrap:has(.sl-secondary-flex-card-tab) {
  flex: 0 0 auto;
  scroll-snap-align: start;
  margin-right: 0.5rem;
}

.sl-content-sub-tab.sl-secondary-flex-card-tab,
.sl-content-sub-tab.sl-secondary-carousel-segment-tab {
  min-width: auto;
  max-width: none;
}

.sl-secondary-carousel-action-types {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

#secondaryFlexCarouselCardsShell.sl-content-sub-tabs-shell {
  margin-bottom: 0;
}

.sl-secondary-flex-carousel-tabs {
  align-items: center;
  gap: 0.5rem;
}

.sl-secondary-flex-carousel-layout {
  min-width: 0;
}

.sl-flex-template-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.5rem;
  font-size: 0.875rem;
  color: #5c7187;
}

.sl-flex-template-loading--overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  margin: 0;
  padding: 0;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 0.375rem;
}

#secondaryFlexCarouselPanel {
  position: relative;
  min-height: 12rem;
}

#secondaryFlexCarouselPanel.sl-secondary-flex-carousel--loading .sl-secondary-flex-carousel-layout {
  min-height: 0;
}

#secondaryFlexCarouselPanel.sl-secondary-flex-carousel--loading .sl-flex-template-loading--overlay {
  background: #ffffff;
}

.sl-flex-template-loading.hidden {
  display: none;
}

.sl-flex-template-spinner {
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid #cbd5e1;
  border-top-color: #00a651;
  border-radius: 50%;
  animation: sl-flex-spin 0.7s linear infinite;
}

@keyframes sl-flex-spin {
  to {
    transform: rotate(360deg);
  }
}

.sl-section-footer,
#nextActionButtonContainer {
  padding: 0.75rem 1rem !important;
}

#secondaryFlexCarouselCardsRow.sl-content-sub-tabs-track {
  flex-wrap: nowrap;
}

.sl-content-sub-tab.sl-mixed-card-tab.sl-content-sub-tab--done::after,
.sl-content-sub-tab.message-card-button.sl-content-sub-tab--done::after,
.sl-content-sub-tab.sl-mixed-segment-tab.sl-content-sub-tab--done::after,
.sl-content-sub-tab.sl-secondary-flex-card-tab.sl-content-sub-tab--done::after,
#tab-btn-textual.sl-content-sub-tab--done::after,
#tab-btn-visual.sl-content-sub-tab--done::after,
#secondaryFlexCarouselTabContent.sl-content-sub-tab--done::after,
#secondaryFlexCarouselTabAction.sl-content-sub-tab--done::after {
  content: none;
}

.sl-mixed-card-tab-wrap {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  /* padding-right: 6px; */
}

.sl-mixed-card-tab-remove {
  position: absolute;
  top: -0.3125rem;
  right: 0.125rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.10rem;
  height: 1.10rem;
  border: 1px solid #c7cdd4;
  border-radius: 9999px;
  background: #9aa0a6;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}
#secondaryFlexCarouselCardsRow .sl-mixed-card-tab-remove{
    top: -7px;
    right: -5px;
}
.sl-mixed-card-tab-remove:hover {
  transform: translateY(-1px);
}

.sl-mixed-card-tab-remove--active {
  background: #ffffff;
  color: #6b7280;
  border-color: #d1d5db;
}

/* ============================================
   Figma-style config cards
   ============================================ */

.sl-config-card {
  background: #ffffff;
  border: 1px solid var(--sl-border);
  border-radius: 0.625rem;
  overflow: hidden;
  box-shadow: var(--sl-shadow-card);
}

.sl-config-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border: 1px solid var(--sl-border);
  border-radius: 0.5rem;
}

/* Heading band — Configuration + Dynamic Mapping (text only, no icons) */
#message-card-details .conteantConfiguration .sl-config-card-header,
#message-card-details #ctaCardDetails > .flex.items-center:first-child,
#personalize-inner .sl-config-card-header {
  background-color: #eff4f7;
  border-bottom: 1px solid var(--sl-border);
}

.conteantConfiguration .sl-config-card-header {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.conteantConfiguration .sl-config-card-body {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  background-color: #ffffff;
}

/* Data Source + Dynamic Mapping cards: flat (no drop shadow) */
#personalize-inner .sl-config-card {
  box-shadow: none;
}

/* Configuration tab: only the JSON-only empty hint is visible — center it in the card */
#contentConfigBody:has(#contentConfigEmptyState:not(.hidden)) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  /* min-height: 220px; */
  padding: 1rem !important;
  border-top: 1px solid var(--sl-border) !important;
}

#contentConfigEmptyStateContainer {
  display: none;
  width: 100%;
}

#contentConfigEmptyStateContainer:has(#contentConfigEmptyState:not(.hidden)) {
  display: flex;
  width: 100%;
}

.sl-empty-state-copy {
  color: #0f172a80;
}

.sl-empty-state-accent {
  color: rgb(0 166 81 / 0.8);
  font-weight: 600;
}

.sl-config-card-body {
  padding: 1rem 1.625rem;
  border: 1px solid var(--sl-border);
  border-top: none;
  gap: 1rem;
  border-radius: 0.5rem;
}

label {
  color: #283439 !important;
  font-weight: 600 !important;
}

input:not([type="radio"]):not([type="checkbox"]):not(#imageUrlInput) {
  padding: 1rem;
  background-color: #eff4f780;
  border: 1px solid #cbd5e1;
  min-width: 0;
}

select {
  padding: 1rem !important;
  background-color: #eff4f780 !important;
  border: 1px solid #cbd5e1 !important;
  min-width: 0;
}

textarea {
  padding: 1rem !important;
  background-color: #eff4f780 !important;
  border: 1px solid #cbd5e1 !important;
  min-width: 0;
}

/* Collapse button */
.sl-collapse-btn {
  background: transparent;
  border: none;
  padding: 4px;
  border-radius: 4px;
  color: var(--sl-color-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  line-height: 1;
  font-size: 14px;
}

.sl-collapse-btn:hover {
  background: #e8edf3;
  color: var(--sl-color-text);
}

/* Green pill toggle switch */
.sl-toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.sl-toggle-track {
  display: block;
  width: 44px;
  height: 24px;
  background-color: #cbd5e0;
  border-radius: 12px;
  position: relative;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.sl-toggle-switch input:checked ~ .sl-toggle-track {
  background-color: var(--sl-brand-green);
}

.sl-toggle-thumb {
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.sl-toggle-switch input:checked ~ .sl-toggle-track .sl-toggle-thumb {
  transform: translateX(20px);
}
.sl-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border: 6px solid #cbd5e0 !important;
  border-radius: 50%;
  background: #ffffff !important;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  padding: 4px;
  transition: border-color 0.15s ease;
}

/* Checked state */
.sl-radio:checked {
  border-color: var(--sl-brand-green) !important;
  background: #ffffff !important; /* keep white */
}

/* Inner green dot */
.sl-radio:checked::after {
  content: "";
  position: absolute;
  width: 8px; /* slightly bigger like image */
  height: 8px;
  background: white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Hover */
.sl-radio:hover {
  border-color: var(--sl-brand-green);
}

/* Focus */
.sl-radio:focus-visible {
  outline: 2px solid var(--sl-brand-green);
  outline-offset: 2px;
}

/* Dynamic params table row */
.sl-dp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: center;
  margin-top: 0.5rem;
}

/* ============================================
   Phone frame mockup for preview panel
   ============================================ */

.sl-preview-content-wrap {
  width: 100%;
  /* background: #f4f3f9; */
  border-radius: 0.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  /* min-height: min(52vh, 420px); */
  /* max-height: 70vh; */
  /* padding: 1rem; */
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  /* Fill the preview panel flex column so #customCarouselContainer gets a real height at xl+ */
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;

  justify-content: center;
}

#customCarouselContainer {
  height: auto;
  min-height: 0;
  align-self: center;
}

/* ------------------------------------------------------------------
   Preview box sizing — one rule for every template.

   Requirement: the asset (image, placeholder, imagemap, card) always fits
   inside .sl-preview-content-wrap, centred, with no scrollbar. A SHORT asset
   keeps its natural size; a TALL one scales down.

   Approach: the wrap owns the height and simply CLIPS nothing — instead every
   preview block is capped at 100% of the wrap via --sl-preview-img-fit, which
   is a percentage, not a hand-tuned vh calculation. Percentages resolve
   against the wrap itself, so the budget is always exactly the space that
   exists: no constants to re-tune per template or viewport, and mixed
   templates (two stacked blocks) share the same box without overflowing.
   Custom properties inherit through the shadow boundary, so the WASM-rendered
   previews are capped by the same value.
   ------------------------------------------------------------------ */
.sl-preview-content-wrap {
  --sl-preview-img-fit: 100%;
  --sl-preview-img-hero: 100%;
  /* Coupon card width, at EVERY viewport (a resized Mac window is short but
     not narrow, so a min-width breakpoint would have missed it).
     Narrowing the card is what shortens the ratio-shaped hero, so the whole
     coupon — artwork, text and CTA — fits without clipping. The budget is the
     panel minus the card's fixed text+button cost; 320px is its natural
     width, so this never enlarges it. */
  --sl-preview-coupon-card: min(320px, calc(max(5.5rem, calc(100vh - 27.5rem)) * 1.51));
  --sl-preview-hero-imageonly: 100%;

  /* Height a preview card may take. Consumed inside the shadow roots by
     preview.js (custom properties inherit through the shadow boundary).

     The SFMC modal is only a portion of the browser window, so a restored
     (non-maximised) window can leave this panel under ~390px — below that a
     fixed 358px card no longer fits and the preview scrolls.

     A PERCENTAGE cannot be used here: the card sits in a shadow root whose
     ancestors have no definite height, so `100%` resolves to nothing and the
     card collapses to 2x2 (the blank-card bug). A viewport-derived value always
     resolves; the subtraction covers the app chrome above the panel plus the
     pagination dot band below the card.

     Reduced a further 15% (the 0.85 factor) and with the 34px pagination dot
     band subtracted: at the previous value a photo-hero card was still clipped
     at the bottom and the dots fell outside the visible panel entirely. */
  --sl-preview-card-max: calc((100vh - 13.75rem) * 0.86 - 46px);
}

@media (min-width: 1280px) {
  .sl-preview-content-wrap {
    /* One budget for every template: the panel height minus the chrome below
       it (summary box etc.). Mixed templates stack two blocks, so they each
       get half — that is what keeps mixed from overflowing. */
    --sl-preview-img-fit: calc(100vh - 22rem);
    --sl-preview-img-hero: calc(100vh - 33rem);

    /* Carousel/flex card width. A hero image is aspect-shaped with
       object-fit:cover, so capping its HEIGHT crops the picture — the width is
       what scales the box. LINE's tallest common hero is ~1:1.4, so a card
       this wide stays within the height budget without cropping. 400px is the
       renderer's widest bubble, so this never enlarges a card. */
    --sl-preview-card-width: 400px;
  }

  /* Mixed: two blocks stacked, plus the gap and divider between them, so each
     block gets under half the budget.

     Requires BOTH hosts visible. The Primary/Secondary toggle makes them
     mutually exclusive (applyPreviewPanelMode in common.js: "only ONE preview
     is ever visible"), so keying this off the secondary host alone halved the
     budget on the Secondary TAB, where nothing is stacked — the same image
     rendered 144px tall there against 290.8px in Primary. */
  .sl-preview-content-wrap:has(#customCarouselContainer:not(.hidden)):has(#customSecondaryCarouselContainer:not(.hidden)) {
    --sl-preview-img-fit: calc((100vh - 30rem) / 2);
    --sl-preview-img-hero: calc((100vh - 32rem) / 2 - 6rem);
    --sl-preview-card-width: 400px;
  }
}

@media (min-width: 1280px) and (max-height: 900px) {
  .sl-preview-content-wrap {
    --sl-preview-img-fit: calc(100vh - 19rem);
    --sl-preview-img-hero: calc(100vh - 30rem);
    --sl-preview-card-width: 400px;
  }

  /* Both hosts visible — see the note on the taller-viewport rule above. */
  .sl-preview-content-wrap:has(#customCarouselContainer:not(.hidden)):has(#customSecondaryCarouselContainer:not(.hidden)) {
    --sl-preview-img-fit: calc((100vh - 27rem) / 2);
    --sl-preview-img-hero: calc((100vh - 29rem) / 2 - 6rem);
    --sl-preview-card-width: 400px;
  }
}

@media (min-width: 1280px) {
  .sl-preview-content-wrap {
    /* Fill the panel so `justify-content: center` has room to centre the card
       vertically. Overflow is set in the rule below. */
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Scroll only when the content genuinely does not fit.

     A mixed template (text + logo + carousel) renders ALL of its blocks inside
     the PRIMARY container, so keying on the secondary container never matched
     it. Every single-block template is sized to fit the panel and so never
     overflows; mixed is the only one that does. `auto` therefore shows a
     scrollbar exactly where one is needed — and the blocks above the carousel
     stay reachable instead of being clipped — while leaving every other
     template visually unchanged (no scrollbar appears when nothing overflows). */
  .sl-preview-content-wrap {
    overflow-y: auto;
    overflow-x: hidden;

    /* Start-aligned, NOT centred.

       `justify-content: center` on a SCROLLING flex container pushes overflow
       past the TOP edge, into space the scrollbar cannot reach: the scrollbar
       appears yet the first blocks stay cut off. `safe center` avoids that,
       but Safari only supports the `safe` keyword from 17.4 — older Safari
       drops the whole declaration and falls back to plain `center`, which is
       why the preview scrolled with unreachable content on macOS Safari
       (measured in isolation: 99px stranded above the scroll origin).

       flex-start is exactly what `safe center` degrades to once content
       overflows, and every browser understands it. Short content is centred by
       the auto margins below instead of by justify-content, so the visual
       result is unchanged while the overflow case stays reachable. */
    justify-content: flex-start;
  }

  /* Centre a SHORT preview vertically. Auto margins absorb the spare space
     when the content fits and collapse to 0 when it does not, so this centres
     without ever pushing content above the scroll origin. */
  .sl-preview-content-wrap > * {
    margin-top: auto;
    margin-bottom: auto;
  }

  /* Each preview block is a shrinkable flex child, so a tall one gives up
     height instead of overflowing. With ONE block it takes the whole box;
     with the two stacked blocks of a mixed template they share it, which is
     what keeps mixed from overflowing and losing its pagination dots. */
  .sl-preview-content-wrap > *,
  .sl-preview-content-wrap .sl-preview-content-inner > * {
    min-height: 0;
    /* flex-shrink:1 let the flex chain compress the card, which cropped the
       hero image. Preview blocks keep their natural height. */
    flex-shrink: 0;
  }

  /* Deliberately NO max-height on the carousel/image containers.
     Capping them squeezed the flex chain down into the card, and because a
     hero image is aspect-ratio shaped with object-fit:cover, that shortened
     box made cover slice the bottom off the picture (a 386x462 image rendered
     298x240 instead of 298x417). The card is left at its natural size; the
     preview COLUMN keeps its own scrollbar for the rare card taller than the
     viewport, which is far better than silently cropping every image. */
  .sl-preview-content-wrap #customCarouselContainer,
  .sl-preview-content-wrap #customSecondaryCarouselContainer,
  .sl-preview-content-wrap .sl-preview-default-placeholder {
    min-height: 0;
    flex: 0 0 auto;

    /* Never exceed the panel. The card's own height cap is tuned for the
       PRIMARY view, but the SECONDARY preview additionally shows a
       Primary/Secondary toggle and a card-number strip, so its panel is
       shorter and the same card overflowed it. Capping the host here bounds
       both previews against whatever height the panel actually has, without
       having to keep two card-height constants in sync.

       The 12px is the wrap's own `gap-3` (verified still present on
       .sl-preview-content-wrap in index.html): it is a flex column holding the
       primary and secondary hosts, and that gap sits ABOVE this element, so a
       plain `max-height:100%` still pushed the secondary host exactly 12px past
       the panel. */
    max-height: calc(100% - 12px);
    overflow: hidden;
  }

  /* Mixed templates stack several blocks (text + image + carousel) in ONE host.
     Every cap above bounds a SINGLE element against the full panel height, so
     each block fits while their sum does not, and the `overflow: hidden` above
     then clips the blocks below the fold out of reach — the wrap's own
     `overflow-y: auto` never fires because the host hides its own overflow.

     preview.js sets data-sl-overflows-panel after measuring (see
     markHostWhenContentOverflowsPanel). Releasing the cap here lets the content
     take its natural height so the WRAP scrolls and every block stays
     reachable. Keyed on measured overflow, not on the template type, so a
     template that fits keeps the clipping guard unchanged. */
  .sl-preview-content-wrap #customCarouselContainer[data-sl-overflows-panel],
  .sl-preview-content-wrap
    #customSecondaryCarouselContainer[data-sl-overflows-panel] {
    max-height: none;
    overflow: visible;
  }

  /* The secondary host wraps its swiper in an extra div, so capping only the
     host is not enough — bound the inner wrapper as well. */
  .sl-preview-content-wrap #customSecondarySwiperWrapper,
  .sl-preview-content-wrap #customSwiperWrapper {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  /* Releasing the cap on the host alone is not enough — this inner wrapper
     clips too, so the stacked blocks would still be cut off. */
  .sl-preview-content-wrap
    #customCarouselContainer[data-sl-overflows-panel]
    #customSwiperWrapper,
  .sl-preview-content-wrap
    #customSecondaryCarouselContainer[data-sl-overflows-panel]
    #customSecondarySwiperWrapper {
    max-height: none;
    overflow: visible;
  }

  /* The empty placeholder is min-height driven, so it would otherwise keep a
     fixed tall size even when the box is shorter. */
  .sl-preview-content-wrap .sl-preview-default-placeholder {
    min-height: min(52vh, 360px);
  }
}

.sl-preview-content-wrap::-webkit-scrollbar {
  width: 4px;
}
.sl-preview-content-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.sl-preview-content-wrap::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}

/* Default empty state (matches Figma: gray canvas + centered label) */
.sl-preview-default-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(52vh, 360px);
  width: 100%;
  box-sizing: border-box;
  background: #e8e8e8;
  border-radius: 0.625rem;
  margin: 2px 0;
}

.sl-preview-default-placeholder span {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9ca3af;
}

#customSwiperContainer,
#customSecondarySwiperContainer {
  width: 100%;
  max-width: 100%;
}

.nextBtn {
  box-shadow: 0px 2px 4px -2px #0000001a;
  box-shadow: 0px 4px 6px -1px #0000001a;
  border-radius: 0.25rem;
  background-color: var(--sl-brand-green);
  padding-block: 8px;
  padding-inline: 1.5rem;
  gap: 0.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  color: #ffffff;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.nextBtn:not(:disabled) img {
  filter: brightness(0) invert(1);
  transition: filter 0.15s ease;
}

.nextBtn:not(:disabled):hover {
  background-color: var(--sl-brand-green-hover);
  color: #0f172a;
}

.nextBtn:not(:disabled):hover img {
  filter: none;
}

.nextBtn:disabled {
  opacity: 60%;
  cursor: not-allowed;
}

.nextBtn:disabled img {
  filter: brightness(0) invert(1);
}

.secondaryBtn {
  border-radius: 0.25rem;
  background-color: transparent;
  border: 1px solid var(--sl-border);
  padding-block: 0.5rem;
  padding-inline: 1.5rem;
  gap: 0.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  color: #546166;
  min-width: 5.625rem;
  cursor: pointer;
}

#sl-primary-content-tabs {
  padding-block: 0 !important;
}

/* Textual | Visual | Card N live inside .messageCardContainer, which scrolls on xl+.
   Without sticky, the tab row scrolls away and looks like “tabs not showing”. */
#secondary-content .messageCardContainer #sl-primary-content-tabs {
  position: sticky;
  top: 0;
  z-index: 8;
  flex-shrink: 0;
  background: #ffffff;
  border-bottom: 1px solid transparent;
}

.customSpacing {
  padding-inline: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (max-height: 820px) {
  .TopMenu {
    min-height: 2.5rem;
    padding-block: 0.375rem;
  }

  .menuitems {
    margin-block: 0.375rem;
  }

  .customSpacing {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .lineHeading {
    font-size: 1.375rem !important;
    line-height: 1.75rem;
  }

  .heading {
    font-size: 0.9375rem;
    line-height: 1.5rem;
  }

  .bodyText,
  .smallText,
  .menuitems,
  .sl-preview-engine-subtitle {
    font-size: 0.8125rem;
    line-height: 1.25rem;
  }

  .sl-preview-engine-title {
    font-size: 0.625rem;
  }

  .sl-preview-toggle {
    max-width: 18rem;
    padding: 0.3125rem;
  }

  .sl-preview-toggle-btn,
  .sl-preview-toggle-btn--active {
    min-height: 2.25rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
  }

  .sl-preview-strip-pill {
    min-width: 8rem;
    min-height: 2.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
  .sl-preview-strip-pill--full-label {
    min-width: 8rem;
    padding: 0.5rem 0.75rem;
  }

  .sl-preview-strip-shell {
    max-width: 20rem;
    /* margin-bottom: 0.875rem; */
  }

  .sl-preview-strip-pill {
    min-width: 2.125rem;
    min-height: 2.125rem;
    padding: 0.3125rem;
    font-size: 0.8125rem;
  }
  .sl-preview-strip-pill--full-label {
    min-width: 7.5rem;
    padding: 0.5rem 0.75rem;
  }

  .customSpacing.flex.flex-wrap {
    gap: 0.75rem !important;
  }

  .sl-hero-stack {
    gap: 0.75rem !important;
  }

  .sl-preview-column {
    padding-bottom: 0.75rem;
  }

  .sl-preview-panel {
    /* padding: 1rem 1rem 1.125rem; */
  }

  .sl-preview-panel-header {
    /* margin-bottom: 0.75rem; */
     padding-bottom: 0.25rem;
  }

  .sl-preview-content-wrap {
    /* padding: 0.75rem; */
  }

  .sl-message-summary {
    margin-top: 0.75rem;
    padding: 0.625rem 0.875rem;
  }

  #tab-list.sl-pill-tabs {
    padding: 0.25rem;
  }

  #tab-list.sl-pill-tabs > li {
    padding: 0.5rem 0.9rem !important;
  }

  .sl-content-sub-tab {
    min-width: 7.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  .sl-content-sub-tab.sl-secondary-flex-card-tab,
  .sl-content-sub-tab.sl-secondary-carousel-segment-tab {
    min-width: auto;
    padding: 0.4375rem 0.6875rem;
  }

  .sl-secondary-carousel-shell {
    padding: 0px;
  }

  

  .sl-content-sub-tabs-arrow {
    width: 1.875rem;
    height: 1.875rem;
    min-width: 1.875rem;
  }

  .sl-content-sub-tabs-arrow span {
    font-size: 1.125rem;
  }

  .messageCardContainer {
    gap: 1rem !important;
  }

  .sl-config-card-body {
    padding: 0.875rem 1.25rem;
    gap: 0.75rem;
  }

  .sl-section-footer,
  #nextActionButtonContainer {
    padding: 1rem 1.5rem !important;
  }

  .sl-section-footer .flex.gap-4 {
    gap: 0.75rem !important;
  }
}

@media (max-height: 700px) {
  .TopMenu {
    min-height: 2.25rem;
    padding-block: 0.25rem;
  }

  .menuitems {
    margin-block: 0.25rem;
  }

  .customSpacing {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .sl-topmenu-brand-logo {
    height: 1.75rem;
    max-width: min(8.5rem, 40vw);
  }

  .lineHeading {
    font-size: 1.25rem !important;
    line-height: 1.5rem;
  }

  .heading {
    font-size: 0.875rem;
    line-height: 1.375rem;
  }

  .bodyText,
  .smallText,
  .menuitems,
  .sl-preview-engine-subtitle {
    font-size: 0.75rem;
    line-height: 1.125rem;
  }

  .sl-preview-engine-title {
    font-size: 0.5625rem;
  }

  .sl-preview-toggle {
    max-width: 16rem;
    padding: 0.25rem;
  }

  .sl-preview-toggle-btn,
  .sl-preview-toggle-btn--active {
    min-height: 2.125rem;
    padding: 0.4375rem 0.75rem;
    font-size: 0.8125rem;
  }

  .sl-preview-strip-nav {
    gap: 0.5rem;
    padding-block: 0.375rem;
  }

  .sl-preview-strip-pill {
    min-width: 2rem;
    min-height: 2rem;
    gap: 0;
    padding: 0.25rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
  }
  .sl-preview-strip-pill--full-label {
    min-width: 7rem;
    padding: 0.25rem 0.5rem;
  }

  .sl-preview-strip-pill-sec {
    width: 0.625rem;
    height: 0.625rem;
    min-width: 0.625rem;
    min-height: 0.625rem;
    padding: 0;
    top: -0.3rem;
    right: -0.3rem;
  }

  .customSpacing.flex.flex-wrap {
    gap: 0.5rem !important;
  }

  .sl-hero-stack {
    gap: 0.5rem !important;
  }

  .sl-preview-column {
    padding-bottom: 0.5rem;
  }

 

  .sl-preview-panel-header {
    /* margin-bottom: 0.5rem; */
  }

  .sl-preview-content-wrap {
    /* padding: 0.625rem; */
  }

  .sl-message-summary {
    margin-top: 0.2rem;
    padding: 0.3rem 0.75rem;
  }

.swiper-slide > .bubble {
    margin-top: 0 !important;
  }

  #tab-list.sl-pill-tabs {
    gap: 0.375rem;
    padding: 0.1875rem;
  }

  #tab-list.sl-pill-tabs > li {
    padding: 0.4375rem 0.75rem !important;
  }

  .sl-content-sub-tabs-track {
    gap: 0.5rem;
    padding-block: 0.375rem;
  }

  .sl-content-sub-tab {
    min-width: 7rem;
    padding: 0.4375rem 0.625rem;
    font-size: 0.75rem;
  }

  .sl-content-sub-tab.sl-secondary-flex-card-tab,
  .sl-content-sub-tab.sl-secondary-carousel-segment-tab {
    min-width: auto;
    padding: 0.375rem 0.5625rem;
  }

  .sl-secondary-carousel-shell {
    padding: 0px;
  }

  .sl-secondary-carousel-header {
    gap: 0.5rem;
    margin-bottom: 0.625rem;
  }

  .sl-secondary-carousel-title {
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
  }

  .sl-secondary-carousel-count {
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
  }

  .sl-secondary-card-tab-label {
    font-size: 0.75rem;
  }

  .sl-secondary-card-tab-action {
    font-size: 0.5625rem;
    padding: 0.125rem 0.3125rem;
  }



 

  .sl-content-sub-tab.sl-secondary-carousel-segment-tab {
    margin-right: 0;
  }

  .sl-secondary-segment-tab-label {
    font-size: 0.8125rem;
  }

  .sl-content-sub-tabs-arrow {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
  }

  .sl-content-sub-tabs-arrow span {
    font-size: 1rem;
  }

  .messageCardContainer {
    gap: 0.75rem !important;
  }

  .sl-config-card-body {
    padding: 0.75rem 1rem;
    gap: 0.625rem;
  }

  .sl-json-editor-shell {
    min-height: 16rem;
    max-height: min(48vh, 26rem);
  }

  input:not([type="radio"]):not([type="checkbox"]),
  select,
  textarea:not(.json-editor-textarea) {
    padding: 0.75rem !important;
  }

  .sl-section-footer,
  #nextActionButtonContainer {
    padding: 0.75rem 1rem !important;
  }

  .sl-section-footer .flex.gap-4 {
    gap: 0.5rem !important;
  }

  .topTexts{
    padding-bottom: 0 !important;
  }
}

@media (min-width: 1280px) {
  /* Cap the shell to the viewport, but allow vertical scroll when zoom-in shrinks
     the CSS viewport — `overflow: hidden` was clipping Configuration / preview. */
  .h-screen {
    height: 100vh !important;
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* The main content row must fill remaining height after TopMenu */
  .customContainer {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
  }

  /* Each tab panel must participate in the flex chain */
  #tab-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  #primary-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  /* The activity card (white bg, shadow) must pass height down */
  #main-container-outter-div,
  #main-container-app-div {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  /* Secondary tab — same pattern as primary */
  #secondary-content {
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
    /* flex: 1 already set by Tailwind class */
  }

  /* Force flex layout when JS makes it visible — JS sets display:block, we need flex */
  #secondary-content:not([style*="display: none"]),
  #secondary-content[style*="display: flex"],
  #secondary-content[style*="display:flex"],
  #secondary-content[style*="display: block"],
  #secondary-content[style*="display:block"] {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  #secondary-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* The messageCardContainer scrolls, footer stays pinned */
  #secondary-content .messageCardContainer {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  #personalize-content:not([style*="display: none"]),
  #personalize-content[style*="display: flex"],
  #personalize-content[style*="display:flex"],
  #personalize-content[style*="display: block"],
  #personalize-content[style*="display:block"] {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  #personalize-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  #personalize-inner > div:first-child {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .customSpacing {
    padding-inline: 2rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  box-shadow: 0 0 0px 1000px transparent inset !important;
  -webkit-text-fill-color: inherit !important;
  background-color: transparent !important;
  transition: background-color 9999s ease-in-out 0s;
}


/* Mid widths (incl. browser zoom-in from a desktop window): keep padding usable so
   the 70% config column is not crushed by 3.5rem gutters on each side. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .customSpacing {
    padding-inline: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

@media (min-width: 1280px) {
  .customSpacing {
    padding-inline: 3.5rem;
    padding-top: 1.625rem;
    padding-bottom: 1.625rem;
  }
}

/* Re-apply low-height vertical compaction after width-based spacing rules so
   short-but-wide viewports (for example 1440x700) don't inherit desktop
   vertical padding. Keep inline padding from the width breakpoints. */
/* @media (max-height: 820px) {
  .customSpacing {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
} */

@media (max-height: 700px) {
  .customSpacing {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* Allow Tailwind-style utility opt-outs on top of customSpacing without breaking
   the default desktop spacing scale. */
.customSpacing.\!pt-0 {
  padding-top: 0 !important;
}

.customSpacing.\!pb-0 {
  padding-bottom: 0 !important;
}

/* Tighter vertical padding for the message configuration tab bar (primary/secondary/personalize). */
.customSpacing.sl-tabbar-tight {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}

@media (max-width: 900px) {
  .TopMenu {
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 0.375rem 0.75rem;
  }

  .sl-topmenu-brand {
    justify-self: start;
  }

  .sl-topmenu-title {
    justify-self: center;
    font-size: 0.9375rem;
    white-space: normal;
  }

  .sl-topmenu-end {
    justify-self: end;
    width: 100%;
  }

  .sl-message-summary dl {
    grid-template-columns: 1fr;
    justify-content: stretch;
    justify-items: center;
  }

  /* .sl-message-summary dt,
  .sl-message-summary dd {
    text-align: center;
  } */

  .sl-dp-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .customContainer {
    min-height: 0;
  }

  .TopMenu {
    padding-inline: 1rem;
  }

  #aboutModal,
  #helpModal {
    width: min(42rem, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
    min-width: 0 !important;
  }

  .Floatingwdw {
    top: auto;
    right: auto;
    width: min(28.125rem, calc(100vw - 1rem));
    max-height: min(70vh, 35.5625rem);
    margin-inline: auto;
  }

  .sl-config-card-body {
    padding-inline: 1rem;
  }

  .sl-secondary-carousel-shell {
    padding: 0px;
  }

  .sl-secondary-carousel-title {
    font-size: 0.625rem;
    letter-spacing: 0.03em;
  }

  .sl-secondary-carousel-header {
    align-items: flex-start;
  }

  .sl-secondary-carousel-count {
    font-size: 0.625rem;
  }

  .sl-content-sub-tab.sl-secondary-flex-card-tab {
    min-height: 2.25rem;
  }

  .sl-mixed-card-tab-remove {
    width: 1.125rem;
    height: 1.125rem;
    font-size: 0.875rem;
  }
}

/* Stacked layout below xl — matches index.html `xl:flex-row` so zoom-in (CSS width
   often lands in 1024–1279) keeps a full-width Configuration column instead of a
   crushed 70/30 split with a broken preview. */
@media (max-width: 1279px) {
  /* `height: auto` here used to delete the whole height chain: every descendant sizes with
     flex-1 / h-full, so with no definite height above them the card shrink-wrapped its content
     and left the rest of the modal blank (visible on any zoom that pushes CSS width under
     1279). min-height keeps the fill while still letting tall stacked content grow past the
     viewport, which is what the stacking below needs. */
  .h-screen {
    height: auto !important;
    min-height: 100vh;
    max-height: none;
    overflow: visible;
  }

  /* Claim the height .h-screen now has, otherwise the children's `flex: 1 1 auto` below has no
     free space to divide and the column still collapses to content height. */
  .customContainer {
    overflow: visible;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .customContainer > .rounded-none {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .sl-preview-column {
    width: 100%;
    flex: 1 1 auto !important;
    max-width: 100% !important;
    padding-top: 0.75rem;
    border-left: none;
    position: static;
    max-height: none;
  }

  .sl-preview-panel {
    min-height: 0;
  }

  .sl-preview-content-wrap {
    max-width: min(22rem, 100%);
    margin-inline: auto;
  }

  /* The ≥1280px block sets this same chain, but the `xl:` utilities in index.html and those
     rules both stop at 1280, so below it the card, its wrappers and the tab panel were plain
     blocks — the height from .h-screen had nothing to travel down. Keep overflow visible here:
     the layout is stacked and scrolls as one page, so clipping would hide the footer instead. */
  /* Matched by attribute, not #id: index.html writes id="main-container-outter-div " with a
     trailing space inside the quotes, so the plain id selector never matches it. */
  .customContainer > .rounded-none > .bg-white,
  [id^="main-container-outter-div"],
  [id^="main-container-app-div"],
  #tab-content,
  #primary-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* Empty entry data extension — persistent overlay text only (not a closable modal) */
.sl-empty-data-extension-notice__text {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 600;
}

/* Secondary carousel — no-action hint on the Action sub-tab */
.sl-secondary-flex-none-hint {
  margin: 0.5rem 0 0;
  padding: 0.625rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid #f59e0b;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
}