/*
 * Ridni Multicurrency — селектор валюти у формі WCDP.
 *
 * Кнопки валют свідомо мають ті самі класи, що й кнопки сум WCDP
 * (`ul.wcdp_options > li > label.wcdp-button-label`): їхній вигляд задають
 * тема, WCDP і контроли віджета WCDP Elementor Integration. Тут лише те, чого
 * в них немає, і те, що чужі правила не мають права зламати: ряд валют на
 * будь-якій ширині (від 240 px форми — у ряд, вужче — стовпчиком), підпис без
 * виходу за край, ціль дотику ≥ 44 px, прапор вибраної валюти. `!important` —
 * лише там, де тема сайту фонду сама ставить `!important` (див. коментарі).
 */
.ridni-mc {
    border: 0;
    margin: 0 0 12px;
    padding: 0;
    min-width: 0;
    /*
     * Розкладка — від ширини самої форми, а не екрана: форма буває на всю
     * сторінку, у колонці, у попапі, на телефоні, планшеті чи великому моніторі.
     * `width: 100%` — щоб контейнер не схлопнувся в flex-рядку теми.
     */
    width: 100%;
    box-sizing: border-box;
    container: ridni-mc / inline-size;
}

.ridni-mc-legend {
    padding: 0;
    float: none;
    width: 100%;
}

/*
 * Валюти — завжди в один ряд рівних кнопок, скільки б їх не було. Кількість
 * колонок дає сервер (`--ridni-mc-count`). `!important` тут свідомо: на сайті
 * фонду «Додатковий CSS» теми на телефонах робить кожен `ul.wcdp_options`
 * flex-рядком з `!important` (кнопки валют стискались до ширини підпису,
 * staging 2026-10-16), а колонки віджета WCDP Elementor Integration
 * («Columns» для кнопок сум) ламали б ряд валют.
 */
