/**
 * Zenixel Booking Calendar - Styles
 * Brand: Primary #6366F1, Navy #1e4d9b, Cyan #00d4d4, Success #10B981, Danger #EF4444
 */

/* ========== Variables & Base ========== */
:root {
	--zenixel-primary: #6366F1;
	--zenixel-primary-dark: #4F46E5;
	--zenixel-navy: #1e4d9b;
	--zenixel-cyan: #00d4d4;
	--zenixel-success: #10B981;
	--zenixel-danger: #EF4444;
	--gray-50: #F9FAFB;
	--gray-100: #F3F4F6;
	--gray-200: #E5E7EB;
	--gray-300: #D1D5DB;
	--gray-600: #4B5563;
	--gray-900: #111827;
	--radius-btn: 8px;
	--radius-card: 12px;
	--radius-card-lg: 16px;
	--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
	--shadow-hover: 0 6px 20px rgba(99, 102, 241, 0.4);
	--transition: all 0.3s ease;
}

.zenixel-booking-wrap {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	max-width: 1000px;
	margin: 0 auto 40px;
	padding: 0 20px;
	animation: zenixelFadeIn 0.4s ease;
}

@keyframes zenixelFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ========== Progress Steps ========== */
.zenixel-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 32px;
}

.zenixel-step {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--gray-300);
	transition: var(--transition);
}

.zenixel-step.is-active {
	color: var(--zenixel-primary);
}

.zenixel-step.is-completed {
	color: var(--zenixel-success);
}

.zenixel-step-num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--gray-200);
	color: var(--gray-600);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	transition: var(--transition);
}

.zenixel-step.is-active .zenixel-step-num {
	background: linear-gradient(135deg, var(--zenixel-primary) 0%, var(--zenixel-primary-dark) 100%);
	color: #fff;
	box-shadow: var(--shadow-hover);
}

.zenixel-step.is-completed .zenixel-step-num {
	background: var(--zenixel-success);
	color: #fff;
	content: none;
}

.zenixel-step.is-completed .zenixel-step-num::after {
	content: '✓';
}

.zenixel-step.is-completed .zenixel-step-num {
	font-size: 0;
}

.zenixel-step.is-completed .zenixel-step-num::after {
	font-size: 16px;
	font-weight: 700;
}

.zenixel-step-connector {
	width: 40px;
	height: 2px;
	background: var(--gray-200);
}

.zenixel-step.is-completed + .zenixel-step-connector {
	background: var(--zenixel-success);
}

/* ========== Step Content Panels ========== */
.zenixel-step-content {
	display: none;
	animation: zenixelFadeIn 0.3s ease;
}

.zenixel-step-content.is-visible {
	display: block;
}

/* ========== Cards ========== */
.zenixel-card {
	background: #fff;
	border-radius: var(--radius-card-lg);
	box-shadow: var(--shadow-card);
	padding: 28px 32px;
	margin-bottom: 24px;
}

/* ========== Calendar ========== */
.zenixel-calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.zenixel-calendar-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--zenixel-navy);
	margin: 0;
}

.zenixel-calendar-nav {
	display: flex;
	gap: 8px;
}

.zenixel-calendar-nav-btn {
	width: 40px;
	height: 40px;
	border: 2px solid var(--gray-200);
	background: #fff;
	border-radius: var(--radius-btn);
	color: var(--gray-600);
	font-size: 18px;
	cursor: pointer;
	transition: var(--transition);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.zenixel-calendar-nav-btn:hover {
	border-color: var(--zenixel-primary);
	color: var(--zenixel-primary);
	transform: translateY(-2px);
}

.zenixel-calendar-nav-btn:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

.zenixel-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
}

.zenixel-calendar-weekday {
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--gray-600);
	padding: 8px 0;
}

.zenixel-calendar-day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-btn);
	font-size: 14px;
	font-weight: 600;
	color: var(--gray-900);
	cursor: pointer;
	transition: var(--transition);
	background: transparent;
	border: 2px solid transparent;
}

