/* ============================================================
   Общие кнопки диалогов и форм. Один стиль на весь сайт.

   .ui-btn-primary — канонический градиент #FF6291→#FF755E, чёрный текст.
       Hover: фон плавно уходит в #061210, надпись становится градиентной.
       «Градиент → цвет» в CSS не анимируется, поэтому чёрный лежит
       отдельным слоем (::before, opacity), а градиентный текст — вторым
       слоем (::after, content: attr(data-label)). Оба гаснут/проявляются
       синхронно, переход непрерывен в обе стороны.
       ⚠️ Кнопке обязательно нужен data-label с тем же текстом.

   .ui-btn-ghost — бледная второстепенная (Cancel), как .btn-cancel в ЛК.
   ============================================================ */

/* Единая метрика всех кнопок сайта: padding 12px по вертикали, шрифт 13px,
   line-height 1.2 → высота 40px. Радиус 10px. Не разъезжаться! */
.ui-btn-primary,
.ui-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

.ui-btn-primary {
    position: relative;
    isolation: isolate;
    border: none;
    background: linear-gradient(to right, #FF6291, #FF755E);
    color: #000;
    font-weight: 700;
    transition: color 0.4s ease;
}
.ui-btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: #061210;
    opacity: 0;
    transition: opacity 0.4s ease;
}
/* Ширина слоя = ширине текста: если растянуть на всю кнопку (inset: 0), градиент
   растянется вместе с ней и на буквы попадёт бледная середина перехода. */
.ui-btn-primary::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font: inherit;
    background: linear-gradient(to right, #FF6291, #FF755E);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.ui-btn-primary:hover { color: transparent; }
.ui-btn-primary:hover::before,
.ui-btn-primary:hover::after { opacity: 1; }

.ui-btn-ghost {
    border: 1px solid #BCCFC8;
    background: transparent;
    color: #6E827A;
    font-weight: 600;
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.ui-btn-ghost:hover {
    background: #B4C9C3;
    border-color: #B4C9C3;
    color: #051210;
}
/* ── Мобильная сетка ─────────────────────────────────────────────────────
   Одна линия для всего сайта: 20px по бокам — как у шапки-меню
   (#mainSidebar на мобилке стоит left/right: 20px).
   До этого контент шёл по 32px (Tailwind p-8), а лендинг вообще держал
   инлайновый margin-left: 120px от десктопного сайдбара. */
@media (max-width: 768px) {
    main {
        margin-left: 0 !important;      /* перебивает inline-style на лендинге */
        padding-left: 20px !important;
        padding-right: 20px !important;
        /* Меню на мобилке — плавающая плашка поверх контента (position: fixed):
           top 10px + высота 80px = низ на 90px. Опускаем контент под неё с
           зазором 30px: при 10px (было) заголовок визуально прилипал к меню.
           Прежние 88px (main.ml-20) давали перекрытие в 2px, а у лендинга
           отступа не было вовсе — заголовок уезжал под меню. */
        padding-top: 120px !important;
    }
    /* Боковой отступ теперь на main. У контейнера-обёртки (прямой потомок) его
       снимаем, иначе сложится 20 + 32. Вложенные .p-8 (текст в hero на лендинге)
       не трогаем — у них это внутренний padding, а не сетка. */
    main > .p-8 {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ── Автозаполнение браузера ─────────────────────────────────────────────
   Chrome рисует поверх поля свой фон (-internal-light-dark #E8F0FE) отдельным
   слоем: он не наследует ни прозрачность, ни border-radius — отсюда белый
   прямоугольник поверх скруглённого контура и чужой цвет текста.
   Отменить нельзя, но можно обмануть:
     • текст — только через -webkit-text-fill-color (color игнорируется);
     • фон — бесконечным transition: значение применяется, но перекрашивание
       длится ~3 года, поэтому глазу виден исходный фон поля.
   Работает для всех полей сайта: калькулятор (.birth-input/.date-part),
   формы ЛК, логин/регистрация. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: #000;
    caret-color: #000;
    -webkit-background-clip: text;
    background-clip: text;
    transition: background-color 100000s ease-in-out 0s;
}
/* Поля даты/имени на калькуляторе — свой цвет текста и вес */
.birth-input:-webkit-autofill,
.date-part:-webkit-autofill {
    -webkit-text-fill-color: #000;
    font-weight: 600;
}

/* ── Диалог подтверждения (замена системного confirm) ──────────────────── */
.ui-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(6, 42, 44, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
}
.ui-modal.is-open { display: flex; }
.ui-modal-card {
    background: #fff;
    border-radius: 18px;
    padding: 28px 32px;
    text-align: center;
    max-width: 380px;
    width: 100%;
    animation: uiModalIn 0.22s ease;
}
@keyframes uiModalIn {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
.ui-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #062A2C;
    margin-bottom: 8px;
}
.ui-modal-msg {
    font-size: 14px;
    line-height: 1.5;
    color: #3D5853;
    margin-bottom: 22px;
}
.ui-modal-msg b { color: #062A2C; }
.ui-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ── Текстовая ссылка со стрелкой («Dive Deeper →») ────────────────────────
   Общий элемент для статей и подобных переходов. Подпись жирная, стрелка —
   тот же текстовый глиф тонким начертанием (300), поэтому она сама садится
   на базовую линию и не требует ручной подгонки, как отдельный SVG.
   Стрелка в ::after — в разметке ничего, кроме текста, не нужно:
       <a class="link-arrow" href="...">Dive Deeper</a>
   Цвет и кегль наследуются от места, куда ссылку поставили. */
.link-arrow {
    display: inline-block;
    font-weight: 700;
    text-decoration: none;
    color: inherit;
}
.link-arrow::after {
    content: '\2192';
    font-weight: 300;
    margin-left: 3px;
}
.link-arrow:hover { opacity: 0.7; }