/* JG Skincare — rezerwacja zabiegów. Style spójne z motywem jc-studio. */

.jg-booking {
	max-width: 1080px;
	margin: 0 auto;
	color: #111;
	font-size: 14px;
	line-height: 1.5;
}

.jg-booking *,
.jg-booking *::before,
.jg-booking *::after { box-sizing: border-box; }

/* --- Krok po kroku ------------------------------------------------------- */
.jg-steps {
	display: flex;
	gap: 0;
	list-style: none;
	margin: 0 0 34px;
	padding: 0;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}
.jg-steps li {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 4px;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #999;
	border-right: 1px solid #eee;
}
.jg-steps li:last-child { border-right: 0; }
.jg-steps b {
	width: 24px; height: 24px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid #ccc; border-radius: 50%;
	font-weight: 400; font-size: 11px;
	color: #999;
}
.jg-steps li.is-active { color: #111; }
.jg-steps li.is-active b { background: #111; border-color: #111; color: #fff; }
.jg-steps li.is-done b { border-color: #111; color: #111; }

.jg-step { display: none; }
.jg-step.is-active { display: block; }

.jg-step-title {
	font-size: 22px;
	font-weight: 400;
	letter-spacing: -.03em;
	margin: 0 0 22px;
}

/* --- Wybór zabiegu -------------------------------------------------------- */
.jg-group {
	border: 0;
	padding: 0;
	margin: 0 0 28px;
}
.jg-group legend {
	padding: 0;
	margin: 0 0 12px;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #777;
}
.jg-choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.jg-choice {
	position: relative;
	display: block;
	cursor: pointer;
}
.jg-choice input {
	position: absolute;
	opacity: 0;
	width: 1px; height: 1px;
}
.jg-choice-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 15px 17px;
	border: 1px solid #ddd;
	background: #fff;
	transition: border-color .15s ease, background .15s ease;
}
.jg-choice:hover .jg-choice-body { border-color: #999; }
.jg-choice input:checked + .jg-choice-body {
	border-color: #111;
	background: #111;
	color: #fff;
}
.jg-choice input:focus-visible + .jg-choice-body { outline: 2px solid #1e84ff; outline-offset: 2px; }
.jg-choice-name { font-size: 14px; }
.jg-choice-meta { font-size: 11px; color: #777; }
.jg-choice input:checked + .jg-choice-body .jg-choice-meta { color: #ccc; }

/* --- Termin --------------------------------------------------------------- */
.jg-date-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.jg-date-row label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.jg-booking input[type="date"],
.jg-booking input[type="text"],
.jg-booking input[type="email"],
.jg-booking input[type="tel"],
.jg-booking textarea {
	border: 1px solid #ccc;
	background: #fff;
	padding: 10px 12px;
	font: inherit;
	color: inherit;
	border-radius: 0;
	width: 100%;
	max-width: 320px;
}
.jg-booking input:focus,
.jg-booking textarea:focus { outline: 2px solid #111; outline-offset: 1px; }
.jg-hint { font-size: 12px; color: #777; margin: 0; }

.jg-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 52px;
	padding: 16px 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
.jg-slots-empty { color: #888; font-size: 13px; margin: 0; }
.jg-slot {
	border: 1px solid #ccc;
	background: #fff;
	padding: 9px 14px;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	min-width: 74px;
}
.jg-slot:hover:not(:disabled) { border-color: #111; }
.jg-slot.is-selected { background: #111; border-color: #111; color: #fff; }
.jg-slot:disabled { color: #c0c0c0; border-color: #eee; cursor: not-allowed; text-decoration: line-through; }

/* --- Dane ----------------------------------------------------------------- */
.jg-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 20px;
	margin: 22px 0 18px;
}
.jg-fields p { margin: 0; }
.jg-fields label {
	display: block;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 6px;
	color: #555;
}
.jg-field--wide { grid-column: 1 / -1; }
.jg-field--wide textarea { max-width: 100%; }

.jg-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 12px;
	color: #444;
	margin: 0 0 10px;
}
.jg-consent input { margin-top: 3px; }

.jg-summary {
	background: #f7f7f7;
	border-left: 2px solid #111;
	padding: 14px 18px;
	font-size: 13px;
	margin: 0 0 6px;
}
.jg-summary:empty { display: none; }
.jg-summary b { font-weight: 600; }

/* --- Nawigacja formularza -------------------------------------------------- */
.jg-nav {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid #ddd;
}
.jg-btn {
	display: inline-block;
	border: 1px solid #111;
	background: #111;
	color: #fff;
	padding: 13px 26px;
	font: inherit;
	font-size: 11px;
	letter-spacing: .09em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
}
.jg-btn:hover { background: #333; border-color: #333; color: #fff; }
.jg-btn--ghost { background: #fff; color: #111; border-color: #ccc; }
.jg-btn--ghost:hover { background: #f2f2f2; color: #111; border-color: #111; }
.jg-btn--submit { margin-left: auto; }

.jg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Komunikaty ------------------------------------------------------------ */
.jg-alert {
	border: 1px solid #111;
	padding: 16px 20px;
	margin: 0 0 26px;
	font-size: 13px;
}
.jg-alert ul { margin: 8px 0 0; padding-left: 18px; }
.jg-alert--error { border-color: #b00020; }
.jg-alert--error strong { color: #b00020; }
.jg-js-error { color: #b00020; font-size: 12px; margin: 10px 0 0; }
.jg-js-error:empty { display: none; }

/* --- Potwierdzenie --------------------------------------------------------- */
.jg-confirm { max-width: 720px; }
.jg-confirm h2 {
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 400;
	letter-spacing: -.04em;
	margin: 6px 0 14px;
}
.jg-confirm-list {
	margin: 24px 0;
	border-top: 1px solid #ddd;
}
.jg-confirm-list div {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 11px 0;
	border-bottom: 1px solid #eee;
}
.jg-confirm-list dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #666; margin: 0; }
.jg-confirm-list dd { margin: 0; text-align: right; }
.jg-confirm .jg-btn { margin-top: 10px; }

@media (max-width: 800px) {
	.jg-choices,
	.jg-fields { grid-template-columns: 1fr; }
	.jg-steps li span { display: none; }
	.jg-steps li { justify-content: center; }
	.jg-booking input[type="date"],
	.jg-booking input[type="text"],
	.jg-booking input[type="email"],
	.jg-booking input[type="tel"],
	.jg-booking textarea { max-width: 100%; }
	.jg-btn { flex: 1; text-align: center; padding: 14px 12px; }
	.jg-btn--submit { margin-left: 0; }
}