/* =========================================================
   📄 /styles_core/front/blocks/support_widget.css
   ТОПО / Блок «Поддержать проект» под статьёй поддержки
   (front/components/support_widget/render.php).

   Одна заметная кнопка основного цвета сайта (--color-primary) и,
   на широком экране, QR-код той же страницы оплаты — чтобы с
   компьютера оплатить телефоном. Без таймеров и анимаций.
   ========================================================= */

.support-widget{
    --support-accent:var(--color-primary, #b85f32);
    max-width:66ch;
    margin:1.6rem 0 .4rem;
    padding:1.2rem 1.3rem 1rem;
    background:var(--color-surface, #fff);
    border:1px solid var(--color-border, #ddd2bf);
    border-radius:var(--radius-lg, 12px);
    color:var(--color-fg, #2b2118);
}

/* Заголовок повторял бы заголовок статьи — только для экранных чтецов. */
.support-widget__title{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}

.support-widget__body{
    display:flex;
    align-items:center;
    gap:1.4rem;
}
.support-widget__main{ flex:1 1 auto; min-width:0; }

.support-widget__button{
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    min-height:3.1rem;
    padding:0 1.9rem;
    font-weight:700;
    font-size:1.05rem;
    border-radius:999px;
    background:var(--support-accent);
    color:#fff;
    text-decoration:none;
    box-shadow:0 6px 16px -8px var(--support-accent);
}
.support-widget__button:hover,
.support-widget__button:focus-visible{
    filter:brightness(1.1);
    color:#fff;
}
.support-widget__button:focus-visible{
    outline:2px solid var(--support-accent);
    outline-offset:3px;
}
.support-widget__heart{ flex:none; }
.support-widget__button[aria-disabled="true"],
.support-widget__button--disabled{
    opacity:.5;
    cursor:not-allowed;
    box-shadow:none;
}

.support-widget__ways{
    margin:.6rem 0 0;
    font-size:.86rem;
    color:var(--color-muted, #6f6253);
}

.support-widget__qr{
    flex:none;
    margin:0;
    text-align:center;
}
.support-widget__qr img{
    display:block;
    width:132px;
    height:132px;
    padding:6px;
    background:#fff;
    border:1px solid var(--color-border, #ddd2bf);
    border-radius:10px;
}
.support-widget__qr figcaption{
    margin-top:.35rem;
    font-size:.75rem;
    color:var(--color-muted, #6f6253);
}

.support-widget__note{
    margin:1rem 0 0;
    padding-top:.75rem;
    border-top:1px solid var(--color-border-subtle, var(--color-border, #ddd2bf));
    font-size:.8rem;
    line-height:1.5;
    color:var(--color-muted, #6f6253);
}
.support-widget__note a{ color:var(--support-accent); }

/* /styles_core/front/blocks/support_widget.css — ежемесячная поддержка Boosty. */
.support-widget__subscription{
    margin-top:1rem;
    padding-top:1rem;
    border-top:1px solid var(--color-border, #ddd2bf);
}
.support-widget__button--subscription{
    border:1px solid var(--support-accent);
    background:var(--color-surface, #fff);
    color:var(--support-accent);
    box-shadow:none;
    padding:.55rem 1.3rem;
    text-align:center;
}
.support-widget__subscription-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:.7rem;
}
.support-widget__button--subscription:hover,
.support-widget__button--subscription:focus-visible{
    color:var(--support-accent);
}

/* --- суммы (только если сервис принимает сумму в ссылке) --- */
.support-widget__amounts{ border:0; margin:0 0 .9rem; padding:0; min-width:0; }
.support-widget__legend{ font-size:.82rem; color:var(--color-muted, #6f6253); margin-bottom:.45rem; padding:0; }
.support-widget__chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.support-widget__chip{ position:relative; cursor:pointer; }
.support-widget__chip input{ position:absolute; opacity:0; width:1px; height:1px; }
.support-widget__chip span{
    display:inline-flex; align-items:center; min-height:2.4rem; padding:0 .95rem;
    font-size:.92rem; font-weight:600; white-space:nowrap;
    border:1px solid var(--color-border, #ddd2bf); border-radius:999px;
    background:var(--color-bg, #fff); color:var(--color-fg, #2b2118);
}
.support-widget__chip input:checked + span{ border-color:var(--support-accent); background:var(--support-accent); color:#fff; }
.support-widget__chip input:focus-visible + span{ outline:2px solid var(--support-accent); outline-offset:2px; }
.support-widget__custom{ display:flex; align-items:center; gap:.6rem; margin-top:.65rem; font-size:.88rem; }
/* display:flex выше перебил бы атрибут hidden — поле «Другая сумма» было бы видно всегда. */
.support-widget__custom[hidden],
.support-widget__error[hidden]{ display:none; }
.support-widget__custom input{
    width:9rem; min-height:2.4rem; padding:0 .7rem; font:inherit; font-size:1rem;
    border:1px solid var(--color-border, #ddd2bf); border-radius:8px;
    background:var(--color-bg, #fff); color:var(--color-fg, #2b2118);
}
.support-widget__error{ margin:0 0 .7rem; font-size:.86rem; color:#a1261b; }

/* --- предпросмотр для редактора: приём выключен, блок серый --- */
.support-widget--preview{ border-style:dashed; filter:grayscale(1); }
.support-widget__preview-note{
    margin:0 0 .9rem; padding:.6rem .75rem; font-size:.82rem; line-height:1.5;
    background:var(--color-bg, #fff); border:1px dashed var(--color-border, #ddd2bf); border-radius:8px;
}
.support-widget__preview-note ul{ margin:.35rem 0 0; padding-left:1.1rem; }

/* На телефоне QR не нужен — человек и так на телефоне; кнопка на всю ширину. */
@media (max-width:700px){
    .support-widget__qr{ display:none; }
}
@media (max-width:560px){
    .support-widget{ padding:1rem .9rem .9rem; }
    .support-widget__button{ display:flex; width:100%; }
    .support-widget__custom{ flex-wrap:wrap; }
}


/* /styles_core/front/blocks/support_widget.css — открытый доступ для всех. */
.support-widget__free{
    display:block;
    margin-bottom:.35rem;
    font-size:1rem;
    font-weight:700;
    color:var(--color-fg, #2b2118);
}