/*
 * EGE-School partner widgets (D47): the look of the Repetit.ru catalogue on the page
 * «Репетиторы», overridden with the theme tokens (fields, buttons, fonts, radii). Only the
 * look is changed, never the markup or the widget scripts. Loaded only on pages that print
 * partner widgets (inc/assets.php). The TutorOnline form is NOT styled here: it lives in a
 * shadow root, which a page stylesheet cannot reach — assets/js/partners.js adds the
 * equivalent rules inside it. The widget stylesheet is added to the page after this one, so
 * every selector starts with `#main .es-partner-widget--repetit`: the id wins over any class chain
 * of the widget. Where the widget uses !important, so do we (marked below).
 * Colours only from base.css tokens.
 */

/* ---------- Repetit.ru: base ---------- */
#main .es-partner-widget--repetit .repetit-container {
  max-width: 100%;
  color: var(--es-ink);
  font-family: var(--es-font-text);
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#main .es-partner-widget--repetit .repetit-container *,
#main .es-partner-widget--repetit .repetit-container *::before,
#main .es-partner-widget--repetit .repetit-container *::after {
  box-sizing: border-box;
}

#main .es-partner-widget--repetit .repetit-container img {
  max-width: 100%;
}

#main .es-partner-widget--repetit .module-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}

/* ---------- Repetit.ru: filters (subject, region, metro) ---------- */
#main .es-partner-widget--repetit .selection-filter-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--es-s-3);
  align-items: start;
  width: 100%;
  margin: 0;
  padding: clamp(16px, 2.5vw, 24px);
  border: 0;
  border-radius: var(--es-r-lg);
  background: var(--es-ink);
  color: var(--es-white);
  opacity: 1;
}

#main .es-partner-widget--repetit .selection-filter-container h2 {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--es-white);
  font-family: var(--es-font-display) !important; /* the widget sets its font with !important */
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

#main .es-partner-widget--repetit .selection-filter-container .back-to-results {
  grid-column: 1 / -1;
  color: var(--es-on-dark);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

#main .es-partner-widget--repetit .selection-filter-container .back-to-results:hover {
  color: var(--es-acc);
}

#main .es-partner-widget--repetit .select2-container {
  width: 100% !important;
  min-width: 0;
  margin: 0;
}

#main .es-partner-widget--repetit .select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 40px 0 18px;
  border: 2px solid transparent;
  border-radius: var(--es-r-pill);
  background: var(--es-white);
  color: var(--es-ink);
}

#main .es-partner-widget--repetit .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  overflow: hidden;
  color: var(--es-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#main .es-partner-widget--repetit .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--es-ink);
}

#main .es-partner-widget--repetit .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0;
  right: 14px;
  height: 100%;
}

#main .es-partner-widget--repetit .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--es-ink) transparent transparent;
}

#main .es-partner-widget--repetit .select2-container--default.select2-container--focus .select2-selection--single,
#main .es-partner-widget--repetit .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--es-acc);
}

#main .es-partner-widget--repetit .select2-container--default.select2-container--disabled .select2-selection--single {
  background: color-mix(in srgb, var(--es-white) 12%, transparent);
  cursor: not-allowed;
}

#main .es-partner-widget--repetit .select2-container--default.select2-container--disabled .select2-selection__rendered,
#main .es-partner-widget--repetit .select2-container--default.select2-container--disabled .select2-selection__placeholder {
  color: var(--es-on-dark);
}

#main .es-partner-widget--repetit .select2-container--default.select2-container--disabled .select2-selection__arrow b {
  border-color: var(--es-on-dark) transparent transparent;
}

/* ---------- Repetit.ru: found counter and the list ---------- */
#main .es-partner-widget--repetit .results-counter {
  display: block;
  margin: var(--es-s-4) 0;
  padding: 0 var(--es-s-1);
  color: var(--es-muted-2);
  font-size: 16px;
  font-weight: 600;
}

#main .es-partner-widget--repetit .results-container {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  padding: 0;
}

/* ---------- Repetit.ru: teacher card ---------- */
#main .es-partner-widget--repetit .teacher {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--es-s-6);
  width: 100%;
  margin: 0;
  padding: clamp(16px, 3vw, 26px);
  padding-bottom: clamp(16px, 3vw, 26px) !important;
  border: 0;
  border-radius: var(--es-r-xl);
  background: var(--es-white);
  float: none;
}

#main .es-partner-widget--repetit .teacher .appearance,
#main .es-partner-widget--repetit .teacher .teacher-info {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

#main .es-partner-widget--repetit .teacher .photo {
  width: 120px;
  max-width: 100%;
  margin: 0;
}

#main .es-partner-widget--repetit .teacher .photo img {
  display: block;
  width: 120px;
  height: 140px;
  border-radius: var(--es-r-md);
  background: var(--es-line-2);
  object-fit: cover;
}

#main .es-partner-widget--repetit .teacher .teacher-info {
  display: grid;
  border: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 230px);
  column-gap: var(--es-s-6);
  row-gap: var(--es-s-3);
  align-content: start;
}

