/* ==========================================================================
   Booking Calendar – Frontend (Calendly-style layout)
   ========================================================================== */

.bcl-widget {
	--bcl-blue:       #006BFF;
	--bcl-blue-dark:  #0052cc;
	--bcl-red:        #d92d20;
	--bcl-ink:        #1a1a1a;
	--bcl-muted:      #73819b;
	--bcl-bg:         #ffffff;
	--bcl-border:     #d6dce5;
	--bcl-slot-bd:    #c7d7f0;
	--bcl-cal-bg:     #eef4ff;
	--bcl-sel-gray:   #525252;
	--bcl-radius:     8px;
	--bcl-pad:        32px;

	font-family: 'Proxima Nova', 'proxima-nova', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--bcl-ink);
	font-size: 15px;
	line-height: 1.5;
	max-width: 640px;
	margin: 0 auto;
	box-sizing: border-box;
}

.bcl-widget *,
.bcl-widget *::before,
.bcl-widget *::after {
	box-sizing: border-box;
}

/* Neutralize any theme-injected shadow on widget buttons.
   Intentional hover/state shadows below win on specificity. */
.bcl-widget button {
	box-shadow: none;
}

.bcl-card {
	position: relative;
	background: var(--bcl-bg);
	border: 1px solid var(--bcl-border);
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(26, 26, 26, 0.08);
}

.bcl-main {
	padding: 28px var(--bcl-pad) 36px;
	min-height: 620px;
	max-height: 620px;
	overflow-y: auto;
}

/* Step 1 skeleton — shimmer on available date cells while JS initialises.
   bcl-step--loading is added by PHP and removed when JS replaces innerHTML. */
.bcl-step--loading .bcl-cal-cell--available {
	background: linear-gradient( 100deg, #eef2f6 30%, #e2e8ef 50%, #eef2f6 70% );
	background-size: 200% 100%;
	animation: bcl-shimmer 1.2s ease-in-out infinite;
	color: transparent;
	pointer-events: none;
}

.bcl-step--loading .bcl-cal-header {
	background: linear-gradient( 100deg, #eef2f6 30%, #e2e8ef 50%, #eef2f6 70% );
	background-size: 200% 100%;
	animation: bcl-shimmer 1.2s ease-in-out infinite;
	color: transparent;
	border-radius: 3px;
	height: 12px;
	margin: 6px auto;
	width: 60%;
}

/* ── Top bar (back arrow + centered title) ──────────────────────── */
.bcl-topbar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-bottom: 14px;
}

.bcl-back-btn {
	position: absolute;
	left: 0;
	top: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--bcl-border);
	background: var(--bcl-bg);
	color: var(--bcl-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s, box-shadow .15s;
}

.bcl-back-btn:hover {
	background: #f3f7ff;
}

.bcl-topbar__title {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 52px;
}

.bcl-topbar__main {
	font-size: 21px;
	font-weight: 700;
	color: var(--bcl-ink);
	letter-spacing: -0.01em;
}

.bcl-topbar__sub {
	font-size: 14px;
	color: var(--bcl-muted);
	font-weight: 500;
}

/* ── Section titles ─────────────────────────────────────────────── */
.bcl-step__title {
	font-family: 'Proxima Nova';
	font-size: 20px;
	font-weight: 700;
	color: var(--bcl-ink);
	margin: 0 0 16px;
	letter-spacing: -0.01em;
}

.bcl-step__title--center { text-align: center; }
.bcl-step__title--success { color: var(--bcl-blue); }

.bcl-step__subtitle {
	font-size: 14px;
	color: var(--bcl-muted);
	margin: 0 0 20px;
}

.bcl-step__subtitle--center { text-align: center; }

/* ── Full-bleed divider ─────────────────────────────────────────── */
.bcl-divider {
	border-top: 1px solid var(--bcl-border);
	margin: 22px calc(-1 * var(--bcl-pad));
}

/* ── Calendar nav ───────────────────────────────────────────────── */
.bcl-cal-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	margin: 8px 0 6px;
}