.ridni-mc ul.ridni-mc-options.wcdp_options {
    display: grid !important;
    grid-template-columns: repeat(var(--ridni-mc-count, 3), minmax(0, 1fr)) !important;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ridni-mc ul.ridni-mc-options.wcdp_options > li {
    /* Кнопки ряду однакової висоти, навіть коли підпис одної переноситься;
       розтягування flex не залежить від `box-sizing` теми. */
    display: flex;
    min-width: 0;
    margin: 0;
}

.ridni-mc ul.ridni-mc-options.wcdp_options > li > label {
    flex: 1 1 auto;
    min-width: 0;
}

/*
 * Мінімальна ціль дотику (WCAG 2.5.5, Apple HIG) — з нульовою специфічністю:
 * будь-яке правило теми чи віджета (на сайті фонду — 66 px, на телефоні 55 px)
 * сильніше, тож кнопки валют не нижчі за кнопки сум.
 */
:where(.ridni-mc .ridni-mc-options > li > label) {
    min-height: 44px;
}

/*
 * Вузька форма (телефон 320–375 px): підпис трохи менший, щоб «🇺🇦 UAH - ₴»
 * лишався в один рядок і кнопки валют не були вищими за кнопки сум.
 * Розмір — на обгортці підпису: тема задає шрифт кнопки з `!important`.
 */
@container ridni-mc (max-width: 359px) {
    .ridni-mc .ridni-mc-text {
        font-size: 0.875em;
    }
}

@container ridni-mc (max-width: 299px) {
    .ridni-mc .ridni-mc-text {
        font-size: 0.8em;
    }
}

/* Дуже вузька форма (годинник, складений телефон, вузька колонка) — валюти стовпчиком. */
@container ridni-mc (max-width: 239px) {
    .ridni-mc ul.ridni-mc-options.wcdp_options {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ridni-mc .ridni-mc-text {
        font-size: 1em;
    }
}

.ridni-mc .ridni-mc-input {
    /* Радіокнопка лишається доступною з клавіатури й для читачів екрана. */
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

/* Тема гасить `box-shadow` фокуса з `!important`; рамка `outline` лишається видимою. */
.ridni-mc .ridni-mc-input:focus-visible + label {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.ridni-mc-symbol {
    font-weight: 600;
}

/*
 * Підпис кнопки валюти (налаштування «Вигляд кнопки валюти»): одна обгортка,
 * тож пробіли «перед» / «після» лишаються, навіть коли тема робить кнопку
 * flex-контейнером. `pre-wrap` — пробіли зберігаються, а на вузькій кнопці
 * підпис переноситься, а не вилазить за край.
 */
.ridni-mc-text {
    white-space: pre-wrap;
    text-wrap: balance;
    overflow-wrap: anywhere;
    min-width: 0;
    max-width: 100%;
    text-align: center;
}

/*
 * Прапор малюється в `::before`. Правила тем і шаблонів для вибраної кнопки
 * фарбують фон «кожного span у підписі» з `!important` — «Додатковий CSS» теми
 * (`ul.wcdp_options>li>input:checked+label span`, 0,2,5) і шаблон збору
 * Elementor (`.zbir-form … label span`, 0,3,5) стирали прапор вибраної валюти
 * (staging, 2026-10-15 і 16). Псевдоелемент ці правила не чіпають.
 */
.ridni-mc-flag {
    display: inline-block;
    position: relative;
    flex: none;
    width: 1.35em;
    height: 0.9em;
    vertical-align: -0.1em;
    border-radius: 2px;
    overflow: hidden;
}

.ridni-mc-flag::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ridni-mc-flag, none) center / cover no-repeat;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/*
 * Регулярний донат: «/ міс.» тримається разом (нерозривний пробіл у тексті),
 * на вузькій кнопці переходить рядком нижче цілим; у полі «Інша» — так само.
 */
.wcdp_cu_field.ridni-mc-cu-recurring {
    flex-wrap: wrap;
    justify-content: center;
}

.ridni-mc-flag-uah { --ridni-mc-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%230057b7' d='M0 0h3v1H0z'/%3E%3Cpath fill='%23ffd700' d='M0 1h3v1H0z'/%3E%3C/svg%3E"); }
.ridni-mc-flag-usd { --ridni-mc-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 13'%3E%3Cpath fill='%23fff' d='M0 0h19v13H0z'/%3E%3Cpath fill='%23b22234' d='M0 0h19v1H0zM0 2h19v1H0zM0 4h19v1H0zM0 6h19v1H0zM0 8h19v1H0zM0 10h19v1H0zM0 12h19v1H0z'/%3E%3Cpath fill='%233c3b6e' d='M0 0h7.6v7H0z'/%3E%3C/svg%3E"); }
.ridni-mc-flag-eur { --ridni-mc-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23039' d='M0 0h3v2H0z'/%3E%3Cpath fill='%23fc0' d='M1.500 0.222L1.525 0.299L1.606 0.299L1.540 0.346L1.565 0.423L1.500 0.376L1.435 0.423L1.460 0.346L1.394 0.299L1.475 0.299zM1.833 0.312L1.858 0.388L1.939 0.388L1.874 0.436L1.899 0.512L1.833 0.465L1.768 0.512L1.793 0.436L1.728 0.388L1.808 0.388zM2.077 0.556L2.102 0.632L2.183 0.632L2.118 0.680L2.143 0.756L2.077 0.709L2.012 0.756L2.037 0.680L1.972 0.632L2.052 0.632zM2.167 0.889L2.192 0.966L2.272 0.966L2.207 1.013L2.232 1.090L2.167 1.042L2.101 1.090L2.126 1.013L2.061 0.966L2.142 0.966zM2.077 1.222L2.102 1.299L2.183 1.299L2.118 1.346L2.143 1.423L2.077 1.376L2.012 1.423L2.037 1.346L1.972 1.299L2.052 1.299zM1.833 1.466L1.858 1.543L1.939 1.543L1.874 1.590L1.899 1.667L1.833 1.620L1.768 1.667L1.793 1.590L1.728 1.543L1.808 1.543zM1.500 1.556L1.525 1.632L1.606 1.632L1.540 1.680L1.565 1.757L1.500 1.709L1.435 1.757L1.460 1.680L1.394 1.632L1.475 1.632zM1.167 1.466L1.192 1.543L1.272 1.543L1.207 1.590L1.232 1.667L1.167 1.620L1.101 1.667L1.126 1.590L1.061 1.543L1.142 1.543zM0.923 1.222L0.948 1.299L1.028 1.299L0.963 1.346L0.988 1.423L0.923 1.376L0.857 1.423L0.882 1.346L0.817 1.299L0.898 1.299zM0.833 0.889L0.858 0.966L0.939 0.966L0.874 1.013L0.899 1.090L0.833 1.042L0.768 1.090L0.793 1.013L0.728 0.966L0.808 0.966zM0.923 0.556L0.948 0.632L1.028 0.632L0.963 0.680L0.988 0.756L0.923 0.709L0.857 0.756L0.882 0.680L0.817 0.632L0.898 0.632zM1.167 0.312L1.192 0.388L1.272 0.388L1.207 0.436L1.232 0.512L1.167 0.465L1.101 0.512L1.126 0.436L1.061 0.388L1.142 0.388z'/%3E%3C/svg%3E"); }