/* Sybernetic v3 — form fields and the three-step estimate form.
   Fields in one row keep the same top and height: the input is 56 px, the message line under it
   is reserved, and hints live in "Dodaj szczegóły" or after the field group, never between fields. */

.sy-form-section { position: relative; }
.sy-form-card { position: relative; background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(14px, 3vw, 44px); }
.sy-section--alt .sy-form-card { background: var(--bg2); }
.sy-form-head { display: grid; gap: 10px; margin-bottom: 26px; }
.sy-form-head h2 { font-size: var(--t-2xl); }
.sy-form-frame { margin: 0; display: inline-flex; align-items: center; gap: 10px; color: var(--tx); font: 500 var(--t-md)/1.4 var(--ff-display); }
.sy-form-frame svg { color: var(--ac-400); flex: none; }

/* Progress: three labelled steps */
.sy-progress { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 28px; padding: 0; counter-reset: step; }
.sy-progress li { position: relative; display: grid; gap: 8px; color: var(--tx-3); font: 500 var(--t-sm)/1.25 var(--ff-display); counter-increment: step; }
.sy-progress li::before { content: ''; height: 4px; border-radius: 4px; background: var(--line-2); transition: background-color var(--dur-2); }
.sy-progress li span::before { content: counter(step) '. '; }
.sy-progress li.is-done::before, .sy-progress li.is-current::before { background: var(--ac-500); }
.sy-progress li.is-current { color: var(--tx); }
.sy-progress li.is-done { color: var(--tx-2); }
.no-js-steps .sy-progress, :root:not(.js) .sy-progress { display: none; }

.sy-form { display: grid; gap: 0; }
/* Author display rules would otherwise override the hidden attribute. */
.sy-form[hidden], .sy-progress[hidden], .sy-fields[hidden], .sy-field[hidden], .sy-group[hidden], .sy-checkfield[hidden], .sy-file[hidden], .sy-note[hidden] { display: none; }
.sy-step-panel { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 22px; }
.sy-step-panel > legend { padding: 0; margin-bottom: 18px; font: 600 var(--t-xl)/1.2 var(--ff-head); color: var(--tx); float: left; width: 100%; }
.sy-step-panel > legend + * { clear: both; }
.sy-step-panel > legend small { display: block; margin-bottom: 4px; color: var(--ac-300); font: 600 var(--t-sm)/1.2 var(--ff-display); }
/* Without JS all three panels follow one another as sections of one page */
:root:not(.js) .sy-step-panel + .sy-step-panel { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line); }
.js .sy-form[data-stepped] .sy-step-panel[hidden] { display: none; }
.js .sy-step-panel.is-entering { animation: sy-step-in var(--dur-3) var(--ease-out); }
.js .sy-step-panel.is-entering-back { animation: sy-step-back var(--dur-3) var(--ease-out); }
@keyframes sy-step-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes sy-step-back { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

/* Grid of fields: two columns on wide screens, one on phones */
.sy-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 20px; align-items: start; }
@media (min-width: 720px) { .sy-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sy-fields > .sy-field--wide { grid-column: 1 / -1; }

/* Text field with a floating label (a real <label>, never the placeholder alone) */
.sy-field { position: relative; display: grid; min-width: 0; }
.sy-input {
    width: 100%; height: 56px; margin: 0; padding: 24px 16px 8px; appearance: none;
    background: var(--bg0); border: 1.5px solid var(--line-ui); border-radius: var(--r-md);
    color: var(--tx); font: 400 1rem/1.3 var(--ff-display); caret-color: var(--ac-300);
    transition: border-color var(--dur-1), background-color var(--dur-1);
}
.sy-section--alt .sy-input, .sy-form-card .sy-input { background: var(--bg0); }
textarea.sy-input { height: auto; min-height: 140px; padding-top: 28px; resize: vertical; line-height: 1.5; }
.sy-input::placeholder { color: transparent; }
.sy-field > label {
    position: absolute; left: 17px; top: 17px; right: 16px; z-index: 1; pointer-events: none;
    color: var(--tx-2); font: 500 1rem/1.25 var(--ff-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transform-origin: left top; transition: transform var(--dur-2) var(--ease-out), color var(--dur-2);
}
.sy-field > label small { font: inherit; color: var(--tx-3); }
/* Small phones: after the label rule above, so it actually applies (labels stay whole at 360 px). */
@media (max-width: 399px) { .sy-field > label { left: 15px; right: 12px; font-size: .875rem; } .sy-input { padding-inline: 14px; } }
.sy-input:focus + label, .sy-input:not(:placeholder-shown) + label, .sy-input:-webkit-autofill + label { transform: translateY(-10px) scale(.78); color: var(--ac-300); }
.sy-input:not(:focus):not(:placeholder-shown) + label { color: var(--tx-2); }
.sy-input:hover { border-color: #8aa08b; }
.sy-input:focus { outline: none; border-color: var(--ac-400); box-shadow: 0 0 0 3px rgba(210, 231, 197, .28); background: var(--bg1); }
.sy-input[aria-invalid="true"] { border-color: var(--err); }
.sy-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(255, 154, 139, .25); }
/* Browser autofill keeps the dark field (no light yellow or blue) and the same size */
.sy-input:-webkit-autofill, .sy-input:-webkit-autofill:hover, .sy-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--tx); caret-color: var(--ac-300);
    -webkit-box-shadow: 0 0 0 1000px var(--bg1) inset; box-shadow: 0 0 0 1000px var(--bg1) inset;
    transition: background-color 600000s 0s, color 600000s 0s;
}
.sy-input:autofill { background-color: var(--bg1); }
/* One reserved line for the message: an error never moves a neighbour in the row */
.sy-field__err { min-height: 22px; margin: 4px 2px 0; color: var(--err); font: 500 .875rem/1.35 var(--ff-display); }
.sy-field__err:empty::before { content: '\00a0'; }

