/* Premium Blue | service list adapter (member list and public list) | loaded after the theme sheet.
 *
 * Sits ON TOP of the theme sheet (premium-blue.css) and only adds what is specific to SCRIOT on this page; the theme modules are not
 * edited. Colours come from the theme's own tokens (--tp-* flip in the dark mode), no new colour constants.
 *   - an eighth column on the list head and on every row: the actions (favourite star, "order this service")
 *   - .pb-services-cta: the sign-in prompt a visitor sees above the list
 *   - .pb-services-extra: the admin's extra content of the Services page (visitors)
 *   - notes drawn by the page script: favourites note, loading and error line of the description dialog
 */

/* ---- eight columns: service | rate | min | max | avg | features | description | actions */
.page-services .services-list-head,
.page-services .service-box {
  grid-template-columns: minmax(52px, 1fr) minmax(0, 84px) minmax(0, 54px) minmax(0, 88px) minmax(0, 96px) minmax(0, 180px) minmax(0, 44px) minmax(0, 82px);
}

.page-services .services-list-head > span:nth-child(8) {
  display: block;
}

/* "Average time" module off (.svc-no-avg): no Avg column, so seven columns: service | rate | min | max | features | description | actions. */
.page-services.svc-no-avg .services-list-head,
.page-services.svc-no-avg .service-box {
  grid-template-columns: minmax(52px, 1fr) minmax(0, 84px) minmax(0, 54px) minmax(0, 88px) minmax(0, 180px) minmax(0, 44px) minmax(0, 82px);
}

.page-services.svc-no-avg .services-list-head > span:nth-child(7) {
  display: block;
}

.page-services.svc-no-avg .service-box-right .svc-actions {
  grid-column: 7;
}

.page-services .services-list-head .svc-head-actions {
  min-width: 0;
}

.page-services .service-box-right .svc-actions {
  grid-column: 8;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-6);
  min-width: 0;
}

.page-services .svc-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--tp-300);
  border-radius: var(--r-10);
  background: transparent;
  color: var(--tp-500);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: var(--tp-btn-transition);
}

.page-services .svc-act:hover,
.page-services .svc-act:focus-visible {
  border-color: var(--tp-site-color);
  color: var(--tp-site-color);
  text-decoration: none;
}

.page-services .svc-act--fav.is-on {
  border-color: var(--tp-yellow);
  color: var(--tp-yellow);
}

/* dark mode: --tp-500 and --tp-300 stay dark slate in this layer, so the cart icon and the border of the row buttons were dark grey on the
   near-black row (checked at every width, 25.10.2026). The icon takes the light text step, the border the dark theme's border, and the hover
   and focus states the pale blue accent of the dark theme. The favourite star keeps its yellow. */
html.dark .page-services .svc-act {
  border-color: var(--td-border-16);
  color: var(--td-text-200-90);
}

html.dark .page-services .svc-act:hover,
html.dark .page-services .svc-act:focus-visible {
  border-color: var(--td-surface-93c5fd);
  color: var(--td-surface-93c5fd);
}

html.dark .page-services .svc-act--fav.is-on {
  border-color: var(--tp-yellow);
  color: var(--tp-yellow);
}

.page-services .svc-act[disabled] {
  opacity: .55;
  cursor: progress;
}

/* touch screens: the 44 px target the theme uses elsewhere */
@media (pointer: coarse) {
  .page-services .svc-act {
    width: 44px;
    height: 44px;
  }
}

/* phones: price on one side, the two actions on the other (the row is a column there) */
@media only screen and (max-width: 962px) {
  .page-services .service-box-right .svc-actions {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ---- category header: a picture icon chosen by the panel (Font Awesome icons use the theme's .svc-cat-ico rules) */
.page-services .svc-cat-ico .svc-cat-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: var(--r-4, 4px);
}

/* ---- visitor prompt */
.page-services .pb-services-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  margin: 0 0 var(--sp-16);
  padding: var(--sp-16) var(--sp-20);
  border: 1px solid var(--tp-300);
  border-radius: var(--r-16);
  background: var(--tp-100);
}

/* dark mode: the tone-100 token is a neutral near-black (#101010) here, a notary-black box in a navy page; the cards of the panel are the navy
   of --td-surface-900-94 (found by the pb3 visual verifier, 17.10.2026; the same fix the contact card and the newsletter card got) */
html.dark .page-services .pb-services-cta {
  background: var(--td-surface-900-94);
  border-color: var(--td-border-14);
}

.page-services .pb-services-cta p {
  margin: 0;
  color: var(--tp-800);
  font-size: var(--fs-14);
  font-weight: 600;
}

.page-services .pb-services-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

/* ---- the admin's extra content */
.page-services .pb-services-extra {
  margin: 0 0 var(--sp-16);
}

/* ---- notes drawn by the script */
.page-services .pb-services-favnote,
.modal-container.service-description .pb-services-loading,
.modal-container.service-description .pb-services-error,
.modal-container.service-description .pb-services-nodesc {
  margin: var(--sp-8) 0;
  color: var(--tp-500);
  font-size: var(--fs-13);
  font-weight: 600;
  text-align: left;
}

.page-services .pb-services-favnote {
  padding: var(--sp-12) var(--sp-16);
  border: 1px dashed var(--tp-300);
  border-radius: var(--r-14);
}

.modal-container.service-description .pb-services-error {
  color: var(--tp-red);
}

/* ---- the notice above a long list when some of its rows could not be loaded (the rows request; js/pages/services.js) */
.page-services .pb-services-loaderr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-12);
  margin: 0 0 var(--sp-12);
  padding: var(--sp-12) var(--sp-16);
  border: 1px solid var(--tp-red);
  border-radius: var(--r-14);
  color: var(--tp-red);
  font-size: var(--fs-13);
  font-weight: 600;
}

.page-services .pb-services-loaderr[hidden] {
  display: none;
}

/* The service search field: 16px on phones (15px made iOS zoom the page when the field was focused) */
@media only screen and (max-width: 767.98px) {
  .page-search-box.service .serach-box-input #searchServices.form-control {
    font-size: 16px;
  }
}