/* BorDoc — Nastavení → Platba (billing). Reuses acc-* shell + tokens. */

.plex{font-family:"Roboto Mono",monospace;font-variant-numeric:tabular-nums}

/* generic card-block helpers */
.pay-card-h{font-size:15px;font-weight:500;color:var(--fg1);margin:0 0 14px}
.pay-foot{margin-top:16px}

/* current plan */
.pay-plan-row{display:flex;align-items:center;gap:11px;margin-bottom:8px}
.pay-plan-badge{font-size:12.5px;font-weight:500;color:var(--accent-text);background:var(--accent-tint);border-radius:var(--radius-full);padding:3px 11px}
.pay-plan-price{font-size:15px;color:var(--fg1)}
.pay-muted{font-size:13px;color:var(--fg3)}

/* saved card */
.pay-method{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-subtle);margin-bottom:4px}
.pay-method-ic{width:42px;height:30px;flex:none;border-radius:var(--radius-sm);background:var(--bg-surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--fg2)}
.pay-method-body{flex:1;min-width:0}
.pay-method-num{font-family:var(--font-mono);font-size:14.5px;color:var(--fg1);letter-spacing:1px}
.pay-method-exp{font-size:12.5px;color:var(--fg3);margin-top:2px}
.pay-method-brand{font-size:11px;color:var(--fg3);font-family:var(--font-sans)}
/* add/replace card modal */
.pay-cardmodal{max-width:420px}
.pay-cardlbl{display:block;font-size:12px;color:var(--fg3);margin:12px 0 5px}
.pay-cardfield{display:flex;align-items:center;gap:9px;height:42px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--fg2);font-size:14px}
.pay-cardfield .plex{font-family:var(--font-mono);letter-spacing:1px}
.pay-cardfield.sm{justify-content:center}
.pay-cardrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pay-cardnote{font-size:11.5px;color:var(--fg3);line-height:1.45;margin:14px 0 0}
.pay-cardstate{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:24px 8px}
.pay-cardstate-h{font-size:16px;font-weight:500;color:var(--fg1)}
.pay-cardstate p{font-size:13px;color:var(--fg3);margin:0;line-height:1.5}
.pay-spin{width:28px;height:28px;border:3px solid var(--border-strong);border-top-color:var(--accent);border-radius:var(--radius-full);animation:pay-spin .8s linear infinite}
@keyframes pay-spin{to{transform:rotate(360deg)}}

/* billing details */
.pay-fields{display:flex;flex-direction:column;gap:11px}
.pay-field{display:flex;gap:10px;font-size:14px;line-height:1.4}
.pay-field-k{color:var(--fg3);flex:none;min-width:120px}
.pay-field-v{color:var(--fg1)}

/* history table */
.pay-table{width:100%;border-collapse:collapse;font-size:13.5px}
.pay-table th{text-align:left;font-weight:500;color:var(--fg3);font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:0 14px 10px 0;border-bottom:1px solid var(--border)}
.pay-table th.num,.pay-table td.num{text-align:right;padding-right:18px}
.pay-table td{padding:13px 14px 13px 0;border-bottom:1px solid var(--border);color:var(--fg1);vertical-align:middle}
.pay-table tr:last-child td{border-bottom:none}
.pay-table td.num{font-family:var(--font-mono);color:var(--fg1)}
.pay-status{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--success);background:var(--success-tint);border-radius:var(--radius-full);padding:3px 10px}
.pay-status .lic{width:12px;height:12px}
.pay-status.warn{color:var(--attention-text);background:var(--attention-tint)}
.pay-status.err{color:var(--danger);background:var(--danger-tint)}
.pay-typetag{display:inline-block;font-size:11.5px;font-weight:500;color:var(--fg2);background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1px 8px}
.pay-typetag.credit{color:var(--accent-text);background:var(--accent-tint);border-color:transparent}
.pay-typetag.advance{color:var(--attention-text);background:var(--attention-tint);border-color:transparent}
.pay-typetag.tax{color:var(--success);background:var(--success-tint);border-color:transparent}
.pay-status.neutral{color:var(--fg3);background:var(--bg-subtle)}
.pay-row-storno td{color:var(--fg3)}
.pay-row-storno .plex{text-decoration:line-through}

