@import url('/fonts.css');
:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#183e35;background:#f4f6f3;font-synthesis:none;font-size:14px;--green:#0e654b;--muted:#74837d;--border:#e3e9e3}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}[hidden]{display:none!important}header{height:76px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1250px)/2))}.brand{font-size:26px;font-weight:800;letter-spacing:-1px;display:flex;align-items:center;gap:3px}.brand>span{color:white;background:var(--green);border-radius:5px;padding:0 3px}.brand i{height:23px;width:1px;background:var(--border);margin:0 18px}.brand small{font-size:10px;font-weight:650;letter-spacing:2px;color:#6b7e72}.header-right{display:flex;align-items:center;gap:15px}.badge{background:#eaf3ec;padding:7px 11px;border-radius:20px;font-size:11px;font-weight:600}.badge.demo{background:#fff1d9;color:#976322}.quiet{border:1px solid var(--border);background:white;border-radius:8px;padding:9px 12px;font-size:12px;display:inline-flex;align-items:center;justify-content:center}.quiet:hover{border-color:#699880;background:#f6faf7}.primary{width:100%;border:0;background:var(--green);color:white;padding:14px 17px;border-radius:10px;display:flex;justify-content:space-between;align-items:center;font-weight:600}.primary:hover{background:#084c37}.primary span{font-size:18px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:#7b8f7a}h1{font-size:25px;letter-spacing:-.6px;margin:8px 0 6px;line-height:1.3}h2{font-size:16px;letter-spacing:-.2px;margin:0}p{color:var(--muted);line-height:1.6;margin:6px 0 0}main{max-width:1250px;margin:35px auto;padding:0 24px}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.page-heading p{font-size:13px}.today{text-align:right;display:grid;gap:7px}.today>span{font-size:12px;color:var(--muted)}.today small{font-size:11px}.today strong{font-size:26px;font-weight:650;letter-spacing:-.7px}.workspace{display:grid;grid-template-columns:390px minmax(0,1fr);gap:25px;align-items:start}.card{background:#fff;border:1px solid var(--border);border-radius:16px}.order-form{padding:23px}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.step-tag{font-size:9px;letter-spacing:1px;color:#91a095}label{display:block;font-size:12px;font-weight:600;margin:0 0 17px;color:#355349}input,select{width:100%;border:1px solid #dce4dd;border-radius:8px;padding:12px;margin-top:7px;background:#fcfdfb;color:#25463d;outline:none;min-height:43px}input::placeholder{color:#acb7af;font-weight:400}input:focus,select:focus{border-color:#378667;box-shadow:0 0 0 3px #0e654b12}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #76ad95;outline-offset:3px}.fields{display:flex;gap:13px}.fields label{flex:1}.fields .quantity{flex:0 0 94px}details{border-top:1px dashed var(--border);border-bottom:1px dashed var(--border);padding:15px 0;margin:7px 0 20px}summary{font-size:12px;cursor:pointer;font-weight:600}summary span{float:right;font-size:10px;font-weight:400;color:var(--muted)}details p{margin:12px 0 16px}.help{font-size:11px;color:var(--muted)}.totals{display:grid;gap:12px;margin:0 0 20px}.totals>div{display:flex;justify-content:space-between;font-size:12px;color:#6b7d73}.totals b{font-weight:500;color:#345449}.totals .grand{padding-top:14px;border-top:1px solid var(--border);align-items:center;color:#254b3b;font-weight:600}.grand strong{font-size:23px;letter-spacing:-.5px}.form-note{font-size:10px;text-align:center;margin-top:13px}.error{color:#ad382c;font-size:12px}.error:empty{display:none}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px;font-size:12px;color:#64796b;min-height:35px}.preview-toolbar>div{display:flex;gap:6px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#21865a;margin-right:7px}.payment-screen{min-height:550px;background:#fff;border:1px solid #dce6da;border-radius:18px;box-shadow:0 7px 24px #1e422b04;overflow:hidden;position:relative}.empty{display:flex;min-height:550px;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:radial-gradient(ellipse at 50% 35%,#edf6e6,transparent 60%)}.empty-symbol{font-size:36px;font-weight:300;border:1px solid #d7e4d1;outline:12px solid #f5f9f0;border-radius:24px;width:78px;height:78px;display:grid;place-items:center;margin:0 0 33px;color:#80a071;background:#edf4e7}.empty h2{font-size:22px;font-weight:600}.empty p{font-size:13px;margin-top:12px}.flow{display:flex;gap:14px;margin-top:50px;font-size:10px;color:#82927d}.flow i{font-style:normal;color:#b6c3ae}.trust-strip{display:flex;justify-content:center;gap:25px;font-size:10px;color:#889880;padding:17px}.history{margin-top:28px;padding:23px}.history .section-title{margin-bottom:15px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}th{font-size:10px;color:#91a095;font-weight:500;padding:10px 12px;background:#f8faf6}td{padding:15px 12px;border-bottom:1px solid #eef1eb}td small{display:block;font-size:10px;color:#92a090;margin-top:5px}.status{display:inline-block;padding:5px 8px;border-radius:5px;font-size:10px;white-space:nowrap;background:#f1f3ee;color:#7d8774}.status.paid{background:#e8f5ec;color:#237244}.status.pending{background:#fff3db;color:#a47a2a}.status.unknown{background:#fff0ea;color:#ae6946}.table-empty{text-align:center;padding:35px;color:#92a08e}.ticket{text-align:center;padding:28px 30px}.ticket-top{display:flex;justify-content:space-between;align-items:center;color:#8d9b87;font-size:10px;margin-bottom:22px}.ticket h2{font-size:18px;font-weight:600}.amount{font-size:36px;font-weight:650;letter-spacing:-1.2px;margin:10px 0 18px;color:#124d38}.qr-frame{width:248px;margin:0 auto 17px;padding:10px;border:1px solid #dfe9d8;border-radius:16px;background:white;box-shadow:0 3px 15px #2e583408}.qr-frame img{display:block;width:100%;aspect-ratio:1}.ticket .instruction{font-size:12px;max-width:360px;margin:0 auto 15px}.bank-info{font-size:12px;line-height:1.9;color:#5b725d}.bank-info strong{color:#264e3a}.reference{font-family:monospace;letter-spacing:1px}.ticket .waiting{display:inline-flex;gap:8px;align-items:center;background:#f2f7eb;border-radius:20px;padding:8px 15px;color:#6f875c;font-size:11px;margin-top:18px}.pulse{width:6px;height:6px;border-radius:100%;background:#73a652;animation:pulse 1.5s infinite}@keyframes pulse{50%{opacity:.3}}.ticket-actions{margin-top:18px;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.ticket-actions a{font-size:11px}.success-mark{width:64px;height:64px;background:#e5f4e6;color:#2d8152;border-radius:50%;display:grid;place-items:center;font-size:30px;margin:25px auto 20px}.paid-ticket{background:linear-gradient(#f5fbf1,#fff 50%)}.invoice-box{background:#f7f9f4;border:1px solid #e5ecdf;border-radius:12px;padding:18px;margin:25px auto 0;max-width:460px}.invoice-box h3{font-size:13px;margin:0 0 7px}.invoice-box p{font-size:12px}.invoice-ready{display:flex;gap:18px;align-items:center;text-align:left}.receipt-qr{width:90px;height:90px}.invoice-box .quiet{margin-top:10px}.pdf-view{width:100%;height:600px;border:1px solid var(--border);border-radius:12px;margin-top:15px}.demo-line{color:#a7782c;background:#fff5dd;font-size:11px;padding:10px;border-radius:8px;margin:15px 0}.customer-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}#customer{max-width:820px;margin-top:28px}#customer .ticket{padding:30px 40px}#customer .qr-frame{width:300px}#customer .amount{font-size:42px}.customer-footer{text-align:center;font-size:11px;margin:18px 0}footer{text-align:center;color:#9ca999;font-size:10px;padding:15px 20px 28px}footer span{padding:0 7px}#notice{background:#fff4de;color:#865c19;padding:12px 24px;text-align:center;font-size:12px}#login{display:grid;grid-template-columns:1fr 1fr;max-width:1000px;min-height:500px;margin-top:65px;gap:0}.login{padding:55px 42px;border-radius:18px 0 0 18px}.login h1{font-size:26px;margin-top:20px}.login>p{font-size:13px;margin-bottom:32px}.login-art{background:#114d3c;border-radius:0 18px 18px 0;padding:48px;color:#fff;position:relative;overflow:hidden}.art-label{font-size:10px;letter-spacing:2px;color:#b9d5b2}.login-art h2{font-size:38px;font-weight:500;line-height:1.3;letter-spacing:-1px;margin:42px 0 20px;position:relative;z-index:1}.login-art p{color:#b7cebb;font-size:12px}.art-ring{width:290px;height:290px;border:50px solid #266450;border-radius:100%;position:absolute;right:-160px;bottom:-60px}.login form{position:relative;z-index:1}@media(min-width:1500px){main{margin-top:45px}}@media(max-width:900px){.workspace{grid-template-columns:330px minmax(0,1fr);gap:18px}.preview-toolbar{align-items:flex-start;flex-direction:column}.ticket{padding:20px 15px}.flow{gap:7px;font-size:9px}.trust-strip{gap:10px;flex-wrap:wrap}.order-form{padding:18px}}@media(max-width:700px){header{padding:0 18px;height:65px}.brand{font-size:22px}.brand small{font-size:8px;letter-spacing:1px}.brand i{margin:0 10px}.badge{font-size:9px}.header-right{gap:8px}main{padding:0 15px;margin:25px auto}.page-heading{gap:15px;align-items:flex-start}.page-heading h1{font-size:21px}.page-heading p{font-size:11px;max-width:230px}.today strong{font-size:20px}.today>span{font-size:10px}.today small{display:block;margin-top:4px}.workspace{grid-template-columns:1fr}.preview-toolbar{flex-direction:row;align-items:center;flex-wrap:wrap}.payment-screen,.empty{min-height:470px}.history{padding:17px;margin-top:18px}.ticket{padding:23px 17px}.amount{font-size:32px}.trust-strip{font-size:9px}#customer .ticket{padding:25px 16px}#customer .qr-frame{width:min(280px,85%)}#customer .amount{font-size:36px}#login{display:block;margin-top:35px}.login{border-radius:16px;padding:30px 25px}.login-art{display:none}.invoice-ready{gap:10px}.receipt-qr{width:75px;height:75px}.pdf-view{height:430px}footer{font-size:9px}}

