/* ==========================================================================
   DMGroup — «Заявка» page  [desktop 11:113 · form 11:126 · mobile 11:179]
   Every value below comes from:
     node figma-dmgroup/tree.mjs 11:126 8 --props
     node figma-dmgroup/tree.mjs 11:179 8 --props
   Only page-scoped classes live here (`.page-zayavka` / `.zayavka-*`); the
   shared `.section`, `.inner`, `.field`, `.btn`, `.form__*` components are
   reused as-is from base/components/blocks.
   ========================================================================== */

body.page-zayavka { background: var(--c-page); }
.page-zayavka .page { background: var(--c-page); }

/* --- section shell -------------------------------------------------------
   [11:126] Frame 1440x590, layout=VERTICAL pad=32,48,48,48 gap=24
   ------------------------------------------------------------------------ */

.section--zayavka { padding-block: 32px 48px; }

.zayavka {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* [11:127] Frame 1344x40, layout=VERTICAL gap=8 */
.zayavka__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* [11:128] «Заявка» Manrope 32px w600 lh=40 ls=-0.4 */
.zayavka__title {
  font-size: var(--t-page-size);
  line-height: var(--t-page-lh);
  font-weight: var(--t-page-w);
  letter-spacing: var(--t-page-ls);
  color: var(--c-text-alt);
}

/* [11:130] Frame 1344x446, layout=HORIZONTAL gap=32 */
.zayavka__grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

/* [11:131] left column 656x446, layout=VERTICAL gap=16 */
.zayavka__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 0;
  min-width: 0;
  order: 1;
}

/* --- fields --------------------------------------------------------------
   [11:134]/[11:138]/[11:143] well 656x44, pad=12, fill=#1a1816 r=2
   stroke=#463f38   [11:151] textarea well 656x120
   ------------------------------------------------------------------------ */

.zayavka .field { gap: 8px; }
.zayavka .field input,
.zayavka .field textarea {
  padding: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-text);
}
.zayavka .field input { height: 44px; }
.zayavka .field textarea { min-height: 120px; height: 120px; }

/* [11:140] Frame 656x66, layout=HORIZONTAL gap=16 — 320 + 320 */
.zayavka__row {
  display: flex;
  gap: 16px;
}
.zayavka__row .field { flex: 1 1 0; min-width: 0; }

/* --- actions -------------------------------------------------------------
   [11:153] Frame 303x42, layout=HORIZONTAL gap=12 cross=CENTER wrap=WRAP
   [11:154] primary button pad=12,16,12,16 fill=#e8956a
   [11:156] «Открыть ВКонтакте» Manrope 14px w400 lh=20 #e8956a
   ------------------------------------------------------------------------ */

.zayavka__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.zayavka__actions .btn { padding: 12px 16px; }
.zayavka__vk { color: var(--c-accent); }

/* status slot: the design has no collapsed height for it, so it is removed
   from the flow until the endpoint answers. */
.zayavka__status:empty { display: none; }
.zayavka__status { margin: 0; }
.zayavka__status:focus { outline: none; }

/* --- «Позиции» column ----------------------------------------------------
   [11:158] right column 656x414, layout=VERTICAL gap=16
   ------------------------------------------------------------------------ */

.zayavka__positions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 0;
  min-width: 0;
  order: 2;
}

/* [11:159] row 656x26, main=SPACE_BETWEEN cross=CENTER */
.zayavka__positions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* [11:160] «Позиции» Manrope 20px w600 lh=26 ls=-0.2 */
.zayavka__positions-title {
  font-size: var(--t-block-size);
  line-height: var(--t-block-lh);
  font-weight: var(--t-block-w);
  letter-spacing: var(--t-block-ls);
  color: var(--c-text-alt);
  margin: 0;
}
/* [11:161] «В каталог» Manrope 14px w400 lh=20 #e8956a */
.zayavka__all {
  font-size: 14px;
  line-height: 20px;
  color: var(--c-accent);
}
.zayavka__all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* [11:162] row 656x63, gap=12 pad=12,0,12,0 cross=CENTER */
.zayavka__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-rule);
}
.zayavka__item-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.zayavka__item-name { font-size: 14px; line-height: 20px; color: var(--c-text-alt); }
/* [11:165] caption 11px w500 lh=14 ls=1.2 #b3aaa0 */
.zayavka__item-meta {
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
  font-weight: var(--t-caption-w);
  letter-spacing: var(--t-caption-ls);
  color: var(--c-label);
}
/* [11:166] «Убрать» 14px w400 lh=20 #e8956a */
.zayavka__remove {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-accent);
}
.zayavka__remove:hover { text-decoration: underline; text-underline-offset: 3px; }

/* [11:172] panel 656x214, pad=16 fill=#1a1816 r=2 stroke=#463f38/1 */
.zayavka__preview {
  background: var(--c-surface);
  border: 1px solid var(--c-rule-2);
  border-radius: var(--r);
  padding: 16px;
}
/* [11:173] one text block, 14px w400 lh=20, hard line breaks preserved */
.zayavka__preview-text {
  font-size: 14px;
  line-height: 20px;
  color: var(--c-text-alt);
  white-space: pre-line;
  margin: 0;
}

/* honeypot: present in the DOM for bots, never shown to people */
.zayavka__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Mobile [11:179] — 390 wide
   form column 358, date/площадка stack (gap=16), section pad=32,16,48,16
   ========================================================================== */

@media (max-width: 900px) {
  .zayavka__grid { flex-direction: column; gap: 32px; }
  .zayavka__form,
  .zayavka__positions { flex: 0 0 auto; width: 100%; }
  .zayavka__row { flex-direction: column; gap: 16px; }
  .zayavka__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.4px;
  }
}