.lizzee-app {
	margin: 0;
	padding: 0;
	background: #f5f5f5;
}

.lizzee-app-header {
	width: 100%;
	background: #000000;
	padding: 20px 0;
}

.lizzee-app-header-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.lizzee-app-logo {
	color: #ffffff;
	font-size: 28px;
	font-weight: 600;
	margin: 0;
}

.lizzee-app-main {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 20px;
}
.lizzee-section {

	background: #fff !important;
	border: 1px solid #ccd0d4 !important;
	border-radius: 4px;
	margin: 20px 0;
	padding: 20px;

}
.lizzee-section h2 {

	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e5e5e5 !important;
	font-size: 20px;
	font-weight: 600;

}


/*--------------------------------------------------------------
# Grid
--------------------------------------------------------------*/

.lizzee-grid {

	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 20px;

}


/*--------------------------------------------------------------
# Column Sizes
--------------------------------------------------------------*/

.lizzee-col-1 { grid-column: span 1; }

.lizzee-col-2 { grid-column: span 2; }

.lizzee-col-3 { grid-column: span 3; }

.lizzee-col-4 { grid-column: span 4; }

.lizzee-col-5 { grid-column: span 5; }

.lizzee-col-6 { grid-column: span 6; }

.lizzee-col-7 { grid-column: span 7; }

.lizzee-col-8 { grid-column: span 8; }

.lizzee-col-9 { grid-column: span 9; }

.lizzee-col-10 { grid-column: span 10; }

.lizzee-col-11 { grid-column: span 11; }

.lizzee-col-12 { grid-column: span 12; }
/*--------------------------------------------------------------
# Padding Utilities
--------------------------------------------------------------*/

/* All Sides */

.p-0 { padding: 0 !important; }
.p-1 { padding: 5px !important; }
.p-2 { padding: 10px !important; }
.p-3 { padding: 15px !important; }
.p-4 { padding: 20px !important; }
.p-5 { padding: 30px !important; }


/* Top */

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 5px !important; }
.pt-2 { padding-top: 10px !important; }
.pt-3 { padding-top: 15px !important; }
.pt-4 { padding-top: 20px !important; }
.pt-5 { padding-top: 30px !important; }


/* Right */

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 5px !important; }
.pr-2 { padding-right: 10px !important; }
.pr-3 { padding-right: 15px !important; }
.pr-4 { padding-right: 20px !important; }
.pr-5 { padding-right: 30px !important; }


/* Bottom */

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 5px !important; }
.pb-2 { padding-bottom: 10px !important; }
.pb-3 { padding-bottom: 15px !important; }
.pb-4 { padding-bottom: 20px !important; }
.pb-5 { padding-bottom: 30px !important; }


/* Left */

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 5px !important; }
.pl-2 { padding-left: 10px !important; }
.pl-3 { padding-left: 15px !important; }
.pl-4 { padding-left: 20px !important; }
.pl-5 { padding-left: 30px !important; }


/*--------------------------------------------------------------
# Margin Utilities
--------------------------------------------------------------*/

/* All Sides */

.m-0 { margin: 0 !important; }
.m-1 { margin: 5px !important; }
.m-2 { margin: 10px !important; }
.m-3 { margin: 15px !important; }
.m-4 { margin: 20px !important; }
.m-5 { margin: 30px !important; }


/* Top */

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 5px !important; }
.mt-2 { margin-top: 10px !important; }
.mt-3 { margin-top: 15px !important; }
.mt-4 { margin-top: 20px !important; }
.mt-5 { margin-top: 30px !important; }


/* Right */

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 5px !important; }
.mr-2 { margin-right: 10px !important; }
.mr-3 { margin-right: 15px !important; }
.mr-4 { margin-right: 20px !important; }
.mr-5 { margin-right: 30px !important; }


/* Bottom */

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 5px !important; }
.mb-2 { margin-bottom: 10px !important; }
.mb-3 { margin-bottom: 15px !important; }
.mb-4 { margin-bottom: 20px !important; }
.mb-5 { margin-bottom: 30px !important; }


/* Left */

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 5px !important; }
.ml-2 { margin-left: 10px !important; }
.ml-3 { margin-left: 15px !important; }
.ml-4 { margin-left: 20px !important; }
.ml-5 { margin-left: 30px !important; }

