/* Book a Demo: date + time-slot scheduler ported from tdbin.com/book-a-demo
   (see js/pages/book-demo.js for the scheduling/submit behaviour), in the
   site's dark theme: dark panels with a hairline rim, light text, and the
   orange → lavender → cyan gradient only on the chosen date and time. The
   step-2 contact fields reuse .enquiry-form/.gradient-input from inner.css,
   so only the scheduler needs its own rules. */

.book-demo-page {
	--bd-panel: #0b0c10;
	--bd-panel-2: #101116;
	--bd-rim: rgba(255, 255, 255, .09);
	--bd-rim-strong: rgba(255, 255, 255, .16);
	--bd-ink: #F3F4F6;
	--bd-ink-2: rgba(255, 255, 255, .72);
	--bd-ink-3: rgba(255, 255, 255, .45);
	--bd-grad: linear-gradient(90deg, #FFBA6A, #D8D3FF 55%, #6FE2FF);
	--bd-on-grad: #0A0B0E;
}

.book-demo-page .bookdemo_box {
	margin: 0 auto;
	max-width: 760px;
	/* the featured pricing card's frame (inner.css .price-card.featured): a 1px border in the brand gradient and a
	   soft cyan glow around it */
	border: 1px solid transparent;
	background: linear-gradient(#0b0c10, #0b0c10) padding-box, var(--bd-grad) border-box;
	box-shadow: 0 0 60px -20px rgba(111, 226, 255, .35);
	border-radius: 24px;
	overflow: hidden;
}

.book-demo-page .bookdemo-form {
	padding: 45px;
}

.book-demo-page .section-subtitle {
	max-width: 590px;
	margin: -15px auto 28px;
	text-align: center;
	color: var(--bd-ink-2);
	font-size: 18px;
	line-height: 1.5;
	font-weight: 400;
}

/*====Step 1: date + time-slot picker====*/

.book-demo-page .bdemo-datepicker {
	border: 1px solid var(--bd-rim);
	border-radius: 18px;
	background: var(--bd-panel);
	overflow: hidden;
}

.book-demo-page .date-select {
	padding: 8px 12px;
}

.book-demo-page .time-select {
	padding: 16px;
	background: var(--bd-panel-2);
	border-left: 1px solid var(--bd-rim);
	height: 100%;
}

.book-demo-page .timeslot-txt {
	padding: 7px 10px;
	border-radius: 999px;
	border: 1px solid var(--bd-rim-strong);
	background: rgba(255, 255, 255, .03);
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 14px;
	text-align: center;
	color: var(--bd-ink-2);
}

/* "Morning" / "Afternoon" / "Evening": a small label on a hairline */
.book-demo-page .booking-slot-title {
	height: 18px;
	display: block;
	text-align: center;
	margin: 4px 0 8px;
	position: relative;
}

.book-demo-page .booking-slot-title-text {
	color: #D8D3FF;
	position: absolute;
	left: 50%;
	z-index: 1;
	transform: translateX(-50%);
	background-color: var(--bd-panel-2);
	padding: 0 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 18px;
}

.book-demo-page .booking-slot-title-border {
	position: absolute;
	width: 100%;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(216, 211, 255, .35), transparent);
	top: 50%;
}

.book-demo-page .morning,
.book-demo-page .afternoon,
.book-demo-page .evening {
	position: relative;
}

.book-demo-page .morning,
.book-demo-page .afternoon {
	margin-bottom: 12px;
}

.book-demo-page .selector {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
}

.book-demo-page .selector-item {
	position: relative;
	flex-basis: calc(100% / 3);
	max-width: calc(100% / 3);
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 6px;
	padding-bottom: 6px;
}

.book-demo-page .selector-item:last-child {
	margin-right: 0;
}

.book-demo-page .selector-item_radio {
	appearance: none;
	display: none;
}

/* a time: a quiet glass pill */
.book-demo-page .selector-item_label {
	position: relative;
	width: 100%;
	text-align: center;
	border-radius: 999px;
	line-height: 22px;
	font-weight: 500;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--bd-ink);
	padding: 0 4px;
	cursor: pointer;
	border: 1px solid var(--bd-rim-strong);
	background: rgba(255, 255, 255, .04);
	white-space: nowrap;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.book-demo-page .selector-item_label:hover {
	color: #fff;
	background: rgba(255, 255, 255, .09);
	border-color: rgba(111, 226, 255, .55);
}

.book-demo-page .selector-item_radio:focus-visible + .selector-item_label {
	outline: 2px solid #6FE2FF;
	outline-offset: 2px;
}

/* the chosen time: the brand gradient, dark text */
.book-demo-page .selector-item_radio:checked + .selector-item_label {
	background: var(--bd-grad);
	border-color: transparent;
	color: var(--bd-on-grad);
	font-weight: 600;
	box-shadow: 0 6px 18px -6px rgba(111, 226, 255, .55);
}

/* a time that has passed or is taken */
.book-demo-page .selector-item_label.is-disabled {
	color: var(--bd-ink-3);
	cursor: not-allowed;
	background: transparent;
	border-color: rgba(255, 255, 255, .07);
	text-decoration: line-through;
	text-decoration-color: rgba(255, 255, 255, .25);
	pointer-events: none;
}

/*====Step 2: contact details - reuses .enquiry-form/.gradient-input from
  inner.css, only the phone-code prefix needs its own rules====*/

.book-demo-page .bdemo-contact-form {
	margin-top: 0px;
}

.book-demo-page .bdemo-phone-input {
	display: flex;
	align-items: stretch;
}

.book-demo-page .bdemo-phone-code {
	display: flex;
	align-items: center;
	position: relative;
	background: #0d0e12;
	border-radius: 11px 0 0 11px;
	padding: 0 14px 0 18px;
	color: var(--bd-ink);
	font-size: 16px;
	white-space: nowrap;
}

/* divider between the +<code> chip and the number field */
.book-demo-page .bdemo-phone-code::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 1px;
	height: 22px;
	transform: translateY(-50%);
	background: var(--bd-rim-strong);
	margin-right: 3px;
}

