/*
 * LatePoint, dressed in the site's colours and type.
 *
 * LatePoint drives its look from CSS variables set on :root; defining them on
 * .latepoint-w wins because it is closer to the elements. Selectors below are
 * kept shallow so LatePoint updates are less likely to break them.
 */

.latepoint-w {
  --latepoint-brand-primary: #111111;
  --latepoint-body-color: #111111;
  --latepoint-headings-color: #111111;
  --latepoint-color-text-faded: #5e5e5e;
  --latepoint-timeslot-selected-color: #111111;
  --latepoint-calendar-weekday-label-color: #5e5e5e;
  --latepoint-calendar-weekday-label-bg: transparent;
  --latepoint-side-panel-bg: #ffffff;
  --latepoint-summary-panel-bg: #f6f6f6;
  --latepoint-border-radius: 4px;
  --latepoint-border-radius-sm: 2px;
  --latepoint-border-radius-md: 4px;
  --latepoint-border-radius-lg: 4px;

  font-family: var(--font) !important;
  font-size: 1rem;
}

.latepoint-w h1,
.latepoint-w h2,
.latepoint-w h3,
.latepoint-w h4,
.latepoint-w h5,
.latepoint-w h6,
.latepoint-w .os-current-month-label,
.latepoint-w .os-day-number {
  font-family: var(--font) !important;
  letter-spacing: -0.01em;
}

/* The form sits on a card, like the tee sheet on the home page. */
.latepoint-w .latepoint-booking-form-element {
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 40px -24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.latepoint-w .latepoint-form-w {
  background: var(--card);
}

.latepoint-w .latepoint-heading-w {
  border-bottom-color: var(--line) !important;
}

.latepoint-w .latepoint-heading-w .os-heading-text {
  font-weight: 700;
}

/* Buttons: the site's squared button shape. */
.latepoint-w .latepoint-btn {
  border-radius: var(--radius-pill) !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.latepoint-w .latepoint-btn-primary:hover {
  background-color: var(--accent-hover) !important;
}

/* Lesson list. */
.latepoint-w .os-items .os-item .os-item-i {
  border-color: var(--line) !important;
  background: var(--card);
}

.latepoint-w .os-items .os-item .os-item-i:hover,
.latepoint-w .os-items .os-item.selected .os-item-i {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent) !important;
}

.latepoint-w .os-item-name {
  font-weight: 700 !important;
}

/* Calendar: open days marked in light grey rather than coloured bars. */
.latepoint-w .os-day .os-day-status {
  background: rgba(17, 17, 17, 0.12) !important;
}

.latepoint-w .os-day .os-day-status .day-available {
  background: var(--accent) !important;
}

.latepoint-w .os-day.selected .os-day-box,
.latepoint-w .os-day.selected .os-day-box:hover {
  background: var(--accent) !important;
  color: var(--card) !important;
}

.latepoint-w .os-day.os-today .os-day-box {
  background: var(--paper) !important;
}

/* Times: the same chips as the home page tee sheet. */
.latepoint-w .dp-timeslot {
  border-radius: var(--radius-sm) !important;
  background: var(--paper) !important;
  color: var(--accent) !important;
  font-variant-numeric: tabular-nums;
  box-shadow: none !important;
}

.latepoint-w .dp-timeslot:hover,
.latepoint-w .dp-timeslot.selected {
  background: var(--accent) !important;
  color: var(--card) !important;
}

.latepoint-w .dp-timeslot.is-booked,
.latepoint-w .dp-timeslot.is-off {
  opacity: 0.35;
}

/* Fields. */
.latepoint-w .os-form-group .os-form-control {
  font-family: var(--font) !important;
}

.latepoint-w .os-form-group.os-form-textfield-group .os-form-control:focus {
  border-color: var(--accent) !important;
}

/* Sit at the start of the column, not centred in it. */
.booking__form .latepoint-booking-form-element {
  margin-left: 0 !important;
}

/* Secondary text in the site's muted green, not LatePoint's blue-grey. */
.latepoint-w .os-item-desc,
.latepoint-w .os-item-i .os-item-desc,
.latepoint-w .pbh-label {
  color: var(--ink-soft) !important;
}

/* Today: a quiet outline instead of a yellow fill. */
.latepoint-w .os-day.os-today .os-day-number {
  background: transparent !important;
  color: inherit !important;
  box-shadow: inset 0 -2px 0 var(--mist);
}

/* ---------------------------------- fields (booking form and My lessons) */
.latepoint-w .os-form-group label,
.latepoint-w .os-form-group .os-form-label {
  color: var(--ink-soft) !important;
  font-family: var(--font) !important;
}

.latepoint-w .os-form-group.os-form-textfield-group,
.latepoint-w .os-form-group.os-form-phonefield-group,
.latepoint-w .os-form-group .os-form-control {
  border-color: var(--line) !important;
}

/* The phone input sits inside a bordered group; a white fill of its own
   covered the group's label. */
.latepoint-w .os-form-group.os-form-phonefield-group .os-form-control,
.latepoint-w .os-form-group.os-form-phonefield-group input.os-form-control {
  background: transparent !important;
}

/* ---------------------------------- My lessons */
.account {
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem) var(--section);
}

/* Only the signed-in dashboard (it has tabs); the sign-in card keeps its own layout. */
.account .latepoint-w:has(> .latepoint-tabs-w) {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 1rem;
  max-width: 56rem;
}

/* "Welcome …" then "Log out" on one line. */
.account .latepoint-w:has(> .latepoint-tabs-w) > h4 {
  grid-row: 1;
  grid-column: 1;
  margin: 0 0 1.5rem;
  font-size: var(--step-1);
  font-weight: 700;
}

.account .latepoint-w:has(> .latepoint-tabs-w) > a:first-child {
  grid-row: 1;
  grid-column: 2;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
}

.account .latepoint-w:has(> .latepoint-tabs-w) > :not(h4):not(a:first-child) {
  grid-column: 1 / -1;
}

.latepoint-w .latepoint-tab-triggers {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line) !important;
  overflow-x: auto;
}

.latepoint-w .latepoint-tab-triggers .latepoint-tab-trigger {
  padding: 0.75rem 1rem !important;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--ink-soft) !important;
  text-decoration: none;
  white-space: nowrap;
}

.latepoint-w .latepoint-tab-triggers .latepoint-tab-trigger:hover {
  color: var(--ink) !important;
}

.latepoint-w .latepoint-tab-triggers .latepoint-tab-trigger.active {
  border-bottom-color: var(--accent);
  color: var(--accent) !important;
}

.latepoint-w .latepoint-section-heading-w {
  border-bottom-color: var(--line) !important;
}

.latepoint-w .latepoint-section-heading {
  font-size: var(--step-1) !important;
  font-weight: 700 !important;
}

.account .latepoint-login-form-w,
.account .latepoint-w:not(:has(> .latepoint-tabs-w)) {
  width: min(100%, 26rem);
  margin-inline: auto;
}

.latepoint-w input.os-form-control,
.latepoint-w textarea.os-form-control,
.latepoint-w select.os-form-control {
  border-color: var(--line) !important;
}

.latepoint-w input.os-form-control:focus,
.latepoint-w textarea.os-form-control:focus {
  border-color: var(--accent) !important;
}