/* ============================================================
   КОНГРІВКИ — СТИЛІ СТОРІНКИ
   stickers-labels/congrevka-app/styles.css
   ============================================================

   Спільна оболонка конфігуратора (секція, групи параметрів, тираж,
   картки терміну, підсумок, кнопки замовлення) живе в
   /assets/configurator.css і підключається окремо. Тут — лише те,
   чого немає більше ніде на сайті:

     .cg-layout     — превʼю ліворуч, параметри праворуч;
     .cg-preview    — сама наклейка, головний елемент сторінки;
     .cg-swatch     — плитка кольору (зірка без тексту);
     .cg-tpl        — плитка шаблону (справжня конгрівка мініатюрою);
     .cg-size       — плитка діаметра з кружечком у пропорції.

   Причина, чому цього немає в інших конфігураторах, одна: там
   центром є макет ЗАМОВНИКА, а тут — наш власний, зібраний із
   параметрів. Вибирати доводиться не файл, а вигляд.
   ============================================================ */

/* ============================================
   ШРИФТ МАКЕТА
   ============================================
   Source Sans 3 — відкритий шрифт Adobe і найближчий родич
   виробничого Myriad Pro. Використовується ТІЛЬКИ всередині
   намальованої конгрівки, не в інтерфейсі: сторінка лишається на
   Inter, як і весь сайт.

   Було: системний стек (Segoe UI / Arial). Через це на Windows
   замовник бачив одне, на Mac інше, а картинка менеджеру приїжджала
   ще й третьою. Свій шрифт прибирає лотерею.

   Дві підмножини замість одного файлу: кирилиця 9 КБ, латиниця
   15 КБ. У макеті майже сама кирилиця, тож латиниця здебільшого й
   не знадобиться — unicode-range дозволяє браузеру її не качати.

   font-display: swap — доки шрифт їде, текст малюється запасним і
   лишається читабельним. Порожній прямокутник замість макета був би
   гіршим за неідеальні пропорції на пів секунди.
   ============================================ */
@font-face {
    font-family: 'Source Sans 3';
    src: url('/assets/fonts/source-sans-3-cyrillic-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('/assets/fonts/source-sans-3-latin-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}


/* Шапка sticky: без scroll-margin-top перехід за якорем ставив би
   заголовок конфігуратора рівно під неї. */
#cgConfig,
#cgPrices,
#otherPrintSubcategories {
    scroll-margin-top: calc(var(--hdr-h, 130px) + 16px);
}


/* ============================================
   РОЗКЛАДКА
   ============================================
   Превʼю ліворуч і липке, параметри праворуч — щоб звʼязок
   «натиснув — змінилось» було видно, не гортаючи сторінку. Це
   головна причина, чому колонки саме такі: усі шість шаблонів
   відрізняються дрібницями, і без картинки поруч вибір робиться
   наосліп.
   ============================================ */
.cg-layout {
    display: grid;
    grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
}

.cg-preview-col { position: sticky; top: calc(var(--hdr-h, 130px) + 12px); }

.cg-preview-box {
    background: var(--g-0);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
    box-shadow: var(--sh-sm);
    text-align: center;
}

/* Клітчасте тло під наклейкою. Конгрівка вирізається по контуру
   зірки, тож між променями в неї не білий папір, а порожнеча —
   і показати це можна тільки так. На суцільно білому тлі зірка
   читалася б як біла картка з малюнком. */
.cg-preview {
    position: relative;
    border-radius: var(--r-md);
    background-color: var(--g-0);
    background-image:
        linear-gradient(45deg, var(--g-100) 25%, transparent 25%),
        linear-gradient(-45deg, var(--g-100) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--g-100) 75%),
        linear-gradient(-45deg, transparent 75%, var(--g-100) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.cg-preview svg { display: block; width: 100%; height: auto; }

.cg-preview__cap {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--c-navy);
}

.cg-preview__note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    margin: 8px 0 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-base);
    color: var(--g-700);
    text-align: left;
}
.cg-preview__note i { color: var(--c-accent); line-height: 1.5; flex: none; }


.cg-params {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    min-width: 0;
}


/* ============================================
   КОЛІР
   ============================================ */
/* Кількість колонок задає scripts.js через --cg-cols, а не числом у
   CSS. Асортимент уже звужувався (з шести кольорів до чотирьох), і
   жорстка сітка на шість лишила б два порожні треки, а сітка на три —
   сироту в другому ряду. Тепер скільки плиток, стільки й колонок.

   minmax(0, 1fr), а не 1fr: у чистого 1fr мінімум — min-content, і
   плитка з найдовшою назвою («Жовто-блакитний») розпирала свою
   колонку ширше за сусідні. Ряд переставав бути рівним саме там, де
   рівність і є сенсом палітри. */
.cg-swatches {
    display: grid;
    grid-template-columns: repeat(var(--cg-cols, 4), minmax(0, 1fr));
    gap: var(--sp-2);
}

.cg-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 5px 8px;
    border: 2px solid var(--g-200);
    border-radius: var(--r-md);
    background: var(--g-0);
    font-family: var(--font);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

/* Наведення й обраний стан — у /assets/ui.css, разом з усіма іншими
   плитками вибору на сайті. Локальних правил тут бути НЕ повинно:
   сторінковий CSS вантажиться після ui.css і мовчки перебив би
   спільне — саме так вибір і починає виглядати по-різному на різних
   сторінках. */

.cg-swatch__art { display: block; width: 100%; max-width: 76px; }
.cg-swatch__art svg { display: block; width: 100%; height: auto; }

.cg-swatch__no {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--c-navy);
    line-height: 1;
}
/* Назва кольору дрібна й у два рядки не переноситься: «Жовто-
   блакитний» інакше розпирало б плитку вдвічі проти сусідніх, і
   рівний ряд із шести перетворювався б на сходинки. */