.zenixel-calendar-day:hover:not(.is-disabled):not(.is-empty) {
	background: var(--gray-100);
	transform: scale(1.02);
	box-shadow: var(--shadow-card);
}

.zenixel-calendar-day.is-today {
	border-color: var(--zenixel-cyan);
	background: rgba(0, 212, 212, 0.1);
}

.zenixel-calendar-day.is-selected {
	background: linear-gradient(135deg, var(--zenixel-primary) 0%, var(--zenixel-primary-dark) 100%);
	color: #fff;
	border-color: transparent;
}

.zenixel-calendar-day.is-disabled,
.zenixel-calendar-day.is-empty {
	cursor: not-allowed;
}

.zenixel-calendar-day.is-disabled:not(.is-past),
.zenixel-calendar-day.is-empty {
	opacity: 0.4;
	color: var(--gray-300);
}

/* Past dates: visible, not gray, still disabled */
.zenixel-calendar-day.is-disabled.is-past {
	opacity: 0.9;
	color: var(--gray-600);
	background: var(--gray-100);
}

.zenixel-calendar-day.is-empty {
	pointer-events: none;
}

/* ========== Time Slots ========== */
.zenixel-times-wrap {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--gray-200);
}

.zenixel-times-date-label {
	font-size: 16px;
	font-weight: 600;
	color: var(--zenixel-navy);
	margin-bottom: 16px;
}

.zenixel-times-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
}

.zenixel-time-slot {
	padding: 14px 20px;
	border: 2px solid var(--gray-200);
	background: #fff;
	border-radius: var(--radius-btn);
	font-size: 15px;
	font-weight: 600;
	color: var(--gray-900);
	cursor: pointer;
	transition: var(--transition);
	text-align: center;
}

.zenixel-time-slot:hover:not(.is-unavailable):not(.is-selected) {
	border-color: var(--zenixel-primary);
	transform: translateY(-2px);
}

.zenixel-time-slot.is-selected {
	background: linear-gradient(135deg, var(--zenixel-primary) 0%, var(--zenixel-primary-dark) 100%);
	color: #fff;
	border-color: transparent;
}

.zenixel-time-slot.is-unavailable {
	background: var(--gray-100);
	color: var(--gray-300);
	text-decoration: line-through;
	cursor: not-allowed;
	opacity: 0.8;
}

/* ========== Step 1 Actions ========== */
.zenixel-step1-actions {
	margin-top: 28px;
	display: flex;
	justify-content: flex-end;
}

.zenixel-btn-continue {
	padding: 14px 28px;
	background: var(--gray-300);
	color: #fff;
	border: none;
	border-radius: var(--radius-btn);
	font-size: 16px;
	font-weight: 600;
	cursor: not-allowed;
	transition: var(--transition);
}

.zenixel-btn-continue.is-active {
	background: linear-gradient(135deg, var(--zenixel-primary) 0%, var(--zenixel-primary-dark) 100%);
	cursor: pointer;
}

.zenixel-btn-continue.is-active:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-hover);
}

.zenixel-btn-continue.is-active:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

/* ========== Loading overlay ========== */
.zenixel-loading-overlay {
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(4px);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	flex-direction: column;
	gap: 16px;
}

.zenixel-loading-overlay.is-visible {
	display: flex;
}

.zenixel-spinner {
	width: 48px;
	height: 48px;
	border: 4px solid var(--gray-200);
	border-top-color: var(--zenixel-primary);
	border-radius: 50%;
	animation: zenixelSpin 0.8s linear infinite;
}

@keyframes zenixelSpin {
	to { transform: rotate(360deg); }
}

.zenixel-loading-text {
	font-size: 16px;
	font-weight: 600;
	color: var(--gray-600);
}

/* ========== Form Step 2 ========== */
.zenixel-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.zenixel-form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.zenixel-form-group.full-width {
	grid-column: 1 / -1;
}

.zenixel-form-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--gray-900);
}

.zenixel-form-label .required {
	color: var(--zenixel-danger);
}

