/* ==========================================================================
   "Dostawa" page (checkout step 3) — Figma "Checkout / 03 Dostawa / Poza
   zasięgiem" (desktop; no mobile frame designed for this state yet, reuses
   the same <900px stacking as the rest of checkout.css). Loaded only on
   template-dostawa.php, after assets/css/checkout.css (shared page header/
   step indicator/order-summary/benefits band). Covers the "Adres dostawy"
   form and the "Sposób dostawy" method picker.
   ========================================================================== */

.dostawa-form-panel {
	gap: 16px;
}

.dostawa-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

/* Wraps the "Adres dostawy" title + fields so assets/js/dostawa-pickup.js
   (and the server-rendered `hidden` attribute, template-dostawa.php) can hide
   the whole section at once for "Odbiór w palarni" — no delivery address
   needed for a pickup order. Flex column + 16px gap mirrors .dostawa-form's
   own spacing so wrapping these previously-sibling elements doesn't change
   how they look. */

.dostawa-address-section {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dostawa-address-section[hidden] {
	display: none;
}

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

.dostawa-form-row .dostawa-field:first-child {
	flex: 0 0 244px;
}

.dostawa-form-row .dostawa-field:last-child {
	flex: 1 1 0;
	min-width: 0;
}

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

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

.dostawa-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);
}

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

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

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

/* "Dane do faktury" — revealed under the checkbox above when checked
   (assets/js/dostawa-billing.js toggles the `hidden` attribute + this
   class). Boxed like the "Sprawdzamy adres" panel so it reads as a distinct
   sub-section of the same form rather than more top-level fields. */

.dostawa-billing-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
	background: #f6f6f6;
	border-radius: 2px;
}

.dostawa-billing-form[hidden] {
	display: none;
}

/* "Sposób dostawy" method rows — radio group styled as bordered rows,
   selected row gets the thicker sage border (Figma "Poza zasięgiem"). */

.dostawa-shipping-method {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	height: 74px;
	padding: 16px 18px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 2px;
	cursor: pointer;
}

.dostawa-shipping-method.is-selected {
	border: 2px solid var(--deercoffe-color-accent);
	padding: 15px 17px;
}

.dostawa-shipping-method input {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--deercoffe-color-accent);
}

.dostawa-shipping-method-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 0;
	min-width: 0;
}

.dostawa-shipping-method-name {
	font-family: var(--deercoffe-font-body);
	font-size: 15px;
	color: var(--deercoffe-color-text);
}

.dostawa-shipping-method-desc {
	font-family: var(--deercoffe-font-body);
	font-size: 15px;
	color: var(--deercoffe-color-muted);
}

.dostawa-shipping-method-price {
	flex-shrink: 0;
	font-family: var(--deercoffe-font-body);
	font-size: 15px;
	color: var(--deercoffe-color-muted);
}

.dostawa-shipping-method.is-hidden {
	display: none;
}

/* "Wybierz paczkomat" map picker (InPost GeoWidget v5) — shown only while
   "Paczkomat InPost" is selected; assets/js/dostawa-paczkomat.js toggles
   [hidden] to match the selected delivery method radio. */

.dostawa-paczkomat-picker {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	padding: 16px 18px;
	background: #f6f6f6;
	border-radius: 2px;
}

.dostawa-paczkomat-picker[hidden] {
	display: none;
}

.dostawa-paczkomat-selected {
	font-family: var(--deercoffe-font-body);
	font-size: 14px;
	color: var(--deercoffe-color-text);
}

.dostawa-paczkomat-selected:empty {
	display: none;
}

/* Map dialog (template-dostawa.php, opened by assets/js/dostawa-paczkomat.js).
   GeoWidget needs an explicit height to render its map. */

.dostawa-paczkomat-dialog {
	width: min(960px, calc(100vw - 32px));
	max-width: none;
	height: min(720px, calc(100vh - 32px));
	max-height: none;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: #fff;
	box-sizing: border-box;
}

.dostawa-paczkomat-dialog[open] {
	display: flex;
	flex-direction: column;
}

.dostawa-paczkomat-dialog::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.dostawa-paczkomat-dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--deercoffe-color-border);
}

.dostawa-paczkomat-dialog-header h2 {
	margin: 0;
	font-family: var(--deercoffe-font-heading);
	font-size: 20px;
	color: var(--deercoffe-color-text);
}

.dostawa-paczkomat-dialog-close {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 28px;
	line-height: 1;
	color: var(--deercoffe-color-text);
	cursor: pointer;
}

.dostawa-paczkomat-dialog-map {
	flex: 1;
	min-height: 0;
}

.dostawa-paczkomat-dialog-map inpost-geowidget {
	display: block;
	width: 100%;
	height: 100%;
}

/* "Dostawa osobista" range check — Figma "Checkout / 03 Dostawa / Desktop /
   Sprawdzanie adresu": while an AJAX request is in flight (assets/js/
   dostawa-range.js), the whole method list is swapped for this feedback
   box. Hidden by default; toggled via [data-dostawa-checking]. */

.dostawa-range-checking {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	padding: 16px;
	background: #f6f6f6;
	border-radius: 2px;
}

.dostawa-range-checking-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 12px;
	background: var(--deercoffe-color-accent);
	color: #fff;
	font-family: var(--deercoffe-font-heading);
	font-weight: 700;
	font-size: 15px;
}

.dostawa-range-checking-content {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dostawa-range-checking-title {
	font-family: var(--deercoffe-font-heading);
	font-weight: 700;
	font-size: 15px;
	color: var(--deercoffe-color-text);
}

.dostawa-range-checking-text {
	font-family: var(--deercoffe-font-body);
	font-size: 14px;
	color: var(--deercoffe-color-text);
}

/* Address-first: until ulica / kod / miasto are filled in, this prompt
   stands in for the method list (template-dostawa.php, toggled by
   assets/js/dostawa-range.js). */

.dostawa-address-first {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 16px;
	background: #f6f6f6;
	border-radius: 2px;
	font-family: var(--deercoffe-font-body);
	font-size: 14px;
	color: var(--deercoffe-color-text);
}

.dostawa-address-first[hidden],
.dostawa-methods-section[hidden] {
	display: none;
}

.dostawa-page .checkout-summary-cta.is-checking {
	opacity: 0.45;
	pointer-events: none;
}

@media (max-width: 900px) {
	.dostawa-shipping-method {
		height: auto;
		padding: 14px 16px;
	}

	.dostawa-shipping-method.is-selected {
		padding: 13px 15px;
	}

	.dostawa-form-panel {
		gap: 14px;
	}

	.dostawa-form {
		gap: 14px;
	}

	.dostawa-form-row {
		flex-direction: column;
		gap: 14px;
	}

	.dostawa-form-row .dostawa-field:first-child {
		flex: 1 1 0;
	}

	.dostawa-checkbox {
		font-size: 14px;
	}
}