.book-demo-page .bdemo-phone-input .form-control {
	border-radius: 0 11px 11px 0;
	padding-left: 6px;
}

/*====Step 3: email OTP verification====*/

.book-demo-page .bdemo-otp-form {
	margin-top: 0px;
}

.book-demo-page .bdemo-otp-text {
	color: var(--bd-ink-2);
	font-size: 15px;
	margin-bottom: 20px;
}

/* TEMPORARY - only rendered while the backend's otp_reveal_code is on
   (see Book_demo_api::request_otp()/resend_otp()); goes away with it. */
.book-demo-page .bdemo-otp-dev {
	border: 1px dashed rgba(255, 186, 106, .6);
	background: rgba(255, 186, 106, .08);
	color: #FFBA6A;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 14px;
	border-radius: 10px;
	margin: -10px 0 20px;
}

.book-demo-page #bdemoOtpCode {
	letter-spacing: 6px;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}

.book-demo-page .bdemo-otp-resend {
	font-size: 14px;
	color: var(--bd-ink-3);
	margin: 14px 0 0;
}

.book-demo-page .bdemo-otp-resend button {
	background: none;
	border: none;
	padding: 0;
	color: #6FE2FF;
	font-weight: 600;
	cursor: pointer;
}

.book-demo-page .bdemo-otp-resend button:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.book-demo-page .req-alert-msg {
	padding: 10px;
	margin: 10px 0 0;
	text-align: center;
	font-size: 13px;
}

.book-demo-page .bdemo-form-actions {
	margin-top: 15px;
}

/* Back: the quiet glass pill beside the gradient submit button */
.book-demo-page .bdemo-back-btn {
	height: 58px;
	padding: 0 26px;
	border-radius: 999px;
	color: var(--bd-ink);
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--bd-rim-strong);
	font-size: 17px;
	font-weight: 500;
	margin-right: 12px;
	margin-bottom: 2px;
	vertical-align: middle;
	outline: none;
	transition: background-color .2s ease, border-color .2s ease;
}

.book-demo-page .bdemo-back-btn:hover {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .26);
}

.book-demo-page .bdemo-back-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/*====Calendar (bootstrap-datepicker) styles====*/

.book-demo-page .date-select .datepicker-inline {
	width: 100%;
	padding: 0;
}

.book-demo-page .date-select .table-condensed {
	width: 100%;
	border-collapse: initial;
}

.book-demo-page .datepicker td,
.book-demo-page .datepicker th {
	border-radius: 10px;
}

.book-demo-page .date-select .datepicker table tr td,
.book-demo-page .date-select .datepicker table tr th {
	color: var(--bd-ink);
}

