:root { --km-build-sbh: "2564c58fa2"; }
/* ============================================================
   KNEAD - "Seamless" skin for the HOSTED SimplyBook site
   KM-DEPLOY: SimplyBook admin - Custom Features - Custom CSS - main (non-widget) CSS tab
   ============================================================
   DEPLOY: SimplyBook admin -> Custom Features -> Custom CSS ->
   the MAIN (non-widget) CSS tab. Paste this ENTIRE file,
   REPLACING the previous contents (the old Lexend / #a2daeb
   styling - superseded by this file, archived in the repo).

   Where these pages are seen: email links on Apple devices
   (cancel / manage bookings / pay invoice go to the hosted site
   there - see my-account.html isStrictWebKit), plus anyone
   opening kneadmassage.simplybook.it directly.

   This file is GENERATED from shared/sb-widget-seamless.css:
   the same rules with the widget-embed scope prefix removed, MINUS
   the widget-only header tricks (the hosted site keeps its own
   header, logo and nav - styled below), PLUS John's platform
   tweaks (his hides and layout fixes, rebranded) at the end.
   If the widget skin changes, regenerate rather than hand-edit.
   ============================================================ */

/* ---- Hosted chrome: the site header stays, on brand ---- */
header.header.widget,
header.header {
  background: var(--sl-paper) !important;
  border-bottom: 1px solid var(--sl-line) !important;
  box-shadow: none !important;
}

