/* ============================================================
   VERILY TEAM-LEVEL WIDGET CUSTOMIZATIONS
   Applies to all widgets across all knowledge bases
   ============================================================ */

<script>
// ============================================================
// KEYBOARD ACCESSIBILITY FOR WIDGETS
// ============================================================
(function() {
  function enableKeyboardFocus() {
    let keyboardUsed = false;

    document.addEventListener('keydown', function(e) {
      if (e.key === 'Tab') {
        if (!keyboardUsed) {
          document.body.classList.add('keyboard-nav');
          keyboardUsed = true;
        }
      }
    });

    document.addEventListener('mousedown', function() {
      if (keyboardUsed) {
        document.body.classList.remove('keyboard-nav');
        keyboardUsed = false;
      }
    });
  }

  // Initialize keyboard focus detection
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', enableKeyboardFocus);
  } else {
    enableKeyboardFocus();
  }
})();

// ============================================================
// ENABLE FULLSCREEN FOR EMBEDDED IFRAMES
// ============================================================
(function() {
  function enableIframeFullscreen() {
    // Target all iframes with multiple selectors
    const selectors = [
      'iframe',
      '[class*="IframeEmbed__Iframe"]',
      'iframe[title="Embedded iframe"]',
      'iframe[data-cy="iframeElement"]',
      '[class*="ston-step-iframe"] iframe'
    ];

    selectors.forEach(selector => {
      const iframes = document.querySelectorAll(selector);
      iframes.forEach(iframe => {
        if (!iframe.hasAttribute('data-fullscreen-enabled')) {
          iframe.setAttribute('allowfullscreen', 'true');
          iframe.setAttribute('webkitallowfullscreen', 'true');
          iframe.setAttribute('mozallowfullscreen', 'true');
          iframe.setAttribute('allow', 'fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
          iframe.setAttribute('data-fullscreen-enabled', 'true');
          console.log('[Verily] Fullscreen enabled for iframe:', iframe);
        }
      });
    });
  }

  // Run immediately
  enableIframeFullscreen();

  // Run on DOMContentLoaded
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', enableIframeFullscreen);
  }

  // Run after a delay to catch late-loading iframes
  setTimeout(enableIframeFullscreen, 1000);
  setTimeout(enableIframeFullscreen, 3000);

  // Watch for dynamically added iframes
  const observer = new MutationObserver(() => enableIframeFullscreen());
  if (document.body) {
    observer.observe(document.body, { childList: true, subtree: true });
  } else {
    document.addEventListener('DOMContentLoaded', () => {
      observer.observe(document.body, { childList: true, subtree: true });
    });
  }
})();
</script>

<style>
/* ============================================================
   1. FONT IMPORTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ============================================================
   2. WIDGET FONT SETTINGS
   ============================================================ */
[class*="Widget"] *,
[class*="Widget-styles__"] *,
.stonly-widget-kg0h8 *,
[class*="stonly-widget-"] * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

[class*="Widget"] h1,
[class*="Widget"] h2,
[class*="Widget"] h3,
[class*="Widget"] h4,
[class*="Widget"] h5,
[class*="Widget"] h6,
[class*="Widget"] [class*="Heading"] {
  font-family: 'Poppins', sans-serif !important;
}

/* ============================================================
   3. SCREEN READER ACCESSIBILITY
   ============================================================ */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

/* ============================================================
   4. KEYBOARD NAVIGATION FOCUS STYLES
   ============================================================ */

/* Remove default focus outline for mouse users */
a.ston-folder:focus:not(:focus-visible),
a.ston-kb-guide-block:focus:not(:focus-visible),
a[class*="common-styles__Block"]:focus:not(:focus-visible),
div:focus:not(:focus-visible),
section:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Tile links - Keyboard navigation focus indicator */
a.ston-folder:focus-visible,
a.ston-kb-guide-block:focus-visible,
a[class*="common-styles__Block"]:focus-visible {
  outline: 3px solid #8889DB !important;
  outline-offset: 2px !important;
  border-color: #8889DB !important;
  box-shadow: 0 0 0 4px rgba(136, 137, 219, 0.2) !important;
  transform: translateY(-2px) !important;
  background-color: #ffffff !important;
}

