/**
 * Gabiza frontend styles.
 *
 * Shared frontend design for:
 * - Authentication
 * - Customer account
 * - Public booking wizard
 */


/* =========================================================
   Base
   ========================================================= */

.gbz-front {
	--gbz-primary-soft: color-mix(
		in srgb,
		var(--gbz-primary, #6d5dfb) 9%,
		white
	);
	--gbz-primary-soft-strong: color-mix(
		in srgb,
		var(--gbz-primary, #6d5dfb) 14%,
		white
	);
	--gbz-text: #20212b;
	--gbz-muted: #777986;
	--gbz-border: #e7e7ed;
	--gbz-surface: #ffffff;
	--gbz-background: #f7f7fa;
	--gbz-danger: #c83d4d;
	--gbz-success: #278559;

	width: 100%;
	max-width: 1120px;
	margin: 42px auto;
	padding: 0 20px;
	box-sizing: border-box;

	color: var(--gbz-text);

	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Arial,
		sans-serif;
}

.gbz-front *,
.gbz-front *::before,
.gbz-front *::after {
	box-sizing: border-box;
}


/*
 * Prevent the active WordPress theme from applying
 * its own heading typography inside Gabiza.
 */

.gbz-front h1,
.gbz-front h2,
.gbz-front h3,
.gbz-front h4,
.gbz-front h5,
.gbz-front h6,
.gbz-front p,
.gbz-front a,
.gbz-front button,
.gbz-front input,
.gbz-front textarea,
.gbz-front select {
	font-family: inherit;
}

.gbz-front a {
	box-shadow: none;
}


/* =========================================================
   Notices
   ========================================================= */

.gbz-front-notice {
	max-width: 760px;
	margin: 0 auto 18px;
	padding: 12px 15px;

	border: 1px solid var(--gbz-border);
	border-radius: 11px;

	font-size: 13px;
	line-height: 1.5;
}

.gbz-front-notice-success {
	border-color: color-mix(
		in srgb,
		var(--gbz-success) 25%,
		var(--gbz-border)
	);

	background: color-mix(
		in srgb,
		var(--gbz-success) 6%,
		white
	);

	color: var(--gbz-success);
}

.gbz-front-notice-error {
	border-color: color-mix(
		in srgb,
		var(--gbz-danger) 25%,
		var(--gbz-border)
	);

	background: color-mix(
		in srgb,
		var(--gbz-danger) 5%,
		white
	);

	color: var(--gbz-danger);
}


/* =========================================================
   Shared frontend forms
   ========================================================= */

.gbz-front-form {
	display: flex;
	flex-direction: column;
	gap: 17px;
}

.gbz-front-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

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

.gbz-front-field label {
	margin: 0;

	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;

	color: var(--gbz-text);
}

.gbz-front-field input,
.gbz-front-field select {
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 9px 12px;

	border: 1px solid var(--gbz-border);
	border-radius: 10px;

	background: #fff;
	box-shadow: none;

	font-size: 13px;
	color: var(--gbz-text);

	outline: none;
}

.gbz-front-field input:focus,
.gbz-front-field select:focus {
	border-color: var(--gbz-primary, #6d5dfb);

	box-shadow:
		0 0 0 3px var(--gbz-primary-soft);
}

.gbz-front-field small {
	font-size: 11px;
	line-height: 1.45;
	color: var(--gbz-muted);
}

.gbz-field-label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}

.gbz-field-label-row a {
	font-size: 11px;
	font-weight: 700;
	text-decoration: none;

	color: var(--gbz-primary, #6d5dfb);
}

.gbz-field-label-row a:hover {
	text-decoration: underline;
}

.gbz-front-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	width: fit-content;

	cursor: pointer;

	font-size: 12px;
	color: var(--gbz-muted);
}

.gbz-front-checkbox input {
	width: 16px;
	height: 16px;
	margin: 0;
}

.gbz-front-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;

	width: 100%;
	min-height: 46px;
	padding: 10px 18px;

	border: 0;
	border-radius: 10px;

	background: var(--gbz-primary, #6d5dfb);
	box-shadow: none;

	cursor: pointer;

	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;

	text-decoration: none !important;

	color: #fff !important;

	transition:
		transform 0.15s ease,
		opacity 0.15s ease,
		box-shadow 0.15s ease;
}

.gbz-front-button:hover {
	opacity: 0.94;
	transform: translateY(-1px);

	box-shadow:
		0 7px 18px
		color-mix(
			in srgb,
			var(--gbz-primary, #6d5dfb) 18%,
			transparent
		);
}

.gbz-front-button-link {
	width: auto;
}

.gbz-form-help {
	margin: -4px 0 0;

	font-size: 11px;
	color: var(--gbz-muted);
}

.gbz-honeypot {
	position: absolute !important;
	left: -99999px !important;

	width: 1px !important;
	height: 1px !important;

	overflow: hidden !important;
}


/* =========================================================
   Authentication
   ========================================================= */

.gbz-auth-shell {
	display: grid;
	grid-template-columns:
		minmax(0, 0.9fr)
		minmax(400px, 1fr);

	gap: 55px;
	align-items: center;

	max-width: 930px;
	min-height: 520px;

	margin: 0 auto;
}

.gbz-auth-shell-small {
	max-width: 800px;
}

.gbz-auth-intro {
	padding: 18px 0;
}

.gbz-auth-eyebrow {
	display: inline-flex;
	align-items: center;

	margin-bottom: 11px;

	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;

	color: var(--gbz-primary, #6d5dfb);
}

.gbz-auth-intro h1 {
	margin: 0 0 12px;

	font-size: clamp(30px, 5vw, 44px);
	line-height: 1.06;
	letter-spacing: -0.035em;

	color: var(--gbz-text);
}

.gbz-auth-intro p {
	max-width: 470px;
	margin: 0;

	font-size: 14px;
	line-height: 1.65;

	color: var(--gbz-muted);
}

.gbz-auth-card {
	padding: 29px;

	border: 1px solid var(--gbz-border);
	border-radius: 18px;

	background: var(--gbz-surface);

	box-shadow:
		0 16px 42px rgba(26, 27, 36, 0.055);
}

.gbz-auth-switch {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	gap: 5px;

	margin-top: 20px;
	padding-top: 18px;

	border-top: 1px solid var(--gbz-border);

	font-size: 12px;
	color: var(--gbz-muted);
}

.gbz-auth-switch a {
	font-weight: 800;
	text-decoration: none;

	color: var(--gbz-primary, #6d5dfb);
}

.gbz-auth-switch a:hover {
	text-decoration: underline;
}

.gbz-auth-message-card {
	text-align: center;
}

.gbz-auth-message-card h2 {
	margin: 13px 0 7px;

	font-size: 21px;
	color: var(--gbz-text);
}

.gbz-auth-message-card p {
	margin: 0 0 19px;

	font-size: 13px;
	line-height: 1.55;

	color: var(--gbz-muted);
}

.gbz-message-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	margin: 0 auto;

	border-radius: 13px;

	background: var(--gbz-primary-soft);
	color: var(--gbz-primary, #6d5dfb);
}

.gbz-message-icon .dashicons {
	width: 23px;
	height: 23px;

	font-size: 23px;
}


/* =========================================================
   Customer Account
   ========================================================= */

.gbz-account-shell {
	max-width: 1040px;
	margin: 0 auto;
}

.gbz-account-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap: 28px;

	margin-bottom: 24px;
}

.gbz-account-header h1 {
	margin: 0 0 7px;

	font-size: clamp(27px, 4vw, 36px);
	line-height: 1.1;
	letter-spacing: -0.03em;

	color: var(--gbz-text);
}

.gbz-account-header p {
	margin: 0;

	font-size: 12px;
	line-height: 1.5;

	color: var(--gbz-muted);
}

.gbz-account-logout {
	min-height: 38px;
	padding: 7px 13px;

	border: 1px solid var(--gbz-border);
	border-radius: 9px;

	background: #fff;

	cursor: pointer;

	font-size: 11px;
	font-weight: 700;

	color: var(--gbz-text);
}

.gbz-account-logout:hover {
	border-color: var(--gbz-primary, #6d5dfb);
	color: var(--gbz-primary, #6d5dfb);
}

.gbz-account-grid {
	display: grid;
	grid-template-columns:
		minmax(250px, 0.75fr)
		minmax(0, 1.6fr);

	gap: 18px;

	align-items: start;
}

.gbz-account-card {
	padding: 20px;

	border: 1px solid var(--gbz-border);
	border-radius: 15px;

	background: #fff;

	box-shadow:
		0 10px 28px rgba(26, 27, 36, 0.035);
}

.gbz-account-card-header {
	margin-bottom: 16px;
}

.gbz-account-card-header h2 {
	margin: 0 0 3px;

	font-size: 16px;
	line-height: 1.3;

	color: var(--gbz-text);
}

.gbz-account-card-header p {
	margin: 0;

	font-size: 11px;
	line-height: 1.45;

	color: var(--gbz-muted);
}

.gbz-account-details {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.gbz-account-details > div {
	display: flex;
	flex-direction: column;
	gap: 3px;

	padding-bottom: 11px;

	border-bottom: 1px solid var(--gbz-border);
}

.gbz-account-details > div:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.gbz-account-details span {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;

	color: var(--gbz-muted);
}

.gbz-account-details strong {
	overflow-wrap: anywhere;

	font-size: 12px;

	color: var(--gbz-text);
}


/* Account empty state */

.gbz-account-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	min-height: 170px;
	padding: 18px;

	text-align: center;
}

.gbz-account-empty .dashicons {
	width: 28px;
	height: 28px;

	margin-bottom: 10px;

	font-size: 28px;

	color: var(--gbz-primary, #6d5dfb);
}

.gbz-account-empty strong {
	margin-bottom: 4px;

	font-size: 12px;
	color: var(--gbz-text);
}

.gbz-account-empty p {
	max-width: 410px;
	margin: 0;

	font-size: 10px;
	line-height: 1.5;

	color: var(--gbz-muted);
}


/* Account bookings */

.gbz-account-bookings {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gbz-account-booking {
	display: grid;
	grid-template-columns:
		50px
		minmax(0, 1fr)
		auto;

	gap: 12px;
	align-items: center;

	padding: 10px;

	border: 1px solid var(--gbz-border);
	border-radius: 11px;

	background: #fafafd;
}

.gbz-account-booking-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 50px;
	height: 50px;

	border-radius: 10px;

	background: var(--gbz-primary-soft);
	color: var(--gbz-primary, #6d5dfb);
}

.gbz-account-booking-date span {
	font-size: 8px;
	font-weight: 800;
	text-transform: uppercase;
}

.gbz-account-booking-date strong {
	font-size: 18px;
	line-height: 1;
}

.gbz-account-booking-main {
	display: flex;
	flex-direction: column;
	gap: 2px;

	min-width: 0;
}

.gbz-account-booking-main strong {
	overflow: hidden;

	font-size: 12px;

	text-overflow: ellipsis;
	white-space: nowrap;

	color: var(--gbz-text);
}

.gbz-account-booking-main span {
	font-size: 10px;
	color: var(--gbz-muted);
}

.gbz-account-booking-main small {
	font-size: 9px;
	color: var(--gbz-muted);
}

.gbz-account-booking-status {
	display: inline-flex;
	align-items: center;

	min-height: 24px;
	padding: 4px 8px;

	border-radius: 999px;

	background: var(--gbz-primary-soft);

	font-size: 9px;
	font-weight: 800;

	color: var(--gbz-primary, #6d5dfb);
}


/* =========================================================
   Public Booking Wizard
   ========================================================= */

/*
 * Booking intentionally uses a narrower layout than
 * the customer dashboard.
 *
 * The goal is to keep all choices visible and easy
 * to scan without excessive empty space.
 */

.gbz-booking-front {
	max-width: 920px;

	margin-top: 32px;
	margin-bottom: 42px;
}


/* =========================================================
   Booking Header
   ========================================================= */

.gbz-booking-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap: 24px;

	margin-bottom: 17px;
}

.gbz-booking-header h1 {
	margin: 0 0 6px;

	font-size: clamp(27px, 4vw, 34px);
	line-height: 1.08;
	letter-spacing: -0.03em;

	color: var(--gbz-text);
}

.gbz-booking-header p {
	max-width: 540px;
	margin: 0;

	font-size: 12px;
	line-height: 1.55;

	color: var(--gbz-muted);
}

.gbz-booking-step-count {
	flex: 0 0 auto;
	padding-top: 3px;
}

.gbz-booking-step-count span {
	display: inline-flex;
	align-items: center;

	min-height: 30px;
	padding: 5px 10px;

	border: 1px solid var(--gbz-border);
	border-radius: 999px;

	background: #fff;

	font-size: 10px;
	font-weight: 700;

	color: var(--gbz-muted);
}


/* =========================================================
   Booking Progress
   ========================================================= */

.gbz-booking-progress {
	position: relative;

	display: grid;
	grid-template-columns: repeat(4, 1fr);

	margin-bottom: 15px;
	padding: 11px 14px;

	border: 1px solid var(--gbz-border);
	border-radius: 13px;

	background: #fff;
}

.gbz-booking-progress::before {
	position: absolute;

	top: 26px;
	left: 12.5%;
	right: 12.5%;

	height: 1px;

	background: var(--gbz-border);

	content: "";
}

.gbz-progress-step {
	position: relative;
	z-index: 1;

	display: flex;
	flex-direction: column;
	align-items: center;

	gap: 4px;

	text-align: center;
}

.gbz-progress-number {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 28px;
	height: 28px;

	border: 1px solid var(--gbz-border);
	border-radius: 50%;

	background: #fff;

	font-size: 10px;
	font-weight: 800;

	color: var(--gbz-muted);
}

.gbz-progress-number .dashicons {
	width: 14px;
	height: 14px;

	font-size: 14px;
}

.gbz-progress-label {
	font-size: 9px;
	font-weight: 700;

	color: var(--gbz-muted);
}

.gbz-progress-step.is-current .gbz-progress-number,
.gbz-progress-step.is-complete .gbz-progress-number {
	border-color: var(--gbz-primary, #6d5dfb);

	background: var(--gbz-primary, #6d5dfb);

	color: #fff;
}

.gbz-progress-step.is-current .gbz-progress-label {
	color: var(--gbz-primary, #6d5dfb);
}


/* =========================================================
   Booking Main Card
   ========================================================= */

.gbz-booking-card {
	margin-bottom: 15px;
	padding: 20px;

	border: 1px solid var(--gbz-border);
	border-radius: 15px;

	background: #fff;

	box-shadow:
		0 9px 26px rgba(26, 27, 36, 0.035);
}

.gbz-booking-section-heading {
	display: flex;
	align-items: flex-start;

	gap: 11px;

	margin-bottom: 18px;
}

.gbz-booking-section-number {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 32px;

	width: 32px;
	height: 32px;

	border-radius: 9px;

	background: var(--gbz-primary-soft);

	font-size: 11px;
	font-weight: 800;

	color: var(--gbz-primary, #6d5dfb);
}

.gbz-booking-section-heading h2 {
	margin: 0 0 2px;

	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;

	color: var(--gbz-text);
}

.gbz-booking-section-heading p {
	margin: 0;

	font-size: 11px;
	line-height: 1.45;

	color: var(--gbz-muted);
}


/* =========================================================
   Selected Booking Summary
   ========================================================= */

.gbz-booking-summary {
	display: grid;
	grid-template-columns:
		repeat(
			auto-fit,
			minmax(130px, 1fr)
		);

	gap: 1px;

	margin-bottom: 12px;

	overflow: hidden;

	border: 1px solid var(--gbz-border);
	border-radius: 11px;

	background: var(--gbz-border);
}

.gbz-booking-summary > div {
	display: flex;
	flex-direction: column;
	gap: 2px;

	min-height: 50px;
	padding: 9px 12px;

	background: #fafafd;
}

.gbz-booking-summary span {
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;

	color: var(--gbz-muted);
}

.gbz-booking-summary strong {
	font-size: 11px;
	line-height: 1.35;

	color: var(--gbz-text);
}


/* =========================================================
   Service Categories
   ========================================================= */

/*
 * Desktop:
 *
 * Category information stays in a compact left column,
 * services appear beside it.
 *
 * This avoids large vertical gaps when a category
 * contains only one service.
 */

.gbz-service-category-section {
	display: grid;
	grid-template-columns:
		145px
		minmax(0, 1fr);

	gap: 18px;

	align-items: start;
}

.gbz-service-category-section + .gbz-service-category-section {
	margin-top: 16px;
	padding-top: 16px;

	border-top: 1px solid var(--gbz-border);
}

.gbz-service-category-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	gap: 3px;

	padding-top: 4px;
}

.gbz-service-category-title h3 {
	margin: 0;

	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;

	color: var(--gbz-text);
}

.gbz-service-category-title > span {
	font-size: 9px;
	line-height: 1.4;

	color: var(--gbz-muted);
}


/* =========================================================
   Service Cards
   ========================================================= */

.gbz-public-service-grid {
	display: grid;
	grid-template-columns:
		repeat(
			auto-fill,
			minmax(220px, 1fr)
		);

	gap: 8px;
}

.gbz-public-service-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	min-width: 0;
	min-height: 96px;
	padding: 12px 13px;

	border: 1px solid var(--gbz-border);
	border-radius: 11px;

	background: #fff;

	text-decoration: none !important;

	color: inherit;

	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		transform 0.15s ease;
}

.gbz-public-service-card:hover {
	border-color: color-mix(
		in srgb,
		var(--gbz-primary, #6d5dfb) 42%,
		var(--gbz-border)
	);

	box-shadow:
		0 7px 20px rgba(26, 27, 36, 0.05);

	transform: translateY(-1px);
}

.gbz-service-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap: 9px;
}

.gbz-service-card-top > div:first-child {
	min-width: 0;
}

.gbz-service-card-top h4 {
	margin: 0 0 3px;

	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;

	color: var(--gbz-text);
}

.gbz-service-card-top p {
	display: -webkit-box;

	margin: 0;

	overflow: hidden;

	font-size: 9px;
	line-height: 1.4;

	color: var(--gbz-muted);

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.gbz-service-select-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 28px;

	width: 28px;
	height: 28px;

	border-radius: 8px;

	background: var(--gbz-primary-soft);

	color: var(--gbz-primary, #6d5dfb);

	transition:
		background 0.15s ease,
		color 0.15s ease;
}

.gbz-public-service-card:hover
.gbz-service-select-icon,
.gbz-public-employee-card:hover
.gbz-service-select-icon {
	background: var(--gbz-primary, #6d5dfb);
	color: #fff;
}

.gbz-service-select-icon .dashicons {
	width: 14px;
	height: 14px;

	font-size: 14px;
}

.gbz-service-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 10px;

	margin-top: 10px;
	padding-top: 8px;

	border-top: 1px solid var(--gbz-border);
}

.gbz-service-card-meta > span {
	display: inline-flex;
	align-items: center;

	gap: 4px;

	font-size: 9px;

	color: var(--gbz-muted);
}

.gbz-service-card-meta .dashicons {
	width: 13px;
	height: 13px;

	font-size: 13px;
}

.gbz-service-card-meta strong {
	font-size: 10px;
	font-weight: 800;

	color: var(--gbz-text);
}


/* =========================================================
   Professional Selection
   ========================================================= */

.gbz-public-employee-grid {
	display: grid;
	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);

	gap: 9px;
}

.gbz-public-employee-card {
	display: grid;
	grid-template-columns:
		50px
		minmax(0, 1fr)
		auto;

	gap: 10px;
	align-items: center;

	padding: 10px;

	border: 1px solid var(--gbz-border);
	border-radius: 11px;

	background: #fff;

	text-decoration: none !important;

	color: inherit;

	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		transform 0.15s ease;
}

.gbz-public-employee-card:hover {
	border-color: color-mix(
		in srgb,
		var(--gbz-primary, #6d5dfb) 42%,
		var(--gbz-border)
	);

	box-shadow:
		0 7px 20px rgba(26, 27, 36, 0.05);

	transform: translateY(-1px);
}

.gbz-public-employee-photo {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 50px;
	height: 50px;

	overflow: hidden;

	border-radius: 10px;

	background: var(--gbz-primary-soft);

	color: var(--gbz-primary, #6d5dfb);
}

.gbz-public-employee-photo img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

.gbz-public-employee-photo .dashicons {
	width: 21px;
	height: 21px;

	font-size: 21px;
}

.gbz-public-employee-content {
	min-width: 0;
}

.gbz-public-employee-content h3 {
	margin: 0 0 2px;

	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;

	color: var(--gbz-text);
}

.gbz-public-employee-content > p {
	margin: 0;

	font-size: 9px;
	line-height: 1.4;

	color: var(--gbz-muted);
}

.gbz-employee-service-meta {
	display: flex;
	align-items: center;

	gap: 8px;

	margin-top: 5px;

	font-size: 9px;

	color: var(--gbz-muted);
}

.gbz-employee-service-meta strong {
	color: var(--gbz-text);
}


/* =========================================================
   Date Selection
   ========================================================= */

.gbz-public-date-form {
	display: grid;
	grid-template-columns:
		minmax(190px, 270px)
		auto;

	gap: 9px;

	align-items: end;

	max-width: 500px;
}

.gbz-public-date-form
.gbz-front-field input {
	min-height: 41px;
}

.gbz-public-check-button {
	width: auto;
	min-width: 160px;
	min-height: 41px;
}


/* =========================================================
   Available Times
   ========================================================= */

.gbz-public-times-section {
	margin-top: 18px;
	padding-top: 16px;

	border-top: 1px solid var(--gbz-border);
}

.gbz-public-times-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap: 16px;

	margin-bottom: 10px;
}

.gbz-public-times-heading h3 {
	margin: 0 0 2px;

	font-size: 13px;
	font-weight: 700;

	color: var(--gbz-text);
}

.gbz-public-times-heading p {
	margin: 0;

	font-size: 9px;

	color: var(--gbz-muted);
}

.gbz-public-times-heading > span {
	padding: 4px 8px;

	border-radius: 999px;

	background: var(--gbz-primary-soft);

	font-size: 8px;
	font-weight: 700;

	color: var(--gbz-primary, #6d5dfb);
}


/* Time slots */

.gbz-public-slot-grid {
	display: grid;
	grid-template-columns:
		repeat(
			auto-fill,
			minmax(85px, 1fr)
		);

	gap: 6px;
}

.gbz-public-slot {
	position: relative;

	cursor: pointer;
}

.gbz-public-slot input {
	position: absolute;

	width: 1px;
	height: 1px;

	opacity: 0;

	pointer-events: none;
}

.gbz-public-slot > span {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 4px;

	min-height: 39px;
	padding: 6px 7px;

	border: 1px solid var(--gbz-border);
	border-radius: 8px;

	background: #fff;

	transition:
		border-color 0.15s ease,
		background 0.15s ease,
		box-shadow 0.15s ease;
}

.gbz-public-slot strong {
	font-size: 10px;
	font-weight: 700;

	color: var(--gbz-text);
}

.gbz-public-slot small {
	font-size: 8px;

	color: var(--gbz-muted);
}

.gbz-public-slot:hover > span {
	border-color: var(--gbz-primary, #6d5dfb);
}

.gbz-public-slot input:checked + span {
	border-color: var(--gbz-primary, #6d5dfb);

	background: var(--gbz-primary-soft);

	box-shadow:
		0 0 0 1px
		var(--gbz-primary, #6d5dfb);
}

.gbz-public-slot input:checked + span strong {
	color: var(--gbz-primary, #6d5dfb);
}


/* =========================================================
   Booking Continue / Back
   ========================================================= */

.gbz-public-continue {
	display: flex;
	justify-content: flex-end;

	margin-top: 15px;
}

.gbz-public-continue .gbz-front-button {
	width: auto;
	min-width: 145px;
}

.gbz-public-continue .dashicons,
.gbz-public-final-summary .dashicons {
	width: 15px;
	height: 15px;

	margin-left: 4px;

	font-size: 15px;
}

.gbz-booking-back {
	margin-top: 16px;
	padding-top: 13px;

	border-top: 1px solid var(--gbz-border);
}

.gbz-booking-back a {
	display: inline-flex;
	align-items: center;

	gap: 4px;

	font-size: 9px;
	font-weight: 700;

	text-decoration: none;

	color: var(--gbz-muted);
}

.gbz-booking-back a:hover {
	color: var(--gbz-primary, #6d5dfb);
}

.gbz-booking-back .dashicons {
	width: 13px;
	height: 13px;

	font-size: 13px;
}


/* =========================================================
   Signed-in / Guest Information
   ========================================================= */

.gbz-public-account-info {
	display: flex;
	align-items: flex-start;

	gap: 9px;

	margin-bottom: 16px;
	padding: 10px 12px;

	border: 1px solid color-mix(
		in srgb,
		var(--gbz-primary, #6d5dfb) 18%,
		var(--gbz-border)
	);

	border-radius: 10px;

	background: color-mix(
		in srgb,
		var(--gbz-primary, #6d5dfb) 4%,
		white
	);
}

.gbz-public-account-info > .dashicons {
	flex: 0 0 auto;

	width: 16px;
	height: 16px;

	margin-top: 1px;

	font-size: 16px;

	color: var(--gbz-primary, #6d5dfb);
}

.gbz-public-account-info strong {
	display: block;

	margin-bottom: 2px;

	font-size: 10px;

	color: var(--gbz-text);
}

.gbz-public-account-info p {
	margin: 0;

	font-size: 9px;
	line-height: 1.45;

	color: var(--gbz-muted);
}


/* =========================================================
   Booking Customer Details
   ========================================================= */

.gbz-public-details-form {
	display: flex;
	flex-direction: column;

	gap: 13px;
}

.gbz-public-details-form
.gbz-front-field input {
	min-height: 41px;
}

.gbz-public-details-form textarea {
	width: 100%;
	min-height: 78px;

	padding: 9px 11px;

	border: 1px solid var(--gbz-border);
	border-radius: 9px;

	background: #fff;
	box-shadow: none;

	font-size: 12px;
	line-height: 1.45;

	color: var(--gbz-text);

	resize: vertical;
	outline: none;
}

.gbz-public-details-form textarea:focus {
	border-color: var(--gbz-primary, #6d5dfb);

	box-shadow:
		0 0 0 3px var(--gbz-primary-soft);
}

.gbz-public-final-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 20px;

	margin-top: 2px;
	padding: 12px 13px;

	border: 1px solid var(--gbz-border);
	border-radius: 11px;

	background: #fafafd;
}

.gbz-public-final-summary > div {
	display: flex;
	flex-direction: column;

	gap: 2px;
}

.gbz-public-final-summary > div span {
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;

	color: var(--gbz-muted);
}

.gbz-public-final-summary > div strong {
	font-size: 17px;
	line-height: 1.2;

	color: var(--gbz-text);
}

.gbz-public-final-summary
.gbz-front-button {
	width: auto;
	min-width: 175px;
}


/* =========================================================
   Empty States
   ========================================================= */

.gbz-public-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	min-height: 155px;
	padding: 20px;

	border: 1px dashed var(--gbz-border);
	border-radius: 11px;

	background: #fafafd;

	text-align: center;
}

.gbz-public-empty-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;

	margin-bottom: 9px;

	border-radius: 10px;

	background: var(--gbz-primary-soft);

	color: var(--gbz-primary, #6d5dfb);
}

.gbz-public-empty-icon .dashicons {
	width: 19px;
	height: 19px;

	font-size: 19px;
}

.gbz-public-empty > strong {
	margin-bottom: 3px;

	font-size: 11px;

	color: var(--gbz-text);
}

.gbz-public-empty > p {
	max-width: 440px;
	margin: 0;

	font-size: 9px;
	line-height: 1.5;

	color: var(--gbz-muted);
}


/* =========================================================
   Booking Confirmation
   ========================================================= */

.gbz-confirmation-shell {
	max-width: 620px;

	margin: 42px auto;

	text-align: center;
}

.gbz-confirmation-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 56px;
	height: 56px;

	margin: 0 auto 13px;

	border-radius: 15px;

	background: var(--gbz-primary-soft);

	color: var(--gbz-primary, #6d5dfb);
}

.gbz-confirmation-icon .dashicons {
	width: 27px;
	height: 27px;

	font-size: 27px;
}

.gbz-confirmation-shell h1 {
	margin: 0 0 8px;

	font-size: clamp(27px, 5vw, 36px);
	line-height: 1.1;
	letter-spacing: -0.03em;

	color: var(--gbz-text);
}

.gbz-confirmation-lead {
	max-width: 520px;

	margin: 0 auto 21px;

	font-size: 11px;
	line-height: 1.55;

	color: var(--gbz-muted);
}

.gbz-confirmation-card {
	overflow: hidden;

	border: 1px solid var(--gbz-border);
	border-radius: 15px;

	background: #fff;

	box-shadow:
		0 10px 30px rgba(26, 27, 36, 0.04);

	text-align: left;
}

.gbz-confirmation-reference {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 18px;

	padding: 14px 17px;

	border-bottom: 1px solid var(--gbz-border);

	background: var(--gbz-primary-soft);
}

.gbz-confirmation-reference span {
	font-size: 9px;
	font-weight: 700;

	color: var(--gbz-muted);
}

.gbz-confirmation-reference strong {
	font-size: 13px;
	letter-spacing: 0.04em;

	color: var(--gbz-primary, #6d5dfb);
}

.gbz-confirmation-details {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.gbz-confirmation-details > div {
	display: flex;
	flex-direction: column;

	gap: 2px;

	padding: 12px 17px;

	border-bottom: 1px solid var(--gbz-border);
}

.gbz-confirmation-details > div:nth-child(odd) {
	border-right: 1px solid var(--gbz-border);
}

.gbz-confirmation-details span {
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;

	color: var(--gbz-muted);
}

.gbz-confirmation-details strong {
	font-size: 11px;

	color: var(--gbz-text);
}

.gbz-confirmation-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	gap: 10px;

	margin-top: 18px;
}

.gbz-confirmation-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 42px;
	padding: 9px 15px;

	border: 1px solid var(--gbz-border);
	border-radius: 9px;

	background: #fff;

	font-size: 10px;
	font-weight: 700;

	text-decoration: none !important;

	color: var(--gbz-text);
}

.gbz-confirmation-secondary:hover {
	border-color: var(--gbz-primary, #6d5dfb);

	color: var(--gbz-primary, #6d5dfb);
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 850px) {

	.gbz-auth-shell {
		grid-template-columns: 1fr;

		gap: 24px;

		min-height: auto;
	}

	.gbz-auth-intro {
		padding-bottom: 0;
	}

	.gbz-account-grid {
		grid-template-columns: 1fr;
	}

	.gbz-booking-front {
		max-width: 760px;
	}

	.gbz-service-category-section {
		grid-template-columns:
			130px
			minmax(0, 1fr);

		gap: 14px;
	}

	.gbz-public-service-grid {
		grid-template-columns:
			repeat(
				auto-fill,
				minmax(200px, 1fr)
			);
	}

	.gbz-public-employee-grid {
		grid-template-columns: 1fr;
	}
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 600px) {

	.gbz-front {
		margin: 26px auto;
		padding: 0 13px;
	}


	/* Authentication */

	.gbz-auth-card {
		padding: 21px 17px;

		border-radius: 15px;
	}

	.gbz-front-grid {
		grid-template-columns: 1fr;
	}


	/* Account */

	.gbz-account-header {
		flex-direction: column;

		gap: 16px;
	}

	.gbz-account-header form,
	.gbz-account-logout {
		width: 100%;
	}

	.gbz-account-booking {
		grid-template-columns:
			48px
			minmax(0, 1fr);
	}

	.gbz-account-booking-status {
		grid-column: 2;

		justify-self: start;
	}


	/* Booking */

	.gbz-booking-front {
		margin-top: 20px;
		margin-bottom: 30px;
	}

	.gbz-booking-header {
		flex-direction: column;

		gap: 10px;

		margin-bottom: 14px;
	}

	.gbz-booking-header h1 {
		font-size: 27px;
	}

	.gbz-booking-progress {
		padding: 10px 5px;
	}

	.gbz-booking-progress::before {
		top: 25px;
	}

	.gbz-progress-label {
		font-size: 8px;
	}

	.gbz-booking-card {
		padding: 16px 13px;

		border-radius: 13px;
	}

	.gbz-booking-section-heading {
		margin-bottom: 16px;
	}


	/* Categories become vertical on mobile */

	.gbz-service-category-section {
		display: block;
	}

	.gbz-service-category-section +
	.gbz-service-category-section {
		margin-top: 16px;
		padding-top: 15px;
	}

	.gbz-service-category-title {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		margin-bottom: 8px;
		padding-top: 0;
	}


	/* Services */

	.gbz-public-service-grid {
		grid-template-columns: 1fr;
	}

	.gbz-public-service-card {
		min-height: auto;
	}


	/* Professionals */

	.gbz-public-employee-grid {
		grid-template-columns: 1fr;
	}


	/* Date */

	.gbz-public-date-form {
		grid-template-columns: 1fr;

		max-width: none;
	}

	.gbz-public-check-button {
		width: 100%;
	}


	/* Slots */

	.gbz-public-slot-grid {
		grid-template-columns:
			repeat(
				3,
				minmax(0, 1fr)
			);
	}

	.gbz-public-times-heading {
		flex-direction: column;

		gap: 6px;
	}


	/* Final */

	.gbz-public-final-summary {
		flex-direction: column;
		align-items: stretch;
	}

	.gbz-public-final-summary
	.gbz-front-button {
		width: 100%;
	}

	.gbz-public-continue
	.gbz-front-button {
		width: 100%;
	}


	/* Confirmation */

	.gbz-confirmation-details {
		grid-template-columns: 1fr;
	}

	.gbz-confirmation-details > div:nth-child(odd) {
		border-right: 0;
	}
}