/* Appointments on the platform: the client's booking page and the practitioner's hours and sessions. Theme tokens with fallbacks. */

/* Client: Book a session */
.ehz-booking__head { display: flex; gap: 1.25rem; align-items: flex-start; }
.ehz-booking img.ehz-booking__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; background: var(--ehz-mist, #e4efec); }
.ehz-booking__head-body { min-width: 0; flex: 1; }
.ehz-booking .ehz-booking__facts { margin: .25rem 0 .75rem; color: var(--ehz-muted, #4e6a66); }
.ehz-booking__zone { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0; font-size: var(--ehz-size-small, .875rem); }
.ehz-booking__zone label { font-weight: 600; }
.ehz-booking__zone select { max-width: 100%; padding: .4rem .6rem; border-radius: 10px; border: 1.5px solid var(--ehz-line-strong, rgba(0,0,0,.25)); background: var(--ehz-shell, #fff); font: inherit; color: inherit; }
.ehz-booking__zone [data-ehz-zone-submit] { display: none; }
.ehz-booking--nojs .ehz-booking__zone [data-ehz-zone-submit] { display: inline; }

.ehz-booking__form { display: grid; gap: 1rem; }
.ehz-booking .ehz-booking__lede { margin: 0; }
.ehz-booking__day { padding: 1rem 1.25rem; border: 1px solid var(--ehz-line, rgba(0,0,0,.12)); border-radius: var(--ehz-radius-card, 22px 22px 22px 6px); background: var(--ehz-shell, #fffcf7); }
.ehz-booking .ehz-booking__date { margin: 0 0 .75rem; font-size: 1.05rem; }
.ehz-booking__slots { display: flex; flex-wrap: wrap; gap: .5rem; }
.ehz-booking__slot {
	padding: .55rem .95rem; border-radius: 999px; border: 1.5px solid var(--ehz-sea, #1f6f6b);
	background: transparent; color: var(--ehz-sea-strong, #134b48); font: inherit; font-weight: 600; cursor: pointer;
	font-variant-numeric: tabular-nums;
}
.ehz-booking__slot:hover, .ehz-booking__slot:focus-visible { background: var(--ehz-sea, #1f6f6b); color: var(--ehz-on-accent, #fff); outline: none; }

.ehz-booking__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ehz-booking__item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1rem; padding: .6rem 0; border-top: 1px solid var(--ehz-line, rgba(0,0,0,.12)); }
.ehz-booking__item:first-child { border-top: 0; padding-top: 0; }
.ehz-booking__when { font-weight: 600; }
.ehz-booking__item-actions { display: flex; gap: 1rem; }
.ehz-booking__item-actions a { font-weight: 600; }

/* My practitioner: next sessions */
.ehz-account__sessions { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .5rem; }
.ehz-account__session { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 1rem; padding: .6rem 0; border-top: 1px solid var(--ehz-line, rgba(0,0,0,.12)); }
.ehz-account__session:first-child { border-top: 0; padding-top: 0; }
.ehz-account__session-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.ehz-account__session-actions form { margin: 0; display: inline; }
.ehz-account__session-actions .ehz-portal__textbtn { padding: 0; }

/* Practitioner: hours (the simple form) */
.ehz-hours__select, .ehz-hours input[type="url"] { display: block; width: 100%; padding: .75rem .9rem; margin: 0 0 .4rem; border-radius: 12px; border: 1.5px solid var(--ehz-line-strong, rgba(0,0,0,.25)); background: var(--ehz-shell, #fff); font: inherit; color: inherit; }
.ehz-hours .ehz-portal__hint { margin: 0 0 .9rem; }
.ehz-hours label { margin-top: .25rem; }
.ehz-hours .ehz-hours__heading { margin: 1.6rem 0 .35rem; font-size: 1.05rem; }
.ehz-hours .ehz-hours__heading:first-of-type { margin-top: .25rem; }
.ehz-hours input[type="time"], .ehz-hours input[type="date"] { padding: .55rem .6rem; border-radius: 10px; border: 1.5px solid var(--ehz-line-strong, rgba(0,0,0,.25)); background: var(--ehz-shell, #fff); font: inherit; color: inherit; margin: 0; min-height: 44px; }
.ehz-hours .ehz-btn[type="submit"] { margin-top: 1.25rem; }

/* platform or own tool */
.ehz-mode { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.ehz-mode legend { padding: 0; }
.ehz-hours .ehz-mode__card { position: relative; display: flex; gap: .75rem; align-items: flex-start; margin: 0; padding: .85rem 1rem; border: 1.5px solid var(--ehz-line-strong, rgba(0,0,0,.25)); border-radius: 14px; background: var(--ehz-shell, #fff); cursor: pointer; }
.ehz-mode__card input { margin: .25rem 0 0; flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--ehz-sea, #1f6f6b); }
.ehz-mode__card:has(input:checked) { border-color: var(--ehz-sea, #1f6f6b); box-shadow: inset 0 0 0 1px var(--ehz-sea, #1f6f6b); background: var(--ehz-mist, #e4efec); }
.ehz-mode__card:has(input:focus-visible) { outline: 2px solid var(--ehz-sea, #1f6f6b); outline-offset: 2px; }
.ehz-mode__body { display: grid; gap: .15rem; }
.ehz-mode__body > span { font-size: var(--ehz-size-small, .9rem); color: var(--ehz-muted, #4e6a66); }
.ehz-mode__panel[hidden] { display: none; }

/* chips: presets and small actions */
.ehz-chip {
	min-height: 44px; padding: .45rem 1rem; border-radius: 999px; border: 1.5px solid var(--ehz-line-strong, rgba(0,0,0,.25));
	background: var(--ehz-shell, #fff); color: inherit; font: inherit; font-weight: 600; cursor: pointer;
}
.ehz-chip:hover, .ehz-chip:focus-visible { border-color: var(--ehz-sea, #1f6f6b); color: var(--ehz-sea-strong, #134b48); outline: none; }
.ehz-chip.is-active { background: var(--ehz-sea, #1f6f6b); border-color: var(--ehz-sea, #1f6f6b); color: var(--ehz-on-accent, #fff); }

/* standard hours */
.ehz-std { display: grid; gap: .75rem; }
.ehz-std__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ehz-std__range { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.ehz-std__range label { margin: 0; font-weight: 600; }
.ehz-std__break summary { cursor: pointer; font-weight: 600; color: var(--ehz-sea-strong, #134b48); padding: .35rem 0; min-height: 44px; display: flex; align-items: center; }
.ehz-std__break[open] summary { margin-bottom: .5rem; }

/* weekday pills */
.ehz-days { display: flex; flex-wrap: wrap; gap: .5rem; }
.ehz-days__pill { position: relative; margin: 0; }
.ehz-days__pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ehz-days__pill span {
	display: inline-flex; align-items: center; justify-content: center; min-width: 3.25rem; min-height: 44px; padding: 0 .9rem;
	border-radius: 999px; border: 1.5px solid var(--ehz-line-strong, rgba(0,0,0,.25)); background: var(--ehz-shell, #fff); font-weight: 600; cursor: pointer;
}
.ehz-days__pill input:checked + span { background: var(--ehz-sea, #1f6f6b); border-color: var(--ehz-sea, #1f6f6b); color: var(--ehz-on-accent, #fff); }
.ehz-days__pill input:focus-visible + span { outline: 2px solid var(--ehz-sea, #1f6f6b); outline-offset: 2px; }

/* the tap calendar */
.ehz-cal { margin: 0 0 .5rem; }
.ehz-cal__months { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.25rem 1.5rem; }
.ehz-cal__month-name { margin: 0 0 .35rem; font-size: 1rem; text-align: center; }
.ehz-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ehz-cal__dow { font-size: .75rem; font-weight: 600; color: var(--ehz-muted, #4e6a66); text-align: center; padding: .2rem 0; }
.ehz-cal__day {
	position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-height: 40px; padding: 0;
	border-radius: 10px; border: 1.5px solid var(--ehz-line, rgba(0,0,0,.12)); background: var(--ehz-shell, #fff); color: var(--ehz-muted, #4e6a66);
	font: inherit; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ehz-cal__day.is-on { background: var(--ehz-sea, #1f6f6b); border-color: var(--ehz-sea, #1f6f6b); color: var(--ehz-on-accent, #fff); }
.ehz-cal__day.is-changed { box-shadow: inset 0 0 0 2px var(--ehz-sun, #e9b44c); }
.ehz-cal__day--outside { border-color: transparent; background: transparent; cursor: default; }
.ehz-cal__day--past { opacity: .35; cursor: default; }
.ehz-cal__day--today .ehz-cal__num { text-decoration: underline; text-underline-offset: 3px; }
.ehz-cal__day:not(:disabled):hover, .ehz-cal__day:focus-visible { outline: 2px solid var(--ehz-sea-strong, #134b48); outline-offset: 1px; }
.ehz-cal__num { font-size: .95rem; line-height: 1; }
.ehz-cal__booked {
	position: absolute; top: -5px; right: -5px; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px;
	background: var(--ehz-sun, #e9b44c); color: #1d1a14; font-size: .7rem; font-weight: 700; line-height: 1.15rem; text-align: center;
}
.ehz-cal__legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .75rem 0 0; font-size: var(--ehz-size-small, .8rem); color: var(--ehz-muted, #4e6a66); }
.ehz-cal__key::before { content: ''; display: inline-block; width: .85rem; height: .85rem; margin-right: .35rem; vertical-align: -2px; border-radius: 3px; border: 1px solid var(--ehz-line, rgba(0,0,0,.12)); }
.ehz-cal__key--on::before { background: var(--ehz-sea, #1f6f6b); border-color: var(--ehz-sea, #1f6f6b); }
.ehz-cal__key--off::before { background: var(--ehz-shell, #fff); }
.ehz-cal__key--booked::before { background: var(--ehz-sun, #e9b44c); border-radius: 50%; }

/* calendar links */
.ehz-hours__optional { font-weight: 400; color: var(--ehz-muted, #4e6a66); }
.ehz-hours .ehz-hours__status { display: block; font-weight: 600; color: var(--ehz-sea-strong, #134b48); margin-bottom: .35rem; }
.ehz-hours .ehz-hours__status--warn { color: var(--ehz-warn, #a2452d); }
.ehz-feed { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .4rem; }
.ehz-hours .ehz-feed__url { flex: 1 1 16rem; min-width: 0; padding: .6rem .8rem; border-radius: 12px; border: 1.5px solid var(--ehz-line, rgba(0,0,0,.15)); background: var(--ehz-mist, #e4efec); font: inherit; font-size: var(--ehz-size-small, .875rem); color: inherit; margin: 0; }
.ehz-feed a.ehz-chip { text-decoration: none; display: inline-flex; align-items: center; }

/* away ranges */
.ehz-away { display: grid; gap: .5rem; justify-items: start; margin: 0 0 .5rem; }
.ehz-away__row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; }
.ehz-away__dash { color: var(--ehz-muted, #4e6a66); }
.ehz-away__remove { font-size: 1.25rem; line-height: 1; min-width: 44px; min-height: 44px; }

@media (max-width: 640px) {
	.ehz-cal__months { grid-template-columns: 1fr; }
	.ehz-cal__grid { gap: 3px; }
	.ehz-cal__day { border-radius: 8px; }
	.ehz-away__row input[type="date"] { flex: 1 1 8rem; min-width: 0; }
}

/* Practitioner: sessions */
.ehz-appts { display: grid; gap: .25rem; }
.ehz-appts__item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; padding: .85rem 0; border-top: 1px solid var(--ehz-line, rgba(0,0,0,.12)); }
.ehz-appts__item:first-child { border-top: 0; padding-top: 0; }
.ehz-appts__item--soon .ehz-appts__when { color: var(--ehz-sea-strong, #134b48); }
.ehz-appts__main { display: grid; gap: .15rem; min-width: 0; }
.ehz-appts__client { font-weight: 600; }
.ehz-appts__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.ehz-appts__cancel { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.ehz-appts__cancel input[type="text"] { padding: .45rem .6rem; border-radius: 10px; border: 1.5px solid var(--ehz-line, rgba(0,0,0,.15)); font: inherit; font-size: var(--ehz-size-small, .875rem); max-width: 16rem; margin: 0; }
.ehz-appts__status--cancelled { opacity: .7; }
.ehz-appts--past .ehz-appts__item { padding: .5rem 0; }