/* =============================================================================
   modals_2026.css — единый вид клиентских модалок (редизайн 2026-08).
   Подключается на /order, /ste, /steam и главной.

   Что делает: приводит модалки страниц заказа и пополнения к виду модалок
   главной (products_2026.php): тот же фон со стеклянным бликом, скругление 18px,
   заголовок 18px/900 слева, компактные отступы, кнопки «как на карточках».
   Плюс собственные компоненты редизайна: логотип со значком статуса (.rd-brand),
   карточки-строки (.rd-card), плашки (.rd-note-*), пункты в дуге логотипа (.rd-li),
   фирменный лоадер ожидания и компактные контакт-кнопки.

   Иконки статуса — ГОТОВЫЕ картинки /img/badges/badge_<иконка>_<статус>.svg:
   круг и рисунок нарисованы вместе, рисунок вписан по центру своих настоящих
   границ. Никаких CSS-подгонок посадки быть не должно.
   ============================================================================= */

/* ---- каркас окна ---- */
.tf2m .modal-content,
.tf2m.modal-content{
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    rgba(20,18,26,.92) !important;
  background-repeat: no-repeat !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.45) !important;
  color: #e6e6e8;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* ---- шапка: логотип со значком слева, заголовок рядом ---- */
.tf2m .modal-header{
  border-bottom: 1px solid rgba(230,230,232,.18) !important;
  padding: 10px 12px !important;
  background: transparent !important;
  position: relative !important;
  justify-content: flex-start !important;
  align-items: center !important;
}
.tf2m .modal-title{
  margin: 0 !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  font-size: 18px !important;
  color: rgba(255,255,255,.92) !important;
  width: auto !important;
  text-align: left !important;
  padding: 0 !important;
}
.tf2m .close{
  opacity: .85; text-shadow: none; color: rgba(255,255,255,.9);
  position: absolute !important; right: 12px !important; top: 50% !important;
  transform: translateY(-50%) !important;
}
.rd-head{ display:flex; align-items:center; gap:24px; min-width:0; padding-right:34px; }
.rd-brand{ position:relative; width:60px; height:60px; flex-shrink:0; }
.rd-brand > img:first-child{ width:100%; height:100%; object-fit:contain; display:block; }
.rd-brand .brand-check{
  position:absolute; right:-6px; bottom:2px; width:28px; height:28px;
  display:block; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,.5);
}

/* ---- тело ---- */
.tf2m .modal-body{ padding: 12px !important; background: transparent !important; }
.tf2m .modal-body p{ font-size:15px; line-height:1.6; color:rgba(255,255,255,.86); }
.tf2m .modal-body label{ color:rgba(255,255,255,.80); font-weight:700; }
.rd-meta{ font-size:12px; color:rgba(255,255,255,.55); font-weight:700; margin:2px 0 8px; }
.rd-sect{ font-weight:900; font-size:14px; color:rgba(255,255,255,.78); margin:12px 0 8px; }
.rd-card{
  display:block; width:100%; padding:10px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); margin:8px 0;
  font-size:13.5px; font-weight:600; line-height:1.45; color:rgba(255,255,255,.88);
}
.rd-note-info{
  display:block; background:rgba(98,167,227,.10); border:1px solid rgba(98,167,227,.18);
  padding:8px 10px; border-radius:12px; color:rgba(255,255,255,.86);
  font-size:12.5px; line-height:1.4; margin-top:8px;
}
.rd-note-warn{
  display:block; background:rgba(255,91,91,.10); border:1px solid rgba(255,91,91,.20);
  padding:8px 10px; border-radius:12px; color:rgba(255,255,255,.90);
  font-size:13px; line-height:1.45; margin:8px 0;
}
/* Кнопка «Войти через Steam» в окне «Необходима авторизация» (#NotLoggedIn на главной,
   /ste, /steam). Без правила она стоит на дефолтных отступах абзаца: сверху 8px (от
   .rd-card), снизу 28px (16px абзаца + 12px тела окна) — визуально смещена вверх.
   18px сверху (перебивает схлопывание с 8px карточки) + 6px снизу дают ровно 18/18. */
