/* Страницы оплаты (клиентские). Общий файл для payment/*.html и маршрутов SPA. */
.pay-wrap .num, .pay-amount.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
@keyframes cp-pay-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes cp-pay-spin{ to{ transform:rotate(360deg); } }
.pay-wrap{ min-height:100vh; display:flex; align-items:flex-start; justify-content:center;
           padding:26px 20px 40px; }
.pay-col{ width:100%; max-width:390px; }

.pay-brand{ display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:22px; }
.pay-brand-mark{ width:30px; height:30px; border-radius:9px;
                 background:linear-gradient(135deg,#5b58eb 0%,#7c6cf5 100%);
                 display:flex; align-items:center; justify-content:center; }
.pay-brand-name{ font-size:15px; font-weight:700; color:#344054; }

.pay-pill{ display:flex; justify-content:center; margin-bottom:16px; }
.pay-pill span.body{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px;
                     background:#fef6e7; border-radius:999px; font-size:12px; color:#b54708;
                     font-weight:700; }
.pay-pill i.dot{ width:7px; height:7px; border-radius:50%; background:#f59e0b;
                 animation:cp-pay-pulse 1.6s ease-in-out infinite; display:inline-block; }
/* Оплаченный и закрытый счёт: спокойные цвета, точка не пульсирует */
.pay-pill--success span.body{ background:#ecfdf3; color:#027a48; }
.pay-pill--success i.dot{ background:#12b76a; animation:none; }
.pay-pill--closed span.body{ background:#f2f4f7; color:#475467; }
.pay-pill--closed i.dot{ background:#98a2b3; animation:none; }

.pay-amount{ text-align:center; font-size:40px; font-weight:800; letter-spacing:-1px;
             line-height:1; margin-bottom:6px; }
/* За что платит человек: экскурсия, дата, число человек */
.pay-order{ text-align:center; margin:14px auto 4px; padding:12px 16px; max-width:420px;
            background:#fff; border:1px solid #eaecf0; border-radius:12px; }
.pay-order-title{ font-size:15px; font-weight:600; color:#101828; line-height:1.35; }
.pay-order-line{ margin-top:4px; font-size:13px; color:#667085; display:flex;
                 gap:6px; justify-content:center; flex-wrap:wrap; }

.pay-caption{ text-align:center; font-size:14px; color:#667085; font-weight:500;
              margin-bottom:22px; }

.pay-card{ background:#fff; border:1px solid #eceef1; border-radius:20px; padding:22px;
           box-shadow:0 2px 10px rgba(16,24,40,.06); }
.pay-card--center{ display:flex; flex-direction:column; align-items:center; }
.pay-qr{ width:200px; max-width:100%; border-radius:12px; overflow:hidden; }
.pay-qr svg,.pay-qr img{ display:block; width:100%; height:auto; }
.pay-hint{ font-size:13px; color:#667085; font-weight:600; margin-top:16px; text-align:center;
           line-height:1.5; }

.pay-div{ display:flex; align-items:center; gap:12px; margin:20px 0; }
.pay-div span{ font-size:12px; color:#98a2b3; font-weight:600; }
.pay-div i{ flex:1; height:1px; background:#e4e7ec; display:block; }

/* Вертикальный ритм страницы: между карточкой, кнопками и подсказками всегда
   есть воздух. Раньше отступ ставился распоркой прямо в разметке — там, где её
   забыли, кнопка прилипала к карточке с QR. */
.pay-card + .pay-btn,
.pay-hint + .pay-btn,
.pay-order + .pay-btn,
.pay-btn + .pay-btn,
.pay-btn + .pay-card,
.pay-card + .pay-card{ margin-top:18px; }

.pay-btn{ width:100%; height:54px; border-radius:14px; font-size:15px; font-weight:700;
          display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
          font-family:inherit; border:none; text-decoration:none; line-height:1.2;
          padding:0 18px; text-align:center; box-sizing:border-box;
          transition:filter .12s, background .12s; }
.pay-btn--primary{ background:linear-gradient(135deg,#5b58eb 0%,#6d5df3 100%); color:#fff;
                   box-shadow:0 6px 16px rgba(91,88,235,.3); }
.pay-btn--primary:hover:not(:disabled){ filter:brightness(1.05); }
.pay-btn--ghost{ background:#fff; color:#101828; border:1.5px solid #e4e7ec; margin-bottom:12px; }
.pay-btn--ghost:hover:not(:disabled){ background:#f6f7f9; }
.pay-btn:disabled{ opacity:.55; cursor:not-allowed; }

.pay-seg{ display:flex; gap:4px; padding:4px; background:#eceef2; border-radius:12px;
          margin-bottom:14px; }
.pay-seg button{ flex:1; padding:9px 0; border:none; background:none; border-radius:9px;
                 font-family:inherit; font-size:13px; font-weight:600; color:#667085;
                 cursor:pointer; }
.pay-seg button.active{ background:#fff; color:#101828; font-weight:700;
                        box-shadow:0 1px 2px rgba(16,24,40,.08); }

.pay-label{ display:block; font-size:12px; font-weight:700; color:#344054; margin-bottom:7px; }
.pay-input{ width:100%; height:58px; padding:0 16px; background:#f9fafb; border:1px solid #e4e7ec;
            border-radius:14px; font-family:inherit; font-size:22px; font-weight:800;
            text-align:center; color:#101828; font-variant-numeric:tabular-nums; }
.pay-input:focus{ outline:none; background:#fff; border-color:#4f46e5;
                  box-shadow:0 0 0 3px rgba(79,70,229,.12); }
.pay-conv{ text-align:center; font-size:13px; color:#667085; font-weight:600; margin-top:8px; }

.pay-link{ width:100%; height:46px; padding:0 14px; background:#f9fafb; border:1px solid #eceef1;
           border-radius:11px; font-family:inherit; font-size:13px; font-weight:600;
           color:#344054; cursor:pointer; }

.pay-secure{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:20px;
             font-size:12px; color:#98a2b3; font-weight:500; }

.pay-spin{ width:34px; height:34px; border:3px solid #e0e0f5; border-top-color:#4f46e5;
           border-radius:50%; animation:cp-pay-spin .9s linear infinite; margin:0 auto 14px; }

.pay-halo{ width:76px; height:76px; border-radius:50%; background:#fef3f2; display:flex;
           align-items:center; justify-content:center; margin:0 auto 18px; }
.pay-title{ font-size:20px; font-weight:800; letter-spacing:-.3px; text-align:center;
            margin-bottom:6px; }
.pay-text{ font-size:14px; color:#667085; font-weight:500; text-align:center; line-height:1.5; }