/* ===== Easy Booking - theme inspired by brand logo (pink -> purple) ===== */
.eb-wrapper{
	--eb-pink:#ec4899;
	--eb-purple:#a855f7;
	--eb-gradient:linear-gradient(135deg,var(--eb-pink),var(--eb-purple));
	--eb-gradient-soft:linear-gradient(135deg,rgba(236,72,153,.08),rgba(168,85,247,.08));
	--eb-text:#2d2438;
	--eb-muted:#8b8296;
	--eb-border:#e8e2ef;
	--eb-bg:#ffffff;

	max-width:1000px;margin:0 auto;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
	color:var(--eb-text);
	background:var(--eb-bg);
	border-radius:18px;
	padding:32px;
	box-shadow:0 10px 40px rgba(168,85,247,.10);
	border:1px solid var(--eb-border);
}
.eb-wrapper *{box-sizing:border-box;}

/* ---- step indicator ---- */
.eb-steps{display:flex;align-items:center;justify-content:center;margin:0 0 32px;}
.eb-step-dot{width:14px;height:14px;border-radius:50%;background:#eee;border:2px solid #eee;transition:.25s;}
.eb-step-dot.active{background:var(--eb-gradient);border-color:transparent;box-shadow:0 0 0 4px rgba(236,72,153,.15);}
.eb-step-line{width:100px;height:2px;background:#eee;margin:0 10px;border-radius:2px;}

.eb-message{max-width:700px;margin:0 auto 18px;padding:12px 16px;border-radius:10px;font-size:14px;font-weight:500;}
.eb-message.eb-error{background:#fdecea;color:#b3213b;border:1px solid #f6c6cf;}
.eb-message.eb-success{background:linear-gradient(135deg,rgba(236,72,153,.10),rgba(168,85,247,.10));color:#7a2b8f;border:1px solid #ecd3f5;}

/* ---- panels ---- */
.eb-panel{display:flex;gap:34px;flex-wrap:wrap;align-items:flex-start;}
.eb-panel-hidden{display:none !important;}
.eb-force-hide{display:none !important;}
.eb-col{flex:1;min-width:230px;}
.eb-col h4{margin:0 0 12px;font-size:14px;font-weight:700;letter-spacing:.3px;color:var(--eb-text);text-transform:uppercase;opacity:.75;}

/* ---- services ---- */
.eb-services{display:flex;flex-direction:column;gap:10px;}
.eb-service-btn{
	padding:14px 16px;
	border:1.5px solid var(--eb-border) !important;
	background-color:#ffffff !important;
	border-radius:12px;
	cursor:pointer;text-align:left;font-size:14px;font-weight:500;
	color:var(--eb-text) !important;
	transition:.18s;
}
.eb-service-btn:hover{border-color:var(--eb-purple) !important;}
.eb-service-btn.selected{
	background:var(--eb-gradient) !important;
	background-color:transparent !important;
	color:#ffffff !important;
	border-color:transparent !important;
	box-shadow:0 6px 16px rgba(168,85,247,.30);
}

/* ---- calendar ---- */
.eb-calendar{border:1.5px solid var(--eb-border);border-radius:14px;padding:16px;}
.eb-cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-weight:700;font-size:14px;}
.eb-cal-header button{
	border:none !important;
	background:var(--eb-gradient-soft) !important;
	color:var(--eb-purple) !important;
	width:28px;height:28px;border-radius:8px;
	font-size:16px;cursor:pointer;line-height:1;
}
.eb-cal-header button:hover{background:var(--eb-gradient) !important;color:#ffffff !important;}
.eb-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center;}
.eb-cal-dow{font-size:11px;color:var(--eb-muted);padding:4px 0;font-weight:600;}
.eb-cal-day{padding:9px 0;border-radius:8px;font-size:13px;cursor:pointer;background:#faf9fb;color:var(--eb-text);transition:.15s;}
.eb-cal-day.eb-empty{background:transparent;cursor:default;}
.eb-cal-day.eb-past{color:#d8d3e0;cursor:not-allowed;background:transparent;}
.eb-cal-day.eb-available{background:#e9f7ee;color:#1f8a48;font-weight:600;}
.eb-cal-day.eb-available:hover{background:#1f8a48;color:#fff;}
.eb-cal-day.eb-booked{background:#fdeaea;color:#c0392b;cursor:not-allowed;font-weight:600;}
.eb-cal-day.eb-pending{background:#fff6dd;color:#a4841a;font-weight:600;}
.eb-cal-day.eb-partial{background:#f1e4d2;color:#8a6a2f;font-weight:600;}
.eb-cal-day.eb-selected{outline:2.5px solid var(--eb-purple);outline-offset:1px;background:var(--eb-gradient);color:#fff;}

.eb-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;font-size:12px;color:var(--eb-muted);}
.eb-legend-item{display:flex;align-items:center;gap:6px;}
.eb-dot{display:inline-block;width:12px;height:12px;border-radius:4px;}
.eb-dot.eb-available{background:#2fa860;}
.eb-dot.eb-booked{background:#d64545;}
.eb-dot.eb-pending{background:#e7c757;}
.eb-dot.eb-partial{background:#b89a63;}

/* ---- time slots ---- */
.eb-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.eb-slot-btn{
	padding:13px 8px;
	border:1.5px solid var(--eb-border) !important;
	background-color:#ffffff !important;
	border-radius:10px;
	cursor:pointer;font-size:13px;font-weight:500;
	color:var(--eb-text) !important;
	transition:.15s;
}
.eb-slot-btn:hover:not(.taken){border-color:var(--eb-purple) !important;}
.eb-slot-btn.selected{
	background:var(--eb-gradient) !important;
	background-color:transparent !important;
	color:#ffffff !important;
	border-color:transparent !important;
	box-shadow:0 6px 16px rgba(168,85,247,.30);
}
.eb-slot-btn.taken{background-color:#f4f2f6 !important;color:#c8c2d0 !important;cursor:not-allowed;text-decoration:line-through;}

/* ---- summary ---- */
.eb-summary{
	display:flex;flex-wrap:wrap;gap:28px;margin:26px 0 0;padding:16px 18px;
	border-radius:12px;background:var(--eb-gradient-soft);font-size:13px;color:var(--eb-text);
}
.eb-summary strong{color:var(--eb-purple);}

/* ---- form fields (STEP 2) -----------------------------------
   Uses CSS GRID instead of flex-grow. Each grid row sizes itself
   to its own content only - no item can stretch and swallow the
   height of a taller sibling (that was the root cause of the big
   empty gaps between First Name / Last Name / Email / Details).
   ---------------------------------------------------------- */
#eb-step-2.eb-panel{
	display:grid;
	grid-template-columns:1fr 1fr;
	column-gap:24px;
	row-gap:18px;
	align-items:start;
}
.eb-field{margin:0;min-width:0;max-width:none;}
.eb-field-full,
.eb-field.eb-checkbox,
#eb-step-2 > .eb-actions{grid-column:1 / -1;}

.eb-field label{display:block;font-weight:600;margin-bottom:7px;font-size:13.5px;color:var(--eb-text);}
.eb-field input[type=text],.eb-field input[type=email],.eb-field textarea{
	display:block;width:100%;padding:12px 14px;border:1.5px solid var(--eb-border);border-radius:10px;font-size:14px;
	transition:.15s;background:#fdfcfe;
}
.eb-field textarea{resize:vertical;min-height:90px;}
.eb-field input:focus,.eb-field textarea:focus{
	outline:none;border-color:var(--eb-purple);box-shadow:0 0 0 3px rgba(168,85,247,.12);background:#fff;
}
.eb-field.eb-checkbox{margin-top:2px;}
.eb-field.eb-checkbox label{font-weight:400;display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--eb-muted);margin:0;}
.eb-field.eb-checkbox input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--eb-purple);}

/* ---- actions ---- */
.eb-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:6px;}
.eb-panel > .eb-actions{flex:1 1 100%;}
.eb-wrapper button.eb-btn,
.eb-wrapper button.eb-service-btn,
.eb-wrapper button.eb-slot-btn,
.eb-wrapper button.eb-cal-header-btn{
	-webkit-appearance:none;appearance:none;
}
.eb-btn{
	flex:0 0 auto;
	height:auto;line-height:1.3;
	padding:12px 26px;border-radius:10px;
	border:1.5px solid var(--eb-border) !important;
	background-color:#ffffff !important;
	cursor:pointer;font-size:14px;font-weight:600;
	color:var(--eb-text) !important;
	transition:.18s;
}
.eb-btn-back:hover{border-color:var(--eb-purple) !important;color:var(--eb-purple) !important;}
.eb-btn-next,.eb-btn-send{
	background:var(--eb-gradient) !important;
	background-color:transparent !important;
	color:#ffffff !important;
	border-color:transparent !important;
	box-shadow:0 8px 20px rgba(168,85,247,.30);
}
.eb-btn-next:hover,.eb-btn-send:hover{filter:brightness(1.06);transform:translateY(-1px);}
.eb-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}

/* =========================================================
   RESPONSIVE FIXES (tablet + mobile + small mobile)
   ========================================================= */

/* ---- Tablet ---- */
@media(max-width:900px){
	.eb-wrapper{max-width:100%;padding:26px;}
	.eb-col{min-width:200px;}
}

/* ---- Mobile ---- */
@media(max-width:700px){
	.eb-wrapper{padding:18px;border-radius:14px;}

	/* Step 1 (service | calendar | time) still uses flex - stack columns */
	#eb-step-1.eb-panel{
		display:flex;
		flex-direction:column;
		align-items:stretch;
		gap:24px;
	}
	.eb-col{
		min-width:0;           /* prevent horizontal overflow on narrow screens */
		width:100%;
		flex:0 0 auto;         /* stop columns stretching height in column layout */
	}

	/* Step 2 (contact fields) - collapse the 2-column grid to 1 column.
	   Grid rows always size to their own content, so there is no risk
	   of fields stretching to fill leftover height on any screen size. */
	#eb-step-2.eb-panel{
		grid-template-columns:1fr;
		row-gap:16px;
	}

	.eb-steps{margin-bottom:24px;}
	.eb-step-line{width:60px;}

	.eb-summary{flex-direction:column;gap:8px;padding:14px 16px;}

	.eb-slots{grid-template-columns:1fr 1fr;}

	.eb-actions{
		flex-direction:column-reverse; /* primary action (Next/Send) on top, easier thumb reach */
		align-items:stretch;
		gap:10px;
	}
	.eb-btn{width:100%;text-align:center;padding:14px 20px;}

	.eb-legend{gap:10px 16px;}
}

/* ---- Small phones ---- */
@media(max-width:420px){
	.eb-wrapper{padding:14px;border-radius:12px;}

	.eb-steps{margin-bottom:20px;}
	.eb-step-dot{width:11px;height:11px;}
	.eb-step-line{width:36px;margin:0 6px;}

	.eb-col h4{font-size:12.5px;}

	.eb-service-btn{padding:12px 14px;font-size:13.5px;}

	.eb-calendar{padding:12px;}
	.eb-cal-header button{width:26px;height:26px;font-size:14px;}
	.eb-cal-day{padding:8px 0;font-size:12px;}
	.eb-cal-dow{font-size:10px;}

	.eb-slots{grid-template-columns:1fr 1fr;gap:8px;}
	.eb-slot-btn{padding:12px 6px;font-size:12.5px;}

	.eb-summary{font-size:12px;gap:6px;padding:12px 14px;}

	.eb-field input[type=text],
	.eb-field input[type=email],
	.eb-field textarea{padding:11px 12px;font-size:14px;}

	.eb-legend{font-size:11px;gap:8px 12px;}
}

/* ---- Ensure no horizontal scroll on any device ---- */
.eb-wrapper,
.eb-panel,
.eb-col,
.eb-field{max-width:100%;}
.eb-wrapper{overflow-x:hidden;}