@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');

@tailwind base;

.checkbox-label:has(input:checked) {
  @apply border-yellow-500;
}

.checkbox-label input[type="checkbox"] {
  @apply accent-yellow-500 text-yellow-500 ring-0;
}

.checkbox-label input[type="checkbox"]:checked {
  @apply accent-yellow-500 text-yellow-500;
}

.custom-underline {
  @apply underline underline-offset-0 decoration-8 decoration-blue-300;
}

.gradient-headline {
  @apply animated slide-left block font-bold text-gray-800 text-3xl md:text-4xl text-transparent bg-clip-text bg-gradient-to-r from-cyan-500 to-blue-500;
}

.animated {}

.btn-demo {
  @apply hover:-translate-y-1 transition-all duration-300 inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-r from-cyan-500 to-blue-500 border-transparent text-white text-sm font-semibold rounded-lg focus:outline-none ring-0 focus:ring-0 py-3 px-5;
}

.fade-in {
  animation: fadeInAnimation ease 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes fadeInAnimation {
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}

.animation.slide-bottom {
  view-timeline: --subjectReveal block;
  view-timeline-inset: 70% -100px;
  animation-timeline: --subjectReveal;

  animation: slideBottomAnimation ease 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes slideBottomAnimation {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0%);
  }
}

.animation.slide-top {
  view-timeline: --subjectReveal block;
  view-timeline-inset: 70% -100px;
  animation-timeline: --subjectReveal;

  animation: slideUpAnimation ease 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes slideUpAnimation {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0%);
  }
}

.animation.slide-left {
  view-timeline: --subjectReveal block;
  view-timeline-inset: 70% -100px;
  animation-timeline: --subjectReveal;

  animation: slideLeftAnimation ease 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes slideLeftAnimation {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0%);
  }
}

.animation.slide-right {
  animation: slideRightAnimation ease 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes slideRightAnimation {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0%);
  }
}

/* Firefox */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: #ffffff30 #00000000;
}

/* Chrome, Edge, and Safari */
.sidebar::-webkit-scrollbar {
  width: 11px;
}

.sidebar::-webkit-scrollbar-track {
  background: #00000000;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #ffffff30;
  /* border: 3px solid #00000022; */
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #ffffff50;
  /* border: 3px solid #00000022; */
}

.b-scroll {
  scrollbar-width: thin;
  scrollbar-color: #ffffff30 #00000000;
}

/* Chrome, Edge, and Safari */
.b-scroll::-webkit-scrollbar {
  width: 11px;
}

.b-scroll::-webkit-scrollbar-track {
  background: #00000005;
  border: 1px solid #dfdfdf;
}

.b-scroll::-webkit-scrollbar-thumb {
  background-color: #00000030;
  /* border: 3px solid #00000022; */
}

.b-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #00000015;
  /* border: 3px solid #00000022; */
}

@keyframes broadcast-timer {
  from { width: 0%; }
  to { width: 100%; }
}

@keyframes flow-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@tailwind components;
@tailwind utilities;


/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/* Portal auth form styles extracted from inline template for maintainability. */
input::placeholder {
  font-family: 'Inter Tight', sans-serif !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  color: #9EA3A9 !important;
}

select::placeholder {
  font-family: 'Inter Tight', sans-serif !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  color: #9EA3A9 !important;
}

.country-select-centered + .select2-container .select2-dropdown {
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90px !important;
}

ul[id*="country_code"] {
  left: 0 !important;
  right: auto !important;
  width: 90px !important;
}

select[id*="country_code"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  padding-right: 32px !important;
  text-align: center !important;
  text-align-last: center !important;
}

select[id*="country_code"] option {
  background-repeat: no-repeat !important;
  background-position: 10px center !important;
  background-size: 20px 14px !important;
  padding-left: 32px !important;
  text-align: left !important;
}

/* Force selected option highlight to match teal hover used in document dropdown */
select[id*="country_code"] option:checked {
  background-color: #14b8a6 !important;
  color: #ffffff !important;
}

/* Hover style for custom country dropdown items */
[data-controller="country-select"] ul li:hover,
[data-controller="country-select"] ul li:focus {
  background-color: #14b8a6 !important;
  color: #ffffff !important;
}

select[id*="country_code"] option:hover,
select[id*="country_code"] option:focus {
  background-color: #14b8a6 !important;
  color: #ffffff !important;
}

ul[id*="country_code"] li.select2-results__option--highlighted[aria-selected] {
  background-color: #14b8a6 !important;
  color: #ffffff !important;
}

ul[id*="country_code"] li:hover,
ul[id*="country_code"] li:focus {
  background-color: #14b8a6 !important;
  color: #ffffff !important;
}

.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted:hover {
  background-color: #14b8a6 !important;
  color: #ffffff !important;
}
/* ── Whitelabel BI dashboard — page-scoped components. Extend the shared wl-* kit
   (whitelabel_wizard.css), same --hs-* tokens. Loaded ONLY on the active-WL BI surface
   via content_for(:head). 1:1 with admin-whitelabel-prototype/dashboard.html
   (names-only, card 86aje3e5t). */

/* header lead spans the full content width (proto: kills the top-right dead space) */
header .wl-page__lead { max-width: none; }

/* controls toolbar */
.wl-toolbar { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.wl-toolbar__field { display: flex; flex-direction: column; gap: 5px; }
.wl-toolbar__lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hs-ink-400); }
.wl-daterange { display: inline-flex; align-items: center; gap: 8px; }
.wl-daterange .wl-input { width: auto; }
.wl-presets { display: inline-flex; gap: 2px; padding: 3px; background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); border-radius: 9px; }
.wl-presets__btn { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--hs-ink-500); padding: 7px 13px; border-radius: 6px; text-decoration: none; transition: all var(--hs-dur) var(--hs-ease); }
.wl-presets__btn:hover { color: var(--hs-ink-800); }
.wl-presets__btn.is-active { background: var(--hs-primary-200); color: #fff; }
.wl-presets__btn.is-disabled, .wl-presets__btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* KPI stat tiles */
.wl-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1180px) { .wl-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .wl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .wl-stats { grid-template-columns: 1fr; } }
.wl-stat { position: relative; background: var(--hs-white); border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-lg); box-shadow: var(--hs-shadow-sm); padding: 16px 18px; transition: box-shadow var(--hs-dur) var(--hs-ease), transform var(--hs-dur) var(--hs-ease); }
.wl-stat:hover { box-shadow: var(--hs-shadow-md); transform: translateY(-1px); }
.wl-stat__label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--hs-ink-500); }
.wl-stat__ico { display: grid; place-items: center; height: 24px; width: 24px; flex: none; border-radius: 7px; background: var(--hs-primary-000); color: var(--hs-primary-300); }
.wl-stat__ico svg { height: 14px; width: 14px; }
.wl-stat__ico--warn { background: var(--hs-warning-soft); color: var(--hs-warning-dark); }
.wl-stat__ico--bad { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }
.wl-stat__val { margin-top: 10px; font-size: 27px; font-weight: 600; letter-spacing: -0.02em; color: var(--hs-ink-900); line-height: 1.05; }
.wl-stat__val small { font-size: 15px; font-weight: 500; color: var(--hs-ink-400); margin-left: 2px; }
.wl-stat__delta { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; font-weight: 600; }
.wl-stat__delta svg { height: 13px; width: 13px; }
.wl-stat__delta.is-up { color: var(--hs-positive-dark); }
.wl-stat__delta.is-down { color: var(--hs-negative-dark); }
.wl-stat__delta.is-flat { color: var(--hs-ink-400); }
.wl-stat__delta em { font-style: normal; color: var(--hs-ink-400); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
/* signal tile accent: a hairline top rule in the tile's hue */
.wl-stat--signal::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--sig, var(--hs-primary-200)); opacity: 0.9; }

/* funnel */
.wl-funnel { display: flex; flex-direction: column; }
.wl-funnel__row { position: relative; padding: 3px 0; }
.wl-funnel__row.is-request .wl-funnel__track { box-shadow: inset 0 0 0 1px var(--hs-primary-100); }
.wl-funnel__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.wl-funnel__stage { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--hs-ink-800); }
.wl-funnel__n { display: grid; place-items: center; height: 22px; width: 22px; flex: none; border-radius: 50%; background: var(--hs-ink-050); color: var(--hs-ink-500); font-size: 11.5px; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--hs-ink-200); }
.wl-funnel__row.is-request .wl-funnel__n { background: var(--hs-primary-000); color: var(--hs-primary-300); box-shadow: inset 0 0 0 1.5px var(--hs-primary-100); }

/* kind badge (AÇÃO do devedor vs REQUISIÇÃO front→BFF→sofi-api) */
.wl-kind { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.wl-kind--action { background: var(--hs-ink-050); color: var(--hs-ink-500); box-shadow: inset 0 0 0 1px var(--hs-ink-100); }
.wl-kind--request { background: var(--hs-primary-000); color: var(--hs-primary-300); box-shadow: inset 0 0 0 1px var(--hs-primary-100); }
.wl-kind svg { height: 10px; width: 10px; }

.wl-funnel__vals { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.wl-funnel__count { font-size: 15px; font-weight: 700; color: var(--hs-ink-900); }
.wl-funnel__pct { font-size: 12px; font-weight: 600; color: var(--hs-ink-400); }
.wl-funnel__track { position: relative; height: 32px; border-radius: 8px; background: var(--hs-ink-050); overflow: hidden; }
.wl-funnel__fill { display: flex; height: 100%; width: 0; border-radius: 8px; overflow: hidden; transition: width 900ms var(--hs-ease); background: linear-gradient(90deg, var(--hs-primary-300), var(--hs-primary-100)); }
.wl-funnel__row.is-critical .wl-funnel__track { box-shadow: inset 0 0 0 1.5px rgba(230,70,46,0.30); }
.wl-funnel__drop { display: flex; align-items: center; justify-content: flex-end; gap: 6px; height: 20px; padding-right: 2px; font-size: 11.5px; font-weight: 600; color: var(--hs-ink-400); }
.wl-funnel__drop svg { height: 12px; width: 12px; color: var(--hs-ink-300); }
.wl-funnel__drop.is-critical { color: var(--hs-negative-dark); }
.wl-funnel__drop.is-critical svg { color: var(--hs-negative-medium); }
.wl-funnel__drop.is-gain { color: var(--hs-positive-dark); }

/* real event-name caption per funnel stage (mono chip — "metrify everything") */
.wl-funnel__ev { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 500; color: var(--hs-ink-500); background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); padding: 1px 6px; border-radius: 5px; letter-spacing: -0.01em; margin-top: 4px; }

/* per-request ERROR slice — result-suffix name counts (…_failed) · ops error monitoring */
.wl-errrow { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 5px; }
.wl-errchip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--hs-negative-soft); color: var(--hs-negative-dark); }
.wl-errchip svg { height: 11px; width: 11px; flex: none; }
.wl-errchip--ok { background: var(--hs-positive-soft); color: var(--hs-positive-dark); }
.wl-errchip--watch { background: var(--hs-warning-soft); color: var(--hs-warning-dark); }

/* path legend above the funnel */
.wl-pathkey { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.wl-pathkey__i { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--hs-ink-600); }
.wl-pathkey__sw { height: 11px; width: 11px; border-radius: 3px; flex: none; }

