/* ───────────────────────────────────────────────────────────────────────────
   SpellBook · СТИЛИ СТРАНИЦЫ КОНТАКТОВ
   КУДА КЛАСТЬ:  /css/contact.css   (доп. к /css/marketplace.css через $page_styles)

   Открытый split-layout БЕЗ карточки-подложки: инфо слева, форма справа,
   на чистом фоне страницы, тонкий вертикальный разделитель между колонками.
   Mobile-first, адаптив под все устройства. Всё на токенах тем → светлая/тёмная
   автоматически. Инпуты — на тон светлее фона (var(--surface)), не «чёрные».
   ─────────────────────────────────────────────────────────────────────────── */

/* Экран: центрирует контент; на десктопе — один экран, на мобиле высота свободная */
.ct-screen{
  min-height: calc(100svh - var(--hdr-h));
  display: flex; align-items: center;
  padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 56px);
}

/* ── Скелетон → контент: пока body.loading показываем скелет (точно повторяет layout),
      после загрузки (marketplace.js, минимум 420мс) он сменяется реальным контентом.
      Селекторы с .ct-card, чтобы перебить .ct-card{display:grid} (иначе оба видны разом). ── */
.ct-card.ct-skeleton{ display:none; }                  /* по умолчанию (после загрузки) скрыт */
.ct-card.ct-real{ animation: ct-appear .42s var(--ease, ease) both; }
body.loading .ct-card.ct-skeleton{ display:grid; }     /* во время загрузки виден */
body.loading .ct-card.ct-real{ display:none; }         /* во время загрузки контент скрыт */
@keyframes ct-appear{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .ct-card.ct-real{ animation:none; } }

/* все плитки скелетона — блочные (иначе высоты/ширины не применятся к span) */
.ct-skeleton .sk{ display:block; }
/* левая панель */
.skc-badge{ height:28px; width:190px; border-radius:999px; margin-bottom:20px; }
.skc-title{ height:clamp(38px, 6vw, 50px); width:80%; border-radius:9px; margin-bottom:16px; }
.skc-line{ height:15px; border-radius:5px; margin-bottom:9px; }
.skc-line + .skc-line{ margin-bottom:30px; }
.skc-list{ display:flex; flex-direction:column; gap:16px; }
.skc-item{ display:flex; align-items:center; gap:14px; }
.skc-ic{ width:44px; height:44px; border-radius:12px; flex-shrink:0; }
.skc-tx{ display:flex; flex-direction:column; gap:7px; flex:1; }
.skc-l1{ height:14px; width:55%; border-radius:5px; }
.skc-l2{ height:11px; width:38%; border-radius:5px; }
.skc-req{ height:13px; width:72%; border-radius:5px; margin-top:34px; }
/* правая панель (форма) */
.skc-ftitle{ height:24px; width:48%; border-radius:7px; margin-bottom:9px; }
.skc-fsub{ height:14px; width:68%; border-radius:5px; margin-bottom:26px; }
.skc-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.skc-field{ height:48px; border-radius:10px; }
.ct-right > .skc-field{ margin-bottom:16px; }
.skc-area{ height:120px; border-radius:10px; margin-bottom:18px; }
.skc-btn{ height:48px; width:210px; border-radius:10px; }
@media (max-width: 460px){ .skc-row{ grid-template-columns:1fr; } .skc-btn{ width:100%; } }

/* Сетка двух колонок — БЕЗ фона/рамки/радиуса/тени (открытый layout) */
.ct-card{
  width: 100%; max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr;        /* mobile-first: один столбец */
  gap: clamp(28px, 5vw, 40px);
  align-items: center;
}
@media (min-width: 880px){
  .ct-card{ grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); }
}

/* ── Левая инфо-панель (просто контент, без подложки) ── */
.ct-left{ display: flex; flex-direction: column; min-width: 0; }
.ct-badge{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  padding:5px 14px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--surface);
  font-family:var(--font-body); font-size:12.5px; color:var(--text-2); margin-bottom:20px;
}
.ct-badge-dot{ width:6px; height:6px; border-radius:50%; background:var(--pos); animation:ct-pulse 2s infinite; }
@keyframes ct-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.ct-title{
  font-family:var(--font-display); font-weight:600;
  font-size: clamp(1.9rem, 5.2vw, 2.6rem); color:var(--text);
  margin:0 0 14px; letter-spacing:-0.015em; line-height:1.08;
}
.ct-lead{ font-family:var(--font-body); font-size: clamp(.95rem, 2.4vw, 1.02rem); line-height:1.6; color:var(--text-2); margin:0 0 30px; max-width: 46ch; }

