/* ═══════════════════════════════════════════════════════════
   base.css — токены, типографика, кнопки, формы
   Точное соответствие UI Map (myu-to-ui-map-combined-fixed.html)
═══════════════════════════════════════════════════════════ */

/* ── Шрифты ───────────────────────────────────────────────── */
/* Segoe UI Variable (Windows 11), Segoe UI (Windows), Outfit (веб-фолбэк) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'MyoFont';
  src: url('/static/local_fonts/MyoFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── Размеры, радиусы, переходы ───────────────────────────── */
:root {
  /* Segoe UI Variable (Win11) → Segoe UI (Win) → Outfit (веб) → system */
  --f-ui:   "Segoe UI Variable", "Segoe UI", "Outfit", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", "Consolas", monospace;

  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   14px;
  --r-2xl:  20px;
  --r-pill: 999px;

  --t-fast: .14s ease;
  --t-base: .18s ease;
  --t-slow: .28s ease;

  --content-max: 1440px;  /* max ширина контента, фоны секций на 100% */
  --page-top: 48px;       /* отступ контента от топбара на sticky-страницах */

  /* ── Типографика — шкала размеров ─────────────────────────── */
  /* Полная шкала от декоративных меток до hero-текста.
     При мобильном адаптиве достаточно переопределить эти переменные
     в @media — всё масштабируется автоматически. */
  --fs-label:  11px;   /* ALL-CAPS mono декоративные маркеры (eyebrow, col-title, badge) */
  --fs-xs:     12px;   /* мета-метки, временны́е метки, подписи иконок */
  --fs-sm:     13px;   /* минимум читаемого контентного текста */
  --fs-base:   14px;   /* body — основной UI-текст, кнопки, навигация */
  --fs-md:     16px;   /* длинный текст, описания моделей, блог */
  --fs-lg:     20px;   /* подзаголовки секций */
  --fs-xl:     28px;   /* крупные заголовки H2 */
  --fs-2xl:    40px;   /* hero-числа, H1 */
}

/* ── Тёмная тема (основная) ───────────────────────────────── */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --c-bg:       #0c0c0f;
  --c-base:     #131315;
  --c-raised:   #1c1c1f;
  --c-high:     #252528;

  --c-stroke:   rgba(255,255,255,0.06);
  --c-stroke-s: rgba(255,255,255,0.10);

  --c-text:     #e3e3e6;
  --c-text-2:   #a0a0a4;
  --c-muted:    #62626a;

  --c-accent:   #e5383b;
  --c-accent-s: rgba(229,56,59,0.10);
  --c-accent-m: rgba(229,56,59,0.20);

  --c-ok:       #4ade80;
  --c-ok-s:     rgba(74,222,128,0.08);
  --c-warn:     #fbbf24;
  --c-warn-s:   rgba(251,191,36,0.08);
  --c-info:     #60a5fa;
  --c-info-s:   rgba(96,165,250,0.08);

  --shadow-sm:  0 1px 3px rgba(0,0,0,.5);
  --shadow-md:  0 4px 16px rgba(0,0,0,.55);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.7);
}

/* ── Светлая тема ─────────────────────────────────────────── */
[data-theme="light"] {
  /* only light: запрещает Samsung Internet / forced-dark переопределять тему */
  color-scheme: only light;
  --c-bg:       #f0f0f2;
  --c-base:     #f9f9fb;
  --c-raised:   #ffffff;
  --c-high:     #ffffff;

  --c-stroke:   rgba(0,0,0,0.07);
  --c-stroke-s: rgba(0,0,0,0.12);

  --c-text:     #1c1c1f;
  --c-text-2:   #48484e;
  --c-muted:    #8a8a8e;

  --c-accent:   #cc2427;
  --c-accent-s: rgba(204,36,39,0.08);
  --c-accent-m: rgba(204,36,39,0.14);

  --c-ok:       #16a34a;
  --c-ok-s:     rgba(22,163,74,0.08);
  --c-warn:     #d97706;
  --c-warn-s:   rgba(217,119,6,0.08);
  --c-info:     #2563eb;
  --c-info-s:   rgba(37,99,235,0.08);

  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:  0 12px 32px rgba(0,0,0,.12);
}