/* branch leaks off a funnel stage (shared structure) */
.wl-leak { position: relative; display: flex; align-items: center; gap: 12px; margin: 8px 0 2px 30px; padding: 10px 14px; border-radius: 11px; background: var(--hs-warning-soft); border: 1px solid rgba(159,103,6,0.20); }
.wl-leak::before { content: ""; position: absolute; left: -16px; top: -20px; width: 15px; height: 34px; border-left: 2px solid var(--hs-warning-medium); border-bottom: 2px solid var(--hs-warning-medium); border-bottom-left-radius: 9px; }
.wl-leak__ico { display: grid; place-items: center; height: 30px; width: 30px; flex: none; border-radius: 9px; background: rgba(255,177,39,0.28); color: var(--hs-warning-dark); }
.wl-leak__ico svg { height: 16px; width: 16px; }
.wl-leak__title { font-size: 13.5px; font-weight: 700; color: var(--hs-warning-dark); }
.wl-leak__sub { font-size: 12px; color: #8a6413; margin-top: 1px; line-height: 1.4; }
.wl-leak__pct { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--hs-warning-dark); white-space: nowrap; }

/* re-simulation loop branch — an engagement branch (info hue), mirrors the leak structure */
.wl-leak--loop { background: var(--hs-primary-000); border-color: rgba(0,163,147,0.22); }
.wl-leak--loop::before { border-left-color: var(--hs-primary-200); border-bottom-color: var(--hs-primary-200); }
.wl-leak--loop .wl-leak__ico { background: rgba(0,163,147,0.16); color: var(--hs-primary-300); }
.wl-leak--loop .wl-leak__title { color: var(--hs-primary-300); }
.wl-leak--loop .wl-leak__sub { color: var(--hs-ink-500); }
.wl-leak--loop .wl-leak__pct { color: var(--hs-primary-300); }

/* eligibility-rejection branch — a NEGATIVE-outcome branch (red hue): debtor logged in
   but the program eligibility gate refused ("não é elegível ao programa"). */
.wl-leak--reject { background: var(--hs-negative-soft); border-color: rgba(230,70,46,0.22); }
.wl-leak--reject::before { border-left-color: var(--hs-negative-medium); border-bottom-color: var(--hs-negative-medium); }
.wl-leak--reject .wl-leak__ico { background: rgba(230,70,46,0.16); color: var(--hs-negative-dark); }
.wl-leak--reject .wl-leak__title { color: var(--hs-negative-dark); }
.wl-leak--reject .wl-leak__sub { color: #8a2b1c; }
.wl-leak--reject .wl-leak__pct { color: var(--hs-negative-dark); }

/* horizontal breakdown bars */
.wl-bars { display: flex; flex-direction: column; gap: 13px; }
.wl-bar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.wl-bar__label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--hs-ink-800); }
.wl-bar__swatch { height: 10px; width: 10px; border-radius: 3px; flex: none; }
.wl-bar__val { font-size: 12.5px; color: var(--hs-ink-400); white-space: nowrap; }
.wl-bar__val strong { color: var(--hs-ink-900); font-weight: 700; font-size: 13px; }
.wl-bar__track { height: 9px; border-radius: 999px; background: var(--hs-ink-050); overflow: hidden; }
.wl-bar__fill { height: 100%; width: 0; border-radius: 999px; transition: width 800ms var(--hs-ease); }

/* time-series legend */
.wl-legend { display: flex; align-items: center; gap: 16px; }
.wl-legend__i { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--hs-ink-500); }
.wl-legend__sw { height: 10px; width: 10px; border-radius: 3px; }
.wl-legend__ln { height: 3px; width: 16px; border-radius: 999px; }

.wl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .wl-grid-2 { grid-template-columns: 1fr; } }

/* platform segmentation control */
.wl-seg { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; background: var(--hs-white); border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-lg); box-shadow: var(--hs-shadow-sm); padding: 12px 14px; }
.wl-seg__head { display: flex; flex-direction: column; gap: 3px; flex: none; }
.wl-seg__lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hs-ink-400); }
.wl-seg__scope { font-size: 12.5px; color: var(--hs-ink-500); }
.wl-seg__scope b { color: var(--hs-ink-900); font-weight: 600; }
.wl-seg__scope code { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--hs-primary-300); background: var(--hs-primary-000); padding: 1px 5px; border-radius: 5px; }
.wl-seg__list { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; padding: 4px; background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); border-radius: 12px; }
.wl-segbtn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 7px 14px 7px 8px; font: inherit; text-align: left; text-decoration: none; transition: all var(--hs-dur) var(--hs-ease); }
.wl-segbtn:hover { background: var(--hs-white); border-color: var(--hs-ink-100); }
.wl-segbtn.is-active { background: var(--hs-white); border-color: var(--hs-primary-200); box-shadow: var(--hs-shadow-sm), 0 0 0 1px var(--hs-primary-200) inset; }
.wl-segbtn__logo { display: grid; place-items: center; height: 30px; width: 30px; flex: none; border-radius: 9px; color: #fff; font-weight: 700; font-size: 13px; background: linear-gradient(135deg,#00A393,#00C9B5); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); transition: transform var(--hs-dur) var(--hs-ease); }
.wl-segbtn.is-active .wl-segbtn__logo { transform: scale(1.04); }
.wl-segbtn__txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.wl-segbtn__name { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--hs-ink-700); }
.wl-segbtn.is-active .wl-segbtn__name { color: var(--hs-ink-900); }
.wl-segbtn__check { display: none; height: 14px; width: 14px; color: var(--hs-primary-300); }
.wl-segbtn.is-active .wl-segbtn__check { display: block; }
.wl-segbtn__sub { font-size: 11px; color: var(--hs-ink-400); font-family: ui-monospace, Menlo, monospace; }

/* empty / low-N states */
.wl-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 56px 24px; background: var(--hs-white); border: 1px dashed var(--hs-ink-200); border-radius: var(--hs-radius-lg); }
.wl-empty__ico { display: grid; place-items: center; height: 48px; width: 48px; border-radius: 14px; background: var(--hs-primary-000); color: var(--hs-primary-300); }
.wl-empty__ico svg { height: 24px; width: 24px; }
.wl-empty__title { font-size: 18px; font-weight: 600; color: var(--hs-ink-900); }
.wl-empty__sub { font-size: 13.5px; color: var(--hs-ink-500); max-width: 440px; }
.wl-lown { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--hs-warning-dark); background: var(--hs-warning-soft); border: 1px solid rgba(159,103,6,0.20); border-radius: 999px; padding: 4px 12px; }

/* Active-WL management header (Option A, card 86aje3e5t) — badge + Desativar + Editar
   at the page-title altitude, a single hairline dividing it from the analytics. 1:1
   with the prototype (admin-whitelabel-prototype/dashboard.html). */
.wl-mgmt { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--hs-ink-100); }
.wl-mgmt__id { min-width: 0; }
.wl-mgmt__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* ─────────────────────────────────────────────────────────────
   Whitelabel Admin Wizard — shared component kit (PROTOTYPE)
   Brand tokens lifted verbatim from the hiSofi design system
   (docs .../Whitelabel - Autosserviço/assets/colors_and_type.css).
   Plain CSS so it is openable on file:// and trivially portable to
   the Rails/Tailwind app. Layout = Tailwind utilities; the .wl-*
   classes below are the reusable pieces every step shares.
   ───────────────────────────────────────────────────────────── */

:root {
  --hs-primary-000: #BAFFFA;
  --hs-primary-100: #00E0CA;
  --hs-primary-200: #00A393;
  --hs-primary-300: #00897C;
  --hs-primary-400: #00736A;

  --hs-ink-900: #010204;
  --hs-ink-800: #1C1D1F;
  --hs-ink-700: #27282C;
  --hs-ink-600: #454C54;
  --hs-ink-500: #5B626A;
  --hs-ink-400: #717880;
  --hs-ink-300: #9EA3A9;
  --hs-ink-200: #CACDD4;
  --hs-ink-100: #E1E4E9;
  --hs-ink-050: #F7F8FA;
  --hs-white: #FFFFFF;

  --hs-info-dark: #038EFF;     --hs-info-soft: #B7F2FB;
  --hs-positive-dark: #066E37; --hs-positive-medium: #26BF6E; --hs-positive-soft: #C9F5DE;
  --hs-warning-dark: #9F6706;  --hs-warning-medium: #FFB127;  --hs-warning-soft: #F7E8CE;
  --hs-negative-dark: #871E0E; --hs-negative-medium: #E6462E; --hs-negative-soft: #F8D3CD;

  --hs-font: "Inter Tight", system-ui, sans-serif;
  --hs-font-alt: "Istok Web", Georgia, serif;

  --hs-radius-sm: 4px;
  --hs-radius-md: 8px;
  --hs-radius-lg: 16px;

  --hs-shadow-sm: 0 1px 2px rgba(1,2,4,0.05);
  --hs-shadow-md: 0 2px 5px rgba(1,2,4,0.10);
  --hs-shadow-lg: 0 12px 32px rgba(1,2,4,0.10);

  --hs-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --hs-dur: 180ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--hs-font);
  color: var(--hs-ink-800);
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(0,224,202,0.07), transparent 60%),
    var(--hs-ink-050);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--hs-primary-200); text-decoration: none; }
a:hover { color: var(--hs-primary-300); }

:focus-visible {
  outline: 2px solid var(--hs-primary-200);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── App shell layout ─────────────────────────────────────────── */
.wl-app { min-height: 100vh; }

.wl-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 20px;
  height: 64px; padding: 0 32px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--hs-ink-100);
}
.wl-header__brand { display: flex; align-items: center; gap: 10px; }
.wl-header__brand svg { display: block; height: 22px; width: auto; }
.wl-header__divider { width: 1px; height: 26px; background: var(--hs-ink-100); }

.wl-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wl-identity__logo {
  display: grid; place-items: center;
  height: 36px; width: 36px; flex: none;
  border-radius: 10px; color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), var(--hs-shadow-sm);
}
.wl-identity__name { font-weight: 600; font-size: 15px; line-height: 1.1; color: var(--hs-ink-900); }
.wl-identity__sub { font-size: 12px; color: var(--hs-ink-400); }

.wl-header__spacer { flex: 1; }

.wl-main { max-width: 1280px; }
.wl-shell {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 36px;
  padding: 28px 32px 80px;
}
@media (max-width: 900px) {
  .wl-shell { grid-template-columns: 1fr; gap: 20px; }
}

.wl-breadcrumb {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: var(--hs-ink-500);
  padding: 6px 4px; margin-bottom: 14px;
  transition: color var(--hs-dur) var(--hs-ease);
}
.wl-breadcrumb:hover { color: var(--hs-ink-800); }
.wl-breadcrumb svg { height: 15px; width: 15px; }

/* ── Rail ─────────────────────────────────────────────────────── */
.wl-rail {
  position: sticky; top: 92px;
  background: var(--hs-white);
  border: 1px solid var(--hs-ink-100);
  border-radius: var(--hs-radius-lg);
  box-shadow: var(--hs-shadow-sm);
  padding: 10px;
}
.wl-rail__title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hs-ink-400); padding: 8px 10px 10px;
}
.wl-rail__list { list-style: none; margin: 0; padding: 0; position: relative; }

.wl-step {
  position: relative;
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: start;
  width: 100%; text-align: left;
  padding: 10px 10px; border-radius: var(--hs-radius-md);
  color: var(--hs-ink-600); background: transparent; border: 0; cursor: pointer;
  font: inherit; font-size: 14px;
  transition: background var(--hs-dur) var(--hs-ease), color var(--hs-dur) var(--hs-ease);
}
.wl-step:hover { background: var(--hs-ink-050); }

/* connector line between markers */
.wl-step::before {
  content: ""; position: absolute; left: 23px; top: 34px; bottom: -8px;
  width: 2px; background: var(--hs-ink-100);
}
.wl-step:last-child::before { display: none; }