#main .es-partner-widget--repetit .teacher .teacher-info > * {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
}

#main .es-partner-widget--repetit .teacher .teacher-info > h3,
#main .es-partner-widget--repetit .teacher .teacher-info > .teacher-status-short,
#main .es-partner-widget--repetit .teacher .teacher-info > .rating {
  grid-column: 1;
}

#main .es-partner-widget--repetit .teacher h3 {
  color: var(--es-ink);
  font-family: var(--es-font-display) !important;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.2;
}

#main .es-partner-widget--repetit .teacher .teacher-status-short {
  display: block;
  margin-top: calc(-1 * var(--es-s-2));
  color: var(--es-muted);
  font-size: 14px;
  font-weight: 600;
}

#main .es-partner-widget--repetit .teacher .rating {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--es-s-2);
}

#main .es-partner-widget--repetit .teacher .rating .stars {
  float: none;
}

#main .es-partner-widget--repetit .teacher .rating .icon-star {
  color: var(--es-ink) !important;
}

#main .es-partner-widget--repetit .teacher .order-counter {
  color: var(--es-muted);
  font-size: 13px;
  font-weight: 600;
}

/* price and the contact button */
#main .es-partner-widget--repetit .teacher .price-w-contact-button {
  display: flex;
  flex-direction: column;
  gap: 10px;
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
  width: auto;
  padding: 16px;
  border-radius: var(--es-r-md);
  background: var(--es-ground);
  float: none;
  text-align: left;
}

#main .es-partner-widget--repetit .teacher .lesson-price {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--es-ink);
  font-family: var(--es-font-text) !important;
  text-align: left;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

#main .es-partner-widget--repetit .teacher .contact-teacher-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 0 18px;
  border: 2px solid transparent;
  border-radius: var(--es-r-pill);
  background: var(--es-acc);
  color: var(--es-ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s;
}

#main .es-partner-widget--repetit .teacher .contact-teacher-btn:hover {
  background: var(--es-acc-h);
}

/* subject, divisions, additions, pupils */
#main .es-partner-widget--repetit .teacher .subjects-block {
  display: flex;
  flex-direction: column;
  gap: var(--es-s-3);
}

#main .es-partner-widget--repetit .teacher .subject .prices-row .title {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--es-r-pill);
  background: var(--es-acc);
  color: var(--es-ink);
  font-size: 14px;
  font-weight: 800;
}

#main .es-partner-widget--repetit .teacher .subject-info {
  display: flex;
  flex-direction: column;
  gap: var(--es-s-2);
  margin-top: var(--es-s-3);
}

#main .es-partner-widget--repetit .teacher .divisions-row,
#main .es-partner-widget--repetit .teacher .additions-row,
#main .es-partner-widget--repetit .teacher .pupil-categories-row {
  display: grid;
  grid-template-columns: 20px 150px minmax(0, 1fr);
  gap: var(--es-s-2);
  align-items: start;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

#main .es-partner-widget--repetit .teacher .subject-info i {
  position: static;
  color: var(--es-muted);
}

#main .es-partner-widget--repetit .teacher .subject-info .title {
  position: static;
  padding-top: 5px;
  color: var(--es-muted);
  font-weight: 600;
}

#main .es-partner-widget--repetit .teacher .brief-shortening {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
}

#main .es-partner-widget--repetit .teacher .brief-shortening > span {
  margin: 0;
  padding: 4px 12px;
  border-radius: var(--es-r-pill);
  background: var(--es-ground);
  color: var(--es-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

#main .es-partner-widget--repetit .teacher .brief-shortening > div {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--es-muted-2);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* lessons at the teacher's, away, remote */
#main .es-partner-widget--repetit .teacher .lesson-places {
  margin: 0;
  margin-bottom: 0 !important;
  padding: 0;
  border: 0;
}

#main .es-partner-widget--repetit .teacher .lesson-places-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--es-s-2);
  margin: 0;
  padding: 0;
  border: 0;
}

#main .es-partner-widget--repetit .teacher .lesson-places-info > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 20px;
  background: var(--es-ground);
  font-size: 13px;
  line-height: 1.4;
}

#main .es-partner-widget--repetit .teacher .lesson-places-info > .remote-lesson-places {
  background: color-mix(in srgb, var(--es-acc) 28%, var(--es-white));
}

#main .es-partner-widget--repetit .teacher .lesson-places .subtitle {
  display: block;
  color: var(--es-ink);
  font-size: 13px;
  font-weight: 800;
}

#main .es-partner-widget--repetit .teacher .lesson-places .place {
  display: block;
  color: var(--es-muted-2);
}

#main .es-partner-widget--repetit .teacher .educations {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--es-muted);
  font-size: 13px;
  line-height: 1.4;
}

#main .es-partner-widget--repetit .teacher .educations .subtitle {
  color: var(--es-ink);
  font-size: 13px;
  font-weight: 800;
}