.bcl-cal-nav__label {
	font-weight: 700;
	font-size: 14px;
	color: var(--bcl-ink);
	min-width: 150px;
	text-align: center;
}

.bcl-cal-nav__btn {
	background: none;
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	cursor: pointer;
	color: var(--bcl-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s;
}

.bcl-cal-nav__btn:hover:not(:disabled) { background: #f0f5ff; }

.bcl-cal-nav__btn:disabled,
.bcl-cal-nav__btn--disabled {
	color: #c2cbd6;
	cursor: default;
}

/* ── Calendar grid ──────────────────────────────────────────────── */
.bcl-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px 0;
	margin: 14px auto 8px;
	max-width: 320px;
}

.bcl-cal-nav { max-width: 320px; margin-left: auto; margin-right: auto; }

.bcl-cal-header {
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--bcl-muted);
	padding: 4px 0 10px;
}

.bcl-cal-cell-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
}

.bcl-cal-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	font-size: 15px;
	color: var(--bcl-ink);
	transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}

.bcl-cal-cell--disabled {
	color: #c2cbd6;
	cursor: default;
}

.bcl-cal-cell--available {
	cursor: pointer;
	font-weight: 400;
	color: var(--bcl-blue);
	background: var(--bcl-cal-bg);
}

.bcl-cal-cell--available:hover,
.bcl-cal-cell--available:focus {
	background: var(--bcl-blue);
	color: #fff;
	outline: none;
}

.bcl-cal-cell--selected {
	background: var(--bcl-blue);
	color: #fff;
	font-weight: 700;
}

.bcl-today-dot {
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--bcl-blue);
}

/* ── Time zone selector (minimal, centered) ─────────────────────── */
.bcl-tz-block {
	text-align: center;
	margin: 20px 0 4px;
}

.bcl-tz-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--bcl-ink);
	margin-bottom: 6px;
}

.bcl-tz {
	position: relative;
	display: inline-block;
	text-align: left;
}

.bcl-tz__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #f0f1f4;
	border: none;
	padding: 5px 20px;
	border-radius: 30px;
	font-size: 15px;
	font-family: inherit;
	font-weight: 500;
	color: var(--bcl-ink);
	cursor: pointer;
	transition: background .15s;
}

.bcl-tz__toggle:hover { background: #e7e9ee; }

.bcl-tz__toggle .bcl-meta-icon { color: var(--bcl-blue); }

.bcl-tz__caret { display: inline-flex; color: var(--bcl-muted); transition: transform .2s; }
.bcl-tz.is-open .bcl-tz__caret { transform: rotate(180deg); }

.bcl-tz__panel {
	position: absolute;
	z-index: 40;
	top: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	width: 320px;
	max-width: 86vw;
	background: #fff;
	border: 1px solid var(--bcl-border);
	border-radius: var(--bcl-radius);
	box-shadow: 0 14px 38px rgba(26, 26, 26, 0.16);
	overflow: hidden;
}

.bcl-tz__searchwrap {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 14px;
	border-bottom: 1px solid var(--bcl-border);
}

.bcl-tz__searchicon { color: var(--bcl-muted); display: inline-flex; flex-shrink: 0; }

.bcl-tz__search {
	flex: 1;
	border: none;
	outline: none;
	font-size: 14px;
	font-family: inherit;
	color: var(--bcl-ink);
	background: none;
}

.bcl-tz__list {
	list-style: none;
	margin: 0;
	padding: 6px;
	max-height: 268px;
	overflow-y: auto;
}

.bcl-tz__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
}

