/** Atanga SkillBridge consultation booking widget. */
.asb-booking-page {
	padding: clamp(44px, 7vw, 82px) 0 clamp(66px, 9vw, 110px);
	background: radial-gradient(52% 50% at 92% 0, rgba(11, 58, 120, .11), transparent 74%), var(--asb-surface);
}

.asb-booking-intro { max-width: 660px; margin: 0 auto 32px; text-align: center; }
.asb-booking-intro .asb-kicker { justify-content: center; }
.asb-booking-intro .asb-h1 { margin-bottom: 12px; }
.asb-booking-intro .asb-sub { max-width: 610px; margin: 0 auto; }
.asb-booking { max-width: 760px; margin: 0 auto; padding: clamp(24px, 4vw, 42px); box-shadow: 0 24px 65px rgba(12, 30, 62, .12); }
.asb-booking [hidden] { display: none !important; }
.asb-booking-error { margin: 18px 0; }
.asb-booking-details > .asb-btn { margin-top: 16px; }

.asb-booking-progress {
	display: flex; align-items: center; gap: 28px; margin: 0 0 30px; padding-bottom: 20px; border-bottom: 1px solid var(--asb-line);
}
.asb-booking-progress span { display: inline-flex; align-items: center; gap: 8px; color: var(--asb-muted); font-size: .88rem; font-weight: 700; }
.asb-booking-progress b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #edf1f6; color: var(--asb-muted); font-size: .78rem; }
.asb-booking-progress .is-active, .asb-booking-progress .is-complete { color: var(--asb-ink); }
.asb-booking-progress .is-active b { background: var(--asb-blue); color: #fff; box-shadow: 0 0 0 5px rgba(0, 22, 63, .12); }
.asb-booking-progress .is-complete b { background: #dff5e6; color: #187337; }

.asb-booking-step-title { display: block; margin: 0 0 8px; font-family: var(--asb-font-display); font-size: clamp(1.38rem, 3vw, 1.75rem); line-height: 1.2; color: var(--asb-ink); }
.asb-booking-step-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.asb-booking-back { appearance: none; border: 0; padding: 5px 0; background: transparent; color: var(--asb-blue); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.asb-booking-back:hover { color: var(--asb-blue-deep); text-decoration: underline; }
.asb-booking-duration { margin: 18px 0 24px; padding: 10px 13px; border-radius: 9px; background: var(--asb-sky); color: var(--asb-blue-deep); font-size: .9rem; }

.asb-booking-calendar { border: 1px solid var(--asb-line); border-radius: 15px; padding: 14px; background: #fff; }
.asb-booking-calendar-head { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; text-align: center; margin-bottom: 14px; color: var(--asb-ink); }
.asb-calendar-nav { width: 34px; height: 34px; justify-self: center; border: 1px solid var(--asb-line); border-radius: 9px; background: #fff; color: var(--asb-blue); font: inherit; font-size: 1.1rem; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.asb-calendar-nav:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--asb-blue); background: var(--asb-sky); }
.asb-calendar-nav:disabled { opacity: .38; cursor: default; }
.asb-calendar-weekdays, .asb-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.asb-calendar-weekdays { margin-bottom: 5px; color: var(--asb-muted); text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.asb-calendar-grid { gap: 4px; }
.asb-calendar-day { aspect-ratio: 1; max-height: 46px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--asb-ink); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.asb-calendar-day:not(:disabled) { width: 34px; height: 34px; justify-self: center; align-self: center; border-color: var(--asb-line); }
.asb-calendar-day:hover:not(:disabled) { border-color: var(--asb-blue); background: var(--asb-sky); color: var(--asb-blue); transform: translateY(-1px); }
.asb-calendar-day.is-selected { border-color: var(--asb-blue); background: var(--asb-blue); color: #fff; box-shadow: 0 4px 10px rgba(0, 22, 63, .25); }
.asb-calendar-day:disabled { color: #c5ccd6; cursor: default; }
.asb-calendar-day.is-muted { opacity: 0; pointer-events: none; }
.asb-calendar-day:focus-visible, .asb-calendar-nav:focus-visible { outline: 2px solid var(--asb-blue); outline-offset: 2px; }

.asb-booking-slots { margin-top: 26px; }
.asb-field-label { display: block; margin-bottom: 10px; font-weight: 700; color: var(--asb-ink); }
.asb-booking-slot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.asb-booking-slot { appearance: none; min-height: 46px; padding: 9px 8px; border: 1px solid var(--asb-line); border-radius: 9px; background: #fff; color: var(--asb-ink); cursor: pointer; font: inherit; font-size: .92rem; font-weight: 700; transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; }
.asb-booking-slot:hover, .asb-booking-slot:focus-visible { border-color: var(--asb-blue); box-shadow: 0 0 0 3px rgba(0, 22, 63, .11); outline: 0; }
.asb-booking-slot.is-selected { border-color: var(--asb-blue); background: var(--asb-blue); color: #fff; }
.asb-booking-empty { grid-column: 1 / -1; margin: 5px 0; color: var(--asb-muted); }
.asb-booking-summary { margin: 24px 0 18px; padding: 14px 16px; border-left: 4px solid var(--asb-blue); border-radius: 8px; background: var(--asb-sky); color: var(--asb-blue-deep); font-weight: 700; }
.asb-booking-summary:empty { display: none; }
.asb-booking-reminder { margin-top: 20px; }
.asb-booking-reminder small { display: block; margin-top: 7px; color: var(--asb-muted); line-height: 1.45; }
.asb-booking-reminder option:disabled { color: #8b95a3; }
.asb-booking [data-booking-submit].is-loading { cursor: wait; opacity: .72; }
.asb-booking [data-booking-submit]:disabled { cursor: not-allowed; opacity: .48; }
.asb-booking-done .asb-alert { align-items: flex-start; margin: 0; }
.asb-booking-done p { margin: 0; }

@media (max-width: 579px) {
	.asb-booking-page { padding-top: 34px; }
	.asb-booking-intro { text-align: left; margin-bottom: 24px; }
	.asb-booking-intro .asb-kicker { justify-content: flex-start; }
	.asb-booking-intro .asb-sub { margin-left: 0; }
	.asb-booking { padding: 22px 17px; }
	.asb-booking-progress { gap: 16px; }
	.asb-booking-progress span { font-size: .78rem; }
	.asb-booking-step-heading { display: block; }
	.asb-booking-back { margin-top: 10px; }
	.asb-booking-calendar { padding: 11px 8px; }
	.asb-calendar-day { font-size: .84rem; border-radius: 8px; }
	.asb-booking-slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}