/*
  SAJ Studio hero indicators desktop fix
  File: public_html/saj-hero-indicators-fix.css
  Scope: desktop hero slider dots only
  Active range: 1025px+
*/

/* Desktop only: keep hero slider dots always visible and clickable */
@media (min-width: 1025px) {
  html body #root section#hero.saj-hero-slider .saj-hero-indicators,
  html body section#hero.saj-hero-slider .saj-hero-indicators,
  html body .saj-hero-slider .saj-hero-indicators {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 116px !important;
    top: auto !important;
    transform: translateX(-50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    width: auto !important;
    min-width: 86px !important;
    max-width: none !important;
    height: auto !important;
    min-height: 34px !important;

    padding: 9px 13px !important;
    margin: 0 !important;

    border: 1px solid rgba(200, 169, 107, 0.34) !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.68) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38) !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2147483000 !important;
  }

  html body #root section#hero.saj-hero-slider .saj-hero-indicator,
  html body section#hero.saj-hero-slider .saj-hero-indicator,
  html body .saj-hero-slider .saj-hero-indicator {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 11px !important;
    min-width: 11px !important;
    max-width: 11px !important;
    height: 11px !important;
    min-height: 11px !important;
    max-height: 11px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 1px solid rgba(255, 248, 234, 0.92) !important;
    border-radius: 999px !important;
    background: rgba(255, 248, 234, 0.18) !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    cursor: pointer !important;

    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
  }

  html body #root section#hero.saj-hero-slider .saj-hero-indicator.is-active,
  html body section#hero.saj-hero-slider .saj-hero-indicator.is-active,
  html body .saj-hero-slider .saj-hero-indicator.is-active {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    background: #c8a96b !important;
    border-color: #c8a96b !important;
  }

  html body #root section#hero.saj-hero-slider .saj-hero-indicator:hover,
  html body section#hero.saj-hero-slider .saj-hero-indicator:hover,
  html body .saj-hero-slider .saj-hero-indicator:hover,
  html body #root section#hero.saj-hero-slider .saj-hero-indicator:focus-visible,
  html body section#hero.saj-hero-slider .saj-hero-indicator:focus-visible,
  html body .saj-hero-slider .saj-hero-indicator:focus-visible {
    background: #d8b46a !important;
    border-color: #d8b46a !important;
    outline: none !important;
  }

  /* Make sure image layers and trust bar never steal clicks from the dots */
  html body #root section#hero.saj-hero-slider .saj-hero-slide-bg,
  html body section#hero.saj-hero-slider .saj-hero-slide-bg,
  html body .saj-hero-slider .saj-hero-slide-bg,
  html body #root section#hero.saj-hero-slider .saj-hero-trust-bar,
  html body section#hero.saj-hero-slider .saj-hero-trust-bar,
  html body .saj-hero-slider .saj-hero-trust-bar {
    pointer-events: none !important;
  }
}