/*--------------------------------------------------------------
# Action Buttons
--------------------------------------------------------------*/

.lizzee-actions {
	display: flex;
	justify-content: center; /* Horizontally centers the buttons */
	align-items: center;     /* Vertically centers the buttons */
	gap: 10px;
}
/*--------------------------------------------------------------
# Page Header
--------------------------------------------------------------*/

.lizzee-page-header {

	margin-bottom: 20px;

}
.lizzee-page-title {
	display: flex;
	align-items: center;
	gap: 15px;
}

.lizzee-page-header h1 {

	margin: 0;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.3;

}
.lizzee-page-header h2 {

	margin: 5px 0 0;
	font-size: 22px;
	font-weight: 600;
	color: #1d2327;

}
/*--------------------------------------------------------------
# Reschedule Class List
--------------------------------------------------------------*/

.lizzee-reschedule-class-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 15px 0;
	border-bottom: 1px solid #ccd0d4;
}

.lizzee-reschedule-class-row span {
	font-size: 18px;
}

.lizzee-reschedule-class-row .button {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 10px 20px;
	border: 1px solid #2271b1;
	border-radius: 4px;
	background: #ffffff;
	font-size: 16px;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}

.lizzee-reschedule-class-row .button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.lizzee-reschedule-unavailable {
	opacity: 0.65;
}
/*--------------------------------------------------------------
# Reschedule Select Button
--------------------------------------------------------------*/

.lizzee-reschedule-class-row .button {

	display: block;
	width: 100%;
	padding: 10px 20px;

	background: #2271b1;
	border: 1px solid #2271b1;
	border-radius: 4px;

	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;

	cursor: pointer;

}

.lizzee-reschedule-class-row .button:hover {

	background: #135e96;
	border-color: #135e96;
	color: #ffffff;

}

.lizzee-reschedule-class-row .button:disabled {

	background: #dddddd;
	border-color: #cccccc;
	color: #666666;

	cursor: not-allowed;
	opacity: 1;

}
/*--------------------------------------------------------------
# Confirm Reschedule Actions
--------------------------------------------------------------*/

.lizzee-reschedule-confirm-actions {

	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;

	margin-top: 25px;

}

.lizzee-reschedule-confirm-actions .button {

	display: inline-block;
	width: auto;
	margin: 0;
	padding: 12px 24px;

	border: 1px solid #2271b1;
	border-radius: 4px;

	background: #ffffff;
	color: #2271b1;

	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;

	cursor: pointer;

}

.lizzee-reschedule-confirm-actions .button:hover {

	background: #f0f6fc;
	border-color: #135e96;
	color: #135e96;

}

.lizzee-reschedule-confirm-actions .button-primary {

	background: #2271b1;
	border-color: #2271b1;
	color: #ffffff;

}

.lizzee-reschedule-confirm-actions .button-primary:hover {

	background: #135e96;
	border-color: #135e96;
	color: #ffffff;

}

/* Public Student Reschedule only. The shared admin renderer and other public
   pages do not have this app-wrapper/summary structure. Keep existing markup,
   conditional messages, calendar states and inline visibility untouched. */
