/* Сторінка контактів, варіант A «Візитка» (redesign-2026-10/contacts, build.py → a-card.html). Токени — ../blog/base.css,
   поля форми — ../fluent.css (.ff-skin); тут — розкладка форми Fluent рядами макета A. */
html { scroll-padding-top:6rem; }
.skip { position:fixed; left:0.75rem; top:-3.75rem; z-index:50; padding:0.625rem 1rem; border-radius:0.625rem; background:var(--ink); color:var(--bg); text-decoration:none; }
.skip:focus { top:0.75rem; }
.nw { white-space:nowrap; } /* «3D-друк» не розривається на дефісі */
.lead { margin:0; max-width:34em; font-size:1.1875rem; line-height:1.6; color:var(--muted); }

/* Живий статус за київським часом */
.status { display:inline-flex; align-items:center; gap:0.625rem; padding:0.5rem 0.875rem; border-radius:62.4375rem; background:var(--paper); font-size:0.875rem; }
.status i { width:0.5625rem; height:0.5625rem; flex:none; border-radius: 50%; background:var(--muted); }
.status.is-open i { background:#2FB36A; box-shadow:0 0 0 0.25rem rgba(47, 179, 106, .22); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 0.4375rem rgba(47, 179, 106, .08); } }
@media (prefers-reduced-motion: reduce) { .status.is-open i { animation:none; } }

/* Копіювання номера й пошти */
.copy { display:inline-flex; align-items:center; gap:0.375rem; min-height:2.125rem; padding:0 0.75rem; border: 1.5px solid var(--line); border-radius:62.4375rem; background:transparent; font-size:0.8125rem; cursor:pointer; }
.copy:hover { border-color: var(--ink); }
.copy svg { width:0.9375rem; height:0.9375rem; }
.copy.is-done { border-color: #2FB36A; color:#2FB36A; }

.order-form h2 { margin:0; font:800 1.625rem/1.1 var(--display); letter-spacing:-.03em; }
.hint { margin:0; font-size:0.8125rem; color:var(--muted); }

/* Інфо: години, розрахунок, доставка, формати */
.facts { display:grid; gap:0; margin:0; }
.facts div { display:grid; grid-template-columns:8.125rem 1fr; gap:0.75rem; padding:0.875rem 0; border-top: 1px solid var(--line); }
.facts dt { font-size:0.875rem; color:var(--muted); }
.facts dd { margin:0; }
.formats { display:inline-flex; flex-wrap:wrap; gap:0.375rem; margin:0; padding:0; list-style:none; }
.formats li { padding:0.125rem 0.5625rem; border-radius:0.5rem; background:var(--paper); font:600 0.8125rem/1.6 var(--display); letter-spacing:.04em; }

/* Міста — внутрішні посилання на сторінки міст */

@media (max-width: 560px) { .facts div { grid-template-columns:1fr; gap:0.125rem; } }

/* A «Візитка»: канали зв'язку — великі типографічні рядки з ниткою-підкресленням; під ними відкрита форма на всю ширину */
.a-head { padding:clamp(1.75rem, 5vw, 3.75rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.a-head h1 { margin:0.875rem 0 1rem; font:900 clamp(3rem, 7.4vw, 7.5rem)/.9 var(--display); letter-spacing:-.055em; }
.lines { margin:0; padding:0; list-style:none; border-top: 1.5px solid var(--ink); }
.line { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:0.625rem 1.25rem; align-items:center; padding:clamp(1.125rem, 2.2vw, 1.75rem) 0; border-bottom: 1px solid var(--line); }
.line__k { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.25rem 0.75rem; }
.line__k b { display:flex; align-items:center; gap:0.625rem; font:600 1.0625rem/1.2 var(--display); }
.line__k b .ico { width:1.375rem; height:1.375rem; color:var(--accent); }
.line__k small { font-size:0.875rem; color:var(--muted); }
.line__v { grid-column:1 / -1; position:relative; justify-self:start; max-width:100%; font:800 clamp(1.875rem, 4vw, 3.75rem)/1.05 var(--display); letter-spacing:-.04em; text-decoration:none; overflow-wrap:anywhere; }
.line__v svg { position:absolute; left:0; bottom:-0.625rem; width:100%; height:1rem; overflow:visible; pointer-events:none; }
.line__v path { fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:0; transition:stroke-dashoffset .7s cubic-bezier(.6, 0, .2, 1), opacity .2s; }
.line__v:hover path, .line__v:focus-visible path { stroke-dashoffset:0; opacity:1; } /* у спокої лінії немає зовсім (кругла голівка лишала крапку) */
.a-form { margin-top:clamp(2.5rem, 6vw, 4.5rem); padding:clamp(1.25rem, 3.4vw, 2.75rem); border-radius:1.625rem; background:var(--paper); }
.a-form .of-head { display:grid; gap:0.5rem; }
.a-form .of-head h2 { font-size:clamp(1.75rem, 3.4vw, 2.875rem); }
.a-info { max-width:47.5rem; margin-top:clamp(3.125rem, 7vw, 5.625rem); }
.a-info h2 { margin:0 0 0.75rem; font:800 clamp(1.5rem, 2.6vw, 2.125rem)/1.1 var(--display); letter-spacing:-.03em; }
@media (prefers-reduced-motion: reduce) { .line__v path { transition:none; } }

/* Форма Fluent №3 рядами макета A: ім'я · email · телефон | файл · опис (однакова висота) | матеріал · кнопка.
   Порядок полів (form-order.php, 9.10 — «по послідовності»): ім'я, email, телефон → 3D-модель → матеріал → колір → опис → кнопка.
   На ширині: файл ліворуч на два рядки, праворуч матеріал і під ним колір; опис і кнопка — на всю ширину. Вужче — те саме стовпчиком. */
.a-form .of-head { margin-bottom:1.25rem; }
.a-form .frm-fluent-form fieldset { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:1.25rem 1rem; align-items:start; }
.a-form .ff-name-field-wrapper, .a-form .ff-el-group:has(input[type="email"]), .a-form .ff-el-group:has(.ff-el-phone) { grid-column:span 2; }
.a-form .ff-el-group:has(.ff_file_upload_holder) { grid-column:1 / 4; grid-row:2 / 4; }
.a-form .ff-el-group:has(textarea) { grid-column:1 / -1; grid-row:4; }
.a-form .ff-el-group:has(.ff_file_upload_holder), .a-form .ff-el-group:has(textarea) { display:flex; flex-direction:column; align-self:stretch; }
.a-form .ff-el-group:has(.ff_file_upload_holder) .ff-el-input--content, .a-form .ff-el-group:has(textarea) .ff-el-input--content { display:flex; flex-direction:column; flex:1; }
.a-form .ff_file_upload_holder { flex:1; align-content:center; min-height:8.5rem; }
.a-form .ff-uploaded-list:not(:has(*)) { display:none; } /* порожній список файлів не з'їдає висоту зони — вона рівна з описом */
.a-form textarea.ff-el-form-control { flex:1; min-height:6.5rem; }
.a-form .ff-material { grid-column:4 / 7; grid-row:2; }
.a-form .ff-color { grid-column:4 / 7; grid-row:3; } /* «Колір» (form-color.php) — під матеріалом */
.a-form .ff_submit_btn_wrapper { grid-column:1 / -1; grid-row:5; align-self:end; margin:0 !important; } /* кнопка на всю ширину рядком нижче, як у макеті A */
.a-form .ff-btn-submit { width:100%; min-height:3.625rem; }
.a-form .of-note { margin-top:1rem; }
.a-form .of-note a { color:var(--ink); text-decoration-color:var(--accent); }

@media (max-width: 800px) {
  .a-form .ff-name-field-wrapper { grid-column:1 / -1; }
  .a-form .ff-el-group:has(input[type="email"]), .a-form .ff-el-group:has(.ff-el-phone) { grid-column:span 3; }
  .a-form .ff-el-group:has(.ff_file_upload_holder), .a-form .ff-el-group:has(textarea), .a-form .ff-material, .a-form .ff-color, .a-form .ff_submit_btn_wrapper { grid-column:1 / -1; grid-row:auto; }
}
@media (max-width: 560px) { .a-form .ff-el-group:has(input[type="email"]), .a-form .ff-el-group:has(.ff-el-phone) { grid-column:1 / -1; } }