/* Page group e: customer portal, restyled like the Email Alerts page.
   Generic rules are scoped to the portal with .app:has(.side-bal) (only the customer sidebar has the balance link),
   page pieces use the .pgE-* classes so nothing here can touch the admin pages. */

/* ---------- Card bodies and headers ---------- */
.app:has(.side-bal) .ea-card>.ea-card-h+.panel-b,
.app:has(.side-bal) .ea-card>.ea-card-h+form.panel-b{padding-top:8px}
.app:has(.side-bal) .ea-card>.ea-card-h+.list,
.app:has(.side-bal) .ea-card>.ea-card-h+.table-wrap{border-top:1px solid var(--line)}
.app:has(.side-bal) .ea-card-h>div:not(.ea-h-right){flex:1 1 200px;min-width:0}
.app:has(.side-bal) .ea-card-h h2{font-weight:800;line-height:1.25}
.app:has(.side-bal) .ea-card-h p{line-height:1.4}
.app:has(.side-bal) .ea-card.empty{padding:34px 22px}
.app:has(.side-bal) .ea-card-h+.toolbar{border-top:1px solid var(--line)}
.app:has(.side-bal) .ea-card>form>.ea-card-h{border-bottom:0}
.app:has(.side-bal) .panel-h{background:transparent}
.app:has(.side-bal) .kpi .l i svg{width:17px;height:17px}
.app:has(.side-bal) .list .row .grow b{overflow-wrap:anywhere}
.pgE-clip{overflow:hidden}