body.lizzee-app:has(.lizzee-app-main > .lizzee-section > .lizzee-page-header > h1, .lizzee-app-main > .lizzee-section > .lizzee-reschedule-success) {
	background: #f5f7fa;

	& .lizzee-app-main {
		box-sizing: border-box;
		width: calc(100% - 48px);
		max-width: 1160px;
		margin: 28px auto;
		padding: 28px;
		border: 1px solid #dfe5ec;
		border-radius: 10px;
		background: #fff;
		box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
		color: #172033;
		font: 16px/1.5 Arial, Helvetica, sans-serif;
		overflow-wrap: anywhere;
	}

	& .lizzee-app-main .lizzee-section {
		border-color: #dfe5ec !important;
		border-radius: 8px;
	}

	& .lizzee-page-header {
		margin-bottom: 24px;
	}

	& .lizzee-page-header h1 {
		font: 700 clamp(28px, 3vw, 36px)/1.25 Georgia, 'Times New Roman', serif;
		color: #111827;
	}

	/* Join the existing information and status panels visually, preserving
	   both columns and every dynamic FREE/fee/YES/NO output. */
	& .lizzee-section:has(> .lizzee-page-header),
	& .lizzee-section:has(> .lizzee-page-header) + .lizzee-section {
		margin: 0;
		padding: 0;
		border: 0 !important;
		background: transparent !important;
	}

	& .lizzee-section:has(> .lizzee-page-header) > .lizzee-grid,
	& .lizzee-section:has(> .lizzee-page-header) + .lizzee-section > .lizzee-grid {
		gap: 24px;
		padding: 24px;
		border: 1px solid #e1e7ef;
		background: #f7f9fb;
	}

	& .lizzee-section:has(> .lizzee-page-header) > .lizzee-grid {
		padding-bottom: 12px;
		border-bottom: 0;
		border-radius: 8px 8px 0 0;
	}

	& .lizzee-section:has(> .lizzee-page-header) > .lizzee-grid > :last-child {
		padding-left: 24px;
		border-left: 1px solid #dfe5ec;
	}

	& .lizzee-section:has(> .lizzee-page-header) h3 {
		margin: 0 0 6px;
		color: #52627b;
		font: 400 16px/1.5 Arial, Helvetica, sans-serif;
	}

	& .lizzee-section:has(> .lizzee-page-header) p {
		margin: 0 0 12px;
		font-size: 18px;
		font-weight: 600;
	}

	& .lizzee-section:has(> .lizzee-page-header) .lizzee-grid > :last-child p:last-child {
		margin-bottom: 0;
		color: #52627b;
		font-size: 16px;
		font-weight: 400;
	}

	& .lizzee-section:has(> .lizzee-page-header) + .lizzee-section > .lizzee-grid {
		padding-top: 12px;
		border-top: 0;
		border-radius: 0 0 8px 8px;
		text-align: left !important; /* Existing status grid has inline centering. */
	}

	& .lizzee-section:has(> .lizzee-page-header) + .lizzee-section p {
		display: inline-block;
		margin: 0;
		padding: 10px 14px;
		border: 1px solid #dce8f3;
		border-radius: 6px;
		background: #eaf2f9;
		color: #214d73;
		font-weight: 600;
	}

	& .lizzee-section:has(#lizzee-reschedule-select) {
		margin: 28px 0 0;
		padding: 0;
		border: 0 !important;
	}

	& #lizzee-reschedule-select > h2 {
		margin: 0 0 16px;
		padding: 0;
		border: 0 !important;
		font: 700 26px/1.3 Georgia, 'Times New Roman', serif;
		color: #111827;
	}

	& #lizzee-reschedule-class-list > .lizzee-section {
		margin: 0 0 24px;
		padding: 0 20px;
	}

	& .lizzee-reschedule-class-row {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(140px, 1fr);
		gap: 20px;
		padding: 16px 0;
		border-color: #e1e7ef;
	}

	& .lizzee-reschedule-class-row:last-child {
		border-bottom: 0;
	}

	& .lizzee-reschedule-class-row > div {
		min-width: 0;
		grid-column: auto;
	}

	& .lizzee-reschedule-class-row h3 {
		margin: 0;
		color: #125f9f;
		font: 600 16px/1.5 Arial, Helvetica, sans-serif;
	}

	& .lizzee-reschedule-class-row span {
		font-size: 18px;
		font-weight: 600;
	}

	& .lizzee-app-main .button {
		box-sizing: border-box;
		min-height: 44px;
		padding: 10px 20px;
		border: 1px solid #0962ac;
		border-radius: 6px;
		background: #0966b2;
		color: #fff;
		font: 600 16px/1.4 Arial, Helvetica, sans-serif;
		text-decoration: none;
	}

	& .lizzee-app-main .button:not(:disabled):hover {
		border-color: #064c86;
		background: #075394;
		color: #fff;
	}

	& .lizzee-app-main :is(.button, .fc-button, a):focus-visible {
		outline: 3px solid #174e85;
		outline-offset: 3px;
	}

	& .lizzee-app-main .button:disabled {
		border-color: #d4dbe3;
		background: #e9edf2;
		color: #596579;
		cursor: not-allowed;
	}

	& #lizzee-calendar {
		padding: 20px;
		border: 1px solid #dfe5ec;
		border-radius: 8px;
		--fc-border-color: #e1e6ed;
	}

	& #lizzee-calendar .fc-header-toolbar {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) 44px;
		gap: 16px;
		max-width: 440px;
		margin: 0 auto 20px;
		text-align: center;
	}

	& #lizzee-calendar .fc-toolbar-title {
		margin: 0;
		padding: 0;
		border: 0 !important;
		font: 600 clamp(20px, 2.5vw, 28px)/1.3 Arial, Helvetica, sans-serif;
		font-size: clamp(20px, 2.5vw, 28px) !important;
		color: #172033;
	}

	& #lizzee-calendar .fc-button {
		width: 44px;
		min-height: 44px;
		padding: 8px;
		border-color: #dce3eb !important;
		border-radius: 6px !important;
		background: #f3f6fa !important;
		color: #245d8b !important;
	}

	& #lizzee-calendar .fc-button:not(:disabled):hover {
		background: #e3edf7 !important;
	}

	& #lizzee-calendar .fc-col-header-cell {
		background: #f1f5f9;
	}

	& #lizzee-calendar .fc-col-header-cell-cushion {
		padding: 8px 2px;
		color: #52627b !important;
		font-weight: 600;
	}

	& #lizzee-calendar .fc-daygrid-day-frame {
		min-height: 76px;
	}

	/* This calendar uses day backgrounds, not event rows. */
	& #lizzee-calendar .fc-daygrid-day-events {
		min-height: 0;
		margin: 0;
	}

	& #lizzee-calendar .fc-daygrid-day-number {
		padding: 8px 10px;
		color: #26354b !important;
	}

	& #lizzee-calendar :is(.fc-day-other, .fc-day-today) {
		background: #f5f7fa;
	}

	& #lizzee-calendar .lizzee-available {
		background: #2c79b5 !important;
	}

	& #lizzee-calendar .lizzee-selected {
		background: #095da5 !important;
		box-shadow: inset 0 0 0 2px #064b85;
	}

	& #lizzee-calendar :is(.lizzee-available, .lizzee-selected) .fc-daygrid-day-number {
		color: #fff !important;
	}

	& #lizzee-calendar :is(.lizzee-unavailable, .lizzee-original, .fc-day-past) {
		background: #edf0f4 !important;
	}

	& #lizzee-calendar :is(.lizzee-unavailable, .lizzee-original, .fc-day-past) .fc-daygrid-day-number {
		color: #657186 !important;
	}

	& .lizzee-reschedule-confirm-actions {
		flex-wrap: wrap;
	}

	@media (max-width: 600px) {
		& .lizzee-app-main {
			width: calc(100% - 24px);
			margin: 16px auto;
			padding: 16px;
		}

		& .lizzee-grid > .lizzee-col-6 {
			grid-column: 1 / -1;
		}

		& .lizzee-section:has(> .lizzee-page-header) > .lizzee-grid,
		& .lizzee-section:has(> .lizzee-page-header) + .lizzee-section > .lizzee-grid {
			gap: 16px;
			padding-right: 16px;
			padding-left: 16px;
		}

		& .lizzee-section:has(> .lizzee-page-header) > .lizzee-grid > :last-child {
			padding: 16px 0 0;
			border-top: 1px solid #dfe5ec;
			border-left: 0;
		}

		& #lizzee-reschedule-class-list > .lizzee-section {
			padding: 0 16px;
		}

		& .lizzee-reschedule-class-row {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			gap: 12px;
		}

		& .lizzee-reschedule-class-row > div:first-child {
			grid-column: 1 / -1;
		}

		& #lizzee-calendar {
			padding: 12px;
		}

		& #lizzee-calendar .fc-header-toolbar {
			gap: 8px;
		}

		& #lizzee-calendar .fc-col-header-cell-cushion {
			font-size: 12px;
		}

		& #lizzee-calendar .fc-daygrid-day-frame {
			min-height: 48px;
		}

		& #lizzee-calendar .fc-daygrid-day-number {
			padding: 6px;
			font-size: 14px;
		}
	}
}