.wl-step__marker {
  grid-row: 1 / span 2;
  display: grid; place-items: center;
  height: 28px; width: 28px; border-radius: 50%;
  font-size: 12px; font-weight: 600;
  background: var(--hs-white); color: var(--hs-ink-400);
  box-shadow: inset 0 0 0 2px var(--hs-ink-200);
  z-index: 1;
}
.wl-step__label { font-weight: 500; color: var(--hs-ink-700); line-height: 1.3; }
.wl-step__hint {
  display: block; margin-top: 3px; font-size: 12px; line-height: 1.4;
  color: var(--hs-ink-400);
}
.wl-step__resolve {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--hs-primary-200);
}
.wl-step__resolve svg { height: 12px; width: 12px; }

/* state: complete — number kept; teal ring signals done, check sits on the right */
.wl-step.is-complete .wl-step__marker {
  background: #fff; color: var(--hs-primary-200); box-shadow: inset 0 0 0 2px var(--hs-primary-200);
}
/* state: active — filled teal "you are here" (wins over complete) */
.wl-step.is-active {
  background: linear-gradient(180deg, rgba(0,163,147,0.10), rgba(0,163,147,0.05));
  box-shadow: inset 2px 0 0 var(--hs-primary-200);
}
.wl-step.is-active .wl-step__label { color: var(--hs-ink-900); font-weight: 600; }
.wl-step.is-active .wl-step__marker { background: var(--hs-primary-200); color: #fff; box-shadow: none; }

/* state: invalid — amber ring on the number, amber dot on the right */
.wl-step.is-invalid .wl-step__marker {
  background: #fff; color: var(--hs-warning-dark);
  box-shadow: inset 0 0 0 2px var(--hs-warning-medium);
}
.wl-step.is-invalid .wl-step__hint { color: var(--hs-warning-dark); }

/* right-side status indicator */
.wl-step__status { display: inline-flex; align-items: center; justify-content: center; margin-top: 4px; }
.wl-step__status svg { height: 16px; width: 16px; }
.wl-step__status.is-ok { color: var(--hs-positive-medium); }
.wl-step__status.is-lock { color: var(--hs-ink-300); }
.wl-step__status.is-warn { height: 9px; width: 9px; border-radius: 50%; background: var(--hs-warning-medium); margin-top: 9px; }
.wl-step.is-disabled .wl-tag { margin-top: 3px; }

/* state: blocked (depends_on unmet) — not clickable, no resolve link */
.wl-step.is-blocked { cursor: not-allowed; }
.wl-step.is-blocked:hover { background: transparent; }
.wl-step.is-blocked .wl-step__marker {
  background: var(--hs-ink-050); color: var(--hs-ink-300); box-shadow: inset 0 0 0 2px var(--hs-ink-100);
}
.wl-step.is-blocked .wl-step__label { color: var(--hs-ink-400); }

/* state: disabled (coming soon) */
.wl-step.is-disabled { cursor: not-allowed; }
.wl-step.is-disabled:hover { background: transparent; }
.wl-step.is-disabled .wl-step__marker { background: var(--hs-ink-050); color: var(--hs-ink-300); box-shadow: inset 0 0 0 2px var(--hs-ink-100); }
.wl-step.is-disabled .wl-step__label { color: var(--hs-ink-300); }

.wl-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 999px; background: var(--hs-ink-100); color: var(--hs-ink-500);
}

/* ── Page heading ─────────────────────────────────────────────── */
.wl-page__eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--hs-primary-200);
}
.wl-page__eyebrow::before { content: "/ "; color: var(--hs-primary-200); }
.wl-page__title { margin: 6px 0 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--hs-ink-900); }
.wl-page__lead { margin: 8px 0 0; max-width: 60ch; font-size: 14.5px; color: var(--hs-ink-500); line-height: 1.55; }

/* ── Card ─────────────────────────────────────────────────────── */
.wl-card {
  background: var(--hs-white);
  border: 1px solid var(--hs-ink-100);
  border-radius: var(--hs-radius-lg);
  box-shadow: var(--hs-shadow-sm);
  overflow: hidden;
}
.wl-card__header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-bottom: 1px solid var(--hs-ink-100);
}
.wl-card__icon {
  display: grid; place-items: center; height: 32px; width: 32px; flex: none;
  border-radius: 9px; background: var(--hs-primary-000); color: var(--hs-primary-300);
}
.wl-card__icon svg { height: 17px; width: 17px; }
.wl-card__title { font-size: 15px; font-weight: 600; color: var(--hs-ink-900); }
.wl-card__desc { font-size: 12.5px; color: var(--hs-ink-400); margin-top: 1px; }
.wl-card__body { padding: 20px; }
.wl-card__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; background: var(--hs-ink-050); border-top: 1px solid var(--hs-ink-100);
}
.wl-card__footer .wl-spacer { margin-right: auto; font-size: 12.5px; color: var(--hs-ink-400); }

/* ── Form fields ──────────────────────────────────────────────── */
.wl-field { display: block; }
.wl-field + .wl-field { margin-top: 18px; }
.wl-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--hs-ink-700); margin-bottom: 6px;
}
.wl-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--hs-ink-400); line-height: 1.45; }
.wl-counter { font-size: 11px; font-weight: 500; color: var(--hs-ink-400); }
.wl-counter.is-over { color: var(--hs-negative-dark); }
.wl-robots { display: inline-block; margin-top: 4px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--hs-ink-500); }

.wl-input, .wl-select, .wl-textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--hs-ink-900);
  background: var(--hs-white);
  border: 1px solid var(--hs-ink-200); border-radius: var(--hs-radius-md);
  padding: 9px 12px;
  transition: border-color var(--hs-dur) var(--hs-ease), box-shadow var(--hs-dur) var(--hs-ease);
}
.wl-input::placeholder { color: var(--hs-ink-300); }
.wl-input:focus, .wl-select:focus, .wl-textarea:focus {
  outline: none; border-color: var(--hs-primary-200);
  box-shadow: 0 0 0 3px rgba(0,163,147,0.16);
}
.wl-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23717880'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 18px;
  padding-right: 38px;
}
.wl-input-affix { position: relative; display: flex; align-items: center; }
.wl-input-affix__suffix {
  position: absolute; right: 12px; font-size: 13px; color: var(--hs-ink-400); pointer-events: none;
}
.wl-input.is-error { border-color: var(--hs-negative-medium); box-shadow: 0 0 0 3px rgba(230,70,46,0.14); }
.wl-input.is-error:focus { box-shadow: 0 0 0 3px rgba(230,70,46,0.20); }
.wl-error { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--hs-negative-dark); }

/* color token row */
.wl-color { display: flex; align-items: center; gap: 12px; }
.wl-color input[type="color"] {
  -webkit-appearance: none; appearance: none; border: none; background: none;
  width: 46px; height: 46px; padding: 0; cursor: pointer; border-radius: 12px;
}
.wl-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.wl-color input[type="color"]::-webkit-color-swatch { border: 1px solid var(--hs-ink-100); border-radius: 12px; }
.wl-color__hex {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13px;
  color: var(--hs-ink-700); background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100);
  border-radius: var(--hs-radius-sm); padding: 5px 9px; text-transform: uppercase;
}

/* segmented / radio-card group */
.wl-choice {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--hs-ink-200); border-radius: var(--hs-radius-md);
  padding: 13px 14px; cursor: pointer;
  transition: border-color var(--hs-dur) var(--hs-ease), background var(--hs-dur) var(--hs-ease);
}
.wl-choice:hover { border-color: var(--hs-ink-300); background: var(--hs-ink-050); }
.wl-choice input { margin-top: 2px; accent-color: var(--hs-primary-200); width: 16px; height: 16px; }
.wl-choice__title { font-size: 14px; font-weight: 600; color: var(--hs-ink-900); }
.wl-choice__desc { font-size: 12.5px; color: var(--hs-ink-500); margin-top: 2px; line-height: 1.45; }
.wl-choice:has(input:checked) { border-color: var(--hs-primary-200); background: rgba(0,163,147,0.05); box-shadow: 0 0 0 1px var(--hs-primary-200) inset; }

/* toggle row (checkbox with label + help) */
.wl-toggle {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-top: 1px solid var(--hs-ink-100);
}
/* The HTML `hidden` attribute must always win. This sheet loads AFTER Tailwind's
   preflight `[hidden]{display:none}`, and several `wl-*` component classes set their
   own `display` (`.wl-btn` inline-flex, `.wl-field` block, `.wl-toggle` flex) at the
   same specificity — source order would otherwise leave a `hidden` element visible.
   The live theme-preview toggles (`syncDarkAvailability` on the "Escuro" button and
   the per-key dark color fields) rely on `hidden` to actually hide. (Supersedes the
   per-class `.wl-toggle[hidden]` below.) */
[hidden] { display: none !important; }
.wl-toggle[hidden] { display: none; }

/* Read-only surface (DR-12): an origin=api pricing editor is dimmed AND
   non-interactive at first paint (server-rendered, JS-off-safe) — the gateway
   dictates the ruler, so the whole Desconto/Encargos/Configurações surface is
   read-only. The Stimulus policy-form controller toggles this live as the origin
   radio changes. pointer-events:none blocks every tab/input inside. */
.wl-readonly { opacity: 0.55; pointer-events: none; }
.wl-toggle:first-child { border-top: 0; }
.wl-toggle input { margin-top: 2px; accent-color: var(--hs-primary-200); width: 16px; height: 16px; flex: none; }
.wl-toggle__title { display: block; font-size: 14px; font-weight: 500; color: var(--hs-ink-800); }
.wl-toggle__desc { display: block; font-size: 12.5px; color: var(--hs-ink-400); margin-top: 2px; line-height: 1.45; }

