/* Tutor search (/tutors/..., templates/pages/tutor/listing.html with partials/tutor-results.html, result-card.html and
   tutor-filters.html, rendered by ssr/server.py). The CTutor web app's search screen in its own tokens
   (lib/screens/discover/discover_screens_theme.dart DiscoverScreensColors / Sizes / TextStyles): primary #FF5C00,
   text #1A1A1A / #6B6B6B / #B3B3B3, card border #EAEAEA radius 16, divider #F0F0F0, scaffold #FAFAFA, input radius 14;
   the result card is web_tutor_card.dart and the dialog web_discover_filters_dialog.dart, measure for measure. */

.discover { padding: 16px 0 48px; background: #FAFAFA; color: #1A1A1A; overflow-wrap: anywhere; }
@media (min-width: 1025px) { .discover { padding: 24px 0 80px; } }
.discover .breadcrumb { margin-bottom: 12px; }
.discover__title { margin: 0 0 16px; font: 600 22px/1.3 var(--font-sans); color: #1A1A1A; text-align: center; }

/* Discover home (web_discover_home_screen.dart, signed out) on the bare /tutors/: white rising to #FFE7CC over the top
   40%, the orb, tagline and title, the search bar with its mic and the 52px filters button, two rows of subjects */
.discover--home { padding: 0; }
/* A result's profile shown in place of the search (discover.js): the search stays in the page, hidden */
.discover > [hidden] { display: none !important; }
.discover--home .discover-profile-view { padding-top: 16px; }
@media (min-width: 1025px) { .discover--home .discover-profile-view { padding-top: 24px; } }
/* The home fills the screen under the sticky header (54/64/75px tall), so its first view is the search alone */
.discover-home { display: flex; flex-direction: column; align-items: center; min-height: calc(100vh - 54px); min-height: calc(100svh - 54px);
  padding: 24px 16px 32px; text-align: center; background: linear-gradient(to bottom, #FFE7CC 0%, #FFFFFF 40%); }
@media (min-width: 640px) { .discover-home { padding: 40px 16px 48px; } }
@media (min-width: 768px) { .discover-home { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); } }
@media (min-width: 1025px) { .discover-home { min-height: calc(100vh - 75px); min-height: calc(100svh - 75px); } }
.discover-home__orb { display: block; width: 120px; height: auto; }
@media (min-width: 640px) { .discover-home__orb { width: 150px; } }
.discover-home__tagline { margin: 8px 0 0; font: 500 16px/1.4 var(--font-sans); color: #6B6B6B; }
.discover-home__title { margin: 6px 0 0; font: 700 22px/1.3 var(--font-sans); color: #1A1A1A; }
@media (min-width: 640px) { .discover-home__title { font-size: 26px; } }
.discover-home__bar { display: flex; align-items: flex-start; gap: 12px; width: 100%; max-width: 784px; margin-top: 30px; }
.discover-home__search { flex: 1 1 auto; display: flex; align-items: center; gap: 5px; min-width: 0; padding: 6px 8px 6px 20px; border: 1px solid #EAEAEA;
  border-radius: 14px; background: #FFFFFF; box-shadow: 0 4px 16px rgba(255, 92, 0, .04); }
.discover-home__search:focus-within { border-color: #FF5C00; }
.discover-home__input { flex: 1 1 auto; min-width: 0; padding: 12px 0; border: 0; background: transparent; outline: none;
  font: 400 14px/1.2 var(--font-sans); color: #1A1A1A; }
.discover-home__input::placeholder { color: #B3B3B3; opacity: 1; }
.discover-home__mic { flex: 0 0 auto; display: grid; place-items: center; padding: 6px; color: #6B6B6B; }
.discover-home__search.is-busy .discover-home__mic { visibility: hidden; }
.discover-home__filters { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #EAEAEA; border-radius: 14px;
  background: #FFFFFF; cursor: pointer; }
.discover-home__filters:hover { border-color: #FF5C00; }
.discover-home__subjects { display: grid; gap: 12px; max-width: 784px; margin-top: 24px; }
.discover-home__subjects ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin: 0; padding: 0; list-style: none; }
.discover-home__subjects a { display: inline-block; padding: 8px 12px; border: 1px solid #EAEAEA; border-radius: 999px; background: #FFFFFF;
  font: 500 13px/1.2 var(--font-sans); color: #1A1A1A; text-decoration: none; }
.discover-home__subjects a:hover { border-color: #FF5C00; color: #FF5C00; }

/* Composer (CompactSearchComposer) with the filters button beside it */
.discover-bar { display: flex; align-items: center; gap: 10px; max-width: 720px; margin: 0 auto; }
.discover-composer { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; padding: 4px 10px 4px 14px; border: 1px solid #EAEAEA;
  border-radius: 14px; background: #FFFFFF; }
.discover-composer:focus-within { border-color: #FF5C00; }
.discover-composer__input { flex: 1 1 auto; min-width: 0; padding: 12px 0; border: 0; background: transparent; outline: none;
  font: 400 13px/1.2 var(--font-sans); color: #1A1A1A; }
.discover-composer__input::placeholder { color: #B3B3B3; opacity: 1; }
.discover-composer__send { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: #FF5C00; color: #FFFFFF; cursor: pointer; }
.discover-composer__send .discover-spinner { display: none; border-color: rgba(255, 255, 255, .45); border-top-color: #FFFFFF; }
.discover-composer.is-busy .discover-composer__send { background: #EAEAEA; cursor: default; }
.discover-composer.is-busy .discover-composer__send .icon { display: none; }
.discover-composer.is-busy .discover-composer__send .discover-spinner { display: block; }
.discover-bar__filters { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #EAEAEA; border-radius: 8px;
  background: #FFFFFF; cursor: pointer; }
.discover-bar__filters:hover { border-color: #FF5C00; }

.discover-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #FFEEDB; border-top-color: #FF5C00; border-radius: 50%;
  animation: discover-spin .8s linear infinite; }
@keyframes discover-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .discover-spinner { animation-duration: 2.4s; } }
.discover-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; font: 400 13px/1.3 var(--font-sans); color: #6B6B6B; }
.discover-status[hidden] { display: none; }
.discover-status.is-done .discover-spinner { display: none; }

/* Applied-filter chips and Clear all */
.discover-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 720px; margin: 12px auto 0; padding: 0; list-style: none; }
.discover-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 12px; border: 1px solid #D3D3D3; border-radius: 12px;
  background: #FFFFFF; font: 400 16px/1 var(--font-sans); letter-spacing: -.32px; color: #717171; text-decoration: none; }
.discover-chip:hover { border-color: #FF5C00; }
.discover-chips__clear { display: inline-block; padding: 8px; font: 500 16px/1 var(--font-sans); color: #A9A9A9; text-decoration: none; }
.discover-chips__clear:hover { color: #6B6B6B; }

/* Results panel */
.discover-results { margin-top: 14px; border: 1px solid #EAEAEA; border-radius: 16px; background: #FFFFFF; }
.discover-results__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid #F0F0F0; }
.discover-results__title { flex: 1 1 auto; margin: 0; font: 600 18px/1.3 var(--font-sans); color: #1A1A1A; }
.discover-results__count { font: 400 13px/1.3 var(--font-sans); color: #6B6B6B; }
.discover-results__body { padding: 14px 14px 14px; }
/* A near search until the visitor's position arrives (discover.js): the results from anywhere are not shown */
.discover-results.is-waiting .discover-results__count, .discover-results.is-waiting .discover-results__body > * { display: none; }
.discover-results.is-waiting .discover-results__body { min-height: 120px; }
@media (min-width: 768px) { .discover-results__body { padding-right: 20px; } }
.discover-results__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.discover-empty { margin: 0; padding: 32px; font: 400 13px/1.5 var(--font-sans); color: #6B6B6B; text-align: center; }
.discover-more { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 12px 0 0; }
.discover-more__btn { display: inline-block; padding: 10px 24px; border: 1px solid #FFEEDB; border-radius: 10px; background: #FFFFFF;
  font: 600 13px/1.2 var(--font-sans); color: #FF5C00; text-decoration: none; }
.discover-more__btn:hover { border-color: #FF5C00; }
.discover-more.is-loading .discover-more__btn { display: none; }

/* Result card (WebTutorCard) */
.result-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #EAEAEA; border-radius: 16px; background: #FFFFFF; }
.result-card:hover { border-color: #FFD2B3; }
.result-card:focus-within { outline: 2px solid #FF5C00; outline-offset: 2px; }
.result-card__main { padding: 14px; }
.result-card__head { display: flex; align-items: flex-start; gap: 14px; }
.result-card__avatar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 72px; height: 84px; border-radius: 14px;
  background: var(--avatar-bg, #FFC1A3); object-fit: cover; font: 700 24px/1 var(--font-sans); color: #1A1A1A; }
.result-card__body { flex: 1 1 auto; min-width: 0; }
.result-card__title-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.result-card__name { margin: 0; min-width: 0; overflow: hidden; font: 700 15px/1.3 var(--font-sans); color: #1A1A1A; white-space: nowrap; text-overflow: ellipsis; }
.result-card__link { color: inherit; text-decoration: none; }
.result-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.result-card__link:focus-visible { outline: none; }
.result-card__verified { flex: 0 0 auto; color: #2D7CFF; }
.result-card__rating { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; margin-left: auto; padding: 2px 8px; border-radius: 999px;
  background: #E6F4ED; font: 700 11px/1.3 var(--font-sans); color: #1A7A4A; }
.result-card__qualification { margin: 4px 0 0; font: 400 12px/1.35 var(--font-sans); color: #6B6B6B; }
.result-card__highlight { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 8px 0 0; }
.result-card__highlight-chip { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 3px 8px; border-radius: 8px; background: #FF6B35;
  font: 700 12px/1.3 var(--font-sans); color: #FFFFFF; }
.result-card__highlight-chip span, .result-card__matched { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.result-card__highlight-chip .icon { flex: 0 0 auto; }
.result-card__matched { font: 400 12px/1.3 var(--font-sans); color: #B3B3B3; }
.result-card__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.result-card__chips li { padding: 3px 10px; border: 1px solid #E4E7EC; border-radius: 8px; background: #F2F4F7; font: 500 10px/1.3 var(--font-sans); color: #374151; }
.result-card__chips .result-card__more { padding: 0; border: 0; background: none; font: 500 11px/1.3 var(--font-sans); color: #2563EB; }
.result-card__badges { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
.result-card__recommended { display: inline-flex; flex: 1 1 auto; align-items: center; gap: 4px; min-width: 0; font: 600 11px/1.3 var(--font-sans); color: #FF6B35; }
.result-card__recommended span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.result-card__rate { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; margin-left: auto; padding: 4px 8px; border-radius: 6px; background: #FFF5EC;
  font: 500 11px/1.2 var(--font-sans); color: #FF5C00; }
.result-card__rate strong { margin-right: -4px; font-weight: 700; }
.result-card__info { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.result-card__info li { display: flex; align-items: center; gap: 6px; min-width: 0; font: 400 12px/1.35 var(--font-sans); color: #6B6B6B; }
.result-card__info li span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.result-card__info .icon { flex: 0 0 auto; }
.result-card__bio { margin: 0; padding: 10px 14px; border-top: 1px solid #EDEEF2; background: #F8F9FB; font: 400 11px/1.45 var(--font-sans); color: #6B6B6B; }
.result-card__bio span { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Filters dialog: a floating close button over a washed frame round the 460px popup; a full-screen sheet on small
   screens (shouldUseCompactFiltersDialog: narrower than 640px or shorter than 620px) */
.modal.filters { width: min(777px, calc(100% - 80px)); max-width: none; max-height: none; padding: 0; overflow: visible; border-radius: 0;
  background: transparent; text-align: left; }
.modal.filters::backdrop { background: rgba(0, 0, 0, .5); }
.filters__form { display: flex; flex-direction: column; margin: 0; }
.filters__close { align-self: flex-end; display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 8px; border: 0; border-radius: 50%;
  background: #FFFFFF; color: #1A1A1A; cursor: pointer; }
.filters__close-compact { display: none; }
.filters__wash { padding: 17px; border-radius: 32px; background: rgba(232, 232, 232, .2); }
.filters__popup { display: flex; flex-direction: column; height: 460px; max-height: calc(100vh - 160px); overflow: hidden; border: 1px solid #DDDDDD;
  border-radius: 20px; background: #FAFAF9; }
.filters__head { display: flex; align-items: flex-start; margin: 0 32px; padding: 18px 0 14px; border-bottom: 1px solid #DDDDDD; }
.filters__head > div { flex: 1 1 auto; }
.filters__title { margin: 0; font: 500 24px/1.25 var(--font-sans); color: #1A1A1A; }
.filters__subtitle { margin: 4px 0 0; font: 400 16px/1.3 var(--font-sans); color: #717171; }
.filters__label { margin: 0; padding: 14px 32px 10px; font: 500 16px/1.2 var(--font-sans); color: #1A1A1A; }
.filters__facets { display: flex; flex-wrap: wrap; gap: 8px 5px; padding: 0 32px; }
.filters__facet { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px; border: 1px solid #BFBFBF; border-radius: 10px;
  background: #FFFFFF; font: 400 12px/1 var(--font-sans); color: #1A1A1A; cursor: pointer; white-space: nowrap; }
.filters__facet[aria-selected="true"] { border-color: #FF5C00; }
.filters__facet[data-has-value] { border-color: #FF5C00; color: #FF5C00; }
.filters__facet-open, .filters__facet[aria-selected="true"] .filters__facet-closed { display: none; }
.filters__facet[aria-selected="true"] .filters__facet-open { display: block; }
.filters__options { flex: 1 1 auto; min-height: 0; margin-top: 6px; padding: 0 16px; overflow-y: auto; }
.filters__panel { margin: 0; padding: 8px 0; border: 0; }
.filters__panel[hidden] { display: none; }
.filters__panel--padded { padding: 12px 20px; }
.filters__option { display: flex; align-items: center; gap: 12px; padding: 12px 20px; font: 400 14px/1.3 var(--font-sans); color: #1A1A1A; cursor: pointer; }
.filters__option:hover { background: rgba(255, 92, 0, .04); }
.filters__option input { position: absolute; opacity: 0; pointer-events: none; }
.filters__box, .filters__dot { flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid #EAEAEA; background: #FFFFFF; color: #FFFFFF; }
.filters__box { border-radius: 4px; }
.filters__box .icon { visibility: hidden; }
.filters__dot { border-radius: 50%; }
.filters__option input:checked + .filters__box { border-color: #FF5C00; background: #FF5C00; }
.filters__option input:checked + .filters__box .icon { visibility: visible; }
.filters__option input:checked + .filters__dot { border-color: #FF5C00; }
.filters__option input:checked + .filters__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #FF5C00; }
.filters__option input:focus-visible + span { outline: 2px solid #FF5C00; outline-offset: 2px; }
.filters__select select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #EAEAEA; border-radius: 10px; background: #FFFFFF;
  font: 400 14px/1 var(--font-sans); color: #1A1A1A; }
.filters__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 32px 18px; }
.filters__clear { padding: 8px 16px; border: 0; background: none; font: 500 16px/1 var(--font-sans); color: #A9A9A9; cursor: pointer; }
.filters__apply { height: 36px; padding: 0 32px; border: 0; border-radius: 8px; background: linear-gradient(90deg, #FF8843, #FF5C00);
  font: 500 16px/1 var(--font-sans); color: #FFFFFF; cursor: pointer; }
@media (max-width: 639px), (max-height: 619px) {
  .modal.filters { width: 100%; height: 100%; margin: 0; }
  .filters__form { height: 100%; }
  .filters__close { display: none; }
  .filters__wash { flex: 1 1 auto; display: flex; padding: 8px; border-radius: 20px; }
  .filters__popup { flex: 1 1 auto; height: auto; max-height: none; border-radius: 16px; }
  .filters__head { margin: 0 16px; padding: 14px 0 10px; }
  .filters__close-compact { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: #1A1A1A; cursor: pointer; }
  .filters__title { font-size: 20px; }
  .filters__subtitle { font-size: 13px; }
  .filters__label { padding: 10px 16px; }
  .filters__facets { flex-wrap: nowrap; padding: 0 16px 4px; overflow-x: auto; }
  .filters__options { padding: 0 4px; }
  .filters__actions { padding: 10px 16px 14px; }
  .filters__clear { padding: 12px 16px; }
  .filters__apply { flex: 1 1 auto; height: 44px; }
}