/* ── Цвета живых эффектов (dot grid, wave, lava, btn glow) ── */
:root,
[data-theme="dark"] {
  /* cursor dot grid (hero) — только RGB, alpha в JS */
  --dot-rgb:      220,215,240;
  /* about dot grid — акцентный цвет */
  --dot-about-rgb: 229,56,59;
  /* wave dot grid (flagship + commercial) */
  --wave-rgb:     200,195,230;
  /* lava lamp blobs */
  --lava-c1: rgba(229,56,59,.38);
  --lava-c2: rgba(180,40,140,.30);
  --lava-c3: rgba(229,56,59,.26);
  --lava-c4: rgba(100,60,200,.28);
  --lava-c5: rgba(229,56,59,.22);
}
[data-theme="light"] {
  --dot-rgb:        30,25,50;
  --dot-about-rgb:  204,36,39;
  --wave-rgb:     50,40,90;
  --lava-c1: rgba(220,40,40,.18);
  --lava-c2: rgba(160,30,120,.14);
  --lava-c3: rgba(220,40,40,.12);
  --lava-c4: rgba(80,50,180,.13);
  --lava-c5: rgba(220,40,40,.10);
}

/* ── Hero-контекст ────────────────────────────────────────── */
/* В тёмной теме принудительно фиксируем --c-bg чтобы компоненты
   внутри hero-context не меняли цвет при смене темы.
   В светлой теме наследование работает нормально — переопределение
   не нужно (и было бы циклической ссылкой, что делает var() invalid). */
[data-theme="dark"] .hero-context { --c-bg: #0c0c0f; }

/* ── Сброс ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--c-bg);
  color-scheme: dark light;
  scrollbar-width: none;
}

/* DSN-4: плавный переход цветов при смене темы */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background-color 0.25s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    fill 0.2s ease,
    stroke 0.2s ease !important;
}

body {
  font-family: var(--f-ui);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -ms-overflow-style: none;
  min-height: 100vh;
  animation: pageFadeIn .25s ease;
}
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Samsung Internet forced-dark override — хардкод для светлой темы */
[data-theme="light"] html,
[data-theme="light"] body {
  background-color: #f0f0f2 !important;
  color: #1c1c1f !important;
}

a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }

::-webkit-scrollbar { width: 0; display: none; }

/* ── Типографика ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}

/* ── КНОПКИ ───────────────────────────────────────────────── */
/* Точно по UI Kit, именование BEM (--) для совместимости с шаблонами */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all var(--t-base);
  border: none;
  white-space: nowrap;
  letter-spacing: .01em;
  text-decoration: none;
  line-height: 1;
  user-select: none;
  position: relative;
  overflow: hidden;
}
/* Cursor glow bubble */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 80px at var(--bx, 50%) calc(var(--by, 50%) - 0px),
    rgba(255,255,255,.22) 0%,
    transparent 72%
  );
  border-radius: inherit;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.btn:hover::after { opacity: 1; }
.btn:hover    { text-decoration: none; }
.btn:active   { transform: scale(.97); }
.btn:disabled { opacity: .4; pointer-events: none; }

/* Primary */
.btn--primary {
  background: var(--c-accent);
  color: #fff;
  box-shadow: 0 2px 12px rgba(229,56,59,.18);
  transition: all var(--t-base), box-shadow .2s ease;
}
.btn--primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 22px rgba(229,56,59,.45);
}

/* Boosty — orange brand color for EN Boosty CTAs */
.btn--boosty { background: #F15F2C; color: #fff; border-color: #F15F2C; }
.btn--boosty:hover { filter: brightness(1.08); }

/* Ghost */
.btn--ghost {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-stroke-s);
}
.btn--ghost:hover { background: var(--c-raised); border-color: var(--c-accent-m); }

/* Subtle — accent tint (из UI Kit: btn-subtle) */
.btn--subtle {
  background: var(--c-accent-s);
  color: var(--c-accent);
  border: 1px solid var(--c-accent-m);
}
.btn--subtle:hover { background: var(--c-accent-m); }