.cg-swatch__name {
    font-size: .62rem;
    line-height: 1.2;
    color: var(--g-700);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}


/* ============================================
   ШАБЛОН ТЕКСТУ
   ============================================
   Плитка показує не номер, а саму конгрівку — у поточному кольорі
   та з уже введеним прізвищем. Шість варіантів відрізняються
   наявністю лінійок і місцем ПІБ; за описом їх не розрізнити, за
   виглядом — з першого погляду.
   ============================================ */
/* Колонок стільки ж, скільки шаблонів (--cg-cols задає scripts.js):
   усі варіанти мають бути видні одним рядом, щоб їх можна було
   порівняти поглядом, не гортаючи. */
.cg-tpls {
    display: grid;
    grid-template-columns: repeat(var(--cg-cols, 4), minmax(0, 1fr));
    gap: var(--sp-2);
}

.cg-tpl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 6px 8px;
    border: 2px solid var(--g-200);
    border-radius: var(--r-md);
    background: var(--g-0);
    font-family: var(--font);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
/* Наведення й обраний стан — у /assets/ui.css */

.cg-tpl__art { display: block; width: 100%; max-width: 128px; }
.cg-tpl__art svg { display: block; width: 100%; height: auto; }

.cg-tpl__no {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--c-navy);
    line-height: 1;
}
.cg-tpl__name {
    font-size: .68rem;
    line-height: 1.25;
    color: var(--g-700);
    text-align: center;
}


/* ============================================
   ПОЛЯ ІМЕННИХ ШАБЛОНІВ
   ============================================ */
/* [hidden] мусить перемагати авторський display — інакше блок, який
   scripts.js сховав, лишається на екрані. Пастка відома: так само
   закриті .pack-empty/.pack-actions у стікерпаках і .hdr-cart у
   шапці. Правило потрібне ОКРЕМО кожному блоку, якому задано display
   і який ховається атрибутом. */
.cg-fields[hidden],
.cg-hint[hidden] { display: none; }

.cg-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--g-200);
}

/* Порожнє обов'язкове поле підсвічується лише тоді, коли людина вже
   спробувала замовити. Червона рамка на полі, якого щойно не було на
   екрані, читається як «ти зробив помилку», хоча помилки ще немає. */
.ui-input.is-missing {
    border-color: var(--c-danger);
    background: var(--c-danger-bg);
}

.cg-hint {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: var(--sp-3) 0 0;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    border-left: 3px solid var(--c-accent);
    background: var(--c-accent-soft);
    font-size: var(--fs-xs);
    line-height: var(--lh-base);
    color: var(--g-800);
}
.cg-hint i { color: var(--c-accent); line-height: 1.5; flex: none; }
.cg-hint b { color: var(--c-navy); }


/* ============================================
   ДІАМЕТР
   ============================================
   Кружечок усередині плитки — у справжній пропорції до 60 мм. Три
   підписи «40 / 50 / 60 мм» самі по собі нічого не кажуть про
   різницю, а два кола поряд кажуть одразу.
   ============================================ */
.cg-sizes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2);
}

.cg-size {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px 10px;
    border: 2px solid var(--g-200);
    border-radius: var(--r-md);
    background: var(--g-0);
    font-family: var(--font);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
/* Наведення й обраний стан — у /assets/ui.css */

/* Ширину задає скрипт у ПІКСЕЛЯХ (див. DOT_MAX_PX у scripts.js) —
   саме вона й несе пропорцію 40:50:60. Тут ніякого max-width: він
   обрізав би всі три кружечки до однакових, і підказка про різницю
   діаметрів мовчки перестала б працювати.

   Сталу висоту тримає обгортка: без неї кола різного розміру зсували б
   підписи одне відносно одного, і ряд плиток «стрибав» би. */
.cg-size__dot-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
}
.cg-size__dot {
    display: block;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--g-100);
    border: 2px solid var(--g-300);
}
.cg-size__name {
    font-size: .95rem;
    font-weight: var(--fw-bold);
    color: var(--c-navy);
    line-height: 1.1;
}
.cg-size__note { font-size: var(--fs-xs); color: var(--g-700); text-align: center; }

.cg-qty__unit { font-size: var(--fs-sm); color: var(--g-700); }


/* ============================================
   ЗРАЗКИ НА СТОРІНЦІ
   ============================================
   Галерея всіх шести кольорів і шести текстів під конфігуратором.
   Малюється тим самим congrevka-art.js — фотографій тут навмисно
   немає: знімок паперу передає колір із поправкою на світло, а
   вибирати треба саме колір.
   ============================================ */
.cg-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-4);
}

.cg-gallery figure {
    margin: 0;
    text-align: center;
}
.cg-gallery svg { display: block; width: 100%; height: auto; }
.cg-gallery figcaption {
    margin-top: 8px;
    font-size: var(--fs-xs);
    line-height: var(--lh-base);
    color: var(--g-700);
}
.cg-gallery figcaption b { display: block; color: var(--c-navy); font-size: var(--fs-sm); }


/* ============================================
   АДАПТИВ
   ============================================ */
@media (max-width: 980px) {
    .cg-layout { grid-template-columns: 1fr; }
    /* Липкість знімаємо: в одну колонку превʼю поїхало б за
       параметрами й закривало б їх собою. */
    .cg-preview-col { position: static; }
    .cg-preview-box { max-width: 420px; margin: 0 auto; }
}

@media (max-width: 620px) {
    /* На телефоні кількість колонок фіксована й НЕ залежить від
       кількості плиток: чотири в ряд дали б плитку вужчу за палець.
       Тому дві — і в кольорах, і в шаблонах. */
    .cg-swatches,
    .cg-tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}