/* Widget launcher button focus - only when using keyboard */
.stonly-widget-kg0h8:focus-visible,
.stonly-widget-kg0h8 button:focus-visible,
div.stonly-widget-kg0h8:focus-visible,
[class*="stonly-widget-"]:focus-visible {
  outline: 3px solid #8889DB !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(136, 137, 219, 0.4) !important;
}

/* Search bar container focus - only when keyboard navigation is active */
body.keyboard-nav [class*="SearchBar-styles__Canvas"]:focus-within {
  outline: 3px solid #8889DB !important;
  outline-offset: 3px !important;
  border-radius: 50px !important;
}

/* Button focus styles */
button:focus-visible,
[class*="Button"]:focus-visible {
  outline: 3px solid #8889DB !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(136, 137, 219, 0.2) !important;
}

/* ============================================================
   5. REPORT AN ISSUE BUTTON VISIBILITY
   ============================================================ */
button[data-cy="feedbackButton"],
button[aria-label*="Report"],
button[aria-label*="issue"],
[class*="OutlineButton"][data-cy="feedbackButton"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

button[data-cy="feedbackButton"] svg,
button[aria-label*="Report"] svg,
button[aria-label*="issue"] svg,
[class*="OutlineButton"] svg,
[class*="ButtonElement"] svg {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 auto !important;
}

/* Report an issue button - keep default Stonly styling (white background) */
button[data-cy="feedbackButton"],
button[aria-label*="Report"],
button[aria-label*="issue"] {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid #E2E4E6 !important;
}

button[data-cy="feedbackButton"]:hover,
button[aria-label*="Report"]:hover,
button[aria-label*="issue"]:hover {
  background: #F8F9FA !important;
  background-color: #F8F9FA !important;
  background-image: none !important;
}

/* ============================================================
   6. HIDE WIDGET HEADER TEXT ONLY (not content headings)
   ============================================================ */
/* Hide only the title/subtitle in the widget header area - not content headings */
[class*="Widget-styles__WidgetHeader"] > h1,
[class*="Widget-styles__WidgetHeader"] > h2,
[class*="Widget-styles__WidgetHeader"] > [class*="Title"],
[class*="WidgetHeader"] > h1,
[class*="WidgetHeader"] > h2,
[class*="WidgetHeader"] > [class*="Title"],
[class*="Widget-styles__HeaderTitle"],
[class*="PageSubtitle__Subtitle"]:not([class*="Content"] *):not([class*="Canvas"] *) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   7. POPUP WIDGET MODAL - DEFAULT SIZE (420px width, auto height)
   ============================================================ */
/* Main widget interface wrapper - ONLY for popup modal widget, not light widget */
[class*="Widget-styles__PlayersInterfaceWrapper"],
[class*="PlayersInterfaceWrapper"] {
  width: 420px !important;
  min-width: 420px !important;
  max-width: 420px !important;
  max-height: 90vh !important;
}

/* Widget canvas containers - ONLY for popup modal widget */
[class*="Widget-styles__PlayersInterfaceWrapper"] [class*="Steps-styles__Canvas"],
[class*="Widget-styles__PlayersInterfaceWrapper"] [class*="Content__Canvas"],
[class*="Widget-styles__PlayersInterfaceWrapper"] [class*="Content__CanvasWrap"],
[class*="PlayersInterfaceWrapper"] [class*="Steps-styles__Canvas"],
[class*="PlayersInterfaceWrapper"] [class*="Content__Canvas"],
[class*="PlayersInterfaceWrapper"] [class*="Content__CanvasWrap"] {
  width: 100% !important;
  max-width: 420px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ============================================================
   8. WIDGET SEARCH BAR - GRADIENT BORDER (Full widget only, not light widget)
   ============================================================ */
/* Only apply to full popup widget, not light sidebar widget */
[class*="Widget-styles__WidgetScene"] [class*="SearchBar-styles__Canvas"][mode="widget"],
[class*="kbWidget"] [class*="SearchBar-styles__Canvas"][mode="widget"] {
  background: linear-gradient(90deg, #D85BEF, #D27A56, #AD79E9, #8889DB) !important;
  padding: 2px !important;
  border-radius: 30px !important;
}

/* Inner wrapper - white fill inside gradient ring */
[class*="Widget-styles__WidgetScene"] [class*="SearchBar-styles__Canvas"][mode="widget"] [class*="Input__FieldWrapper"],
[class*="Widget-styles__WidgetScene"] [class*="SearchBar-styles__Canvas"][mode="widget"] input {
  background-color: #ffffff !important;
  border-radius: 50px !important;
  border: none !important;
}

/* ============================================================
   9. WIDGET HEADER & TILES (Full widget only, not light widget)
   ============================================================ */

/* Widget header background - only for full popup widget */
[class*="Widget-styles__WidgetScene"] [class*="Widget__WidgetHeader"],
[class*="Widget-styles__WidgetScene"] [class*="Widget-styles__WidgetHeader"],
[class*="kbWidget"] [class*="Widget__WidgetHeader"],
[class*="kbWidget"] [class*="Widget-styles__WidgetHeader"] {
  background-color: #ffffff !important;
}

/* Widget tiles - only in full popup widget, not light widget */
[class*="Widget-styles__WidgetScene"] [class*="Widget-styles__RowWrap"] a.ston-folder,
[class*="Widget-styles__WidgetScene"] [class*="Widget-styles__RowWrap"] a.ston-kb-guide-block,
[class*="Widget-styles__WidgetScene"] [class*="Widget-styles__ContentCanvas"] a.ston-folder,
[class*="Widget-styles__WidgetScene"] [class*="Widget-styles__ContentCanvas"] a.ston-kb-guide-block,
[class*="kbWidget"] a.ston-folder,
[class*="kbWidget"] a.ston-kb-guide-block {
  background: #ffffff !important;
  border: 1px solid #E2E4E6 !important;
  border-radius: 12px !important;
  text-decoration: none !important;
}

/* Widget tile text styling - only in full popup widget */
[class*="Widget-styles__WidgetScene"] a.ston-folder [class*="Text"],
[class*="Widget-styles__WidgetScene"] a.ston-kb-guide-block [class*="Text"],
[class*="kbWidget"] a.ston-folder [class*="Text"],
[class*="kbWidget"] a.ston-kb-guide-block [class*="Text"] {
  font-family: 'Inter', sans-serif !important;
  color: #26282e !important;
}

/* ============================================================
   10. BACK BUTTON - Center Arrow
   ============================================================ */
/* Center the arrow icon within the back button */
button[data-cy="backButton"],
button[aria-label="Go back"],
button[aria-label*="Back"],
button[aria-label*="back"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 20px !important;
  min-width: 60px !important;
  min-height: 44px !important;
}

/* Center the IconWrap container */
button[data-cy="backButton"] [class*="IconWrap"],
button[aria-label="Go back"] [class*="IconWrap"],
button[aria-label*="Back"] [class*="IconWrap"],
button[aria-label*="back"] [class*="IconWrap"],
[class*="BackButton"] [class*="IconWrap"] {
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

button[data-cy="backButton"] svg,
button[aria-label="Go back"] svg,
button[aria-label*="Back"] svg,
button[aria-label*="back"] svg {
  margin: 0 auto !important;
  display: block !important;
}

/* ============================================================
   12. EMBEDDED CONTENT LINKS - Verily Green Branding
   ============================================================ */
/* Style embedded links within guide content with Verily green */
/* Exclude next step tiles, block elements, and breadcrumbs */
[class*="ContentCanvas"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]),
[class*="ContentText"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]),
[class*="Step__ContentCanvas"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]),
[class*="content-text"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]),
[class*="ston-content"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]),
[class*="ContentWrap"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]),
[class*="RichText"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]),
.content-text a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]),
p a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]),
div a:not([class*="Block"]):not([class*="NextStep"]):not([class*="ListBody"]):not([class*="Breadcrumb"]) {
  color: #087a6a !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
  transition: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

[class*="ContentCanvas"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):hover,
[class*="ContentText"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):hover,
[class*="Step__ContentCanvas"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):hover,
[class*="content-text"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):hover,
[class*="ston-content"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):hover,
[class*="ContentWrap"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):hover,
[class*="RichText"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):hover,
.content-text a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):hover,
p a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):hover,
div a:not([class*="Block"]):not([class*="NextStep"]):not([class*="ListBody"]):not([class*="Breadcrumb"]):hover {
  color: #065a4f !important;
  text-decoration: underline !important;
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
}

