/* ============================================================
   ui.css — спільний шар оформлення сайту «Друкарня РАЗ»
   ============================================================

   Підключати ПЕРЕД сторінковим CSS:
       <link href="/assets/ui.css"  rel="stylesheet">
       <link href="/<сторінка>/styles.css" rel="stylesheet">

   Файл складається з двох частин:

   1. ТОКЕНИ (:root) — єдині значення кольорів, радіусів, тіней,
      шрифтів і відступів. Сторінкові стилі мають брати саме їх
      через var(), а не писати #DA1A32 вкотре. Змінили токен —
      змінився весь сайт.

   2. КОМПОНЕНТИ (.ui-*) — розмітка, однакова на всіх сторінках:
      кнопки, картки, чипи, поля, плашки, таблиці, заголовки, FAQ.
      Нові сторінки збираються з них і майже не потребують
      власного CSS.

   Значення виведені з фактичного коду сторінки етикеток:
   з 56 кольорів, що там були, 6 давали 94 використання — саме
   вони й стали брендовими токенами, решта згорнута у сіру шкалу
   та семантичні стани.
   ============================================================ */

:root {
    /* --- Бренд --- */
    --c-brand:        #DA1A32;   /* основний акцент, кнопки, посилання */
    --c-brand-dark:   #B81528;   /* натиснутий/наведений стан */
    --c-brand-soft:   #FFF6F7;   /* ледь помітна заливка під бренд */
    --c-brand-line:   #F0A0AB;   /* рамка при наведенні */

    --c-navy:         #1E3A5F;   /* заголовки, темні секції */
    --c-navy-deep:    #0D1F33;   /* кінець градієнта hero */
    --c-accent:       #3AAFD9;   /* фокус полів, другорядний акцент */
    --c-gold:         #FFC857;   /* підсвітка, бейджі «вигідно» */

    /* --- Сіра шкала ---
       Прохолодні, з домішкою синього: узгоджуються з --c-navy і виглядають
       спокійніше за нейтральні. Контраст на білому перевірено:
       g-600 і темніші проходять WCAG AA для тексту (від 4.5:1),
       g-500 і світліші — лише для рамок та декору. */
    --g-0:            #FFFFFF;
    --g-50:           #F7F9FB;   /* фон секцій */
    --g-100:          #EEF2F6;
    --g-200:          #E3E8EF;   /* рамки за замовчуванням */
    --g-300:          #CDD5DF;
    --g-400:          #9AA4B2;   /* 2.5:1 — декор */
    --g-500:          #8B96A5;   /* 3.0:1 — рамки, іконки */
    --g-600:          #6B7688;   /* 4.6:1 — дрібний текст */
    --g-700:          #667085;   /* 5.0:1 — другорядний текст */
    --g-800:          #4B5565;   /* 7.5:1 */
    --g-850:          #3C4453;   /* 9.8:1 */
    --g-900:          #202939;   /* 14.6:1 — основний текст */

    /* --- Семантичні стани --- */
    --c-ok:           #2C6B41;
    --c-ok-bg:        #F2F9F4;
    --c-ok-line:      #CFE8D6;
    --c-green:        #7AB72B;   /* галочки у списках переваг */
    --c-green-dark:   #5A9A1A;

    --c-warn:         #8A6D1F;
    --c-warn-bg:      #FFFAF0;
    --c-warn-line:    #F5DFA8;
    --c-warn-strong:  #D4A017;

    --c-danger:       #C0392B;
    --c-danger-bg:    #FFF0EF;
    --c-danger-line:  #F5C6C2;

    /* --- Радіуси ---
       Гострі кути помʼякшені, шкала узгоджена. Кнопки — круглі:
       див. коментар до --r-btn нижче. */
    --r-xs:    4px;
    --r-sm:    8px;
    --r-md:    10px;
    --r-lg:    14px;
    --r-xl:    18px;
    /* Кнопки — «пігулки». Це не застарілий стиль: у 2026 актуальні
       обидва підходи, а вирішальним є те, що вся решта сайту вже
       кругла (месенджери, бейджі, банери). Різнобій помітніший за
       будь-який окремий радіус. */
    --r-btn:   999px;  /* кнопки */
    --r-pill:  999px;  /* лише чипи та бейджі */
    --r-round: 50%;

    /* --- Тіні ---
       Багатошарові й на синюватій основі (16,24,40) замість чистого
       чорного: м'якший, менш «брудний» край. Брендова тінь зменшена
       з .35 до .22 — кнопки більше не «світяться». */
    --sh-sm:    0 1px 2px rgba(16, 24, 40, .04),
                0 1px 3px rgba(16, 24, 40, .05);
    --sh-md:    0 4px 10px -2px rgba(16, 24, 40, .06),
                0 2px 4px -2px rgba(16, 24, 40, .04);
    --sh-lg:    0 14px 28px -8px rgba(16, 24, 40, .10),
                0 4px 10px -4px rgba(16, 24, 40, .05);
    --sh-brand: 0 6px 16px -4px rgba(218, 26, 50, .22);
    --sh-focus: 0 0 0 3px rgba(58, 175, 217, .16);

    /* --- Типографіка --- */
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fs-xs:   .75rem;
    --fs-sm:   .82rem;
    --fs-base: .92rem;
    --fs-md:   1rem;
    --fs-lg:   1.1rem;
    --fs-xl:   1.4rem;
    --fs-2xl:  1.8rem;
    --fs-3xl:  clamp(1.5rem, 4vw, 2.2rem);

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi:   600;
    --fw-bold:   700;

    --lh-tight: 1.3;
    --lh-base:  1.6;
    --lh-loose: 1.75;

    /* --- Відступи ---
       Шкала розтягнута приблизно на чверть — це і є «більше повітря».
       Дрібні кроки майже не змінились, великі виросли помітно, тож
       розріджуються саме секції та блоки, а не внутрішні дрібниці. */
    --sp-1: 4px;
    --sp-2: 10px;
    --sp-3: 14px;
    --sp-4: 20px;
    --sp-5: 28px;
    --sp-6: 40px;
    --sp-7: 56px;
    --sp-8: 80px;

    /* --- Розкладка --- */
    --container: 1200px;
    --container-wide: 1400px;
    --transition: .18s ease;
}

