/* Оплата Tinkoff/Т-Банк: кнопка QR (СБП), карточка с QR-кодом и модальное окно.
   Разметку карточки строит /templates/assets/js/tinkoff-pay.js */

/* кнопка QR (СБП) */
.tinkoff-qr-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    color: hsl(120, 45%, 14%);
    background-image: linear-gradient(135deg, hsl(96, 74%, 76%), hsl(96, 56%, 58%));
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.tinkoff-qr-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -10px hsla(96, 60%, 32%, 0.8);
}
.tinkoff-qr-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px -8px hsla(96, 60%, 32%, 0.7);
}
.tinkoff-qr-btn:focus-visible {
    outline: 2px solid hsl(96, 45%, 38%);
    outline-offset: 2px;
}
.tinkoff-qr-btn[disabled] {
    filter: grayscale(0.3);
    opacity: 0.8;
    cursor: default;
    transform: none;
}
.tinkoff-qr-btn__icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
}
.tinkoff-qr-spinner {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    border: 2px solid hsla(120, 45%, 14%, 0.25);
    border-top-color: hsl(120, 45%, 14%);
    border-radius: 50%;
    animation: tinkoff-qr-spin 0.7s linear infinite;
}
@keyframes tinkoff-qr-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .tinkoff-qr-btn,
    .tinkoff-qr-link { transition: none; }
    .tinkoff-qr-spinner { animation-duration: 2s; }
}
/* карточка с QR-кодом */
.tinkoff-qr-card {
    position: relative;
    overflow: hidden;
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-dark);
    border: 1px solid var(--color-contrast-lower);
    box-shadow: var(--shadow-md);
}
.tinkoff-qr-card::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background-image: radial-gradient(circle, hsla(96, 62%, 55%, 0.28), transparent 70%);
    pointer-events: none;
}
.tinkoff-qr-card__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-bottom: var(--space-md);
}
.tinkoff-qr-card__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75em;
    height: 2.75em;
    border-radius: var(--radius-md);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: hsl(120, 45%, 14%);
    background-image: linear-gradient(135deg, hsl(96, 74%, 76%), hsl(96, 56%, 58%));
}
.tinkoff-qr-card__title {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-contrast-higher);
}
.tinkoff-qr-card__subtitle {
    font-size: var(--text-sm);
    color: var(--color-contrast-medium);
}
.tinkoff-qr-card__body {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-md);
}
.tinkoff-qr-card__side {
    flex: 1 1 14em;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
/* белая подложка нужна всегда: по тёмному фону QR не сканируется */
.tinkoff-qr-frame {
    position: relative;
    padding: var(--space-sm);
    border-radius: var(--radius-lg);
    background-color: #fff;
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.55);
}
.tinkoff-qr-image {
    width: 307px;
    max-width: 100%;
}
.tinkoff-qr-image svg,
.tinkoff-qr-image img,
.tinkoff-qr-image canvas {
    display: block;
    width: 100%;
    height: auto;
}
.tinkoff-qr-amount {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    background-color: hsla(96, 60%, 55%, 0.14);
    border: 1px solid hsla(96, 50%, 45%, 0.35);
}
.tinkoff-qr-amount__label {
    font-size: var(--text-sm);
    color: var(--color-contrast-medium);
}
.tinkoff-qr-amount__value {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-contrast-higher);
    white-space: nowrap;
}
.tinkoff-qr-steps {
    list-style: none;
    counter-reset: tinkoff-step;
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    font-size: var(--text-sm);
    color: var(--color-contrast-high);
}
.tinkoff-qr-steps li {
    position: relative;
    counter-increment: tinkoff-step;
    padding-left: 2em;
}
.tinkoff-qr-steps li::before {
    content: counter(tinkoff-step);
    position: absolute;
    left: 0;
    top: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    font-size: 0.8em;
    font-weight: 700;
    color: hsl(120, 45%, 14%);
    background-color: hsl(96, 62%, 70%);
}
.tinkoff-qr-link {
    align-self: flex-start;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-contrast-higher);
    background-color: var(--color-bg);
    border: 1px solid var(--color-contrast-lower);
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.tinkoff-qr-link:hover {
    background-color: var(--color-bg-darker);
    border-color: var(--color-contrast-low);
}
/* таймер сессии и просроченный код */
.tinkoff-qr-timer {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-xxs);
    font-size: var(--text-sm);
    color: var(--color-contrast-medium);
}
.tinkoff-qr-timer__value {
    font-size: var(--text-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-contrast-higher);
}
.tinkoff-qr-card.is-ending .tinkoff-qr-timer__value {
    color: hsl(35, 79%, 42%);
}
.tinkoff-qr-card.is-expired .tinkoff-qr-timer__label {
    font-weight: 600;
    color: hsl(342, 70%, 47%);
}
.tinkoff-qr-card.is-expired .tinkoff-qr-image {
    filter: grayscale(1);
    opacity: 0.25;
}
.tinkoff-qr-card.is-expired .tinkoff-qr-frame::after {
    content: 'Код истёк';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    font-weight: 600;
    color: hsl(230, 13%, 9%);
    background-color: rgba(255, 255, 255, 0.62);
}
.tinkoff-qr-refresh {
    align-self: flex-start;
    width: auto;
}
@media (min-width: 48rem) {
    .tinkoff-qr-card {
        padding: var(--space-lg);
    }
}
/* ── модальное окно (data-qr-mode="dialog") ───────────────────────────────
   Светлая «карточка» со скруглениями и мягкой тенью, на мобильных —
   шторка снизу. Разметку создаёт tinkoff-pay.js. */