/* ── Buttons ──────────────────────────────────────────────────── */
.wl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  padding: 10px 16px; border-radius: var(--hs-radius-md); cursor: pointer;
  border: 1px solid transparent; transition: all var(--hs-dur) var(--hs-ease);
  white-space: nowrap;
}
.wl-btn svg { height: 16px; width: 16px; }
.wl-btn--primary { background: var(--hs-primary-200); color: #fff; box-shadow: var(--hs-shadow-sm); }
.wl-btn--primary:hover { background: var(--hs-primary-300); color: #fff; box-shadow: var(--hs-shadow-md); }
.wl-btn--secondary { background: var(--hs-white); color: var(--hs-ink-700); border-color: var(--hs-ink-200); }
.wl-btn--secondary:hover { border-color: var(--hs-ink-300); background: var(--hs-ink-050); color: var(--hs-ink-900); }
.wl-btn--ghost { background: transparent; color: var(--hs-ink-600); }
.wl-btn--ghost:hover { background: var(--hs-ink-050); color: var(--hs-ink-900); }
.wl-btn--danger { background: var(--hs-white); color: var(--hs-negative-dark); border-color: var(--hs-negative-soft); }
.wl-btn--danger:hover { background: #fdf3f1; border-color: var(--hs-negative-medium); }
.wl-btn--success { background: var(--hs-positive-dark); color: #fff; }
.wl-btn--success:hover { background: #055a2d; color: #fff; }
.wl-btn--warning { background: var(--hs-warning-dark); color: #fff; }
.wl-btn--warning:hover { background: #855705; color: #fff; }
.wl-btn[disabled], .wl-btn.is-disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.wl-btn--sm { padding: 7px 12px; font-size: 13px; }

/* ── Badges & pills ───────────────────────────────────────────── */
.wl-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}
.wl-badge::before { content: ""; height: 7px; width: 7px; border-radius: 50%; background: currentColor; }
.wl-badge--active { background: var(--hs-positive-soft); color: var(--hs-positive-dark); }
.wl-badge--draft { background: var(--hs-ink-100); color: var(--hs-ink-600); }
.wl-badge--disabled { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }

.wl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; padding: 4px 9px; border-radius: 6px;
  background: var(--hs-ink-050); color: var(--hs-ink-600); border: 1px solid var(--hs-ink-100);
}
.wl-chip--mono { font-family: ui-monospace, Menlo, monospace; }
.wl-chip--warning { background: var(--hs-warning-soft); color: var(--hs-warning-dark); border-color: transparent; }
.wl-chip--success { background: var(--hs-positive-soft); color: var(--hs-positive-dark); border-color: transparent; }
.wl-chip__icon { height: 13px; width: 13px; }

/* ── Switch ───────────────────────────────────────────────────── */
.wl-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; }
.wl-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wl-switch__track { position: absolute; inset: 0; background: var(--hs-ink-200); border-radius: 999px; transition: background var(--hs-dur) var(--hs-ease); pointer-events: none; }
.wl-switch__track::before { content: ""; position: absolute; top: 2px; left: 2px; height: 18px; width: 18px; background: #fff; border-radius: 50%; box-shadow: var(--hs-shadow-sm); transition: transform var(--hs-dur) var(--hs-ease); }
.wl-switch input:checked + .wl-switch__track { background: var(--hs-primary-200); }
.wl-switch input:checked + .wl-switch__track::before { transform: translateX(16px); }
.wl-switch input:focus-visible + .wl-switch__track { outline: 2px solid var(--hs-primary-200); outline-offset: 2px; }
.wl-switch input:disabled { cursor: not-allowed; }
.wl-switch input:disabled + .wl-switch__track { opacity: 0.55; }

/* ── Reorderable list (flow page catalog) ─────────────────────── */
.wl-orderitem {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); background: #fff;
}
.wl-orderitem + .wl-orderitem { margin-top: 8px; }
.wl-orderitem.is-off { background: var(--hs-ink-050); }
.wl-orderitem.is-off .wl-orderitem__name { color: var(--hs-ink-400); }
.wl-orderitem__handle { display: flex; color: var(--hs-ink-300); cursor: grab; }
.wl-orderitem__handle svg { height: 16px; width: 16px; }
.wl-orderitem__pos { width: 20px; text-align: center; font-size: 12px; font-weight: 600; color: var(--hs-ink-400); }
.wl-orderitem__name { font-size: 14px; font-weight: 500; color: var(--hs-ink-900); }
.wl-orderitem__key { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--hs-ink-400); }

/* ── Capability row (negotiation types) ───────────────────────── */
.wl-cap {
  display: flex; align-items: flex-start; gap: 16px; cursor: pointer;
  padding: 14px 16px; border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md);
  background: #fff; transition: border-color var(--hs-dur) var(--hs-ease);
}
.wl-cap:hover { border-color: var(--hs-ink-200); }
.wl-cap.is-off { background: var(--hs-ink-050); }
.wl-cap.is-off .wl-cap__title { color: var(--hs-ink-500); }
.wl-cap__title { font-size: 14.5px; font-weight: 600; color: var(--hs-ink-900); }
.wl-cap__desc { margin: 5px 0 0; font-size: 13px; color: var(--hs-ink-500); line-height: 1.45; }
.wl-cap__portal {
  display: flex; gap: 8px; margin: 9px 0 0; padding: 8px 11px; border-radius: 8px;
  background: rgba(0,163,147,0.06); font-size: 12.5px; line-height: 1.45; color: var(--hs-ink-700);
}
.wl-cap__portal > span {
  flex: none; font-weight: 700; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--hs-primary-300); padding-top: 1px;
}
.wl-cap .wl-switch { margin-top: 2px; }

/* ── Shape activation section (flow step v3) ──────────────────── */
/* Each debt selection SHAPE is an activatable section with its own
   per-shape config container. A shape the gateway can't support renders
   greyed/disabled (can't be activated). */
.wl-shape {
  border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md);
  background: #fff; overflow: hidden;
  transition: border-color var(--hs-dur) var(--hs-ease), box-shadow var(--hs-dur) var(--hs-ease);
}
.wl-shape + .wl-shape { margin-top: 12px; }
.wl-shape.is-active { border-color: var(--hs-primary-200); box-shadow: inset 0 0 0 1px var(--hs-primary-200); }
.wl-shape.is-unavailable { background: var(--hs-ink-050); border-style: dashed; }
.wl-shape__head { display: flex; align-items: flex-start; gap: 16px; padding: 14px 16px; }
.wl-shape__title { font-size: 14.5px; font-weight: 600; color: var(--hs-ink-900); }
.wl-shape.is-unavailable .wl-shape__title { color: var(--hs-ink-400); }
.wl-shape__desc { margin: 5px 0 0; font-size: 13px; color: var(--hs-ink-500); line-height: 1.45; }
.wl-shape__activate { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wl-shape__activate .wl-label { font-size: 11px; margin: 0; }
.wl-shape__config {
  border-top: 1px dashed var(--hs-ink-200); padding: 14px 16px;
  background: rgba(0,163,147,0.035);
}
.wl-shape__config-eyebrow {
  display: flex; align-items: center; gap: 7px; margin: 0 0 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--hs-primary-300);
}
.wl-shape__config-eyebrow svg { height: 13px; width: 13px; }
.wl-shape__config-hint { margin: 0 0 12px; font-size: 12px; color: var(--hs-ink-400); line-height: 1.4; }

/* per-shape config knob (inside a shape's config container) */
.wl-knob {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 11px 13px; border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-sm); background: #fff;
}
.wl-knob + .wl-knob { margin-top: 8px; }
.wl-knob__title { font-size: 13.5px; font-weight: 600; color: var(--hs-ink-800); }
.wl-knob__desc { margin: 3px 0 0; font-size: 12.5px; color: var(--hs-ink-500); line-height: 1.4; }
.wl-knob__label { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wl-knob__label .wl-label { font-size: 11px; margin: 0; }

.wl-tag--off { background: var(--hs-ink-100); color: var(--hs-ink-400); }

/* ── Dimension card + conditional rule (policy step) ──────────── */
.wl-dimcard { border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); padding: 14px; background: #fff; }
.wl-dimcard__head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--hs-ink-900); }

.wl-rule { border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); padding: 14px; background: #fff; }
.wl-rule__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl-rule__if { font-weight: 700; font-size: 11px; letter-spacing: 0.06em; color: var(--hs-ink-400); }
.wl-rule__num { display: grid; place-items: center; height: 22px; width: 22px; flex: none; border-radius: 50%; background: var(--hs-primary-200); color: #fff; font-size: 12px; font-weight: 700; }
.wl-rule__conds { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--hs-ink-700); }
.wl-rule__addcond { margin-top: 8px; }
.wl-rule__then { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--hs-ink-100); font-size: 13px; color: var(--hs-ink-700); }
.wl-rule__eff { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.wl-rule__eff input[type="radio"] { accent-color: var(--hs-primary-200); width: 15px; height: 15px; }

.wl-condrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl-condrow__type { flex: 1; min-width: 0; }
.wl-condrow__param { max-width: 150px; flex: none; }
.wl-condrow__rm { display: grid; place-items: center; height: 36px; width: 36px; flex: none; padding: 0; border: 0; border-radius: var(--hs-radius-md); background: var(--hs-ink-050); color: var(--hs-ink-500); cursor: pointer; font-size: 16px; line-height: 1; }
.wl-condrow__rm:hover { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }

/* QUANDO condition row: axis + dynamic operator + dependent value(s) */
.wl-cond__axis { flex: 1 1 170px; min-width: 150px; }
.wl-cond__rest { flex: 2 1 300px; display: flex; align-items: center; gap: 6px 8px; min-width: 0; flex-wrap: wrap; }
/* inputs/selects sit at natural width, never 100% (which collapsed them in flex) */
.wl-cond__rest .wl-input, .wl-cond__rest .wl-select { width: auto; flex: 0 0 auto; }
.wl-cond__input, .wl-cond__input2 { min-width: 80px; max-width: 110px; }
.wl-cond__rest input[type="date"] { min-width: 132px; max-width: 150px; }
/* component rows (ENTÃO): number input direct child shouldn't stretch to 100% */
.wl-condrow > .wl-input { width: auto; flex: 0 0 auto; }
.wl-cond__op { font-size: 13px; color: var(--hs-ink-500); flex: none; }
.wl-cond__unit { font-size: 13px; color: var(--hs-ink-400); flex: none; }
.wl-cond__static { font-size: 13px; color: var(--hs-ink-400); font-style: italic; }

/* ENTÃO — one unified card: header strip + connected underline tabs + body */
/* section header (two-part split inside a step) */
.wl-secthead { display: flex; align-items: flex-start; gap: 14px; margin-top: 28px; }
.wl-secthead--divided { border-top: 1px solid var(--hs-ink-100); padding-top: 28px; margin-top: 32px; }
.wl-secthead__icon { display: grid; place-items: center; height: 36px; width: 36px; flex: none; border-radius: 10px; background: var(--hs-primary-000); color: var(--hs-primary-300); }
.wl-secthead__icon svg { height: 19px; width: 19px; }
.wl-secthead__eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--hs-primary-200); }
.wl-secthead__title { margin: 3px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--hs-ink-900); }
.wl-secthead__desc { margin: 4px 0 0; font-size: 13.5px; color: var(--hs-ink-500); line-height: 1.5; max-width: 60ch; }

/* page-level concern tabs (Política de negociação | Regras de seleção) */
.wl-pagetabs { display: inline-flex; gap: 4px; background: #fff; border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); padding: 4px; box-shadow: var(--hs-shadow-sm); }
.wl-pagetab { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--hs-ink-500); padding: 9px 18px; border-radius: 8px; transition: all var(--hs-dur) var(--hs-ease); }
.wl-pagetab:hover { color: var(--hs-ink-900); background: var(--hs-ink-050); }
.wl-pagetab.is-active { background: var(--hs-primary-200); color: #fff; }

/* segmented control (flow switch) */
.wl-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); border-radius: 9px; }
.wl-seg__btn { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--hs-ink-500); padding: 6px 16px; border-radius: 6px; transition: all var(--hs-dur) var(--hs-ease); }
.wl-seg__btn:hover { color: var(--hs-ink-800); }
.wl-seg__btn.is-active { background: #fff; color: var(--hs-primary-300); box-shadow: var(--hs-shadow-sm); }
/* preventivo rule footer (QUANDO-only, no ENTÃO) */
.wl-rule__prevfoot { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--hs-ink-100); font-size: 13px; color: var(--hs-ink-600); }

.wl-rule__then { display: block; margin-top: 12px; border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); background: var(--hs-ink-050); overflow: hidden; }
.wl-then__head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 12px 14px; background: var(--hs-ink-050); border-bottom: 1px solid var(--hs-ink-100); }
.wl-package { width: 100%; background: #fff; border: 0; border-radius: 0; padding: 0; margin: 0; }
.wl-tabs { display: flex; gap: 4px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--hs-ink-100); }
.wl-tab { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--hs-ink-500); padding: 12px 6px; margin-bottom: -1px; border-bottom: 2px solid transparent; border-radius: 0; transition: color var(--hs-dur) var(--hs-ease); }
.wl-tab:hover { color: var(--hs-ink-800); }
.wl-tab.is-active { color: var(--hs-primary-300); border-bottom-color: var(--hs-primary-200); }
.wl-tabpanel { padding: 16px; }
.wl-tabpanel[hidden] { display: none; }
.wl-pkg__title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--hs-ink-600); margin-bottom: 8px; }
.wl-pkg__col > .wl-condrow, [data-comps] > .wl-condrow { margin-bottom: 8px; }
.wl-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.wl-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 16px; align-items: start; }
@media (max-width: 720px) { .wl-grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wl-grid2, .wl-grid3 { grid-template-columns: 1fr; } }
.wl-inline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.wl-num { width: auto; max-width: 90px; flex: 0 0 auto; }