/* ============================================================
   КНОПКИ
   ============================================================ */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 13px 24px;
    border: 2px solid transparent;
    border-radius: var(--r-btn);
    font-family: var(--font);
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition),
                box-shadow var(--transition);
}

.ui-btn:hover { transform: translateY(-2px); }
.ui-btn:active { transform: translateY(0); }
.ui-btn:disabled,
.ui-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.ui-btn svg,
.ui-btn i { flex-shrink: 0; }

.ui-btn--primary {
    background: var(--c-brand);
    color: var(--g-0);
}
.ui-btn--primary:hover {
    background: var(--c-brand-dark);
    box-shadow: var(--sh-brand);
}

.ui-btn--outline {
    background: var(--g-0);
    border-color: var(--c-brand);
    color: var(--c-brand);
}
.ui-btn--outline:hover {
    background: var(--c-brand);
    color: var(--g-0);
}

.ui-btn--ghost {
    background: transparent;
    border-color: var(--g-200);
    color: var(--g-800);
}
.ui-btn--ghost:hover { border-color: var(--c-brand-line); }

.ui-btn--gold {
    background: var(--c-gold);
    color: var(--c-navy);
}
.ui-btn--gold:hover { background: #F0B73F; }

.ui-btn--sm { padding: 7px 14px; font-size: var(--fs-sm); }
.ui-btn--lg { padding: 15px 30px; font-size: var(--fs-md); }
.ui-btn--block { display: flex; width: 100%; }

/* ============================================================
   КАРТКИ
   ============================================================ */
.ui-card {
    background: var(--g-0);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
}

.ui-card--flat   { border: none; box-shadow: var(--sh-sm); }
.ui-card--raised { border: none; box-shadow: var(--sh-md); }
.ui-card--muted  { background: var(--g-50); }

/* Картка-вибір: клікабельна, з активним станом */
.ui-choice {
    border: 2px solid var(--g-200);
    border-radius: var(--r-md);
    padding: var(--sp-3) 14px;
    background: var(--g-0);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.ui-choice:hover { border-color: var(--c-brand-line); }
.ui-choice.is-active {
    border-color: var(--c-brand);
    background: var(--c-brand-soft);
}
.ui-choice__name {
    display: block;
    font-weight: var(--fw-semi);
    font-size: var(--fs-base);
    color: var(--c-navy);
}
.ui-choice__desc {
    display: block;
    margin-top: 3px;
    font-size: var(--fs-xs);
    color: var(--g-600);
    line-height: 1.35;
}

/* Типографіка всередині карток */
.ui-card h3 {
    margin: var(--sp-2) 0 var(--sp-3);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--c-navy);
    line-height: var(--lh-tight);
}

.ui-card p {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--g-700);
}

