/* Payment & balance UX (app/parts/pay.php, parts/pay.js) */
.pack-bonus{display:inline-block;font-style:normal;font-size:11px;font-weight:700;line-height:1.3;padding:2px 8px;border-radius:99px;white-space:nowrap;vertical-align:middle;
  background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--okt);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent)}
.pack .pack-bonus{display:table;margin:6px auto 0}
.approx{font-style:normal;font-weight:500;font-size:12px;color:var(--mut);white-space:nowrap}
.approx:empty{display:none}
.pack .approx{display:block;margin-top:4px}
.pc .big .approx{font:500 14px var(--f);letter-spacing:normal;margin-inline-start:6px}
.pc-packs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 16px}
.pc-pack{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:12px;background:var(--soft);border:1px solid var(--line);text-align:center;min-width:0}
.pc-pack b{font:700 18px var(--fh)}.pc-pack small{color:var(--mut);font-size:12px}
.pc-pack .pack-bonus{margin-top:3px;font-size:10px;padding:1px 6px}

.pay-hint{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;color:var(--tx2);min-width:0}
.pay-hint .bad{color:var(--badt)}
.pay-hint .pay-next{flex-basis:100%;color:var(--mut);font-size:12px}
.pay-refund{margin-top:8px}
.pay-refund a,.thanks-a a.small{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.pay-custom{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:6px 10px;margin:0 0 14px;font-size:14px}
.pay-custom>span:first-child{color:var(--tx2);font-weight:600}
.pay-custom-in{position:relative;display:inline-block}
.pay-custom-in i{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--mut);pointer-events:none}
.pay-custom-in .field{width:104px;padding:9px 10px 9px 24px;min-height:40px}
.pay-card{max-height:calc(100dvh - 32px);overflow-y:auto}
.pay-card .pay-refund{text-align:center;margin-top:12px;font-size:12px}

/* header pill: 1 video left → warning, 0 → "Top up" */
.pill-cta{display:none;font-weight:700}
.pill.credits.is-low{border-color:color-mix(in srgb,var(--a3) 70%,transparent);background:color-mix(in srgb,#f59e0b 14%,var(--card));box-shadow:0 0 0 3px color-mix(in srgb,#f59e0b 14%,transparent)}
.pill.credits.is-low svg{color:#f59e0b}
.pill.credits.is-empty{background:var(--grad);border-color:transparent;color:#fff}
.pill.credits.is-empty svg{color:#fff}
.pill.credits.is-empty [data-credits],.pill.credits.is-empty small{display:none}
.pill.credits.is-empty .pill-cta{display:inline;overflow:hidden;text-overflow:ellipsis}

/* thank-you panel after a payment */
.thanks{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:18px 0 4px;padding:20px;border-radius:var(--r2);border:1.5px solid color-mix(in srgb,var(--ok) 45%,transparent);
  background:linear-gradient(120deg,color-mix(in srgb,var(--ok) 12%,var(--card)),var(--card))}
.thanks-ic{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#fff}
.thanks-ic svg{width:28px;height:28px}
.thanks-b{flex:1;min-width:220px}
.thanks-b h2{font-size:22px;margin-bottom:4px}
.thanks-n{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:12px}
.thanks-n span,.ref-stats span{display:flex;flex-direction:column}
.thanks-n b,.ref-stats b{font:700 22px var(--fh)}
.thanks-n small,.ref-stats small{color:var(--mut);font-size:12px}
.thanks-a{display:flex;flex-direction:column;align-items:center;gap:8px}
.thanks-a .btn svg{width:18px;height:18px}

/* invite + gift boxes */
.pay-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:14px;align-items:start}
.pay-two .box{min-width:0}
.ref-steps{margin:10px 0 0;padding-inline-start:20px;color:var(--tx2)}
.ref-steps li{margin:3px 0}
.ref-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.gift-f{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.box .btn.sm svg{width:16px;height:16px}

/* history */
.hist-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:30px 0 12px}
.hist-h h2{font-size:22px}
.seg a{padding:8px 14px;border-radius:9px;font-size:13px;font-weight:600;color:var(--tx2);white-space:nowrap;flex:none}
.seg a.on{background:var(--seg-on);color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.12)}
table.hist th,table.hist td{text-align:start;white-space:nowrap}
table.hist td:nth-child(2){white-space:normal;min-width:130px}
table.hist a{color:var(--link);font-weight:600}
.hist-note{display:block;font-size:12px}
.st{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--soft);color:var(--tx2)}
.st.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--okt)}
.st.wait{background:color-mix(in srgb,#f59e0b 18%,transparent);color:color-mix(in srgb,#b45309 70%,var(--tx))}

[dir=rtl] .pay-custom-in i{left:11px}
@media (max-width:760px){
  .pc-packs{grid-template-columns:repeat(2,1fr)}
  .packs{grid-template-columns:repeat(2,1fr)!important}
  .pay-packs .pack{padding:12px 8px}
  .thanks{padding:16px}.thanks-a{width:100%}.thanks-a .btn{width:100%}
  .pay-custom{grid-template-columns:auto 1fr}.pay-custom .pay-hint{grid-column:1/-1}
  .pay-two{grid-template-columns:1fr}
  .seg a{padding:10px 14px}
  .pay-card{padding:20px 16px}
}
@media (max-width:760px){.pill.credits.is-empty{max-width:132px}}