.book-demo-page .date-select .datepicker table tr th.dow {
	color: var(--bd-ink-3);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.book-demo-page .date-select .datepicker table tr td.day:hover,
.book-demo-page .date-select .datepicker table tr td.day.focused {
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

.book-demo-page .date-select .datepicker table tr td.active,
.book-demo-page .date-select .datepicker table tr td.active.disabled,
.book-demo-page .date-select .datepicker table tr td.active.disabled:hover,
.book-demo-page .date-select .datepicker table tr td.active:hover,
.book-demo-page .date-select .datepicker table tr td span.active,
.book-demo-page .date-select .datepicker table tr td span.active.disabled,
.book-demo-page .date-select .datepicker table tr td span.active.disabled:hover,
.book-demo-page .date-select .datepicker table tr td span.active:hover {
	background-image: var(--bd-grad);
	background-color: transparent;
	color: var(--bd-on-grad);
	font-weight: 600;
	text-shadow: none;
	box-shadow: 0 6px 18px -6px rgba(111, 226, 255, .55);
}

.book-demo-page .date-select .datepicker .datepicker-switch,
.book-demo-page .date-select .datepicker tfoot tr th {
	color: #D8D3FF;
	font-weight: 600;
	border-bottom: 1px solid var(--bd-rim);
}

.book-demo-page .date-select .datepicker .datepicker-switch:hover,
.book-demo-page .date-select .datepicker .next:hover,
.book-demo-page .date-select .datepicker .prev:hover,
.book-demo-page .date-select .datepicker tfoot tr th:hover {
	background: transparent;
	color: #fff;
}

.book-demo-page .date-select .datepicker .prev {
	text-align: left;
}

.book-demo-page .date-select .datepicker .next {
	text-align: right;
}

.book-demo-page .date-select .datepicker .next,
.book-demo-page .date-select .datepicker .prev {
	font-size: 18px;
	color: #D8D3FF;
	border-radius: 3px;
	border-bottom: 1px solid var(--bd-rim);
}

.book-demo-page .date-select .datepicker td,
.book-demo-page .date-select .datepicker th {
	font-size: 15px;
	padding: 12px;
}

.book-demo-page .date-select .datepicker .prev.disabled,
.book-demo-page .date-select .datepicker .prev.disabled:hover {
	cursor: not-allowed;
	opacity: .35;
	pointer-events: none;
}

.book-demo-page .date-select .datepicker table tr td.disabled,
.book-demo-page .date-select .datepicker table tr td.disabled:hover {
	color: rgba(255, 255, 255, .22);
	background: transparent;
	cursor: not-allowed;
}

.book-demo-page .date-select .datepicker table tr td.old:not(.active),
.book-demo-page .date-select .datepicker table tr td.new:not(.active) {
	color: rgba(255, 255, 255, .22);
}

/* month / year / decade views: the same dark hover as the days (the plugin default is a light grey) */
.book-demo-page .date-select .datepicker table tr td span {
	border-radius: 8px;
}

.book-demo-page .date-select .datepicker table tr td span:not(.active):hover,
.book-demo-page .date-select .datepicker table tr td span.focused:not(.active) {
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

.book-demo-page .date-select .datepicker table tr td span.disabled,
.book-demo-page .date-select .datepicker table tr td span.disabled:hover,
.book-demo-page .date-select .datepicker table tr td span.old,
.book-demo-page .date-select .datepicker table tr td span.new {
	background: transparent;
	color: rgba(255, 255, 255, .22);
}

.book-demo-page .date-select .datepicker table tr td span.disabled,
.book-demo-page .date-select .datepicker table tr td span.disabled:hover {
	cursor: not-allowed;
}

/* today: a ring, so it stays distinct from the chosen date */
.book-demo-page .date-select .datepicker table tr td.day.today:not(.active),
.book-demo-page .date-select .datepicker table tr td.day.today:not(.active):hover,
.book-demo-page .date-select .datepicker table tr td.day.today.disabled:not(.active) {
	background: none;
	background-image: none;
	text-shadow: none;
	box-shadow: inset 0 0 0 1px rgba(216, 211, 255, .45);
}

/*====End Calendar styles====*/

@media (max-width: 991px) {
	.book-demo-page .bookdemo-form {
		padding: 28px;
	}

	.book-demo-page .ts-p-r-0,
	.book-demo-page .ts-p-l-0 {
		padding-left: 15px;
		padding-right: 15px;
	}
}

@media (max-width: 767px) {
	.book-demo-page .bookdemo-form {padding: 20px;}
	.book-demo-page .bdemo-back-btn {margin-bottom: 0px;width: 105px;padding: 0px 13px;font-size: 16px;height: 53px;}
	.book-demo-page .section-subtitle{margin: 0 auto 28px;font-size: 15px;line-height: 1.6;}
	.book-demo-page .date-select .datepicker td, .book-demo-page .date-select .datepicker th{padding: 8px;}
	.book-demo-page .time-select{height: auto; border-left: 0; border-top: 1px solid var(--bd-rim);}
	.book-demo-page .bdemo-form-actions{display: flex;align-items: center;margin-top: 35px;}
	.bdemo-form-actions .submit-btn{margin-top: 0;}
	.book-demo-page .selector-item{padding-bottom: 8px;}
	.book-demo-page .selector-item_label{line-height: 34px; font-size: 13px;}
}