/* The cookie consent banners, their preferences and the blocked-iframe
   placeholder (Finsweet Consent Pro), in the homepage's dress: the opt-in
   banner and preferences as homepage/consent.css draws them, and the
   opt-out ones and the placeholder to match. Loaded from the site's head
   code. Consent Pro copies the banners from the homepage onto every page,
   inside a shadow root it fills with the homepage's stylesheets, this one
   among them; that root sits in the body, so everything here sets its own
   type and colour rather than take the old site's, and Webflow's form and
   button defaults are undone where they reach.

   Consent Pro shows and hides the banners and preferences with a style of
   its own (display, keyed on fs-consent-active), and opens and closes the
   accordions and switches with is-active, so nothing here sets a card's
   display, and the open states hang off is-active. Both instances share
   every class: the opt-out markup differs in order, which the order rules
   in the action rows even out. */

/* ---- the cards ---- */

.nw-consent-banner,
.nw-consent-prefs {
  position: fixed;
  right: 24px;
  bottom: 24px;
  left: auto;
  top: auto;
  z-index: 9999;
  width: min(400px, calc(100vw - 48px));
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(21, 24, 28, 0.06), 0 12px 32px rgba(12, 12, 60, 0.24);
  color: #4a4f57;
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}

.nw-consent-banner { padding: 20px; }

/* ---- the banners ---- */

.nw-consent-banner-inner,
.nw-consent-banner-body {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* the opt-out banner's heading and its close (which, there, accepts) */
.nw-consent-banner-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin: -4px -8px 8px 0;
  padding: 0;
  border: 0;
}

.nw-consent-banner-title {
  color: #15181c;
  font-family: "GT Flexa", Inter, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.02em;
}

.nw-consent-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: #15181c;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.nw-consent-x:hover { background: rgba(21, 24, 28, 0.06); }
.nw-consent-x svg { width: 16px; height: 16px; }

