/* ui.css — состояния загрузки: skeleton, спиннеры, занятые кнопки, анимация шагов, загрузчик фото.
   Подключается после style.css и использует её переменные (--navy, --accent, --muted, --line, --bg-alt, --radius). */
:root{--ui-skel:#e6ebef;--ui-skel-hi:#f7f9fb;--ui-ok:#1d7a4a;--ui-err:#b42318;--ui-focus:rgba(15,61,94,.28)}

/* ---------- skeleton: серые плашки формы будущего контента + «блик» */
.skel{position:relative;overflow:hidden;background:var(--ui-skel);border-radius:8px;color:transparent!important;pointer-events:none;user-select:none}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent 0,var(--ui-skel-hi) 50%,transparent 100%);animation:ui-shimmer 1.5s ease-in-out infinite}
.skel-title{height:20px;width:55%;margin:0 0 12px}
.skel-line{height:14px;margin:8px 0}
.skel-line.w40{width:40%}.skel-line.w60{width:60%}.skel-line.w80{width:80%}
.skel-input{height:50px;border-radius:8px;margin:4px 0}
.skel-input.big{height:58px;border-radius:10px}
.skel-btn{height:46px;width:160px;border-radius:var(--radius);margin-top:6px}
.skel-btn.big{height:54px;width:190px}
.skel-zone{height:128px;border-radius:var(--radius);margin-top:10px}
.skel-wrap{display:flex;flex-direction:column}
.skel-wrap .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@keyframes ui-shimmer{to{transform:translateX(100%)}}

/* [hidden] должен побеждать display:flex/grid компонентов */
.up [hidden],.skel-wrap[hidden],.addr-rest[hidden],.field-wrap>[hidden]{display:none!important}

/* ---------- спиннер (наследует цвет текста) */
.spin{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ui-spin .8s linear infinite;vertical-align:-.15em;flex:none}
@keyframes ui-spin{to{transform:rotate(360deg)}}

/* ---------- кнопка в состоянии отправки */
.btn[aria-busy="true"]{display:inline-flex;align-items:center;justify-content:center;gap:9px;opacity:.8;cursor:progress;pointer-events:none}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* ---------- поле с инлайн-индикатором (поиск CEP) */
.field-wrap{position:relative;display:block}
.field-wrap>.spin,.field-wrap>.ui-check{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--muted)}
.field-wrap>.spin{font-size:1.15rem}
.cep-status.is-ok{color:var(--ui-ok)}
.cep-status.is-err{color:var(--ui-err)}

/* ---------- появление шага / блока */
.ui-enter{animation:ui-enter .28s ease-out both}
@keyframes ui-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- галочка с «дорисовкой» */
.ui-check{width:1.25em;height:1.25em;vertical-align:-.28em;color:var(--ui-ok);flex:none}
.ui-check circle,.ui-check path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.ui-check circle{stroke-width:2;stroke-dasharray:63;stroke-dashoffset:63;animation:ui-draw .45s ease-out forwards}
.ui-check path{stroke-width:2.6;stroke-dasharray:24;stroke-dashoffset:24;animation:ui-draw .3s .3s ease-out forwards}
.btn .ui-check,.up-thumb .ui-check{color:currentColor}
@keyframes ui-draw{to{stroke-dashoffset:0}}

/* ---------- загрузчик фото */
.up{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.up-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px 16px;border:2px dashed #b4c0ca;border-radius:var(--radius);background:var(--bg-alt);cursor:pointer;color:var(--navy-d);transition:border-color .15s,background .15s,transform .15s}
.up-zone:hover,.up-zone:focus-visible{border-color:var(--navy);background:#eaf2f8;outline:0}
.up-zone:focus-visible{box-shadow:0 0 0 3px var(--ui-focus)}
.up-zone.is-over{border-color:var(--accent);border-style:solid;background:#fff3ec;transform:scale(1.01)}
.up-zone.is-disabled{opacity:.6;pointer-events:none}
.up-ico{width:36px;height:36px;color:var(--navy);flex:none}
.up-zone strong{font-size:1rem;line-height:1.3}
.up-zone small{color:var(--muted);font-size:.84rem}
.up-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.up-actions .btn{display:inline-flex;align-items:center;gap:8px}
.up-actions .btn svg{width:18px;height:18px}
.up-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;list-style:none;padding:0;margin:0}
.up-thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--bg-alt);border:1px solid var(--line);animation:ui-enter .25s ease-out both}
.up-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.up-thumb .up-file{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;font-size:.68rem;color:var(--muted);word-break:break-all;text-align:center}
.up-thumb .up-file svg{width:26px;height:26px;color:var(--navy)}
.up-x{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(28,36,48,.72);color:#fff;font-size:18px;line-height:26px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.up-x:hover,.up-x:focus-visible{background:var(--ui-err);outline:0}
.up-x:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.8)}
.up-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:rgba(255,255,255,.6);color:var(--navy-d);font-size:.72rem;font-weight:600;text-align:center;padding:4px}
.up-veil .spin{font-size:1.2rem}
.up-pct{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.6)}
.up-pct i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s linear}
.up-badge{position:absolute;left:5px;bottom:5px;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--ui-ok);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.up-badge .ui-check{width:18px;height:18px;vertical-align:0}
.up-thumb.is-err{border-color:var(--ui-err)}
.up-thumb.is-err .up-veil{background:rgba(180,35,24,.14);color:var(--ui-err)}
.up-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.up-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s linear;border-radius:3px}
.up-status{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:.92rem;color:var(--muted);min-height:1.4em;margin:0}
.up-status.is-ok{color:var(--ui-ok);font-weight:600}
.up-status.is-err{color:var(--ui-err)}
.up-status .link-btn{color:inherit;font-size:inherit;font-weight:600}
.up-status .up-sub{font-weight:400;color:var(--muted)}
@media (max-width:560px){.up-grid{grid-template-columns:repeat(4,1fr)}.up-zone{padding:18px 12px}}

/* ---------- уважение prefers-reduced-motion: без мерцания и «дорисовки», спиннер медленнее */
@media (prefers-reduced-motion:reduce){
  .skel::after{animation:none}
  .spin{animation-duration:1.6s}
  .ui-enter,.up-thumb{animation:none}
  .ui-check circle,.ui-check path{animation:none;stroke-dashoffset:0}
  .up-zone,.up-pct i,.up-bar i{transition:none}
}

/* уже отправленные фото */
.up-received{margin-bottom:10px}
.up-received .up-item img{opacity:.92}