/* ════════════════════════════════════════════════════════════════════════
 * Alter Domus — Universal Login (default brand)
 * Grounded in the Alter Domus Brand Book (v2.0, Dec 2026):
 *   FONTS   Inter for body/UI text. Headings only: Manrope (sans heading,
 *           e.g. "Welcome") + DM Serif Display (serif heading, titles/accent).
 *   COLOR   Teal #206473 = brand authority / dominant lead.
 *           Clay #D95A32 = emphasis & signal, used sparingly (CTA, accents, mark).
 *           Bright White #FFFFFF = primary canvas; Neutral #FAF9F7 = gentle
 *           separation; Charcoal #2E3A3D = default text on light.
 *   MARK    The AD asterisk anchors the composition as a clay corner tile.
 *   Sharp corners (radius 0). AA contrast, visible focus, reduced-motion.
 * ════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  /* This is a light-themed login; opt out of any browser dark-mode reinterpretation
     so form controls and default surfaces stay on-brand in dark-mode browsers. */
  color-scheme: light;

  /* Core */
  --ad-teal: #206473;
  --ad-teal-dark: #185364;
  --ad-clay: #d95a32;              /* true brand clay — emphasis accents */
  --ad-clay-cta: #c24d27;          /* deeper clay → AA 4.8:1 with white text (if clay CTA wanted) */
  --ad-clay-cta-hover: #a23f1e;
  --ad-star: #e74314;              /* AD star tile / logo star vermillion (matches navbar) */

  /* Neutrals */
  --ad-charcoal: #2e3a3d;          /* default text on light backgrounds */
  --ad-muted: #5b6b6e;             /* secondary text (AA on white/neutral) */
  --ad-canvas: #faf9f7;            /* Neutral — page canvas / gentle separation */
  --ad-white: #ffffff;             /* Bright White — card surface */
  --ad-border: #dde3e4;            /* subtle hairline (no shadow) */

  /* Support family (available) */
  --ad-steel: #4c8b94;
  --ad-marine: #85aab2;
  --ad-mist: #ebf1f2;
  --ad-purple-ink: #5a4a5f;

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;          /* body / UI text */
  --font-heading: 'Manrope', system-ui, sans-serif;                    /* sans heading (e.g. "Welcome") */
  --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif; /* serif heading / accent */

  --card-pad: clamp(26px, 4.5vw, 40px);
  --focus-ring: 0 0 0 3px rgba(32, 100, 115, 0.28);

  --shadow-component-outer: none;
  --shadow-elevation-1: none;
  --shadow-elevation-2: none;
  --shadow-elevation-3: none;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--ad-canvas) !important;   /* win over any UA/dark-mode default */
  color: var(--ad-charcoal);
  font-family: var(--font-sans) !important;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ad-teal); text-decoration: none; }
a:hover { color: var(--ad-teal-dark); text-decoration: underline; text-underline-offset: 2px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ad-teal);
  outline-offset: 2px;
}

/* ── Shell: center the card ────────────────────────────────────────────── */
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.widget-panel {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 56px);
  background: transparent;
}

/* The card — Bright White on the Neutral canvas, hairline border, no shadow.
   Flex column with a comfortable min-height so short screens (org picker /
   selection) aren't top-heavy — the widget body grows into the spare space and
   vertically centres the prompt between the heading and the footer. */
.widget-container {
  width: 100%;
  max-width: 432px;
  min-width: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: clamp(420px, 58vh, 560px);
  text-align: center;
  background: var(--ad-white);
  border: 1px solid var(--ad-border);
  padding: var(--card-pad);
  overflow: hidden;
  animation: ad-rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ── Teal header (navbar pattern): flush-left orange tile w/ white AD star,
   then the white wordmark — mirrors the dev-portal / ADI portal navbar. ──── */
.brand-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;       /* wordmark centered across the bar */
  min-height: 64px;
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) clamp(18px, 2.4vw, 24px);
  background: var(--ad-teal);
  overflow: hidden;
}

/* The AD asterisk brand mark — white star in an orange tile, flush-left, full height */
.brand-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 64px;
  background: var(--ad-star) url('./white-ad-star.svg') center / 34px 32px no-repeat;
}