/* Ok */
.btn--ok { background: var(--c-ok); color: #0c0c0f; }
.btn--ok:hover { filter: brightness(1.05); }

/* Danger */
.btn--danger { background: var(--c-accent); color: #fff; }

/* Outline */
.btn--outline {
  background: transparent;
  color: var(--c-text-2);
  border: 1px solid var(--c-stroke-s);
}
.btn--outline:hover { background: var(--c-raised); color: var(--c-text); }

/* Размеры */
.btn--xs  { font-size: var(--fs-label); padding: 4px 10px;  border-radius: var(--r-sm); }
.btn--sm  { font-size: var(--fs-xs);   padding: 6px 13px;  border-radius: var(--r-md); }
.btn--m   { font-size: var(--fs-sm);   padding: 8px 18px;  border-radius: var(--r-md); }
.btn--lg  { font-size: var(--fs-md);   padding: 13px 32px; border-radius: var(--r-xl); }
.btn--icon{ width: 36px; height: 36px; padding: 0; border-radius: var(--r-md); aspect-ratio: 1; }
.btn--full{ width: 100%; }

/* Loading spinner */
.btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.btn--loading::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── ПОЛЯ ФОРМ ────────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label,
.field-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text-2);
  display: block;
  margin-bottom: 2px;
}

.field input,
.field textarea,
.field select,
.input {
  width: 100%;
  padding: 10px 14px;
  background: var(--c-raised);
  border: 1px solid var(--c-stroke-s);
  border-radius: var(--r-lg);
  color: var(--c-text);
  font-family: var(--f-ui);
  font-size: var(--fs-base);
  line-height: 1.5;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus,
.field textarea:focus,
.field select:focus,
.input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-s);
}
.field input::placeholder,
.input::placeholder { color: var(--c-muted); }

.field--error input,
.field--error textarea,
.input.error   { border-color: var(--c-accent); }
.input--sm     { padding: 7px 10px; font-size: var(--fs-sm); }

.input[readonly]    { opacity: .6; cursor: default; }
.input[type="file"] { padding: 8px 12px; cursor: pointer; }

/* ── prefix-wrap (@, etc.) ── */
.input-prefix-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.input-prefix {
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: var(--c-raised);
  border: 1px solid var(--c-stroke);
  border-right: none;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  color: var(--c-muted);
  font-size: var(--fs-sm);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.input--prefixed {
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
  flex: 1;
}

/* ── input error state ── */
.input--error {
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 3px rgba(229,56,59,.15) !important;
}

/* ── field error message ── */
.field-err {
  font-size: 11px;
  color: var(--c-accent);
  margin-top: 5px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .2s ease, opacity .18s ease;
}
.field-err.visible {
  max-height: 40px;
  opacity: 1;
}

/* ── address autocomplete dropdown ── */
.addr-wrap { position: relative; }
.addr-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 300;
  background: var(--c-raised);
  border: 1px solid var(--c-stroke);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  display: none;
}
.addr-dropdown-item {
  padding: 9px 14px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-text);
  cursor: pointer;
  border-bottom: 1px solid var(--c-stroke);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--t-fast), color var(--t-fast);
}
.addr-dropdown-item:last-child { border-bottom: none; }
.addr-dropdown-item:hover,
.addr-dropdown-item.addr-active {
  background: var(--c-bg);
  color: var(--c-accent);
}

/* ── address loader (JS-controlled RAF animation) ── */
.addr-loader {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.addr-loader.visible { opacity: 1; }
.addr-loader span {
  position: absolute;
  left: calc(50% - 2px);
  top: calc(50% - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-accent);
  will-change: transform;
}

/* ── comm-checkbox ── */
.comm-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin-top: 4px;
  user-select: none;
}
.comm-checkbox { display: none; }
.comm-checkbox-box {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1.5px solid var(--c-stroke);
  border-radius: 5px;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.comm-checkbox-box::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform .15s ease;
  margin-top: -2px;
}
.comm-checkbox:checked + .comm-checkbox-box {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.comm-checkbox:checked + .comm-checkbox-box::after {
  transform: rotate(-45deg) scale(1);
}
.comm-checkbox-label {
  font-size: var(--fs-sm);
  color: var(--c-text);
}

.textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

.select {
  width: 100%;
  padding: 10px 32px 10px 14px;
  background: var(--c-raised);
  border: 1px solid var(--c-stroke-s);
  border-radius: var(--r-lg);
  color: var(--c-text);
  font-family: var(--f-ui);
  font-size: var(--fs-base);
  outline: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2362626a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color var(--t-fast);
}
.select:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-s); }

