/*
 * KCT HubSpot Meetings popup.
 * Opens the booking calendar in a lightweight modal on click of any
 * element carrying [data-kct-book]. If the modal can't mount, the
 * anchor's own target="_blank" href to the HubSpot URL still works.
 */

.kct-book-modal{
	position:fixed;
	inset:0;
	z-index:10000;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
	background:rgba(15,15,15,.72);
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter:blur(4px);
	opacity:0;
	transition:opacity .18s ease;
}
.kct-book-modal.is-open{opacity:1;}
.kct-book-modal[hidden]{display:none;}

.kct-book-modal__dialog{
	position:relative;
	width:min(100%, 960px);
	height:min(100%, 720px);
	background:#fff;
	border-radius:16px;
	box-shadow:0 30px 80px rgba(0,0,0,.35);
	overflow:hidden;
	display:flex;
	flex-direction:column;
	transform:translateY(8px) scale(.99);
	transition:transform .22s ease;
}
.kct-book-modal.is-open .kct-book-modal__dialog{transform:none;}

.kct-book-modal__close{
	position:absolute;
	top:10px;
	right:10px;
	width:36px;
	height:36px;
	border-radius:999px;
	border:0;
	background:#fff;
	box-shadow:0 2px 6px rgba(0,0,0,.15);
	font-size:22px;
	line-height:1;
	color:#111;
	cursor:pointer;
	z-index:3;
	display:flex;
	align-items:center;
	justify-content:center;
}
.kct-book-modal__close:hover{background:#f6f6f6;}
.kct-book-modal__close:focus-visible{outline:2px solid #111;outline-offset:2px;}

.kct-book-modal__frame{
	flex:1 1 auto;
	width:100%;
	border:0;
	display:block;
}

/* --- Loading overlay: mini booking-calendar animation --- */
.kct-book-modal__loading{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:26px;
	background:#fff;
	z-index:1;
	transition:opacity .28s ease;
	padding:24px;
	font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.kct-book-modal.is-loaded .kct-book-modal__loading{
	opacity:0;
	pointer-events:none;
}
.kct-book-modal.is-loaded .kct-book-modal__cal-cell,
.kct-book-modal.is-loaded .kct-book-modal__cal-cell::after{
	animation-play-state:paused;
}

.kct-book-modal__cal{
	width:min(280px, 82vw);
	display:flex;
	flex-direction:column;
	gap:8px;
	padding:14px 14px 12px;
	border:1px solid #ececec;
	border-radius:14px;
	background:#fafafa;
	box-shadow:0 10px 28px rgba(0,0,0,.05);
}
.kct-book-modal__cal-head{
	display:flex;
	justify-content:space-between;
	align-items:baseline;
	font-size:12px;
	line-height:1;
	color:#0d0d0d;
	padding:0 2px 8px;
	border-bottom:1px solid #ececec;
	font-weight:600;
}
.kct-book-modal__cal-head span:last-child{
	color:#888;
	font-weight:500;
}
.kct-book-modal__cal-dow{
	display:grid;
	grid-template-columns:repeat(7,1fr);
	gap:4px;
	font-size:9px;
	line-height:1;
	color:#a0a0a0;
	text-align:center;
	text-transform:uppercase;
	letter-spacing:.6px;
	padding:2px 0;
}
.kct-book-modal__cal-grid{
	display:grid;
	grid-template-columns:repeat(7,1fr);
	gap:4px;
}
.kct-book-modal__cal-cell{
	position:relative;
	aspect-ratio:1/1;
	border-radius:5px;
	background:#eee;
	animation:kct-cell-pulse 3s cubic-bezier(.4,0,.6,1) infinite;
}
.kct-book-modal__cal-cell--slot::after{
	content:"";
	position:absolute;
	left:22%;
	right:22%;
	bottom:15%;
	height:3px;
	background:#ff4800;
	border-radius:2px;
	opacity:0;
	transform-origin:center;
	transform:scaleX(.2);
	animation:kct-slot-appear 3s cubic-bezier(.4,0,.6,1) infinite;
	animation-delay:var(--kct-slot-delay, 0s);
}
@keyframes kct-cell-pulse{
	0%, 15%   { background:#eee; }
	45%       { background:#ffd9cc; }
	75%, 100% { background:#eee; }
}
@keyframes kct-slot-appear{
	0%, 35%   { opacity:0; transform:scaleX(.2); }
	55%, 78%  { opacity:1; transform:scaleX(1); }
	95%, 100% { opacity:0; transform:scaleX(.2); }
}

.kct-book-modal__status{
	display:flex;
	align-items:center;
	gap:10px;
	font-size:14px;
	font-weight:500;
	color:#333;
	min-height:20px;
	max-width:340px;
	text-align:center;
}
.kct-book-modal__spinner{
	flex:none;
	width:14px;
	height:14px;
	border-radius:999px;
	border:2px solid #e5e5e5;
	border-top-color:#ff4800;
	animation:kct-book-spin .9s linear infinite;
}
.kct-book-modal__msg{
	transition:opacity .28s ease;
}
.kct-book-modal__msg.is-out{opacity:0;}

.kct-book-modal__hint{
	position:absolute;
	left:0;
	right:0;
	bottom:14px;
	text-align:center;
	font-size:11px;
	color:#a0a0a0;
	font-weight:500;
	letter-spacing:.2px;
}

@keyframes kct-book-spin{to{transform:rotate(360deg);}}

@media (prefers-reduced-motion: reduce){
	.kct-book-modal__cal-cell,
	.kct-book-modal__cal-cell::after,
	.kct-book-modal__spinner{
		animation:none;
	}
	.kct-book-modal__cal-cell{background:#ececec;}
	.kct-book-modal__cal-cell--slot::after{opacity:1;transform:scaleX(1);}
}

body.kct-book-open{overflow:hidden;}

@media (max-width:640px){
	.kct-book-modal{padding:0;}
	.kct-book-modal__dialog{width:100%;height:100%;border-radius:0;}
}