html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

.header-logo {
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('../images/Logo.svg');
    mask: url('../images/Logo.svg');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 28px;
    height: 24px;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}/* Shared three-step checkout; DxPopup keeps its footer outside the scrolling body. */
.cart-steps { display:flex; gap:1rem; margin-bottom:1.5rem; --checkout-accent:var(--proc-blue, #005bea); }
.cart-central-checkout .cart-steps { --checkout-accent:var(--proc-green, #16854b); }
.cart-steps button { flex:1; padding:.8rem; border:1px solid #dce1e8; border-radius:.5rem; background:#fff; text-align:left; font:inherit; font-weight:600; color:inherit; }
.cart-steps button:not(:disabled):hover { border-color:var(--checkout-accent); background:#f4f7fb; }
.cart-steps button:focus-visible { outline:2px solid var(--checkout-accent); outline-offset:2px; }
.cart-steps button.active { color:var(--checkout-accent); border-color:var(--checkout-accent); background:#f4f7fb; }
.cart-steps span { display:inline-grid; place-items:center; width:1.8rem; height:1.8rem; margin-right:.5rem; border-radius:50%; background:#eef1f5; }
.cart-steps .active span { background:var(--checkout-accent); color:white; }
.cart-checkout-grid { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:1.5rem; align-items:start; }
.cart-delivery-form { display:grid; gap:1.25rem; min-width:0; }
.cart-delivery-form .form-control { display:block; width:100%; max-width:none; min-width:0; box-sizing:border-box; border:1px solid #cedaeb; border-radius:5px; padding:10px; color:inherit; background:white; font:inherit; }
.cart-delivery-form .form-control:focus { border-color:var(--proc-blue,#005bea); }
.cart-delivery-form label { display:block; margin-bottom:.4rem; font-weight:600; }
.cart-delivery-form h3, .cart-checkout-summary h3 { font-size:1.05rem; margin:0 0 .65rem; }
.cart-contact-details { white-space:pre-line; overflow-wrap:anywhere; margin-top:.5rem; color:#526071; }
.cart-checkout-summary { background:#f4f6f9; padding:1.1rem; border-radius:.6rem; overflow-wrap:anywhere; }
.cart-checkout-summary ul { list-style:none; padding:0; margin:1rem 0; }
.cart-checkout-summary li { display:flex; justify-content:space-between; gap:.75rem; padding:.5rem 0; border-bottom:1px solid #dfe4eb; }
.cart-checkout-summary li strong { flex-shrink:0; }
.cart-checkout-summary > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; margin-top:.65rem; }
@media(max-width:640px) {
 .cart-checkout-grid { grid-template-columns:minmax(0, 1fr); }
 .cart-steps { gap:.5rem; }
 .cart-steps button { padding:.6rem .4rem; }
 .cart-footer, .cart-footer > div { display:flex; flex-wrap:wrap; gap:.5rem; width:100%; }
 .cart-footer button { flex:1 1 140px; }
}
.cart-checkout-popup .dxbl-modal-content { min-height:0; }
.cart-checkout-popup .dxbl-modal-body { min-height:0; overflow-y:auto; }
.cart-delivery-form .dxbl-text-edit { min-height:38px; }

.cart-footer-shell.central { --proc-blue:var(--proc-green, #16854b); }
.cart-delivery-form > div { min-width:0; }
.cart-send-row { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:1rem; align-items:start; }
.cart-send-row > div { min-width:0; }
.cart-delivery-form select { width:100%; max-width:100%; min-width:0; min-height:38px; border:1px solid #cedaeb; border-radius:4px; padding:.4rem; background:white; color:inherit; }

.cart-purchase-note { display:block; width:100%; box-sizing:border-box; overflow-y:auto; resize:vertical; }
.cart-location-option { display:block; white-space:normal; overflow-wrap:anywhere; min-width:0; }
.cart-location-message { margin:.6rem 0 0; color:#526071; }
@media(max-width:640px) {
 .cart-steps button { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; }
 .cart-steps span { margin-right:0; flex-shrink:0; }
}

/* DxPopup renders its outer wrappers outside the component's CSS scope. */
.offsystem-popup .dxbl-modal-content { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.offsystem-popup .dxbl-modal-header, .offsystem-popup .dxbl-modal-footer { flex:0 0 auto; }
.offsystem-popup .dxbl-modal-body { display:flex; flex-direction:column; flex:1 1 0; min-height:0; overflow:hidden; }

/* Keep the direct purchase header and actions outside the scrolling content. */
.direct-order-popup .dxbl-modal-content { min-width:0; overflow:hidden; background:#fff; }
.direct-order-popup .dxbl-modal-header, .direct-order-popup .dxbl-modal-footer { flex-shrink:0; background:#fff; }
.direct-order-popup .dxbl-modal-header { align-items:flex-start; }
.direct-order-popup .dxbl-modal-body { min-width:0; overflow-x:hidden; }

/* DevExpress's responsive popup margin must fit the width reserved above. */
.direct-order-popup.dxbl-popup { margin:12px !important; }
.direct-order-popup .dxbl-modal-header, .direct-order-popup .dxbl-modal-footer {
    background:#fff !important;
}
.direct-order-popup .dxbl-modal-header { align-items:flex-start !important; }
.direct-order-popup .dxbl-modal-header-default { align-items:flex-start !important; }