/* ── Rule chip (preventivo dynamic rules) ─────────────────────── */
.wl-rulechip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; padding: 5px 6px 5px 12px; border-radius: 999px;
  background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); color: var(--hs-ink-700);
}
.wl-rulechip em { font-style: normal; color: var(--hs-ink-400); }
.wl-rulechip button {
  display: grid; place-items: center; height: 18px; width: 18px; padding: 0;
  border: 0; border-radius: 50%; background: var(--hs-ink-100); color: var(--hs-ink-500);
  cursor: pointer; font-size: 13px; line-height: 1;
}
.wl-rulechip button:hover { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }

/* ── Journey stepper (fixed negotiate→simulate→agreement) ─────── */
.wl-journey {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px; border: 1px solid var(--hs-ink-100);
  border-radius: 999px; background: #fff;
}
.wl-journey__n {
  display: grid; place-items: center; height: 26px; width: 26px; flex: none;
  border-radius: 50%; background: var(--hs-primary-200); color: #fff; font-size: 12px; font-weight: 700;
}
.wl-journey__t { display: block; font-size: 13.5px; font-weight: 600; color: var(--hs-ink-900); }
.wl-journey__d { display: block; font-size: 11.5px; color: var(--hs-ink-400); }
.wl-journey__sep { height: 16px; width: 16px; color: var(--hs-ink-300); flex: none; }

/* ── Callout (info / warning / danger / success) ──────────────── */
.wl-callout {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--hs-radius-md); padding: 13px 15px; font-size: 13.5px; line-height: 1.5;
}
/* `display: flex` above beats the UA `[hidden] { display: none }` rule, so a
   callout server-rendered with `hidden` (e.g. the origin=api read-only banner on
   an internal policy) or toggled hidden by Stimulus stayed VISIBLE. Re-assert the
   hide — same fix as .wl-toggle[hidden] / .wl-tabpanel[hidden] below. */
.wl-callout[hidden] { display: none; }
.wl-callout__icon { flex: none; margin-top: 1px; }
.wl-callout__icon svg { height: 18px; width: 18px; }
.wl-callout p { margin: 0; }
.wl-callout strong { font-weight: 600; }
.wl-callout--info { background: var(--hs-info-soft); color: #0a4a7a; }
.wl-callout--info .wl-callout__icon { color: var(--hs-info-dark); }
.wl-callout--warning { background: var(--hs-warning-soft); color: var(--hs-warning-dark); }
.wl-callout--danger { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }
.wl-callout--success { background: var(--hs-positive-soft); color: var(--hs-positive-dark); }
.wl-callout--muted { background: var(--hs-ink-050); color: var(--hs-ink-600); border: 1px solid var(--hs-ink-100); }

/* ── Checklist (Resumo) ───────────────────────────────────────── */
.wl-checklist { list-style: none; margin: 0; padding: 0; }
.wl-checklist__item {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start;
  padding: 14px 4px; border-top: 1px solid var(--hs-ink-100);
}
.wl-checklist__item:first-child { border-top: 0; }
.wl-checklist__mark {
  display: grid; place-items: center; height: 20px; width: 20px; border-radius: 50%; margin-top: 1px;
}
.wl-checklist__mark svg { height: 13px; width: 13px; }
.is-ok .wl-checklist__mark { background: var(--hs-positive-soft); color: var(--hs-positive-dark); }
.is-pending .wl-checklist__mark { background: var(--hs-warning-soft); color: var(--hs-warning-dark); }
.wl-checklist__label { font-size: 14px; font-weight: 500; color: var(--hs-ink-900); }
.wl-checklist__reason { font-size: 12.5px; color: var(--hs-ink-500); margin-top: 2px; line-height: 1.45; }
.is-pending .wl-checklist__reason { color: var(--hs-warning-dark); }
.wl-checklist__resolve { font-size: 12.5px; font-weight: 600; color: var(--hs-primary-200); white-space: nowrap; margin-top: 2px; }

/* ── Help chip + popover (CC3) ────────────────────────────────── */
.wl-help { position: relative; display: inline-flex; }
.wl-help__btn {
  display: grid; place-items: center; height: 16px; width: 16px; border-radius: 50%;
  background: var(--hs-ink-100); color: var(--hs-ink-500); border: 0; cursor: help;
  font-size: 11px; font-weight: 700; padding: 0; line-height: 1;
}
.wl-help__btn:hover, .wl-help__btn:focus-visible { background: var(--hs-primary-200); color: #fff; }
.wl-help__pop {
  position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%) translateY(4px);
  width: 248px; padding: 10px 12px; z-index: 40;
  background: var(--hs-ink-900); color: #fff; font-size: 12.5px; font-weight: 400; line-height: 1.5;
  border-radius: 10px; box-shadow: var(--hs-shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--hs-dur) var(--hs-ease), transform var(--hs-dur) var(--hs-ease);
}
.wl-help__pop::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--hs-ink-900);
}
.wl-help:hover .wl-help__pop,
.wl-help__btn:focus-visible + .wl-help__pop,
.wl-help.is-open .wl-help__pop {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto;
}

/* ── Override accordion (theme texts) ─────────────────────────── */
.wl-ovgroup { border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); overflow: hidden; }
.wl-ovgroup + .wl-ovgroup { margin-top: 10px; }
.wl-ovgroup__sum {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--hs-ink-900);
  background: var(--hs-ink-050);
}
.wl-ovgroup__sum::-webkit-details-marker { display: none; }
.wl-ovgroup__sum .wl-orderitem__key { font-weight: 400; }
.wl-ovgroup__chev { height: 18px; width: 18px; margin-left: auto; color: var(--hs-ink-300); transition: transform var(--hs-dur) var(--hs-ease); }
.wl-ovgroup[open] .wl-ovgroup__chev { transform: rotate(180deg); }
.wl-ovgroup__body { padding: 16px 14px; border-top: 1px solid var(--hs-ink-100); }

/* ── Data list / read-only fields ─────────────────────────────── */
.wl-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.wl-dl dt { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hs-ink-400); }
.wl-dl dd { margin: 4px 0 0; font-size: 14px; color: var(--hs-ink-900); }
.wl-dl dd.mono { font-family: ui-monospace, Menlo, monospace; font-size: 13px; word-break: break-all; }

/* ── Misc ─────────────────────────────────────────────────────── */
.wl-divider { height: 1px; background: var(--hs-ink-100); border: 0; margin: 24px 0; }
.wl-section-title { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hs-ink-400); }

/* ── v2 chrome: global sidebar + main + progress + footer nav ─── */
.wl-root { display: flex; min-height: 100vh; }

.wl-gnav {
  position: sticky; top: 0; align-self: flex-start;
  width: 64px; height: 100vh; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 0; background: var(--hs-ink-900);
}
.wl-gnav__brand {
  display: grid; place-items: center; height: 40px; width: 40px; margin-bottom: 8px;
  border-radius: 11px; color: var(--hs-primary-100); background: rgba(255,255,255,0.06);
}
.wl-gnav__brand svg { height: 22px; width: 22px; }
.wl-gnav__list { display: flex; flex-direction: column; gap: 6px; }
.wl-gnav__item {
  display: grid; place-items: center; height: 40px; width: 40px;
  border: 0; border-radius: 11px; cursor: pointer;
  background: transparent; color: var(--hs-ink-300);
  transition: all var(--hs-dur) var(--hs-ease);
}
.wl-gnav__item svg { height: 19px; width: 19px; }
.wl-gnav__item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.wl-gnav__item.is-active { background: var(--hs-primary-200); color: #fff; }
@media (max-width: 720px) { .wl-gnav { display: none; } }

.wl-main { flex: 1; min-width: 0; }

.wl-header__pending {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--hs-warning-dark);
  background: var(--hs-warning-soft); padding: 6px 11px; border-radius: 999px;
  transition: filter var(--hs-dur) var(--hs-ease);
}
.wl-header__pending:hover { filter: brightness(0.97); color: var(--hs-warning-dark); }
.wl-header__pending .wl-dot { height: 7px; width: 7px; border-radius: 50%; background: var(--hs-warning-medium); }

.wl-col { min-width: 0; }

/* rail progress meter */
.wl-rail__head { padding: 6px 10px 12px; }
.wl-rail__meter { margin-top: 8px; }
.wl-rail__bar { height: 6px; border-radius: 999px; background: var(--hs-ink-100); overflow: hidden; }
.wl-rail__bar span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--hs-primary-200), var(--hs-primary-100)); transition: width 500ms var(--hs-ease); }
.wl-rail__count { display: block; margin-top: 7px; font-size: 11.5px; color: var(--hs-ink-400); }

/* footer step nav */
.wl-footernav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hs-ink-100);
}
.wl-footernav__pos { font-size: 12.5px; font-weight: 600; color: var(--hs-ink-400); }
@media (max-width: 560px) { .wl-footernav__pos { display: none; } }

/* Turbo-style top navigation bar */
.wl-navbar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
  background: linear-gradient(90deg, var(--hs-primary-200), var(--hs-primary-100));
}
.wl-navbar.is-loading { animation: wl-load 900ms var(--hs-ease) forwards; }
@keyframes wl-load { 0% { transform: scaleX(0); } 60% { transform: scaleX(0.75); } 100% { transform: scaleX(0.95); } }

/* page-load stagger */
@keyframes wl-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.wl-rise { animation: wl-rise 420ms var(--hs-ease) both; }
.wl-rise-1 { animation-delay: 60ms; }
.wl-rise-2 { animation-delay: 120ms; }
.wl-rise-3 { animation-delay: 180ms; }
.wl-rise-4 { animation-delay: 240ms; }
@keyframes wl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wl-rise { animation: none; } }

/* ─────────────────────────────────────────────────────────────
   Portal Whitelabel — module shell sidenav (mirrors integration_hub
   mechanics, skinned with the wl-* brand ink/teal tokens). Used by
   app/views/layouts/whitelabel_portal/*.
   ───────────────────────────────────────────────────────────── */
.wl-sidenav { background: var(--hs-ink-900); }
.wl-sidenav__brand {
  display: flex; align-items: center; flex-shrink: 0;
  padding: 16px; background: var(--hs-ink-900);
}
.wl-sidenav__section {
  padding: 0 12px; font-size: 13px; font-weight: 500; color: var(--hs-ink-300);
}
.wl-sidenav__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; border-radius: var(--hs-radius-md);
  font-size: 14px; font-weight: 500; color: var(--hs-ink-200);
  transition: background var(--hs-dur) var(--hs-ease), color var(--hs-dur) var(--hs-ease);
}
.wl-sidenav__item:hover { background: var(--hs-primary-400); color: var(--hs-white); }
.wl-sidenav__item.is-active { background: var(--hs-primary-300); color: var(--hs-white); }
.wl-sidenav__icon { height: 20px; width: 20px; flex: none; }
.wl-empty { padding: 24px 4px; font-size: 14px; color: var(--hs-ink-400); }

/* ── Rail group headings (R7 — grouped 5-section rail) ───────────── */
.wl-rail__group {
  padding: 14px 10px 6px; margin-top: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--hs-ink-300);
}
.wl-rail__list > .wl-rail__group:first-child { margin-top: 0; padding-top: 6px; }

