/* ===========================================================================
   ARIZONA CENTRAL — общая тема сайта.
   Раньше палитра и шапка были скопированы в каждый шаблон, и правка темы
   означала шесть файлов. Теперь всё здесь: смена оформления = правка этого файла.

   Идея оформления: справочник говорит языком самой игры. Поверхности —
   графит, единственный акцент — песочный (Аризона). Остальные цвета не
   украшение, а ДАННЫЕ: редкость предмета, «нет данных», предупреждение.
   =========================================================================== */

:root{
  /* поверхности */
  --bg:#0e1014;
  --bg-soft:#12151b;
  --panel:#161a20;
  --panel-2:#1c222b;
  --line:#252c37;
  --line-2:#323b49;

  /* текст */
  --txt:#e7e9ee;
  --txt-2:#98a1b2;
  --txt-3:#6b7484;

  /* единственный акцент */
  --ac:#e3a44a;
  --ac-hi:#f5bb69;
  --ac-soft:rgba(227,164,74,.10);
  --ac-line:rgba(227,164,74,.32);

  /* цвета-данные */
  --r-common:#98a1b2;
  --r-green:#4fc97f;
  --r-purple:#a97bff;
  --r-gold:#e3a44a;
  --r-red:#ff5f6d;
  --ok:#4fc97f;
  --warn:#e3a44a;
  --err:#ff5f6d;

  --r:12px;
  --r-s:8px;
  --hdr-h:56px;
  --shell:1240px;

  --f-display:"Unbounded","Onest",system-ui,sans-serif;
  --f-ui:"Onest","Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

/* ⚠️ overflow-x:hidden тут НЕ ставим — он ломает position:sticky у шапки и чипов.
   Если что-то вылезает вбок, чинить надо сам элемент, а не прятать прокрутку. */
body{
  background:var(--bg);
  color:var(--txt);
  font:15px/1.5 var(--f-ui);
  min-height:100vh;
  display:flex;flex-direction:column;
}

/* цифры в таблицах и карточках не должны «плясать» по ширине */
b,strong,.num,.price,.count{font-variant-numeric:tabular-nums}

a{color:inherit}
img{max-width:100%}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-soft)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--line-2)}

/* ── Шапка ────────────────────────────────────────────────────────────────── */
.site-hdr{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:20px;
  height:var(--hdr-h);padding:0 22px;
  background:rgba(14,16,20,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{
  font:800 16px/1 var(--f-display);
  letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;
  color:var(--txt);
  display:flex;align-items:center;gap:9px;
}
.brand::before{
  content:"";width:9px;height:9px;border-radius:2px;
  background:var(--ac);
  box-shadow:0 0 12px var(--ac-line);
}
.brand:hover{color:var(--ac-hi)}

.nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
.nav-link{
  font-size:13.5px;font-weight:500;color:var(--txt-2);
  text-decoration:none;padding:7px 12px;border-radius:var(--r-s);
  white-space:nowrap;transition:color .14s,background .14s;
}
.nav-link:hover{color:var(--txt);background:var(--panel-2)}
.nav-link.on{color:var(--ac);background:var(--ac-soft)}

/* «Спросить» — не раздел сайта, а действие, поэтому отделено рамкой и отодвинуто.
   Стоит в шапке, потому что до подвала в списке предметов никто не доскроллит. */
.nav-ask{
  margin-left:10px;background:none;border:1px solid var(--line-2);color:var(--txt-2);
  font:600 12.5px/1 var(--f-ui);padding:7px 12px;border-radius:var(--r-s);
  white-space:nowrap;cursor:pointer;transition:.14s;
}
.nav-ask:hover{border-color:var(--ac-line);color:var(--ac)}

.hdr-slot{display:flex;align-items:center;gap:9px;margin-left:auto;min-width:0}

.burger{display:none;background:none;border:0;color:var(--txt-2);
  font-size:19px;cursor:pointer;padding:4px 8px}

/* ── Каркас страницы ──────────────────────────────────────────────────────── */
.shell{max-width:var(--shell);margin:0 auto;padding:26px 22px 56px;width:100%}
.shell.wide{max-width:1600px}

.page-h{font:800 27px/1.15 var(--f-display);letter-spacing:-.01em}
.page-sub{margin-top:9px;color:var(--txt-2);max-width:66ch;font-size:14px}

.sec-h{
  font-size:11.5px;font-weight:700;color:var(--ac);
  text-transform:uppercase;letter-spacing:.09em;
  margin-bottom:13px;
}

/* ── Поверхности ──────────────────────────────────────────────────────────── */
.panel{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:18px;
}
.panel-2{background:var(--panel-2)}

/* ── Элементы управления ──────────────────────────────────────────────────── */
.field{
  position:relative;flex:1;min-width:0;max-width:440px;
}
.field input{
  width:100%;background:var(--panel-2);border:1px solid var(--line);
  color:var(--txt);border-radius:10px;
  padding:8px 12px 8px 34px;font:14px var(--f-ui);
}
.field input::placeholder{color:var(--txt-3)}
.field input:focus{outline:none;border-color:var(--ac-line);background:var(--panel)}
.field .ico{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--txt-3);font-size:13px;pointer-events:none;
}

.btn{
  background:var(--panel-2);border:1px solid var(--line);color:var(--txt-2);
  border-radius:var(--r-s);padding:7px 13px;cursor:pointer;
  font:500 13px var(--f-ui);white-space:nowrap;transition:.14s;
}
.btn:hover{color:var(--txt);border-color:var(--line-2)}
.btn.on{color:var(--ac);border-color:var(--ac-line);background:var(--ac-soft)}

.btn-primary{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--ac);color:#161005;border:0;
  border-radius:10px;padding:11px 19px;
  font:700 14px var(--f-ui);text-decoration:none;cursor:pointer;transition:.14s;
}
.btn-primary:hover{background:var(--ac-hi)}