/* DEV state switcher */
.pay-statesw{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:16px;font-size:12px}
.pay-statesw-lbl{color:var(--fg3)}
.pay-statesw button{border:1px solid var(--border-strong);background:var(--bg-surface);color:var(--fg2);border-radius:var(--radius-sm);padding:4px 10px;cursor:pointer;font-family:var(--font-sans);font-size:12px}
.pay-statesw button.on{background:var(--accent);color:var(--fg-on-accent);border-color:var(--accent)}

/* lifecycle banners */
.pay-banner{display:flex;gap:13px;padding:16px 18px;border-radius:var(--radius-lg);margin-bottom:16px;border:1px solid transparent}
.pay-banner > .lic{flex:none;margin-top:1px}
.pay-banner.grace{background:var(--attention-tint);border-color:var(--attention);color:var(--attention-text)}
.pay-banner.blocked{background:var(--danger-tint);border-color:var(--danger);color:var(--danger)}
.pay-banner-body{flex:1;min-width:0}
.pay-banner-h{font-size:15px;font-weight:500;margin-bottom:5px}
.pay-banner p{font-size:13px;line-height:1.5;color:var(--fg1);margin:0 0 8px}
.pay-banner-sub{color:var(--fg2) !important;font-size:12.5px !important}
.pay-banner .plex{font-family:var(--font-mono)}
.pay-banner-acts{margin-top:10px}
.pay-grace-meter{margin:10px 0;padding:11px 13px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md)}
.pay-grace-meter-top{display:flex;justify-content:space-between;font-size:12px;color:var(--fg2);margin-bottom:6px}
.pay-grace-bar{position:relative;height:8px;background:var(--bg-subtle);border-radius:var(--radius-full);overflow:visible}
.pay-grace-bar > span:first-child{position:absolute;left:0;top:0;bottom:0;background:var(--attention);border-radius:var(--radius-full)}
.pay-grace-cap{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--danger)}
.pay-grace-note{font-size:11.5px;color:var(--fg3);margin-top:6px}

/* auto-renew toggle row */
.pay-renew{display:flex;align-items:flex-start;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.pay-renew-text{flex:1}
.pay-renew-h{font-size:13.5px;font-weight:500;color:var(--fg1);margin-bottom:3px}
.pay-renew-text p{font-size:12.5px;color:var(--fg3);line-height:1.45;margin:0}

/* reactivation dialog */
.pay-react{max-width:460px}
.pay-react-rows{margin:14px 0;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.pay-react-row{display:flex;justify-content:space-between;padding:10px 14px;font-size:13.5px;color:var(--fg2);border-bottom:1px solid var(--border)}
.pay-react-row:last-child{border-bottom:none}
.pay-react-row .plex{font-family:var(--font-mono);color:var(--fg1)}
.pay-react-row.total{background:var(--bg-subtle);font-weight:500;color:var(--fg1)}
.pay-react-qr{display:flex;gap:16px;align-items:center;padding:14px;background:var(--bg-subtle);border-radius:var(--radius-md);margin-bottom:4px}
.pay-qr-box{flex:none;width:108px;height:108px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--fg1)}
.pay-qr-info{flex:1;min-width:0}
.pay-qr-row{display:flex;justify-content:space-between;font-size:13px;color:var(--fg2);margin-bottom:4px}
.pay-qr-row .plex{font-family:var(--font-mono);color:var(--fg1)}
.pay-muted2{color:var(--fg3)}
.pay-card-head2{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.pay-invfilter{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-md);overflow:hidden}
.pay-invfilter button{border:none;background:none;padding:5px 12px;font-size:12.5px;color:var(--fg2);cursor:pointer;font-family:var(--font-sans);border-left:1px solid var(--border)}
.pay-invfilter button:first-child{border-left:none}
.pay-invfilter button.on{background:var(--accent);color:var(--fg-on-accent);font-weight:500}
.pay-tablewrap{overflow-x:auto}
.pay-dl{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--accent-text);text-decoration:none;background:none;border:none;cursor:pointer;padding:0}
.pay-dl:hover{text-decoration:underline}
.pay-dl .lic{width:15px;height:15px}
.pay-table td.act{text-align:right}

