/* Calendar and Discover recovery integration V2.4.219. */

body[data-active-view="search"],
body[data-active-view="calendar"] {
  --ar-dd-field: var(--ar-page-field, rgba(20, 18, 23, .72));
  --ar-dd-line: var(--ar-page-line, rgba(64, 58, 66, .74));
  --ar-dd-line-strong: rgba(96, 88, 96, .82);
  --ar-dd-menu-bg: rgba(22, 20, 26, .98);
  --ar-dd-text: var(--md-on-surface, #ece6e9);
  --ar-dd-muted: var(--md-muted, #b8adb1);
  --ar-dd-accent: rgba(216, 52, 58, .62);
  --ar-dd-accent-soft: rgba(216, 52, 58, .16);
}

body[data-active-view="search"] .ar-select-btn,
body[data-active-view="calendar"] .ar-select-btn {
  border: 1px solid var(--ar-dd-line) !important;
  border-radius: 9px !important;
  background: var(--ar-dd-field) !important;
  color: var(--ar-dd-text) !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

body[data-active-view="search"] .ar-select-text,
body[data-active-view="calendar"] .ar-select-text {
  color: inherit !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

body[data-active-view="search"] .ar-select-arrow,
body[data-active-view="calendar"] .ar-select-arrow {
  width: 14px !important;
  min-width: 0 !important;
  flex: 0 0 14px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: inherit !important;
}

body[data-active-view="search"] .ar-select-arrow::before,
body[data-active-view="calendar"] .ar-select-arrow::before {
  width: 8px !important;
  height: 8px !important;
  margin: 0 0 2px !important;
  border: 0 !important;
  border-right: 1.6px solid currentColor !important;
  border-bottom: 1.6px solid currentColor !important;
  border-radius: 1px !important;
  background: none !important;
  opacity: .8 !important;
  transform: rotate(45deg) !important;
  content: '' !important;
}

body[data-active-view="search"] .ar-select.is-open .ar-select-arrow::before,
body[data-active-view="calendar"] .ar-select.is-open .ar-select-arrow::before {
  margin: 2px 0 0 !important;
  transform: rotate(-135deg) !important;
}

body[data-active-view="search"] .ar-select.is-open .ar-select-btn,
body[data-active-view="calendar"] .ar-select.is-open .ar-select-btn {
  border-color: var(--ar-dd-accent) !important;
}

body[data-active-view="search"] .ar-select-btn:hover,
body[data-active-view="calendar"] .ar-select-btn:hover {
  border-color: var(--ar-dd-line-strong) !important;
}

body[data-active-view="search"] .ar-select-btn:focus-visible,
body[data-active-view="search"] .ar-select-option:focus-visible,
body[data-active-view="calendar"] .ar-select-btn:focus-visible,
body[data-active-view="calendar"] .ar-select-option:focus-visible {
  outline: 2px solid var(--md-primary) !important;
  outline-offset: 2px !important;
}

body[data-active-view="search"] .ar-select-menu,
body[data-active-view="calendar"] .ar-select-menu {
  padding: 6px !important;
  border: 1px solid var(--ar-dd-line) !important;
  border-radius: 10px !important;
  background: var(--ar-dd-menu-bg) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .46) !important;
}

body[data-active-view="search"] .ar-select-option,
body[data-active-view="calendar"] .ar-select-option {
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--ar-dd-text) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

body[data-active-view="search"] .ar-select-option:hover,
body[data-active-view="search"] .ar-select-option:focus-visible,
body[data-active-view="search"] .ar-select-option.is-selected,
body[data-active-view="search"] .ar-select-option[aria-selected="true"],
body[data-active-view="calendar"] .ar-select-option:hover,
body[data-active-view="calendar"] .ar-select-option:focus-visible,
body[data-active-view="calendar"] .ar-select-option.is-selected,
body[data-active-view="calendar"] .ar-select-option[aria-selected="true"] {
  background: var(--ar-dd-accent-soft) !important;
  color: #fff !important;
}

body[data-active-view="calendar"] #calendarFilters.calendar-filters:has(.ar-select.is-open) {
  overflow: hidden !important;
}

body[data-active-view="calendar"] #calendarFilters.calendar-filters .filter-body:has(.ar-select.is-open) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Gemeinsame Desktop-Flaechen liegen seit V2.4.221 im Shell-Stylesheet. */

@media (min-width: 960px) {
  html:not(.native-app) body:is([data-active-view="search"], [data-active-view="calendar"]) .content-topbar {
    position: relative !important;
    z-index: 3 !important;
    background: transparent !important;
  }

  html:not(.native-app) body:is([data-active-view="search"], [data-active-view="calendar"]) .content-topbar::before {
    content: '' !important;
    position: absolute !important;
    z-index: -1 !important;
    inset: -9px -11px !important;
    border-radius: 13px !important;
    background: var(--shell-topbar-surface) !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%) !important;
    pointer-events: none !important;
  }

}


@media (min-width: 960px) {
  html:not(.native-app) body[data-active-view="search"] .content-topbar-search input,
  html:not(.native-app) body[data-active-view="calendar"] .content-topbar-search input {
    background: rgba(26, 23, 28, .90) !important;
  }
}

@media (max-width: 959px) {
  body[data-active-view="search"] .ar-select-btn,
  body[data-active-view="calendar"] .ar-select-btn,
  body[data-active-view="search"] .ar-select-menu,
  body[data-active-view="calendar"] .ar-select-menu {
    border-radius: 10px !important;
  }

  body[data-active-view="search"] .ar-select-option,
  body[data-active-view="calendar"] .ar-select-option {
    min-height: 44px !important;
  }

  html body #view-search .discover-filter-row .discover-select-field:first-of-type {
    display: none !important;
  }
}