/* The distributor window (js/distributor.js): the plans, the application, the identity document, the payment,
   then the distributor's own page (balance, top-up, packs sold as codes, codes, history). */
.ds { display: grid; gap: 14px; }
.ds-hero { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 20px; border-radius: 22px; color: #fff; overflow: hidden;
  background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .22), transparent 45%), linear-gradient(135deg, #ff3d8b, var(--brand) 55%, #2a5ff0);
  box-shadow: 0 16px 34px -16px rgba(123, 47, 247, .8); }
.ds-hero-ico { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: rgba(255, 255, 255, .2); font-size: 1.8rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.ds-hero b { display: block; font-size: 1.25rem; font-weight: 900; }
.ds-hero p { margin: 4px 0 0; font-size: .86rem; opacity: .93; line-height: 1.6; }
.ds-perks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.ds-perks li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: .78rem; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.ds-perks i { font-style: normal; }
.ds-h { margin: 6px 0 0; font-size: .95rem; font-weight: 800; color: var(--ink); }
.ds-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: #fff6e6; color: #8a5a00; font-size: .85rem; font-weight: 600; }

.ds-steps { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ds-steps li { flex: 1; display: grid; justify-items: center; gap: 4px; font-size: .68rem; font-weight: 700; color: var(--muted); text-align: center; }
.ds-steps b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--line); color: var(--muted); font-size: .75rem; }
.ds-steps li.done b { background: var(--good); color: #fff; }
.ds-steps li.now b { background: linear-gradient(135deg, var(--accent), var(--brand)); color: #fff; box-shadow: 0 0 0 4px rgba(123, 47, 247, .18); }
.ds-steps li.now { color: var(--brand); }
.ds-top { display: grid; gap: 12px; padding: 12px; border-radius: 16px; background: #f8f5ff; border: 1px solid var(--line); }
.ds-top > div:first-child b { display: block; font-size: 1rem; } .ds-top > div:first-child small { color: var(--muted); font-weight: 700; }

.ds-plans { display: grid; gap: 14px; }
.ds-plan { position: relative; display: grid; gap: 12px; width: 100%; padding: 18px 16px 16px; border-radius: 20px; border: 1.5px solid var(--line); background: #fff; text-align: start; cursor: pointer; font: inherit; color: var(--ink);
  box-shadow: 0 8px 22px -18px rgba(43, 33, 64, .55); transition: border-color .15s, box-shadow .15s, transform .15s; }
.ds-plan:hover { border-color: #cdbdf7; transform: translateY(-1px); }
.ds-plan.on { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--accent), var(--brand), #2a5ff0) border-box;
  box-shadow: 0 18px 36px -18px rgba(123, 47, 247, .6); }
.ds-ribbon { position: absolute; top: -11px; inset-inline-end: 16px; padding: 4px 12px; border-radius: 999px; background: linear-gradient(135deg, #ffb300, #ff6a00); color: #fff; font-size: .7rem; font-weight: 900; box-shadow: 0 6px 14px -6px rgba(255, 106, 0, .8); }
.ds-plan-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.ds-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #cfc6e8; display: grid; place-items: center; }
.ds-plan.on .ds-radio { border-color: var(--brand); }
.ds-plan.on .ds-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--brand)); }
.ds-plan-main { display: grid; gap: 3px; min-width: 0; }
.ds-plan-name { font-size: 1.15rem; font-weight: 900; }
.ds-plan-tag { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.ds-plan-price { display: grid; justify-items: end; text-align: end; gap: 1px; white-space: nowrap; }
.ds-plan-price b { font-size: 1.25rem; font-weight: 900; color: var(--brand); direction: ltr; }
.ds-plan-price small { color: var(--muted); font-size: .68rem; font-weight: 700; }
.ds-plan-disc span { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 12px; background: linear-gradient(135deg, #fff0f6, #f4edff); color: var(--accent); font-size: .86rem; font-weight: 900; box-shadow: inset 0 0 0 1px #ffd3e6; }
.ds-feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 7px 14px; margin: 0; padding: 12px 0 0; list-style: none; border-top: 1px dashed var(--line); }
.ds-feats li { display: flex; align-items: flex-start; gap: 8px; font-size: .8rem; font-weight: 700; line-height: 1.4; }
.ds-feats li i { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: .7rem; font-weight: 900; }
.ds-feats li.on i { background: #e6f8ee; color: var(--good); }
.ds-feats li.off { color: #b3acc8; } .ds-feats li.off i { background: #f2f0f7; color: #c4bdd8; }
@media (max-width: 420px) { .ds-plan-head { grid-template-columns: auto 1fr; } .ds-plan-price { grid-column: 2; justify-items: start; text-align: start; } .ds-feats { grid-template-columns: 1fr; } }

.ds-form { display: grid; gap: 10px; }
.ds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.ds-field { display: grid; gap: 4px; margin: 0; }
.ds-field > span { font-size: .76rem; font-weight: 800; color: var(--muted); }
.ds-field .input, .ds-form textarea { width: 100%; }
.ds-terms { padding: 12px; border-radius: 14px; background: #f8f5ff; border: 1px solid var(--line); }
.ds-terms b { font-size: .85rem; }
.ds-terms-text { max-height: 150px; overflow-y: auto; margin-top: 6px; font-size: .78rem; line-height: 1.6; color: var(--ink); }
.ds-terms-text p { margin: 0 0 6px; }
.ds-agree { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: .82rem; font-weight: 700; cursor: pointer; }
.ds-agree input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand); flex: none; }

.ds-kyc, .ds-wait, .ds-pay { display: grid; justify-items: center; gap: 8px; padding: 22px 16px; border-radius: 18px; border: 1px dashed #d8ccf6; background: #fcfaff; text-align: center; }
.ds-kyc-ico, .ds-wait > span { font-size: 2.4rem; line-height: 1; }
.ds-kyc b, .ds-wait b { font-size: 1rem; }
.ds-kyc p, .ds-wait p, .ds-pay p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.55; max-width: 420px; }
.ds-file { position: relative; display: grid; justify-items: center; gap: 6px; width: min(100%, 320px); padding: 14px; border: 1.5px dashed #cdbdf7; border-radius: 14px; background: #fff; cursor: pointer; }
.ds-file:hover { border-color: var(--brand); }
.ds-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ds-file-btn { padding: 8px 16px; border-radius: 999px; background: #f1ebff; color: var(--brand); font-weight: 800; font-size: .85rem; }
.ds-file-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .76rem; font-weight: 700; direction: ltr; }
.ds-file-name.on { color: var(--good); }
.ds-amount { font-size: 2rem; font-weight: 800; color: var(--brand); }

.ds-dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ds-card { display: grid; gap: 3px; align-content: start; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px -14px rgba(43, 33, 64, .5); }
.ds-card small { font-size: .72rem; font-weight: 800; color: var(--muted); }
.ds-card b { font-size: 1.1rem; font-weight: 800; }
.ds-card > span { font-size: .74rem; font-weight: 700; color: var(--muted); }
.ds-bal { background: linear-gradient(135deg, var(--accent), var(--brand)); border: 0; color: #fff; }
.ds-bal small, .ds-bal > span { color: rgba(255, 255, 255, .85); }
.ds-bal b { font-size: 1.45rem; }
.ds-topup { grid-column: 1 / -1; gap: 12px; padding: 16px; }
.ds-topup-head { display: flex; align-items: center; gap: 10px; }
.ds-topup-head b { font-size: 1rem; font-weight: 900; }
.ds-topup-ico { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, #fff3d6, #ffe2a8); font-size: 1.2rem; }
.ds-topup-field { display: flex; align-items: center; gap: 0; margin: 0; border: 1.5px solid var(--line); border-radius: 14px; background: #fbf9ff; overflow: hidden; }
.ds-topup-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(123, 47, 247, .14); }
.ds-cur { padding: 0 14px; align-self: stretch; display: grid; place-items: center; background: #f1ebff; color: var(--brand); font-weight: 900; font-size: .85rem; }
.ds-topup-field .input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; box-shadow: none; font-size: 1.25rem; font-weight: 800; text-align: center; }
.ds-topup-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ds-chip { height: 36px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; direction: ltr; }
.ds-chip:hover { border-color: var(--brand); color: var(--brand); }
.ds-topup-go { width: 100%; height: 48px; font-size: 1rem; }
.ds-topup-note { text-align: center; color: var(--muted); font-size: .72rem; font-weight: 700; }
@media (max-width: 420px) { .ds-topup-quick { grid-template-columns: repeat(2, 1fr); } }

.ds-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ds-pack { display: grid; gap: 4px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.ds-pack > b { font-size: .92rem; } .ds-pack > small { color: var(--muted); font-weight: 700; }
.ds-pack-price, .ds-pack-cost { display: flex; justify-content: space-between; gap: 6px; font-size: .78rem; }
.ds-pack-price span, .ds-pack-cost span { color: var(--muted); font-weight: 700; }
.ds-pack-cost b { color: var(--good); }
.ds-pack-buy { display: grid; grid-template-columns: 58px 1fr; gap: 6px; margin-top: 6px; }
.ds-pack-buy .ds-count { width: 100%; padding-inline: 6px; height: 38px; }
.ds-pack-buy .btn { height: 38px; padding-inline: 6px; font-size: .74rem; white-space: nowrap; border-radius: 12px; }

.ds-new:empty { display: none; }
.ds-new { display: grid; gap: 6px; padding: 12px; border-radius: 16px; background: #effcf4; border: 1px solid #c8efd8; }
.ds-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px dashed #b9a6ef; background: #fff; font: 800 1rem ui-monospace, Consolas, monospace; letter-spacing: .06em; color: var(--ink); cursor: pointer; direction: ltr; }
.ds-code small { font: 700 .7rem Cairo, sans-serif; letter-spacing: 0; color: var(--brand); }
.ds-code.sm { padding: 4px 8px; font-size: .72rem; width: auto; white-space: nowrap; letter-spacing: .02em; }

.ds-list { display: grid; gap: 6px; }
.ds-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.ds-table th { text-align: start; color: var(--muted); font-weight: 800; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.ds-table td { padding: 6px 4px; border-bottom: 1px solid #f3f0fa; vertical-align: middle; }
.ds-table tr.st-redeemed td { color: var(--muted); }
.ds-table tr.st-void td { color: var(--muted); text-decoration: line-through; }
.ds-table .pos { color: var(--good); font-weight: 800; } .ds-table .neg { color: var(--bad); font-weight: 800; }
.ds-when { color: var(--muted); white-space: nowrap; }

/* the top-up card never wider than the window it is in (the side panel on a computer, the phone's width): its rows
   shrink with it, the quick amounts wrap to as many per row as fit, the field and the button take the card's width */
.ds-card.ds-topup { grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; }
.ds-topup > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.ds-topup-field { width: 100%; }
.ds-topup-quick { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.ds-chip { min-width: 0; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-topup-go { box-sizing: border-box; max-width: 100%; }
/* (the dashboard's grid tracks never grow past the window for a wide child) */
.ds-dash { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.ds-dash > * { min-width: 0; }