.nw-consent-text { margin: 0; color: #4a4f57; font-size: 14px; line-height: 20px; }
.nw-consent-text strong { color: #15181c; font-weight: 600; }
.nw-consent-text a {
  color: #3b3bef;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* the Global Privacy Control notice, where Consent Pro shows it */
.nw-consent-gpc {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #59637e;
  font-size: 13px;
  line-height: 20px;
}

.nw-consent-gpc-icon { flex: none; width: 16px; height: 16px; color: #12a37f; line-height: 0; }
.nw-consent-gpc-icon svg { width: 100%; height: 100%; }
.nw-consent-gpc-text { margin: 0; color: inherit; font: inherit; }

/* Accept, then Reject, the same size side by side, so declining is as easy
   as agreeing; Preferences a quieter link at the far end. The opt-out
   banner's markup has them in another order and Reject outside the pair,
   so the pair lays out as if it weren't there and order sets the row. */
.nw-consent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 0;
}

.nw-consent-actions .nw-consent-pair { display: contents; }
.nw-consent-actions [fs-consent-element="allow"] { order: -1; }

.nw-consent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid rgba(21, 24, 28, 0.2);
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
  color: #15181c;
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nw-consent-btn:hover { background: rgba(21, 24, 28, 0.06); }

.nw-consent-btn.is-solid {
  border-color: #3b3bef;
  background: #3b3bef;
  color: #fff;
}

.nw-consent-btn.is-solid:hover { border-color: #5a5af2; background: #5a5af2; }

/* the opt-out buttons carry an icon slot; these buttons are text only */
.nw-consent-btn-icon { display: none; }
.nw-consent-btn-label { color: inherit; font: inherit; }

.nw-consent-link {
  order: 1;
  margin-left: auto;
  padding: 6px 0;
  border: 0;
  background: none;
  color: #3b3bef;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.nw-consent-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.nw-consent-btn:focus-visible,
.nw-consent-link:focus-visible,
.nw-consent-close:focus-visible,
.nw-consent-x:focus-visible,
.nw-consent-text a:focus-visible,
.nw-consent-provider-link:focus-visible {
  outline: 2px solid #3b3bef;
  outline-offset: 2px;
}

/* ---- the preferences ---- */

/* what's under the form takes clicks to close; the form sits over it */
.nw-consent-overlay { position: absolute; inset: 0; z-index: 1; background: transparent; }

.nw-consent-prefs-inner,
.nw-consent-form-block,
.nw-consent-form {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.nw-consent-prefs-inner,
.nw-consent-form-block { z-index: 2; }

/* scrolls inside itself when the window is short */
.nw-consent-popup {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: visible;
  color: #4a4f57;
}

.nw-consent-head {
  position: static;
  display: block;
  padding: 20px 56px 4px 20px;
  border: 0;
  background: none;
}

.nw-consent-title {
  margin: 0;
  color: #15181c;
  font-family: "GT Flexa", Inter, system-ui, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.03em;
}

.nw-consent-title strong { font-weight: inherit; }

.nw-consent-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #15181c;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.nw-consent-close:hover { background: rgba(21, 24, 28, 0.06); }
.nw-consent-close-icon { width: 16px; height: 16px; line-height: 0; }
.nw-consent-close-icon svg { width: 100%; height: 100%; }

/* one row a category, a rule between, as the install rows on the close */
.nw-consent-list {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: 8px;
  padding: 0 20px;
}

.nw-consent-option {
  display: block;
  padding: 14px 0;
  border: 0;
}

.nw-consent-option + .nw-consent-option { border-top: 1px solid #e6e9f0; }

/* the opt-out list ends on a row holding only the GPC notice, which Consent
   Pro hides unless the signal was sent: the row takes no room of its own,
   and the notice, when shown, sits under the list */
.nw-consent-option:has(> .nw-consent-gpc) { padding: 0; border-top: 0; }
.nw-consent-option > .nw-consent-gpc { margin: 0 0 14px; }

/* the category's name, and its switch (or the essentials' lock) at the far
   end. Opt-in: Webflow's checkbox puts the input before its label, hence
   row-reverse. Opt-out: the name opens the category's details, so it sits
   in a row of its own beside the switch. */
.nw-consent-check {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.nw-consent-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* Webflow's clearfix boxes on its checkbox wrapper would be flex items too */
.nw-consent-check::before,
.nw-consent-check::after,
.nw-consent-toggle::before,
.nw-consent-toggle::after { content: none; }

.nw-consent-check-name {
  margin: 0;
  color: #15181c;
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.nw-consent-desc { margin: 2px 0 0; color: #4a4f57; font-size: 14px; line-height: 20px; }

/* the checkbox drawn as a switch: grey off, blue on */
.nw-consent-toggle {
  position: relative;
  display: flex;
  flex: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.nw-consent-switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  float: none;
  flex: none;
  width: 36px;
  height: 20px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: #cfd4de;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.nw-consent-switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(12, 12, 60, 0.24);
  transition: transform 0.15s ease;
}

.nw-consent-switch:checked { background: #3b3bef; }
.nw-consent-switch:checked::before { transform: translateX(16px); }
.nw-consent-switch:focus-visible { outline: 2px solid #3b3bef; outline-offset: 2px; }

/* the switch draws itself: the old drawn knob and the repeated name go */
.nw-consent-knob { display: none; }
.nw-consent-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* the essentials can't be turned off: the lock where the switch would be,
   centred on the switches above and below it (an icon of the shared
   library in the opt-in, an inline one in the opt-out) */
.nw-consent-check .qaw-claws--claws_icon {
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  margin-right: 8px;
  opacity: 0.6;
}

.nw-consent-lock {
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  color: #59637e;
  line-height: 0;
}

.nw-consent-lock svg { width: 100%; height: 100%; }

/* ---- the opt-out preferences' details: each category opens on its
   providers, each provider on its trackers ---- */

.nw-consent-acc {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-left: -4px;
  cursor: pointer;
}

.nw-consent-acc-icon,
.nw-consent-caret {
  flex: none;
  width: 18px;
  height: 18px;
  color: #59637e;
  line-height: 0;
  transition: transform 0.15s ease;
}

.nw-consent-acc-icon svg,
.nw-consent-caret svg { width: 100%; height: 100%; }
.nw-consent-acc-icon.is-active { transform: rotate(90deg); }
.nw-consent-caret.is-active { transform: rotate(180deg); }

.nw-consent-acc-content,
.nw-consent-provider-content { display: none; }
.nw-consent-acc-content.is-active,
.nw-consent-provider-content.is-active { display: block; }

.nw-consent-acc-content {
  margin-top: 12px;
  border: 1px solid #e3e7f0;
  border-radius: 8px;
  overflow: hidden;
}

.nw-consent-provider + .nw-consent-provider { border-top: 1px solid #e6e9f0; }

.nw-consent-provider-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.nw-consent-provider-acc {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  cursor: pointer;
}

.nw-consent-provider-name { color: #15181c; font-size: 14px; font-weight: 500; line-height: 20px; }

.nw-consent-provider-link {
  flex: none;
  color: #3b3bef;
  font-size: 13px;
  line-height: 20px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.nw-consent-provider-content { padding: 0 12px 12px; }
.nw-consent-tracker + .nw-consent-tracker { margin-top: 8px; }

.nw-consent-detail {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #f5f6fa;
}

.nw-consent-detail-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
}

.nw-consent-detail-label {
  color: #59637e;
  font-family: "GT Flexa Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nw-consent-detail-label strong { font-weight: inherit; }
.nw-consent-detail-value { margin: 0; color: #15181c; font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }

.nw-consent-empty { padding: 10px 12px; }
.nw-consent-empty-text { margin: 0; color: #59637e; font-size: 13px; line-height: 20px; }

/* Accept All and Reject All share a row, in that order whichever the
   markup has; Save Preferences, the main act here, takes the full width
   under them */
.nw-consent-prefs-actions {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  width: auto;
  padding: 16px 20px 20px;
  border: 0;
  border-top: 1px solid #e6e9f0;
  background: none;
}

.nw-consent-prefs-actions .nw-consent-pair { display: contents; }
.nw-consent-prefs-actions [fs-consent-element="allow"] { order: -1; }
.nw-consent-prefs-actions .nw-consent-btn { width: 100%; }
.nw-consent-prefs-actions .nw-consent-btn.is-solid { grid-column: 1 / -1; order: 1; }

/* ---- the placeholder over an iframe Consent Pro is holding back: the
   homepage's stage ground, with the same buttons ---- */

.nw-consent-placeholder {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
}

.nw-consent-placeholder-card {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e3e7f0;
  border-radius: 10px;
  background: #f1f2fe;
  color: #4a4f57;
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  pointer-events: auto;
}

.nw-consent-placeholder-text { max-width: 320px; }

.nw-consent-placeholder-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

@media (max-width: 600px) {
  .nw-consent-banner,
  .nw-consent-prefs { right: 16px; bottom: 16px; width: calc(100vw - 32px); }
  .nw-consent-popup { max-height: calc(100dvh - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .nw-consent-btn,
  .nw-consent-close,
  .nw-consent-x,
  .nw-consent-switch,
  .nw-consent-switch::before,
  .nw-consent-acc-icon,
  .nw-consent-caret { transition: none; }
}