/* Choice tiles (radio and checkbox) */
.sy-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.sy-group > legend, .sy-group__label { padding: 0; margin: 0 0 12px; color: var(--tx); font: 600 1.0625rem/1.3 var(--ff-display); }
.sy-group > legend small, .sy-group__label small { color: var(--tx-3); font-weight: 500; }
.sy-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.sy-choices--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.sy-choices--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.sy-choice { position: relative; display: block; cursor: pointer; }
.sy-choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sy-choice > span {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 14px; height: 100%;
    background: var(--bg0); border: 1.5px solid var(--line-ui); border-radius: var(--r-md);
    color: var(--tx); font: 500 .9688rem/1.3 var(--ff-display);
    transition: border-color var(--dur-1), background-color var(--dur-1);
}
.sy-choice > span::before { content: ''; flex: none; width: 20px; height: 20px; border: 2px solid var(--line-ui); border-radius: 50%; background: var(--bg1) center / 12px no-repeat; transition: border-color var(--dur-1), background-color var(--dur-1); }
.sy-choice input[type="checkbox"] + span::before { border-radius: 5px; }
.sy-choice:hover > span { border-color: #8aa08b; background: var(--bg1); }
.sy-choice input:checked + span { border-color: var(--ac-400); background: var(--bg3); box-shadow: inset 0 0 0 1px var(--ac-400); }
.sy-choice input:checked + span::before { border-color: var(--ac-500); background-color: var(--ac-500); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%2314100c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sy-choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.sy-choice--quiet > span { color: var(--tx-2); }
.sy-choice > span strong { display: block; font-weight: 640; }
.sy-choice > span em { display: block; margin-top: 2px; color: var(--tx-2); font: 400 .875rem/1.35 var(--ff-text); font-style: normal; }
.sy-group[aria-invalid="true"] .sy-choice > span, .sy-choices[aria-invalid="true"] .sy-choice > span { border-color: rgba(255, 154, 139, .7); }

/* Single checkbox (e.g. "Nie znam modelu", NDA) */
.sy-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; cursor: pointer; color: var(--tx); font: 500 .9688rem/1.4 var(--ff-display); }
.sy-check input { appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid var(--line-ui); border-radius: 5px; background: var(--bg0) center / 14px no-repeat; cursor: pointer; }
.sy-check input:checked { border-color: var(--ac-500); background-color: var(--ac-500); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%2314100c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sy-check input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Files */
.sy-file { display: grid; gap: 10px; }
.sy-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sy-file__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 18px; justify-self: start; background: var(--bg0); border: 1.5px dashed var(--line-ui); border-radius: var(--r-md); color: var(--tx); font: 600 .9688rem/1.2 var(--ff-display); cursor: pointer; }
.sy-file__btn:hover { border-color: var(--ac-400); background: var(--bg1); }
.sy-file input:focus-visible + .sy-file__btn { outline: 3px solid var(--focus); outline-offset: 2px; }
.sy-file__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--tx-2); font: 500 .875rem/1.4 var(--ff-display); }
:root:not(.js) .sy-file input[type="file"] { position: static; width: auto; height: auto; opacity: 1; color: var(--tx-2); }
:root:not(.js) .sy-file__btn { display: none; }

