/**
 * Ridni Express Pay — кнопки гаманців у формі збору (1.8.8).
 *
 * Один файл замість ridni-apay.css і ridni-gpay.css (до 1.8.7 — два однакові
 * файли й три різні вигляди: 60 / 33 px поруч із «Підтримати», 48 / 14 px у дві
 * колонки, 48 / 4 px на всю ширину).
 *
 * Кнопка гаманця — чорна рамка за макетом Figma (висота, радіус, рамка й тінь —
 * як у кнопок форми), а всередині — офіційна кнопка Apple Pay чи Google Pay
 * зі стандартним текстом платформи. Висота офіційної кнопки — від кегля
 * тексту форми: токен Ridni Core `--ridni-form-btn-font-size` (єдиний
 * дизайн-код, 1.8.9), а без модуля Core — кегль «Підтримати» на цій сторінці
 * (його читає ridni-ep-buttons.js). Розміри рамки — з тих самих токенів форми
 * (`--ridni-form-btn-*`), коли їх задано; без Core — значення Figma нижче.
 *
 * Класи розкладки ставить ridni-ep-buttons.js:
 *   .ridni-ep-ds1 / -ds2 / -ds3 — дизайн-система з налаштувань товару;
 *   .ridni-ep-n0 / -n1 / -n2      — скільки гаманців видно;
 *   .ridni-ep-logos               — «лише логотипи»;
 *   .ridni-ep-row                 — на `.button-row` WCDP: гаманці й «Підтримати» в одній сітці;
 *   .ridni-ep-off                 — гаманець прихований (пріоритетний режим).
 * Порожня рамка (гаманець не завантажився) місця не займає.
 *
 * Селектори з `#ridni-express-pay-container`: правила теми й Custom CSS
 * віджета WCDP (`.wcdp-form button {… !important}`) чіпляють кожну кнопку в
 * формі, зокрема Google Pay, — тому захисні значення з `!important` нижче.
 */

/* ─────────── Токени ─────────── */

#ridni-express-pay-container,
form .button-row.ridni-ep-row {
    --ridni-ep-height: var(--ridni-form-btn-h, 66px);
    --ridni-ep-radius: var(--ridni-form-btn-radius, 14px);
    --ridni-ep-border: var(--ridni-form-btn-border, 1px solid #e5d7f6);
    --ridni-ep-shadow: var(--ridni-form-btn-shadow, 4px 2px 26.1px rgba(135, 120, 153, 0.1));
    --ridni-ep-gap: var(--ridni-form-btn-gap, 14px);
    --ridni-ep-gap-stack: var(--ridni-form-btn-gap-stack, 10px);
    --ridni-ep-bg: #000;
    --ridni-ep-pad: 8px;
    /* Кегль тексту гаманця. Єдиний дизайн-код — токен форми Ridni Core
       (Figma: 18 px, телефон 15 px). Без нього ridni-ep-buttons.js ставить
       inline кегль «Підтримати» цієї сторінки, а без неї — 18 / 15 px. */
    --ridni-ep-text: var(--ridni-form-btn-font-size, 18px);
    /* Висота офіційної кнопки в рамці: від неї залежить кегль тексту
       гаманця. Заміряно в WebKit 16.10 за висотою великої літери: Apple —
       2,1 × кегль, Google — 1,4 × кегль + 18 px (його відступи 9 + 9);
       не вище за рамку. Дрібніше ~15 px Apple Pay текст не робить: поруч із
       «Підтримати» 14 px він на ~1 px більший. */
    --ridni-ep-inner-apay: min(calc(var(--ridni-ep-text) * 2.1), calc(var(--ridni-ep-height) - 12px));
    --ridni-ep-inner-gpay: min(calc(var(--ridni-ep-text) * 1.4 + 18px), calc(var(--ridni-ep-height) - 8px));
    --ridni-ep-row-top: 30px;
}

/* ─────────── Блок «Швидкий донат» ─────────── */

#ridni-express-pay-container {
    width: 100%;
    margin: 16px 0 12px;
    box-sizing: border-box;
}

#ridni-express-pay-container.ridni-ep-n0 {
    display: none !important;
}

#ridni-express-pay-container .ridni-express-heading {
    font-size: 16px;
    font-weight: 500;
    color: var(--e-global-color-adafd37);
    margin: 20px 0 0;
    padding-bottom: 15px;
}

#ridni-express-pay-container .ridni-express-pay-buttons {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ridni-ep-gap-stack);
    width: 100%;
}

/* ДС 1 і ДС 3: два гаманці — в один ряд (дві колонки). */
#ridni-express-pay-container.ridni-ep-ds1.ridni-ep-n2 .ridni-express-pay-buttons,
#ridni-express-pay-container.ridni-ep-ds3.ridni-ep-n2 .ridni-express-pay-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ridni-ep-gap);
}

/* ─────────── Рамка гаманця ─────────── */

#ridni-express-pay-container #ridni-gpay-button-container,
#ridni-express-pay-container #ridni-apay-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: var(--ridni-ep-height);
    margin: 0;
    padding: 0 var(--ridni-ep-pad);
    background: var(--ridni-ep-bg);
    border: var(--ridni-ep-border);
    border-radius: var(--ridni-ep-radius);
    box-shadow: var(--ridni-ep-shadow);
    overflow: hidden;
    cursor: pointer;
}

/* Apple Pay — першим. */
#ridni-express-pay-container #ridni-apay-button-container {
    order: -1;
}

