/* ============================================================
   VABO VPN — компоненты.
   Все цвета и размеры — только через токены из tokens.css.
   ============================================================ */

@layer components {

  /* ── Иконка ─────────────────────────────────────────────── */
  .icon {
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    flex: none;
    vertical-align: -0.125em;
    fill: none;
    pointer-events: none;
  }
  .icon--fill { fill: currentColor; }
  .icon--lg { inline-size: 1.5em; block-size: 1.5em; }

  /* ── Кнопка ─────────────────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--tap-min);
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }
  .btn:active { transform: translateY(1px); }

  .btn--primary {
    background: var(--accent);
    color: var(--accent-contrast);
  }
  .btn--primary:hover { background: var(--accent-hover); color: var(--accent-contrast); }

  .btn--secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
  }
  .btn--secondary:hover { background: var(--surface-2); color: var(--text); border-color: var(--accent-text); }

  .btn--ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
  }
  .btn--ghost:hover { background: var(--accent-soft); color: var(--text); border-color: var(--accent-text); }

  .btn--quiet {
    background: transparent;
    color: var(--accent-text);
    border-color: transparent;
    padding-inline: var(--space-2);
  }
  .btn--quiet:hover { background: var(--accent-soft); color: var(--accent-text); }

  .btn--sm { min-block-size: 36px; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
  .btn--lg { min-block-size: 52px; padding: var(--space-4) var(--space-6); font-size: var(--text-md); }
  .btn--block { inline-size: 100%; }

  .btn[disabled], .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  /* Состояние загрузки: текст остаётся, добавляется индикатор.
     aria-busy сообщает об этом скринридеру. */
  .btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
  .btn[aria-busy="true"]::before {
    content: "";
    inline-size: 1em; block-size: 1em;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: 50%;
    animation: spin 700ms linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── Бейдж ──────────────────────────────────────────────── */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.25em 0.7em;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    white-space: nowrap;
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
  }
  .badge--accent  { background: var(--accent); color: var(--accent-contrast); border-color: transparent; }
  .badge--soft    { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
  .badge--success { background: transparent; color: var(--success-text); border-color: var(--success); }
  .badge--danger  { background: transparent; color: var(--danger-text);  border-color: var(--danger); }
  .badge--warning { background: transparent; color: var(--warning-text); border-color: var(--warning); }

  /* ── Карточка ───────────────────────────────────────────── */
  .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
  }
  .card--interactive:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
  }
  .card__title { font-size: var(--text-md); font-weight: var(--weight-semibold); }
  .card__text  { color: var(--text-muted); font-size: var(--text-sm); }

  /* ── Возможность ────────────────────────────────────────── */
  .feature {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    block-size: 100%;
  }
  .feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px; block-size: 44px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 1.375rem;
  }
  .feature__title { font-size: var(--text-md); font-weight: var(--weight-semibold); }
  .feature__text  { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }

  .grid-features {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }

  /* ── Тариф ──────────────────────────────────────────────── */
  .grid-plans {
    display: grid;
    /* Ряды разведены шире: бейдж выступает за верхнюю границу карточки
       и при переносе в две колонки иначе наезжает на карточку сверху. */
    gap: var(--space-6) var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  }

  .plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-5) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
  }
  .plan:hover { border-color: var(--border-strong); transform: translateY(-2px); }

  /* Выделение помеченного тарифа — не только цветом:
     толще рамка, подпись текстом и иконка в бейдже. */
  .plan--featured {
    border-color: var(--accent);
    border-width: 2px;
    padding-block-start: calc(var(--space-6) - 1px);
    box-shadow: var(--glow);
  }

  .plan__badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    translate: -50% -50%;
  }
  .plan__period { font-size: var(--text-md); font-weight: var(--weight-semibold); }
  .plan__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.03em;
    line-height: 1.1;
  }
  .plan__price-cur { font-size: 0.5em; font-weight: var(--weight-medium); color: var(--text-muted); }
  .plan__permonth { font-size: var(--text-sm); color: var(--text-muted); }
  .plan__save {
    align-self: flex-start;
    margin-block-start: var(--space-1);
  }
  .plan__cta { margin-block-start: auto; padding-block-start: var(--space-4); }

  /* Общие для всех тарифов преимущества — одной строкой, а не
     четырьмя одинаковыми списками в карточках. */
  .plan-includes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    padding: var(--space-4) var(--space-5);
    margin-block-end: var(--space-5);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    list-style: none;
  }
  .plan-includes li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
  }
  .plan-includes .icon { color: var(--accent-text); }

  /* ── Шаг ────────────────────────────────────────────────── */
  .steps {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    counter-reset: step;
  }
  .step {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }
  .step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px; block-size: 32px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
  }
  .step__title { font-size: var(--text-md); font-weight: var(--weight-semibold); }
  .step__text  { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }

  /* ── Аккордеон на <details> ─────────────────────────────── */
  .accordion { display: grid; gap: var(--space-2); }

  .accordion__item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: clip;
  }
  .accordion__item[open] { border-color: var(--border-strong); }

  .accordion__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-block-size: var(--tap-min);
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    list-style: none;
  }
  .accordion__q::-webkit-details-marker { display: none; }
  .accordion__q:hover { color: var(--accent-text); }

  .accordion__q .icon {
    color: var(--accent-text);
    transition: rotate var(--dur-base) var(--ease-out);
  }
  .accordion__item[open] .accordion__q .icon { rotate: 180deg; }

  .accordion__a {
    padding: 0 var(--space-5) var(--space-5);
    color: var(--text-muted);
    font-size: var(--text-sm);
  }
  .accordion__a > * + * { margin-block-start: var(--space-3); }

  /* ── Шапка ──────────────────────────────────────────────── */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    background: color-mix(in oklab, var(--bg) 85%, transparent);
    border-block-end: 1px solid var(--border);
    padding-block-start: env(safe-area-inset-top);
  }
  @supports (backdrop-filter: blur(1px)) {
    .site-header { backdrop-filter: blur(12px) saturate(1.3); }
  }

  .site-header__bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-block-size: var(--header-h);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    letter-spacing: -0.02em;
    color: var(--text);
    text-decoration: none;
    margin-inline-end: auto;
  }
  .brand img { inline-size: 32px; block-size: 32px; border-radius: var(--radius-xs); }

  .site-nav { display: flex; align-items: center; gap: var(--space-1); }
  .site-nav a {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
  }
  .site-nav a:hover { color: var(--text); background: var(--surface); }
  /* Текущая секция: цвет + подчёркивание, не только цвет */
  .site-nav a[aria-current="true"] {
    color: var(--text);
    box-shadow: inset 0 -2px 0 var(--accent);
  }

  .header-actions { display: flex; align-items: center; gap: var(--space-2); }

  /* Иконочные кнопки шапки */
  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
  }
  .icon-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface); }

  /* Переключатель темы: показываем ту иконку, на которую переключимся */
  .theme-toggle [data-theme-icon="dark"] { display: none; }
  :root[data-theme="light"] .theme-toggle [data-theme-icon="dark"] { display: inline-block; }
  :root[data-theme="light"] .theme-toggle [data-theme-icon="light"] { display: none; }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) .theme-toggle [data-theme-icon="dark"] { display: inline-block; }
    :root:not([data-theme]) .theme-toggle [data-theme-icon="light"] { display: none; }
  }

  /* ── Мобильное меню на <dialog> ─────────────────────────── */
  .nav-toggle { display: none; }

  .nav-dialog {
    inline-size: min(360px, 100%);
    max-inline-size: 100%;
    block-size: 100dvh;
    max-block-size: 100dvh;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    border-inline-start: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
  }
  .nav-dialog::backdrop { background: oklch(0% 0 0 / 0.6); }

  .nav-dialog__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    block-size: 100%;
    padding: var(--space-4) var(--gutter)
             calc(var(--space-6) + env(safe-area-inset-bottom));
    padding-block-start: calc(var(--space-4) + env(safe-area-inset-top));
    overflow-y: auto;
  }
  .nav-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-end: var(--space-4);
  }
  .nav-dialog a:not(.btn) {
    display: flex;
    align-items: center;
    min-block-size: var(--tap-min);
    padding: var(--space-3) var(--space-2);
    border-block-end: 1px solid var(--border);
    color: var(--text);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    text-decoration: none;
  }
  .nav-dialog .btn { margin-block-start: var(--space-2); }

  @media (max-width: 860px) {
    .site-header .site-nav,
    .site-header .header-actions .btn { display: none; }
    .nav-toggle { display: inline-flex; }
  }

  /* ── Статус серверов ────────────────────────────────────── */
  .status-list {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    list-style: none;
    padding: 0;
  }
  .status-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
  }
  .status-item__name { margin-inline-end: auto; color: var(--text); }
  .status-item__ping { color: var(--text-faint); font-variant-numeric: tabular-nums; }

  /* Состояние передаётся иконкой, текстом и цветом — не только цветом */
  .status-item__state {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: var(--weight-medium);
    font-size: var(--text-xs);
  }
  .status-item--up   .status-item__state { color: var(--success-text); }
  .status-item--down .status-item__state { color: var(--danger-text); }

  /* ── Плитка платформы ───────────────────────────────────── */
  .platforms { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  .platform-tile {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--tap-min);
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    cursor: pointer;
  }
  .platform-tile:hover { color: var(--text); border-color: var(--border-strong); }
  .platform-tile[aria-selected="true"],
  .platform-tile[aria-pressed="true"],
  .platform-tile[aria-current] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--text);
  }
  .platform-tile .icon { font-size: 1.125rem; }

  /* ── Способ оплаты ──────────────────────────────────────── */
  .payments {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    list-style: none;
    padding: 0;
  }
  .payment {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 48px;
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
  }
  .payment .icon { font-size: 1.25rem; color: var(--text); }
  /* СБП и «Мир» — словесным знаком: открытых SVG-логотипов нет */
  .payment__wordmark {
    font-weight: var(--weight-bold);
    letter-spacing: 0.02em;
    color: var(--text);
  }

  /* ── Отзыв ──────────────────────────────────────────────── */
  .review {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    block-size: 100%;
  }
  .review__rating { display: inline-flex; gap: 2px; color: var(--accent-text); }
  .review__rating .icon { font-size: 1rem; }
  .review__text { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }
  .review__foot {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: auto;
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--border);
  }
  .review__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 36px; block-size: 36px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
  }
  .review__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
  .review__meta { font-size: var(--text-xs); color: var(--text-faint); }

  /* ── Подвал ─────────────────────────────────────────────── */
  .site-footer {
    border-block-start: 1px solid var(--border);
    background: var(--bg-subtle);
    padding-block: var(--space-7)
                   calc(var(--space-6) + env(safe-area-inset-bottom));
    margin-block-start: var(--space-8);
  }
  .site-footer__grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  }
  .site-footer h2 {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-block-end: var(--space-3);
  }
  .site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
  .site-footer a {
    display: inline-flex;
    align-items: center;
    min-block-size: 32px;
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-decoration: none;
  }
  .site-footer a:hover { color: var(--text); text-decoration: underline; }
  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--border);
    font-size: var(--text-xs);
    color: var(--text-faint);
  }

  /* ── Уведомление ────────────────────────────────────────── */
  .toast-region {
    position: fixed;
    inset-block-end: calc(var(--space-5) + env(safe-area-inset-bottom));
    inset-inline: var(--gutter);
    z-index: var(--z-toast);
    display: grid;
    gap: var(--space-2);
    justify-items: center;
    pointer-events: none;
  }
  .toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-inline-size: min(480px, 100%);
    padding: var(--space-3) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    pointer-events: auto;
  }
  .toast--success .icon { color: var(--success-text); }
  .toast--danger  .icon { color: var(--danger-text); }

  /* ── Полоса доверия под hero ────────────────────────────── */
  .trustbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
    font-size: var(--text-sm);
    color: var(--text-muted);
    list-style: none;
    padding: 0;
  }
  .trustbar li { display: flex; align-items: center; gap: var(--space-2); }
  .trustbar .icon { color: var(--accent-text); }

  /* ── Метрика ────────────────────────────────────────────── */
  .metrics {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    list-style: none;
    padding: 0;
  }
  .metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }
  .metric__value {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
  }
  .metric__label { font-size: var(--text-xs); color: var(--text-muted); }
  .metric__note  { font-size: var(--text-xs); color: var(--text-faint); }
}