/* Notes inside the form */
.sy-note { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 16px; background: var(--bg0); border: 1px solid var(--line-2); border-left: 3px solid var(--ac-400); border-radius: var(--r-md); color: var(--tx-2); font: 400 .9688rem/1.5 var(--ff-text); }
.sy-note svg { flex: none; margin-top: 2px; color: var(--ac-300); }
.sy-note strong { color: var(--tx); font-family: var(--ff-display); font-weight: 640; }
.sy-note--warn { border-left-color: var(--warn); }
.sy-note--warn svg { color: var(--warn); }
.sy-note a { color: var(--ac-300); }

/* "Dodaj szczegóły": optional questions */
.sy-more { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg0); }
.sy-more > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 0 16px; cursor: pointer; color: var(--tx); font: 600 1rem/1.3 var(--ff-display); }
.sy-more > summary::-webkit-details-marker { display: none; }
.sy-more > summary small { color: var(--tx-3); font-weight: 500; }
.sy-more > summary .sy-acc__icon { width: 28px; height: 28px; }
.sy-more[open] > summary .sy-acc__icon { transform: rotate(45deg); background: var(--ac-500); border-color: var(--ac-500); }
.sy-more[open] > summary .sy-acc__icon::before, .sy-more[open] > summary .sy-acc__icon::after { background: var(--on-ac); }
.sy-more__body { display: grid; gap: 22px; padding: 6px 16px 20px; }

/* Conditional parts: shown by the script; without JS everything is visible */
.js [data-when][hidden] { display: none !important; }

/* Status, navigation, privacy, success */
.sy-form-status { margin: 0 0 20px; padding: 14px 16px; border-radius: var(--r-md); background: rgba(255, 154, 139, .1); border: 1px solid rgba(255, 154, 139, .45); color: var(--tx); font: 500 .9688rem/1.45 var(--ff-display); }
.sy-form-status[hidden] { display: none; }
.sy-form-status.is-info { background: rgba(156, 193, 236, .1); border-color: rgba(156, 193, 236, .45); }
.sy-form-nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.sy-form-nav .sy-btn--primary { margin-left: auto; }
.sy-form-nav [hidden] { display: none; }
:root:not(.js) .sy-form-nav [data-step-nav] { display: none; }
.sy-privacy { margin: 4px 0 0; color: var(--tx-3); font: 500 .875rem/1.5 var(--ff-display); }
.sy-privacy a { color: var(--tx-2); }
.sy-form-help { margin: 18px 0 0; color: var(--tx-2); font: 500 var(--t-sm)/1.5 var(--ff-display); }
.sy-form-help a { color: var(--ac-300); }
.sy-success { display: grid; gap: 12px; justify-items: start; padding: clamp(8px, 2vw, 20px) 0; }
.sy-success[hidden] { display: none; }
.sy-success__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ac-500); color: var(--on-ac); }
.sy-success h3 { font: 500 var(--t-xl)/1.2 var(--ff-head); }
.sy-success p { margin: 0; color: var(--tx-2); max-width: 36rem; }
.sy-topic { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; padding: 10px 14px; border-radius: var(--r-md); background: var(--bg0); border: 1px solid var(--line-2); color: var(--tx-2); font: 500 .9375rem/1.4 var(--ff-display); }
.sy-topic strong { color: var(--tx); }
.sy-hp { display: none !important; }
@media (max-width: 479px) {
    .sy-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .sy-choices--wide, .sy-choices--cards { grid-template-columns: minmax(0, 1fr); }
    .sy-choice > span { padding: 10px 12px; font-size: .9375rem; gap: 10px; }
    .sy-progress li { font-size: .8125rem; }
}
.sy-stack { display: grid; gap: 22px; min-width: 0; }
.sy-stack[hidden] { display: none; }
.sy-checkfield { display: grid; }
.sy-checkfield .sy-field__err { margin-top: 0; }
.sy-checkfield-row { display: flex; align-items: center; min-height: 56px; }
@media (max-width: 719px) { .sy-checkfield-row { min-height: 0; margin-top: -8px; } }