.checkout-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1rem;margin-block:1.5rem}.checkout-grid label{display:flex;flex-direction:column;gap:.4rem}.checkout-grid input,.checkout-grid textarea,.checkout-grid select{width:100%;padding:.6rem;border:1px solid #b8c6ba;border-radius:.5rem;font:inherit}.field-validation-error,.validation-summary-errors{color:#a12929}#checkout-summary p{padding:.6rem;border-bottom:1px solid #dde5df}.admin-panel-heading{flex-wrap:wrap}
.order-summary{min-width:0;overflow-wrap:anywhere}.order-summary table{min-width:600px}.order-summary h2{font-size:clamp(1.1rem,3vw,1.7rem)}
.gateway-result{overflow-wrap:anywhere}.gateway-result .btn{margin-block:.5rem;margin-inline-end:.5rem}.gateway-result .btn-secondary{color:#14695b;background:#eff6f2;border:1px solid #14695b}.gateway-result .btn-secondary:hover,.gateway-result .btn-secondary:focus-visible{color:#fff;background:#14695b}

/* Status colours belong to the state, not its position in the grid. */
.order-statistics .order-stat-card {
    --state-ink:#40516a;
    --state-accent:#64748b;
    --state-surface:#f1f5f9;
    --state-border:#cbd5e1;
    position:relative;
    min-height:130px;
    padding:20px;
    padding-inline-end:36px;
    border:1px solid var(--state-border);
    border-inline-start:5px solid var(--state-accent);
    border-radius:16px;
    background:linear-gradient(135deg,var(--state-surface),#fff);
    color:var(--state-ink);
    box-shadow:0 4px 14px #162b3d06;
    text-decoration:none;
    transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.order-statistics .order-stat-card > span { font-size:.86rem; font-weight:700; line-height:1.6; }
.order-statistics .order-stat-card strong { margin-top:auto; font-size:2rem; line-height:1.3; color:var(--state-ink); font-variant-numeric:tabular-nums; }
.order-statistics .state-all { --state-ink:#1e4e99; --state-accent:#3b73ca; --state-surface:#eaf2ff; --state-border:#bfd3f1; }
.order-statistics .state-pending { --state-ink:#86530b; --state-accent:#c58a20; --state-surface:#fff4d8; --state-border:#ebd19b; }
.order-statistics .state-confirmed { --state-ink:#23603b; --state-accent:#3d8b58; --state-surface:#eaf6ed; --state-border:#bbddc5; }
.order-statistics .state-cancelled { --state-ink:#a13040; --state-accent:#c55162; --state-surface:#fff0f2; --state-border:#edbdc5; }
.order-statistics .state-notstarted { --state-ink:#4b5568; --state-accent:#7a879b; --state-surface:#edf1f6; --state-border:#ccd4df; }
.order-statistics .state-preparing { --state-ink:#9c4818; --state-accent:#ce763b; --state-surface:#fff0e3; --state-border:#efc8a7; }
.order-statistics .state-readyfordispatch { --state-ink:#71409e; --state-accent:#9564bc; --state-surface:#f5ecff; --state-border:#dbc3ed; }
.order-statistics .state-shipped { --state-ink:#146481; --state-accent:#368daf; --state-surface:#e5f5ff; --state-border:#b4dcea; }
.order-statistics .state-delivered { --state-ink:#11665d; --state-accent:#32988a; --state-surface:#e2f6f1; --state-border:#acdbcf; }
.order-statistics .state-faileddelivery { --state-ink:#9a346b; --state-accent:#bd5a92; --state-surface:#fdebf5; --state-border:#eabbd5; }
.order-statistics .order-stat-card:hover { background:var(--state-surface); border-color:var(--state-accent); box-shadow:0 5px 18px #162b3d12; }
.order-statistics .order-stat-card[aria-current="true"] { background:var(--state-surface); border-color:var(--state-accent); box-shadow:inset 0 0 0 1px var(--state-accent); }
.order-statistics .order-stat-card[aria-current="true"]::after { content:'✓'; position:absolute; inset-inline-end:12px; top:12px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--state-ink); color:#fff; font-size:.8rem; font-weight:800; }
.order-statistics .order-stat-card:focus-visible { outline:3px solid var(--state-ink); outline-offset:3px; }
.order-statistics .fulfillment-stat-grid { margin-bottom:22px; }
@media(prefers-reduced-motion:reduce) { .order-statistics .order-stat-card { transition:none; } }