.bcl-tz__option:hover { background: #f3f6fb; }

.bcl-tz__option.is-selected {
	background: var(--bcl-blue);
	color: #fff;
}

.bcl-tz__opt-name { font-weight: 500; }

.bcl-tz__opt-time {
	font-size: 13px;
	color: var(--bcl-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bcl-tz__option.is-selected .bcl-tz__opt-time { color: rgba(255, 255, 255, 0.82); }

.bcl-tz__empty {
	padding: 16px 12px;
	color: var(--bcl-muted);
	font-size: 14px;
	text-align: center;
}

/* ── Time zone modal (full-card popup) ──────────────────────────── */
.bcl-tzm {
	position: absolute;
	inset: 0;
	z-index: 50;
	background: #fff;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	padding: 22px var(--bcl-pad);
}

.bcl-tzm__searchwrap {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: 1px solid var(--bcl-border);
	border-radius: var(--bcl-radius);
}

.bcl-tzm__searchwrap .bcl-tz__searchicon,
.bcl-tzm__searchwrap > svg { color: var(--bcl-muted); flex-shrink: 0; }

.bcl-tzm__search {
	flex: 1;
	border: none;
	outline: none;
	font-size: 15px;
	font-family: inherit;
	color: var(--bcl-ink);
	background: none;
}

.bcl-tzm__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 2px 14px;
}

.bcl-tzm__title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bcl-ink);
}

.bcl-tzm__fmt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
}

.bcl-tzm__fmt-lbl {
	font-size: 13px;
	color: var(--bcl-muted);
}

.bcl-tzm__switch {
	position: relative;
	width: 38px;
	height: 20px;
	border-radius: 20px;
	background: #c7ced8;
	transition: background .15s;
}

.bcl-tzm__switch.is-24h { background: var(--bcl-blue); }

.bcl-tzm__knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: transform .15s;
}

.bcl-tzm__switch.is-24h .bcl-tzm__knob { transform: translateX(18px); }

.bcl-tzm__list {
	flex: 1;
	overflow-y: auto;
	margin: 0 calc(-1 * var(--bcl-pad));
}

.bcl-tzm__group {
	padding: 12px var(--bcl-pad) 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--bcl-ink);
}

.bcl-tzm__opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 11px var(--bcl-pad);
	border: none;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	color: var(--bcl-ink);
	text-align: left;
}