@font-face {
  font-family: 'Fraunces';
  src: url(https://fonts.gstatic.com/s/fraunces/v38/6NUu8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7iQcIfJD58njt0oc7qv8oRcTn.woff2) format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --sl-ink:        #141412;
  --sl-ink-soft:   #5F5E56;
  --sl-ink-hover:  #2b2b27;
  --sl-paper:      #FBFAF6;   /* page ground */
  --sl-card:       #FFFFFF;   /* cards / panels */
  --sl-panel:      #F2F0E9;
  --sl-panel-deep: #E9E6DC;   /* avatar arches, busy states */
  --sl-line:       rgba(20,20,18,0.11);
  --sl-brass:      #A9824C;   /* links, accents, focus */
  --sl-brass-soft: #C8A76F;   /* active step on ink */
  --sl-green:      #00B67A;   /* availability (Trustpilot green) */
  --sl-green-bg:   #D9F2E8;
  --sl-radius:     20px;
  --sl-serif: 'Fraunces', Georgia, serif;
  --sl-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---- Base sans (targeted, NOT universal - .fa icon spans keep their
   icon font, and the serif rules below out-rank these on titles) ---- */
body,
button:not(.fa):not(.fal):not(.fas),
input,
select,
textarea,
.btn,
.txt,
.title-small,
.title-sub,
.item__description,
.step_info_item .content,
.step_info_item .title-small,
.timezone-panel,
.time-legend,
.weeks-name,
.sb-cell,
.control-label,
.help-block {
  font-family: var(--sl-sans) !important;
}

/* Hide social login: the "use social media to continue" strip on the
   details step, and the matching Google/Facebook buttons in the sign-in
   popup. (Root fix if preferred: disable social login in SimplyBook
   admin - this CSS just keeps it out of the embed either way.) */
.client-login-bar,
.social-links { display: none !important; }

/* ---- Ground + type ---- */
body,
.main-content,
.step-content {
  background-color: var(--sl-paper) !important;
  color: var(--sl-ink) !important;
}
.title,
h1, h2, h3 {
  font-family: var(--sl-serif) !important;
  color: var(--sl-ink) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}
.title-sub,
.title-small,
.txt,
.item__description,
.timezone-panel,
.timezone-block { color: var(--sl-ink-soft) !important; }

/* ---- Step banner (mobile) + steps nav (desktop) ----
   The coloured bar is the li.step_info_item elements themselves. */
.steps-nav,
.step_info_item {
  background: var(--sl-ink) !important;
  color: var(--sl-paper) !important;
}
.steps-nav .title,
.steps-nav *,
.step_info_item * { color: var(--sl-paper) !important; }
.step_info_item.active,
.step_info_item.active * { color: var(--sl-brass-soft) !important; }
/* the li's inner .content div must stay transparent (ground rule must not paint it) */
.step_info_item .content { background: transparent !important; }
/* Active step marker: the stock theme draws a big arrow (a border-left
   triangle on ::after) - replaced with a brass underline across the
   active segment. */
.step_info_item.active::after { display: none !important; }
.step_info_item.active {
  box-shadow: inset 0 -3px 0 var(--sl-brass-soft) !important;
}

/* ---- Step icons ----
   Thin-line icons before each step name, replacing the emoji that used
   to live in the titles (remove those in SimplyBook admin → custom
   translations - CSS cannot delete text characters). Drawn as masks so
   they inherit the step's text colour (paper, brass-soft when active). */
.step_info_item .title-small::before {
  content: '';
  display: inline-block;
  width: 15px; height: 15px;
  margin-right: 8px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: var(--km-step-icon) center / contain no-repeat;
  mask: var(--km-step-icon) center / contain no-repeat;
}
/* Icon mapping is keyed on position from the ENDS of the list, so it
   survives the Therapist step being shown (5 steps) or hidden (4 steps):
   first = pin, second = service list, last = padlock, second-from-last =
   calendar, and the person icon only on a middle step when one exists. */
/* location pin */
.step_info_item:first-child {
  --km-step-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.5-7-11a7 7 0 1 1 14 0c0 5.5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}
/* service list */
.step_info_item:nth-child(2) {
  --km-step-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E");
}
/* therapist (only a non-terminal middle step - absent in the 4-step flow) */
.step_info_item:nth-child(3):not(:nth-last-child(2)):not(:last-child) {
  --km-step-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c1.5-4 4-5.5 7-5.5s5.5 1.5 7 5.5'/%3E%3C/svg%3E");
}
/* calendar */
.step_info_item:nth-last-child(2) {
  --km-step-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 9.5h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
/* padlock */
.step_info_item:last-child {
  --km-step-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='11' width='13' height='9' rx='2'/%3E%3Cpath d='M8.5 11V8a3.5 3.5 0 0 1 7 0v3'/%3E%3C/svg%3E");
}

/* Loading spinner: recolour the SVG petals to brass */
.theme-preloader__svg * { fill: var(--sl-brass) !important; }

/* ---- Buttons + links ----
   Seamless primary action = ink pill, white text. */
.btn:not(.btn--link):not(.btn--txt) {
  background-color: var(--sl-ink) !important;
  border-color: var(--sl-ink) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}
.btn:not(.btn--link):not(.btn--txt):hover {
  background-color: var(--sl-ink-hover) !important;
  border-color: var(--sl-ink-hover) !important;
}
a,
.btn--link,
.item__read-more { color: var(--sl-brass) !important; }

/* ---- Cards (service / provider items) ---- */
.service-item,
.provider-item,
.item {
  background-color: var(--sl-card) !important;
  border: 1px solid var(--sl-line) !important;
  border-radius: var(--sl-radius) !important;
  box-shadow: none !important;
  overflow: hidden;
}
.item__picture img { border-radius: 0 !important; }

/* Prices in the display serif, brass */
.price,
.badge.price {
  font-family: var(--sl-serif) !important;
  font-weight: 600 !important;
  color: var(--sl-brass) !important;
  background: transparent !important;
}

/* Portraits: soft rounded square - no arch (it cropped real headshots
   badly at avatar sizes). Service-card photos stay flush: the card's own
   20px corners clip them (the --user class appears on BOTH, so scope by
   card type). */
.service-item .item__picture img { border-radius: 0 !important; }
.provider-item .item__picture--user img,
.user-img,
.photo img,
img.photo {
  border-radius: 14px !important;
  background: var(--sl-panel-deep) !important;
}

/* ---- Calendar ---- */
.calendar { background: var(--sl-card) !important; border-radius: var(--sl-radius) !important; }
.sb-cell { color: var(--sl-ink-soft) !important; border-radius: 10px !important; }
.sb-cell.day-on,
.sb-available-date { color: var(--sl-ink) !important; font-weight: 700 !important; }
/* Selection lives on div.date.selected (the a inside is transparent) */
.date.selected,
.sb-cell.selected,
.sb-cell.active {
  background-color: var(--sl-ink) !important;
  border-radius: 10px !important;
}
.date.selected a,
.date.selected .sb-cell { color: #FFFFFF !important; }
.sb-cell.today:not(.selected) { box-shadow: inset 0 0 0 1.5px var(--sl-brass) !important; }
/* Month prev/next are bare <button>s inside the calendar header */
.datetime-step button:not(.btn),
.top-date-select button {
  border-color: var(--sl-brass) !important;
  color: var(--sl-brass) !important;
  background: transparent !important;
  border-radius: 999px !important;
}
.weeks-name { color: var(--sl-ink-soft) !important; }
/* Month heading ("August 2026") + section captions ("Available start times")
   are bare divs, not .title elements */
.datetime-step .header .txt-center,
.container-caption {
  font-family: var(--sl-serif) !important;
  color: var(--sl-ink) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}

/* ---- Time slots ----
   The pill background sits on the a.sb-cell INSIDE div.slot. */
.slot .sb-cell,
.slot a {
  background-color: var(--sl-card) !important;
  border: 1px solid var(--sl-line) !important;
  color: var(--sl-ink) !important;
  border-radius: 999px !important;
}
.slot a:hover { border-color: var(--sl-ink) !important; }
.slot .sb-cell.selected,
.slot .sb-cell.active,
.slot.selected .sb-cell {
  background-color: var(--sl-ink) !important;
  border-color: var(--sl-ink) !important;
  color: #FFFFFF !important;
}
/* The "– Available" colour-key legend explained the stock calendar's
   coloured dates; ours marks availability in bold ink, so hide it. */
.time-legend { display: none !important; }

/* ---- Details step: sign-in vs sign-up as two separate cards ----
   Stock theme renders both columns inside one white panel, which on
   mobile stacks into what reads as a single long form. Instead: the
   panel goes transparent (scoped via :has so other steps keep their
   backgrounds; older browsers without :has simply keep the one-panel
   look) and each column's content becomes its own card. */
.section:has(.detail-step) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.detail-step__item { padding: 10px !important; }
.detail-step__item-content {
  background: var(--sl-card) !important;
  border: 1px solid var(--sl-line) !important;
  border-radius: var(--sl-radius) !important;
  padding: 26px 22px !important;
  /* paper and card are near-identical tones - the soft v2-style shadow
     is what actually separates the two forms */
  box-shadow: 0 8px 22px rgba(20, 20, 18, 0.07) !important;
}
/* On phones the stock gutters (section padding + column padding) stack
   with the card padding and squeeze the fields - collapse the outer two
   so the cards get nearly the full viewport. */
@media (max-width: 640px) {
  .section:has(.detail-step) .section-pd {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .detail-step__item { padding: 8px 0 !important; }
  .detail-step__item-content { padding: 24px 18px !important; }
}

/* ---- Forms (details step, promo codes) ---- */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background-color: var(--sl-card) !important;
  border: 1px solid var(--sl-line) !important;
  color: var(--sl-ink) !important;
  border-radius: 12px !important;
}
.form-control:focus,
input:focus,
textarea:focus {
  border-color: var(--sl-brass) !important;
  box-shadow: 0 0 0 3px rgba(169, 130, 76, 0.18) !important;
  outline: none !important;
}
.control-label { color: var(--sl-ink) !important; }
.help-block { color: var(--sl-ink-soft) !important; }

/* ---- Modals + preloader ---- */
.modal-content {
  background-color: var(--sl-card) !important;
  border-radius: var(--sl-radius) !important;
  color: var(--sl-ink) !important;
}
.theme-preloader,
.theme-preloader__body { background-color: var(--sl-paper) !important; }

/* --- Hide the widget's own "Back" ONLY where it resets to the full
   provider/service list (John, 2026-08-14). On the first (Service) step
   of a provider-predefined booking, the back link's href is exactly
   "#book/" - the route to every therapist on the system, which is
   useless to someone who arrived via a location page or the map. On
   later steps (date/time etc.) the back link carries a deeper route
   (e.g. "#book/location/33/count/1/") and stays visible, still stepping
   back within the flow. Verified against the live widget DOM. --- */
a.btn--link[href="#book/"] { display: none !important; }
.header__menu-container { background: var(--sl-paper) !important; }
.header__navigation-link {
  color: var(--sl-ink) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
}
.header__navigation-link:hover { color: var(--sl-brass) !important; }
.header__menu-trigger,
.header__menu-trigger .fa { color: var(--sl-ink) !important; background: transparent !important; }

/* Account (avatar) button + its dropdown */
.btn--open-client-info {
  background: var(--sl-panel-deep) !important;
  border-radius: 999px !important;
  border: none !important;
}
.btn--open-client-info .item-container__icon { color: var(--sl-ink) !important; }
.full-info {
  background: var(--sl-card) !important;
  border: 1px solid var(--sl-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(20, 20, 18, 0.14) !important;
}
.is-logged__header .cap {
  color: var(--sl-ink-soft) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.is-logged__client-name {
  font-family: var(--sl-serif) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  color: var(--sl-ink) !important;
}
.bar-with-btn { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }

/* ---- Tabs (Upcoming / All bookings; reused on invoices) ----
   Stock underlined text links become a pill segmented control. */
.booking-result-tabs {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.booking-result-tabs .tabs-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px 0 4px !important;
  border-bottom: none !important;
}
.booking-result-tabs .tab-link { border: none !important; background: transparent !important; }
.booking-result-tabs .tab-link a {
  display: inline-block !important;
  padding: 9px 18px !important;
  border: 1.5px solid var(--sl-line) !important;
  border-radius: 999px !important;
  background: var(--sl-card) !important;
  color: var(--sl-ink-soft) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  text-transform: capitalize !important;
}
.booking-result-tabs .tab-link a:hover { border-color: var(--sl-brass) !important; }
.booking-result-tabs .tab-link.active a {
  background: var(--sl-ink) !important;
  border-color: var(--sl-ink) !important;
  color: #FFFFFF !important;
}

/* ---- Bookings list ---- */
/* "Back to services" resets to the full provider list, which is the
   route we deliberately keep people off (they choose on the map or
   rebook from a card), so it goes on the bookings page. */
.page--my_bookings #sb_back_to_bookings { display: none !important; }

/* One booking per row (John, 2026-08-18): the stock theme flows the
   cards into a 2-up flex grid, which muddles the reading order. A
   single centred column keeps appointments in strict date order. The
   tab row is capped to the same width so everything lines up. */
#sb_bookings_list > div {
  display: block !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}
#sb_bookings_list .booking-item {
  width: 100% !important;
  max-width: none !important;
}
.page--my_bookings .booking-result-tabs .tabs-container {
  max-width: 760px !important;
  margin: 0 auto !important;
}

.booking-item { margin-bottom: 18px !important; }
.booking-item .title--h3 {
  font-size: 21px !important;
  margin-bottom: 10px !important;
}

/* ---- Single-list bookings (John, 2026-08-18) ----
   The Upcoming tab is hidden: the All list is date-descending, so
   upcoming bookings naturally sit on top, and they get their own
   unmissable treatment below. The "All bookings" pill stays visible -
   the widget's own menu items still deep-link to the upcoming view,
   and the remaining pill is the way back from it. */
.page--my_bookings .booking-result-tabs .tab-link:has(a[href="#client/bookings/type/upcoming"]) {
  display: none !important;
}
/* Upcoming bookings jump the queue: the raw list is date-descending,
   so a cancelled future booking can sit ABOVE a sooner genuine one
   (John spotted this, 2026-08-18). The list wrapper holds the cards
   as direct children, so flex order lifts every card that carries a
   Cancel or Reschedule button to the top; everything else keeps its
   date order. Same marker dependency as the ribbon below. */
#sb_bookings_list > div {
  display: flex !important;
  flex-direction: column !important;
}
.page--my_bookings .booking-item:has(.sb_cancel_btn),
.page--my_bookings .booking-item:has(.sb-reschedule) {
  order: -1 !important;
}
/* Upcoming = a card with a Cancel or Reschedule button, which only
   future bookings carry (verified against a live upcoming booking,
   2026-08-18). "Add to calendar" is NOT usable as a marker - it stays
   on every past confirmed booking too (checked back to Feb 2025).
   The 24h cancellation window does NOT remove the buttons: verified
   on a fresh page load with a booking inside its window (2026-08-18,
   14:33, booking at next-day 14:30) - Cancel and Reschedule were
   still rendered. So the ribbon and the order:-1 lift hold right up
   to the appointment; the buttons only disappear once it is past. */
.page--my_bookings .booking-item:has(.sb_cancel_btn),
.page--my_bookings .booking-item:has(.sb-reschedule) {
  border: 2px solid var(--sl-brass) !important;
  box-shadow: 0 12px 30px rgba(169, 130, 76, 0.18) !important;
}
.page--my_bookings .booking-item:has(.sb_cancel_btn)::before,
.page--my_bookings .booking-item:has(.sb-reschedule)::before {
  content: 'Upcoming appointment';
  display: block;
  background: var(--sl-brass);
  color: #FFFFFF;
  font-family: var(--sl-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 22px;
  /* Full-bleed: the card has 10px side padding, so pull the ribbon
     out to the edges. The card's overflow:hidden + 20px radius clips
     the ribbon's top corners round, so no radius needed here. */
  margin: 0 -10px 14px;
}
.booking-info--item td { padding: 3px 0 !important; font-size: 14px !important; }
.booking-info--item .label .ico { color: var(--sl-brass) !important; }
.booking-info--item_date-start .info { font-weight: 700 !important; }
/* Admin rows (booking code, sales order) matter far less than when /
   who / where: keep them, small and quiet. */
tr.booking-info--item_code td,
tr.booking-info--item_invoice td {
  font-size: 12px !important;
  color: var(--sl-ink-soft) !important;
}
tr.booking-info--item_code .label .ico,
tr.booking-info--item_invoice .label .ico { color: var(--sl-ink-soft) !important; }
/* Status: the coloured status text is the state indicator. (A green
   edge stripe on confirmed cards was tried and dropped - it clashed
   with the brass upcoming treatment. John, 2026-08-18.) */
.booking-item tr.booking-info--item_status .info { font-weight: 700 !important; }
.booking-item.booking-confirmed tr.booking-info--item_status .info { color: var(--sl-green) !important; }
.booking-item.booking-cancelled tr.booking-info--item_status .info,
.booking-item.booking-error tr.booking-info--item_status .info { color: #B3564C !important; }
.booking-item.booking-cancelled { background: var(--sl-panel) !important; }
.booking-item.booking-cancelled .booking-info { opacity: 0.75; }
/* Accordion links ("Intake form fields", "Items") read as small
   utility links, not serif headings */
.booking-item .accordion a.title {
  font-family: var(--sl-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--sl-brass) !important;
  letter-spacing: 0 !important;
}
.booking-btns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
}
/* The label inside portal buttons is a span.txt, which the base skin
   paints ink-soft for body copy: force it back to the button colour. */
.btn:not(.btn--link):not(.btn--txt) .txt { color: inherit !important; }
/* Add-to-calendar provider buttons: quiet outline, not ink pills */
.btn.calendar-popup__btn:not(.btn--link):not(.btn--txt) {
  background: var(--sl-card) !important;
  border: 1px solid var(--sl-line) !important;
  color: var(--sl-ink) !important;
}
/* Destructive actions (Log out, cancel dialogs) everywhere:
   red outline pill, fills on hover */
.btn.btn-danger:not(.btn--link):not(.btn--txt) {
  background: transparent !important;
  border: 1.5px solid #B3564C !important;
  color: #B3564C !important;
}
.btn.btn-danger:not(.btn--link):not(.btn--txt):hover {
  background: #B3564C !important;
  color: #FFFFFF !important;
}

/* Empty-state notice ("your upcoming booking list is empty...") */
.alert.alert-info {
  background: var(--sl-card) !important;
  border: 1px solid var(--sl-line) !important;
  border-left: 4px solid var(--sl-brass) !important;
  border-radius: 14px !important;
  color: var(--sl-ink) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  padding: 18px 20px !important;
  text-align: left !important;
}

/* ---- Client profile + edit popups ---- */
.modal-header { border-bottom: 1px solid var(--sl-line) !important; }
.modal-header .modal-title {
  font-family: var(--sl-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}
#client-profile-preview .overview .label,
#client-profile-preview .overview .label b {
  color: var(--sl-ink-soft) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
#client-profile-preview .overview .txt { color: var(--sl-ink) !important; font-size: 15px !important; }
#client-profile-preview .avatar img,
#sb_profile_form .avatar img {
  border-radius: 14px !important;
  background: var(--sl-panel-deep) !important;
}

/* ---- Sign-in / sign-up (page--client_login) ----
   The two-card layout is inherited from the base skin's detail-step
   rules; these are the portal-only touches. */
.page--client_login .title--h2 { text-align: center !important; }
.password-toggler { color: var(--sl-ink-soft) !important; }
.custom-checkbox input { accent-color: var(--sl-brass); }
.remember-me__small-text { color: var(--sl-ink-soft) !important; }
/* "Remember me" was a tiny easy-to-miss row (John, 2026-08-18) - now a
   full-width highlighted tap target. IMPORTANT (2026-08-18 fix): the
   pill goes on .form-group.remember-me, the PARENT row that holds both
   the box and the text. Never style .custom-checkbox itself - it is
   only the 22px box, with an invisible absolutely-positioned input
   overlaying it that does the real toggling; padding it moves the
   drawn box away from the input and clicks stop working (the v1 bug).
   True default-ticking needs JS inside SimplyBook's iframe, which
   their platform only allows via the GTM custom feature (parked - see
   reference/gtm-remember-me-tag.html). */
#sb_sign_in_form .form-group.remember-me {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  background: var(--sl-panel) !important;
  border: 1.5px solid var(--sl-line) !important;
  border-radius: 12px !important;
  padding: 13px 14px !important;
  margin: 8px 0 6px !important;
  transition: border-color 0.15s ease;
}
#sb_sign_in_form .form-group.remember-me:hover { border-color: var(--sl-brass) !important; }
#sb_sign_in_form .form-group.remember-me .custom-checkbox { flex: none !important; }
#sb_sign_in_form .form-group.remember-me .control-label {
  font-weight: 700 !important;
  color: var(--sl-ink) !important;
  margin: 0 !important;
}
/* Ticked state in brand brass (stock inherits the theme palette) */
#sb_sign_in_form .custom-checkbox input:checked + .custom-label {
  background-color: var(--sl-brass) !important;
  border-color: var(--sl-brass) !important;
}

/* ---- Account avatar (widget header, logged in and out) ----
   The stock grey Font Awesome person on a beige circle read as a
   broken/empty avatar (John, 2026-08-18). Replaced with the brand's
   thin-line person mark in brass - same icon family as the booking
   steps and the site nav Log in button. The fa glyph is hidden and
   the icon redrawn as a CSS mask, so this needs no image hosting. */
.btn--open-client-info .item-container__icon--avatar::before { content: none !important; }
.btn--open-client-info .item-container__icon--avatar {
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  background-color: var(--sl-brass) !important;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c1.5-4 4-5.5 7-5.5s5.5 1.5 7 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c1.5-4 4-5.5 7-5.5s5.5 1.5 7 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Invoices (page--my_invoices) ---- */
.wrap-invoice-list-part .table-responsive {
  background: var(--sl-card) !important;
  border: 1px solid var(--sl-line) !important;
  border-radius: var(--sl-radius) !important;
  padding: 8px 16px !important;
}
.invoice-table th {
  font-family: var(--sl-sans) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--sl-ink-soft) !important;
  border-bottom: 1px solid var(--sl-line) !important;
}
.invoice-table td {
  font-size: 14px !important;
  color: var(--sl-ink) !important;
  border-color: var(--sl-line) !important;
}
td.invoice-status { font-weight: 700 !important; }
td.invoice-status[class*="cancel"],
td.invoice-status[class*="deleted"],
td.invoice-status[class*="overdue"] { color: #B3564C !important; }
td.invoice-status[class*="paid"],
td.invoice-status[class*="approved"] { color: var(--sl-green) !important; }
.pagination-wrapper {
  display: flex !important;
  gap: 6px !important;
  justify-content: center !important;
  padding: 14px 0 !important;
}
.pagination-link {
  min-width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--sl-line) !important;
  border-radius: 999px !important;
  color: var(--sl-ink) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.pagination-link.current {
  background: var(--sl-ink) !important;
  border-color: var(--sl-ink) !important;
  color: #FFFFFF !important;
}

/* ---- Packages (page--my_packages) ----
   .package-item carries .item so the base card rules apply; nothing
   extra needed yet. */


/* ============================================================
   JOHN'S PLATFORM TWEAKS (rebranded 2026-08-18)
   Carried over from the previous hosted CSS: every hide kept,
   layout fixes kept, old colours (#a2daeb, #4879B2, Lexend)
   replaced by the Seamless tokens. ============================ */

/* ---- Hidden things stay hidden ---- */
#main-buttons { display: none !important; }
#sb_booking_company_time { display: none !important; }
#sb_sign_out_btn { display: none !important; }
#sb_client_login_container h3.title.title--h3 { display: none !important; }
tr.booking-info--item_location .label,
tr.booking-info--item_location .info { display: none !important; }
tr.booking-info--item_points { display: none !important; }
.current-booking-info .accordion { display: none !important; }
.info-bar--item.item__bonus.service-bonus { display: none !important; }
.item__read-more { display: none !important; }
.invoice-pay-page .promo-code-input .title--h3 { display: none !important; }
.invoice-pay-page .promo-code-input .promo-code-input--label { display: none !important; }
.invoice-payment-systems-info.payment-modal.v2 { display: none !important; }
.invoice-pay-page .right-block--header { display: none !important; }
.invoice-pay-page .invoice-info { display: none !important; }
/* Tax column in the order table */
.invoice-pay-page .invoice-table thead th:nth-child(3),
.invoice-pay-page .invoice-table tbody td:nth-child(3) { display: none !important; }

/* ---- Headings on the details step ---- */
.wrapper-details .title--h2 {
  font-size: 24px !important;
  line-height: 1.25 !important;
  margin-bottom: 12px !important;
}
.wrapper-details .title.title--h3 {
  font-size: 17px !important;
  line-height: 1.3 !important;
  margin-bottom: 10px !important;
}
@media (max-width: 480px) {
  .wrapper-details .title--h2 {
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
    padding: 0 12px !important;
  }
}

/* ---- Mobile: returning / new client boxes as cards ---- */
@media (max-width: 480px) {
  .detail-step__item.right-side {
    background: var(--sl-card) !important;
    border: 1px solid var(--sl-line) !important;
    border-radius: 14px !important;
    padding: 16px 16px 10px 16px !important;
    margin-bottom: 6px !important;
  }
  .detail-step__item.left-side {
    background: var(--sl-card) !important;
    border: 1px solid var(--sl-line) !important;
    border-radius: 14px !important;
    padding: 10px 16px 16px 16px !important;
    margin-top: 0 !important;
  }
  .detail-step__item h3,
  .detail-step__item p,
  .detail-step__item label {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .detail-step--no-login {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .btn--link.remind-pass {
    font-size: 14px !important;
    color: var(--sl-ink-soft) !important;
    font-weight: 400 !important;
    text-decoration: underline !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
  }
}

/* ---- Primary action buttons: ink pills ----
   (Was mobile-only in the old CSS; on desktop the theme painted
   these blue at ID strength, so now branded at every size -
   spotted on the desktop sign-in page 2026-08-18.) */
#sb_sign_in_btn.btn--sign-in.custom,
#sb_sign_up_btn.btn--sign-up.custom,
#sb_client_login_container #sb_sign_in_btn,
#sb_client_login_container #sb_sign_up_btn {
  background: var(--sl-ink) !important;
  border-color: var(--sl-ink) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 12px 26px !important;
}
@media (max-width: 480px) {
  #sb_sign_in_btn.btn--sign-in.custom,
  #sb_sign_up_btn.btn--sign-up.custom {
    width: 100% !important;
    font-size: 17px !important;
    padding: 14px !important;
    margin-top: 12px !important;
    margin-bottom: 2px !important;
  }
}
#sb_book_btn.btn,
.invoice-pay-page #sb_pay_btn.btn {
  width: 100% !important;
  background: var(--sl-ink) !important;
  border-color: var(--sl-ink) !important;
  color: #FFFFFF !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 14px !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

/* ---- Compact forms ---- */
.custom-form input[type="text"],
.custom-form input[type="number"],
.custom-form input[type="email"],
.custom-form input[type="tel"],
.custom-form textarea,
.custom-form select { padding: 8px 10px !important; }
.custom-form .form-group { margin-bottom: 18px !important; }
input::placeholder {
  font-family: var(--sl-sans) !important;
  font-size: 13px !important;
  color: var(--sl-ink-soft) !important;
}

/* ---- Service card images ---- */
@media (min-width: 768px) {
  .item__picture--user img,
  .item__picture--fit-mode img {
    max-height: 200px !important;
    object-fit: cover !important;
    width: 100% !important;
  }
}
@media (max-width: 767px) {
  .item__picture--user img,
  .item__picture--fit-mode img {
    max-height: 150px !important;
    object-fit: cover !important;
    width: 100% !important;
  }
}
/* Lift the face upward in therapist photo crops */
.item__picture--user img {
  object-fit: cover !important;
  object-position: center 30% !important;
}

/* ---- Compact service card content ---- */
.item__description,
.item__description.short {
  height: auto !important;
  margin-bottom: 0 !important;
}
.item_info-bar,
.item_info-bar.bar-service {
  margin-top: 2px !important;
  padding-top: 0 !important;
}
article.item__content { padding-bottom: 0 !important; }

/* ---- Promo code block (payment page) ---- */
.invoice-pay-page .promo-code-input {
  padding-top: 0 !important;
  margin-top: -4px !important;
  margin-bottom: 8px !important;
}
.invoice-pay-page .promo-code-input::before {
  content: "Promo code (optional)";
  display: block;
  font-family: var(--sl-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--sl-ink-soft);
  margin-bottom: 4px;
}
.invoice-pay-page .promo-code-input .form-group {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}
.invoice-pay-page .promo-code-input input[type="text"],
.invoice-pay-page .promo-code-input input[type="search"] {
  font-size: 13px !important;
  padding: 6px 8px !important;
}
.invoice-pay-page .promo-code-input .btn {
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
}
@media (min-width: 768px) {
  .invoice-pay-page .promo-code-input { max-width: 420px !important; }
  .invoice-pay-page .promo-code-input .form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .invoice-pay-page .promo-code-input input[type="text"],
  .invoice-pay-page .promo-code-input input[type="search"],
  .invoice-pay-page .promo-code-input .btn {
    width: 100% !important;
    max-width: 420px !important;
  }
}
/* Tighter gap between payment section and order summary */
.invoice-pay:not(.payment-received) .invoice-pay-page--select-pm .invoice-pay-page-grid {
  gap: 6px 0 !important;
}

/* ---- Order table header ---- */
.invoice-pay-page table.invoice-table thead th {
  background-color: var(--sl-panel) !important;
  color: var(--sl-ink) !important;
  font-weight: 700 !important;
}

/* ---- Mobile header height (logo untouched) ---- */
@media (max-width: 600px) {
  #sb_header, .sb-header, header {
    height: 80px !important;
    min-height: 0 !important;
    padding: 6px 10px !important;
  }
}

/* ---- Accordion headers ---- */
.accordion-header { background-color: var(--sl-panel-deep) !important; }

/* ---- Theme-colour overrides (hosted only, 2026-08-18) ----
   The hosted theme paints its admin-configured base colour (still
   the old #a2daeb blue) via ID-strength selectors that outrank the
   class rules above: the #menu-active-bg slider in the steps bar,
   the #steps-nav background, and the card Select buttons. Overridden
   here at matching strength. ROOT FIX available too: change the
   theme base colour in SimplyBook admin Design settings to the
   brand values and these become belt-and-braces. */
#menu-active-bg { display: none !important; }
#steps-nav.steps-nav { background: var(--sl-ink) !important; }
#steps-nav .step_info_item,
#steps-nav .step_info_item.active { background: var(--sl-ink) !important; }
#sb_main a.btn.select,
a.btn.select,
#sb-timeline #steps #steps-content #sb_booking_content a.btn.select,
#sb_main #sb_booking_content .item__footer a.btn.select {
  background: var(--sl-ink) !important;
  border-color: var(--sl-ink) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}
#sb_main a.btn.select:hover,
a.btn.select:hover,
#sb_main #sb_booking_content .item__footer a.btn.select:hover {
  background: var(--sl-ink-hover) !important;
  border-color: var(--sl-ink-hover) !important;
}
/* Step labels + the active-step arrow at the same ID strength the
   theme uses (the class-level rules above lose against it here). */
#steps-nav .step_info_item,
#steps-nav .step_info_item * { color: var(--sl-paper) !important; }
#steps-nav .step_info_item.active,
#steps-nav .step_info_item.active * { color: var(--sl-brass-soft) !important; }
#steps-nav .step_info_item.active::after { display: none !important; }
#steps-nav .step_info_item.active {
  background: var(--sl-ink) !important;
  box-shadow: inset 0 -3px 0 var(--sl-brass-soft) !important;
}