.brand-logo {
  width: 162px;
  height: 22px;
  background: url('./alterdomus-darkmode.svg') center / contain no-repeat;
}

/* ── Title (login): Manrope SemiBold charcoal + DM Serif italic teal accent ── */
.brand-title {
  margin: 0 0 6px;
  font-family: var(--font-heading);        /* Manrope (sans heading) */
  font-size: clamp(2rem, 5.4vw, 2.6rem);   /* brand headline scale, card-sized */
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ad-charcoal);
}
.brand-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ad-teal);
  letter-spacing: 0;
}

/* ── Native title (organization-selection, reset-password, MFA, …):
   brand Heading font (DM Serif Display, teal). Hidden only when our own
   .brand-title is rendered (login screens), so no screen loses its heading. ── */
.id-widget header h1 {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 4.6vw, 2.2rem);
  line-height: 1.16;
  font-weight: 400;
  color: var(--ad-teal) !important;
  text-align: center;
}
.brand-title ~ .id-widget header h1 { display: none !important; }

/* ── Auth0 widget plumbing (our card is the surface) ───────────────────── */
.id-widget,
.id-card,
.c-card,
.id-panel,
.auth0-lock,
.auth0-lock-widget { box-shadow: none !important; }

.id-widget { display: flex; justify-content: center; align-items: center; flex: 1 1 auto; width: 100%; min-width: 0; }
.id-widget :where(section)[class*="_prompt-box-outer"] { width: 100% !important; max-width: 100%; }
.id-widget > main { display: flex; justify-content: center; width: 100%; min-width: 0; }
.id-widget > main > section {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.id-widget > main > section header { text-align: center; }
.id-widget > main > section header p,
.id-widget > main > section header [class*="description"] {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;            /* brand body 16px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--ad-muted) !important;
}

/* ── Compact the in-widget vertical rhythm ──────────────────────────────────
   Auth0's default spacing is looser than our reference, and it reserves an
   empty ~60px logo box above the title. Our teal brand-head already carries the
   logo, so hide the widget's own logo and pull heading → description → form
   together to match the compact reference design. ──────────────────────────── */
.id-widget #custom-prompt-logo,
.id-widget #prompt-logo-center,
.id-widget [id*="prompt-logo"] { display: none !important; }

.id-widget > main > section header { margin: 0 !important; padding: 0 !important; }
.id-widget > main > section header p,
.id-widget > main > section header [class*="description"] { margin: 4px 0 0 !important; }

/* ── Form, inputs, labels ─────────────────────────────────────────────── */
.id-widget form[data-form-primary="true"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 16px;
  text-align: left;
}

.ulp-field { margin-bottom: 14px; max-width: 100%; }
.ulp-field label { pointer-events: none !important; font-family: var(--font-sans); }

/* Auth0 appends a required-field asterisk ("*") to input labels (Username,
   Password, …) as a visual required indicator. It was added for Auth0's WCAG
   effort and is NOT configurable from the dashboard, so it can only be removed
   here. Auth0 renders the marker as <span class="required" aria-hidden="true">*
   </span> inside the label; hide that span only. The input keeps its native
   required / aria-required attribute, so assistive tech still announces the
   field as required — we drop the redundant visual glyph, not the semantics.
   Scoped to labels so nothing outside a field label is affected. */
.id-widget label span.required { display: none !important; }

.id-widget form[data-form-primary="true"] input[type="text"],
.id-widget form[data-form-primary="true"] input[type="email"],
.id-widget form[data-form-primary="true"] input[type="password"],
.id-widget form[data-form-primary="true"] input[type="tel"],
.id-widget form[data-form-primary="true"] input:not([type]) {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 50px;
  padding: 14px;
  font-family: var(--font-sans);
  font-size: 16px;            /* brand body */
  color: var(--ad-charcoal);
  background: var(--ad-white);
  border: 1px solid #c7d2d3;
  border-radius: 0 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.id-widget form[data-form-primary="true"] input::placeholder { color: #9aa6a8; }
.id-widget form[data-form-primary="true"] input:hover { border-color: var(--ad-marine); }
.id-widget form[data-form-primary="true"] input:focus,
.id-widget form[data-form-primary="true"] input:focus-visible {
  border-color: var(--ad-teal);
  box-shadow: var(--focus-ring);
  outline: none;
}
/* Autofilled state — the browser's own suggestion dropdown can't be styled
   (it's rendered outside the page), but we can keep the FIELD on-brand: kill
   the yellow autofill fill, use charcoal text on white, keep the teal ring. */
.id-widget form[data-form-primary="true"] input:-webkit-autofill,
.id-widget form[data-form-primary="true"] input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--ad-charcoal);
  caret-color: var(--ad-charcoal);
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  box-shadow: 0 0 0 1000px #ffffff inset;
  border: 1px solid #c7d2d3;
  font-family: var(--font-sans);
}
.id-widget form[data-form-primary="true"] input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset, var(--focus-ring);
  box-shadow: 0 0 0 1000px #ffffff inset, var(--focus-ring);
  border-color: var(--ad-teal);
}

/* ── Primary button — Teal (brand lead colour), Inter SemiBold ────────── */
.id-widget form[data-form-primary="true"] button[type="submit"],
.id-widget button[type="submit"][value="default"],
.id-widget button[data-action-button-primary="true"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 50px;
  margin-top: 8px;
  padding: 13px 22px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
  background-color: var(--ad-teal);
  border: 1px solid var(--ad-teal);
  border-radius: 0 !important;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.06s ease;
}
.id-widget form[data-form-primary="true"] button[type="submit"]:hover,
.id-widget button[data-action-button-primary="true"]:hover {
  background-color: var(--ad-teal-dark);
  border-color: var(--ad-teal-dark);
}
.id-widget form[data-form-primary="true"] button[type="submit"]:active,
.id-widget button[data-action-button-primary="true"]:active { transform: translateY(1px); }
.id-widget form[data-form-primary="true"] button[type="submit"]:focus-visible,
.id-widget button[data-action-button-primary="true"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px rgba(32, 100, 115, 0.65);
}

/* Inline secondary links (forgot password, sign up — when Auth0 renders them) */
.ulp-alternate-action p { color: var(--ad-muted) !important; font-family: var(--font-sans); }
.ulp-alternate-action a { color: var(--ad-teal) !important; font-weight: 500; }

/* ── All MFA screens — "Try another method" as a button ──────────────────────
   Applies to every MFA screen: the *enrollment* screens (setting up a factor —
   OTP QR/code, SMS, voice, email, recovery code) and the *challenge* screens
   (enter your OTP / SMS / voice / email code / recovery code). Auth0 renders a
   native secondary action (a link back to the list of methods) inside
   .ulp-alternate-action; by default it reads as a faint inline link users
   overlook. Promote it into a full-width button so there's always an obvious way
   back to the other methods. Styled to match the mfa-login-options .option rows
   (hairline border, teal fill on hover).

   Scoped via the body `screen-mfa-…` class set in the page template, so the
   alternate-action links on non-MFA screens (sign up, back to sign in) keep the
   plain inline-link styling above. We only restyle Auth0's own native control —
   no injected navigation — so the MFA flow itself is untouched. Targets both
   <a> (challenge screens) and <button> (enrollment screens may render the
   secondary action as a native button). ── */
body[class*="screen-mfa-"] .ulp-alternate-action { margin-top: 18px; width: 100%; }
body[class*="screen-mfa-"] .ulp-alternate-action p { margin: 0; width: 100%; }
body[class*="screen-mfa-"] .ulp-alternate-action a,
body[class*="screen-mfa-"] .ulp-alternate-action button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid #c7d2d3;
  border-radius: 0;
  background: var(--ad-white);
  color: var(--ad-teal) !important;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
body[class*="screen-mfa-"] .ulp-alternate-action a:hover,
body[class*="screen-mfa-"] .ulp-alternate-action button:hover {
  background: var(--ad-teal);
  border-color: var(--ad-teal);
  color: #ffffff !important;
}
/* Keyboard focus: a solid, high-contrast native outline (never removed). Solid
   rather than a translucent ring so it stays visible for low-vision / colour-
   vision-deficient users, and it does not rely on the hover background swap.
   A native outline is also preserved in Windows High Contrast / forced-colors. */
body[class*="screen-mfa-"] .ulp-alternate-action a:focus-visible,
body[class*="screen-mfa-"] .ulp-alternate-action button:focus-visible {
  outline: 3px solid var(--ad-teal);
  outline-offset: 2px;
}

/* ── Footer (quiet area at the bottom of the card) — Inter, light weight ── */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  color: var(--ad-muted);
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--ad-border);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 11.5px;
  line-height: 1.5;
}
.footer p { margin: 0; }
.footer a { font-size: 11.5px !important; color: var(--ad-muted); text-decoration: underline; text-underline-offset: 2px; }
.footer a:hover { color: var(--ad-teal); }
.legal { text-align: center; padding-top: 0; font-size: 11.5px !important; }
.footer .company-logo { display: none !important; }

