.demo-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;background:#fff0c2;color:#543d0b;padding:12px 20px;font-size:14px;line-height:1.5}.demo-banner>a{font-weight:700;text-underline-offset:3px}.demo-page .site-header{padding-top:22px;padding-bottom:18px}.demo-page small{font-size:12px;line-height:1.5;font-weight:400}.demo-page .portal-main nav{position:sticky;top:0;background:#f6f8f5;z-index:2;padding:12px 0;border-bottom:1px solid #d3e0d6}.demo-page .portal-main nav a:first-child{background:transparent;color:inherit}.demo-page .portal-main nav a[aria-current=page]{background:#103d32;color:white}.demo-page .button{gap:12px;min-height:44px;padding:11px 16px}.demo-page select{font:inherit;background:white;border:1px solid #c0d0c2;border-radius:6px;padding:13px 12px;min-height:46px;color:#123d2f;width:100%}.demo-page input,.demo-page select{font-size:16px}.demo-page input[readonly]{background:#f2f5f0}.demo-page select:focus-visible{outline:3px solid #448a24;outline-offset:3px}.demo-shortcuts{margin-top:20px}.demo-page .shortcut strong{font-size:18px}.demo-results{margin-top:24px;border-top:1px solid #dbe5db;padding-top:14px}.demo-offer{padding:22px;border:1px solid #dbe5db;border-radius:10px;display:flex;align-items:flex-start;flex-direction:column;gap:14px}.demo-offer>strong{font-size:28px}.demo-offer p{margin:0}.service{display:inline-block;padding:6px 12px;border-radius:6px;font-weight:800;font-size:13px;letter-spacing:.4px}.pac{background:#ecefe9;color:#203c2a}.sedex{background:#ffe065;color:#123855}.demo-search{max-width:310px;width:100%}.demo-row{display:flex;justify-content:space-between;align-items:center;gap:18px}.demo-row .button{flex-shrink:0}.demo-table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:15px;min-width:410px}th,td{padding:16px 12px;border-bottom:1px solid #e1e8df;white-space:nowrap}thead, tfoot{background:#eff5e9}caption{text-align:left;font-size:14px;line-height:1.6;padding:12px 0 20px;color:#596f62}.demo-page #demo-dialog{border:1px solid #c0d0c2;border-radius:16px;color:#103d32;width:min(540px,calc(100% - 32px));padding:0;max-height:85dvh;overflow:auto}.demo-page dialog::backdrop{background:#10251cc2}.demo-dialog-content{padding:28px}.demo-dialog-content h2{font-size:24px;line-height:1.2;margin:0 0 22px}.demo-dialog-content p{line-height:1.6}.demo-dialog-content .eyebrow{font-size:11px;color:#826317;margin-bottom:15px}.demo-dialog-content dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:14px}.demo-dialog-content dd{margin:0;overflow-wrap:anywhere}.demo-dialog-content dt{color:#596f62}.demo-page #demo-topup{max-width:420px}.demo-page #topup-message{font-weight:600;line-height:1.6}.demo-page .list-card .status-pill{margin:4px 0}.demo-page #demo-title:focus{outline:none}@media(max-width:700px){.demo-banner{justify-content:flex-start;gap:6px}.demo-banner span{width:100%;font-size:13px}.demo-page .portal-main nav{gap:3px}.demo-page .portal-main nav a{flex:1 0 30%;font-size:12px;justify-content:center;padding:11px 5px}.demo-page .panel-heading{margin-top:26px}.demo-page .panel-heading>a{width:100%;justify-content:center}.demo-row{align-items:flex-start;flex-direction:column;gap:8px}.demo-page .list-card .button{margin:4px 0 0}.demo-page .demo-shortcuts{gap:12px}.demo-page .metric-grid article{padding:20px;gap:10px}.demo-page h1{line-height:1.15}.demo-page .form-grid{gap:18px}}
.demo-banner{position:sticky;top:0;z-index:10}.demo-page .portal-main nav{position:static}
.menu-icon{width:22px;height:22px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.shortcut>.menu-icon{width:36px;height:36px;margin-bottom:4px}.demo-row-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:340px}.demo-page .demo-row-actions .button{margin:0;padding:9px 12px}.demo-document-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px;font-size:19px}.demo-document-brand .mark{font-size:18px;width:32px;height:32px;display:grid;place-items:center}.demo-page .shipping-dialog button{font:inherit;cursor:pointer;border:1px solid #bbcebf;border-radius:7px;min-height:44px;padding:10px 13px}.demo-page .shipping-dialog .secondary{background:white;color:#153c32}.demo-paper{border:1px solid #d3ddd6;border-radius:8px;padding:20px;background:white;margin:20px auto;overflow-wrap:anywhere}.receipt-paper{max-width:300px;font-size:13px}.demo-paper h3{font-size:15px;margin:18px 0 8px}.receipt-paper>h3,.receipt-paper>strong{text-align:center;display:block}.receipt-paper dl{border-top:1px dashed #95a99d;padding-top:12px}.receipt-paper dt{font-weight:700;margin-top:10px}.receipt-paper dd{margin:3px 0}.receipt-paper h4{border-top:1px dashed #95a99d;padding-top:15px;text-align:center}.receipt-paper>p{text-align:center}.demo-paper>strong{color:#7b4300}.demo-message-preview{white-space:pre-wrap;overflow-wrap:anywhere;background:#edf5ed;padding:20px;border-radius:10px;font:14px/1.7 system-ui}.label-paper{max-width:378px;min-height:490px}.label-paper>strong{display:block;padding:10px 0;border-block:2px solid #b39871}.demo-page .finish-actions label{width:100%}@media(max-width:700px){.demo-row-actions{justify-content:flex-start;max-width:none}.demo-page .demo-row-actions .button{flex:1}.demo-page .shipping-dialog{max-width:calc(100vw - 24px)}.demo-document-brand{font-size:18px}}
@page demoA4{size:A4;margin:12mm}@page demoThermal{size:100mm 150mm;margin:4mm}@page demoReceipt80{size:80mm 297mm;margin:4mm}@page demoReceipt58{size:58mm 297mm;margin:3mm}
@media print{body.demo-page>*{display:none!important}body.demo-page>dialog.demo-print-target{display:block!important;position:static!important;width:auto!important;max-width:none!important;height:auto!important;max-height:none!important;overflow:visible!important;border:0!important;padding:0!important;margin:0!important;box-shadow:none!important}dialog.demo-print-target>*:not(.demo-paper){display:none!important}.demo-print-target::backdrop{display:none}.demo-print-target .demo-paper{margin:0;padding:0;border:0;max-width:none;min-height:0;font-size:11px;color:black}.demo-paper .mark{border:1px solid black;background:white;color:black}.demo-paper dt{break-after:avoid}.demo-paper dd{break-inside:avoid}body[data-demo-paper=a4]{page:demoA4}body[data-demo-paper=thermal]{page:demoThermal}body[data-demo-paper=receipt80]{page:demoReceipt80}body[data-demo-paper=receipt58]{page:demoReceipt58}}

.shipping-dialog{width:min(94vw,590px);max-height:90dvh;overflow:auto;border:1px solid #c5d6cb;border-radius:16px;padding:24px;color:#153c32;background:#fff;box-shadow:0 20px 80px #12352d30}.shipping-dialog::backdrop{background:#0b241e80}.shipping-dialog h2{margin:0 0 12px;font-size:23px}.shipping-dialog p{line-height:1.5}.loading-dialog{text-align:center;max-width:420px;padding:32px 24px}.loading-spinner{width:42px;height:42px;border:4px solid #e1eadf;border-top-color:#276647;border-radius:50%;margin:0 auto 22px;animation:shipping-spin .9s linear infinite}.finish-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.finish-actions button{margin:0;font-size:14px;padding:10px 13px}.finish-actions button:first-child,.finish-actions button:nth-child(2){background:#153c32;color:white}.label-preview{border:1px solid #dbe7df;width:100%;height:48vh;margin:12px 0}@keyframes shipping-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.loading-spinner{animation:none}}@media(max-width:560px){.shipping-dialog{padding:20px}.finish-actions{display:grid;grid-template-columns:1fr}.finish-actions button{width:100%;text-align:left}}
/* Indeterminate progress follows the request; no invented percentages or timed success. */
.loading-dialog{max-width:460px;padding:30px 26px;background:radial-gradient(ellipse at top,#edf8f2 0,white 65%)}
.shipping-progress-art{width:112px;height:112px;position:relative;margin:0 auto 20px;display:grid;place-items:center}
.progress-orbit{position:absolute;inset:0;border:1px solid #d5e9df;border-top:2px solid #398866;border-radius:50%;animation:shipping-spin 3s linear infinite}
.progress-label{width:54px;height:72px;background:white;border:1px solid #bfdbcc;border-radius:8px;box-shadow:0 6px 16px #163d3220;transform:rotate(-7deg);padding:9px;text-align:left;box-sizing:border-box;animation:label-float 2.5s ease-in-out infinite}
.label-mark{display:block;font-size:13px;line-height:16px;font-weight:800;color:#277554}.progress-label i{display:block;height:3px;background:#c9ded3;margin-top:5px;border-radius:2px}.progress-label i:nth-of-type(2){width:65%}.label-barcode{height:13px;margin-top:7px;background:repeating-linear-gradient(90deg,#244c3d 0 1px,transparent 1px 3px,#244c3d 3px 5px,transparent 5px 7px)}
.progress-scan{position:absolute;left:17px;right:17px;top:35px;height:2px;background:#49af7e;box-shadow:0 0 8px #49af7e80;animation:label-scan 2.5s ease-in-out infinite}
.progress-steps{display:flex;justify-content:space-between;gap:8px;list-style:none;padding:0;margin:24px 0 16px;font-size:12px}.progress-steps li{flex:1;color:#6b8076}.progress-steps li::before{content:'';display:block;width:9px;height:9px;border-radius:50%;background:#e0e9e3;margin:0 auto 8px}.progress-steps .done::before{background:#519879}.progress-steps .active{color:#17593d;font-weight:700}.progress-steps .active::before{background:#287650;box-shadow:0 0 0 4px #d9efe2}.progress-track{height:4px;background:#e6eee8;border-radius:4px;overflow:hidden}.progress-track span{display:block;width:35%;height:100%;border-radius:4px;background:#3f926b;animation:progress-travel 1.8s ease-in-out infinite}.progress-hint{display:block;margin-top:16px;font-size:12px;line-height:1.5;color:#587266}
@keyframes label-float{50%{transform:translateY(-4px) rotate(-3deg)}}@keyframes label-scan{50%{transform:translateY(38px);opacity:.5}}@keyframes progress-travel{from{transform:translateX(-110%)}to{transform:translateX(390%)}}
@media(prefers-reduced-motion:reduce){.progress-orbit,.progress-label,.progress-scan,.progress-track span{animation:none}.progress-track span{width:100%;opacity:.4}}
.menu-icon{width:21px;height:21px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}#prepare,#quote-button{display:inline-flex;align-items:center;gap:9px}.loading-brand{font-size:19px;font-weight:750;margin:0 0 20px}.service-logo{display:block;width:110px;height:44px;object-fit:contain;object-position:left center}.shipping-options{display:grid;grid-template-columns:1fr 1fr;gap:16px}.shipping-option{border:1px solid #c5d6cb;border-radius:12px;padding:20px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}.shipping-option>strong{font-size:27px}.shipping-option p{margin:0;font-size:14px}.shipping-option small{line-height:1.5}.shipping-option button{margin-top:auto;min-height:44px;width:100%;background:#153c32;color:white}.compact-review,#selected-service{display:flex;align-items:center;justify-content:space-between;gap:15px}.compact-review strong{font-size:25px}#quote-form{max-width:none}#quote-message{font-weight:600}#review p{margin:12px 0}#review details{font-size:14px}.document-link{min-height:44px;display:inline-flex;align-items:center}@media(max-width:560px){.shipping-options{grid-template-columns:1fr}#quote-button,#prepare{width:100%;justify-content:center}}