/* ── Per-platform selector band + Fontes membership step (D-UX1/R6) ── */
.wl-fontes {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--hs-white); border: 1px solid var(--hs-ink-100);
  border-radius: var(--hs-radius-lg); box-shadow: var(--hs-shadow-sm);
  padding: 12px 14px; margin-top: 20px;
}
.wl-fontes__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hs-ink-400); flex: none;
}
.wl-fontes__list { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.wl-fonte {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--hs-white); border: 1px solid var(--hs-ink-200);
  border-radius: var(--hs-radius-md); padding: 7px 14px 7px 9px;
  font: inherit; text-align: left; transition: all var(--hs-dur) var(--hs-ease);
}
.wl-fonte:hover { border-color: var(--hs-ink-300); background: var(--hs-ink-050); }
.wl-fonte.is-active {
  border-color: var(--hs-primary-200); background: rgba(0,163,147,0.06);
  box-shadow: 0 0 0 1px var(--hs-primary-200) inset;
}
.wl-fontes__manage { flex: none; font-size: 12.5px; font-weight: 600; color: var(--hs-primary-200); white-space: nowrap; }
.wl-fonte__logo {
  display: grid; place-items: center; height: 30px; width: 30px; flex: none;
  border-radius: 9px; color: #fff; font-weight: 700; font-size: 13px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}
.wl-fonte__txt { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; }
.wl-fonte__name { font-size: 13.5px; font-weight: 600; color: var(--hs-ink-900); }
.wl-fonte__sub { font-size: 11px; color: var(--hs-ink-400); font-family: ui-monospace, Menlo, monospace; }

/* fonte roster row (Fontes membership step) */
.wl-fonterow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.wl-fonterow + .wl-fonterow { border-top: 1px solid var(--hs-ink-100); }
.wl-fonterow__name { font-size: 14.5px; font-weight: 600; color: var(--hs-ink-900); }
.wl-fonterow__sub { font-size: 12.5px; color: var(--hs-ink-400); margin-top: 1px; }

/* scope context line under the band (which fonte you are configuring) */
.wl-scope {
  display: flex; align-items: center; gap: 9px; margin: 16px 0 2px;
  font-size: 13px; color: var(--hs-ink-500);
}
.wl-scope strong { color: var(--hs-ink-900); font-weight: 600; }
.wl-scope__logo {
  display: grid; place-items: center; height: 22px; width: 22px; flex: none;
  border-radius: 6px; color: #fff; font-weight: 700; font-size: 11px;
}

/* ── Text master-detail nav (Tema › Textos — mini-wizard) ─────── */
.wl-textnav {
  position: sticky; top: 92px;
  background: var(--hs-white); border: 1px solid var(--hs-ink-100);
  border-radius: var(--hs-radius-lg); box-shadow: var(--hs-shadow-sm); padding: 8px;
}
.wl-textnav__title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hs-ink-400); padding: 8px 10px 10px;
}
.wl-textnav__item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 10px; border: 0; background: transparent; border-radius: var(--hs-radius-md);
  cursor: pointer; font: inherit; transition: background var(--hs-dur) var(--hs-ease);
}
.wl-textnav__item + .wl-textnav__item { margin-top: 2px; }
.wl-textnav__item:hover { background: var(--hs-ink-050); }
.wl-textnav__item.is-active { background: linear-gradient(180deg, rgba(0,163,147,0.10), rgba(0,163,147,0.05)); box-shadow: inset 2px 0 0 var(--hs-primary-200); }
.wl-textnav__num {
  display: grid; place-items: center; height: 26px; width: 26px; flex: none;
  border-radius: 50%; font-size: 12px; font-weight: 600;
  background: var(--hs-white); color: var(--hs-ink-400); box-shadow: inset 0 0 0 2px var(--hs-ink-200);
}
.wl-textnav__item.is-active .wl-textnav__num { background: var(--hs-primary-200); color: #fff; box-shadow: none; }
.wl-textnav__txt { flex: 1; min-width: 0; }
.wl-textnav__label { display: block; font-size: 14px; font-weight: 500; color: var(--hs-ink-900); line-height: 1.25; }
.wl-textnav__item.is-active .wl-textnav__label { font-weight: 600; }
.wl-textnav__key { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--hs-ink-400); margin-top: 1px; }
.wl-textnav__dot { height: 7px; width: 7px; flex: none; border-radius: 50%; background: var(--hs-primary-200); }
.wl-textpane[hidden] { display: none; }

/* ── Métodos de Pagamento step (payments.html parity — card 86ajckwjj) ── */
.pm-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--hs-ink-100); border-radius: 8px; background: #fff; }
.pm-row + .pm-row { margin-top: 10px; }
.pm-row.is-off { opacity: .55; background: var(--hs-ink-050); }
.pm-row__ico { flex: none; display: grid; place-items: center; height: 34px; width: 34px;
  border-radius: 8px; background: var(--hs-ink-050); color: var(--hs-ink-600); }
.pm-row__ico svg { height: 17px; width: 17px; }
.pm-row__name { font-weight: 600; color: var(--hs-ink-900); font-size: 14px; }
.pm-row__desc { margin: 2px 0 0; font-size: 12.5px; color: var(--hs-ink-500); }
.pm-row__meta { margin: 6px 0 0; font-size: 12px; color: var(--hs-ink-500); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pm-row__meta b { color: var(--hs-ink-700); font-weight: 600; }
.pm-row__meta a { color: var(--hs-primary-300); text-decoration: underline; word-break: break-all; }
.pm-row__side { margin-left: auto; flex: none; display: flex; align-items: center; gap: 10px; }
.pm-row__side form { display: inline-flex; }
.pm-gwchip { display: inline-flex; align-items: center; gap: 5px; }
/* Row actions are real FORM buttons (server round-trip, rack_test-clickable):
   the toggle is painted exactly like .wl-switch — .is-on mirrors input:checked. */
.wl-switchbtn { position: relative; display: inline-block; width: 38px; height: 22px;
  padding: 0; border: 0; background: transparent; cursor: pointer; flex: none; }
.wl-switchbtn.is-on .wl-switch__track { background: var(--hs-primary-200); }
.wl-switchbtn.is-on .wl-switch__track::before { transform: translateX(16px); }
.wl-switchbtn:focus-visible .wl-switch__track { outline: 2px solid var(--hs-primary-200); outline-offset: 2px; }
.pm-move { padding: 0 8px; }
.pm-move[disabled] { opacity: .4; cursor: not-allowed; }
/* Inline edit disclosure (card 86ajckwjj) — a JS-free <details> under the row's
   content column; the summary reads as a small ghost-link affordance. */
.pm-edit { margin-top: 8px; }
.pm-edit__summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--hs-primary-300); list-style: none;
  width: fit-content; user-select: none; }
.pm-edit__summary::-webkit-details-marker { display: none; }
.pm-edit__summary::before { content: "\270E"; font-weight: 400; }
.pm-edit[open] > .pm-edit__summary { margin-bottom: 4px; }
/* ≤480px: the reorder arrows (a plan addition over the prototype) would crush
   the row's content column — the action cluster wraps to its own line instead,
   keeping the name/description at full width (the prototype has no arrows). */
@media (max-width: 480px) {
  .pm-row { flex-wrap: wrap; }
  /* flex-basis 100% forces the wrap: the content column carries an inline
     min-width:0 (prototype-faithful) and would otherwise shrink forever. */
  .pm-row__side { flex-basis: 100%; justify-content: flex-end; padding-top: 4px; }
}

/* ── Acesso de Máquina (Sofia) — U5.2a, page-local kit-consistent styles
      ported 1:1 from admin-whitelabel-prototype/auth.html #sofia ─────────── */
.wl-sofia-cred { border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); padding: 16px 18px; background: #fff; }
.wl-sofia-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wl-sofia-line + .wl-sofia-line { margin-top: 12px; }
.wl-sofia-key { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--hs-ink-400); min-width: 72px; }
.wl-sofia-val { font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; color: var(--hs-ink-900); }
.wl-sofia-copybtn { display: inline-flex; align-items: center; gap: 5px; }
.wl-sofia-copybtn svg { height: 13px; width: 13px; }
.wl-sofia-secret { border: 1px solid var(--hs-positive-medium, transparent); background: var(--hs-positive-soft); border-radius: var(--hs-radius-md); padding: 14px 16px; margin-top: 14px; }
.wl-sofia-secret__head { display: flex; gap: 8px; align-items: center; color: var(--hs-positive-dark); font-size: 13px; font-weight: 700; }
.wl-sofia-secret__head svg { height: 16px; width: 16px; }
.wl-sofia-secret__val { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.wl-sofia-secret__code { font-family: ui-monospace, Menlo, monospace; font-size: 14px; color: var(--hs-ink-900); word-break: break-all; }
.wl-sofia-secret__warn { margin: 8px 0 0; font-size: 12px; color: var(--hs-positive-dark); }
.wl-sofia-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wl-sofia-status__meta { font-size: 13px; color: var(--hs-ink-500); }
.wl-sofia-status__meta b { color: var(--hs-ink-700); font-weight: 600; }
.wl-sofia-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hs-ink-100); display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--hs-ink-400); }
.wl-sofia-foot svg { height: 14px; width: 14px; flex: none; margin-top: 1px; color: var(--hs-ink-300); }

/* ── policy_groups rule-chain editor (U5) — page-local kit-consistent styles.
      The nested matcher tree, ordered rule cards, fixed else row, and inline
      per-node validation. Uses the shared --hs-* tokens. ─────────────────── */