.star-overlay { display: none !important; }

/* ── MFA / option-list screens ────────────────────────────────────────── */
.options { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.option {
  width: 100%;
  border-radius: 0;
  border: 1px solid #c7d2d3;
  background: var(--ad-white);
  color: var(--ad-charcoal);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease,
              border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.option-left { display: flex; align-items: center; gap: 10px; text-align: left; }
.option:hover {
  border-color: var(--ad-teal);
  transform: translateY(-1px);
  background: var(--ad-teal);
  color: #ffffff;
}
.option .icon {
  width: 22px; min-width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0; line-height: 0;
}
.option .icon::before {
  content: ""; display: block; width: 22px; height: 22px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  opacity: 0.65; transition: opacity 0.15s ease, filter 0.15s ease;
}
.option-icon { transition: all 0.15s ease; filter: brightness(0) invert(0.5); }
.option:hover .option-icon { filter: brightness(0) invert(0.9); }
button[type="submit"][value="resend-email-action"]:hover,
button[type="submit"][value="resend-email-action"]:focus { color: #ffffff !important; }

.verification-block { background: var(--ad-white); text-align: center; padding: 0; border-radius: 0; width: 100%; }
.verification-block h1 { font-family: var(--font-serif); font-size: clamp(1.7rem, 4.6vw, 2.2rem) !important; line-height: 1.16 !important; font-weight: 400 !important; color: var(--ad-teal); }
.verification-block p { font-family: var(--font-sans); font-size: 1rem; margin: 6px 0; color: var(--ad-muted); }

/* Check-your-email page only: this static page reuses the login card, but its
   content (a short message + links) is far shorter than the login widget the
   card min-height (clamp 420–560px) was tuned for. The widget area (.id-widget,
   flex:1 1 auto) grew into the spare space and centred the tiny message, leaving
   a large empty white band before the footer. Scope to .verification-block —
   present on THIS page only, so the login screens are untouched — and let the
   card size to its content instead. */
.widget-container:has(.verification-block) { min-height: auto; }
.id-widget:has(.verification-block) { flex: 0 0 auto; padding: clamp(12px, 3vh, 28px) 0; }

/* ── Motion ───────────────────────────────────────────────────────────── */
@keyframes ad-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .widget-container { animation: none !important; }
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .widget-panel { padding: 20px 14px 36px; }
  .widget-container { max-width: none; --card-pad: 24px; }
}

.id-widget div:has(> .ulp-authenticator-selector-text) {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 50px;
  padding: 14px;
  border: 1px solid #c7d2d3;
  background: var(--ad-white);
  border-radius: 0 !important;
  overflow: hidden;
}
.id-widget .ulp-authenticator-selector-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.id-widget [data-link-name="edit-username"] {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

.id-widget form[data-form-primary="true"] p,
.id-widget form[data-form-primary="true"] span {
  word-break: normal;
  overflow-wrap: normal;
}

.id-widget .ulp-field.password { position: relative; }
.id-widget .ulp-field.password #password-label {
  position: absolute !important;
  top: 0 !important;
  left: 10px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 6px !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  background: var(--ad-white) !important;
  color: var(--ad-muted) !important;
  transition: color 0.15s ease !important;
  display: inline-block !important;
}
.id-widget .ulp-field.password:focus-within #password-label {
  color: var(--ad-teal) !important;
}
.id-widget .ulp-field.password input[type="password"] {
  border: 1px solid #c7d2d3 !important;
}
.id-widget .ulp-field.password input[type="password"]:focus {
  border-color: var(--ad-teal) !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
 * Osano cookie consent (CMP) — themed to the Alter Domus system.
 * Inter, sharp corners, brand colors. EU/EDPB: Accept and Reject get
 * identical prominence (no nudging). WCAG: AA contrast + visible focus.
 * (Layout, default-off toggles and reject availability are Osano-dashboard
 * settings — CSS can only theme.)
 * ════════════════════════════════════════════════════════════════════════ */
.osano-cm-window,
.osano-cm-dialog,
.osano-cm-dialog * { font-family: var(--font-sans) !important; }

.osano-cm-dialog {
  position: fixed !important;          /* pin to the BOTTOM of the page */
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--ad-white) !important;
  color: var(--ad-charcoal) !important;
  border: 0 !important;
  border-top: 3px solid var(--ad-teal) !important;   /* teal accent edge faces the page */
  border-radius: 0 !important;
  box-shadow: none !important;
}
.osano-cm-message { color: var(--ad-charcoal) !important; font-size: 13px !important; line-height: 1.5 !important; }
.osano-cm-link,
.osano-cm-dialog a { color: var(--ad-teal) !important; font-weight: 600 !important; }
.osano-cm-link:hover,
.osano-cm-dialog a:hover { color: var(--ad-teal-dark) !important; }
.osano-cm-label,
.osano-cm-toggle__label { color: var(--ad-charcoal) !important; font-size: 13px !important; line-height: 20px !important; }

/* Keep the action row and toggle row on a single, vertically-centred line so
   nothing floats out of alignment (height comes from Osano's layout; this only
   tidies the cross-axis alignment + spacing). */
.osano-cm-buttons { display: flex !important; align-items: center !important; gap: 10px !important; }
.osano-cm-toggles { align-items: center !important; }

.osano-cm-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;        /* all three buttons exactly the same height */
  line-height: 1 !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
/* Accept All — teal. Reject — clay/orange. Both solid + same size, so Reject
   stays as prominent as Accept (EDPB: reject must not be disadvantaged). */
.osano-cm-accept,
.osano-cm-accept-all {
  background: var(--ad-teal) !important;
  border: 1px solid var(--ad-teal) !important;
  color: #ffffff !important;
}
.osano-cm-accept:hover,
.osano-cm-accept-all:hover {
  background: var(--ad-teal-dark) !important;
  border-color: var(--ad-teal-dark) !important;
}
.osano-cm-deny,
.osano-cm-denyAll {
  background: var(--ad-clay-cta) !important;
  border: 1px solid var(--ad-clay-cta) !important;
  color: #ffffff !important;
}
.osano-cm-deny:hover,
.osano-cm-denyAll:hover {
  background: var(--ad-clay-cta-hover) !important;
  border-color: var(--ad-clay-cta-hover) !important;
}
.osano-cm-save,
.osano-cm-manage {
  background: var(--ad-white) !important;
  border: 1px solid var(--ad-teal) !important;
  color: var(--ad-teal) !important;
}
.osano-cm-save:hover,
.osano-cm-manage:hover { background: var(--ad-mist) !important; }

.osano-cm-dialog__close,
.osano-cm-close { color: var(--ad-muted) !important; }
.osano-cm-dialog__close:hover,
.osano-cm-close:hover { color: var(--ad-charcoal) !important; }

.osano-cm-toggle__input:checked + .osano-cm-toggle__switch,
.osano-cm-toggle input[type="checkbox"]:checked + .osano-cm-toggle__switch,
.osano-cm-toggle input[type="checkbox"]:checked ~ .osano-cm-toggle__switch {
  background-color: var(--ad-teal) !important;
  border-color: var(--ad-teal) !important;
}
.osano-cm-button:focus-visible,
.osano-cm-link:focus-visible,
.osano-cm-dialog__close:focus-visible,
.osano-cm-close:focus-visible,
.osano-cm-toggle__input:focus-visible + .osano-cm-toggle__switch {
  outline: 3px solid var(--ad-teal) !important;
  outline-offset: 2px !important;
}