/* payer-company subtitle under a card heading */
.pay-card-sub{font-size:13px;color:var(--fg3);line-height:1.5;margin:-8px 0 16px}

/* mild-destructive ghost button */
.btn-soft-danger{background:none;color:var(--fg2);border-color:var(--border-strong)}
.btn-soft-danger:hover{background:var(--danger-tint);color:var(--danger);border-color:var(--danger)}

/* account/subscription owner block */
.pay-owner{display:flex;align-items:center;gap:14px}
.pay-owner-av{width:42px;height:42px;flex:none;border-radius:var(--radius-full);background:var(--accent-tint);color:var(--accent-text);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500}
.pay-owner-id{flex:1;min-width:0}
.pay-owner-line{font-size:14.5px;color:var(--fg1);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pay-owner-lbl{color:var(--fg3)}
.pay-owner-name{font-weight:500}
.pay-owner-mail{font-size:13px;color:var(--fg3)}
.pay-owner-chip{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:12px;font-weight:500;color:var(--accent-text);background:var(--accent-tint);border-radius:var(--radius-full);padding:4px 11px}
.pay-owner-chip .lic{width:13px;height:13px}
.pay-owner-note{font-size:12.5px;color:var(--fg3);line-height:1.5;margin:12px 0 0}

/* withdrawal explanatory text (permanent button variant) */
.pay-wd-text{font-size:12.5px;color:var(--fg3);line-height:1.55;margin:14px 0 0;max-width:560px}

/* payments info section */
.pay-payinfo{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.pay-payinfo-h{font-size:14px;font-weight:500;color:var(--fg1);margin:0 0 8px}
.pay-payinfo p{font-size:13px;line-height:1.55;color:var(--fg2);margin:0 0 10px}
.pay-payinfo p:last-child{margin-bottom:0}

/* ---------- Transfer-role wizard ---------- */
.tr-modal{max-width:520px;max-height:90vh;display:flex;flex-direction:column}
.tr-head{padding:18px 24px 14px;border-bottom:1px solid var(--border)}
.tr-step{font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-text);margin-bottom:7px;display:flex;align-items:center;gap:10px}
.tr-dots{display:inline-flex;gap:5px}
.tr-dot{width:22px;height:4px;border-radius:var(--radius-full);background:var(--bg-subtle)}
.tr-dot.on{background:var(--accent)}
.tr-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tr-head h2{margin:0;font-size:18px;font-weight:500;color:var(--fg1);letter-spacing:var(--tracking-tight)}
.tr-x{width:32px;height:32px;flex:none;border:none;background:none;border-radius:var(--radius-sm);color:var(--fg3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.tr-x:hover{background:var(--bg-hover);color:var(--fg1)}
.tr-body{padding:18px 24px;overflow-y:auto}
.tr-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 24px 20px;border-top:1px solid var(--border)}

/* step 1 — choose person */
.tr-seg-h{font-size:13px;font-weight:500;color:var(--fg1);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.tr-seg-h .lic{width:15px;height:15px;color:var(--fg3)}
.tr-radio{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;margin-bottom:8px;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.tr-radio:hover{background:var(--bg-hover)}
.tr-radio.sel{border-color:var(--accent);background:var(--accent-tint)}
.tr-radio-dot{width:18px;height:18px;flex:none;border-radius:var(--radius-full);border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center}
.tr-radio.sel .tr-radio-dot{border-color:var(--accent)}
.tr-radio.sel .tr-radio-dot::after{content:"";width:9px;height:9px;border-radius:var(--radius-full);background:var(--accent)}
.tr-radio-body{flex:1;min-width:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tr-radio-name{font-size:14px;font-weight:500;color:var(--fg1)}
.tr-radio-mail{font-size:12.5px;color:var(--fg3)}
/* role chip (mirrors access-seats .seat-badge) */
.seat-badge{font-size:11.5px;font-weight:500;border-radius:var(--radius-full);padding:2px 10px}
.seat-badge.emp{background:var(--bg-subtle);color:var(--fg2);border:1px solid var(--border)}
.seat-badge.client{background:var(--accent-tint);color:var(--accent-text)}
.tr-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--fg3);font-size:12px}
.tr-or::before,.tr-or::after{content:"";flex:1;height:1px;background:var(--border)}

/* step 2 — seat usage */
.tr-usage{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-subtle);margin-bottom:16px}
.tr-usage-ic{width:38px;height:38px;flex:none;border-radius:var(--radius-md);background:var(--danger-tint);color:var(--danger);display:flex;align-items:center;justify-content:center}
.tr-usage-txt{font-size:15px;font-weight:500;color:var(--fg1)}
.tr-usage-dots{display:flex;gap:5px;margin-top:6px}
.tr-usage-seat{width:18px;height:8px;border-radius:var(--radius-full);background:var(--danger)}
.tr-panel{padding:16px;border:1px solid var(--attention);border-left-width:3px;border-radius:var(--radius-md);background:var(--attention-tint)}
.tr-panel.ok{border-color:var(--success);background:var(--success-tint)}
.tr-panel.ok h3{color:var(--success)}
.tr-stayleave{margin-bottom:16px}
.tr-stayleave .tr-radio{margin-bottom:8px}
.tr-panel h3{margin:0 0 8px;font-size:14px;font-weight:500;color:var(--attention-text)}
.tr-panel p{margin:0;font-size:13px;line-height:1.55;color:var(--fg2)}
.tr-panel p + p{margin-top:10px;color:var(--fg3)}

/* step 3 — confirm */
.tr-summary{padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-subtle);margin-bottom:14px}
.tr-summary-k{font-size:12px;color:var(--fg3);margin-bottom:4px}
.tr-summary-v{font-size:15px;font-weight:500;color:var(--fg1)}
.tr-summary-v .mail{font-weight:400;color:var(--fg3);font-size:13.5px;margin-left:6px}
.tr-confirm-txt{font-size:13px;line-height:1.55;color:var(--fg2);margin:0 0 16px}
.tr-checkrow{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-md);cursor:pointer}
.tr-checkrow.on{border-color:var(--accent);background:var(--accent-tint)}
.tr-checkbox{width:20px;height:20px;flex:none;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-surface);display:flex;align-items:center;justify-content:center;color:#fff;margin-top:1px}
.tr-checkbox.on{background:var(--accent);border-color:var(--accent)}
.tr-checkbox .lic{width:14px;height:14px}
.tr-checklbl{flex:1;font-size:13.5px;line-height:1.5;color:var(--fg1)}