.zenixel-form-input,
.zenixel-form-select,
.zenixel-form-textarea {
	height: 48px;
	padding: 0 16px;
	border: 2px solid var(--gray-200);
	border-radius: var(--radius-btn);
	font-size: 15px;
	font-family: inherit;
	color: var(--gray-900);
	transition: var(--transition);
}

.zenixel-form-input::placeholder,
.zenixel-form-textarea::placeholder {
	color: var(--gray-300);
}

.zenixel-form-input:focus,
.zenixel-form-select:focus,
.zenixel-form-textarea:focus {
	outline: none;
	border-color: var(--zenixel-primary);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.zenixel-form-textarea {
	height: auto;
	min-height: 100px;
	padding: 14px 16px;
	resize: vertical;
}

.zenixel-form-actions {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 28px;
}

.zenixel-btn-back {
	padding: 14px 28px;
	background: #fff;
	color: var(--gray-600);
	border: 2px solid var(--gray-200);
	border-radius: var(--radius-btn);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition);
}

.zenixel-btn-back:hover {
	border-color: var(--zenixel-primary);
	color: var(--zenixel-primary);
}

.zenixel-btn-submit {
	padding: 14px 28px;
	background: linear-gradient(135deg, var(--zenixel-primary) 0%, var(--zenixel-primary-dark) 100%);
	color: #fff;
	border: none;
	border-radius: var(--radius-btn);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition);
}

.zenixel-btn-submit:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-hover);
}

.zenixel-btn-submit:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

.zenixel-form-error {
	display: none;
	margin-top: 16px;
	padding: 14px 18px;
	background: var(--zenixel-danger);
	color: #fff;
	border-radius: var(--radius-btn);
	font-size: 14px;
}

.zenixel-form-error.is-visible {
	display: block;
}

/* ========== Step 3 Confirmation ========== */
.zenixel-confirm-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 24px;
	background: var(--zenixel-success);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	font-weight: 700;
	animation: zenixelBounce 0.5s ease;
}

@keyframes zenixelBounce {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

.zenixel-confirm-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--zenixel-navy);
	text-align: center;
	margin: 0 0 8px;
}

.zenixel-confirm-subtitle {
	font-size: 16px;
	color: var(--gray-600);
	text-align: center;
	margin: 0 0 28px;
}

.zenixel-confirm-summary {
	background: var(--gray-100);
	border-radius: var(--radius-card);
	padding: 24px;
	margin-bottom: 24px;
}

.zenixel-confirm-summary p {
	margin: 0 0 12px;
	font-size: 15px;
	color: var(--gray-900);
}

.zenixel-confirm-summary p:last-child {
	margin-bottom: 0;
}

.zenixel-confirm-next-steps {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
}

.zenixel-confirm-next-steps li {
	padding: 8px 0;
	font-size: 15px;
	color: var(--gray-600);
}

.zenixel-btn-home {
	display: inline-block;
	padding: 14px 28px;
	background: linear-gradient(135deg, var(--zenixel-primary) 0%, var(--zenixel-primary-dark) 100%);
	color: #fff !important;
	text-decoration: none;
	border-radius: var(--radius-btn);
	font-size: 16px;
	font-weight: 600;
	transition: var(--transition);
	text-align: center;
}

.zenixel-btn-home:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-hover);
	color: #fff;
}

/* ========== Time slots loading ========== */
.zenixel-times-loading {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px;
	color: var(--gray-600);
}

.zenixel-times-loading.is-visible {
	display: flex;
}

.zenixel-times-loading .zenixel-spinner {
	width: 28px;
	height: 28px;
	border-width: 3px;
}

