/* ==========================================================================
   overrides.css — landing-specific values
   --------------------------------------------------------------------------
   ВСЁ, что меняется с ленда на ленд, живёт здесь. Файл подключается ПОСЛЕДНИМ —
   значит любая переменная или правило отсюда перекрывает базовые из других
   файлов. Бери этот файл за основу при заведении нового ленда.

   Содержит ровно три секции:
     1. Бренд-переменные   (цвет акцента, золота, фон, радиусы)
     2. Шрифт и оффер      (название продукта, цены, ссылки)
     3. Точечные правки    (для микрокорректировок без переписывания компонентов)
   ========================================================================== */

:root {
    /* --- 1. Бренд-переменные ------------------------------------------ */
    /* Основной синий бренда */
    --c-navy:      #0F3D3E;
    --c-navy-deep: #307165;
    --c-darker:    #307165;
    /* Синий-акцент (футер-лого, кнопки "Tudj meg többet") */
    --c-accent:    #1FA282;
    --c-tint:      #C6E8E0;
    --c-wash:      #EAF7F2;
    /* Жёлтый акцент CTA */
    --c-gold:      #E76F51;
    --c-gold-soft: #ffebbe;
    --c-gold-text: #dd9b00;
    /* Красный (warning) */
    --c-danger:    #da2f15;
    --c-danger-bg: #ffece9;

    /* --- 2. Типографика, оффер ---------------------------------------- */
    --ff-display: 'Brygada 1918', 'Geologica', serif;
    --ff-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    /* Эти токены НЕ потребляются стилями напрямую — они здесь как
       единый источник истины, чтобы при переводе ленда менять оффер
       в одном месте. Используются в data-* атрибутах разметки. */
    --brand-name:   "Seropower";
    --price-new:    "9900 HUF";
    --price-old:    "20000 HUF";
    --discount:     "-50%";
    --support-mail: "suppteamx@gmail.com";
    --address:      "Egészség utca 23. · 1051 Budapest, Magyarország";

    /* Радиусы (если ленд требует более плоский/острый стиль) */
    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

/* --- 3. Точечные правки --------------------------------------------------
   Здесь можно держать одиночные правила, которые «подкручивают» компонент,
   не переписывая его исходные стили. Примеры:

   .topbar { background: linear-gradient(...); }
   .product__cta { text-transform: uppercase; }
   .desc__title { font-style: italic; }

   Сейчас правок нет — оставлено пустым.
   ----------------------------------------------------------------------- */

.site-footer__pill {
   background: var(--c-darker);
}

.product__feature svg path {
   fill: var(--c-darker);
}

.phone-field {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 4px;
}
.phone-field .register__field-label {
    grid-column: 1 / -1;
}
.phone-field div.error {
    grid-column: 1 / -1;
}
.phone-prefix {
    color: var(--c-text);
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
    opacity: .55;
    user-select: none;
    pointer-events: none;
    align-self: center;
}

.phone-input-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

input.phone {
    padding-left: var(--phone-select-gap, 32px);
}

.phone-country-select {
    height: 22px;
}

.steps .register__form {
    max-width: 250px;
}

.steps .phone-country-select {
    height: 16px;
    font-size: 14px;
}