[class*="ContentCanvas"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):visited,
[class*="ContentText"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):visited,
[class*="Step__ContentCanvas"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):visited,
[class*="content-text"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):visited,
[class*="ston-content"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):visited,
[class*="ContentWrap"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):visited,
[class*="RichText"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):visited,
.content-text a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):visited,
p a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):visited,
div a:not([class*="Block"]):not([class*="NextStep"]):not([class*="ListBody"]):not([class*="Breadcrumb"]):visited {
  color: #065a4f !important;
  background-color: transparent !important;
}

[class*="ContentCanvas"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):focus-visible,
[class*="ContentText"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):focus-visible,
[class*="Step__ContentCanvas"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):focus-visible,
[class*="content-text"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):focus-visible,
[class*="ston-content"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):focus-visible,
[class*="ContentWrap"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):focus-visible,
[class*="RichText"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):focus-visible,
.content-text a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):focus-visible,
p a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):focus-visible,
div a:not([class*="Block"]):not([class*="NextStep"]):not([class*="ListBody"]):not([class*="Breadcrumb"]):focus-visible {
  outline: 3px solid #087a6a !important;
  outline-offset: 2px !important;
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
  border-radius: 2px !important;
}

/* Override Stonly's default link styling with maximum specificity */
/* Exclude next step tiles and breadcrumbs */
[class*="Widget"] [class*="ContentCanvas"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]),
[class*="Widget"] [class*="ContentText"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]),
[class*="Widget"] [class*="Step__ContentCanvas"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]),
[class*="kbWidget"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):not(.ston-folder):not(.ston-kb-guide-block),
.stn-widget-content a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]) {
  color: #087a6a !important;
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
}