.wl-alert { border-radius: var(--hs-radius-md); padding: 10px 12px; font-size: 12.5px; line-height: 1.45; margin: 8px 0; }
.wl-alert--error { background: #fdf3f1; border: 1px solid var(--hs-negative-soft); color: var(--hs-negative-dark); }
.wl-alert--warn { background: var(--hs-warning-soft, #fff7e6); border: 1px solid var(--hs-warning-medium, #f0c36d); color: var(--hs-warning-dark); }
.wl-list { margin: 6px 0 0; padding-left: 18px; }
.wl-list li { margin: 2px 0; }
.wl-hint--muted { color: var(--hs-ink-400); }
.wl-btn--xs { padding: 4px 8px; font-size: 12px; border-radius: var(--hs-radius-sm); }
.wl-icon-btn { display: inline-flex; align-items: center; justify-content: center; height: 26px; width: 26px; border-radius: var(--hs-radius-sm); border: 1px solid var(--hs-ink-200); background: #fff; color: var(--hs-ink-500); cursor: pointer; font-size: 13px; line-height: 1; }
.wl-icon-btn:hover { background: var(--hs-ink-050); color: var(--hs-ink-900); }
.wl-icon-btn[disabled] { opacity: .4; cursor: not-allowed; }
.wl-icon-btn--danger:hover { background: #fdf3f1; border-color: var(--hs-negative-soft); color: var(--hs-negative-dark); }
.wl-select--sm, .wl-input--sm { padding: 5px 8px; font-size: 13px; }
.wl-input--sm { min-width: 120px; }

.wl-chain { display: flex; flex-direction: column; gap: 10px; }
.wl-chain__rule { border: 1px solid var(--hs-ink-200); border-radius: var(--hs-radius-md); padding: 12px; background: #fff; }
.wl-chain__rule-head { display: flex; align-items: center; gap: 8px; }
.wl-chain__rule-num { display: inline-flex; align-items: center; justify-content: center; height: 22px; min-width: 22px; padding: 0 5px; border-radius: 999px; background: var(--hs-primary-100); color: var(--hs-primary-300); font-size: 12px; font-weight: 700; }
.wl-chain__rule-ctl { display: inline-flex; gap: 4px; margin-left: auto; }
.wl-chain__match { margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--hs-ink-100); }
.wl-chain__root-ctl { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.wl-chain__else { border: 1px dashed var(--hs-ink-300); border-radius: var(--hs-radius-md); padding: 12px; background: var(--hs-ink-050); }
.wl-chain__else-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hs-ink-400); }

.wl-node { border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-sm); padding: 8px; background: var(--hs-ink-050); }
.wl-node + .wl-node { margin-top: 8px; }
.wl-node--error { border-color: var(--hs-negative-medium); background: #fdf3f1; }
.wl-node__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl-node__ctl { display: inline-flex; gap: 4px; margin-left: auto; align-items: center; }
.wl-node__children, .wl-node__not-child { margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--hs-ink-100); }
.wl-node__not-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--hs-negative-dark); }
.wl-node__err { margin-top: 6px; font-size: 12px; color: var(--hs-negative-dark); }
.wl-node--group { background: #fff; }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

.scrollable::-webkit-scrollbar {
  display: none;
}

.scrollable {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/*!
 * FilePond 4.30.4
 * Licensed under MIT, https://opensource.org/licenses/MIT/
 * Please visit https://pqina.nl/filepond/ for details.
 */

/* eslint-disable */
.filepond--assistant {
    position: absolute;
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    white-space: nowrap;
}
/* Hard to override styles */
.filepond--browser.filepond--browser {
    /* is positioned absolute so it is focusable for form validation errors */
    position: absolute;
    margin: 0;
    padding: 0;

    /* is positioned ~behind drop label */
    left: 1em;
    top: 1.75em;
    width: calc(100% - 2em);

    /* hide visually */
    opacity: 0;
    font-size: 0; /* removes text cursor in Internet Explorer 11 */
}
.filepond--data {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
    visibility: hidden;
    pointer-events: none;
    contain: strict;
}
.filepond--drip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    opacity: 0.1;

    /* can't interact with this element */
    pointer-events: none;

    /* inherit border radius from parent (needed for drip-blob cut of) */
    border-radius: 0.5em;

    /* this seems to prevent Chrome from redrawing this layer constantly */
    background: rgba(0, 0, 0, 0.01);
}
.filepond--drip-blob {
    position: absolute;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    top: 0;
    left: 0;
    width: 8em;
    height: 8em;
    margin-left: -4em;
    margin-top: -4em;
    background: #292625;
    border-radius: 50%;

    /* will be animated */
    will-change: transform, opacity;
}
.filepond--drop-label {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0;
    color: #4f4f4f;

    /* center contents */
    display: flex;
    justify-content: center;
    align-items: center;

    /* fixes IE11 centering problems (is overruled by label min-height) */
    height: 0px;

    /* dont allow selection */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* will be animated */
    will-change: transform, opacity;
}
/* Hard to override styles on purpose */
.filepond--drop-label.filepond--drop-label label {
    display: block;
    margin: 0;
    padding: 0.5em; /* use padding instead of margin so click area is not impacted */
}
.filepond--drop-label label {
    cursor: default;
    font-size: 0.875em;
    font-weight: normal;
    text-align: center;
    line-height: 1.5;
}
.filepond--label-action {
    text-decoration: underline;
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
    -webkit-text-decoration-color: #a7a4a4;
    text-decoration-color: #a7a4a4;
    cursor: pointer;
}
.filepond--root[data-disabled] .filepond--drop-label label {
    opacity: 0.5;
}
/* Hard to override styles */
.filepond--file-action-button.filepond--file-action-button {
    font-size: 1em;
    width: 1.625em;
    height: 1.625em;

    font-family: inherit;
    line-height: inherit;

    margin: 0;
    padding: 0;
    border: none;
    outline: none;

    will-change: transform, opacity;

    /* hidden label */
}
.filepond--file-action-button.filepond--file-action-button span {
    position: absolute;
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    white-space: nowrap;
}
.filepond--file-action-button.filepond--file-action-button {
    /* scale SVG to fill button */
}
.filepond--file-action-button.filepond--file-action-button svg {
    width: 100%;
    height: 100%;
}
.filepond--file-action-button.filepond--file-action-button {
    /* bigger touch area */
}
.filepond--file-action-button.filepond--file-action-button::after {
    position: absolute;
    left: -0.75em;
    right: -0.75em;
    top: -0.75em;
    bottom: -0.75em;
    content: '';
}
/* Soft styles */
.filepond--file-action-button {
    /* use default arrow cursor */
    cursor: auto;

    /* reset default button styles */
    color: #fff;

    /* set default look n feel */
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    background-image: none;

    /* we animate box shadow on focus */
    /* it's only slightly slower than animating */
    /* a pseudo-element with transforms and renders */
    /* a lot better on chrome */
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    transition: box-shadow 0.25s ease-in;
}
.filepond--file-action-button:hover,
.filepond--file-action-button:focus {
    box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.9);
}
.filepond--file-action-button[disabled] {
    color: rgba(255, 255, 255, 0.5);
    background-color: rgba(0, 0, 0, 0.25);
}
.filepond--file-action-button[hidden] {
    display: none;
}
/* edit button */
.filepond--action-edit-item.filepond--action-edit-item {
    width: 2em;
    height: 2em;
    padding: 0.1875em;
}
.filepond--action-edit-item.filepond--action-edit-item[data-align*='center'] {
    margin-left: -0.1875em;
}
.filepond--action-edit-item.filepond--action-edit-item[data-align*='bottom'] {
    margin-bottom: -0.1875em;
}
.filepond--action-edit-item-alt {
    border: none;
    line-height: inherit;
    background: transparent;
    font-family: inherit;
    color: inherit;
    outline: none;
    padding: 0;
    margin: 0 0 0 0.25em;
    pointer-events: all;
    position: absolute;
}
.filepond--action-edit-item-alt svg {
    width: 1.3125em;
    height: 1.3125em;
}
.filepond--action-edit-item-alt span {
    font-size: 0;
    opacity: 0;
}
.filepond--file-info {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    margin: 0 0.5em 0 0;
    min-width: 0;

    /* will be animated */
    will-change: transform, opacity;

    /* can't do anything with this info */
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* no margins on children */
}
.filepond--file-info * {
    margin: 0;
}
.filepond--file-info {
    /* we don't want to have these overrules so these selectors are a bit more specific */
}
.filepond--file-info .filepond--file-info-main {
    font-size: 0.75em;
    line-height: 1.2;

    /* we want ellipsis if this bar gets too wide */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}
.filepond--file-info .filepond--file-info-sub {
    font-size: 0.625em;
    opacity: 0.5;
    transition: opacity 0.25s ease-in-out;
    white-space: nowrap;
}
.filepond--file-info .filepond--file-info-sub:empty {
    display: none;
}
.filepond--file-status {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-grow: 0;
    flex-shrink: 0;

    margin: 0;
    min-width: 2.25em;
    text-align: right;

    /* will be animated */
    will-change: transform, opacity;

    /* can't do anything with this info */
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* no margins on children */
}
.filepond--file-status * {
    margin: 0;
    white-space: nowrap;
}
.filepond--file-status {
    /* font sizes */
}
.filepond--file-status .filepond--file-status-main {
    font-size: 0.75em;
    line-height: 1.2;
}
.filepond--file-status .filepond--file-status-sub {
    font-size: 0.625em;
    opacity: 0.5;
    transition: opacity 0.25s ease-in-out;
}
/* Hard to override styles */
.filepond--file-wrapper.filepond--file-wrapper {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    height: 100%;

    /* hide legend for visual users */
}
.filepond--file-wrapper.filepond--file-wrapper > legend {
    position: absolute;
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    white-space: nowrap;
}
.filepond--file {
    position: static;
    display: flex;
    height: 100%;
    align-items: flex-start;

    padding: 0.5625em 0.5625em;

    color: #fff;
    border-radius: 0.5em;

    /* control positions */
}
.filepond--file .filepond--file-status {
    margin-left: auto;
    margin-right: 2.25em;
}
.filepond--file .filepond--processing-complete-indicator {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 3;
}
.filepond--file .filepond--processing-complete-indicator,
.filepond--file .filepond--progress-indicator,
.filepond--file .filepond--file-action-button {
    position: absolute;
}
.filepond--file {
    /* .filepond--file-action-button */
}
.filepond--file [data-align*='left'] {
    left: 0.5625em;
}
.filepond--file [data-align*='right'] {
    right: 0.5625em;
}
.filepond--file [data-align*='center'] {
    left: calc(50% - 0.8125em); /* .8125 is half of button width */
}
.filepond--file [data-align*='bottom'] {
    bottom: 1.125em;
}
.filepond--file [data-align='center'] {
    top: calc(50% - 0.8125em);
}
.filepond--file .filepond--progress-indicator {
    margin-top: 0.1875em;
}
.filepond--file .filepond--progress-indicator[data-align*='right'] {
    margin-right: 0.1875em;
}
.filepond--file .filepond--progress-indicator[data-align*='left'] {
    margin-left: 0.1875em;
}
/* make sure text does not overlap */
[data-filepond-item-state='cancelled'] .filepond--file-info,
[data-filepond-item-state*='invalid'] .filepond--file-info,
[data-filepond-item-state*='error'] .filepond--file-info {
    margin-right: 2.25em;
}
[data-filepond-item-state~='processing'] .filepond--file-status-sub {
    opacity: 0;
}
[data-filepond-item-state~='processing']
    .filepond--action-abort-item-processing
    ~ .filepond--file-status
    .filepond--file-status-sub {
    opacity: 0.5;
}
[data-filepond-item-state='processing-error'] .filepond--file-status-sub {
    opacity: 0;
}
[data-filepond-item-state='processing-error']
    .filepond--action-retry-item-processing
    ~ .filepond--file-status
    .filepond--file-status-sub {
    opacity: 0.5;
}
[data-filepond-item-state='processing-complete'] {
    /* busy state */
}
[data-filepond-item-state='processing-complete'] .filepond--action-revert-item-processing svg {
    -webkit-animation: fall 0.5s 0.125s linear both;
    animation: fall 0.5s 0.125s linear both;
}
[data-filepond-item-state='processing-complete'] {
    /* hide details by default, only show when can revert */
}
[data-filepond-item-state='processing-complete'] .filepond--file-status-sub {
    opacity: 0.5;
}
[data-filepond-item-state='processing-complete']
    .filepond--processing-complete-indicator:not([style*='hidden'])
    ~ .filepond--file-status
    .filepond--file-status-sub {
    opacity: 0;
}
[data-filepond-item-state='processing-complete'] .filepond--file-info-sub {
    opacity: 0;
}
[data-filepond-item-state='processing-complete']
    .filepond--action-revert-item-processing
    ~ .filepond--file-info
    .filepond--file-info-sub {
    opacity: 0.5;
}
/* file state can be invalid or error, both are visually similar but */
/* having them as separate states might be useful */
[data-filepond-item-state*='invalid'] .filepond--panel,
[data-filepond-item-state*='invalid'] .filepond--file-wrapper,
[data-filepond-item-state*='error'] .filepond--panel,
[data-filepond-item-state*='error'] .filepond--file-wrapper {
    -webkit-animation: shake 0.65s linear both;
    animation: shake 0.65s linear both;
}
/* spins progress indicator when file is marked as busy */
[data-filepond-item-state*='busy'] .filepond--progress-indicator svg {
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}
/**
 * States
 */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}