.payer-info{max-width:460px;margin:20px auto;text-align:left;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:12px 0}.payer-info>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:6px 0;font-size:12px}.payer-info dt{color:var(--muted);flex-shrink:0}.payer-info dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}

/* Event counter layout */
:root{color:#132d45;background:#f3faf7;--green:#00634e;--muted:#6d849c;--border:#dfe8ed}
body{background:radial-gradient(ellipse at 10% 15%,#e6f5ee 0,transparent 44%),radial-gradient(ellipse at 95% 22%,#e2f6ed 0,transparent 40%);min-height:100vh}
header{height:72px;background:#ffffffeb;border-bottom:0;padding-inline:max(24px,calc((100vw - 1270px)/2))}.brand{color:#005f4b;font-size:28px}.brand small{color:#6d829b}
main{max-width:1320px}.page-heading{gap:24px;margin-bottom:28px}.page-heading h1{font-size:28px;color:#112d44;font-weight:750}.eyebrow{color:#0d604f}.page-heading p{color:#67829b}
.summary-cards{display:flex;gap:14px;margin-left:auto}.summary-card{display:flex;align-items:center;gap:15px;min-width:170px;background:#ffffffed;border:1px solid #eaf1f3;padding:17px 20px;border-radius:11px;box-shadow:0 6px 24px #174c3603}.summary-card>div{display:grid;gap:7px}.summary-card>div>span{font-size:12px;color:#6d849c}.summary-card strong{font-size:24px;letter-spacing:-.6px}.summary-card:last-child strong{color:var(--green)}.summary-card b{font-weight:inherit}.event-slogan{font-family:Georgia,serif;font-style:italic;color:var(--green)!important;text-align:center;max-width:160px;font-size:15px!important;transform:rotate(-7deg)}
.section-icon{display:inline-grid;place-items:center;background:#eaf7f0;color:#00634e;width:36px;height:36px;border-radius:10px;font-size:23px;flex-shrink:0}.section-title h2,.preview-toolbar h2{display:flex;align-items:center;gap:13px;color:#122d46;font-size:17px}.section-title{margin-bottom:22px}.step-tag{font-size:11px;letter-spacing:.3px;color:#718ba6}
.workspace{grid-template-columns:400px minmax(0,1fr);gap:16px;align-items:stretch}.card{border:1px solid #edf3f2;border-radius:14px;box-shadow:0 7px 25px #1f574a04}.order-form{padding:23px}.order-form label{font-size:13px;font-weight:500;color:#1b3551}.order-form input,.order-form select{background:#f7fafb;border-color:#d9e5ed;color:#16344e;min-height:44px;padding:11px 14px}.fields .quantity{flex:0 0 38%}.order-form details{border-color:#cfdee6;padding:19px 0}.order-form summary{font-size:13px;color:#193751}.order-form summary span{font-size:11px}
.totals{gap:0;background:#f7fafb;border:1px solid #e3edf0;border-radius:10px;overflow:hidden}.totals>div{padding:11px 14px;font-size:13px;color:#607e98}.totals .grand{background:#edf7f2;padding:15px 14px;border-color:#e1eeeb;color:#005b48;font-size:15px}.grand strong{font-size:26px}.primary{background:linear-gradient(110deg,#006e54,#005442);min-height:56px;border-radius:8px;font-size:15px}.form-note{font-size:11px;color:#7890a5}
.preview-column{padding:16px 16px 0;background:#fff;border:1px solid #edf3f2;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}.preview-toolbar{margin-bottom:14px;flex-wrap:wrap;gap:10px}.preview-toolbar h2{font-size:16px;gap:10px}.preview-toolbar .quiet{font-size:11px;padding:10px}.quiet{border-color:#d9e4ed;color:#183b52;background:#fff}.sound-toggle[aria-pressed=true]{color:#00604c;border-color:#9dd6bf;background:#effcf6}.payment-screen{border-color:#dfe8ef;border-radius:12px 12px 0 0;box-shadow:none;flex:1;min-height:530px}.ticket{padding:19px 24px 22px}.ticket-top{margin-bottom:18px;color:#7e94ad}.ticket h2{font-weight:500;font-size:17px;color:#17374e}.amount{font-size:36px;color:#005d48;margin:9px 0 13px}.qr-frame{width:222px;border-radius:14px;margin-bottom:12px}.ticket .instruction{color:#718ba3;font-size:11px;margin-bottom:13px}.bank-heading{display:flex;justify-content:center;align-items:center;gap:12px;margin:12px 0}.bank-heading>div{text-align:left}.bank-heading strong{display:block;color:#14334b;font-size:13px}.bank-heading>div>span{display:block;color:#6d839b;font-size:11px}.bank-symbol{display:grid;place-items:center;background:#00644e;color:white;border-radius:8px;width:40px;height:40px;font-size:26px}.reference-row{display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px;margin-top:12px}.reference-value{display:flex;align-items:center;gap:12px;background:#f7fafc;border:1px solid #e0e9ef;border-radius:7px;padding:4px 9px;max-width:82%}.reference-value strong{font-family:inherit;font-size:11px;font-weight:500;overflow-wrap:anywhere;color:#213f52;line-height:1.5}.copy-reference{background:none;border:0;color:#526f87;font-size:18px;padding:0 2px}.ticket .waiting{background:#edf9ef;color:#188140;margin-top:12px}.ticket-actions{margin-top:16px}.ticket-actions .quiet{font-size:12px}.trust-strip{margin:0 -16px;padding:15px 18px;background:linear-gradient(100deg,#eaf8f0,#f4fbf7);color:#14654f;gap:15px;justify-content:space-between;font-size:10px}.trust-strip strong{font-weight:500}.history{margin-top:18px;padding:18px}.history .section-title{margin-bottom:13px}.refresh-label{font-size:11px;cursor:default}th{background:#f2f7f8;color:#758da3;font-size:11px}td{font-size:12px;color:#15354c;border-color:#edf2f6}td small{color:#7e95ad}.status{background:#f2f6f8;color:#72869a;border:1px solid #e2ebf0;padding:6px 9px;border-radius:6px}.status.pending{border-color:#f1e4cf}.status.paid{border-color:#bdebd7;background:#edfcf5;color:#08724e}.payer-info dt{color:#6d849c}.payer-info dd{color:#173a50}
@media(max-width:1120px){.event-slogan{display:none}.summary-card{min-width:145px;padding:14px;gap:10px}.summary-card strong{font-size:22px}.workspace{grid-template-columns:360px minmax(0,1fr)}.preview-toolbar{align-items:flex-start}.preview-toolbar>div{margin-left:auto}.trust-strip{flex-wrap:wrap;justify-content:center;gap:8px 20px}}
@media(max-width:800px){.page-heading{flex-wrap:wrap}.summary-cards{margin-left:0;width:100%}.summary-card{flex:1}.workspace{grid-template-columns:1fr}.preview-column{padding:16px 14px 0}.preview-toolbar{flex-direction:row;align-items:center}.trust-strip{margin:0 -14px}.page-heading h1{font-size:25px}.order-form{padding:21px}.qr-frame{width:240px}.ticket{padding:22px 15px}.reference-row{gap:8px}.reference-value{max-width:80%}.reference-value strong{font-size:10px}.section-title h2{font-size:16px}.grand strong{font-size:25px}.summary-card strong{font-size:22px}.brand{font-size:24px}}

/* One-screen checkout: supplementary information stays in accessible dialogs. */
.buyer-button{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:13px 0;margin:2px 0 18px;border:0;border-top:1px dashed #d3e1e9;border-bottom:1px dashed #d3e1e9;background:transparent;text-align:left;color:#17374e;font-size:12px;font-weight:600}.buyer-button span{font-size:11px;font-weight:400;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#718ba3}.history-launch{white-space:nowrap;flex-shrink:0}.event-slogan{display:none}.checkout-dialog{border:1px solid #dce8e3;border-radius:16px;padding:24px;color:#193a4d;background:#fff;width:min(540px,calc(100vw - 28px));max-height:calc(100dvh - 40px);overflow:auto;box-shadow:0 24px 90px #14382b30}.checkout-dialog::backdrop{background:#0c2d2470;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:16px}.dialog-heading h2{font-size:18px}.dialog-heading>div{display:flex;align-items:center;gap:14px}.buyer-fields{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.buyer-fields label:nth-child(2),.buyer-fields label:nth-child(4),.buyer-fields label:nth-child(5){grid-column:1/-1}.checkout-dialog .primary{margin-top:18px}.history-dialog{width:min(1080px,calc(100vw - 28px))}.history-dialog .table-wrap{max-height:65dvh;overflow:auto}.history-dialog th{position:sticky;top:0}.payment-body{display:flex;flex-direction:column;gap:12px}.payment-details{min-width:0}.payment-code{min-width:0}.reference-value{min-width:0}.ticket h2{overflow-wrap:anywhere}.paid-ticket>.ticket-actions{flex-wrap:wrap}.payer-info dd{max-width:70%}
@media(min-width:1000px) and (min-height:640px){
 body[data-view=staff],body[data-view=customer]{height:100dvh;display:grid;grid-template-rows:50px minmax(0,1fr);overflow:hidden}
 body[data-view=staff]>header,body[data-view=customer]>header{height:50px;padding:0 22px}
 body[data-view=staff]>footer,body[data-view=customer]>footer{display:none}
 body[data-view=staff] #notice,body[data-view=customer] #notice{position:fixed;right:18px;bottom:18px;max-width:440px;z-index:10;border:1px solid #e6ca95;border-radius:10px;box-shadow:0 6px 24px #28332420}
 body[data-view=staff] #staff{display:grid;grid-template-rows:60px minmax(0,1fr);gap:12px;width:100%;max-width:1760px;height:100%;min-height:0;margin:0 auto;padding:12px 20px}
 #staff .page-heading{margin:0;gap:16px;min-width:0}#staff .page-heading h1{font-size:23px;margin:2px 0}#staff .page-heading>div>p{display:none}#staff .page-heading .eyebrow{font-size:9px;letter-spacing:1.4px}
 #staff .summary-cards{margin-left:auto;width:auto;gap:10px}#staff .summary-card{min-width:140px;padding:8px 13px;gap:10px;border-radius:9px}#staff .summary-card>div{gap:3px}#staff .summary-card>div>span{font-size:10px}#staff .summary-card strong{font-size:20px}#staff .summary-card .section-icon{width:30px;height:30px;font-size:21px}
 #staff .workspace{min-height:0;grid-template-columns:340px minmax(0,1fr);gap:14px}#staff .order-form{padding:16px;min-height:0;display:flex;flex-direction:column}#staff .section-title{margin-bottom:12px;flex-shrink:0}#staff .section-title h2{font-size:16px;gap:9px}#staff .section-icon{width:30px;height:30px;font-size:21px}#staff .step-tag{font-size:9px}
 #order-form{min-height:0;flex:1;display:flex;flex-direction:column}#order-form label{font-size:12px;margin-bottom:10px}#order-form input,#order-form select{margin-top:5px;min-height:36px;height:36px;padding:7px 11px}#order-form .fields{gap:10px}#order-form .buyer-button{margin:0 0 10px;padding:11px 0;min-height:39px;flex-shrink:0}#order-form .totals{margin:auto 0 12px;flex-shrink:0}#order-form .totals>div{padding:7px 12px;font-size:12px}#order-form .totals .grand{padding:10px 12px;font-size:14px}#order-form .grand strong{font-size:24px}#order-form .primary{min-height:44px;padding:10px 14px;font-size:14px;flex-shrink:0}#order-form .form-note{margin-top:8px;font-size:10px;line-height:1.4}#order-form .error{font-size:11px;line-height:1.3;margin-top:6px}
 #staff .preview-column{min-height:0;padding:12px 12px 0;display:grid;grid-template-rows:auto minmax(0,1fr) auto}#staff .preview-toolbar{margin-bottom:10px;min-height:30px;gap:8px;flex-wrap:nowrap;flex-direction:row;align-items:center}#staff .preview-toolbar h2{font-size:14px;gap:8px;white-space:nowrap}#staff .preview-toolbar>div{margin-left:auto}#staff .preview-toolbar .quiet{padding:7px 9px;font-size:10px;white-space:nowrap}#staff .payment-screen{min-height:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;border-bottom:0}#staff .trust-strip{margin:0 -12px;padding:10px 12px;font-size:9px;gap:12px;flex-wrap:nowrap}#staff .trust-strip strong{margin-right:auto}
 #staff .ticket{padding:14px 20px;min-height:0;width:100%;flex:0 0 auto}#staff .ticket-top{margin-bottom:8px;font-size:10px}#staff .ticket h2{font-size:17px}#staff .amount{font-size:34px;margin:5px 0 12px}#staff .payment-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center}#staff .payment-code .qr-frame{width:clamp(190px,28vh,310px);max-width:100%;padding:8px;margin-bottom:10px}#staff .payment-code .instruction{font-size:11px;margin:0;max-width:300px}#staff .payment-details .bank-heading{margin:0 0 18px;justify-content:center}#staff .bank-heading strong{font-size:14px}#staff .bank-heading>div>span{font-size:12px}#staff .reference-row{flex-direction:column;gap:5px;margin-top:0}#staff .reference-value{max-width:100%;width:100%;justify-content:space-between;padding:7px 9px}#staff .reference-value strong{font-size:11px}#staff .ticket .waiting{font-size:12px;margin-top:18px}#staff .ticket-actions{margin-top:14px}#staff .ticket-actions .quiet{font-size:11px}#staff .empty{min-height:0;height:100%;padding:25px}#staff .empty-symbol{margin-bottom:25px}#staff .flow{margin-top:30px}
 #staff .paid-ticket .success-mark{width:42px;height:42px;font-size:23px;margin:4px auto 9px}#staff .paid-ticket>.amount{margin:5px 0 7px}#staff .paid-ticket>.instruction{font-size:11px;margin-bottom:9px}#staff .payer-info{margin:10px auto;padding:6px 0;max-width:550px}#staff .payer-info>div{padding:4px 0;font-size:12px}#staff .invoice-box{padding:12px 16px;margin-top:10px;max-width:550px}#staff .invoice-box p{font-size:11px}#staff .invoice-box h3{font-size:12px}#staff .receipt-qr{width:76px;height:76px}#staff .invoice-box .quiet{margin-top:5px;padding:6px 10px}#staff .demo-line{margin:8px 0;padding:7px;font-size:10px}
 body[data-view=customer] #customer{margin:0 auto;padding:12px 22px;max-width:1300px;width:100%;min-height:0;display:grid;grid-template-rows:38px minmax(0,1fr) 24px;gap:8px}#customer .customer-heading{margin:0}#customer .payment-screen{min-height:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}#customer .customer-footer{margin:0;font-size:10px}#customer .payment-body{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:35px}#customer .payment-code .qr-frame{width:min(35vh,380px);max-width:100%}#customer .payment-details .bank-heading strong{font-size:20px}#customer .payment-details .reference-row{flex-direction:column}#customer .payment-details .reference-value{width:100%;max-width:100%;justify-content:space-between;padding:12px}#customer .payment-details .reference-value strong{font-size:14px}#customer .ticket-top{margin-bottom:10px}#customer .ticket{padding:16px 30px;flex:0 0 auto}#customer .paid-ticket .success-mark{margin:4px auto 12px;width:50px;height:50px}#customer .paid-ticket .amount{margin:8px 0 12px}#customer .paid-ticket .payer-info{margin:12px auto;padding:7px 0}#customer .paid-ticket .invoice-box{margin-top:12px;padding:13px}#customer .paid-ticket .ticket-actions{margin-top:12px}
}
@media(min-width:1000px) and (min-height:640px) and (max-height:760px){
 #staff .workspace{grid-template-columns:320px minmax(0,1fr)}#staff .order-form{padding:12px}#staff .section-title{margin-bottom:8px}#order-form label{margin-bottom:8px}#order-form input,#order-form select{height:34px;min-height:34px}#order-form .totals>div{padding:5px 10px}#order-form .totals .grand{padding:8px 10px}#order-form .form-note{display:none}#staff .trust-strip strong{display:none}#staff .trust-strip{justify-content:center}#staff .ticket{padding:10px 14px}#staff .payment-body{gap:14px}#staff .paid-ticket .ticket-actions{margin-top:8px}#staff .paid-ticket .invoice-box{padding:9px 12px}#staff .paid-ticket .success-mark{margin-top:0}#staff .preview-toolbar .section-icon{display:none}#customer .paid-ticket .success-mark{width:36px;height:36px;font-size:22px;margin:0 auto 6px}#customer .paid-ticket .amount{font-size:34px;margin:4px 0 6px}#customer .paid-ticket .instruction{margin-bottom:8px}
}
@media(max-width:999px){.page-heading{flex-wrap:wrap}.summary-cards{width:100%;margin-left:0}.history-launch{margin-left:auto}.buyer-fields{grid-template-columns:1fr}.buyer-fields label{grid-column:auto!important}.checkout-dialog{padding:20px}.header-right{gap:6px}#fullscreen{font-size:10px;padding:8px}.brand small{display:none}.brand i{display:none}}

/* Customer receipt: verified payment at left, bank transaction details at right. */
:is(#customer,#staff) .customer-success{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:26px;padding:24px;width:100%;text-align:left}
.success-summary{text-align:center;min-width:0}.customer-check{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#0da777,#00563f);color:white;font-size:42px;box-shadow:0 0 0 15px #eaf9f2;margin:15px auto 28px}.customer-success .success-summary h2{font-size:26px!important;font-weight:750;color:#112f43;letter-spacing:-.5px}.customer-amount{font-size:48px;font-weight:750;letter-spacing:-1px;color:#00634d;background:linear-gradient(110deg,#f0fbf5,#e9f8f1);border-radius:14px;width:fit-content;min-width:65%;padding:6px 24px;margin:12px auto 10px}.success-thanks{font-size:13px;color:#758ca3;margin:0}
.customer-invoice{display:grid;grid-template-columns:34% minmax(0,1fr);gap:16px;background:linear-gradient(110deg,#f7fcf8,#f0faf5);border:1px solid #dceee6;border-radius:12px;padding:16px;margin-top:26px;text-align:left;position:relative}.invoice-thumbnail{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:210/297;background:white;border:1px solid #d8e9df;border-radius:5px;box-shadow:0 3px 12px #144f3512;overflow:hidden;align-self:center}.invoice-thumbnail canvas{display:block;width:100%;height:auto}.pdf-preview-message{padding:12px;color:#829687;font-size:11px;text-align:center}.customer-invoice-copy{min-width:0}.customer-invoice-copy h3{font-size:14px;margin:1px 0 7px;color:#19374b}.customer-invoice-copy>p{font-size:12px;line-height:1.5;margin-bottom:10px}.invoice-access{display:flex;gap:12px;align-items:center}.customer-receipt-qr{width:104px;height:104px;flex-shrink:0;border:1px solid #e0ebe5;border-radius:6px;background:#fff;padding:3px}.invoice-access>div{min-width:0;display:grid;gap:4px;color:#577a88;font-size:11px;overflow-wrap:anywhere}.invoice-access strong{font-size:15px;color:#19493d;margin-bottom:3px}.invoice-access b{font-size:12px;color:#24485a}.invoice-download-actions{display:flex;gap:8px;margin-top:12px}.invoice-download-actions .quiet,.invoice-download-actions .primary{min-width:0;min-height:36px;padding:9px 12px;white-space:nowrap;font-size:11px;font-weight:600;justify-content:center;flex:1}.invoice-environment{font-size:10px;color:#956620;background:#fff5e1;padding:5px 9px;border-radius:5px;display:inline-block}.customer-invoice>.invoice-environment{grid-column:1/-1;justify-self:start;margin-top:-3px}.customer-invoice.is-processing{grid-template-columns:48px minmax(0,1fr);min-height:160px;align-items:center}.invoice-progress-icon{font-size:34px;color:#398669}.is-processing .customer-invoice-copy .quiet{margin-top:10px}
.transaction-panel{border-left:1px solid #e7edf0;padding-left:25px;min-width:0;display:flex;flex-direction:column}.transaction-panel>h2{display:flex;align-items:center;gap:12px;font-size:18px!important;font-weight:700;margin:0 0 20px!important}.transaction-panel>h2>span{display:grid;place-items:center;width:35px;height:35px;background:#edf9f3;border-radius:9px;color:#15745b;font-size:23px}.transaction-details{margin:0;display:grid;gap:10px}.transaction-details>div{display:grid;grid-template-columns:minmax(110px,.9fr) minmax(0,1.1fr);align-items:center;gap:14px;border:1px solid #e5edf1;background:#f8fafc;border-radius:8px;padding:12px 14px;min-height:46px}.transaction-details dt{font-size:12px;color:#7088a3}.transaction-details dd{margin:0;text-align:right;font-size:13px;font-weight:600;color:#213d51;overflow-wrap:anywhere;line-height:1.4}.transaction-details>div:first-child dd{font-size:15px}.customer-order-id{font-size:10px;color:#8b9eab;margin:10px 0 15px;text-align:right}.payment-assurance{display:flex;gap:12px;align-items:center;background:#edf9f2;border:1px solid #deeee7;padding:16px;border-radius:10px;margin-top:auto}.assurance-icon{display:grid;place-items:center;background:#067056;width:34px;height:39px;color:white;font-size:23px;border-radius:12px 12px 18px 18px;flex-shrink:0}.payment-assurance strong{font-size:12px;color:#126950}.payment-assurance p{font-size:11px;margin:4px 0 0}.replay-customer{align-self:flex-end;margin-top:10px;font-size:11px}
@media(min-width:1000px) and (min-height:640px) and (max-height:800px){:is(#customer,#staff) .customer-success{padding:18px;gap:22px}.customer-check{width:52px;height:52px;font-size:32px;box-shadow:0 0 0 11px #eaf9f2;margin:11px auto 20px}.customer-success .success-summary h2{font-size:23px!important}.customer-amount{font-size:40px;margin:9px auto 8px;padding:4px 22px}.success-thanks{font-size:11px}.customer-invoice{margin-top:18px;padding:13px;gap:12px;grid-template-columns:30% minmax(0,1fr)}.customer-invoice-copy h3{font-size:12px}.customer-invoice-copy>p{font-size:11px;margin-bottom:7px}.customer-receipt-qr{width:90px;height:90px}.invoice-access{gap:10px}.invoice-access strong{font-size:13px}.invoice-download-actions{gap:6px;margin-top:9px}.invoice-download-actions .quiet,.invoice-download-actions .primary{padding:8px;min-height:33px;font-size:10px}.invoice-environment{font-size:9px;padding:4px 7px}.transaction-panel{padding-left:20px}.transaction-panel>h2{font-size:16px!important;margin-bottom:13px!important}.transaction-details{gap:8px}.transaction-details>div{min-height:40px;padding:9px 11px;gap:12px}.transaction-details dt{font-size:11px}.transaction-details dd{font-size:12px}.transaction-details>div:first-child dd{font-size:13px}.customer-order-id{margin:8px 0 12px}.payment-assurance{padding:12px}.payment-assurance strong{font-size:11px}.payment-assurance p{font-size:10px}.replay-customer{margin-top:8px;padding:7px 10px}}
@media(max-width:999px){:is(#customer,#staff) .customer-success{grid-template-columns:1fr;gap:24px;padding:23px 18px}.transaction-panel{padding-left:0;border-left:0;border-top:1px solid #e7edf0;padding-top:20px}.customer-invoice{grid-template-columns:30% minmax(0,1fr);padding:12px;gap:12px}.customer-amount{font-size:40px}.customer-check{width:58px;height:58px;font-size:34px}.customer-success .success-summary h2{font-size:23px!important}.customer-receipt-qr{width:90px;height:90px}.invoice-access{gap:8px}.invoice-access>div{font-size:10px}.invoice-download-actions{flex-wrap:wrap}.invoice-download-actions .quiet,.invoice-download-actions .primary{padding:8px;font-size:10px}.customer-invoice-copy>p{font-size:11px}.customer-invoice-copy h3{font-size:12px}.transaction-details>div{padding:11px;gap:10px}.transaction-details dt{font-size:11px}.transaction-details dd{font-size:12px}}
#customer .invoice-thumbnail{max-width:190px;justify-self:center}
#customer .payment-screen{border-radius:14px}
@media(min-width:1000px) and (min-height:640px){body[data-view=customer] #customer{grid-template-rows:38px auto 24px;align-content:start}#customer .payment-screen{align-self:start;width:100%;flex:none}}
#customer .customer-pending{padding:26px 32px;text-align:left;width:100%}
.customer-pending svg{width:24px;height:24px;flex-shrink:0}.pending-top{display:flex;justify-content:space-between;margin-bottom:20px;color:#8194b6;font-size:12px}.pending-top>span:first-child{color:#007359;font-weight:700;letter-spacing:3px}.pending-columns{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px}.pending-qr{text-align:center;border-right:1px solid #e4ebf2;padding-right:32px;min-width:0}#customer .pending-qr h2{font-size:27px;line-height:1.25;color:#23365b;font-weight:650;margin:0 0 12px;overflow-wrap:anywhere}.pending-amount{font-size:62px;font-weight:750;line-height:1.1;letter-spacing:-2px;color:#00634d;margin:0 auto 18px;width:fit-content;padding:0 22px 8px;background:linear-gradient(0deg,#eef9f2,transparent 65%);border-radius:25px}.pending-code{border:1px solid #d6ebdf;padding:16px;border-radius:16px;background:white;max-width:100%;width:min(32vh,360px);margin:0 auto}.pending-code img{width:100%;height:auto;aspect-ratio:1;display:block}.pending-qr>p{font-size:12px;color:#7a90b4;margin:12px 0;line-height:1.5}.pending-status{display:inline-flex;align-items:center;gap:9px;background:#eaf8ee;color:#087b38;padding:9px 18px;border-radius:30px;font-size:13px}.pending-status svg{width:20px;height:20px}.pending-information{min-width:0;padding-top:8px}.pending-banner{padding:24px 20px;display:flex;gap:18px;align-items:center;background:linear-gradient(120deg,#effaf6,#e8f7f2);border-radius:14px;margin-bottom:25px}.pending-banner-icon{display:grid;place-items:center;width:65px;height:65px;background:#ddf5eb;border-radius:50%;color:#006b52;flex-shrink:0}.pending-banner-icon svg{width:36px;height:36px;transform:rotate(-24deg)}.pending-banner strong{font-size:21px;color:#08765c;line-height:1.3;font-weight:650}.pending-banner p{font-size:13px;margin:8px 0 0;color:#7e95b7}.pending-information h3{display:flex;align-items:center;gap:12px;color:#233f65;font-weight:600;font-size:20px;margin:0 0 18px}.pending-information h3 svg{color:#00785c;background:#eaf8f2;box-sizing:content-box;padding:7px;border-radius:10px}.pending-details{display:grid;gap:13px;margin:0}.pending-details>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:12px;padding:16px 14px;border:1px solid #e5ebf3;background:#f9fafc;border-radius:11px;min-height:57px}.pending-details dt{display:flex;gap:13px;align-items:center;font-size:14px;color:#7d91b1}.pending-details dt svg{color:#293f65}.pending-details dd{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-size:15px;margin:0;text-align:right;color:#263d61;overflow-wrap:anywhere;min-width:0}.pending-details>div:last-child{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr)}.pending-details>div:last-child dd{font-size:12px}.pending-copy{border:0;background:transparent;color:#6682a8;padding:3px;cursor:pointer;flex-shrink:0}.pending-copy svg{width:19px;height:19px}.pending-pay-link{display:block;text-align:right;color:#6e86a7;font-size:11px;margin-top:12px}.pending-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #e3ebf2;margin-top:24px;padding-top:18px;gap:20px}.pending-benefits>div{display:flex;align-items:center;justify-content:center;gap:13px}.pending-benefits>div+div{border-left:1px solid #e3ebf2}.pending-benefits svg{background:#e6f7ef;padding:11px;box-sizing:content-box;border-radius:50%;color:#007356}.pending-benefits strong,.pending-benefits small{display:block;font-weight:400}.pending-benefits strong{font-size:13px;color:#29446b}.pending-benefits small{font-size:11px;color:#8699b7;margin-top:5px}
@media(min-width:1000px) and (max-height:800px){#customer .customer-pending{padding:18px 25px}.pending-top{margin-bottom:14px}.pending-columns{gap:25px}.pending-qr{padding-right:25px}#customer .pending-qr h2{font-size:23px;margin-bottom:8px}.pending-amount{font-size:49px;margin-bottom:12px;padding-bottom:5px}.pending-code{width:29vh;padding:12px;border-radius:12px}.pending-qr>p{font-size:11px;margin:10px 0}.pending-status{font-size:12px;padding:7px 14px}.pending-banner{padding:17px;margin-bottom:18px;gap:14px}.pending-banner-icon{width:52px;height:52px}.pending-banner strong{font-size:19px}.pending-banner p{font-size:12px}.pending-information h3{font-size:17px;margin-bottom:12px}.pending-details{gap:10px}.pending-details>div{padding:12px;min-height:47px}.pending-details dt{font-size:12px;gap:10px}.pending-details dd{font-size:13px}.pending-details>div:last-child dd{font-size:11px}.pending-benefits{margin-top:17px;padding-top:14px}.pending-benefits svg{width:21px;height:21px;padding:8px}.pending-benefits strong{font-size:12px}.pending-benefits small{font-size:10px}}
@media(max-width:999px){#customer .customer-pending{padding:20px}.pending-top{font-size:10px}.pending-columns{grid-template-columns:1fr;gap:22px}.pending-qr{border:0;padding:0}.pending-code{width:260px}.pending-amount{font-size:48px}.pending-information{border-top:1px solid #e3ebf2;padding-top:22px}.pending-banner{padding:16px}.pending-banner strong{font-size:18px}.pending-banner p{font-size:12px}.pending-details dt{font-size:12px;gap:8px}.pending-details dd{font-size:13px}.pending-details>div:last-child{grid-template-columns:1fr}.pending-details>div:last-child dd{justify-content:space-between;text-align:left}.pending-benefits{grid-template-columns:1fr;gap:14px}.pending-benefits>div{justify-content:flex-start}.pending-benefits>div+div{border-left:0}}
@media(min-width:1000px) and (max-height:800px){#customer .invoice-thumbnail{max-width:125px}}
/* Staff checkout shares the customer payment composition at a smaller scale. */
#staff .preview-column:has(.customer-pending)>.trust-strip{display:none}
#staff .preview-column:has(.customer-pending){grid-template-rows:auto auto;align-content:start}
#staff-screen:has(.customer-pending){border:0;border-top:1px solid #e4edf1;border-radius:0;flex:none}
#staff .customer-pending{padding:16px 12px 18px;text-align:left}
#staff .customer-pending .pending-top{margin-bottom:12px;font-size:10px}
#staff .pending-top>span:first-child{display:none}
#staff .pending-top{justify-content:flex-end}
#staff .pending-columns{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:22px}
#staff .pending-qr{padding-right:22px}
#staff .pending-qr h2{font-size:22px;font-weight:600;margin-bottom:10px}
#staff .pending-amount{font-size:46px;margin-bottom:16px}
#staff .pending-code{width:min(29vh,300px);padding:12px}
#staff .pending-banner{padding:18px;gap:12px;margin-bottom:20px}
#staff .pending-banner strong{font-size:18px}
#staff .pending-banner p{font-size:12px}
#staff .pending-banner-icon{width:52px;height:52px}
#staff .pending-information h3{font-size:17px;margin-bottom:14px}
#staff .pending-details{gap:11px}
#staff .pending-details>div{min-height:49px;padding:12px;gap:10px}
#staff .pending-details dt{font-size:12px;gap:9px}
#staff .pending-details dd{font-size:13px}
#staff .pending-details>div:last-child{grid-template-columns:1fr}
#staff .pending-details>div:last-child dd{font-size:11px;justify-content:space-between;text-align:left}
#staff .pending-benefits{margin-top:20px;padding-top:16px;gap:12px}
#staff .pending-benefits svg{width:22px;height:22px;padding:9px}
#staff .pending-benefits strong{font-size:12px}
#staff .pending-benefits small{font-size:10px}
#staff #demo-pay{margin-top:10px;font-size:11px}
@media(min-width:1000px) and (min-height:640px){
 #staff .workspace{align-items:stretch}
 #staff .preview-column:has(.customer-pending){align-self:start;border-radius:14px;padding-bottom:0}
 #staff .workspace:has(.customer-pending){align-items:start}
 #staff .workspace:has(.customer-pending) .order-form{height:100%}
}
@media(min-width:1000px) and (max-height:800px){
 #staff .customer-pending{padding:10px 8px 12px}
 #staff .pending-top{margin-bottom:8px!important}
 #staff .pending-columns{gap:16px}
 #staff .pending-qr{padding-right:16px}
 #staff .pending-qr h2{font-size:18px;margin-bottom:7px}
 #staff .pending-amount{font-size:38px;margin-bottom:12px}
 #staff .pending-code{width:27vh;padding:9px}
 #staff .pending-qr>p{font-size:10px}
 #staff .pending-status{font-size:11px;padding:7px 10px}
 #staff .pending-information{padding-top:0}
 #staff .pending-banner{padding:13px;margin-bottom:12px;gap:10px}
 #staff .pending-banner strong{font-size:15px}
 #staff .pending-banner p{font-size:10px;margin-top:5px}
 #staff .pending-banner-icon{width:40px;height:40px}
 #staff .pending-banner-icon svg{width:27px;height:27px}
 #staff .pending-information h3{font-size:14px;margin-bottom:10px;gap:8px}
 #staff .pending-information h3 svg{width:19px;height:19px;padding:5px}
 #staff .pending-details{gap:8px}
 #staff .pending-details>div{padding:9px;min-height:38px}
 #staff .pending-details dt{font-size:11px;gap:7px}
 #staff .pending-details dt svg{width:19px;height:19px}
 #staff .pending-details dd{font-size:11px}
 #staff .pending-details>div:last-child dd{font-size:10px}
 #staff .pending-benefits{margin-top:14px;padding-top:12px;gap:8px}
 #staff .pending-benefits>div{gap:7px}
 #staff .pending-benefits svg{width:18px;height:18px;padding:7px}
 #staff .pending-benefits strong{font-size:10px}
 #staff .pending-benefits small{font-size:9px}
}
@media(max-width:999px){#staff .pending-columns{grid-template-columns:1fr}#staff .pending-qr{border:0;padding-right:0}#staff .pending-code{width:260px}#staff .pending-benefits{grid-template-columns:1fr}#staff .preview-column:has(.customer-pending){display:block}}
/* Fill the staff preview alongside the existing full-height order form. */
@media(min-width:1000px) and (min-height:640px){
 #staff .preview-column:has(.customer-pending){align-self:stretch;height:100%;grid-template-rows:auto minmax(0,1fr);align-content:stretch}
 #staff-screen:has(.customer-pending){height:100%;min-height:0}
 #staff .customer-pending{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
 #staff .customer-pending .pending-columns{min-height:0}
 #staff .customer-pending .pending-qr{min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;justify-items:center}
 #staff .customer-pending .pending-code{align-self:center;width:min(100%,44vh,480px);height:auto;max-height:100%;aspect-ratio:1;margin:0;min-height:0}
 #staff .customer-pending .pending-code img{height:100%;width:100%;object-fit:contain;min-height:0}
 #staff .customer-pending .pending-qr>p{align-self:end}
 #staff .customer-pending .pending-information{display:flex;flex-direction:column;min-height:0}
 #staff .customer-pending .pending-banner{flex:0 0 auto}
 #staff .customer-pending .pending-information{justify-content:center}
 #staff .customer-pending .pending-details{flex:0 0 auto;grid-template-rows:none;grid-auto-rows:auto}
 #staff .customer-pending .pending-details>div{min-height:49px}
 #staff .customer-pending .pending-information h3,#staff .customer-pending .pending-pay-link,#staff .customer-pending #demo-pay{flex-shrink:0}
 #staff .customer-pending .pending-benefits{align-self:end}
}
@media(min-width:1000px) and (min-height:801px){
 #staff .customer-pending .pending-details>div{padding:16px;min-height:58px}
 #staff .customer-pending .pending-details dt{font-size:13px}
 #staff .customer-pending .pending-details dd{font-size:14px}
 #staff .customer-pending .pending-details>div:last-child{grid-template-columns:minmax(130px,.75fr) minmax(0,1.25fr)}
 #staff .customer-pending .pending-details>div:last-child dd{font-size:12px;text-align:right;justify-content:flex-end}
}
@media(min-width:1000px) and (max-height:800px){#staff .customer-pending .pending-details>div{min-height:38px}}
/* Shared rows align the product with the banner and the QR with bank details. */
@media(min-width:1000px) and (min-height:640px){
 #staff .customer-pending .pending-columns{grid-template-rows:auto auto auto auto;align-content:start;row-gap:12px}
 #staff .customer-pending .pending-qr,#staff .customer-pending .pending-information{display:grid;grid-row:1 / 5;grid-template-rows:subgrid;align-content:start;padding-top:0;row-gap:12px}
 #staff .customer-pending .pending-qr{grid-column:1}
 #staff .customer-pending .pending-information{grid-column:2;grid-template-columns:minmax(0,1fr);justify-content:stretch}
 #staff .pending-product{grid-row:1;align-self:center}
 #staff .pending-product .pending-amount{margin-bottom:0}
 #staff .customer-pending .pending-banner{grid-row:1;margin:0;align-self:stretch}
 #staff .customer-pending .pending-code{grid-row:2;align-self:start;width:min(100%,34vh,400px);max-height:none}
 #staff .pending-bank-block{grid-row:2 / 5;min-width:0;align-self:start}
 #staff .customer-pending .pending-qr>p{grid-row:3;margin:0;align-self:start}
 #staff .customer-pending .pending-status{grid-row:4;align-self:start}
 #staff .customer-pending .pending-details{display:grid}
 #staff .customer-pending #demo-pay{grid-row:5;justify-self:end}
}
/* Staff payment composition: headline, QR and a compact receipt column. */
#staff .staff-payment-composition{position:relative}
#staff .checkout-payment-hero{text-align:center;padding:14px 0 24px;position:relative;isolation:isolate;overflow:hidden}
#staff .checkout-payment-hero:before,#staff .checkout-payment-hero:after{content:'';position:absolute;z-index:-1;width:75%;height:150px;border-radius:50%;background:linear-gradient(130deg,#e7f7ef99,#f5fcf900);bottom:-115px;left:-16%;transform:rotate(12deg)}
#staff .checkout-payment-hero:after{left:auto;right:-12%;transform:rotate(-12deg)}
#staff .checkout-payment-hero strong{display:block;font-size:40px;line-height:1.2;color:#064e41;font-weight:700;letter-spacing:-1px}
#staff .checkout-payment-hero>span{display:block;font-size:19px;font-style:italic;color:#839fa5;margin:2px 0 0 125px}
#staff .staff-payment-composition .pending-qr{border:0;padding:0}
#staff .staff-payment-composition .pending-information{padding:0}
#staff .pending-bank-block{background:#fff;border:1px solid #e8eef2;border-radius:14px;padding:15px;box-shadow:0 4px 22px #244b3810}
#staff .checkout-payment-total{display:flex;align-items:center;gap:17px;padding:16px 20px;background:linear-gradient(110deg,#ebf8f1,#f3fbf7);border-radius:12px;margin-top:18px;color:#075e4b}
#staff .checkout-payment-total>svg{width:30px;height:30px}
#staff .checkout-payment-total>div>span{font-size:13px;color:#466275}
#staff .checkout-payment-total .pending-amount{background:none;text-align:left;padding:0;margin:3px 0 0;font-size:36px;letter-spacing:-1px;width:auto}
#staff .checkout-payment-total h2{font-size:11px;font-weight:400;color:#6e8897;margin:5px 0 0}
#staff .checkout-payment-guide{display:flex;align-items:center;gap:13px;border:1px solid #e5edf1;background:#f7fafb;padding:12px 17px;border-radius:11px;margin-top:16px;color:#628095}
#staff .checkout-payment-guide p{font-size:11px;line-height:1.8;margin:0;color:#73899e}
#staff .checkout-payment-guide svg{width:20px;height:20px}
@media(min-width:1000px) and (min-height:640px){
 #staff .customer-pending.staff-payment-composition{grid-template-rows:auto auto minmax(0,1fr) auto}
 #staff .staff-payment-composition .pending-columns{display:grid;grid-template-rows:auto;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-content:start;align-items:start;gap:30px;padding:0 20px}
 #staff .staff-payment-composition .pending-qr{display:flex;flex-direction:column;align-items:center;grid-row:auto;grid-column:auto;gap:12px}
 #staff .staff-payment-composition .pending-code{width:min(100%,37vh,400px);align-self:center;grid-row:auto}
 #staff .staff-payment-composition .pending-qr>p{align-self:center;text-align:center}
 #staff .staff-payment-composition .pending-status{align-self:center}
 #staff .staff-payment-composition .pending-information{display:block;grid-row:auto;grid-column:auto}
 #staff .staff-payment-composition .pending-details>div{min-height:43px;padding:10px 12px}
 #staff .staff-payment-composition .pending-details{gap:8px}
 #staff .staff-payment-composition .pending-details dt{font-size:12px}
 #staff .staff-payment-composition .pending-details dd{font-size:13px}
 #staff .staff-payment-composition .pending-details>div:last-child{grid-template-columns:minmax(110px,.7fr) minmax(0,1.3fr)}
 #staff .staff-payment-composition .pending-details>div:last-child dd{font-size:11px}
 #staff .staff-payment-composition .pending-benefits{margin-top:20px}
}
@media(min-width:1000px) and (max-height:800px){
 #staff .checkout-payment-hero{padding:0 0 6px}
 #staff .checkout-payment-hero strong{font-size:29px}
 #staff .checkout-payment-hero>span{font-size:14px;margin-left:100px}
 #staff .staff-payment-composition .pending-top{margin-bottom:3px!important}
 #staff .staff-payment-composition .pending-columns{gap:18px;padding:0 4px}
 #staff .pending-bank-block{padding:10px}
 #staff .staff-payment-composition .pending-information h3{margin-bottom:8px;font-size:13px}
 #staff .staff-payment-composition .pending-details{gap:6px}
 #staff .staff-payment-composition .pending-details>div{min-height:30px;padding:5px 8px;gap:6px}
 #staff .staff-payment-composition .pending-details dt,#staff .staff-payment-composition .pending-details dd{font-size:10px}
 #staff .staff-payment-composition .pending-details>div:last-child dd{font-size:10px}
 #staff .checkout-payment-total{margin-top:10px;padding:9px 13px;gap:10px}
 #staff .checkout-payment-total .pending-amount{font-size:28px}
 #staff .checkout-payment-total>div>span{font-size:11px}
 #staff .checkout-payment-total h2{font-size:10px;margin-top:2px}
 #staff .checkout-payment-guide{margin-top:9px;padding:8px 11px;gap:8px}
 #staff .checkout-payment-guide p{font-size:10px;line-height:1.5}
 #staff .staff-payment-composition .pending-pay-link{margin-top:6px;font-size:10px}
 #staff .staff-payment-composition .pending-benefits{margin-top:12px}
}
@media(max-width:999px){#staff .checkout-payment-hero strong{font-size:30px}#staff .staff-payment-composition .pending-information{border:0}#staff .pending-bank-block{padding:12px}#staff .checkout-payment-total .pending-amount{font-size:32px}}
.qr-bank-logos{display:flex;align-items:center;justify-content:center;gap:9px;margin:5px auto 9px;flex-wrap:wrap}.qr-bank-logos>span{display:flex;align-items:center;justify-content:center;width:43px;height:36px;padding:6px;background:#fff;border:1px solid #e1e9ef;border-radius:7px}.qr-bank-logos img{display:block;max-width:100%;max-height:100%;object-fit:contain}.qr-bank-logos .more-banks{font-size:22px;line-height:1;color:#71859a;padding-bottom:12px}
#staff .staff-payment-composition .qr-bank-logos{margin:0;gap:8px}
@media(min-width:1000px) and (max-height:800px){#staff .staff-payment-composition .pending-code{width:min(100%,30vh,400px)}#staff .staff-payment-composition .pending-qr{gap:8px}.qr-bank-logos>span{width:34px;height:29px;padding:5px}.qr-bank-logos{gap:6px}}
.brand .brand-logo{display:block;width:100px;height:auto;object-fit:contain;flex-shrink:0}@media(max-width:700px){.brand .brand-logo{width:86px}}
.pos-product{display:flex;align-items:center;gap:14px;padding:17px 14px;border:1px solid #dcece5;border-radius:12px;background:linear-gradient(120deg,#f0faf5,#fff);margin-bottom:20px}.pos-product-icon{display:grid;place-items:center;width:49px;height:55px;background:#fff;border-radius:11px;font-size:32px}.pos-product strong{font-size:18px;color:#144538}.pos-product p{font-size:13px;color:#244b42;margin:5px 0}.pos-product p span{font-size:10px;color:#7d9391}.pos-product small{font-size:11px;color:#117250;background:#e5f5eb;padding:3px 7px;border-radius:5px}#order-form .pos-quantity-label{margin-bottom:8px}.pos-quantity-control{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;margin-bottom:20px}.pos-quantity-control button{border:1px solid #cfe3da;border-radius:9px;background:#eff9f3;color:#00634d;font-size:24px;height:44px}.pos-quantity-control button:disabled{opacity:.35;cursor:default}#order-form .pos-quantity-control input{height:44px;min-height:44px;margin:0;text-align:center;font-size:18px;font-weight:600;appearance:textfield}.pos-quantity-control input::-webkit-inner-spin-button,.pos-quantity-control input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
@media(min-width:1000px) and (min-height:640px){body[data-view=customer] #customer{align-content:safe center}}
.customer-payment-total{margin-top:16px;padding:13px 18px;border-radius:12px;background:#edf9f2;color:#466275;font-size:13px}#customer .customer-payment-total .pending-amount{font-size:34px;background:none;padding:0;margin:4px 0 0;letter-spacing:-1px;width:auto}@media(min-width:1000px) and (max-height:800px){.customer-payment-total{margin-top:10px;padding:9px 14px}#customer .customer-payment-total .pending-amount{font-size:29px}}
@media(min-width:1000px) and (max-height:800px){#customer .pending-banner{padding:10px 14px;margin-bottom:12px}#customer .pending-banner strong{font-size:16px}#customer .pending-banner p{margin-top:4px;font-size:11px}#customer .pending-information{padding-top:0}#customer .pending-information h3{margin-bottom:9px}#customer .pending-details{gap:7px}#customer .pending-details>div{padding:8px 11px;min-height:37px}#customer .pending-benefits{margin-top:12px;padding-top:10px}#customer .pending-pay-link{margin-top:7px}}
.qr-scheme-logos{display:flex;justify-content:center;align-items:center;gap:16px;margin:0 auto 10px;max-width:100%;flex-shrink:0}.qr-scheme-logos img{height:23px;width:auto;max-width:45%;object-fit:contain}#staff .staff-payment-composition .qr-scheme-logos{margin:0}@media(min-width:1000px) and (max-height:800px){.qr-scheme-logos img{height:19px}#staff .staff-payment-composition .pending-code{width:min(100%,27vh,400px)}}
.qr-scheme-logos img{height:29px}@media(min-width:1000px) and (max-height:800px){.qr-scheme-logos img{height:24px}}
.qr-scheme-logos{width:100%;min-height:32px}.qr-scheme-logos img{width:108px;height:31px;max-width:none;flex:0 0 auto}.qr-scheme-logos img[alt="VietQR Global"]{width:162px;height:31px}@media(min-width:1000px) and (max-height:800px){.qr-scheme-logos{gap:12px;min-height:28px}.qr-scheme-logos img{width:94px;height:27px}.qr-scheme-logos img[alt="VietQR Global"]{width:142px;height:27px}}
.qr-scheme-logos:has(img:nth-child(2)){justify-content:space-between;width:min(100%,380px);gap:22px}#staff .staff-payment-composition .qr-scheme-logos:has(img:nth-child(2)){width:min(100%,37vh,400px)}@media(min-width:1000px) and (max-height:800px){#staff .staff-payment-composition .qr-scheme-logos:has(img:nth-child(2)){width:min(100%,300px)}}
#customer .qr-scheme-logos{margin-bottom:22px}#staff .staff-payment-composition .qr-scheme-logos{margin-bottom:12px}@media(min-width:1000px) and (max-height:800px){#customer .qr-scheme-logos{margin-bottom:18px}#staff .staff-payment-composition .qr-scheme-logos{margin-bottom:10px}#staff .staff-payment-composition .pending-code{width:min(100%,25vh,400px)}}
.invoice-document{max-width:1160px;margin:24px auto;padding:0 20px 35px}.invoice-document-heading{text-align:center;margin-bottom:18px}.invoice-document-heading h1{font-size:23px;margin:0 0 6px}.invoice-document-heading p{font-size:12px}.invoice-view-controls{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;background:#fff;border:1px solid #dce8e2;border-radius:12px;box-shadow:0 3px 14px #12433309}.invoice-view-controls>div{display:flex;align-items:center;gap:9px}.invoice-view-controls .primary{width:auto;font-size:12px;padding:10px 16px}.invoice-view-controls #pdf-zoom{min-width:43px;text-align:center;font-size:12px}#invoice-pages{overflow:auto;padding:12px;background:#eaf0ed;border-radius:10px;margin-top:14px}.invoice-paper{width:max-content;margin:0 auto 16px;background:white;box-shadow:0 3px 15px #193f3420}.invoice-paper:last-child{margin-bottom:0}.invoice-paper svg{display:block}#pdf-loading{text-align:center;padding:14px;font-size:13px}@media(max-width:700px){.invoice-document{padding:0 8px 20px;margin-top:18px}.invoice-view-controls{padding:9px;gap:8px;flex-wrap:wrap}.invoice-view-controls>div{gap:6px}.invoice-view-controls .quiet{padding:8px;font-size:11px}.invoice-view-controls .primary{padding:9px;font-size:11px}.invoice-document-heading h1{font-size:20px}}
.invoice-page{height:100dvh;display:flex;flex-direction:column;overflow:hidden}.invoice-page>header{height:60px;min-height:60px}.invoice-page .invoice-document{width:100%;max-width:1400px;flex:1;min-height:0;display:flex;flex-direction:column;margin:0 auto;padding:14px 20px}.invoice-page .invoice-document-heading{margin-bottom:12px}.invoice-page .invoice-document-heading h1{font-size:21px}.invoice-page #content{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}.invoice-page .invoice-view-controls{flex-shrink:0;position:static}.invoice-page #invoice-pages{flex:1;min-height:0;margin-top:10px}.invoice-page #pdf-loading{position:absolute;top:60px;left:0;right:0;z-index:2;background:#f5faf7;margin:0}.invoice-page .invoice-box{overflow:auto}@media(max-width:700px){.invoice-page .invoice-document{padding:10px 8px}.invoice-page>header{height:52px;min-height:52px}.invoice-page .invoice-document-heading h1{font-size:18px}.invoice-page .invoice-view-controls{gap:6px}.invoice-page .invoice-view-controls>div{flex-wrap:wrap}}

#staff .customer-success{align-self:stretch;align-content:center;min-height:100%;background:#fff}
@media(min-width:1000px){#staff .customer-success{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;padding:18px}#staff .customer-invoice{grid-template-columns:26% minmax(0,1fr)}#staff .transaction-panel{padding-left:18px}#staff .invoice-download-actions{flex-wrap:wrap}}
@media(min-width:1000px) and (max-height:800px){#staff .customer-success{gap:14px;padding:12px}#staff .customer-check{width:40px;height:40px;font-size:26px;margin:8px auto 16px;box-shadow:0 0 0 8px #eaf9f2}#staff .customer-amount{font-size:34px}#staff .customer-success .success-summary h2{font-size:20px!important}#staff .customer-invoice{margin-top:12px;padding:10px;gap:9px}#staff .customer-receipt-qr{width:70px;height:70px}#staff .transaction-details>div{padding:7px 9px;min-height:36px;gap:8px;grid-template-columns:minmax(90px,.9fr) minmax(0,1.1fr)}#staff .transaction-panel{padding-left:14px}#staff .payment-assurance{padding:9px}#staff .invoice-download-actions{margin-top:7px}}
#staff .staff-success{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-content:start;gap:22px;padding:24px;min-height:100%;height:100%;text-align:left}
#staff .staff-success .success-summary{grid-column:1/-1;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:5px 18px;align-items:center;text-align:left;padding:18px 22px;background:linear-gradient(110deg,#edf9f2,#f8fcfa);border:1px solid #dceee6;border-radius:14px}
#staff .staff-success .customer-check{grid-row:1/3;width:48px;height:48px;font-size:30px;box-shadow:none;margin:0}
#staff .staff-success .success-summary h2{font-size:23px!important;grid-column:2;margin:0}
#staff .staff-success .success-thanks{grid-column:2;grid-row:2;margin:0;font-size:12px}
#staff .staff-success .customer-amount{grid-column:3;grid-row:1/3;min-width:0;background:none;margin:0;padding:0;font-size:42px;white-space:nowrap}
#staff .staff-success .customer-invoice{margin:0;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;gap:14px;padding:18px;min-height:0;align-items:start}
#staff .staff-success .invoice-thumbnail{height:100%;width:auto;max-width:100%;min-height:0;justify-self:center;align-self:center;aspect-ratio:210/297}
#staff .staff-success .invoice-thumbnail canvas{width:auto;height:100%;max-width:100%;object-fit:contain}
#staff .staff-success .customer-invoice-copy{width:100%;position:relative;padding-right:100px;min-height:100px}
#staff .staff-success .invoice-access{position:absolute;right:0;top:0;display:block}
#staff .staff-success .customer-receipt-qr{width:90px;height:90px}
#staff .staff-success .invoice-access>div{display:none}
#staff .staff-success .invoice-download-actions{margin-top:10px}
#staff .staff-success .customer-invoice>.invoice-environment{margin:0}
#staff .staff-success .transaction-panel{padding-left:0;border:0;min-height:0}
#staff .staff-success .transaction-details>div{padding:14px;min-height:50px}
#staff .staff-success .payment-assurance{margin-top:auto}
#staff .staff-success .customer-invoice.is-processing{display:flex;align-items:center;gap:14px}
#staff .staff-success .is-processing .customer-invoice-copy{padding:0}
@media(min-width:1000px) and (max-height:800px){
 #staff .staff-success{padding:12px;gap:12px}
 #staff .staff-success .success-summary{padding:10px 14px;gap:3px 12px;grid-template-columns:40px minmax(0,1fr) auto}
 #staff .staff-success .customer-check{width:38px;height:38px;font-size:24px}
 #staff .staff-success .success-summary h2{font-size:18px!important}
 #staff .staff-success .customer-amount{font-size:32px}
 #staff .staff-success .success-thanks{font-size:10px}
 #staff .staff-success .customer-invoice{padding:10px;gap:8px}
 #staff .staff-success .customer-invoice-copy{padding-right:76px;min-height:76px}
 #staff .staff-success .customer-receipt-qr{width:70px;height:70px}
 #staff .staff-success .transaction-details{gap:6px}
 #staff .staff-success .transaction-details>div{padding:7px 9px;min-height:34px}
 #staff .staff-success .transaction-panel>h2{margin-bottom:10px!important}
 #staff .staff-success .payment-assurance{padding:8px}
 #staff .staff-success .payment-assurance p{display:none}
}
@media(max-width:999px){
 #staff .staff-success{height:auto;min-height:0;grid-template-columns:1fr;grid-template-rows:auto;gap:18px;padding:16px}
 #staff .staff-success .success-summary{grid-template-columns:40px minmax(0,1fr);padding:12px}
 #staff .staff-success .customer-amount{grid-column:2;grid-row:3;font-size:34px}
 #staff .staff-success .success-summary h2{font-size:19px!important}
 #staff .staff-success .invoice-thumbnail{height:240px}
 #staff .staff-success .transaction-panel{padding-top:0}
}
#staff .staff-success .payment-assurance{display:none}
#staff .staff-success .replay-customer{margin-top:auto}
#staff .staff-success .customer-order-id{margin-bottom:12px}