/* Theme-aware Fluent layout for the full Ara module. */
.oto760-main-search {
  --oto760-win-accent: var(--teal);
  --oto760-win-accent-hover: color-mix(in srgb, var(--teal) 82%, var(--navy));
  --oto760-win-accent-soft: var(--oto760-accent-soft, color-mix(in srgb, var(--teal) 11%, var(--surface)));
  --oto760-win-border: var(--line);
  --oto760-win-card: color-mix(in srgb, var(--surface) 96%, var(--soft));
  position: relative;
  border-color: var(--line);
  background:
    radial-gradient(circle at 92% 0, color-mix(in srgb, var(--cyan) 21%, transparent), transparent 30%),
    radial-gradient(circle at 7% 100%, color-mix(in srgb, var(--teal) 10%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface) 84%, var(--soft));
  box-shadow: 0 12px 32px color-mix(in srgb, var(--navy) 14%, transparent), inset 0 1px rgba(255, 255, 255, .72);
}

.oto760-main-search-header {
  grid-template-columns: 54px minmax(0, 1fr);
  color: var(--ink);
  border-bottom-color: var(--line);
  background: linear-gradient(112deg, color-mix(in srgb, var(--surface) 84%, var(--soft)), color-mix(in srgb, var(--surface) 76%, var(--oto760-win-accent-soft)));
  box-shadow: inset 0 3px var(--teal), 0 2px 8px color-mix(in srgb, var(--teal) 8%, transparent);
}

.oto760-main-search > .oto760-main-search-header {
  display: none !important;
}

.oto760-main-search-mark {
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--teal) 76%, var(--cyan)), var(--teal));
  box-shadow: 0 5px 14px color-mix(in srgb, var(--teal) 27%, transparent), inset 0 1px rgba(255, 255, 255, .28);
}

.oto760-main-search-header small,
.oto760-main-search-toolbar > label > span,
.oto760-main-search-result-copy small,
.oto760-main-search-result-arrow {
  color: var(--teal);
}

.oto760-main-search-header p {
  color: var(--muted);
}

.oto760-main-search-toolbar {
  grid-template-columns: minmax(280px, 1fr) 94px 94px auto;
  column-gap: 10px;
  row-gap: 8px;
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--surface) 78%, var(--soft));
}

.oto760-main-search-toolbar > label {
  grid-column: 1;
  height: 46px;
  padding: 0 11px;
  border: 1px solid var(--line) !important;
  border-radius: 7px;
  outline: 0 !important;
  background: var(--surface) !important;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--navy) 9%, transparent) !important;
}

.oto760-main-search-toolbar > label:focus-within {
  border: 1px solid var(--teal) !important;
  outline: 0 !important;
  background: var(--surface) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--teal) 13%, transparent), 0 3px 9px color-mix(in srgb, var(--teal) 12%, transparent) !important;
}

.oto760-main-search-toolbar input,
html body .oto760-main-search-toolbar input:focus,
html body .oto760-main-search-toolbar input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  color: var(--ink) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.oto760-main-search-toolbar input::placeholder {
  color: var(--muted) !important;
}

.oto760-main-search-toolbar kbd {
  border-color: var(--line);
  color: var(--muted);
  background: var(--soft);
}

.oto760-main-search-submit {
  grid-column: 2;
  width: 94px;
  min-height: 42px;
  align-self: center;
  padding: 7px 12px;
  border: 1px solid var(--teal);
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 80%, var(--cyan)), var(--teal));
  box-shadow: 0 2px 7px color-mix(in srgb, var(--teal) 25%, transparent), inset 0 1px rgba(255, 255, 255, .22);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.oto760-main-search-submit:hover,
.oto760-main-search-submit:focus-visible {
  border-color: var(--oto760-win-accent-hover);
  outline: 0 !important;
  background: var(--oto760-win-accent-hover);
  box-shadow: 0 4px 11px color-mix(in srgb, var(--teal) 28%, transparent);
  transform: translateY(-1px);
}

#oto760MainSearchFocus {
  grid-column: 4;
}

#oto760MainSearchFocus button {
  border-color: var(--line);
  color: var(--ink);
  background: var(--surface);
}

#oto760MainSearchFocus button:hover,
#oto760MainSearchFocus button:focus-visible {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--oto760-win-accent-soft);
}

#oto760MainSearchFocus button.active {
  border-color: var(--teal);
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 80%, var(--cyan)), var(--teal));
  box-shadow: 0 2px 7px color-mix(in srgb, var(--teal) 25%, transparent), inset 0 1px rgba(255, 255, 255, .22);
}

#oto760MainSearchStatus {
  grid-column: 1 / -1;
  color: var(--muted);
}

.oto760-main-search-results {
  background: color-mix(in srgb, var(--surface) 76%, var(--soft));
}

.oto760-main-search-result {
  border-color: var(--line);
  border-left-color: var(--teal);
  background: var(--surface);
  box-shadow: 0 3px 9px color-mix(in srgb, var(--navy) 8%, transparent), inset 0 1px rgba(255, 255, 255, .72);
}

.oto760-main-search-result:hover,
.oto760-main-search-result:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--teal) 15%, transparent), 0 0 0 1px color-mix(in srgb, var(--teal) 7%, transparent);
}

.oto760-main-search-result-mark {
  background: linear-gradient(145deg, color-mix(in srgb, var(--teal) 76%, var(--cyan)), var(--teal));
  box-shadow: 0 3px 8px color-mix(in srgb, var(--teal) 23%, transparent);
}

.oto760-main-search-empty b {
  color: var(--teal);
  background: var(--oto760-win-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 12%, transparent);
}

@media (max-width: 1100px) {
  .oto760-main-search-toolbar {
    grid-template-columns: minmax(0, 1fr) 90px;
  }

  .oto760-main-search-submit {
    grid-column: 2;
    width: 90px;
  }

  #oto760MainSearchFocus {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .oto760-main-search-toolbar {
    grid-template-columns: minmax(0, 1fr) 78px;
  }

  .oto760-main-search-submit {
    width: 78px;
    padding-inline: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oto760-main-search-submit {
    transition: none;
  }
}