/* Список контактов */
.ct-list{ display:flex; flex-direction:column; gap:16px; margin-bottom:auto; }
.ct-item{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.ct-item-ic{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  background:var(--surface); border:1px solid var(--line-2);
  color:var(--text-2); font-size:19px; transition:color .2s, border-color .2s, background .2s;
}
.ct-item:hover .ct-item-ic{ color:var(--text); border-color:var(--text-4); background:var(--raised); }
.ct-item-tx{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ct-item-tx b{ font-family:var(--font-body); font-weight:600; font-size:.95rem; color:var(--text); }
.ct-item-tx span{ font-family:var(--font-body); font-size:.82rem; color:var(--text-3); }
a.ct-item:hover .ct-item-tx b{ color:var(--btn-hover); }

/* Реквизиты — компактной строкой */
.ct-req{
  margin-top:28px; padding-top:20px; border-top:1px solid var(--line);
  font-family:var(--font-body); font-size:.76rem; line-height:1.55; color:var(--text-3);
}
.ct-req b{ color:var(--text-2); font-weight:600; }
.ct-req .mono{ font-family:var(--font-mono); }

/* ── Правая панель: форма. Вертикальный разделитель только на десктопе ── */
.ct-right{ min-width: 0; }
@media (min-width: 880px){
  .ct-right{ border-left:1px solid var(--line); padding-left: clamp(40px, 6vw, 88px); }
}
.ct-form-title{ font-family:var(--font-display); font-weight:600; font-size:1.35rem; color:var(--text); margin:0 0 5px; }
.ct-form-sub{ font-family:var(--font-body); font-size:.88rem; color:var(--text-2); margin:0 0 24px; }

.ct-alert{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 15px; border-radius:10px; margin-bottom:18px;
  font-family:var(--font-body); font-size:13.5px; line-height:1.45;
}
.ct-alert svg{ width:20px; height:20px; flex-shrink:0; margin-top:1px; }
.ct-alert-ok{ background:color-mix(in srgb, var(--pos) 12%, transparent); border:1px solid color-mix(in srgb, var(--pos) 32%, transparent); color:var(--pos); }
.ct-alert-err{ background:color-mix(in srgb, var(--neg) 12%, transparent); border:1px solid color-mix(in srgb, var(--neg) 32%, transparent); color:var(--neg); }
.ct-alert strong{ color:var(--text); }
.ct-alert ul{ margin:5px 0 0; padding-left:18px; }

.ct-form{ display:flex; flex-direction:column; gap:16px; }
.ct-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width: 460px){ .ct-row{ grid-template-columns:1fr; } }
.ct-field{ display:flex; flex-direction:column; gap:7px; }
.ct-field label{ font-family:var(--font-body); font-size:12.5px; font-weight:500; color:var(--text-2); letter-spacing:.01em; }

/* ИНПУТЫ: на тон СВЕТЛЕЕ фона страницы (var(--surface)) + чёткая рамка — не «чёрные» */
.ct-field input, .ct-field textarea{
  width:100%; box-sizing:border-box;
  background:var(--surface); border:1px solid var(--line-2); border-radius:10px;
  padding:13px 15px; color:var(--text); font-family:var(--font-body); font-size:15px; line-height:1.4;
  transition:border-color .18s, box-shadow .18s, background .18s; resize:vertical; -webkit-appearance:none;
}
.ct-field textarea{ min-height:120px; }
.ct-field input::placeholder, .ct-field textarea::placeholder{ color:var(--text-4); }
.ct-field input:hover, .ct-field textarea:hover{ border-color:var(--text-4); }
.ct-field input:focus, .ct-field textarea:focus{
  outline:none; border-color:var(--text-3); background:var(--raised);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent);
}

.ct-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; margin-top:4px; background:var(--btn); color:var(--btn-text);
  font-family:var(--font-display); font-weight:600; font-size:14.5px;
  border-radius:10px; border:none; cursor:pointer; transition:background .2s, opacity .2s, transform .12s;
}
.ct-btn:hover{ background:var(--btn-hover); }
.ct-btn:active{ transform:translateY(1px); }
.ct-btn[disabled]{ opacity:.6; cursor:progress; }
.ct-btn .ct-spin{ width:15px; height:15px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:ct-rotate .6s linear infinite; display:none; }
.ct-btn.is-sending .ct-spin{ display:inline-block; }
.ct-btn.is-sending .ct-arrow{ display:none; }
@keyframes ct-rotate{ to{ transform:rotate(360deg); } }
@media (max-width: 520px){ .ct-btn{ width:100%; } }

/* На мобиле кнопку «гамбургер» хедера видно — даём контенту воздух сверху */
@media (max-width: 880px){
  .ct-screen{ align-items:flex-start; min-height:auto; padding-top: clamp(20px, 6vw, 36px); padding-bottom: clamp(28px, 8vw, 48px); }
}