.tf2m .modal-body p.text-center{ margin:18px 0 6px; }
.rd-link{ color:#62a7e3; word-break:break-all; }
.rd-hint{ display:flex; align-items:center; gap:6px; font-size:12px; color:#f5c842; margin:6px 0 2px; padding-left:13px; }
.rd-hint i{ flex:0 0 auto; }

/* ---- пункты списка: иконка в дуге логотипа, как у чеков об оплате ---- */
/* Выравнивание задано жёстко (text-align:left на строке И на тексте): на узком экране
   текст переносится на 2-3 строки, блок текста растягивается на всю ширину справа от
   иконки, и любое унаследованное text-align:center (чужой стиль, кеш, режим экономии
   трафика в браузере) центрует строки внутри этого блока — визуально текст уезжает
   ПРАВЕЕ центра окна, потому что блок начинается после иконки. Жалоба 2026-08-16. */
.rd-li{ display:flex; align-items:center; gap:9px; margin:8px 0;
  font-size:13.5px; font-weight:600; color:rgba(255,255,255,.88); line-height:1.45;
  text-align:left; }
.rd-li > span:last-child{ flex:1 1 auto; min-width:0; text-align:left; }
.rdl-logo-wrap{ position:relative; width:38px; height:38px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; }
.rdl-logo-wrap .rdl-arc{ position:absolute; inset:0; width:100%; height:100%; }
.rdl-logo-wrap i{ font-size:15px; color:#DFD0B0; position:relative; line-height:1; margin:0; }
/* В строках модалок кружок и иконка на 35% мельче (38→24.7, 15→9.75). Кружок стоит по
   центру ВСЕГО блока текста (обеих строк при переносе), а не напротив первой строки —
   решение владельца 2026-08-16. Селектор с `.rd-li`, чтобы не задеть иконку чека об
   оплате (.receipt-dl-card) и обойти инлайновый дубль правила в orders_alt.php. */
.rd-li .rdl-logo-wrap{ width:24.7px; height:24.7px; }
.rd-li .rdl-logo-wrap i{ font-size:9.75px; }

/* ---- фирменный лоадер ожидания (логотип с ключом) ---- */
.tf2l-spinner-logo{ width:58px; height:54px; display:block; }
.tf2l-spinner-logo--sm{ width:40px; height:37px; margin:4px auto 12px; }
.tf2l-spinner-logo .tls-arc{ stroke-dasharray:1092; animation: tf2lLogoDraw 1.8s ease-in-out infinite; }
@keyframes tf2lLogoDraw{ 0%{stroke-dashoffset:1092;} 50%{stroke-dashoffset:0;} 100%{stroke-dashoffset:-1092;} }
@media (prefers-reduced-motion: reduce){ .tf2l-spinner-logo .tls-arc{ animation-duration:3.6s; } }

/* ---- контакты ---- */
.help-contact{ display:block; text-align:center; }
.rd-contacts{ display:flex; gap:8px; margin:4px 0 2px; justify-content:center; }
.rd-contact{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.92);
  font-size:18px; text-decoration:none;
}
.rd-contact:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22); color:#fff; text-decoration:none; }

/* ---- поля и кнопки ---- */
.tf2m .form-control{
  background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.12) !important;
  color:rgba(255,255,255,.92) !important; border-radius:12px !important; box-shadow:none !important;
}
.tf2m .form-control::placeholder{ color:rgba(255,255,255,.45) !important; }
.tf2m .modal-footer{ border-top:1px solid rgba(230,230,232,.18) !important; background:transparent !important; }
.tf2m .modal-footer .btn,
.tf2m .modal-footer button.btn{
  border-radius:14px !important; font-weight:900 !important; letter-spacing:.01em !important;
  padding:10px 14px !important; border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.06) !important; color:rgba(255,255,255,.92) !important;
  box-shadow:none !important;
}
.tf2m .modal-footer .btn:hover{ background:rgba(255,255,255,.10) !important; border-color:rgba(255,255,255,.22) !important; }
.tf2m-center .modal-footer{ justify-content:center !important; }

@media (max-width: 575.98px){
  .rd-head{ gap:14px; }
  .rd-brand{ width:48px; height:48px; }
  .rd-brand .brand-check{ width:24px; height:24px; right:-5px; }
  .tf2m .modal-title{ font-size:16px !important; }
}

/* ============================================================
   Окна оформления заказа на главной, новый вид (2026-08-21).
   Раскатано на 13 живых окон в modules/products_2026.php.
   ============================================================ */

/* Шапка: способ оплаты второй строкой под заголовком.
   Заголовок при этом не растёт, длинные названия и названия с иконкой переносятся сами. */
.rd-head-text{ min-width:0; }
.rd-head-sub{
  font-size:13.5px; font-weight:700; color:rgba(255,255,255,.80);
  margin-top:3px; line-height:1.3; overflow-wrap:break-word;
}

/* Суммы: строка с точками до значения вместо трёх серых инпутов.
   Значение пишет JS (tf2lMoney) в <b id="…">, поэтому это текст, а не поле ввода. */
.rd-amount{ padding:12px; }
.rd-row{ display:flex; align-items:baseline; gap:6px; margin:2px 0; }
.rd-row .rd-dots{
  flex:1 1 auto; min-width:18px;
  border-bottom:2px dotted rgba(255,255,255,.38); transform:translateY(-4px);
}
.rd-row b{ white-space:nowrap; }
.rd-row-total{
  margin-top:9px; padding-top:9px; border-top:1px solid rgba(255,255,255,.12);
  font-size:15px; justify-content:space-between;
}
/* итог без разбивки (продажа за криптовалюту) — делить нечего, черта не нужна */
.rd-amount .rd-row-total:first-child{ margin-top:0; padding-top:0; border-top:0; }

/* Галочки согласия: рамка не уезжает, квадратик ровно на первой строке текста.
   Цвет синий — решение владельца 2026-08-21, красный в окнах означает тревогу.
   Задан на самом поле, а не на окне: accent-color наследуется вниз и красит ещё
   радиокнопки и выпадающие списки. */
.rd-card-checks{ padding:10px 12px; }
.rd-check{
  display:flex; align-items:flex-start; gap:9px; margin:0 0 8px;
  font-size:12.5px; font-weight:600; line-height:1.45; color:rgba(255,255,255,.86);
}
.rd-check:last-child{ margin-bottom:0; }
.rd-check .rd-check-box{
  position:static !important; margin:2px 0 0 !important;
  flex:0 0 auto; width:16px; height:16px; accent-color:#62a7e3;
}
.rd-check span{ flex:1 1 auto; min-width:0; }

/* Подсказки с треугольником (комиссия сети, memo, промокод) — один неброский серый */
.tf2m .promo-hint,
.tf2m .modal-body label font[size="1"],
.tf2m .modal-body small{ color:rgba(255,255,255,.55); font-weight:400; }
.tf2m .promo-toggle{ margin-top:10px; }

@media (max-width:575.98px){
  .rd-head-sub{ font-size:12.5px; }
}

/* Local integration: same upstream info-circle glyph, without an entire font. */
.pm-modal .bi-info-circle-fill::before{
  content:""; display:inline-block; width:1em; height:1em; vertical-align:-.125em;
  background:currentColor;
  -webkit-mask:url('../img/info-circle-fill.svg') no-repeat center / contain;
  mask:url('../img/info-circle-fill.svg') no-repeat center / contain;
}