[class*="Widget"] [class*="ContentCanvas"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):hover,
[class*="Widget"] [class*="ContentText"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):hover,
[class*="Widget"] [class*="Step__ContentCanvas"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):hover,
[class*="kbWidget"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):not(.ston-folder):not(.ston-kb-guide-block):hover,
.stn-widget-content a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):hover {
  color: #065a4f !important;
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
}

/* Active state - prevent pink/red flash */
[class*="ContentCanvas"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):active,
[class*="ContentText"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):active,
[class*="Step__ContentCanvas"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):active,
[class*="content-text"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):active,
[class*="ston-content"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):active,
[class*="ContentWrap"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):active,
[class*="RichText"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):active,
.content-text a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):active,
p a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):active,
div a:not([class*="Block"]):not([class*="NextStep"]):not([class*="ListBody"]):not([class*="Breadcrumb"]):active,
[class*="Widget"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):active,
[class*="kbWidget"] a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):active,
.stn-widget-content a:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):active {
  color: #065a4f !important;
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
}

/* Next step selector tiles and list items - preserve backgrounds and borders */
[class*="NextStepSelector"] a,
[class*="ListBody"] a,
[class*="list-item"] a,
a[class*="Block"],
[class*="StepSelector"] a {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #E2E4E6 !important;
  border-radius: 8px !important;
  color: #087a6a !important;
  text-decoration: none !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

[class*="NextStepSelector"] a:hover,
[class*="ListBody"] a:hover,
[class*="list-item"] a:hover,
a[class*="Block"]:hover,
[class*="StepSelector"] a:hover {
  background: #F8F9FA !important;
  background-color: #F8F9FA !important;
  border: 1px solid #D0D3D6 !important;
  color: #065a4f !important;
}

/* Left align text content within next step tiles */
[class*="NextStepSelector"] a [class*="Text"],
[class*="ListBody"] a [class*="Text"],
[class*="list-item"] a [class*="Text"],
a[class*="Block"] [class*="Text"],
[class*="StepSelector"] a [class*="Text"] {
  text-align: left !important;
  width: 100% !important;
}

/* Ultra-aggressive override - catch all OTHER link states to prevent pink/red */
/* But exclude next step tiles and breadcrumbs */
a[target="_self"]:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]),
a[data-step-connection-id]:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]),
a[href*="mailto"]:not([class*="Breadcrumb"]),
a[href^="http"]:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]) {
  color: #087a6a !important;
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
  transition: none !important;
}

