/* ============================================================================
   autodelivery-steam.css — вид раздела «Пополнение Steam».

   Вынесено из steam.php, когда раздел понадобился и в мини-аппе: это разные
   домены, и две копии одной вёрстки на этом проекте уже расходились.
   Общая часть (поля, кнопка, карточка получателя) — в autodelivery.css.
   ========================================================================== */

/* Ширина и отступы — как на /stars: колонка сайта, левый край в одну
   линию с поисковой строкой в шапке. */
.stmWrap{width:100%;box-sizing:border-box;padding:0 10px;margin:0 auto;
    color:var(--text-color);}

.stmHero{display:flex;justify-content:center;margin:6px 0 2px;}
.stmHero > div{width:132px;height:132px;}

.stmTitle{display:block;text-align:center;font-family:Roboto-Medium;
    font-size:22px;line-height:1.25;margin-bottom:8px;}
.stmLead{text-align:center;color:var(--hint-color);font-size:13.5px;
    line-height:1.5;margin:0 auto 22px;max-width:46ch;}

.stmLabel{display:flex;align-items:baseline;justify-content:space-between;
    gap:12px;margin:0 0 8px;}
.stmLabel b{font-family:Roboto-Medium;font-size:15px;}
.stmLabel span{color:var(--hint-color);font-size:12.5px;}

/* Регионы: сколько влезло в строку, столько и стоит, дальше перенос —
   на узком телефоне четыре кнопки в один ряд не помещаются. */
.stmRegions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.stmReg{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:30px;
    background:var(--secondary-bg-color);border:1.5px solid transparent;
    font-size:13.5px;cursor:pointer;user-select:none;transition:border-color .15s,background .15s;}
