/* VW_PERSISTENT_HEADING_WEATHER_DOCK_R9D */
/* VW_NATIVE_WEATHER_SETTINGS_REMOVAL_R9E */
:root {
  --vw-r9d-dock-top:
    calc(env(safe-area-inset-top, 0px) + 10px);
  --vw-r9d-dock-left:
    max(12px, env(safe-area-inset-left, 0px));
  --vw-r9d-compass-size: 68px;
  --vw-r9d-weather-height: 58px;
}

#vwPersistentHeadingWeatherDock {
  position: fixed !important;
  top: var(--vw-r9d-dock-top) !important;
  left: var(--vw-r9d-dock-left) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2147483000 !important;

  display: flex !important;
  align-items: center !important;
  gap: 9px !important;

  width: auto !important;
  max-width: var(--vw-r9d-compass-size) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  pointer-events: none !important;
  contain: layout style !important;
}

#vwPersistentHeadingWeatherDock,
#vwPersistentHeadingWeatherDock * {
  box-sizing: border-box !important;
}

#vwVelvetCompassR9D {
  position: relative !important;
  flex: 0 0 var(--vw-r9d-compass-size) !important;
  width: var(--vw-r9d-compass-size) !important;
  height: var(--vw-r9d-compass-size) !important;
  border: 1px solid rgba(195, 92, 255, 0.64) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(84, 29, 128, 0.45) 0%,
      rgba(20, 14, 31, 0.96) 48%,
      rgba(8, 8, 14, 0.98) 100%
    ) !important;

  box-shadow:
    0 0 0 2px rgba(92, 30, 142, 0.28),
    0 0 17px rgba(181, 70, 255, 0.48),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -8px 18px rgba(0,0,0,0.35) !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

#vwVelvetCompassR9D::before {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255,255,255,0.82) 0deg 0.7deg,
      transparent 0.7deg 10deg
    ) !important;
  opacity: 0.62 !important;
  -webkit-mask:
    radial-gradient(
      circle,
      transparent 0 73%,
      #000 74% 100%
    ) !important;
  mask:
    radial-gradient(
      circle,
      transparent 0 73%,
      #000 74% 100%
    ) !important;
  pointer-events: none !important;
}

#vwVelvetCompassR9D .vw-r9d-compass-face {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: none !important;
}

#vwVelvetCompassR9D .vw-r9d-cardinal {
  position: absolute !important;
  z-index: 3 !important;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255,255,255,0.64) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9) !important;
}

#vwVelvetCompassR9D .vw-r9d-cardinal-n {
  top: 7px !important;
  color: #ff79dc !important;
}

#vwVelvetCompassR9D .vw-r9d-cardinal-e {
  right: 7px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

#vwVelvetCompassR9D .vw-r9d-cardinal-s {
  bottom: 7px !important;
}

#vwVelvetCompassR9D .vw-r9d-cardinal-w {
  left: 7px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

#vwVelvetCompassNeedleR9D {
  position: absolute !important;
  inset: 10px !important;
  z-index: 2 !important;
  transform-origin: 50% 50% !important;
  transform: rotate(0deg) !important;
  transition:
    transform 190ms cubic-bezier(.2,.75,.2,1) !important;
  will-change: transform !important;
  pointer-events: none !important;
}

#vwVelvetCompassNeedleR9D svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  filter:
    drop-shadow(0 0 4px rgba(195, 75, 255, 0.78))
    drop-shadow(0 2px 2px rgba(0,0,0,0.72)) !important;
}

#vwVelvetCompassR9D .vw-r9d-heading {
  position: absolute !important;
  left: 50% !important;
  bottom: 10px !important;
  z-index: 4 !important;
  transform: translateX(-50%) !important;

  min-width: 28px !important;
  padding: 2px 5px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;

  background: rgba(5, 5, 10, 0.72) !important;
  color: rgba(255,255,255,0.88) !important;

  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
  pointer-events: none !important;
}

.vw-r9d-weather-source {
  /*
    Preserve the existing weather widget's native appearance.
    R9E changes only fixed placement and visibility.
  */
  position: fixed !important;
  top: var(--vw-r9d-dock-top) !important;
  left:
    calc(
      var(--vw-r9d-dock-left) +
      var(--vw-r9d-compass-size) +
      9px
    ) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2147483000 !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  pointer-events: auto !important;
}

.vw-r9d-original-compass-source {
  position: fixed !important;
  top: 0 !important;
  left: -10000px !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
}

.vw-r9e-settings-removed {
  display: none !important;
  position: fixed !important;
  left: -10000px !important;
  top: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/*
  The dock is intentionally outside the collapsible HUD groups.
  These broad state selectors make the persistence contract explicit.
*/
body.controls-hidden #vwPersistentHeadingWeatherDock,
body.vw-controls-hidden #vwPersistentHeadingWeatherDock,
body.vw-ui-hidden #vwPersistentHeadingWeatherDock,
body.vw-minimal-ui #vwPersistentHeadingWeatherDock,
body.vw-driving-ui-minimal #vwPersistentHeadingWeatherDock,
body.ar-active #vwPersistentHeadingWeatherDock,
body.vw-ar-active #vwPersistentHeadingWeatherDock,
html[data-vw-ui-hidden="true"] #vwPersistentHeadingWeatherDock {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none !important;
}

body.controls-hidden .vw-r9d-weather-source,
body.vw-controls-hidden .vw-r9d-weather-source,
body.vw-ui-hidden .vw-r9d-weather-source,
body.vw-minimal-ui .vw-r9d-weather-source,
body.vw-driving-ui-minimal .vw-r9d-weather-source,
body.ar-active .vw-r9d-weather-source,
body.vw-ar-active .vw-r9d-weather-source,
html[data-vw-ui-hidden="true"] .vw-r9d-weather-source {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

@media (max-width: 420px) {
  :root {
    --vw-r9d-compass-size: 62px;
    --vw-r9d-weather-height: 54px;
  }

  #vwPersistentHeadingWeatherDock {
    gap: 0 !important;
    max-width: var(--vw-r9d-compass-size) !important;
  }

  .vw-r9d-weather-source {
    left:
      calc(
        var(--vw-r9d-dock-left) +
        var(--vw-r9d-compass-size) +
        8px
      ) !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --vw-r9d-compass-size: 56px;
    --vw-r9d-weather-height: 48px;
  }

  #vwPersistentHeadingWeatherDock {
    top: calc(env(safe-area-inset-top, 0px) + 7px) !important;
  }
}