.ui-card p:last-child { margin-bottom: 0; }
.ui-card strong { color: var(--g-850); }

/* ============================================================
   СІТКА
   Мінімальна розкладка для блоків карток і плашок. Додана після
   збірки другої сторінки: виявилось, що кожній новій сторінці
   потрібна та сама сітка, і тримати її в сторінковому CSS означало б
   копіювати те саме вкотре.
   ============================================================ */
.ui-grid {
    display: grid;
    gap: var(--sp-4);
    align-items: start;
}

.ui-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 960px) {
    .ui-grid--3,
    .ui-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .ui-grid--2,
    .ui-grid--3,
    .ui-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   ЧИПИ — компактний вибір з кількох варіантів
   ============================================================ */
.ui-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.ui-chip {
    border: 2px solid var(--g-200);
    border-radius: var(--r-pill);
    padding: 8px 16px;
    background: var(--g-0);
    color: var(--g-850);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition),
                color var(--transition);
}
.ui-chip:hover { border-color: var(--c-brand-line); }
.ui-chip.is-active {
    border-color: var(--c-brand);
    background: var(--c-brand);
    color: var(--g-0);
    font-weight: var(--fw-semi);
}

/* ============================================================
   ПОЛЯ ВВЕДЕННЯ
   ============================================================ */
.ui-field { display: flex; flex-direction: column; gap: 5px; }

.ui-field__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--g-700);
}

.ui-input,
.ui-select,
.ui-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--g-200);
    border-radius: var(--r-md);
    background: var(--g-0);
    color: var(--g-900);
    font-family: var(--font);
    font-size: var(--fs-base);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: var(--sh-focus);
}

.ui-input:disabled,
.ui-select:disabled { background: var(--g-50); color: var(--g-500); }

.ui-field__hint {
    font-size: var(--fs-xs);
    color: var(--g-500);
    line-height: 1.4;
}

/* ============================================================
   ВИПАДАЮЧІ СПИСКИ
   Правило навмисно на самому теґі select, а не лише на класі:
   нативна стрілка в кожному браузері своя (у Windows це важка сіра
   кнопка на пів висоти поля), і поки список лишався без стилів, він
   випадав із оформлення решти форми. Тепер будь-який новий select
   на сторінці, що підключає ui.css, одразу виглядає як треба —
   класу додавати не потрібно.

   Ховаємо нативну стрілку й малюємо власну фоном. Саме фоном, а не
   псевдоелементом: у select не можна покласти дочірній елемент, а
   обгортка з ::after змусила б додавати зайвий div навколо кожного
   списку. Колір шеврона змінюється разом зі станом поля.

   Список із multiple/size — це вже не випадайка, а список-коробка:
   стрілка там нічого не позначає, тому їх виключаємо.
   ============================================================ */
select:not([multiple]):not([size]),
.ui-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    /* Фіксована мінімальна висота, а не лише падінги: у select своя
       внутрішня метрика, і поруч зі звичайним input він виходив на
       пару пікселів нижчим — в одному рядку це помітно. 44px — ще й
       комфортна ціль для пальця. */
    min-height: 44px;
    padding: 10px 40px 10px 12px;   /* праворуч — місце під шеврон */
    border: 2px solid var(--g-200);
    border-radius: var(--r-md);
    background-color: var(--g-0);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%238B96A5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    color: var(--g-900);
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.35;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

