/**
 * [mkkk_deklaracja]
 *
 * Every colour is `var(--mkkk-*, <light fallback>)`. On the mkkk theme the
 * variables resolve and the component goes dark; on any other theme — Hestia +
 * Elementor, which is what production still runs — they are undefined and the
 * fallback (a light-background palette) kicks in. One stylesheet, both worlds,
 * no media query and no theme sniffing.
 *
 * Do NOT hardcode a colour here. A hardcoded dark navy is exactly what made the
 * labels invisible on the black theme in the first place.
 *
 * No print styles on purpose: the user does not print this page. They download a
 * real PDF and print that.
 */

/* Self-contained box model. Most themes set box-sizing: border-box globally, but
   the form must not DEPEND on that: without it, a full-width input plus fieldset
   padding overflows its container and the right edge is pushed off-screen on
   narrow viewports. Scoped to .mkkk-decl so it changes nothing else. */
.mkkk-decl,
.mkkk-decl *,
.mkkk-decl *::before,
.mkkk-decl *::after {
	box-sizing: border-box;
}

.mkkk-decl {
	/* Theme text is #F2EFE9 (warm off-white) on #0B0B0D. Light fallback is a
	   dark ink on white. */
	--decl-text:    var( --mkkk-text, #14203c );
	--decl-muted:   var( --mkkk-text-muted, #5a6478 );
	--decl-line:    var( --mkkk-border, #c9cfdb );
	--decl-line-hi: var( --mkkk-border-strong, #8a93a6 );
	--decl-raised:  var( --mkkk-bg-raised, #f4f6fa );
	--decl-sunken:  var( --mkkk-bg-sunken, #fff );
	--decl-accent:  var( --mkkk-accent, #b8232f );

	/* The theme's accent is a mid-crimson (#e24947 on dark). It is fine as a
	   border or a fill, but it fails WCAG AA in both directions at that
	   lightness: as text on the near-black page it lands at 4.45:1, and under
	   white button text at 3.98:1. Both need 4.5:1. So there are two derived
	   tokens, measured rather than eyeballed:

	   --decl-accent-text  brighter, for accent TEXT on the dark page  → 6.24:1
	   --decl-accent-fill  deeper, so WHITE text on it clears the bar  → 5.79:1 dark
	                                                                     8.63:1 light
	   Light-theme fallbacks are the deep #b8232f, which already passes. */
	--decl-accent-text: var( --mkkk-accent-strong, #b8232f );
	--decl-accent-fill: color-mix( in srgb, var( --mkkk-accent, #b8232f ) 80%, #000 );

	max-width: 56rem;
	margin-inline: auto;
	color: var( --decl-text );
	font-size: 1rem;
	line-height: 1.5;
}

/* Forced palettes for pages that do NOT expose the mkkk theme variables — e.g. the
   /deklaracja-czlonkowska/ Elementor page, which is near-black. Without this the
   `auto` fallback (dark ink on white) would paint invisible labels on that page.
   `variant="dark"` on the shortcode adds .mkkk-decl--dark.
   These values mirror the mkkk theme palette and were contrast-checked (labels
   17:1, hints 6.8:1, accent-text 6.2:1) against a #0B0B0D-class background. */
.mkkk-decl--dark {
	--decl-text:    #f2efe9;
	--decl-muted:   rgba( 242, 239, 233, 0.62 );
	--decl-line:    rgba( 242, 239, 233, 0.18 );
	--decl-line-hi: rgba( 242, 239, 233, 0.38 );
	--decl-raised:  rgba( 255, 255, 255, 0.05 );
	--decl-sunken:  rgba( 255, 255, 255, 0.04 );
	--decl-accent:  #d14a3c;
	--decl-accent-text: #f75d59; /* 6.2:1 on near-black */
	--decl-accent-fill: #a33533; /* white text on it: 6.7:1 */
	color-scheme: dark;          /* native date picker + select arrow follow suit */
}

.mkkk-decl--light {
	--decl-text:    #14203c;
	--decl-muted:   #5a6478;
	--decl-line:    #c9cfdb;
	--decl-line-hi: #8a93a6;
	--decl-raised:  #f4f6fa;
	--decl-sunken:  #fff;
	--decl-accent:  #b8232f;
	--decl-accent-text: #b8232f;
	--decl-accent-fill: #93202a;
	color-scheme: light;
}

/* The one claim on this page that matters — a promise about where the data goes.
   It gets to look like a promise, not like fine print. */
.mkkk-decl__privacy {
	margin: 0 0 1.75rem;
	padding: 1rem 1.25rem;
	border-left: 4px solid var( --decl-accent );
	border-radius: 0 6px 6px 0;
	background: var( --decl-raised );
	color: var( --decl-text );
	font-size: 0.95rem;
}

.mkkk-decl__privacy strong {
	display: block;
	margin-bottom: 0.25rem;
	color: var( --decl-text );
}

.mkkk-decl fieldset {
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.25rem 0.75rem;
	border: 1px solid var( --decl-line );
	border-radius: 8px;
	transition: border-color 0.15s ease;
}

.mkkk-decl fieldset.is-required {
	border-color: var( --decl-accent );
}

.mkkk-decl legend,
.mkkk-decl label {
	color: var( --decl-text );
}

.mkkk-decl legend {
	padding-inline: 0.5rem;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mkkk-decl__row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* NOT a column flexbox. The label's content is a bare text node ("Imię"), then a
   <span>*</span>, then the control — and a flex container turns each of those into
   its own row, so the asterisk lands on a line of its own. Block layout lets the
   text and the star stay inline, which is the whole point of the star. */
.mkkk-decl label {
	display: block;
	flex: 1 1 12rem;
	/* Flex items default to min-width:auto, so a field never shrinks below its
	   content's intrinsic width. A native <input type=date> reports a fairly wide
	   intrinsic size (the dd/mm/yyyy control + calendar icon), which then shoves
	   its neighbours and makes borders overlap on narrow screens. min-width:0 lets
	   the field shrink to its share of the row instead. */
	min-width: 0;
	margin-bottom: 1rem;
	font-size: 0.9rem;
	font-weight: 600;
}

.mkkk-decl label > input,
.mkkk-decl label > select,
.mkkk-decl label > small {
	display: block;
	margin-top: 0.35rem;
}

.mkkk-decl__grow {
	flex: 3 1 14rem;
}

.mkkk-decl__narrow {
	flex: 0 1 9rem;
}

.mkkk-decl label span[ aria-hidden ] {
	color: var( --decl-accent-text );
}

/* `input[type]` — not a bare `input` — and it is deliberate.
 *
 * Hestia's Material JS stamps class="form-control" onto every text-ish input at
 * runtime (the date input it skips, which is why that one alone kept its box in
 * the first Hestia render). `.form-control` then strips the border, makes the
 * background transparent and paints an underline as a background GRADIENT.
 *
 *   .form-control                → (0,1,0)
 *   .form-group .form-control    → (0,2,0)
 *   .mkkk-decl input             → (0,1,1)   loses to the second one
 *   .mkkk-decl input[type]       → (0,2,1)   wins both
 *
 * `background-image: none` is what actually removes the underline; without it the
 * gradient survives inside our own box. No !important anywhere — Hestia uses none
 * on these, so specificity is enough and stays debuggable. */
.mkkk-decl input[type],
.mkkk-decl select {
	width: 100%;
	/* min-width:0 stops a field from refusing to shrink below its intrinsic
	   content width; max-width:100% is the hard cap that keeps ANY field — however
	   it computes its own width — inside its column. */
	min-width: 0;
	max-width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var( --decl-line );
	border-radius: 6px;
	background-color: var( --decl-sunken );
	background-image: none;
	color: var( --decl-text );
	font: inherit;
	font-weight: 400;

	/* The mkkk theme sets `color-scheme: dark` on <html> and color-scheme inherits,
	   so the native date picker and select arrow follow the theme on their own. */
	color-scheme: inherit;
}


.mkkk-decl input::placeholder {
	color: var( --decl-muted );
	opacity: 1; /* Firefox dims placeholders by default; --decl-muted is already dim */
}

.mkkk-decl input:hover,
.mkkk-decl select:hover {
	border-color: var( --decl-line-hi );
}

.mkkk-decl input:focus-visible,
.mkkk-decl select:focus-visible,
.mkkk-decl__btn:focus-visible {
	outline: 2px solid var( --decl-accent );
	outline-offset: 2px;
}

/* :user-invalid, not :invalid.
 *
 * :invalid matches an empty required field from the moment the page loads, so the
 * form greets a visitor with red boxes before they have typed anything. The old
 * `:not(:placeholder-shown)` guard was meant to suppress that, but a date input
 * has no placeholder to show — :placeholder-shown never matches it, the guard is
 * always true, and "Data urodzenia" rendered red on arrival.
 *
 * :user-invalid only matches after the user has actually interacted with the
 * field and left it wrong. That is the semantics we wanted all along. */
.mkkk-decl input:user-invalid,
.mkkk-decl select:user-invalid {
	border-color: var( --decl-accent );
}

.mkkk-decl small,
.mkkk-decl__hint {
	color: var( --decl-muted );
	font-size: 0.82rem;
	font-weight: 400;
}

.mkkk-decl__hint {
	margin: 0 0 1rem;
}

/* Error summary — sits directly above the button so a failed "Pobierz" explains
   itself where the user is looking, instead of the viewport jumping to a field
   somewhere up the page. */
.mkkk-decl__errors {
	margin: 0 0 1rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var( --decl-accent-text );
	border-left-width: 4px;
	border-radius: 6px;
	background: color-mix( in srgb, var( --decl-accent ) 12%, transparent );
	color: var( --decl-text );
}

.mkkk-decl__errors[hidden] {
	display: none;
}

.mkkk-decl__errors-head {
	margin: 0 0 0.5rem;
	font-weight: 700;
	color: var( --decl-accent-text );
}

.mkkk-decl__errors ul {
	margin: 0;
	padding-left: 1.1rem;
}

.mkkk-decl__errors li {
	margin: 0.3rem 0;
}

.mkkk-decl__errors-link {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var( --decl-text );
	font: inherit;
	text-align: left;
	text-decoration: underline;
	cursor: pointer;
}

.mkkk-decl__errors-link:hover,
.mkkk-decl__errors-link:focus-visible {
	color: var( --decl-accent-text );
}

.mkkk-decl__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.mkkk-decl__btn {
	margin: 0;               /* Hestia ships `button { margin: 10px 1px }` */
	padding: 0.85rem 1.6rem;
	border: 0;
	border-radius: 6px;
	background: var( --decl-accent );          /* fallback: brak color-mix */
	background: var( --decl-accent-fill );
	color: #fff;
	font: inherit;
	font-weight: 700;
	text-transform: none;    /* …and `text-transform: uppercase`, which we do not want */
	cursor: pointer;
}

.mkkk-decl__btn:hover:not( :disabled ) {
	filter: brightness( 1.12 );
}

.mkkk-decl__btn:disabled {
	opacity: 0.55;
	cursor: progress;
}

.mkkk-decl__status {
	margin: 0;
	color: var( --decl-text );
	font-size: 0.9rem;
	font-weight: 600;
}

.mkkk-decl__status:empty {
	display: none;
}

.mkkk-decl__status.is-error {
	color: var( --decl-accent-text );
}

/* On mobile every field gets its own line — one input per row, no exceptions.
   Breakpoint is 767px, matching Elementor's own "mobile" cutoff, so every phone
   (not just narrow ones) stacks. The earlier version only stacked the __grow /
   __narrow address fields and left the plain two- and three-up rows (Imię/Nazwisko,
   Data/Telefon/E-mail) sharing a line — which, with the gap removed, made their
   borders collide. Stacking the whole row fixes it in one place; each label's own
   margin-bottom supplies the vertical spacing. */
@media ( max-width: 767px ) {
	.mkkk-decl__row {
		flex-direction: column;
		gap: 0;
	}

	.mkkk-decl__row > label {
		flex: 0 1 auto;
		width: 100%;
	}

	/* iOS Safari gives <input type="date"> an intrinsic width plus its own internal
	   chrome, so width:100% alone lets it render WIDER than its siblings and spill
	   past the column (the "Data urodzenia too wide" symptom on iPhone). Dropping
	   the native appearance makes it honour the declared width. The tap-to-open
	   picker is bound to the input TYPE, not its appearance, so it still works.
	   Scoped to mobile on purpose: desktop was never broken and keeps its native
	   calendar button. */
	.mkkk-decl input[type="date"] {
		-webkit-appearance: none;
		appearance: none;
	}
}