/* страница contact, тема oasis. Источник измерений:
   my-agent/output/fw-shots/nikkykash-oasis/{wide,desktop,mobile}/contact.spec.json
   (snapshot реального FW support-виджета nikkykash-shop.fourthwall.com/contact/order-placed,
   тема Oasis). Спека: docs/2026-07-11-oasis-parity/contact.md. Разметка — общая с Creator
   ветка footer_pages/_layout.html (preset_id in ('oasis','creator') И путь=='/contact'),
   footer_pages/contact.html не тронут — форма уже даёт нужную структуру через sf-input/
   btn-primary/sf-creator-contact-tabs, здесь только геометрия/цвет Oasis. Образец подхода —
   presets/creator/contact.css, числа НЕ идентичны (см. комментарии по месту). */

/* Хедер/промо-бар/футер хардкожены родительским storefront/_layout.html — физически
   остаются в DOM, гасим через :has() по маркеру, как у Creator. */
body.preset-oasis:has(.sf-creator-contact-page) > [data-theme-promo-bar],
body.preset-oasis:has(.sf-creator-contact-page) > header,
body.preset-oasis:has(.sf-creator-contact-page) > footer {
  display: none;
}

/* ── Собственный «хедер» страницы: центрированный логотип магазина ──────────
   Метрика (contact.md §1): nav rect 3072x64/1440x64/390x64, paddingTop:20,
   marginBottom:40, лого центрировано. Структура идентична Creator. */
.preset-oasis .sf-cc-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 20px 16px 0;
  margin-bottom: 40px;
}
.preset-oasis .sf-cc-logo {
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s ease;
}
.preset-oasis .sf-cc-logo:hover {
  opacity: 0.7;
}
.preset-oasis .sf-cc-logo-img {
  height: 24px;
  width: auto;
}
.preset-oasis .sf-cc-logo-text {
  font-family: var(--font-display);
  /* 700, не var(--display-weight)=600 — эта страница у FW рисует лого-текст и h1
     жирнее обычного (contact.md §1/§2, подтверждено на wide/desktop/mobile). */
  font-weight: 700;
  text-transform: var(--display-transform);
  font-size: 24px;
  line-height: 44px;
  /* rgb(23,23,23) у эталона vs --text:#000000 — разница 23/255 неразличима
     глазом, используем токен напрямую, без локального хардкода (contact.md §7). */
  color: var(--text);
}

/* ── Узкая центрированная колонка ─────────────────────────────────────────
   Метрика (contact.md §3): max-width 664px и на wide(3072), и на desktop(1440) —
   контейнер не растягивается, потолок не в игре. padding 32/32 (24 mobile),
   margin-bottom 32 (24 mobile), gap 24 (16 mobile). */
.preset-oasis .sf-creator-contact-page {
  padding-bottom: 64px;
}
.preset-oasis .sf-cc-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 664px;
  margin: 0 auto;
  padding: 0 32px 32px;
}
.preset-oasis .sf-cc-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.preset-oasis .sf-cc-title {
  margin: 0;
  font-size: 32px;
  line-height: 44px;
  font-weight: 700; /* см. комментарий у .sf-cc-logo-text выше */
  font-family: var(--font-display);
  color: var(--text);
}
.preset-oasis .sf-cc-header p {
  /* Интро-параграф — наш контент (у FW-эталона его нет), но тон держим тем же
     тёмным, что заголовок, а не приглушённым .sf-muted (contact.md §6.2). */
  color: var(--text);
}
.preset-oasis .sf-cc-body {
  display: flex;
  flex-direction: column;
  /* 24px на wide/desktop — точная FW-цифра (contact.md §4, замерено по
     координатам узлов: header→tabs 24px, tabs→form 24px на обоих вьюпортах).
     НЕ 16 (это было бы копированием Creator без проверки). */
  gap: 24px;
}
.preset-oasis .sf-cc-body form {
  /* Форма у FW не несёт своего flex-gap — зазоры через margin, но все они
     константа 16px на каждом вьюпорте (contact.md §6.1), проще выразить одним
     gap на нашем flex-col form, без разбивки по вьюпортам (в отличие от
     Creator, где было 24/16). */
  gap: 16px;
}

/* ── Поля: сплошной белый фон, серая рамка (contact.md §6.3). Базовый
   .sf-input даёт color-mix-фон/бордер — на белом Oasis-фоне это заметно
   светлее эталона, нужен локальный оверрайд. */
.preset-oasis .sf-cc-body .sf-input {
  background: var(--surface); /* чистый белый, не color-mix 4% */
  /* rgb(181,181,181) — измерено (borderTopColor во всех трёх group-обёртках
     полей, wide/contact.spec.json), нет подходящего токена (--sf-hairline
     8%-text даёт ~#ebebeb, заметно светлее). */
  border-color: #b5b5b5;
}
.preset-oasis .sf-cc-body input.sf-input {
  min-height: 56px; /* rect обёртки поля 600x56/342x56 (contact.md §6.3) */
}

/* ── CTA на всю ширину колонки (rect 600x48/342x48 — contact.md §6.5).
   Цвет/высота/radius/вес уже верны из .btn-primary (presets.css) — только
   ширина. */
.preset-oasis .sf-cc-body .btn-primary {
  width: 100%;
}

@media (max-width: 767px) {
  .preset-oasis .sf-cc-col {
    gap: 16px;
    padding: 0 24px 24px;
  }
  .preset-oasis .sf-cc-title {
    font-size: 24px;
  }
  .preset-oasis .sf-cc-body {
    gap: 16px;
  }
  .preset-oasis .sf-cc-body form {
    gap: 16px; /* константа на всех вьюпортах, см. комментарий выше */
  }
  .preset-oasis .sf-creator-contact-page {
    padding-bottom: 48px;
  }
}

/* ── Переключатель темы обращения — две плитки (contact.md §5). Активная:
   700, border+shadow-инсет эмулирует ~2px кант — на практике неотличимо от
   честного 2px border (спека явно разрешает более простой вариант),
   реализуем как у Creator, но с точными цифрами Oasis: gap 16 (не 20),
   неактивная — серая рамка/текст (не общий --sf-hairline/--muted-hover). */
.preset-oasis .sf-creator-contact-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px; /* измерено: 1544-1236-292=16 (contact.md §5), не 20 */
}
.preset-oasis .sf-creator-contact-tab {
  min-height: 58px; /* rect 292x58/342x58 */
  padding: 0 16px;
  border: 1px solid #b5b5b5; /* rgb(181,181,181), неактивная — та же цифра, что у полей */
  background: transparent;
  color: var(--muted); /* rgb(110,110,110) ≈ токен --muted:#6b6b6b, разница незначима */
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.preset-oasis .sf-creator-contact-tab:hover {
  color: var(--text);
}
.preset-oasis .sf-creator-contact-tab.is-active {
  border: 2px solid var(--text); /* rgb(23,23,23) ≈ var(--text):#000000 */
  color: var(--text);
  font-weight: 700;
}

@media (max-width: 767px) {
  /* На mobile вкладки складываются в столбец (contact.md §5) — Creator этого
     не имеет (задокументированный пробел там, вне зоны этой задачи), для
     Oasis добавляем по спеке. */
  .preset-oasis .sf-creator-contact-tabs {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}