/* ---------- Repetit.ru: pagination ---------- */
#main .es-partner-widget--repetit .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--es-s-2);
  align-items: center;
  justify-content: center;
  margin: var(--es-s-8) 0 0;
  padding: 0;
  list-style: none;
}

#main .es-partner-widget--repetit .pagination li {
  min-width: 48px;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: var(--es-r-pill);
  background: var(--es-white);
  color: var(--es-ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 48px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

#main .es-partner-widget--repetit .pagination li:hover {
  background: var(--es-acc);
}

#main .es-partner-widget--repetit .pagination li.active,
#main .es-partner-widget--repetit .pagination li.active:hover {
  background: var(--es-ink);
  color: var(--es-white);
  cursor: default;
}

/* A muted colour instead of opacity (the catalogue's own sheet fades the item to 0.5): faded ink on white fails the 4.5:1 contrast (D52). */
#main .es-partner-widget--repetit .pagination li.not-active {
  opacity: 1;
  color: var(--es-muted);
  cursor: default;
}

#main .es-partner-widget--repetit .pagination li.not-active:hover {
  background: var(--es-white);
}

#main .es-partner-widget--repetit .pagination li.jump-back,
#main .es-partner-widget--repetit .pagination li.jump-forward {
  min-width: 24px;
  padding: 0 4px;
  background: transparent;
  cursor: default;
}

/* ---------- Repetit.ru: list of the select2 dropdown (printed at the end of <body>) ---------- */
.select2-container--open .select2-dropdown {
  overflow: hidden;
  border: 2px solid var(--es-line);
  border-radius: 18px;
  background: var(--es-white);
  color: var(--es-ink);
  font-family: var(--es-font-text);
}

.select2-container--open .select2-search--dropdown .select2-search__field {
  border: 2px solid var(--es-line);
  border-radius: var(--es-r-sm);
  font-family: var(--es-font-text);
  font-size: 16px;
}

.select2-container--default .select2-results__option {
  font-size: 15px;
}

.select2-container--default .select2-results__option.select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--es-ink) !important;
  color: var(--es-white) !important;
}

/* ---------- narrow screens ---------- */
@media (max-width: 900px) {
  #main .es-partner-widget--repetit .selection-filter-container {
    grid-template-columns: minmax(0, 1fr);
  }

  #main .es-partner-widget--repetit .teacher .lesson-places-info {
    grid-template-columns: minmax(0, 1fr);
  }

  #main .es-partner-widget--repetit .teacher .teacher-info {
    grid-template-columns: minmax(0, 1fr);
  }

  #main .es-partner-widget--repetit .teacher .teacher-info > h3,
  #main .es-partner-widget--repetit .teacher .teacher-info > .teacher-status-short,
  #main .es-partner-widget--repetit .teacher .teacher-info > .rating,
  #main .es-partner-widget--repetit .teacher .price-w-contact-button {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  /* the photo sits beside the name (mockup): the info block dissolves into the card grid */
  #main .es-partner-widget--repetit .teacher {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: var(--es-s-2) 14px;
    border-radius: var(--es-r-lg);
  }

  #main .es-partner-widget--repetit .teacher .teacher-info {
    display: contents;
  }

  #main .es-partner-widget--repetit .teacher .appearance {
    position: static;
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  #main .es-partner-widget--repetit .teacher .teacher-info > h3,
  #main .es-partner-widget--repetit .teacher .teacher-info > .teacher-status-short,
  #main .es-partner-widget--repetit .teacher .teacher-info > .rating {
    grid-column: 2;
    padding-left: 0 !important; /* the widget's phone layout indents them for its own photo */
  }

  #main .es-partner-widget--repetit .teacher h3 {
    font-size: 16px;
    overflow-wrap: break-word;
  }

  #main .es-partner-widget--repetit .teacher .teacher-info > .price-w-contact-button,
  #main .es-partner-widget--repetit .teacher .teacher-info > .subjects-block,
  #main .es-partner-widget--repetit .teacher .teacher-info > .lesson-places,
  #main .es-partner-widget--repetit .teacher .teacher-info > .educations {
    grid-column: 1 / -1;
  }

  #main .es-partner-widget--repetit .teacher .teacher-info > .subjects-block {
    margin-top: var(--es-s-2);
  }

  #main .es-partner-widget--repetit .teacher .photo,
  #main .es-partner-widget--repetit .teacher .photo img {
    width: 76px;
  }

  #main .es-partner-widget--repetit .teacher .photo img {
    height: 88px;
    border-radius: 20px;
  }

  #main .es-partner-widget--repetit .teacher .divisions-row,
  #main .es-partner-widget--repetit .teacher .additions-row,
  #main .es-partner-widget--repetit .teacher .pupil-categories-row {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  #main .es-partner-widget--repetit .teacher .brief-shortening {
    grid-column: 1 / -1;
  }

  #main .es-partner-widget--repetit .pagination li {
    min-width: 44px;
    height: 44px;
    line-height: 44px;
  }
}