.stmReg:hover{background:color-mix(in srgb, var(--secondary-bg-color) 80%, #ffffff);}
.stmReg.on{border-color:var(--button-color);}
/* Флажок — свой SVG, а не эмодзи: в вебвью Telegram эмодзи флагов не
   отрисовываются, вместо них показывается пара букв. */
.stmReg .fl{display:inline-flex;line-height:0;}
.stmReg .fl svg{display:block;width:18px;height:12px;border-radius:2px;
    box-shadow:0 0 0 1px rgba(255,255,255,.14);}
.stmReg .cur{color:var(--hint-color);font-size:12.5px;}
.stmReg.on .cur{color:var(--button-color);}

/* Кнопка-подсказка стоит в строке заголовка, как «Купить себе» на
   /stars: внутри поля она мешала бы спиннеру и переносу на узком
   экране. */
.stmHelpBtn{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
    border:0;border-radius:30px;background:var(--secondary-bg-color);
    color:var(--hint-color);font-family:Roboto-Regular;font-size:12.5px;
    cursor:pointer;white-space:nowrap;transition:color .15s;}
.stmHelpBtn:hover{color:var(--text-color);}
.stmHelpBtn i{font-size:12px;}

.stmModal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;
    justify-content:center;padding:18px;background:rgba(0,0,0,.62);}
/* Атрибут hidden сам по себе даёт display:none, но мы перебиваем его
   флексом — поэтому правило обязательно, иначе окно висит открытым. */
.stmModal[hidden]{display:none;}
.stmModalBox{position:relative;width:100%;max-width:470px;max-height:88vh;
    overflow-y:auto;background:var(--secondary-bg-color);border-radius:18px;
    padding:18px 20px 22px;}
.stmModalTitle{display:block;text-align:center;font-family:Roboto-Medium;
    font-size:16px;margin:0 28px 16px;}
.stmModalClose{position:absolute;top:12px;right:12px;width:32px;height:32px;
    border:0;border-radius:50%;background:none;color:var(--hint-color);
    font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.stmModalClose:hover{background:var(--bg-color);color:var(--text-color);}
.stmModalPic{display:block;width:100%;height:auto;border-radius:12px;margin-bottom:16px;}
.stmModalText{font-size:13px;line-height:1.5;color:var(--text-color);text-align:center;}
.stmModalText b{display:block;font-family:Roboto-Medium;margin-bottom:6px;}
.stmModalLink{display:block;text-align:center;margin-top:14px;
    color:var(--link-color);font-size:13.5px;}

.stmField{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;
    margin-bottom:20px;border-radius:14px;background:var(--secondary-bg-color);
    border:1px solid transparent;transition:border-color .15s;}
.stmField:focus-within{border-color:var(--button-color);}
.stmField.bad{border-color:#e8453c;}
.stmField i{color:var(--hint-color);font-size:15px;}
.stmField input{flex:1 1 auto;min-width:0;background:none;border:0;outline:none;
    color:var(--text-color);font-family:Roboto-Regular;font-size:15px;}
.stmField input::placeholder{color:var(--hint-color);}
.stmField .suffix{color:var(--hint-color);font-size:14px;white-space:nowrap;}

/* Свой спиннер, а не иконка шрифта: у Font Awesome собственные правила
   отображения, они перебивают display:none и кольцо висит постоянно. */
.stmSpin{display:none;flex:0 0 18px;width:18px;height:18px;border-radius:50%;
    border:2px solid color-mix(in srgb, var(--hint-color) 32%, transparent);
    border-top-color:var(--button-color);animation:stmSpin .7s linear infinite;}
.stmField.busy .stmSpin{display:block;}
@keyframes stmSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){ .stmSpin{animation-duration:2.2s;} }

.stmErr{margin:-14px 0 18px;font-size:12.5px;line-height:1.45;color:#e8453c;display:none;}
.stmErr.on{display:block;}
.stmErr.warn{color:#e8a23c;}
/* Удачная покупка — тот же блок, что и ошибки: сообщение появляется
   там, где человек уже привык его искать. */
.stmErr.ok{color:#3ddc84;}

.stmOff{margin:0 0 18px;padding:12px 14px;border-radius:14px;font-size:13px;line-height:1.45;
    background:color-mix(in srgb, #e8a23c 14%, transparent);
    border:1px solid color-mix(in srgb, #e8a23c 34%, transparent);}

.stmCard{display:flex;align-items:center;gap:12px;height:62px;padding:0 10px 0 12px;
    margin-bottom:20px;border-radius:14px;background:var(--secondary-bg-color);
    border:1.5px solid var(--button-color);}
.stmCard[hidden]{display:none;}
.stmCard .ava{flex:0 0 38px;width:38px;height:38px;border-radius:50%;
    background:var(--bg-color);display:flex;align-items:center;justify-content:center;
    color:var(--button-color);font-size:17px;}
.stmCard .who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.stmCard .who b{font-family:Roboto-Medium;font-size:15px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;}
.stmCard .who span{font-size:12.5px;color:var(--hint-color);}
.stmCard .ok{color:var(--button-color);font-size:16px;flex:0 0 auto;}
.stmCard .clr{flex:0 0 32px;width:32px;height:32px;border:0;border-radius:50%;
    background:none;color:var(--hint-color);font-size:15px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;}
.stmCard .clr:hover{background:var(--bg-color);color:var(--text-color);}

/* Итог: две строки одного размера, чтобы «придёт» и «к оплате» не
   путались местами — это разные валюты и разные суммы. */
.stmTotal{margin:6px 0 0;padding:14px 16px;border-radius:14px;
    background:var(--secondary-bg-color);}
.stmTotal .row{display:flex;align-items:baseline;justify-content:space-between;
    gap:12px;padding:5px 0;font-variant-numeric:tabular-nums;}
.stmTotal .row span{color:var(--hint-color);font-size:13.5px;}
.stmTotal .row b{font-family:Roboto-Medium;font-size:15px;white-space:nowrap;}
.stmTotal .row.pay b{font-size:19px;color:var(--button-color);}

.stmPay{margin:18px 0 10px;height:52px;width:100%;border:0;border-radius:14px;
    background:var(--button-color);color:var(--button-text-color);
    font-family:Roboto-Medium;font-size:15.5px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:opacity .15s;}
.stmPay[disabled]{opacity:.45;cursor:default;}

.stmNote{margin:0 0 28px;font-size:12.5px;line-height:1.5;color:var(--hint-color);
    text-align:center;}