.tinkoff-qr-dialog {
    inset: 0;
    width: 100%;
    max-width: min(46rem, calc(100% - 2 * var(--space-md)));
    max-height: calc(100% - 2 * var(--space-md));
    margin: auto;
    padding: 0;
    overflow: hidden;
    color: var(--color-contrast-higher);
    background-color: var(--color-bg);
    border: 0;
    border-radius: 24px;
    box-shadow: 0 30px 70px -24px rgba(15, 17, 26, 0.45), 0 2px 10px rgba(15, 17, 26, 0.08);
}
.tinkoff-qr-dialog::-webkit-backdrop {
    background-color: hsl(230deg 13% 9% / 55%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.tinkoff-qr-dialog::backdrop {
    background-color: hsl(230deg 13% 9% / 55%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.tinkoff-qr-dialog[open] {
    display: flex;
    flex-direction: column;
    animation: tinkoff-dialog-in 0.24s cubic-bezier(0.22, 0.68, 0.32, 1);
}
.tinkoff-qr-dialog[open]::backdrop {
    animation: tinkoff-dialog-fade 0.24s ease-out;
}
@keyframes tinkoff-dialog-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
}
@keyframes tinkoff-dialog-fade {
    from { opacity: 0; }
}
.tinkoff-qr-dialog__inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.tinkoff-qr-dialog__grabber {
    display: none;
    flex-shrink: 0;
}
/* в шапке только кнопка закрытия: заголовок и подзаголовок приходят
   вместе с карточкой, дублировать их в окне не нужно */
.tinkoff-qr-dialog__head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    padding: var(--space-sm) var(--space-sm) 0;
    top: -12px;
    position: relative;
}
.tinkoff-qr-dialog__close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5em;
    height: 2.5em;
    color: var(--color-contrast-high);
    background-color: var(--color-bg-darker);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.tinkoff-qr-dialog__close:hover {
    color: var(--color-contrast-higher);
    background-color: var(--color-contrast-lower);
}
.tinkoff-qr-dialog__close:focus-visible {
    outline: 2px solid var(--color-contrast-low);
    outline-offset: 2px;
}
.tinkoff-qr-dialog__close svg {
    width: 1em;
    height: 1em;
}
.tinkoff-qr-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 var(--space-md) var(--space-md);
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* внутри окна карточка отдаёт фон и тень самому окну */
.tinkoff-qr-dialog .tinkoff-qr-card {
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.tinkoff-qr-dialog .tinkoff-qr-card::before {
    display: none;
}
.tinkoff-qr-dialog .tinkoff-qr-card__head {
    padding-bottom: var(--space-sm);
}
/* на белом фоне окна тень рамке не нужна, достаточно тонкой границы */
.tinkoff-qr-dialog .tinkoff-qr-frame {
    padding: var(--space-xs);
    border: 1px solid var(--color-contrast-lower);
    box-shadow: none;
}
/* на мобильных — шторка снизу */
@media (max-width: 47.99rem) {
    .tinkoff-qr-dialog {
        max-width: 100%;
        max-height: 94%;
        margin: auto auto 0;
        border-radius: 20px 20px 0 0;
    }
    .tinkoff-qr-dialog[open] {
        animation: tinkoff-dialog-up 0.28s cubic-bezier(0.22, 0.68, 0.32, 1);
    }
    .tinkoff-qr-dialog__grabber {
        display: block;
        width: 2.5em;
        height: 0.25em;
        margin: var(--space-xs) auto 0;
        border-radius: 999px;
        background-color: var(--color-contrast-lower);
    }
    .tinkoff-qr-dialog__head {
        padding-top: var(--space-xs);
    }
}
@keyframes tinkoff-dialog-up {
    from { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .tinkoff-qr-dialog[open],
    .tinkoff-qr-dialog[open]::backdrop { animation-duration: 0.01ms; }
    .tinkoff-qr-dialog__close { transition: none; }
}
/* пока окно открыто, страница под ним не скроллится */
html.tinkoff-qr-lock,
html.tinkoff-qr-lock body {
    overflow: hidden;
}