#ridni-express-pay-container #ridni-gpay-button-container:empty,
#ridni-express-pay-container #ridni-apay-button-container:empty,
#ridni-express-pay-container #ridni-gpay-button-container.ridni-ep-off,
#ridni-express-pay-container #ridni-apay-button-container.ridni-ep-off {
    display: none;
}

#ridni-express-pay-container .ridni-ep-wallet__inner {
    display: block;
    width: 100%;
    height: var(--ridni-ep-inner-apay);
}

#ridni-express-pay-container #ridni-gpay-button-container .ridni-ep-wallet__inner {
    height: var(--ridni-ep-inner-gpay);
}

/* ─────────── Apple Pay ─────────── */

#ridni-express-pay-container .apple-pay-button {
    display: block;
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: donate;
    -apple-pay-button-style: black;
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
}

#ridni-express-pay-container.ridni-ep-logos .apple-pay-button {
    -apple-pay-button-type: plain;
}

/* ─────────── Google Pay ─────────── */
/* Радіус і рамку задає сам скрипт (buttonRadius: 0, no_border). Решта —
   повернення значень Google проти `.wcdp-form button {… !important}` теми й
   віджета: відступ, мінімальні розміри, фон, зовнішні поля.
   Текст Google — зображення 378 × 38 (укр.): за висоти 44 px йому треба
   ~259 px ширини. Власний відступ Google у режимі fill (15 % з боків) у
   рамці на пів ряду лишає ~200–225 px — текст дрібнішав до 13–15 px поруч із
   18 px Apple Pay. 6 % вистачає на 17–18 px; простір довкола тексту лишається.
   Персоналізована кнопка (1.8.10): у Chrome з картками в Google Pay тип `plain`
   («лише логотипи») Google малює іншим елементом — `button.gpay-card-info-container`
   з картинками карток в iframe; без цих правил тема робила з неї фіолетову
   «таблетку» зі зсувом униз. */

#ridni-express-pay-container .gpay-button-fill,
#ridni-express-pay-container .gpay-card-info-container-fill {
    width: 100% !important;
    height: 100% !important;
}

#ridni-express-pay-container button.gpay-button,
#ridni-express-pay-container button.gpay-card-info-container {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: #000 !important;
    font-size: inherit !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

#ridni-express-pay-container button.gpay-button.donate {
    padding: 9px 6% !important;
}

#ridni-express-pay-container button.gpay-button.plain {
    padding: 12px 15% 10px !important;
}

#ridni-express-pay-container button.gpay-card-info-container {
    position: relative !important;
    padding: 0 !important;
}

/* ─────────── Поруч із «Підтримати» (`.button-row` WCDP) ─────────── */

form .button-row.ridni-ep-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ridni-ep-gap);
    align-items: stretch;
    padding-top: var(--ridni-ep-row-top);
}

form .button-row.ridni-ep-row > #ridni-express-pay-container {
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}

form .button-row.ridni-ep-row > #ridni-express-pay-container .ridni-express-heading {
    display: none;
}

form .button-row.ridni-ep-row > #ridni-express-pay-container .ridni-express-pay-buttons {
    flex: 1 1 auto;
}

/* Головна кнопка — лише місце в сітці й висота рамки гаманця; її вигляд
   (колір, радіус, кегль) — справа дизайн-системи сайту. */
form .button-row.ridni-ep-row > .wcdp-button {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: var(--ridni-ep-height) !important;
    margin: 0 !important;
    float: none !important;
}

form .button-row.ridni-ep-row > #wcdp-spinner {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: end;
    float: none;
    top: 0;
}

/* ДС 2, ДС 3 і два гаманці: «Підтримати» окремим рядком на всю ширину
   (ДС 3 — гаманці над нею в дві колонки, коли їх два; один — на всю ширину). */
form .button-row.ridni-ep-row.ridni-ep-ds2,
form .button-row.ridni-ep-row.ridni-ep-ds3,
form .button-row.ridni-ep-row.ridni-ep-n2 {
    grid-template-columns: minmax(0, 1fr);
}

form .button-row.ridni-ep-row.ridni-ep-ds2 {
    gap: var(--ridni-ep-gap-stack);
}

form .button-row.ridni-ep-row.ridni-ep-ds2 > .wcdp-button,
form .button-row.ridni-ep-row.ridni-ep-ds3 > .wcdp-button,
form .button-row.ridni-ep-row.ridni-ep-n2 > .wcdp-button {
    grid-column: 1;
    grid-row: 2;
}

/* ─────────── Телефон (брейкпоінт теми й Ridni Core) ─────────── */

@media (max-width: 767px) {
    #ridni-express-pay-container,
    form .button-row.ridni-ep-row {
        --ridni-ep-height: var(--ridni-form-btn-h, 55px);
        --ridni-ep-text: var(--ridni-form-btn-font-size, 15px);
        --ridni-ep-row-top: 20px;
    }

    #ridni-express-pay-container.ridni-ep-ds1.ridni-ep-n2 .ridni-express-pay-buttons,
    #ridni-express-pay-container.ridni-ep-ds3.ridni-ep-n2 .ridni-express-pay-buttons {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ridni-ep-gap-stack);
    }

    /* ДС 3 з логотипами — дві колонки й на телефоні: логотип уміщається на пів
       ширини, а стандартний текст — ні (Apple Pay дрібніше ~15 px не малює). */
    #ridni-express-pay-container.ridni-ep-ds3.ridni-ep-n2.ridni-ep-logos .ridni-express-pay-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    form .button-row.ridni-ep-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ridni-ep-gap-stack);
    }

    form .button-row.ridni-ep-row > .wcdp-button {
        grid-column: 1;
        grid-row: 2;
    }
}