/* Contact bar only: share the primary button surface, not reassurance styling.
 * Keep the yellow account-benefits trigger and its light dropdown independent.
 * Mobile shows only phone and email in one compact row. */
@layer sg-button-utilities, sg-button-palette, sg-link-hover, sg-brand-palette;
@layer sg-link-hover {
  html body .sg-utility-bar {
    background: linear-gradient(135deg, var(--sg-button-palette-bg, #071b36) 0%, var(--sg-button-palette-gradient-end, #0b2a52) 100%) !important;
    border-bottom-color: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
  }

  html body .sg-utility-bar__inner {
    background: transparent !important;
  }

  html body .sg-utility-bar__item,
  html body .sg-utility-bar__item :is(a, span) {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .16) !important;
  }

  html body .sg-utility-bar__item .sg-utility-bar__icon {
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .sg-utility-bar__item a[href]:is(:hover, :focus-visible),
  html body .sg-utility-bar__item a[href]:is(:hover, :focus-visible) span {
    color: var(--sg-brand-yellow, #f4d36a) !important;
  }

  html body .sg-utility-bar__item a[href]:focus-visible {
    outline: 2px solid var(--sg-brand-yellow, #f4d36a) !important;
    outline-offset: 3px !important;
  }

  @media (max-width: 991.98px) {
    html body .sg-utility-bar:not(.sg-utility-bar--mobile-hidden) {
      display: block !important;
      width: 100% !important;
      margin: 0 !important;
    }
    html body .sg-utility-bar.sg-utility-bar--mobile-hidden { display: none !important; }
    html body .sg-utility-bar__inner.container-md {
      display: grid !important;
      grid-template-columns: max-content minmax(0, 1fr) !important;
      gap: 0 10px !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      padding: 2px 10px !important;
    }
    html body .sg-utility-bar__inner > .sg-utility-bar__item {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 5px !important;
      min-width: 0 !important;
      min-height: 44px !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      background: transparent !important;
      white-space: nowrap !important;
      order: 1 !important;
    }
    html body .sg-utility-bar__inner > .sg-utility-bar__item:nth-child(2) {
      justify-content: flex-end !important;
    }
    html body .sg-utility-bar__item > :is(a, span):not(.sg-utility-bar__icon) {
      min-width: 0 !important;
      font-size: clamp(12px, 3.1vw, 14px) !important;
      line-height: 1.4 !important;
      white-space: nowrap !important;
      overflow-wrap: normal !important;
      background: transparent !important;
      word-break: normal !important;
    }
    html body .sg-utility-bar__item > a {
      display: flex !important;
      align-items: center !important;
      min-height: 44px !important;
      flex: 0 1 auto !important;
    }
    html body .sg-utility-bar__item .sg-utility-bar__icon {
      display: inline-flex !important;
      flex: 0 0 16px !important;
      width: 16px !important;
      height: 16px !important;
      max-width: 16px !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    html body .sg-utility-bar__item .sg-utility-bar__icon svg {
      width: 16px !important;
      height: 16px !important;
    }
    html body .sg-utility-bar__inner > .sg-utility-bar__item:nth-last-child(-n+2),
    html body .sg-utility-bar__inner > .sg-account-benefits {
      display: none !important;
    }
  }

  @media (forced-colors: active) {
    html body .sg-utility-bar {
      background: Canvas !important;
      color: CanvasText !important;
      border-bottom-color: CanvasText !important;
    }
    html body .sg-utility-bar__item,
    html body .sg-utility-bar__item span { color: CanvasText !important; }
    html body .sg-utility-bar__item a[href],
    html body .sg-utility-bar__item a[href]:is(:hover, :focus-visible),
    html body .sg-utility-bar__item a[href]:is(:hover, :focus-visible) span {
      color: LinkText !important;
    }
    html body .sg-utility-bar__item a[href]:focus-visible { outline-color: Highlight !important; }
  }
}