/* Старий Edge малює власну стрілку поверх нашої */
select::-ms-expand { display: none; }

select:not([multiple]):not([size]):hover,
.ui-select:hover {
    border-color: var(--g-400);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%231E3A5F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

select:not([multiple]):not([size]):focus,
.ui-select:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: var(--sh-focus);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%233AAFD9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

select:not([multiple]):not([size]):disabled,
.ui-select:disabled {
    background-color: var(--g-50);
    color: var(--g-500);
    cursor: default;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23CDD5DF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Випадне меню малює система, але колір тексту успадковується —
   без цього в темній темі ОС пункти бувають нечитабельними. */
select option { color: var(--g-900); background: var(--g-0); }

/* ------------------------------------------------------------
   Розкрита панель: власна, бо системну оформити неможливо
   Розмітку будує /assets/ui-select.js поверх нативного select.
   Правила вище лишаються як запасний вигляд: якщо скрипт не
   завантажиться, список працюватиме звичайним, просто без панелі.
   ------------------------------------------------------------ */
.ui-sel { position: relative; width: 100%; }

/* Нативний список ховаємо, але лишаємо в DOM: у ньому value, через
   нього ходять події change, його читає решта коду.
   Ланцюжок :not() тут не декоративний — він піднімає специфічність вище
   за загальне правило select:not([multiple]):not([size]) вгорі файлу.
   Без нього звідти перемагали width:100% і min-height:44px, і схований
   список лишався повнорозмірним під нашою кнопкою. */
.ui-sel > select:not([multiple]):not([size]) {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
}

.ui-sel__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 2px solid var(--g-200);
    border-radius: var(--r-md);
    background: var(--g-0);
    color: var(--g-900);
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.ui-sel__trigger:hover { border-color: var(--g-400); }
.ui-sel__trigger:focus-visible,
.ui-sel.is-open .ui-sel__trigger {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: var(--sh-focus);
}
.ui-sel__trigger:disabled { background: var(--g-50); color: var(--g-500); cursor: default; }

.ui-sel__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Шеврон із рамок: не тягне за собою ні шрифт іконок, ні картинку */
.ui-sel__caret {
    flex: none;
    width: 8px; height: 8px;
    margin-top: -3px;
    border: solid var(--g-500);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform var(--transition), margin var(--transition), border-color var(--transition);
}
.ui-sel__trigger:hover .ui-sel__caret { border-color: var(--c-navy); }
.ui-sel.is-open .ui-sel__caret {
    border-color: var(--c-accent);
    transform: rotate(-135deg);
    margin-top: 2px;
}

.ui-sel__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    z-index: 60;
    display: none;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    background: var(--g-0);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
}
.ui-sel.is-open .ui-sel__panel { display: block; animation: uiSelIn .16s ease both; }

@keyframes uiSelIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ui-sel.is-open .ui-sel__panel { animation: none; }
}

.ui-sel__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    font-size: var(--fs-base);
    color: var(--g-900);
    cursor: pointer;
}
/* is-cursor — підсвітка з клавіатури, hover — мишею. Однакові навмисно:
   людина не має гадати, «де вона зараз» залежно від способу керування. */
.ui-sel__opt:hover,
.ui-sel__opt.is-cursor { background: var(--g-100); }

/* Обраний пункт — темно-синій, як «активний» стан у решті інтерфейсу
   (chip-option.active, quick-qty-btn.active). Зелений тут був чужим:
   у цьому проєкті зелений означає «все гаразд» у перевірках макета,
   а не «цей варіант вибрано». */
.ui-sel__opt.is-selected {
    background: var(--c-navy);
    color: var(--g-0);
    font-weight: var(--fw-semi);
}
.ui-sel__opt.is-selected:hover { background: var(--c-navy); }
.ui-sel__opt.is-selected::after {
    content: "";
    flex: none;
    width: 5px; height: 9px;
    border: solid var(--g-0);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}
.ui-sel__opt.is-disabled { color: var(--g-400); cursor: default; }
.ui-sel__opt.is-disabled:hover { background: none; }

/* ============================================================
   ПЛАШКИ-ПОВІДОМЛЕННЯ
   ============================================================ */