/* ========== Responsive – Mobile first ========== */
@media (max-width: 768px) {
	.zenixel-booking-wrap {
		padding: 0 10px;
		margin-bottom: 24px;
		max-width: 100%;
		box-sizing: border-box;
	}

	.zenixel-card {
		padding: 18px 14px;
		border-radius: 14px;
		box-sizing: border-box;
	}

	.zenixel-steps {
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
		margin-bottom: 20px;
	}

	.zenixel-step {
		font-size: 12px;
	}

	.zenixel-step-num {
		width: 28px;
		height: 28px;
		font-size: 13px;
	}

	.zenixel-step-connector {
		display: none;
	}

	/* Calendar header: stack and larger tap targets */
	.zenixel-calendar-header {
		flex-wrap: wrap;
		gap: 12px;
		margin-bottom: 14px;
	}

	.zenixel-calendar-title {
		font-size: 17px;
		width: 100%;
		text-align: center;
		order: 1;
		font-weight: 700;
		color: var(--zenixel-navy);
	}

	.zenixel-calendar-nav {
		width: 100%;
		justify-content: center;
		order: 2;
		gap: 12px;
	}

	.zenixel-calendar-nav-btn {
		width: 48px;
		height: 48px;
		font-size: 22px;
		flex-shrink: 0;
	}

	/* Calendar grid: comfortable 7-column layout, equal cells */
	.zenixel-calendar-grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 5px;
		margin-bottom: 4px;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.zenixel-calendar-weekday {
		font-size: 10px;
		font-weight: 700;
		color: var(--gray-600);
		padding: 8px 0;
		text-align: center;
	}

	.zenixel-calendar-day {
		aspect-ratio: 1;
		min-height: 40px;
		min-width: 0;
		width: 100%;
		height: auto;
		font-size: 14px;
		font-weight: 600;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		-webkit-tap-highlight-color: transparent;
	}

	/* Ensure selected/today stand out on mobile */
	.zenixel-calendar-day.is-selected {
		background: linear-gradient(135deg, var(--zenixel-primary) 0%, var(--zenixel-primary-dark) 100%) !important;
		color: #fff !important;
		box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
	}

	.zenixel-calendar-day.is-today {
		border: 2px solid var(--zenixel-cyan);
		background: rgba(0, 212, 212, 0.15);
		color: var(--gray-900);
	}

	/* Time slots: full width on very small screens */
	.zenixel-times-wrap {
		margin-top: 20px;
		padding-top: 20px;
	}

	.zenixel-times-date-label {
		font-size: 15px;
		margin-bottom: 12px;
	}

	.zenixel-times-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.zenixel-time-slot {
		min-height: 48px;
		padding: 14px 12px;
		font-size: 15px;
	}

	.zenixel-step1-actions {
		margin-top: 24px;
	}

	.zenixel-step1-actions .zenixel-btn-continue {
		width: 100%;
		min-height: 48px;
		font-size: 16px;
	}

	.zenixel-form-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.zenixel-form-actions {
		flex-direction: column;
		gap: 12px;
		margin-top: 24px;
	}

	.zenixel-btn-back,
	.zenixel-btn-submit {
		width: 100%;
		min-height: 48px;
		justify-content: center;
	}

	.zenixel-confirm-icon {
		width: 64px;
		height: 64px;
		font-size: 32px;
		margin-bottom: 20px;
	}

	.zenixel-confirm-title {
		font-size: 20px;
	}

	.zenixel-confirm-subtitle {
		font-size: 14px;
	}

	.zenixel-confirm-summary {
		padding: 20px;
	}

	.zenixel-btn-home {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
}

/* Small phones */
@media (max-width: 380px) {
	.zenixel-calendar-day {
		min-height: 40px;
		font-size: 14px;
	}

	.zenixel-calendar-grid {
		gap: 4px;
	}

	.zenixel-times-grid {
		grid-template-columns: 1fr;
	}

	.zenixel-time-slot {
		min-height: 44px;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.zenixel-times-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ========== Accessibility ========== */
.zenixel-calendar-nav-btn:focus-visible,
.zenixel-calendar-day:focus-visible,
.zenixel-time-slot:focus-visible {
	outline: 2px solid var(--zenixel-primary);
	outline-offset: 2px;
}

.zenixel-form-input:focus-visible,
.zenixel-form-select:focus-visible,
.zenixel-form-textarea:focus-visible {
	outline: 2px solid var(--zenixel-primary);
	outline-offset: 2px;
}

/* Screen reader only */
.zenixel-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}