.bcl-tzm__opt:hover { background: #f3f6fb; }

.bcl-tzm__opt.is-selected {
	background: var(--bcl-blue);
	color: #fff;
}

.bcl-tzm__opt-time {
	color: var(--bcl-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bcl-tzm__opt.is-selected .bcl-tzm__opt-time { color: rgba(255, 255, 255, 0.85); }

.bcl-tzm__empty {
	padding: 24px var(--bcl-pad);
	color: var(--bcl-muted);
	text-align: center;
}

.bcl-tzm__close {
	margin-top: 14px;
	padding: 13px 20px;
	border: 1px solid var(--bcl-border);
	border-radius: 28px;
	background: #fff;
	color: var(--bcl-ink);
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background .15s;
}

.bcl-tzm__close:hover { background: #f3f6fb; }

/* ── Time slots (single column) ─────────────────────────────────── */
.bcl-slots-container {
	padding-right: 6px;
	margin-right: -6px;
}

.bcl-slots-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bcl-slot-row { display: flex; gap: 12px; }

.bcl-slot-btn {
	flex: 1;
	padding: 15px 12px;
	border: 1px solid var(--bcl-slot-bd);
	border-radius: var(--bcl-radius);
	background: var(--bcl-bg);
	color: var(--bcl-blue);
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	text-align: center;
	font-variant-numeric: tabular-nums;
	transition: border-color .15s, box-shadow .15s, background .15s, color .15s;
}

.bcl-slot-btn:hover,
.bcl-slot-btn:focus {
	border-color: var(--bcl-blue);
	outline: none;
}

.bcl-slot-btn--selected,
.bcl-slot-btn--selected:hover {
	background: var(--bcl-sel-gray);
	border-color: var(--bcl-sel-gray);
	color: #fff;
	box-shadow: none;
	cursor: default;
}

.bcl-slot-next {
	flex: 1;
	border: none;
	border-radius: var(--bcl-radius);
	background: var(--bcl-blue);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: background .15s;
}

.bcl-slot-next:hover { background: var(--bcl-blue-dark); }

/* Skeleton loading */
.bcl-slots-list--loading .bcl-slot-skeleton {
	height: 52px;
	border-radius: var(--bcl-radius);
	background: linear-gradient(100deg, #eef2f6 30%, #e2e8ef 50%, #eef2f6 70%);
	background-size: 200% 100%;
	animation: bcl-shimmer 1.2s ease-in-out infinite;
}

@keyframes bcl-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.bcl-no-slots,
.bcl-error-msg {
	color: var(--bcl-muted);
	font-size: 14px;
	padding: 28px 0;
	text-align: center;
}

.bcl-error-msg { color: var(--bcl-red); }

/* ── Meeting info header (step 3) ───────────────────────────────── */
.bcl-meeting {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 16px 0 4px;
}

.bcl-meta-row {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--bcl-ink);
}

.bcl-meta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bcl-ink);
	flex-shrink: 0;
}

/* ── Step 3 (details + form) — constrained, centered ────────────── */
.bcl-step--3 {
	max-width: 430px;
	margin-left: auto;
	margin-right: auto;
}

/* ── Form ───────────────────────────────────────────────────────── */
.bcl-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.bcl-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bcl-label {
	font-size: 14px;
	font-weight: 700;
	color: var(--bcl-ink);
}

.bcl-required { color: var(--bcl-red); }

.bcl-input,
.bcl-textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #b9c2cf;
	border-radius: 6px;
	font-size: 15px;
	font-family: inherit;
	color: var(--bcl-ink);
	background: var(--bcl-bg);
	transition: border-color .15s, box-shadow .15s;
}

.bcl-input:focus,
.bcl-textarea:focus {
	outline: none;
	border-color: var(--bcl-blue);
	box-shadow: 0 0 0 3px rgba(0, 107, 255, 0.15);
}

.bcl-input--error { border-color: var(--bcl-red); }

.bcl-field-error {
	font-size: 12px;
	color: var(--bcl-red);
	min-height: 14px;
}

.bcl-form-error {
	background: #fdf2f1;
	border: 1px solid #f3b4ae;
	border-radius: 6px;
	padding: 10px 14px;
	color: var(--bcl-red);
	font-size: 14px;
}

.bcl-submit-btn {
	align-self: flex-start;
	min-width: 180px;
	padding: 13px 28px;
	background: var(--bcl-blue);
	color: #fff;
	border: none;
	border-radius: 28px;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: background .2s, transform .1s;
}

.bcl-submit-btn:hover:not(:disabled) { background: var(--bcl-blue-dark); }
.bcl-submit-btn:active:not(:disabled) { transform: scale(.99); }
.bcl-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

.bcl-redirect-note {
	font-size: 12px;
	color: var(--bcl-muted);
	margin: 0;
}

/* ── Success ────────────────────────────────────────────────────── */
.bcl-step--success {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 620px;
	padding: 24px 0;
}

/* Let the success step own the full 620px without the main's padding
   pushing the card past its max-height (which would add a scrollbar). */
.bcl-main:has(.bcl-step--success) {
	padding-top: 0;
	padding-bottom: 0;
}

.bcl-success-icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--bcl-blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
	box-shadow: 0 10px 24px rgba(0, 107, 255, 0.3);
}

.bcl-success-detail {
	font-weight: 700;
	color: var(--bcl-ink);
	margin: 4px 0;
}

.bcl-success-detail--muted {
	font-weight: 500;
	color: var(--bcl-muted);
}