/* ---------- Dashboard ---------- */
.pgE-dash{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:stretch}
.pgE-dash>.ea-card{display:flex;flex-direction:column}
.pgE-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:6px 22px 22px;flex:1}
.pgE-tile{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--surface);display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:136px;transition:border-color .15s,box-shadow .15s,transform .15s}
.pgE-tile:hover{border-color:var(--brand-line);box-shadow:var(--shadow);transform:translateY(-1px)}
.pgE-tile-t{display:flex;align-items:center;gap:12px;min-width:0}
.pgE-tile h3{font-size:15px;font-weight:700}
.pgE-ti{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);flex:none}
.pgE-ti svg{width:18px;height:18px}
.pgE-tile .big{font-family:var(--display);font-size:28px;font-weight:800;color:var(--ink);line-height:1.1;overflow-wrap:anywhere}
.pgE-tile .btn{margin-top:auto}
.pgE-due{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 14px;border:1px solid var(--gold);padding:12px 16px}
.pgE-due>span{flex:1 1 220px;min-width:0}
@media (min-width:1200px){
  .pgE-dash{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pgE-dash .pgE-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Tabs, filter chips, toolbars ---------- */
.pgE-tabs{padding:0 12px}
.pgE-chips{display:flex;gap:8px;flex-wrap:wrap;padding:14px 22px;border-bottom:1px solid var(--line)}
.pgE-chip{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-weight:600;font-size:13px;text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s}
.pgE-chip:hover{border-color:var(--brand-line);color:var(--ink)}
.pgE-chip[aria-current]{background:var(--brand-soft);border-color:var(--brand-2);color:var(--brand)}
.pgE-tb{gap:10px}
.pgE-tb .input{height:38px;width:auto;min-width:0;max-width:100%}
.pgE-tb .btn-sm{min-height:38px}
.pgE-tb .mute{font-size:13px}

/* ---------- Order progress (horizontal stepper) ---------- */
.pgE-track.steps{flex-direction:row;gap:0;padding:4px 0 0}
.pgE-track.steps li{flex:1 1 0;min-width:0;min-height:0;padding:30px 8px 0 0;font-size:12.5px}
.pgE-track.steps li::after{top:0;left:0;width:16px;height:16px}
.pgE-track.steps li::before{left:22px;right:6px;top:7px;bottom:auto;width:auto;height:2px}
.pgE-track.steps li:last-child::before{display:none}
.pgE-track.steps li b{font-size:14px}

/* ---------- Lists, amounts, small helpers ---------- */
.pgE-row{flex-wrap:wrap}
.pgE-row .grow{flex:1 1 200px}
.pgE-top{align-items:flex-start}
.pgE-amt{font-family:var(--display);font-size:18px;font-weight:800;color:var(--ink)}
.pgE-gap8{gap:8px}.pgE-gap10{gap:10px}.pgE-gap12{gap:12px}.pgE-gap14{gap:14px}
.pgE-aside{align-content:start}
.pgE-aside1{align-self:start}
.pgE-due-card{border-color:var(--gold)}
.pgE-payon{border-bottom:1px solid var(--line)}
.pgE-or{padding-bottom:0}
.pgE-f{justify-content:flex-end}
.pgE-upl{border-top:1px solid var(--line);gap:10px}
.pgE-sub{padding-top:14px;border-top:1px solid var(--line)}
.input.pgE-file{height:auto;min-height:44px;padding:8px;max-width:100%}
.pgE-kpi-a{text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.pgE-kpi-a:hover{border-color:var(--brand-line)}
.kpi .v.pgE-v-sm{font-size:16px;font-weight:700}

/* Token order: one row per token */
.pgE-tok{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,.7fr) minmax(0,.9fr) minmax(0,1fr) auto;gap:10px;align-items:end}
.pgE-tok .icon-btn{margin-bottom:2px}

/* ---------- Tablet ---------- */
@media (max-width:1023px){
  .pgE-dash{gap:16px}
  .app:has(.side-bal) .ea-card-h{padding:16px 18px}
}

/* ---------- Phone ---------- */
@media (max-width:640px){
  .app:has(.side-bal) .page-head{align-items:stretch}
  .app:has(.side-bal) .page-head .row-actions{width:100%}
  .app:has(.side-bal) .page-head .row-actions .btn{flex:1 1 auto}
  .app:has(.side-bal) .ea-card-h{padding:14px 16px;gap:12px}
  .app:has(.side-bal) .ea-card-h h2{font-size:16px}
  .app:has(.side-bal) .ea-ic{width:36px;height:36px}
  .app:has(.side-bal) .ea-card>.ea-card-h+.panel-b,
  .app:has(.side-bal) .ea-card>.ea-card-h+form.panel-b{padding:6px 16px 18px}
  .app:has(.side-bal) .ea-card .panel-b{padding-left:16px;padding-right:16px}
  .app:has(.side-bal) .ea-card-f{padding:14px 16px}
  .app:has(.side-bal) .list .row{padding:12px 16px}
  .app:has(.side-bal) .toolbar{padding:12px 16px}
  .app:has(.side-bal) .tfoot{padding:12px 16px}
  .app:has(.side-bal) th,.app:has(.side-bal) td{padding-left:14px;padding-right:14px}
  .app:has(.side-bal) .dl{grid-template-columns:minmax(92px,max-content) minmax(0,1fr);gap:8px 12px}
  .app:has(.side-bal) .kpi{padding:14px 16px}
  .pgE-grid{grid-template-columns:minmax(0,1fr);padding:4px 16px 18px}
  .pgE-tile{min-height:0}
  .pgE-chips{flex-wrap:nowrap;overflow-x:auto;padding:12px 16px;scrollbar-width:none}
  .pgE-tb .input,.pgE-tb select{flex:1 1 140px}
  .pgE-tb .btn-sm{flex:0 0 auto}
  .pgE-f .btn{width:100%}
  .pgE-due>.btn{flex:0 0 auto}
  .pgE-track.steps li{padding-right:4px;font-size:11.5px}
  .pgE-track.steps li b{font-size:12.5px}
  .pgE-tok{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
  .pgE-tok>.field:first-child{grid-column:1/-1}
  .pgE-tok .icon-btn{grid-column:1/-1;justify-self:end;margin:0}
  .pgE-tok>.field:nth-child(4){grid-column:1/-1}
  .pgE-amt{font-size:16px}
  .app:has(.side-bal) .form-grid>.field:empty{display:none}
}

/* Tables inside portal cards: keep order numbers and payment tags on one line */
.app:has(.side-bal) td a.link.num,.app:has(.side-bal) td .tag{white-space:nowrap}

/* Header icon stays at the top when the subtitle runs to several lines; empty spacer fields disappear on one-column forms */
.app:has(.side-bal) .ea-card-h{align-items:flex-start}
.app:has(.side-bal) .ea-card-h .ea-h-right{align-self:center}

/* ---------- Order pages: sticky payment / summary box ---------- */
.pgE-sticky{align-self:start;position:sticky;top:84px;max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain}
@media (max-width:1180px){.pgE-sticky{position:static;max-height:none;overflow:visible}}

/* Order summary lines: name, qty x unit price, line total */
.pgE-sum{display:flex;flex-direction:column;gap:10px}
.pgE-line{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px dashed var(--line)}
.pgE-line-n{min-width:0;display:flex;flex-direction:column;gap:2px}
.pgE-line-n b{font-weight:600;color:var(--ink);overflow-wrap:anywhere;font-size:14px}
.pgE-line-n small{color:var(--mute);font-size:12.5px}
.pgE-line>b.num{flex:none;white-space:nowrap;color:var(--ink);font-size:14px}
.pgE-row2{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--text)}
.pgE-row2 .num{white-space:nowrap;color:var(--ink);font-weight:600}
.pgE-total{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:4px}
.pgE-total span{display:flex;flex-direction:column;font-weight:800;color:var(--ink);font-size:15px}
.pgE-total small{font-weight:400;color:var(--mute);font-size:12px}
.pgE-total b{font-family:var(--display);font-size:22px;font-weight:800;color:var(--ink);white-space:nowrap}
.pgE-addr{align-items:flex-start;gap:12px;flex-wrap:wrap}
.pgE-addr b{display:flex;align-items:center;gap:8px}
.pgE-addr small{display:block}
.pgE-addr-act{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pgE-addr-act form{margin:0}

/* DSC order and Bulk DSC: the same compact row as the Token order page (certificate, quantity, price, years, total) */
.pgE-cert{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,.7fr) minmax(0,.9fr) minmax(0,.8fr) minmax(0,1fr);gap:10px;align-items:end}
.pgE-cert .field[hidden]{display:none}
@media (max-width:1180px){.pgE-cert{grid-template-columns:repeat(2,minmax(0,1fr))}.pgE-cert>.field:first-child{grid-column:1/-1}}

/* ---------- DSC order rules (client change list B1-B6) ---------- */
/* Admin product form: price of ONE certificate for each validity */
.pgE-yp{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.pgE-yp>div{display:flex;flex-direction:column;gap:5px;min-width:0}
.pgE-yp label{font-size:12.5px;font-weight:600;color:var(--ink)}
@media (max-width:900px){.pgE-yp{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.pgE-yp{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* "Purpose for: Other" shows the purpose and the website link side by side */
.pgE-other{margin-top:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.pgE-other[hidden]{display:none}
@media (max-width:640px){.pgE-other{grid-template-columns:minmax(0,1fr)}}
/* Wallet + pay the rest directly: the choice and the note above the payment fields */
[data-hybrid-opt][hidden]{display:none!important}
[data-hybrid-pay]{overflow-wrap:anywhere}
[data-hybrid-pay][hidden]{display:none}
.upl-msg{overflow-wrap:anywhere}

/* ---------- Checkout, exactly two cards (Wallet / Direct payment): portal order forms and the website ----------
   Partial: portal/partials/pay-choice.blade.php (prefix pcx-). The portal look reuses .choice; the website look reuses .sx-tile (shop.css, scoped under .sx).
   Colours fall back from the panel tokens to the shop tokens, so one set of rules serves both.
   The Wallet card turns into the client's HYBRID payment ("Wallet Rs w + pay the remaining Rs X directly") while the wallet is short of the total:
   the .pcx-hy block (split + note) and the direct-payment fields then show for X only. */
.pcx .pcx-card>span>b{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.pcx .pcx-card small{display:block;margin-top:4px;line-height:1.45}
.pcx .pcx-card small b{display:inline}
.pcx .pcx-card.pcx-off{opacity:.62;cursor:not-allowed;background:var(--surface-2)}
.pcx .pcx-card.pcx-off:has(input:checked){border-color:var(--line);background:var(--surface-2)}
.pcx-short{flex-direction:column;align-items:flex-start;gap:8px;line-height:1.45}
.pcx-short b{color:var(--gold-ink);display:inline}
.pcx-short .btn{align-self:flex-start}
.pcx-hy{gap:12px}
.pcx-hynote{line-height:1.45;overflow-wrap:anywhere}
.pcx-hynote b{color:var(--gold-ink);display:inline}
/* the split of a hybrid order: three lines, this order = from the wallet + paid directly */
.pcx-split{display:grid;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface,#fff)}
.pcx-split>div{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;padding:8px 12px;border-top:1px solid var(--line);min-width:0}
.pcx-split>div:first-child{border-top:0}
.pcx-split small{color:var(--mute);font-size:13px;line-height:1.35;min-width:0}
.pcx-split b{font-family:var(--display,inherit);font-size:16px;font-weight:800;color:var(--ink);white-space:nowrap;text-align:right}
.pcx-split .pcx-split-x{background:var(--gold-soft,#fff8e6)}
.pcx-split .pcx-split-x small{color:var(--gold-ink)}
.pcx-adv{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 14px;border:1px dashed var(--line);border-radius:10px;font-size:13px;color:var(--text);line-height:1.45}
.pcx-adv b{color:var(--ink)}
.pcx-adv>span{flex:1 1 220px;min-width:0}
.pcx-err{margin:6px 0 0;color:var(--bad);font-weight:600}
.pcx-direct{gap:14px;margin-top:2px}
.pcx-direct .pcx-bank{gap:14px}
/* the fields sit beside each other only where there is room (the order page's side card is narrow): method, UTR, paid on */
.pcx-direct .form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.pcx-direct .form-grid>.field{min-width:0}
.pcx-upload{cursor:pointer;align-items:flex-start}
.pcx-upload input[type=file]{width:100%}
.pcx-online{align-items:center;line-height:1.45}
.pcx-via small{display:block;margin-top:2px}

/* "What happens next": the numbered steps of the state on screen (wallet, wallet + the rest, or direct payment) */
.pcx-next{border:1px solid var(--line);border-radius:12px;background:var(--surface-2,var(--bg));padding:12px 14px;display:grid;gap:10px;margin-top:2px}
.pcx-next-h{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pcx-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pcx-steps[hidden]{display:none}
.pcx-steps li{display:flex;gap:12px;align-items:flex-start}
.pcx-steps i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--brand,var(--g6));color:#fff;font:700 12px/1 Inter,system-ui,sans-serif;font-style:normal;flex:none}
.pcx-steps b{display:block;color:var(--ink);font-size:13.5px;font-weight:600;line-height:1.4}
.pcx-steps small{display:block;color:var(--mute);font-size:12.5px;margin-top:2px;line-height:1.4}
.pcx-steps small[hidden]{display:none}

/* Website tiles */
.sx .pcx-tiles .sx-tile .txt>b{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.sx .pcx-tiles .sx-tile small b{display:inline;font-size:inherit}
.sx .pcx-pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.sx .pcx-pill.is-ok{background:var(--ok-0);color:var(--ok)}
.sx .pcx-pill.is-warn{background:var(--gold-0);color:var(--gold-ink)}
.sx .pcx-tag{display:inline-block;padding:1px 8px;border-radius:6px;background:var(--bg);border:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--mute)}
.sx .pcx-card.pcx-off{opacity:.62;cursor:not-allowed;background:var(--bg)}
.sx .pcx-card.pcx-off:has(input:checked){border-color:var(--line-2);background:var(--bg);box-shadow:none}
.sx .pcx-card.pcx-off .radio{opacity:.4}
.sx .pcx-short{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:14px;background:var(--gold-0);border:1px solid #f1d58a;color:var(--gold-ink);font-size:14px;line-height:1.45}
.sx .pcx-short[hidden]{display:none}
.sx .pcx-adv{margin-top:14px;padding:12px 16px;border-radius:14px;border:1px dashed var(--line-2);background:#fff;font-size:14px}
.sx .pcx-err{margin:12px 0 0;font-size:14px}
.sx .pcx-hy{display:flex;flex-direction:column;gap:12px}
.sx .pcx-hynote{padding:12px 14px;border-radius:12px;background:var(--gold-0);border:1px solid #f1d58a;color:var(--gold-ink);font-size:14px;line-height:1.5}
.sx .pcx-split{background:#fff;border-radius:12px}
.sx .pcx-split>div{padding:10px 14px}
.sx .pcx-split small{font-size:14px}
.sx .pcx-split b{font-family:var(--head,inherit);color:var(--ink)}
.sx .pcx-split .pcx-split-x{background:var(--gold-0)}
.sx .pcx-via{margin-bottom:0}
.sx .pcx-bank{display:flex;flex-direction:column;gap:16px}
.sx .pcx-online{padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--text);font-size:14px;line-height:1.5}
.sx .pcx-next{margin-top:16px;border-radius:16px;padding:14px 18px;background:var(--bg)}
.sx .pcx-steps i{background:var(--g6)}
@media (max-width:640px){
  .pcx-adv .btn,.sx .pcx-adv .sx-btn{width:100%}
  .sx .pcx-short .sx-btn{width:100%}
}
/* ---------- DSC order: compact applicant card (client: "as compact as possible") ----------
   One grid of short fields (3 columns, 2 on a narrow card, 1 on a phone), one row of small upload tiles, the optional rest folded under "More details". */
.ea-card.pgE-cmp>.ea-card-h,.app:has(.side-bal) .ea-card.pgE-cmp>.ea-card-h{padding:11px 16px;gap:10px;flex-wrap:nowrap;align-items:center}
.ea-card.pgE-cmp>.ea-card-h>div:not(.ea-h-right){flex:1 1 auto;min-width:0}
.ea-card.pgE-cmp .ea-card-h h2{font-size:15px;line-height:1.25}
.ea-card.pgE-cmp .ea-ic,.app:has(.side-bal) .ea-card.pgE-cmp .ea-ic{width:28px;height:28px;border-radius:8px;font-size:13px}
.ea-card.pgE-cmp .ea-ic svg{width:16px;height:16px}
.ea-card.pgE-cmp>.ea-card-h .ea-h-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none;width:auto}
.ea-card.pgE-cmp>.panel-b,.app:has(.side-bal) .ea-card.pgE-cmp>.ea-card-h+.panel-b{padding:12px 16px 16px}
.pgE-cmp .field{gap:4px;min-width:0}
.pgE-cmp .field label{font-size:12.5px;line-height:1.3}
.pgE-cmp .input,.pgE-cmp select.input{height:38px}
.pgE-cmp textarea.input{height:auto;min-height:60px}
.pgE-pl{display:block}
.pgE-sm{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pgE-qnote{margin-bottom:12px;padding:9px 12px;font-size:12.5px}
.pgE-qnote[hidden]{display:none}

.pgE-apb{container-type:inline-size;container-name:pgeap;min-width:0}
.pgE-ap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px;align-items:start}
.pgE-ap-grid .pgE-full{grid-column:1/-1}
.pgE-other{display:contents}
.pgE-other[hidden]{display:none}
@container pgeap (max-width:499px){.pgE-ap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pgE-ap-grid{grid-template-columns:minmax(0,1fr)}}
.pgE-pf{display:inline-grid;vertical-align:-2px;margin-left:3px;color:var(--ok)}
.pgE-pf svg{width:13px;height:13px;stroke-width:2.4}

/* Upload tiles: PAN card, Aadhaar card, Photo and the type's extra document, one small tile each */
.pgE-dts{display:grid;grid-template-columns:repeat(var(--tc,3),minmax(0,1fr));gap:10px;margin-top:14px}
.pgE-dts[hidden]{display:none}
@container pgeap (max-width:479px){.pgE-dts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pgE-dts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pgE-dt{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:10px;row-gap:1px;align-content:start;align-items:start;padding:10px 12px;border:1.5px dashed var(--brand-line);border-radius:12px;background:var(--surface-2);min-width:0;cursor:pointer;transition:border-color .15s,background .15s}
.pgE-dt:hover{border-color:var(--brand-2)}
.pgE-dt:has(.pgE-dt-in:focus-visible){outline:2px solid var(--brand-2);outline-offset:2px}
.pgE-dt-ic{grid-row:1/3;grid-column:1;width:34px;height:34px;border-radius:9px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;overflow:hidden}
.pgE-dt-ic i{grid-area:1/1;display:grid;place-items:center;font-style:normal}
.pgE-dt-ic svg{width:18px;height:18px}
.pgE-dt-ic .t-ok,.pgE-dt-ic .t-pdf{display:none}
.pgE-dt-ic .t-pdf{font-size:10.5px;font-weight:800;letter-spacing:.03em}
.pgE-dt-ic .t-img{grid-area:1/1;width:100%;height:100%;object-fit:cover}
.pgE-dt-t{grid-column:2;min-width:0;font-size:12.5px;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.pgE-dt-t b{font-weight:700}
.pgE-dt-s{grid-column:2;min-width:0;font-size:11.5px;line-height:1.35;color:var(--mute);overflow-wrap:anywhere}
.pgE-dt-s a{color:var(--brand-2);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.pgE-ok{color:var(--ok);font-weight:700}
.pgE-dt-s.s-file{display:none}
.pgE-dt-a{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px}
.pgE-pick{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border:1px solid var(--brand-line);border-radius:7px;background:var(--surface);color:var(--brand-2);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.pgE-pick:hover{border-color:var(--brand-2)}
.pgE-pick .p-chg{display:none}
.pgE-rm{display:inline-grid;place-items:center;width:26px;height:26px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--mute);cursor:pointer;padding:0}
.pgE-rm[hidden]{display:none}
.pgE-rm:hover{border-color:var(--bad);color:var(--bad)}
.pgE-rm svg{width:13px;height:13px}
.pgE-dt-in{position:absolute;left:14px;bottom:8px;width:1px;height:1px;opacity:0;pointer-events:none}
.pgE-dt>.fmt-err,.pgE-dt>.upl-msg{grid-column:1/-1;margin-top:6px}
/* the customer's Profile & KYC already has it: green tick, "On file - view" */
.pgE-dt.is-onfile{border-style:solid;border-color:var(--ok);background:var(--ok-soft)}
.pgE-dt.is-onfile .t-up{display:none}
.pgE-dt.is-onfile .t-ok{display:grid}
.pgE-dt.is-onfile .pgE-dt-ic{background:var(--ok);color:#fff}
/* a file was chosen: thumbnail (or PDF), name and size, remove */
.pgE-dt.has-file{border-style:solid;border-color:var(--brand-2);background:var(--surface)}
.pgE-dt.has-file .t-up,.pgE-dt.has-file .t-ok{display:none}
.pgE-dt.has-file.is-pdf .t-pdf{display:grid}
.pgE-dt.has-file .pgE-dt-ic{background:var(--brand-soft);color:var(--brand)}
.pgE-dt.has-file .s-idle{display:none}
.pgE-dt.has-file .s-file{display:block;color:var(--ink)}
.pgE-dt.has-file .pgE-pick .p-new{display:none}
.pgE-dt.has-file .pgE-pick .p-chg{display:inline}
.pgE-dt.is-drag{border-color:var(--brand-2);background:var(--brand-soft)}
.pgE-dt:has(.pgE-dt-in.is-bad){border-color:var(--bad);background:var(--bad-soft)}

/* Optional extras */
.pgE-more{margin-top:12px;border-top:1px dashed var(--line);padding-top:6px}
.pgE-more[hidden]{display:none}
.pgE-more>summary{display:inline-flex;align-items:center;gap:7px;padding:5px 0;cursor:pointer;list-style:none;font-size:13px;font-weight:700;color:var(--brand-2);user-select:none}
.pgE-more>summary::-webkit-details-marker{display:none}
.pgE-more>summary::before{content:"+";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;background:var(--brand-soft);font-size:15px;line-height:1;font-weight:700}
.pgE-more[open]>summary::before{content:"\2212"}
.pgE-more>summary .opt{font-weight:400;color:var(--mute)}
.pgE-more-b{display:flex;flex-direction:column;gap:12px;padding-top:8px}
.pgE-more-b .pgE-dts{margin-top:0}

/* "All set - place your order" cue above the Place order button */
.pgE-ready{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--mute)}
.pgE-ready[hidden]{display:none}
.pgE-ready i{display:none;font-style:normal;color:var(--ok)}
.pgE-ready i svg{width:15px;height:15px}
.pgE-ready.is-ok{color:var(--ok)}
.pgE-ready.is-ok i{display:inline-grid}
.pgE-fmt{font-size:11.5px;font-weight:700;color:var(--brand-2);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

/* Phone: slimmer upload tiles so two fit a row and the title stays on its line */
@media (max-width:640px){
  .pgE-dt{grid-template-columns:28px minmax(0,1fr);column-gap:8px;padding:9px 10px}
  .pgE-dt-ic{width:28px;height:28px;border-radius:8px}
  .pgE-dt-ic svg{width:16px;height:16px}
}

/* Phone / small tablet: slim bar with the total and "Place order" while the real button is out of sight (DSC order) */
.pgE-bar{display:none}
@media (max-width:1023px){
  form[data-dsc-order]{padding-bottom:84px}
  .pgE-bar:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgb(15 31 27/.1);transition:transform .2s}
  .pgE-bar.is-off{transform:translateY(115%);pointer-events:none}
  .pgE-bar-t{display:flex;flex-direction:column;line-height:1.15;min-width:0}
  .pgE-bar-t small{font-size:11.5px;color:var(--mute)}
  .pgE-bar-t b{font-family:var(--display);font-size:19px;font-weight:800;color:var(--ink);white-space:nowrap}
  .pgE-bar .btn{flex:0 1 190px;min-height:42px}
}
/* One-line labels in the applicant grid (the inputs of a row stay level); a long label is cut with "..." and shows in full on hover, the * stays visible */
.pgE-ap-grid .field>label{display:flex;align-items:baseline;gap:4px;min-width:0;white-space:nowrap}
.pgE-ap-grid .field>label>.pgE-lt{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pgE-ap-grid .field>label>:not(.pgE-lt){flex:none}
/* "i" on a tile opens the help line the form builder holds for that document */
.pgE-i{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:2px;padding:0;border:1px solid var(--brand-line);border-radius:50%;background:var(--surface);color:var(--brand-2);font:italic 700 10.5px/1 Georgia,serif;cursor:pointer;vertical-align:1px}
.pgE-i:hover,.pgE-i[aria-expanded="true"]{background:var(--brand-2);border-color:var(--brand-2);color:#fff}
.pgE-dt-h{grid-column:1/-1;margin-top:7px;padding-top:7px;border-top:1px dashed var(--brand-line);font-size:11.5px;line-height:1.4;color:var(--text)}
.pgE-dt-h[hidden]{display:none}
.pgE-nw{white-space:nowrap}
.pgE-dt-a{flex-wrap:wrap}

/* Whose papers: "On file - view" / "Choose file" follow the applicant typed in the card (order-fields script flips .is-onfile when the PAN / organisation changes) */
.pgE-dt .s-on,.pgE-dt .p-on{display:none}
.pgE-dt.is-onfile .s-on,.pgE-dt.is-onfile .p-on{display:inline}
.pgE-dt.is-onfile .s-off,.pgE-dt.is-onfile .p-off{display:none}
.pgE-dt.is-onfile .pgE-fmt{display:none}
.pgE-kychint{margin:8px 0 0}
.pgE-kychint[hidden]{display:none}