/* ==========================================================================
   style.css — mobile-first: базовые стили для экрана 360 px,
   для широких экранов внизу есть @media (min-width).
   ========================================================================== */

/* ---------- 1. Цвета ---------- */
:root {
  --bg: #f6f7f6;
  --surface: #ffffff;
  --text: #121a16;
  --muted: #55625b;
  --border: #dde3df;
  --accent: #0a7d4f;          /* один акцентный цвет на весь сайт */
  --on-accent: #ffffff;
  --selected-border: #8b938f; /* серое выделение выбранной карточки и пакета */
  --selected-bg: #eceeed;

  --radius: 16px;
  --header-h: 3.5rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1412;
    --surface: #171d1a;
    --text: #e9efec;
    --muted: #a0b0a8;
    --border: #29332e;
    --accent: #3ddc97;
    --on-accent: #05261a;
    --selected-border: #7d8782;
    --selected-bg: #232a27;
  }
}

/* ---------- 2. База ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Плавной прокрутки нет специально: по нажатию страница переходит сразу */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent; /* вместо синей вспышки — наше серое :active */
}

h1, h2, h3, p, ul, ol { margin: 0; }

/* Атрибут hidden всегда прячет элемент, даже если у класса есть свой display */
[hidden] { display: none !important; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

/* touch-action: manipulation — браузер не ждёт двойного тапа, нажатие срабатывает сразу */
a, button { touch-action: manipulation; }

.container {
  width: min(100% - 2rem, 44rem);
  margin-inline: auto;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  z-index: 20;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 8px;
}
.skip-link:focus { left: 0.5rem; }

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Значки WhatsApp и Telegram сделаны из картинок-масок: картинка задаёт форму,
   а цвет — текущий цвет текста (currentColor). Так один значок подходит
   и для светлой, и для тёмной темы, и для зелёной кнопки.
   Маски вшиты как data:, потому что файл-маска по адресу не загрузится,
   если открыть сайт двойным кликом (браузер блокирует file:// для масок).
   Исходные картинки лежат в assets/whatsapp.png и assets/telegram.png. */
.brand-icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.brand-icon--wa { --icon: url("data:image/png;base64,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"); }
.brand-icon--tg { --icon: url("data:image/png;base64,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"); }

/* ---------- 3. Шапка ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: var(--header-h);
}

/* Слово-логотип: очень жирный, широкий, с разрядкой */
.wordmark {
  font-size: clamp(1.15rem, 5.4vw, 1.6rem);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.icon-nav {
  display: flex;
  margin-right: -0.5rem; /* выравниваем последнюю иконку по краю контента */
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.75rem;  /* зона нажатия 40×44 px */
  border-radius: 12px;
  color: var(--text);
}
.icon-btn .icon,
.icon-btn .brand-icon { width: 1.45rem; height: 1.45rem; }
.icon-btn:active { background: var(--selected-bg); }

/* ---------- 4. Переключатель языка ----------
   Чёрная дорожка, белый бегунок. Под бегунком текст чёрный,
   на дорожке — белый. Бегунок сдвигается атрибутом data-active. */
.lang-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  background: #000;
  border: 1px solid #000;
  border-radius: 999px;
}

.lang-switch__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: #fff;
  border-radius: 999px;
  transition: transform 0.2s ease;
}
.lang-switch[data-active="ru"] .lang-switch__thumb { transform: translateX(100%); }

.lang-switch button {
  position: relative;  /* над бегунком */
  min-width: 3.5rem;
  min-height: 2.25rem;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease;
}
.lang-switch button[aria-pressed="true"] { color: #000; }

@media (prefers-color-scheme: dark) {
  .lang-switch { border-color: #3a443f; } /* чтобы чёрная дорожка не терялась на тёмном фоне */
}

@media (prefers-reduced-motion: reduce) {
  .lang-switch__thumb, .lang-switch button { transition: none; }
}

/* ---------- 5. Первый экран и меню ---------- */
.hero { padding-top: 1.5rem; }

h1 {
  margin-top: 1.25rem;
  font-size: clamp(1.8rem, 7.5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.slogan {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 1.05rem;
}

.menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.menu li:first-child { grid-column: 1 / -1; }
.menu li { display: grid; } /* пункты в одном ряду одинаковой высоты */

.menu-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 3.75rem;
  padding: 0.7rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}
.menu-item:active {
  background: var(--selected-bg);
  border-color: var(--selected-border);
}
.menu-item > .icon,
.menu-item > .brand-icon { width: 1.5rem; height: 1.5rem; color: var(--accent); }

/* Плитки на узком экране */
.menu li:not(:first-child) .menu-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.85rem;
}
.menu li:not(:first-child) .chevron { display: none; }
.menu-item .chevron { width: 1.1rem; height: 1.1rem; color: var(--muted); }

.menu-item__text { display: grid; flex: 1; line-height: 1.3; }
.menu-item__title { font-weight: 700; }
.menu-item__hint { color: var(--muted); font-size: 0.875rem; }

/* Главный пункт «Гигабайты» залит акцентом */
.menu-item--main {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.menu-item--main > .icon,
.menu-item--main .chevron,
.menu-item--main .menu-item__hint { color: inherit; }
.menu-item--main:active { background: var(--accent); filter: brightness(0.92); }

/* ---------- 6. Разделы ---------- */
section {
  padding-block: 1.75rem;
  scroll-margin-top: var(--header-h); /* заголовок не прячется под липкой шапкой */
}

h2 { margin-bottom: 1rem; font-size: 1.5rem; line-height: 1.25; }
h3 { font-size: 1.1rem; line-height: 1.3; }

.grid, .stack { display: grid; gap: 1rem; }

.card {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ---------- 7. Карточки операторов ---------- */
.op-card {
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* Выбранная карточка: серая рамка и мягкое серое свечение */
.op-card.is-selected {
  border-color: var(--selected-border);
  box-shadow: 0 0 0 1px var(--selected-border), 0 0 18px -6px var(--selected-border);
}

.op-head { display: flex; align-items: center; gap: 0.75rem; }
.op-head h3 { font-size: 1.3rem; }

.op-logo {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

.rate { margin-top: 1rem; }
.rate strong { font-size: 1.75rem; color: var(--accent); }
.rate--text strong { display: block; font-size: 1.35rem; line-height: 1.25; } /* слоган Tele2 */
.note { color: var(--muted); font-size: 0.95rem; }

.pkg-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
}

.pkg {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
}
.pkg strong { white-space: nowrap; }
.pkg[aria-pressed="true"] {
  background: var(--selected-bg);
  border-color: var(--selected-border);
  box-shadow: inset 0 0 0 1px var(--selected-border);
}

.order-label {
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: 0.875rem;
}
.order-label strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
}
.card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr; /* WhatsApp и Telegram в одном ряду */
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.6rem 0.5rem;
  border: 2px solid var(--accent);
  border-radius: 12px;
  background: none;   /* у <button> браузер иначе рисует свой серый фон */
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:active { filter: brightness(0.92); }
.btn--ghost { color: var(--accent); }
.btn--ghost:active { background: var(--selected-bg); }

/* Пакет выбран: кнопки заказа мягко светятся, подсказывая следующий шаг.
   Пульс играет 3 раза, дальше остаётся ровное свечение. */
.op-card.is-ready .btn {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent),
    0 0 16px color-mix(in srgb, var(--accent) 40%, transparent);
  animation: ready-pulse 1.8s ease-in-out 3;
}
@keyframes ready-pulse {
  50% {
    box-shadow:
      0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent),
      0 0 26px color-mix(in srgb, var(--accent) 65%, transparent);
  }
}
/* Тем, кто отключил анимации в системе, пульс не показываем — только ровное свечение */
@media (prefers-reduced-motion: reduce) {
  .op-card.is-ready .btn { animation: none; }
}

/* ---------- 8. Акции, отзывы, новости ---------- */
.stack .card p { margin-top: 0.4rem; color: var(--muted); }

.stack .card time {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.badge {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.15rem 0.7rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
}

.empty { color: var(--muted); }

/* Звёзды — просто украшение, без цифр рейтинга */
.stars {
  margin-bottom: 0.25rem;
  color: #e0a100;
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  line-height: 1;
}
@media (prefers-color-scheme: dark) {
  .stars { color: #ffc83d; }
}

.reviews-toggle,
.reviews-more,
.reviews-hide { width: 100%; margin-top: 1rem; }
.reviews-more + .reviews-hide { margin-top: 0.5rem; }

/* Стрелка смотрит вниз, когда отзывы скрыты, и вверх, когда открыты */
.toggle-chevron { transform: rotate(90deg); transition: transform 0.2s ease; }
.reviews-toggle[aria-expanded="true"] .toggle-chevron { transform: rotate(-90deg); }

#reviews-panel { margin-top: 1rem; }

.reviews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.reviews .card { grid-column: 1 / -1; }
.review-photo {
  display: block;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.review-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 900 / 1850; /* как у самих скриншотов: плитка показывает отзыв целиком, страница не «прыгает» */
  object-fit: cover;
  object-position: top;
}

/* Просмотр скриншота на весь экран */
.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.9); }
body:has(.lightbox[open]) { overflow: hidden; } /* страница под окном не прокручивается */

.lightbox img {
  max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 7rem);
  border-radius: 12px;
  object-fit: contain;
}

.lightbox-btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font: inherit;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-btn:active { background: rgba(255, 255, 255, 0.3); }
.lightbox-btn .icon { width: 1.5rem; height: 1.5rem; }
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev,
.lightbox-next { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 0.5rem; }
.lightbox-next { right: 0.5rem; }
.lightbox-prev .icon { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .toggle-chevron { transition: none; }
}

/* ---------- 9. Как заказать ---------- */
.steps { display: grid; gap: 0.75rem; counter-reset: step; }
.steps li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

/* ---------- 10. Подвал ---------- */
.site-footer {
  margin-top: 1.5rem;
  padding-block: 1.5rem 2.5rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-bottom: 0.75rem; }
.footer-links a { display: inline-block; padding-block: 0.4rem; color: var(--text); }
.copy { margin-top: 0.5rem; }

/* ---------- 11. Широкие экраны ---------- */
@media (min-width: 40rem) {
  .menu li:not(:first-child) .menu-item {
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 1rem;
  }
  .menu li:not(:first-child) .chevron { display: block; }
  .reviews { grid-template-columns: repeat(3, 1fr); }
  .grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps li { flex-direction: column; align-items: flex-start; }
}