/* ==========================================================================
   "Dane klienta" page (checkout step 2) — Figma "Checkout / 02 Dane klienta"
   (desktop + mobile). Loaded only on template-dane-klienta.php, after
   assets/css/checkout.css (shared page header/step indicator/order-summary/
   benefits band). This file only covers the "Dane kontaktowe" form itself.
   ========================================================================== */

.dane-klienta-form-panel {
	gap: 20px;
}

.dane-klienta-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

.dane-klienta-form-row {
	display: flex;
	gap: 16px;
}

.dane-klienta-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 0;
	min-width: 0;
}

.dane-klienta-field label,
.dane-klienta-form-row label {
	font-family: var(--deercoffe-font-heading);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.04em;
	color: var(--deercoffe-color-text);
}

.dane-klienta-field input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--deercoffe-color-gray-200, #bbb);
	border-radius: 2px;
	background: #fff;
	font-family: var(--deercoffe-font-body);
	font-size: 14px;
	color: var(--deercoffe-color-text);
}

.dane-klienta-field input::placeholder {
	color: #bbb;
}

.dane-klienta-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--deercoffe-font-body);
	font-size: 15px;
	color: var(--deercoffe-color-muted);
	cursor: pointer;
}

.dane-klienta-checkbox input {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--deercoffe-color-primary);
}

/* Password field revealed under the checkbox above
   (assets/js/dane-klienta-account.js toggles the `hidden` attribute). */

.dane-klienta-password-field[hidden] {
	display: none;
}

.dane-klienta-privacy {
	font-family: var(--deercoffe-font-body);
	font-size: 15px;
	color: var(--deercoffe-color-muted);
	margin: 0;
}

.dane-klienta-privacy a {
	color: var(--deercoffe-color-primary);
}

@media (max-width: 900px) {
	.dane-klienta-form-panel {
		gap: 16px;
	}

	.dane-klienta-form {
		gap: 16px;
	}

	.dane-klienta-form-row {
		flex-direction: column;
		gap: 16px;
	}

	.dane-klienta-checkbox,
	.dane-klienta-privacy {
		font-size: 14px;
	}
}