@layer components {
  /* ── «Скоро»: собственное приложение ─────────────────────── */
  .app-soon {
    padding: var(--space-5);
    background: var(--bg-subtle);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
  }
  .app-soon__head { display: flex; gap: var(--space-4); align-items: flex-start; }
  .app-soon__ico {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 44px; block-size: 44px; flex: none;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 1.375rem;
  }
  .app-soon__title {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0;
  }
  .app-soon__lead { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-muted); }

  .app-soon__features {
    display: grid; gap: var(--space-2);
    margin-block-start: var(--space-4); padding: 0; list-style: none;
    font-size: var(--text-sm); color: var(--text-muted);
  }
  .app-soon__features li { display: flex; align-items: center; gap: var(--space-2); }
  .app-soon__features .icon { color: var(--accent-text); }

  .app-soon__platforms {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    margin-block-start: var(--space-4); font-size: var(--text-sm);
  }
  /* Платформы здесь — перечень планов, а не ссылки: не кликаются
     и не притворяются кнопками. */
  .app-soon__platforms .platform-tile { cursor: default; opacity: 0.75; }
  .app-soon__platforms .platform-tile:hover { border-color: var(--border); color: var(--text-muted); }

  .app-soon__eta {
    display: flex; align-items: center; gap: var(--space-2);
    margin-block-start: var(--space-4);
    font-size: var(--text-sm); color: var(--text-muted);
  }
  .app-soon .btn { margin-block-start: var(--space-4); }
}