.bcl-success-msg {
	color: var(--bcl-muted);
	font-size: 14px;
	max-width: 360px;
	margin-top: 14px;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.bcl-widget { --bcl-pad: 18px; }

	.bcl-main { padding: 20px var(--bcl-pad) 28px; }

	.bcl-topbar__title { padding: 0 48px; }

	.bcl-cal-cell {
		width: 38px;
		height: 38px;
		font-size: 14px;
	}

	.bcl-submit-btn { align-self: stretch; }
}

/* ==========================================================================
   Theme-proofing — override aggressive host-theme button styling.
   Many themes add borders, box-shadows, gradients and force a text color on
   every <button>, which broke the nav arrows (icons use currentColor) and
   re-introduced shadows. These rules reclaim the widget's own appearance.
   ========================================================================== */
.bcl-widget button {
	box-shadow: none !important;
	text-shadow: none !important;
	background-image: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	min-height: 0 !important;
}

.bcl-widget svg { display: inline-block; vertical-align: middle; }

/* Calendar nav arrows */
.bcl-widget .bcl-cal-nav__btn {
	border: none !important;
	background-color: transparent !important;
	color: var(--bcl-blue) !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
}
.bcl-widget .bcl-cal-nav__btn:hover:not(:disabled) { background-color: #f0f5ff !important; }
.bcl-widget .bcl-cal-nav__btn:disabled,
.bcl-widget .bcl-cal-nav__btn--disabled { color: #c2cbd6 !important; }

/* Back arrow */
.bcl-widget .bcl-back-btn {
	border: 1px solid var(--bcl-border) !important;
	background-color: #fff !important;
	color: var(--bcl-blue) !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
}
.bcl-widget .bcl-back-btn:hover { background-color: #f3f7ff !important; }

/* Time zone pill */
.bcl-widget .bcl-tz__toggle {
	border: none !important;
	background-color: #f0f1f4 !important;
	color: var(--bcl-ink) !important;
	border-radius: 30px !important;
}
.bcl-widget .bcl-tz__toggle:hover { background-color: #e7e9ee !important; }
.bcl-widget .bcl-tz__toggle .bcl-meta-icon { color: var(--bcl-blue) !important; }

/* Time slot buttons */
.bcl-widget .bcl-slot-btn {
	background-color: #fff !important;
	border: 1px solid var(--bcl-slot-bd) !important;
	color: var(--bcl-blue) !important;
}
.bcl-widget .bcl-slot-btn:hover,
.bcl-widget .bcl-slot-btn:focus { border-color: var(--bcl-blue) !important; }
.bcl-widget .bcl-slot-btn--selected,
.bcl-widget .bcl-slot-btn--selected:hover {
	background-color: var(--bcl-sel-gray) !important;
	border-color: var(--bcl-sel-gray) !important;
	color: #fff !important;
}
.bcl-widget .bcl-slot-next {
	border: none !important;
	background-color: var(--bcl-blue) !important;
	color: #fff !important;
}
.bcl-widget .bcl-slot-next:hover { background-color: var(--bcl-blue-dark) !important; }

/* Submit button */
.bcl-widget .bcl-submit-btn {
	border: none !important;
	background-color: var(--bcl-blue) !important;
	color: #fff !important;
}
.bcl-widget .bcl-submit-btn:hover:not(:disabled) { background-color: var(--bcl-blue-dark) !important; }

/* Time zone modal buttons */
.bcl-widget .bcl-tzm__opt,
.bcl-widget .bcl-tzm__fmt {
	border: none !important;
	background-color: transparent !important;
	color: var(--bcl-ink) !important;
}
.bcl-widget .bcl-tzm__opt:hover { background-color: #f3f6fb !important; }
.bcl-widget .bcl-tzm__opt.is-selected {
	background-color: var(--bcl-blue) !important;
	color: #fff !important;
}
.bcl-widget .bcl-tzm__close {
	background-color: #fff !important;
	color: var(--bcl-ink) !important;
	border: 1px solid var(--bcl-border) !important;
}
.bcl-widget .bcl-tzm__close:hover { background-color: #f3f6fb !important; }