:root {
  --ott-guide-loader-blue: var(--tvguide-blue, #2f6cff);
  --ott-guide-loader-red: var(--brand-red, #fe4437);
  --ott-guide-loader-yellow: #ffd54a;
  --ott-guide-loader-z: 1800;
}

.ott-guide-loader {
  position: fixed;
  inset: 0;
  z-index: var(--ott-guide-loader-z);
  display: grid;
  place-items: center;
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  isolation: isolate;
  transition:
    opacity 180ms ease,
    visibility 0s linear 180ms;
}

.ott-guide-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.42), rgba(243, 244, 245, 0.28) 42%, rgba(15, 23, 42, 0.08) 100%),
    linear-gradient(135deg, rgba(47, 108, 255, 0.06), rgba(254, 68, 55, 0.04));
}

.ott-guide-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 20%, rgba(47, 108, 255, 0.06), transparent 28%),
    radial-gradient(circle at 80% 75%, rgba(254, 68, 55, 0.05), transparent 30%);
  opacity: 0.45;
}

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .ott-guide-loader::before {
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    backdrop-filter: blur(4px) saturate(120%);
  }
}

.ott-guide-loader.is-active,
.ott-guide-loader[aria-hidden="false"],
body.is-guide-loading .ott-guide-loader {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 180ms ease,
    visibility 0s linear 0s;
}

.ott-guide-loader__panel {
  display: contents;
}

.ott-guide-loader__copy,
.ott-guide-loader__bar {
  display: none !important;
}

.ott-guide-loader__wheel {
  position: relative;
  width: clamp(96px, 18vw, 128px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 999px;
  filter:
    drop-shadow(0 18px 28px rgba(47, 108, 255, 0.16))
    drop-shadow(0 8px 18px rgba(15, 23, 42, 0.10));
  transform: translateY(8px) scale(0.96);
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1);
}

.ott-guide-loader.is-active .ott-guide-loader__wheel,
.ott-guide-loader[aria-hidden="false"] .ott-guide-loader__wheel,
body.is-guide-loading .ott-guide-loader .ott-guide-loader__wheel {
  transform: translateY(0) scale(1);
}

.ott-guide-loader__wheel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    conic-gradient(
      from 0deg,
      var(--ott-guide-loader-red) 0deg,
      var(--ott-guide-loader-yellow) 82deg,
      var(--ott-guide-loader-blue) 176deg,
      #7dd3fc 244deg,
      var(--ott-guide-loader-red) 360deg
    );
  opacity: 0.72;
  filter: saturate(0.82);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 14px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 14px));
  animation: ott-guide-loader-spin 1.05s linear infinite;
}

.ott-guide-loader__wheel::after {
  content: "stay tuned";
  position: absolute;
  inset: 16px;
  display: grid;
  place-items: center;
  border-radius: inherit;
  color: rgba(71, 85, 105, 0.88);
  font-size: clamp(0.68rem, 1.55vw, 0.9rem);
  font-weight: 1000;
  letter-spacing: -0.035em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.82),
    0 2px 4px rgba(15, 23, 42, 0.16),
    0 9px 16px rgba(15, 23, 42, 0.10);
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.54) 38%, transparent 39%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 250, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.90);
  box-shadow:
    inset 2px 3px 7px rgba(255, 255, 255, 0.86),
    inset -3px -4px 8px rgba(15, 23, 42, 0.08),
    0 10px 20px rgba(15, 23, 42, 0.08);
}

.ott-guide-loader__comet {
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  animation: ott-guide-loader-spin 1.05s linear infinite reverse;
}

.ott-guide-loader__comet::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.26),
    0 0 20px rgba(47, 108, 255, 0.54),
    0 0 30px rgba(254, 68, 55, 0.30);
  transform: translateX(-50%);
}

body.is-guide-loading .controls-panel select,
body.is-guide-loading .controls-panel input,
body.is-guide-loading .sticky-desktop-toolbar select,
body.is-guide-loading .sticky-mobile-toolbar button,
body.is-guide-loading .main-actions-row button {
  cursor: progress;
}

@keyframes ott-guide-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .ott-guide-loader {
    place-items: center;
    padding:
      max(14px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      max(14px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
  }

  .ott-guide-loader__wheel {
    width: clamp(92px, 30vw, 108px);
  }

  .ott-guide-loader__wheel::before {
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px));
  }

  .ott-guide-loader__wheel::after {
    inset: 15px;
    font-size: clamp(0.62rem, 2.6vw, 0.8rem);
  }

  .ott-guide-loader__comet::before {
    width: 12px;
    height: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ott-guide-loader,
  .ott-guide-loader__wheel,
  .ott-guide-loader__wheel::before,
  .ott-guide-loader__comet {
    animation: none !important;
    transition: none !important;
  }

  .ott-guide-loader__wheel {
    transform: none !important;
  }
}