/* Форма Fluent Forms (№3, заявка) у стилі редизайну: головна (фінальна сцена) і контакти. Контейнер — .ff-skin.
   Токени — blog/base.css або home/story.css. Розкладку полів задає сторінка (контакти — сітка в contacts/contacts.css). */
.ff-skin .frm-fluent-form fieldset { display: flex; flex-direction: column; gap: clamp(0.625rem, 1.6vh, 1rem); }
.ff-skin .ff-el-group { margin: 0 !important; }
.ff-skin .ff-t-container { display: block; }
.ff-skin .ff-t-cell { width: 100% !important; padding: 0 !important; }
.ff-skin .ff-el-input--label { margin: 0 0 0.375rem; }
.ff-skin .ff-el-input--label label { font-size: 0.8125rem !important; font-weight: 600 !important; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) !important; }
.ff-skin .ff-el-is-required.asterisk-right label::after { color: var(--accent) !important; }
.ff-skin .ff-el-tooltip { display: none !important; } /* підказки дублюють текст поруч */
.ff-skin .ff-el-form-control:not(.ff-screen-reader-element) { width: 100%; padding: 0.8125rem 0.9375rem !important; border: 1.5px solid var(--line) !important; border-radius: 0.875rem !important; background: var(--bg) !important; color: var(--ink) !important; font: inherit !important; font-size: 1rem !important; box-shadow: none !important; }
.ff-skin textarea.ff-el-form-control { min-height: 5.25rem; resize: vertical; }
.ff-skin .ff-el-form-control:focus { border-color: var(--accent) !important; outline: none; }
.ff-skin .ff-el-form-control::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.ff-skin .ff-el-is-error .ff-el-form-control { border-color: var(--err) !important; }
.ff-skin .ff-el-is-error .text-danger, .ff-skin .error { margin-top: 0.375rem; font-size: 0.875rem; color: var(--err) !important; }
/* файл — пунктирна зона, як «Додайте файл моделі» в макеті */
.ff-skin .ff_file_upload_holder { display: grid; justify-items: center; gap: 0.25rem; padding: 1.125rem 0.875rem; border: 1.5px dashed var(--muted); border-radius: 1rem; text-align: center; cursor: pointer; transition: border-color .2s, background-color .2s; }
.ff-skin .ff_file_upload_holder:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ff-skin .ff_file_upload_holder:focus-within { outline: 0.1875rem solid var(--accent); outline-offset: 0.1875rem; }
.ff-skin .ff_upload_btn.ff-btn { padding: 0 !important; border: 0 !important; background: none !important; color: var(--ink) !important; font-weight: 600 !important; font-size: 0.9375rem !important; box-shadow: none !important; }
.ff-skin .ff_file_upload_holder::after { content: "STL, OBJ, STEP, 3MF або ZIP · до 90 МБ"; font-size: 0.8125rem; color: var(--muted); }
.ff-skin .ff-uploaded-list { margin-top: 0.5rem; font-size: 0.875rem; }
.ff-skin .ff-upload-preview { display: flex !important; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem !important; border: 0 !important; border-radius: 0.875rem !important; background: var(--bg) !important; }
.ff-skin .ff-upload-thumb { display: none; }
.ff-skin .ff-upload-details { display: grid; gap: 0.25rem; flex: 1; border: 0 !important; padding: 0 !important; }
.ff-skin .ff-upload-progress-inline { height: 0.25rem; border-radius: 0.25rem; background: var(--line) !important; }
.ff-skin .ff-el-progress-bar { background: var(--accent) !important; border-radius: 0.25rem; }
.ff-skin .ff-upload-remove { color: var(--muted) !important; box-shadow: none !important; }
.ff-skin .ff_submit_btn_wrapper { margin-top: 0.25rem !important; }
.ff-skin .ff-btn-submit { width: 100%; min-height: 3.125rem; padding: 0 1.5rem !important; border: 0 !important; border-radius: 62.4375rem !important; background: var(--accent) !important; color: var(--accent-ink) !important; font: 600 1rem/1 Geologica, system-ui, sans-serif !important; cursor: pointer; transition: transform .25s; }
.ff-skin .ff-btn-submit:hover { opacity: 1 !important; } /* зсув і тінь — у shared.css */
.ff-skin .ff-message-success { padding: 1.125rem 1.25rem !important; border: 0 !important; border-radius: 1rem; background: color-mix(in srgb, var(--ok) 14%, var(--bg)) !important; color: var(--ink); box-shadow: none !important; font-size: 1rem; }
.ff-skin .ff-errors-in-stack { margin-top: 0.5rem; color: var(--err); font-size: 0.875rem; }
/* «Матеріал» (радіо, клас контейнера ff-material) — сегменти, як у макеті контактів; підказки — тут, бо підписи
   варіантів Fluent кладе і в aria-label (там мають бути просто «PLA», «PETG», «Підкажіть») */
.ff-skin .ff-material .ff-el-input--content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; }
.ff-skin .ff-material .ff-el-form-check { margin: 0 !important; }
.ff-skin .ff-material .ff-el-form-check-label { position: relative; display: block; height: 100%; padding: 0.6875rem 0.75rem; border-radius: 0.875rem; background: var(--bg); cursor: pointer; transition: background-color .2s, color .2s; }
.ff-skin .ff-material .ff-el-form-check-input { position: absolute; opacity: 0; pointer-events: none; }
.ff-skin .ff-material .ff-el-form-check-label span { display: block; font: 600 1rem/1.1 Geologica, system-ui, sans-serif; }
.ff-skin .ff-material .ff-el-form-check-label span::after { display: block; margin-top: 0.25rem; font: 400 0.75rem/1.25 Geologica, system-ui, sans-serif; color: var(--muted); }
.ff-skin .ff-material .ff-el-form-check:has(input[value="PLA"]) span::after { content: "декор, фігурки"; }
.ff-skin .ff-material .ff-el-form-check:has(input[value="PETG"]) span::after { content: "міцні деталі"; }
.ff-skin .ff-material .ff-el-form-check:has(input[value="Підкажіть"]) span::after { content: "підберемо самі"; }
.ff-skin .ff-material .ff-el-form-check:has(input:checked) .ff-el-form-check-label { background: var(--ink); color: var(--bg); }
.ff-skin .ff-material .ff-el-form-check:has(input:checked) span::after { color: inherit; opacity: .7; }
.ff-skin .ff-material .ff-el-form-check:has(input:focus-visible) .ff-el-form-check-label { outline: 0.1875rem solid var(--accent); outline-offset: 0.125rem; }
@media (prefers-reduced-motion: reduce) { .ff-skin .ff-material .ff-el-form-check-label { transition: none; } }