/* Стили модуля js/payments.js. До 19.09.2026 скрипт вставлял их тегом <style>;
   с 19.09.2026 CSP сайта без 'unsafe-inline' такие теги не применяет, поэтому стили — здесь.
   Правите стили раздела — правьте этот файл и поднимайте его ?v=N в index.html. */

      body.pay-no-scroll { overflow: hidden; }

      /* Общие правила сайта для button, input и label (css/style.css: ширина 100%, отступы,
         стеклянный фон, блик) внутри окна не нужны. :where() держит специфичность на уровне
         самих этих правил — классы окна ниже их перекрывают. */
      :where(.pay-modal) button { width: auto; margin: 0; overflow: visible; font-family: inherit; letter-spacing: normal;
        -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
      :where(.pay-modal) button::before { content: none; }
      :where(.pay-modal) button:active { transform: none; }
      :where(.pay-modal) label { margin: 0; color: inherit; font-weight: inherit; }
      :where(.pay-modal) input { -webkit-backdrop-filter: none; backdrop-filter: none; }
      :where(.pay-modal) input[type="checkbox"] { width: 18px; height: 18px; margin: 0; padding: 0; flex: 0 0 auto;
        border: none; border-radius: 4px; background: none; box-shadow: none; accent-color: #ffcf5c; cursor: pointer; }

      .pay-modal { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center;
        padding: 16px; opacity: 0; transition: opacity .2s ease; }
      .pay-modal.is-open { opacity: 1; }
      .pay-modal[hidden] { display: none; }
      .pay-modal__scrim { position: absolute; inset: 0; background: rgba(6,5,16,0.6);
        -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
      .pay-modal__panel { position: relative; z-index: 1; width: min(520px, 100%); max-height: 92vh;
        overflow-x: hidden; overflow-y: auto; padding: 22px 22px 18px; border-radius: 26px; color: #efeafb;
        background: linear-gradient(165deg, rgba(34,28,54,0.97), rgba(22,18,38,0.98));
        border: 1px solid rgba(255,255,255,0.14);
        box-shadow: 0 40px 90px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12);
        transform: translateY(10px) scale(.98); transition: transform .24s ease; }
      .pay-modal.is-open .pay-modal__panel { transform: none; }

      .pay-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
        display: grid; place-items: center; padding: 0; line-height: 1; font-size: 15px; cursor: pointer;
        color: inherit; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); }
      .pay-x:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.16); box-shadow: none; }

      .pay-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; padding-right: 40px; }
      .pay-head__ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center;
        font-size: 20px; color: var(--pay-accent);
        background: color-mix(in srgb, var(--pay-accent) 18%, transparent);
        border: 1px solid color-mix(in srgb, var(--pay-accent) 34%, transparent); }
      .pay-title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
      .pay-sub { font-size: 12.5px; opacity: .72; margin-top: 2px; }

      .pay-test { display: flex; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 700; color: #2a1e05;
        background: #ffd66b; border-radius: 12px; padding: 7px 11px; margin-bottom: 12px; }
      .pay-test--center { justify-content: center; margin: 8px 0 0; }

      .pay-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px;
        border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); margin-bottom: 14px; }
      .pay-seg__b { border: none; background: transparent; color: inherit; cursor: pointer; padding: 8px 4px;
        border-radius: 999px; font-size: 13px; font-weight: 600; opacity: .72; transition: opacity .18s ease; }
      .pay-seg__b:hover { opacity: 1; background: transparent; box-shadow: none; }
      .pay-seg__b.is-active,
      .pay-seg__b.is-active:hover { opacity: 1; color: #2a1e05;
        background: linear-gradient(135deg, var(--color-primary, #ffcf5c), var(--color-primary-2, #f0a23c)); }

      .pay-rows { border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); padding: 2px 14px; }
      .pay-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 13.5px; }
      .pay-row + .pay-row { border-top: 1px solid rgba(255,255,255,0.08); }
      .pay-row b { white-space: nowrap; }
      .pay-row--disc b { color: #7ff0c8; }
      .pay-row--bonus { justify-content: flex-start; cursor: pointer; }
      .pay-row__tx { flex: 1 1 auto; min-width: 0; }
      .pay-row--bonus small { display: block; margin-top: 2px; font-size: 11.5px; opacity: .6; }
      .pay-row--total span { font-weight: 700; }
      .pay-row--total b { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
      .pay-until { display: flex; gap: 8px; align-items: center; margin: 10px 2px 0; font-size: 12.8px; opacity: .82; }
      .pay-warn { display: flex; gap: 8px; margin-top: 10px; font-size: 12.5px; line-height: 1.45;
        background: rgba(90,169,255,0.10); border: 1px solid rgba(90,169,255,0.28); border-radius: 12px; padding: 9px 11px; }
      .pay-warn i { margin-top: 2px; color: #7fbcff; }

      .pay-promo { display: flex; gap: 8px; margin-top: 12px; }
      .pay-input { flex: 1 1 auto; width: auto; min-width: 0; padding: 10px 13px; border-radius: 12px; font-size: 16px;
        letter-spacing: .04em; text-transform: uppercase; color: inherit;
        background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); }
      .pay-input::placeholder { text-transform: none; letter-spacing: 0; opacity: .6; }
      .pay-ghost { flex: 0 0 auto; padding: 10px 14px; border-radius: 12px; cursor: pointer; font-size: 13.5px; font-weight: 600;
        color: inherit; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); }
      .pay-ghost:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.18); box-shadow: none; }
      .pay-ghost--wide { width: 100%; border-radius: 999px; padding: 11px; }
      .pay-msg { margin-top: 8px; font-size: 12.8px; line-height: 1.45; }
      .pay-msg--err { color: #ff9b9b; }
      .pay-msg--ok { color: #7ff0c8; }
      .pay-msg--box { padding: 12px 14px; border-radius: 12px; background: rgba(255,90,90,0.10); border: 1px solid rgba(255,90,90,0.3); }

      .pay-agree { display: flex; gap: 10px; align-items: flex-start; margin: 14px 2px 0; font-size: 12.8px; line-height: 1.45; cursor: pointer; }
      .pay-agree input { margin-top: 1px; }
      .pay-agree a { color: inherit; text-decoration: underline; }

      .pay-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 14px;
        padding: 7px 8px 7px 18px; border: none; cursor: pointer; border-radius: 999px; font-size: 15px; font-weight: 700;
        color: #2a1e05; background: linear-gradient(135deg, #ffe9b0, var(--color-primary, #ffcf5c) 45%, var(--color-primary-2, #f0a23c));
        box-shadow: 0 12px 26px rgba(255,190,80,0.28); transition: filter .18s ease, opacity .18s ease; }
      .pay-cta:hover { border: none; filter: brightness(1.05);
        background: linear-gradient(135deg, #ffe9b0, var(--color-primary, #ffcf5c) 45%, var(--color-primary-2, #f0a23c));
        box-shadow: 0 12px 26px rgba(255,190,80,0.28); }
      .pay-cta:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; filter: none; }
      .pay-cta__arrow { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
        font-size: 13px; color: #fff; background: rgba(42,30,5,0.9); }
      .pay-cta--center { margin-top: 0; }
      .pay-note { display: flex; gap: 8px; margin: 12px 2px 0; font-size: 11.8px; line-height: 1.45; opacity: .7; }
      .pay-note i { margin-top: 2px; }

      .pay-loading { padding: 26px 0 18px; text-align: center; opacity: .8; }
      .pay-center { text-align: center; padding: 10px 6px 2px; }
      .pay-big { width: 64px; height: 64px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 26px;
        margin-bottom: 12px; background: rgba(255,255,255,0.08); }
      .pay-big--ok { background: rgba(69,224,168,0.16); color: #45e0a8; }
      .pay-big--warn { background: rgba(255,179,71,0.16); color: #ffb347; }
      .pay-text { font-size: 14px; line-height: 1.5; opacity: .88; margin: 8px auto 0; max-width: 400px; }
      .pay-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
      .pay-actions:empty { display: none; }

      html[data-theme="light"] .pay-modal__scrim { background: rgba(20,12,40,0.34); }
      html[data-theme="light"] .pay-modal__panel { color: #20203a;
        background: linear-gradient(165deg, rgba(255,255,255,0.99), rgba(247,245,252,0.99));
        border-color: rgba(0,0,0,0.10); box-shadow: 0 40px 90px rgba(60,30,90,0.26), inset 0 1px 0 rgba(255,255,255,0.9); }
      html[data-theme="light"] .pay-x,
      html[data-theme="light"] .pay-ghost,
      html[data-theme="light"] .pay-seg { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); }
      html[data-theme="light"] .pay-rows { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
      html[data-theme="light"] .pay-row + .pay-row { border-top-color: rgba(0,0,0,0.07); }
      html[data-theme="light"] .pay-input { background: #fff; border-color: rgba(0,0,0,0.16); }
      html[data-theme="light"] .pay-row--disc b,
      html[data-theme="light"] .pay-msg--ok { color: #16855c; }
      html[data-theme="light"] .pay-msg--err { color: #c0392b; }
      html[data-theme="light"] .pay-warn i { color: #2f7fd6; }
      html[data-theme="light"] .pay-big { background: rgba(0,0,0,0.05); }
      html[data-theme="light"] .pay-big--ok { background: rgba(31,158,110,0.12); color: #1e9e6e; }
      html[data-theme="light"] .pay-big--warn { background: rgba(240,164,60,0.14); color: #d9861c; }