.chips{
  display:flex;gap:7px;padding:11px 22px;overflow-x:auto;
  border-bottom:1px solid var(--line);scrollbar-width:none;
  position:sticky;top:var(--hdr-h);background:var(--bg);z-index:30;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  background:transparent;border:1px solid var(--line);color:var(--txt-2);
  border-radius:20px;padding:5px 14px;cursor:pointer;
  font:500 13px var(--f-ui);white-space:nowrap;flex-shrink:0;transition:.14s;
}
.chip:hover{color:var(--txt);border-color:var(--line-2)}
.chip.on{background:var(--ac-soft);border-color:var(--ac-line);color:var(--ac)}

/* ── Мелочи ───────────────────────────────────────────────────────────────── */
.badge{
  font-size:10.5px;font-weight:700;border-radius:5px;padding:2px 7px;
  white-space:nowrap;border:1px solid var(--line);color:var(--txt-2);
}
.badge-ac{color:var(--ac);border-color:var(--ac-line);background:var(--ac-soft)}
.badge-ok{color:var(--ok);border-color:rgba(79,201,127,.3);background:rgba(79,201,127,.08)}

.note{
  font-size:12.5px;line-height:1.65;color:var(--txt-2);
  background:var(--ac-soft);border:1px solid var(--ac-line);
  border-radius:10px;padding:12px 15px;
}
.note b{color:var(--ac)}

.muted{color:var(--txt-2)}
.dim{color:var(--txt-3)}
.empty{text-align:center;color:var(--txt-2);padding:64px 20px}

/* индикатор загрузки — вместо голого «Загрузка…» */
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:52vh;gap:15px;color:var(--txt-3);font-size:13px}
.spin{width:30px;height:30px;border:2px solid var(--line);border-top-color:var(--ac);
  border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading.hide{display:none}

/* ── Подвал ───────────────────────────────────────────────────────────────── */
.site-foot{
  border-top:1px solid var(--line);margin-top:auto;
  padding:22px;color:var(--txt-3);font-size:12px;line-height:1.7;
}
.site-foot .in{max-width:var(--shell);margin:0 auto;
  display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}
.site-foot b{color:var(--txt-2);font-weight:600}
.site-foot a{color:var(--txt-2);text-decoration:none}
.site-foot a:hover{color:var(--ac)}

/* ── Вопрос с сайта («а где инфа про…») ───────────────────────────────────────
   Кнопка живёт в подвале и появляется, только если вопросам есть куда падать. */
.ask-btn{margin-left:auto;background:none;border:1px solid var(--line-2);color:var(--txt-2);
  font:600 12px/1 var(--f-ui);padding:8px 13px;border-radius:var(--r-s);cursor:pointer;
  transition:.15s}
.ask-btn:hover{border-color:var(--ac-line);color:var(--ac)}

.ask-wrap{position:fixed;inset:0;background:rgba(6,8,11,.72);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:20px}
.ask-wrap[hidden]{display:none}
.ask-card{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:22px;width:100%;max-width:480px}
.ask-card h3{font:700 17px/1.3 var(--f-display);margin-bottom:7px}
.ask-sub{font-size:12.5px;line-height:1.5;color:var(--txt-3);margin-bottom:14px}
.ask-card textarea,.ask-card input{width:100%;background:var(--bg-soft);color:var(--txt);
  border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;
  font:14px/1.5 var(--f-ui);margin-bottom:9px;resize:vertical}
.ask-card textarea:focus,.ask-card input:focus{outline:none;border-color:var(--ac-line)}
/* ханипот: для человека его нет, для бота — обычное поле */
.ask-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ask-row{display:flex;align-items:center;gap:12px;margin-top:4px}
.ask-msg{font-size:12px;color:var(--txt-3);flex:1}
.ask-msg.ok{color:var(--ok)}
.ask-msg.bad{color:var(--err)}
.ask-send{background:var(--ac);color:#1a1206;border:none;border-radius:var(--r-s);
  font:700 13px/1 var(--f-ui);padding:10px 17px;cursor:pointer}
.ask-send:disabled{opacity:.5;cursor:default}
.ask-x{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--txt-3);
  font-size:15px;cursor:pointer;line-height:1}
.ask-x:hover{color:var(--txt)}

/* ── Телефон ──────────────────────────────────────────────────────────────── */
@media(max-width:820px){
  body{font-size:14px}

  /* Шапка становится двухэтажной: логотип и меню сверху, поиск и кнопки —
     отдельной строкой. Иначе на 375px поиск с кнопками не влезал и уезжал вбок. */
  .site-hdr{height:auto;flex-wrap:wrap;padding:9px 13px;gap:9px;row-gap:9px}
  .burger{display:block;order:2;margin-left:auto}
  .hdr-slot{order:3;width:100%;margin-left:0;gap:7px}
  .field{max-width:none;flex:1}

  /* меню раскрывается ПОД шапкой любой высоты, поэтому привязка не к --hdr-h,
     а к самой шапке (sticky = позиционированный элемент) */
  .nav{
    order:4;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg-soft);border-bottom:1px solid var(--line);
    padding:6px;display:none;
  }
  .nav.open{display:flex}
  .nav-link{padding:11px 14px;font-size:15px}
  /* в раскрытом меню телефона «Спросить» — такая же строка, как разделы */
  .nav-ask{margin:4px 0 0;width:100%;text-align:left;padding:11px 14px;font-size:15px}

  .shell{padding:18px 13px 40px}
  .chips{padding:9px 13px;position:static}   /* высота шапки плавает — не липнем */
  .page-h{font-size:22px}
}