/* post-transfer pending row on owner block */
.pay-pending{padding:14px 16px;border:1px solid var(--attention);border-left-width:3px;border-radius:var(--radius-md);background:var(--attention-tint);margin-top:4px}
.pay-pending-top{display:flex;align-items:center;gap:12px}
.pay-pending-av{width:38px;height:38px;flex:none;border-radius:var(--radius-full);background:var(--bg-surface);border:1px solid var(--border);color:var(--fg2);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500}
.pay-pending-id{flex:1;min-width:0}
.pay-pending-lbl{font-size:12px;color:var(--fg3)}
.pay-pending-name{font-size:14.5px;font-weight:500;color:var(--fg1)}
.pay-pending-sub{font-size:12.5px;color:var(--fg2);margin-top:1px}
.pay-pending-chip{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:12px;font-weight:500;color:var(--attention-text);background:var(--bg-surface);border:1px solid var(--attention);border-radius:var(--radius-full);padding:3px 11px}
.pay-pending-chip .lic{width:13px;height:13px}
.pay-pending-chip.ok{color:var(--success);border-color:var(--success)}
.pay-pending-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* ---------- Edit billing details modal ---------- */
.bill-modal{max-width:540px}
.bill-row-ids{grid-template-columns:1fr 1fr}
.acc-input.mono{font-family:var(--font-mono)}
.bill-subhead{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--fg3);margin:20px 0 12px;padding-top:16px;border-top:1px solid var(--border)}
.bill-help{display:flex;align-items:flex-start;gap:8px;margin-top:16px;font-size:12.5px;line-height:1.45;color:var(--fg3)}
.bill-help .lic{width:14px;height:14px;flex:none;margin-top:1px}