/* Shared resource controls — high specificity for Cornerstone/Pro theme resets. */

/*
 * PERF-12, complete. The five brand tokens live in me-tokens.css, registered as
 * the `me-custom-tokens` handle, which this stylesheet declares as a dependency
 * (Shared_Assets::register()). Every page that loads this file therefore still
 * gets the tokens — as a separate, parallel-fetched ~200-byte file — while the
 * auction gallery and the video grid depend on the token handle alone and no
 * longer download 11 KB of directory CSS to read five custom properties.
 *
 * Deliberately NOT a CSS @import: an @import serialises the request (the browser
 * cannot discover the imported file until this one has downloaded and parsed),
 * adding a round-trip to a render-blocking path. Two parallel <link>s are
 * strictly better, and that is what the dependency produces.
 */

.me-resource-controls,
.me-faq-controls,
.me-clinics .me-resource-controls,
.x-col .me-resource-controls,
.x-col .me-faq-controls,
.x-col .me-clinics .me-resource-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
  padding: 16px 0 20px;
  margin-bottom: 8px;
  border: 0;
}

.me-resource-control,
.me-faq-control,
.x-col .me-resource-control,
.x-col .me-faq-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  min-width: 220px;
}

.me-resource-control:first-child,
.me-faq-control:first-child,
.x-col .me-resource-control:first-child,
.x-col .me-faq-control:first-child {
  flex: 1 1 320px;
}

.me-resource-control > span,
.me-faq-control > span,
.x-col .me-resource-control > span,
.x-col .me-faq-control > span {
  display: block;
  font-family: "Quicksand", "Poppins", Arial, sans-serif;
  color: var(--me-ink, #000000);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.me-resource-control input[type="search"],
.me-resource-control select,
.me-faq-control input[type="search"],
.me-faq-control select,
.x-col .me-resource-control input[type="search"],
.x-col .me-resource-control select,
.x-col .me-faq-control input[type="search"],
.x-col .me-faq-control select {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 10px 4px 8px;
  border: 0;
  border-bottom: 2px solid var(--me-grey);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: "Open Sans", "Poppins", Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--me-grey);
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}

.me-resource-control input[type="search"]:focus,
.me-resource-control select:focus,
.me-faq-control input[type="search"]:focus,
.me-faq-control select:focus,
.x-col .me-resource-control input[type="search"]:focus,
.x-col .me-resource-control select:focus,
.x-col .me-faq-control input[type="search"]:focus,
.x-col .me-faq-control select:focus {
  border-bottom-color: var(--me-pink);
}

.me-resource-control input[type="search"]:focus-visible,
.me-resource-control select:focus-visible,
.me-faq-control input[type="search"]:focus-visible,
.me-faq-control select:focus-visible,
.x-col .me-resource-control input[type="search"]:focus-visible,
.x-col .me-resource-control select:focus-visible,
.x-col .me-faq-control input[type="search"]:focus-visible,
.x-col .me-faq-control select:focus-visible {
  outline: 2px solid var(--me-pink-accessible);
  outline-offset: 2px;
}

.me-resource-control select,
.me-faq-control select,
.x-col .me-resource-control select,
.x-col .me-faq-control select {
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--me-pink) 50%), linear-gradient(135deg, var(--me-pink) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% + 2px), calc(100% - 11px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

.me-resource-control-checkbox,
.x-col .me-resource-control-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: auto;
  flex: 0 0 auto;
  cursor: pointer;
}

.me-resource-control-checkbox > span,
.x-col .me-resource-control-checkbox > span {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 600;
}

.me-resource-control-checkbox input[type="checkbox"],
.x-col .me-resource-control-checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--me-pink);
}

.me-resource-empty,
.me-faq-empty,
.x-col .me-resource-empty,
.x-col .me-faq-empty {
  border: 1px dashed var(--me-grey-light);
  border-radius: 0;
  color: var(--me-grey);
  padding: 12px;
  font-family: "Open Sans", "Poppins", Arial, sans-serif;
}

/* The filter hide utility that used to live here has moved to me-tokens.css,
   which this file depends on — so every block that had it still has it, and
   blocks that depend on the tokens WITHOUT this sheet (the auction listing) now
   have it too. They did not, and their filtering silently did nothing. */