.field-hint  { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 4px; display: block; }
.field-error,
.field-hint--error { font-size: var(--fs-sm); color: var(--c-accent); margin-top: 4px; display: block; }

/* ── FLASH-СООБЩЕНИЯ ──────────────────────────────────────── */
.flash {
  padding: 10px 14px;
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.flash--success {
  background: var(--c-ok-s);
  color: var(--c-ok);
  border: 1px solid rgba(74,222,128,.2);
}
.flash--error {
  background: var(--c-accent-s);
  color: var(--c-accent);
  border: 1px solid var(--c-accent-m);
}
.flash--warning {
  background: var(--c-warn-s);
  color: var(--c-warn);
  border: 1px solid rgba(251,191,36,.2);
}
.flash--info {
  background: var(--c-info-s);
  color: var(--c-info);
  border: 1px solid rgba(96,165,250,.2);
}

/* ── AUTH PAGES ───────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  position: relative;
  z-index: 1;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--c-base);
  border: 1px solid var(--c-stroke-s);
  border-radius: var(--r-2xl);
  padding: 40px 36px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.auth-logo {
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.auth-logo span       { color: var(--c-accent); }
.auth-logo:hover      { text-decoration: none; }
/* SVG-лого (из CMS или fallback) — тема-зависимый цвет как у topbar-brand */
.auth-logo-svg,
.auth-logo svg        { height: 22px; width: auto; display: block; fill: var(--c-text); color: var(--c-text); }
.auth-logo svg *      { fill: currentColor; }
.auth-title           { font-size: 24px; font-weight: 700; text-align: center; letter-spacing: -.02em; }
.auth-form            { display: flex; flex-direction: column; gap: 16px; }
.auth-switch          { font-size: var(--fs-sm); color: var(--c-muted); text-align: center; }
.auth-switch a        { color: var(--c-accent); }

/* ── УТИЛИТЫ ──────────────────────────────────────────────── */
.sep { height: 1px; background: var(--c-stroke); }

/* ── КАСТОМНЫЙ СКРОЛЛБАР — нативный скрыт, реализация через JS (#custom-sb) ── */

/* ── ТИПОГРАФИКА — хардкод ≥16px (TODO: токенизировать) ────
   Эти размеры читаемы, но пока без переменных.
   При добавлении мобильного адаптива расширить шкалу --fs-*.

   16px: .footer-brand, .hero-eyebrow-text, .model-files-title,
         .admin-logo (в layout.css)
   17px: .blog-featured-title, .modal-title (в components.css)
   18px: .topbar-brand, .auth-logo, .cat-card--wide .cat-card-name,
         .md-content h2
   20px: .fm-name, .sub-card-price (в layout.css)
   22px: .section-title, .subscribe-title, .spooly-title,
         .admin-page-title, .md-content h1
   24px: .auth-title
   28px: .model-card-lg-title, .tier-card-price, .hero-sub
   36px: .catalog-title
   40px: .hero-stat-num
─────────────────────────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════════
   DSN-7: 12px / --fs-xs текст → UPPERCASE
   Откат: удалить этот блок целиком
══════════════════════════════════════════════════════════════ */
.blog-meta,
.model-card-sm-sub,
.filter-chip-count,
.footer-cc,
.store-card-meta,
.bpost-crumb,
.bpost-author-name,
.tg-react-count,
.cart-item-price,
.cart-item--nested .cart-item-title,
.sticky-cta-price,
.search-result-meta,
.sub-card-price
{ text-transform: uppercase; }
/* ══════════════════════════════════════════════════════════════ */