.ui-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--g-200);
    border-left: 3px solid var(--g-300);
    border-radius: var(--r-md);
    background: var(--g-50);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--g-800);
}

.ui-note i { flex-shrink: 0; line-height: 1.4; }

.ui-note--ok {
    background: var(--c-ok-bg);
    border-color: var(--c-ok-line);
    border-left-color: var(--c-ok);
    color: var(--c-ok);
}

.ui-note--warn {
    background: var(--c-warn-bg);
    border-color: var(--c-warn-line);
    border-left-color: var(--c-gold);
    color: var(--c-warn);
}
.ui-note--warn i { color: var(--c-warn-strong); }

.ui-note--danger {
    background: var(--c-danger-bg);
    border-color: var(--c-danger-line);
    border-left-color: var(--c-brand);
    color: var(--c-danger);
}

.ui-note--brand {
    background: var(--g-50);
    border-left-color: var(--c-brand);
}

/* ============================================================
   БЕЙДЖІ
   ============================================================ */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    line-height: 1.3;
}

.ui-badge--brand { background: var(--c-brand); color: var(--g-0); }
.ui-badge--gold  { background: var(--c-gold);  color: var(--c-navy); }
.ui-badge--soft  { background: var(--g-100);   color: var(--g-800); }

/* ============================================================
   ТАБЛИЦІ
   ============================================================ */
.ui-table-wrap { width: 100%; overflow-x: auto; }

.ui-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-base);
}

.ui-table th,
.ui-table td {
    padding: var(--sp-3) 14px;
    text-align: center;
    border-bottom: 1px solid var(--g-200);
}

.ui-table thead th {
    background: var(--c-navy);
    color: var(--g-0);
    font-weight: var(--fw-semi);
    font-size: var(--fs-sm);
}

.ui-table thead th:first-child { border-top-left-radius: var(--r-md); }
.ui-table thead th:last-child  { border-top-right-radius: var(--r-md); }

.ui-table tbody tr:hover { background: var(--g-50); }
.ui-table .is-highlight   { background: var(--c-brand-soft); }

/* ============================================================
   ЗАГОЛОВКИ СЕКЦІЙ
   ============================================================ */
.ui-section { padding: var(--sp-8) var(--sp-4); }
.ui-section--muted { background: var(--g-50); }

.ui-container {
    max-width: var(--container);
    margin: 0 auto;
}

.ui-title {
    text-align: center;
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--c-navy);
    margin: 0 0 var(--sp-3);
}

.ui-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    margin: var(--sp-4) auto 0;
    border-radius: var(--r-xs);
    background: linear-gradient(90deg, var(--c-brand), var(--c-gold));
}

.ui-subtitle {
    max-width: 640px;
    margin: var(--sp-5) auto;
    text-align: center;
    font-size: var(--fs-lg);
    color: var(--g-700);
    line-height: var(--lh-base);
}

/* ============================================================
   FAQ
   ============================================================ */
.ui-faq__item {
    border: 1px solid var(--g-200);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-2);
    overflow: hidden;
    background: var(--g-0);
}

.ui-faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: none;
    background: none;
    font-family: var(--font);
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    color: var(--c-navy);
    text-align: left;
    cursor: pointer;
}

.ui-faq__q:hover { background: var(--g-50); }

.ui-faq__a {
    max-height: 0;
    overflow: hidden;
    padding: 0 var(--sp-4);
    color: var(--g-700);
    font-size: var(--fs-base);
    line-height: var(--lh-loose);
    transition: max-height .3s ease, padding .3s ease;
}

.ui-faq__item.is-open .ui-faq__a {
    max-height: 600px;
    padding: 0 var(--sp-4) var(--sp-4);
}

/* ============================================================
   ДРІБНИЦІ
   ============================================================ */
.ui-hidden { display: none !important; }

.ui-shake { animation: uiShake .4s ease; }
@keyframes uiShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .ui-btn, .ui-chip, .ui-choice, .ui-input, .ui-faq__a { transition: none; }
    .ui-btn:hover { transform: none; }
    .ui-shake { animation: none; }
}