mark[data-me-highlight="1"],
.x-col mark[data-me-highlight="1"] {
  background: var(--me-pink-tint);
  color: var(--me-ink, #000000);
  padding: 0 2px;
}

@media (max-width: 767px) {
  .me-resource-controls,
  .me-faq-controls,
  .me-clinics .me-resource-controls,
  .x-col .me-resource-controls,
  .x-col .me-faq-controls,
  .x-col .me-clinics .me-resource-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .me-resource-control,
  .me-resource-control:first-child,
  .me-faq-control,
  .me-faq-control:first-child,
  .x-col .me-resource-control,
  .x-col .me-resource-control:first-child,
  .x-col .me-faq-control,
  .x-col .me-faq-control:first-child {
    flex: 1 1 100%;
    min-width: 100%;
  }
}

/* -----------------------------------------------------------------------------
 * Directory layout shared by the clinic and online-resource grids (M15 dedup).
 * The two modules render structurally identical cards; only the class prefix,
 * the grouping term (province vs category), the logo-circle background variable,
 * and the clinic badge / resource tagline differ. Those per-module bits stay in
 * clinics.css / online-resources.css; everything else lives here once.
 * -------------------------------------------------------------------------- */

.me-clinics,
.x-col .me-clinics,
.x-row .me-clinics,
.me-online-resources,
.x-col .me-online-resources,
.x-row .me-online-resources {
  display: grid;
  gap: 20px;
  width: 100%;
}

.me-clinics .me-clinic-province-group,
.x-col .me-clinics .me-clinic-province-group,
.me-online-resources .me-online-resource-category-group,
.x-col .me-online-resources .me-online-resource-category-group {
  display: grid;
  gap: 0;
  margin-top: 12px;
}

.me-clinics .me-clinic-province-title,
.x-col .me-clinics .me-clinic-province-title,
.me-online-resources .me-online-resource-category-title,
.x-col .me-online-resources .me-online-resource-category-title {
  margin: 0 0 16px;
  padding: 0;
  color: var(--me-ink, #000000);
  font-family: "Quicksand", "Poppins", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
}

.me-clinics .me-clinic-grid,
.x-col .me-clinics .me-clinic-grid,
.me-online-resources .me-online-resource-grid,
.x-col .me-online-resources .me-online-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

.me-clinics .me-clinic-card,
.x-col .me-clinics .me-clinic-card,
.me-online-resources .me-online-resource-card,
.x-col .me-online-resources .me-online-resource-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--me-grey-light);
  border-radius: 0;
  background: #fff;
  min-width: 0;
}

.me-clinics .me-clinic-card-header,
.x-col .me-clinics .me-clinic-card-header,
.me-online-resources .me-online-resource-card-header,
.x-col .me-online-resources .me-online-resource-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  text-align: center;
}

.me-clinics .me-clinic-logo,
.x-col .me-clinics .me-clinic-logo,
.me-online-resources .me-online-resource-logo,
.x-col .me-online-resources .me-online-resource-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 72px;
  width: 72px;
  min-width: 72px;
  height: 72px;
  margin: 0 auto;
  padding: 8px;
  border-radius: 50%;
  overflow: hidden;
}
/* The logo-circle background differs per module and needs !important to beat an
   X/Pro dynamic rule — see clinics.css / online-resources.css. */

.me-clinics .me-clinic-logo img,
.x-col .me-clinics .me-clinic-logo img,
.me-online-resources .me-online-resource-logo img,
.x-col .me-online-resources .me-online-resource-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.me-clinics .me-clinic-logo-placeholder,
.x-col .me-clinics .me-clinic-logo-placeholder,
.me-online-resources .me-online-resource-logo-placeholder,
.x-col .me-online-resources .me-online-resource-logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  color: var(--me-ink, #000000);
  font-family: "Quicksand", "Poppins", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
}

.me-clinics .me-clinic-name,
.x-col .me-clinics .me-clinic-name,
.me-online-resources .me-online-resource-name,
.x-col .me-online-resources .me-online-resource-name {
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  color: var(--me-grey);
  font-family: "Quicksand", "Poppins", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
}

.me-clinics .me-clinic-details,
.x-col .me-clinics .me-clinic-details,
.me-online-resources .me-online-resource-details,
.x-col .me-online-resources .me-online-resource-details {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.me-clinics .me-clinic-detail,
.x-col .me-clinics .me-clinic-detail,
.me-online-resources .me-online-resource-detail,
.x-col .me-online-resources .me-online-resource-detail {
  display: grid;
  gap: 4px;
  margin: 0;
}

.me-clinics .me-clinic-detail dt,
.x-col .me-clinics .me-clinic-detail dt,
.me-online-resources .me-online-resource-detail dt,
.x-col .me-online-resources .me-online-resource-detail dt {
  margin: 0;
  color: var(--me-ink, #000000);
  font-family: "Quicksand", "Poppins", Arial, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.me-clinics .me-clinic-detail dd,
.x-col .me-clinics .me-clinic-detail dd,
.me-online-resources .me-online-resource-detail dd,
.x-col .me-online-resources .me-online-resource-detail dd {
  margin: 0;
  color: var(--me-grey);
  font-family: "Open Sans", "Poppins", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.me-clinics .me-clinic-detail a,
.x-col .me-clinics .me-clinic-detail a,
.me-online-resources .me-online-resource-detail a,
.x-col .me-online-resources .me-online-resource-detail a {
  color: var(--me-grey);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.me-clinics .me-clinic-detail a:hover,
.x-col .me-clinics .me-clinic-detail a:hover,
.me-online-resources .me-online-resource-detail a:hover,
.x-col .me-online-resources .me-online-resource-detail a:hover {
  color: var(--me-ink-hover, #6C6C6C);
}

@media (max-width: 1023px) {
  .me-clinics .me-clinic-grid,
  .x-col .me-clinics .me-clinic-grid,
  .me-online-resources .me-online-resource-grid,
  .x-col .me-online-resources .me-online-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .me-clinics .me-clinic-grid,
  .x-col .me-clinics .me-clinic-grid,
  .me-online-resources .me-online-resource-grid,
  .x-col .me-online-resources .me-online-resource-grid {
    grid-template-columns: 1fr;
  }
}