.ecf { max-width: 760px; }
.ecf fieldset { border: 1px solid #ccc; padding: 1rem; margin: 0 0 1rem; }
.ecf-field { display: block; margin: 1rem 0 .5rem; }
.ecf-field > span { display: block; font-weight: 600; font-size: 1.05rem; margin-bottom: .2rem; }   /* round M (M2): bigger field titles; round O: 1.05rem, more room above the field so a title hugs its own control */
/* Round M (M3): wall section bars — the same bar as the instructions box, full width, a gap above */
.ecf h4.ecf-section-bar { margin: 1.5rem 0 .75rem; padding: 8px 12px; background: #f3f8f5; border-left: 4px solid #1f6f5c; }
/* Round N (N2): the "Poziom N" heading is a bar like the wall bars, a bit thinner, with more room above */
.ecf h4.ecf-level-heading { margin: 2.25rem 0 .75rem; padding: 4px 12px; background: #f3f8f5; border-left: 4px solid #1f6f5c; }
/* Round M (M3): a checkbox on the first line of its text (not stretched like `.ecf-field input`) */
.ecf-checkbox-line { display: flex; gap: .5rem; align-items: flex-start; margin: .5rem 0; line-height: 1.5; }
.ecf-checkbox-line input { width: auto; margin-top: .3rem; flex: none; }
.ecf-checkbox-line.ecf-hidden { display: none; }
.ecf-field input, .ecf-field select { width: 100%; max-width: 420px; }
.ecf-hidden { display: none; }
.ecf-item { border-left: 3px solid #ddd; padding-left: .75rem; margin: .5rem 0; }
/* Round I (I0, I7): field states — filled by the customer < our default < "Nie wiem" < error (a later rule wins) */
.ecf .ecf-filled { background: #f3f8f5; box-shadow: inset 0 0 0 1px #1f6f5c; }
.ecf .ecf-default { background: #fff3b0; box-shadow: inset 0 0 0 2px #e0b400; }
.ecf .ecf-unknown { background: #fff; border: 2px solid #000; box-shadow: none; font-weight: 700; }   /* round I2: black, orange read as an error */
/* ADR-0023: the "Nie wiem" box under a thickness field */
.ecf .ecf-unknown-toggle { display: inline-flex; align-items: center; gap: .4em; margin: .2rem 0 .4rem; font-weight: 400; text-transform: none; }
.ecf .ecf-number-unknown input:disabled { background: #f3f3f3; }
.ecf .ecf-field-error { background: #fff; border: 2px solid #c62828 !important; box-shadow: none; }
.ecf-instructions-list .ecf-filled, .ecf-instructions-list .ecf-default, .ecf-instructions-list .ecf-unknown { padding: 0 .3em; }
/* 0.6.4: the theme upper-cases labels and the message sits inside the label — keep the sentence case */
.ecf .ecf-message { color: #c62828; margin: .2rem 0 0; text-transform: none; }
.ecf-verdict > div { padding: 1rem; margin-top: 1rem; border: 1px solid #ccc; }
.ecf .ecf-draft { margin-top: 1rem; }   /* round K: the same gap above "Dokończysz później?" as above the verdict panel */
/* Round J (J1): the panel's colour says what it means — green as the legend box (all fine), red (fix something),
   yellow (read and decide); the left bar like `.ecf-instructions`. */
.ecf-verdict > [data-panel="ok-guest"], .ecf-verdict > [data-panel="ok-logged-in"] { background: #f3f8f5; border-left: 4px solid #1f6f5c; }
.ecf-verdict > [data-panel="missing"], .ecf-verdict > [data-panel="errors"], .ecf-verdict > [data-panel="failure"] { background: #fcf1f0; border-left: 4px solid #b3261e; }
.ecf-verdict > [data-panel="unknowns"], .ecf-verdict > [data-panel="warnings"], .ecf-verdict > [data-panel="manual-review"] { background: #fff9e0; border-left: 4px solid #ffd21f; }
.ecf-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ecf-link { background: none; border: none; padding: 0; color: #1a5fb4; text-decoration: underline; cursor: pointer; font-size: .9rem; }
.ecf-product { display: block; margin: .4rem 0; }
.ecf-declaration { display: flex; gap: .5rem; align-items: flex-start; margin: .8rem 0; line-height: 1.5; }
.ecf-declaration input { margin-top: .3rem; }
.ecf-help { font-size: .9rem; color: #555; margin: .2rem 0 .8rem; }

.ecf-req { color: #b3261e; text-decoration: none; margin-left: .2em; }
[data-list="sciany_zewnetrzne"] > [data-item] { border: 1px solid #c9d3cd; border-radius: 6px; padding: 12px; margin-block: 16px; }
.ecf-link.ecf-clear { font-size: .85rem; background: none; border: 0; text-decoration: underline; padding: 0; margin-left: 1.5rem; }
.ecf-instructions { border-left: 4px solid #1f6f5c; padding: 12px 16px; background: #f3f8f5; margin-bottom: 1rem; }
.ecf-wall-no { margin: 0 0 .5rem; }
.ecf-notice { padding: 10px 16px; margin-bottom: 1rem; border-left: 4px solid #1f6f5c; background: #f3f8f5; }
.ecf-notice--error { border-left-color: #b3261e; background: #fcf1f0; }
.ecf-notice[hidden] { display: none; }

.ecf-example-confirm { border: 1px solid #1f6f5c; padding: 8px 16px; margin: .5rem 0; background: #fff; }
.ecf-example-confirm[hidden] { display: none; }
.ecf-trust { margin: 1rem 0; }
.ecf-trust img { max-width: 100%; height: auto; border: 1px solid #ccc; }
.ecf-trust figcaption { font-size: .9em; }

/* H8 (round H, owner's reference 2026-10-07): our own buttons — every property explicit, nothing left to the
   browser default or the theme. Primary = yellow, secondary = white; both with a 3 px offset shadow. */
.ecf .ecf-btn { -webkit-appearance: none; appearance: none; display: inline-block; margin: .5rem .75rem .5rem 0;
  padding: .8em 1.8em; border: 1px solid; border-radius: 6px; font: inherit; font-size: .95rem; font-weight: 700;
  line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; text-align: center;
  cursor: pointer; transition: transform .08s ease, box-shadow .08s ease; }
.ecf .ecf-btn--primary { background: #ffd21f; color: #1a3344; border-color: #733e17; box-shadow: 3px 3px 0 #733e17; }
.ecf .ecf-btn--secondary { background: #fff; color: #046db4; border-color: #1a3344; box-shadow: 3px 3px 0 #1a3344; }
.ecf .ecf-btn:hover:not(:disabled) { transform: translate(1px, 1px); }
.ecf .ecf-btn--primary:hover:not(:disabled) { box-shadow: 2px 2px 0 #733e17; }
.ecf .ecf-btn--secondary:hover:not(:disabled) { box-shadow: 2px 2px 0 #1a3344; }
.ecf .ecf-btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
.ecf .ecf-btn:focus-visible { outline: 3px solid #046db4; outline-offset: 3px; }
.ecf .ecf-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Round K (K4): the inactive order button explains itself — its wrapper takes hover/click; the tip sits below it,
   so it never covers the declaration the customer has to read */
.ecf-gate { position: relative; display: inline-block; max-width: 100%; cursor: not-allowed; }
.ecf-gate > .ecf-btn:disabled { pointer-events: none; }
.ecf-gate-tip { position: absolute; left: 0; top: calc(100% - 2px); z-index: 5; width: max-content; max-width: min(320px, 72vw);
  padding: 8px 12px; border-radius: 4px; background: #333; color: #fff; font-size: .9rem; line-height: 1.4; }
.ecf-gate-tip::after { content: ""; position: absolute; bottom: 100%; left: 24px; border: 6px solid transparent; border-bottom-color: #333; }
.ecf-gate-tip[hidden] { display: none; }
.ecf-declaration--alert, .ecf-product--alert { outline: 2px solid #b3261e; outline-offset: 4px; border-radius: 2px; background: #fcf1f0; }
.ecf .ecf-btn--large { font-size: 1.05rem; padding: .95em 2.4em; }
.ecf .ecf-btn--small { font-size: .78rem; padding: .6em 1.2em; }
.ecf .ecf-btn--secondary.ecf-btn--small { box-shadow: 2px 2px 0 #1a3344; }
.ecf .ecf-btn--wrap { text-transform: none; letter-spacing: normal; white-space: normal; max-width: 100%; text-align: left; }
.ecf .ecf-item > .ecf-remove { display: block; margin-top: 1.25rem; }
.ecf .ecf-list > .ecf-add { display: block; margin-top: 1rem; }
.ecf-instructions-list { margin: .3rem 0 .8rem 1.2rem; padding: 0; }
.ecf-instructions-list li { margin: .25rem 0; }
/* H2: "?" hint next to a label — hover on desktop, focus (tap) on phones */
.ecf-field:has(.ecf-tip) { position: relative; }
.ecf-tip { display: inline-block; width: 1.3em; height: 1.3em; margin: 0 0 0 .4em; padding: 0; border: 0; border-radius: 50%; appearance: none;
  background: #1f6f5c; color: #fff; font: inherit; font-size: .8em; line-height: 1.3em; text-align: center; cursor: help; }
/* the box is anchored to the field (not to the "?") and clamped so it never leaves a 360 px screen */
.ecf-tip-text { display: none; position: absolute; left: 0; top: 1.8em; z-index: 10; width: max-content; max-width: min(280px, calc(100vw - 48px));
  padding: 6px 10px; background: #fff; color: #222; border: 1px solid #1f6f5c; font-weight: 400; text-transform: none; letter-spacing: normal;
  pointer-events: none; /* the open hint overlays the select - a click must reach the select, not the hint */ }
.ecf-tip:focus-visible + .ecf-tip-text, .ecf-tip[aria-expanded="true"] + .ecf-tip-text { display: block; }
/* on touch screens a tap leaves a sticky :hover - hover opens the hint only where a real pointer can hover */
@media (hover: hover) { .ecf-tip:hover + .ecf-tip-text { display: block; } }
/* H4 d: long inner-wall options use the full form width */
[data-list="sciany_wewnetrzne"] .ecf-field select { max-width: 100%; }