/* =====================================================================
   УНІВЕРСАЛЬНА ФОРМА ДЛЯ ПОСЛУГ — multi-step lead wizard on service pages.
   Replaces the old per-service .svc-calc calculators. Brand #ff4501, required
   fields framed in rgb(255,68,0). Rendered by partials/universal-form.blade.php,
   driven by static/universal-form.js (steps + sessionStorage autosave).
   ===================================================================== */
:root { --uform-req: rgb(255, 68, 0); }

.uform { background: #fbfbfb; color: #333; }
.uform__inner {
  max-width: 1920px; margin: 0 auto;
  padding: clamp(40px, 6vw, 100px) clamp(20px, 4vw, 80px);
  display: grid; gap: clamp(28px, 4vw, 64px); align-items: start;
}
@media (min-width: 1024px) {
  .uform__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .uform__intro { position: sticky; top: clamp(90px, 9vw, 130px); }
}
.uform__eyebrow { display: flex; align-items: center; gap: clamp(8px, 0.88vw, 18px); margin-bottom: clamp(20px, 3vw, 48px); }
.uform__eyebrow .num, .uform__eyebrow .label { font-weight: 500; font-size: clamp(11px, 0.88vw, 18px); letter-spacing: 0.122em; text-transform: uppercase; color: #333; }
.uform__eyebrow .rule { flex: 1; height: 1px; background: rgba(10,10,10,0.1); }
.uform__title { margin: 0 0 clamp(16px, 2vw, 28px); font-weight: 600; font-size: clamp(32px, 3.4vw, 72px); line-height: 1.06; text-transform: uppercase; color: #333; }
.uform__title .accent { color: #ff4501; }
.uform__desc { margin: 0; max-width: 42ch; font-size: clamp(14px, 0.88vw, 18px); line-height: 1.55; color: rgba(51,51,51,0.9); }

.uform__form { background: #fff; border: 1px solid #ddd; display: flex; flex-direction: column; }

/* ---- progress ---- */
.uform__progress { padding: clamp(20px, 2.2vw, 36px) clamp(20px, 2.8vw, 56px) 0; }
.uform__steps { display: flex; list-style: none; margin: 0 0 clamp(16px, 1.6vw, 26px); padding: 0; counter-reset: none; }
.uform__step-tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; cursor: default; text-align: center; }
.uform__step-tab .n {
  display: inline-flex; align-items: center; justify-content: center; width: clamp(30px, 2.4vw, 40px); height: clamp(30px, 2.4vw, 40px);
  border-radius: 50%; border: 1.5px solid rgba(51,51,51,0.25); background: #fff; color: rgba(51,51,51,0.55);
  font-weight: 700; font-size: clamp(12px, 0.9vw, 16px); transition: background .2s, color .2s, border-color .2s; position: relative; z-index: 1;
}
.uform__step-tab .t { font-size: clamp(10px, 0.72vw, 13px); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(51,51,51,0.5); transition: color .2s; }
/* connector line */
.uform__step-tab::before { content: ''; position: absolute; top: clamp(15px, 1.2vw, 20px); right: 50%; width: 100%; height: 2px; background: rgba(51,51,51,0.15); z-index: 0; }
.uform__step-tab:first-child::before { display: none; }
.uform__step-tab.is-active .n { background: #ff4501; border-color: #ff4501; color: #fff; }
.uform__step-tab.is-active .t { color: #ff4501; }
.uform__step-tab.is-done .n { background: #333; border-color: #333; color: #fff; }
.uform__step-tab.is-done .t { color: #333; }
.uform__step-tab.is-done::before, .uform__step-tab.is-active::before { background: #ff4501; }
.uform__step-tab.is-clickable { cursor: pointer; }
.uform__bar { height: 4px; background: #eee; overflow: hidden; }
.uform__bar span { display: block; height: 100%; background: #ff4501; transition: width .3s ease; }

/* ---- panes ---- */
.uform__pane { padding: clamp(22px, 2.4vw, 40px) clamp(20px, 2.8vw, 56px) clamp(8px, 1vw, 16px); }
.uform__pane[hidden] { display: none; }
.uform__pane-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(18px, 2vw, 30px); }
.uform__pane-title { margin: 0; font-weight: 600; font-size: clamp(18px, 1.35vw, 28px); letter-spacing: 0.03em; text-transform: uppercase; color: #333; }
.uform__req-note { font-weight: 500; font-size: clamp(11px, 0.8vw, 14px); letter-spacing: 0.05em; color: var(--uform-req); }
.uform__hint { font-weight: 500; font-size: 0.8em; text-transform: none; color: rgba(51,51,51,0.55); letter-spacing: 0; }

.uform__block { border: 0; margin: 0; padding: 0; }
/* Крок 1 — frame the required contact block */
.uform__block--required { border: 2px solid var(--uform-req); background: rgba(255, 68, 0, 0.035); padding: clamp(18px, 1.8vw, 28px); }

/* ---- fields ---- */
.uform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.5vw, 30px); }
@media (max-width: 600px) { .uform__grid { grid-template-columns: 1fr; } }
.uform__field { display: flex; flex-direction: column; gap: clamp(8px, 0.9vw, 14px); }
.uform__field + .uform__field,
.uform__grid + .uform__field { margin-top: clamp(16px, 1.5vw, 26px); }
.uform__grid .uform__field + .uform__field { margin-top: 0; }
.uform__field--wide { grid-column: 1 / -1; }
.uform__field label { font-weight: 600; font-size: clamp(12px, 0.78vw, 16px); letter-spacing: 0.06em; text-transform: uppercase; color: #333; }
.uform__star { color: var(--uform-req); }

.uform__field input[type="text"], .uform__field input[type="tel"], .uform__field input[type="email"] {
  width: 100%; height: clamp(42px, 2.54vw, 54px); border: 0; border-bottom: 1px solid rgba(51,51,51,0.2);
  background: transparent; font-size: 16px; color: #333; outline: none; padding: 0; border-radius: 0;
}
.uform__field input::placeholder, .uform__field textarea::placeholder { color: rgba(51,51,51,0.55); }
.uform__field input:focus { border-bottom-color: #ff4501; }
.uform__field--req input {
  border: 1.5px solid var(--uform-req); border-radius: 2px; background: #fff; padding: 0 14px;
}
.uform__field--req input:focus { box-shadow: 0 0 0 3px rgba(255,68,0,0.15); }
.uform__field input.is-invalid { border-color: #e02b2b; border-bottom-color: #e02b2b; }

.uform__select {
  width: 100%; height: clamp(42px, 2.54vw, 54px); border: 0; border-bottom: 1px solid rgba(51,51,51,0.2);
  background: transparent; font-size: 16px; color: #333; outline: none; padding: 0; border-radius: 0;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #ff4501 50%), linear-gradient(135deg, #ff4501 50%, transparent 50%);
  background-position: right 4px center, right 0 center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.uform__select:focus { border-bottom-color: #ff4501; }
.uform__field textarea {
  width: 100%; border: 1px solid rgba(51,51,51,0.2); background: transparent; resize: vertical;
  font-size: 16px; color: #333; outline: none; padding: 10px 12px; font-family: inherit; min-height: 96px; border-radius: 2px;
}
.uform__field textarea:focus { border-color: #ff4501; }

/* ---- pills (contact pref) ---- */
.uform__pills { display: flex; flex-wrap: wrap; gap: clamp(8px, 0.6vw, 12px); }
.uform__pill { position: relative; cursor: pointer; display: inline-flex; }
.uform__pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.uform__pill span {
  display: inline-flex; align-items: center; height: clamp(42px, 2.4vw, 50px); padding: 0 clamp(16px, 0.9vw, 22px);
  border: 1px solid rgba(51,51,51,0.15); font-weight: 600; font-size: clamp(13px, 0.85vw, 17px);
  letter-spacing: 0.04em; text-transform: uppercase; color: #333; transition: background .15s, color .15s, border-color .15s;
}
.uform__pill input:checked + span { background: #ff4501; color: #fff; border-color: #ff4501; }
.uform__pill input:focus-visible + span { outline: 2px solid #ff4501; outline-offset: 2px; }

/* ---- interest checklist (multi + reveal) ---- */
.uform__checks { display: flex; flex-direction: column; gap: 4px; }
.uform__interest { display: flex; flex-direction: column; gap: 8px; }
.uform__check { position: relative; cursor: pointer; display: flex; align-items: flex-start; padding: 6px 0; }
.uform__check input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.uform__check span { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; font-size: clamp(14px, 0.9vw, 17px); color: #333; line-height: 1.3; }
.uform__check span::before {
  content: ''; flex-shrink: 0; width: 22px; height: 22px; border: 1.5px solid rgba(51,51,51,0.3); border-radius: 3px;
  background: #fff center/14px no-repeat; transition: background-color .15s, border-color .15s;
}
.uform__check input:checked + span::before {
  background-color: #ff4501; border-color: #ff4501;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
.uform__check input:focus-visible + span::before { outline: 2px solid #ff4501; outline-offset: 2px; }
.uform__reveal { margin-left: 34px; display: flex; flex-direction: column; gap: 6px; }
.uform__reveal[hidden] { display: none; }
.uform__reveal label { font-weight: 500; font-size: clamp(11px, 0.75vw, 13px); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(51,51,51,0.7); }
.uform__reveal input { max-width: 320px; height: clamp(38px, 2.2vw, 46px); border: 1px solid rgba(51,51,51,0.25); background: #fff; font-size: 15px; color: #333; outline: none; padding: 0 12px; border-radius: 2px; }
.uform__reveal input:focus { border-color: #ff4501; }

/* ---- toggles ---- */
.uform__toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; margin-top: 16px; }
.uform__toggle input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.uform__toggle span { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; font-size: clamp(14px, 0.9vw, 17px); color: #333; line-height: 1.3; }
.uform__toggle span::before {
  content: ''; flex-shrink: 0; width: 22px; height: 22px; border: 1.5px solid rgba(51,51,51,0.3); border-radius: 3px;
  background: #fff center/14px no-repeat; transition: background-color .15s, border-color .15s;
}
.uform__toggle input:checked + span::before {
  background-color: #ff4501; border-color: #ff4501;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
.uform__toggle input:focus-visible + span::before { outline: 2px solid #ff4501; outline-offset: 2px; }

/* ---- file upload ---- */
.uform__file { display: inline-flex; align-items: center; gap: 16px; cursor: pointer; flex-wrap: wrap; }
.uform__file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.uform__file-btn {
  display: inline-flex; align-items: center; gap: 10px; height: clamp(44px, 2.5vw, 52px); padding: 0 clamp(18px, 1.2vw, 26px);
  border: 1px solid #333; font-weight: 600; font-size: clamp(12px, 0.8vw, 15px); letter-spacing: 0.06em; text-transform: uppercase; color: #333; transition: background .15s, color .15s;
}
.uform__file:hover .uform__file-btn { background: #333; color: #fff; }
.uform__file-name { font-size: clamp(13px, 0.85vw, 16px); color: rgba(51,51,51,0.7); }

/* ---- nav (Back / Next / Submit) ---- */
.uform__nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: clamp(18px, 2vw, 32px) clamp(20px, 2.8vw, 56px); border-top: 1px solid #eee; margin-top: clamp(8px, 1vw, 16px); }
.uform__back, .uform__next, .uform__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; border: 0;
  height: clamp(50px, 3.2vw, 68px); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; transition: background .15s, color .15s, border-color .15s;
}
.uform__back { background: transparent; border: 1px solid rgba(51,51,51,0.3); color: #333; padding: 0 clamp(20px, 1.6vw, 34px); font-size: clamp(13px, 0.85vw, 16px); }
.uform__back:hover { border-color: #333; background: #333; color: #fff; }
.uform__back[hidden] { display: none; }
.uform__next, .uform__submit { margin-left: auto; background: #ff4501; color: #fff; padding: 0 clamp(26px, 2.2vw, 48px); font-size: clamp(14px, 0.95vw, 19px); }
.uform__next:hover, .uform__submit:hover { background: #e63d00; }
.uform__next[hidden], .uform__submit[hidden] { display: none; }
.uform__submit[disabled] { opacity: 0.6; cursor: default; }

/* arrow icons */
.uform__file .arrow, .uform__back .arrow, .uform__next .arrow, .uform__submit .arrow { width: 16px; height: 14px; background: currentColor; -webkit-mask: var(--uform-arrow) center/contain no-repeat; mask: var(--uform-arrow) center/contain no-repeat; }
.uform__file .arrow { --uform-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E"); }
.uform__next .arrow, .uform__submit .arrow { --uform-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.uform__back .arrow { --uform-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E"); }

/* ---- consent + status ---- */
.uform__consent { margin: 0; padding: 0 clamp(20px, 2.8vw, 56px) clamp(16px, 1.6vw, 24px); font-size: clamp(11px, 0.72vw, 13px); line-height: 1.5; color: rgba(51,51,51,0.6); }
.uform__consent[hidden] { display: none; }
.uform__consent a { color: #ff4501; text-decoration: underline; }
.uform__status { margin: 0; padding: 0 clamp(20px, 2.8vw, 56px) clamp(16px, 1.6vw, 24px); font-size: 15px; font-weight: 600; }
.uform__status:empty { padding: 0; }
.uform__status.is-ok { color: #1a7f37; }
.uform__status.is-error { color: #e02b2b; }

@media (max-width: 480px) {
  .uform__step-tab .t { display: none; }
  .uform__nav { padding-left: 20px; padding-right: 20px; }
}