a[target="_self"]:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):hover,
a[data-step-connection-id]:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):hover,
a[href*="mailto"]:not([class*="Breadcrumb"]):hover,
a[href^="http"]:not([class*="Block"]):not([class*="NextStep"]):not([class*="Breadcrumb"]):hover {
  color: #065a4f !important;
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
  transition: none !important;
}

/* ============================================================
   13. VISITED LINK STATES - High Contrast for Accessibility
   ============================================================ */
/* Ensure visited links have high contrast and are easily visible */
a:visited,
[class*="Widget"] a:visited,
a.ston-folder:visited,
a.ston-kb-guide-block:visited {
  color: #1a1a1a !important;
}

/* Tiles should not change color when visited */
a.ston-folder:visited [class*="Text"],
a.ston-kb-guide-block:visited [class*="Text"],
[class*="Widget"] a.ston-folder:visited,
[class*="Widget"] a.ston-kb-guide-block:visited {
  color: #26282e !important;
}

/* ============================================================
   14. BREADCRUMB NAVIGATION - High Contrast
   ============================================================ */
/* Breadcrumb links - ensure readable contrast and proper layout */
[class*="Breadcrumbs"] a,
[class*="Breadcrumb"] a,
nav[aria-label*="breadcrumb"] a {
  color: #1a1a1a !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  text-decoration: none !important;
  display: inline !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

[class*="Breadcrumbs"] a:hover,
[class*="Breadcrumb"] a:hover,
nav[aria-label*="breadcrumb"] a:hover {
  color: #000000 !important;
  text-decoration: underline !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 0 !important;
}

/* Ensure breadcrumb container maintains proper layout */
[class*="Breadcrumbs"],
[class*="Breadcrumb"],
nav[aria-label*="breadcrumb"] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ============================================================
   15. NEXT STEP BUTTONS - Bubble style with readability
   ============================================================ */
/* Specific button styling - only for actual next step buttons (NOT back/feedback buttons) */
button[data-ston="nextStepButton"],
[data-cy="nextStepButton"],
button[class*="nextStepButton"]:not([data-cy="backButton"]):not([data-cy="feedbackButton"]),
.button-wrap button:not([data-cy="backButton"]):not([data-cy="feedbackButton"]) {
  background-color: #4A4A5A !important;
  background-image: none !important;
  background: #4A4A5A !important;
  color: #FFFFFF !important;
  border-radius: 50px !important;
  padding: 16px 28px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

button[data-ston="nextStepButton"]:hover,
[data-cy="nextStepButton"]:hover,
button[class*="nextStepButton"]:not([data-cy="backButton"]):not([data-cy="feedbackButton"]):hover,
.button-wrap button:not([data-cy="backButton"]):not([data-cy="feedbackButton"]):hover {
  background-color: #333340 !important;
  background-image: none !important;
  background: #333340 !important;
  box-shadow: 0 2px 8px rgba(74, 74, 90, 0.2) !important;
  transition: none !important;
}

button[data-ston="nextStepButton"]:active,
[data-cy="nextStepButton"]:active,
button[class*="nextStepButton"]:not([data-cy="backButton"]):not([data-cy="feedbackButton"]):active,
.button-wrap button:not([data-cy="backButton"]):not([data-cy="feedbackButton"]):active {
  background-color: #333340 !important;
  background-image: none !important;
  background: #333340 !important;
  transition: none !important;
}

button[data-ston="nextStepButton"]:focus,
[data-cy="nextStepButton"]:focus,
button[class*="nextStepButton"]:not([data-cy="backButton"]):not([data-cy="feedbackButton"]):focus,
.button-wrap button:not([data-cy="backButton"]):not([data-cy="feedbackButton"]):focus {
  background-color: #4A4A5A !important;
  background-image: none !important;
  background: #4A4A5A !important;
  transition: none !important;
}

</style>