@-webkit-keyframes shake {
    10%,
    90% {
        -webkit-transform: translateX(-0.0625em);
        transform: translateX(-0.0625em);
    }

    20%,
    80% {
        -webkit-transform: translateX(0.125em);
        transform: translateX(0.125em);
    }

    30%,
    50%,
    70% {
        -webkit-transform: translateX(-0.25em);
        transform: translateX(-0.25em);
    }

    40%,
    60% {
        -webkit-transform: translateX(0.25em);
        transform: translateX(0.25em);
    }
}
@keyframes shake {
    10%,
    90% {
        -webkit-transform: translateX(-0.0625em);
        transform: translateX(-0.0625em);
    }

    20%,
    80% {
        -webkit-transform: translateX(0.125em);
        transform: translateX(0.125em);
    }

    30%,
    50%,
    70% {
        -webkit-transform: translateX(-0.25em);
        transform: translateX(-0.25em);
    }

    40%,
    60% {
        -webkit-transform: translateX(0.25em);
        transform: translateX(0.25em);
    }
}
@-webkit-keyframes fall {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    70% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
@keyframes fall {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    70% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
/* ignore all other interaction elements while dragging a file */
.filepond--hopper[data-hopper-state='drag-over'] > * {
    pointer-events: none;
}
/* capture all hit tests using a hidden layer, this speeds up the event flow */
.filepond--hopper[data-hopper-state='drag-over']::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}
.filepond--progress-indicator {
    z-index: 103;
}
.filepond--file-action-button {
    z-index: 102;
}
.filepond--file-status {
    z-index: 101;
}
.filepond--file-info {
    z-index: 100;
}
.filepond--item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;

    padding: 0;
    margin: 0.25em;

    will-change: transform, opacity;

    /* item children order */
}
.filepond--item > .filepond--panel {
    z-index: -1;
}
/* has a slight shadow */
.filepond--item > .filepond--panel .filepond--panel-bottom {
    box-shadow: 0 0.0625em 0.125em -0.0625em rgba(0, 0, 0, 0.25);
}
.filepond--item {
    /* drag related */
}
.filepond--item > .filepond--file-wrapper,
.filepond--item > .filepond--panel {
    transition: opacity 0.15s ease-out;
}
.filepond--item[data-drag-state] {
    cursor: -webkit-grab;
    cursor: grab;
}
.filepond--item[data-drag-state] > .filepond--panel {
    transition: box-shadow 0.125s ease-in-out;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.filepond--item[data-drag-state='drag'] {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
.filepond--item[data-drag-state='drag'] > .filepond--panel {
    box-shadow: 0 0.125em 0.3125em rgba(0, 0, 0, 0.325);
}
.filepond--item[data-drag-state]:not([data-drag-state='idle']) {
    z-index: 2;
}
/* states */
.filepond--item-panel {
    background-color: #64605e;
}
[data-filepond-item-state='processing-complete'] .filepond--item-panel {
    background-color: #369763;
}
[data-filepond-item-state*='invalid'] .filepond--item-panel,
[data-filepond-item-state*='error'] .filepond--item-panel {
    background-color: #c44e47;
}
/* style of item panel */
.filepond--item-panel {
    border-radius: 0.5em;
    transition: background-color 0.25s;
}
/* normal mode */
.filepond--list-scroller {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    will-change: transform;
}
/* scroll mode */
.filepond--list-scroller[data-state='overflow'] .filepond--list {
    bottom: 0;
    right: 0;
}
.filepond--list-scroller[data-state='overflow'] {
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-mask: linear-gradient(to bottom, #000 calc(100% - 0.5em), transparent 100%);
    mask: linear-gradient(to bottom, #000 calc(100% - 0.5em), transparent 100%);
}
/* style scrollbar */
.filepond--list-scroller::-webkit-scrollbar {
    background: transparent;
}
.filepond--list-scroller::-webkit-scrollbar:vertical {
    width: 1em;
}
.filepond--list-scroller::-webkit-scrollbar:horizontal {
    height: 0;
}
.filepond--list-scroller::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 99999px;
    border: 0.3125em solid transparent;
    background-clip: content-box;
}
/* hard to overide styles on purpose */
.filepond--list.filepond--list {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;

    /* prevents endless paint calls on filepond--list-scroller */
    will-change: transform;
}
/* used for padding so allowed to be restyled */
.filepond--list {
    left: 0.75em;
    right: 0.75em;
}
.filepond--root[data-style-panel-layout~='integrated'] {
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
}
.filepond--root[data-style-panel-layout~='circle'] .filepond--panel-root,
.filepond--root[data-style-panel-layout~='integrated'] .filepond--panel-root {
    border-radius: 0;
}
.filepond--root[data-style-panel-layout~='circle'] .filepond--panel-root > *,
.filepond--root[data-style-panel-layout~='integrated'] .filepond--panel-root > * {
    display: none;
}
.filepond--root[data-style-panel-layout~='circle'] .filepond--drop-label,
.filepond--root[data-style-panel-layout~='integrated'] .filepond--drop-label {
    bottom: 0;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 7;
}
.filepond--root[data-style-panel-layout~='circle'],
.filepond--root[data-style-panel-layout~='integrated'] {
    /* we're only loading one item, this makes the intro animation a bit nicer */
}
.filepond--root[data-style-panel-layout~='circle'] .filepond--item-panel,
.filepond--root[data-style-panel-layout~='integrated'] .filepond--item-panel {
    display: none;
}
.filepond--root[data-style-panel-layout~='compact'] .filepond--list-scroller,
.filepond--root[data-style-panel-layout~='integrated'] .filepond--list-scroller {
    overflow: hidden;
    height: 100%;
    margin-top: 0;
    margin-bottom: 0;
}
.filepond--root[data-style-panel-layout~='compact'] .filepond--list,
.filepond--root[data-style-panel-layout~='integrated'] .filepond--list {
    left: 0;
    right: 0;
    height: 100%;
}
.filepond--root[data-style-panel-layout~='compact'] .filepond--item,
.filepond--root[data-style-panel-layout~='integrated'] .filepond--item {
    margin: 0;
}
.filepond--root[data-style-panel-layout~='compact'] .filepond--file-wrapper,
.filepond--root[data-style-panel-layout~='integrated'] .filepond--file-wrapper {
    height: 100%;
}
.filepond--root[data-style-panel-layout~='compact'] .filepond--drop-label,
.filepond--root[data-style-panel-layout~='integrated'] .filepond--drop-label {
    z-index: 7;
}
.filepond--root[data-style-panel-layout~='circle'] {
    border-radius: 99999rem;
    overflow: hidden;
}
.filepond--root[data-style-panel-layout~='circle'] > .filepond--panel {
    border-radius: inherit;
}
.filepond--root[data-style-panel-layout~='circle'] > .filepond--panel > * {
    display: none;
}
.filepond--root[data-style-panel-layout~='circle'] {
    /* circle cuts of this info, so best to hide it */
}
.filepond--root[data-style-panel-layout~='circle'] .filepond--file-info {
    display: none;
}
.filepond--root[data-style-panel-layout~='circle'] .filepond--file-status {
    display: none;
}
.filepond--root[data-style-panel-layout~='circle'] .filepond--action-edit-item {
    opacity: 1 !important;
    visibility: visible !important;
}
/* dirfty way to fix circular overflow issue on safari 11+ */
@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
        .filepond--root[data-style-panel-layout~='circle'] {
            will-change: transform;
        }
    }
}
.filepond--panel-root {
    border-radius: 0.5em;
    background-color: #f1f0ef;
}
.filepond--panel {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    margin: 0;

    /* defaults to 100% height (fixed height mode) this fixes problem with panel height in IE11 */
    height: 100% !important;

    /* no interaction possible with panel */
    pointer-events: none;
}
.filepond-panel:not([data-scalable='false']) {
    height: auto !important;
}
.filepond--panel[data-scalable='false'] > div {
    display: none;
}
.filepond--panel[data-scalable='true'] {
    /* this seems to fix Chrome performance issues */
    /* - when box-shadow is enabled */
    /* - when multiple ponds are active on the same page */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

    /* prevent borders and backgrounds */
    background-color: transparent !important;
    border: none !important;
}
.filepond--panel-top,
.filepond--panel-bottom,
.filepond--panel-center {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
}
.filepond--panel-top,
.filepond--panel-bottom {
    height: 0.5em;
}
.filepond--panel-top {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: none !important;

    /* fixes tiny transparant line between top and center panel */
}
.filepond--panel-top::after {
    content: '';
    position: absolute;
    height: 2px;
    left: 0;
    right: 0;
    bottom: -1px;
    background-color: inherit;
}
.filepond--panel-center,
.filepond--panel-bottom {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: translate3d(0, 0.5em, 0);
    transform: translate3d(0, 0.5em, 0);
}
.filepond--panel-bottom {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: none !important;

    /* fixes tiny transparant line between bottom and center of panel */
}
.filepond--panel-bottom::before {
    content: '';
    position: absolute;
    height: 2px;
    left: 0;
    right: 0;
    top: -1px;
    background-color: inherit;
}
.filepond--panel-center {
    /* the center panel is scaled using scale3d to fit the correct height */
    /* we use 100px instead of 1px as scaling 1px to a huge height is really laggy on chrome */
    height: 100px !important;
    border-top: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;

    /* hide if not transformed, prevents a little flash when the panel is at 100px height while attached for first time */
}
.filepond--panel-center:not([style]) {
    visibility: hidden;
}
.filepond--progress-indicator {
    position: static;
    width: 1.25em;
    height: 1.25em;

    color: #fff;

    /* can't have margins */
    margin: 0;

    /* no interaction possible with progress indicator */
    pointer-events: none;

    /* will be animated */
    will-change: transform, opacity;
}
.filepond--progress-indicator svg {
    width: 100%;
    height: 100%;
    vertical-align: top;
    transform-box: fill-box; /* should center the animation correctly when zoomed in */
}
.filepond--progress-indicator path {
    fill: none;
    stroke: currentColor;
}
.filepond--list-scroller {
    z-index: 6;
}
.filepond--drop-label {
    z-index: 5;
}
.filepond--drip {
    z-index: 3;
}
.filepond--root > .filepond--panel {
    z-index: 2;
}
.filepond--browser {
    z-index: 1;
}
.filepond--root {
    /* layout*/
    box-sizing: border-box;
    position: relative;
    margin-bottom: 1em;

    /* base font size for whole component */
    font-size: 1rem;

    /* base line height */
    line-height: normal;

    /* up uses default system font family */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

    /* will increase font weight a bit on Safari */
    font-weight: 450;

    /* default text alignment */
    text-align: left;

    /* better text rendering on Safari */
    text-rendering: optimizeLegibility;

    /* text direction is ltr for now */
    direction: ltr;

    /* optimize rendering */
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/contain */
    contain: layout style size;

    /* correct box sizing, line-height and positioning on child elements */
}
.filepond--root * {
    box-sizing: inherit;
    line-height: inherit;
}
.filepond--root *:not(text) {
    font-size: inherit;
}
.filepond--root {
    /* block everything */
}
.filepond--root[data-disabled] {
    pointer-events: none;
}
.filepond--root[data-disabled] .filepond--list-scroller {
    pointer-events: all;
}
.filepond--root[data-disabled] .filepond--list {
    pointer-events: none;
}
/**
 * Root element children layout
 */
.filepond--root .filepond--drop-label {
    min-height: 4.75em;
}
.filepond--root .filepond--list-scroller {
    margin-top: 1em;
    margin-bottom: 1em;
}
.filepond--root .filepond--credits {
    position: absolute;
    right: 0;
    opacity: 0.175;
    line-height: 0.85;
    font-size: 11px;
    color: inherit;
    text-decoration: none;
    z-index: 3;
    bottom: -14px;
}
.filepond--root .filepond--credits[style] {
    top: 0;
    bottom: auto;
    margin-top: 14px;
}