:root{--checkout-bg-primary:#fff;--checkout-bg-secondary:#f8fafc;--checkout-bg-tertiary:#f1f5f9;--checkout-text-primary:#1e293b;--checkout-text-secondary:#64748b;--checkout-text-muted:#94a3b8;--checkout-border:#e2e8f0;--checkout-border-light:#f1f5f9;--checkout-shadow:#0000000d;--checkout-success:#10b981;--checkout-warning:#f59e0b;--checkout-error:#ef4444;--checkout-brand:#2563eb;--checkout-brand-hover:#1d4ed8;--checkout-brand-light:#eff6ff;--checkout-input-bg:#fff}@media (prefers-color-scheme:dark){:root{--checkout-bg-primary:#1e293b;--checkout-bg-secondary:#0f172a;--checkout-bg-tertiary:#334155;--checkout-text-primary:#f1f5f9;--checkout-text-secondary:#cbd5e1;--checkout-text-muted:#94a3b8;--checkout-border:#334155;--checkout-border-light:#1e293b;--checkout-shadow:#0000004d;--checkout-success:#34d399;--checkout-warning:#fbbf24;--checkout-error:#f87171;--checkout-brand:#3b82f6;--checkout-brand-hover:#60a5fa;--checkout-brand-light:#1e3a5f;--checkout-input-bg:#334155}}.dark-mode{--checkout-bg-primary:#1e293b;--checkout-bg-secondary:#0f172a;--checkout-bg-tertiary:#334155;--checkout-text-primary:#f1f5f9;--checkout-text-secondary:#cbd5e1;--checkout-text-muted:#94a3b8;--checkout-border:#334155;--checkout-border-light:#1e293b;--checkout-shadow:#0000004d;--checkout-success:#34d399;--checkout-warning:#fbbf24;--checkout-error:#f87171;--checkout-brand:#3b82f6;--checkout-brand-hover:#60a5fa;--checkout-brand-light:#1e3a5f;--checkout-input-bg:#334155}.light-mode{--checkout-bg-primary:#fff;--checkout-bg-secondary:#f8fafc;--checkout-bg-tertiary:#f1f5f9;--checkout-text-primary:#1e293b;--checkout-text-secondary:#64748b;--checkout-text-muted:#94a3b8;--checkout-border:#e2e8f0;--checkout-border-light:#f1f5f9;--checkout-shadow:#0000000d;--checkout-success:#10b981;--checkout-warning:#f59e0b;--checkout-error:#ef4444;--checkout-brand:#2563eb;--checkout-brand-hover:#1d4ed8;--checkout-brand-light:#eff6ff;--checkout-input-bg:#fff}.checkout-page{background:var(--checkout-bg-secondary);width:100%;min-height:calc(100vh - 150px);padding:2rem}.checkout-title{color:var(--checkout-text-primary);margin-bottom:1.5rem;font-size:1.6rem;font-weight:600}.checkout-layout{grid-template-columns:2fr 1fr;gap:2rem;width:100%;margin:0 auto;display:grid}.auth-status-bar{background:var(--checkout-bg-tertiary);border-radius:var(--radius-sm);border:1px solid var(--checkout-border);box-sizing:border-box;justify-content:space-between;align-items:center;width:100%;margin-bottom:1.5rem;padding:.75rem 1rem;display:flex}.auth-status-welcome{color:var(--text-primary);font-size:.95rem;font-weight:500}.auth-status-logout{background:var(--checkout-bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--checkout-text-secondary);cursor:pointer;padding:.4rem .75rem;font-size:.85rem;transition:all .2s}.auth-status-logout:hover{color:#dc2626;background:#fee2e2;border-color:#ef4444}.checkout-section{background:var(--checkout-bg-primary);border:1px solid var(--checkout-border);border-radius:12px;width:100%;margin-bottom:1.5rem;padding:1.5rem;transition:all .2s}.checkout-section h2{color:var(--checkout-text-primary);margin-bottom:1rem;font-size:1.1rem}.checkout-section h3{color:var(--checkout-text-secondary);margin:1rem 0 .75rem;font-size:1rem}.fulfillment-options{grid-template-columns:repeat(2,1fr);gap:1rem;width:100%;margin-bottom:1rem;display:grid}.fulfillment-option{cursor:pointer;border:2px solid var(--checkout-border);background:var(--checkout-bg-primary);border-radius:10px;width:100%;transition:all .3s;display:flex;position:relative}.fulfillment-option input{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;position:absolute}.fulfillment-content{align-items:center;gap:.75rem;width:100%;padding:1rem;display:flex}.fulfillment-icon{font-size:2rem}.fulfillment-details{flex-direction:column;display:flex}.fulfillment-title{color:var(--checkout-text-primary);font-size:1rem;font-weight:600}.fulfillment-subtitle{color:var(--checkout-text-secondary);font-size:.8rem}.fulfillment-option.selected{border-color:var(--checkout-brand);background:var(--checkout-brand-light)}.fulfillment-option:hover{border-color:var(--checkout-brand-hover);background:var(--checkout-bg-tertiary)}.pickup-location-card{background:var(--checkout-bg-tertiary);border:2px solid var(--checkout-brand);border-radius:10px;width:100%;margin-top:1.5rem;padding:1.25rem}.pickup-location-header{align-items:center;gap:.5rem;margin-bottom:.75rem;display:flex}.pickup-location-header h3{color:var(--checkout-text-primary);margin:0;font-size:1.1rem;font-weight:600}.pickup-location-icon{font-size:1.5rem}.pickup-location-address{color:var(--checkout-text-secondary);margin-bottom:.5rem;padding-left:2rem;font-size:.95rem}.pickup-location-hours{color:var(--checkout-text-muted);margin-bottom:1.5rem;padding-left:2rem;font-size:.9rem}.pickup-contact-info{background:var(--checkout-bg-primary);border:1px solid var(--checkout-border);border-radius:8px;width:100%;margin-top:1.5rem;padding:1rem}.pickup-contact-info h4{color:var(--checkout-text-primary);margin-bottom:1rem;font-size:.95rem;font-weight:600}.pickup-option{border-top:1px solid var(--checkout-border);width:100%;margin:1.5rem 0 1rem;padding-top:1rem}.pickup-checkbox{cursor:pointer;color:var(--checkout-text-primary);align-items:center;gap:.75rem;font-size:.95rem;font-weight:500;display:flex}.pickup-checkbox input{cursor:pointer;width:18px;height:18px;accent-color:var(--checkout-brand)}.pickup-person-details{background:var(--checkout-bg-primary);border:1px solid var(--checkout-border);border-radius:8px;width:100%;margin-top:1.25rem;padding:1rem}.pickup-person-details h4{color:var(--checkout-text-primary);margin-bottom:1rem;font-size:.95rem;font-weight:600}.pickup-form{gap:1rem;width:100%}.pickup-input{border:none;border-bottom:2px solid var(--checkout-border);width:100%;color:var(--checkout-text-primary);background:0 0;padding:.7rem 0;font-size:1rem;transition:border-color .3s}.pickup-input:focus{border-bottom-color:var(--checkout-brand);outline:none}.pickup-input::placeholder{color:var(--checkout-text-muted)}.pickup-note{color:var(--checkout-text-muted);margin-top:.75rem;font-size:.8rem;font-style:italic}.form-grid{grid-template-columns:repeat(2,1fr);gap:2rem;width:100%;display:grid}.form-grid input{border:none;border-bottom:2px solid var(--checkout-border);background:var(--checkout-input-bg);width:100%;color:var(--checkout-text-primary);box-sizing:border-box;padding:.5rem .25rem;font-size:1rem;transition:border-color .3s}.form-grid input:focus{border-color:var(--checkout-brand);outline:none}.form-grid input::placeholder{color:var(--checkout-text-muted)}.payment-options{flex-direction:column;gap:.75rem;width:100%;margin-bottom:1rem;display:flex}.payment-option{color:var(--checkout-text-primary);align-items:center;gap:.75rem;font-size:.95rem;display:flex}.payment-option input{accent-color:var(--checkout-brand)}.checkout-summary{background:var(--checkout-bg-primary);border:1px solid var(--checkout-border);border-radius:12px;flex-direction:column;align-items:center;gap:.5rem;width:100%;height:fit-content;padding:1.5rem;display:flex;position:sticky;top:100px}.checkout-summary h2{color:var(--checkout-text-primary);margin-bottom:1rem;font-size:1.2rem}.summary-row{color:var(--checkout-text-secondary);border-bottom:1px solid var(--checkout-border-light);justify-content:space-between;width:100%;margin-bottom:.75rem;padding:.5rem 0;display:flex}.summary-row.total{color:var(--checkout-text-primary);border-bottom:none;margin-top:1rem;font-size:1.1rem;font-weight:700}.delivery-note{color:var(--checkout-text-muted);margin-top:.5rem;font-size:.8rem;display:block}.auth-prompt{text-align:center;justify-content:center;align-items:center;display:flex}.auth-prompt-btn{text-align:center;color:var(--checkout-brand);cursor:pointer;background:0 0;border:none;padding:.25rem 0;font-size:.9rem;font-weight:500;text-decoration:underline;transition:color .2s;position:relative}.auth-prompt-btn:hover{color:var(--brand-hover)}.pickup-summary{background:var(--checkout-bg-tertiary);border-left:3px solid var(--checkout-brand);border-radius:8px;width:100%;margin-top:1rem;padding:.75rem}.pickup-summary-title{color:var(--checkout-text-primary);margin-bottom:.25rem;font-size:.9rem;font-weight:600;display:block}.pickup-summary-details{color:var(--checkout-text-secondary);margin-bottom:.5rem;font-size:.85rem;display:block}.pickup-summary-note{color:var(--checkout-text-muted);margin-top:.5rem;font-size:.75rem;font-style:italic;display:block}.place-order-btn{background:var(--checkout-brand);color:#fff;cursor:pointer;border:none;border-radius:8px;width:100%;margin-top:1.25rem;padding:.875rem;font-size:1rem;font-weight:600;transition:all .3s}.place-order-btn:hover:not(:disabled){background:var(--checkout-brand-hover);transform:translateY(-2px)}.place-order-btn:disabled{background:var(--checkout-text-muted);cursor:not-allowed;opacity:.6}.mobile-money-section{width:100%;margin-top:1.5rem}.operators-grid{grid-template-columns:repeat(3,1fr);gap:1rem;width:100%;margin-bottom:1.5rem;display:grid}.operator-option{cursor:pointer;position:relative}.operator-option input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute}.operator-option input:checked~.operator-logo{border-color:var(--checkout-brand);background:var(--checkout-brand-light);box-shadow:0 0 0 3px #3b82f61a}.operator-option:hover .operator-logo{border-color:var(--checkout-text-muted);background:var(--checkout-bg-tertiary)}.operator-name{color:var(--checkout-text-primary);font-size:.85rem;font-weight:600}.mobile-input{border:none;border-bottom:2px solid var(--checkout-border);background:var(--checkout-input-bg);width:100%;color:var(--checkout-text-primary);box-sizing:border-box;padding:.7rem 0;font-size:1rem;transition:border-color .3s}.mobile-input:focus{border-bottom-color:var(--checkout-brand);outline:none}.mobile-input::placeholder{color:var(--checkout-text-muted)}.auth-modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-sizing:border-box;background:#00000080;justify-content:center;align-items:center;width:100%;height:100%;padding:1rem;display:flex;position:fixed;inset:0;overflow-y:auto}.auth-modal{background:var(--checkout-bg-primary);border-radius:16px;width:90%;max-width:450px;max-height:90vh;margin:auto;padding:2rem;position:relative;overflow-y:auto;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.auth-modal-close{cursor:pointer;color:var(--checkout-text-muted);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:1.5rem;transition:all .2s;display:flex;position:absolute;top:1rem;right:1rem}.auth-modal-close:hover{background:var(--checkout-bg-tertiary);color:var(--checkout-text-primary)}.auth-modal-header{text-align:center;margin-bottom:2rem}.auth-modal-header h2{color:var(--checkout-text-primary);margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.auth-modal-header p{color:var(--checkout-text-secondary);font-size:.9rem}.auth-inputs{border:2px solid var(--checkout-border);background:var(--checkout-input-bg);box-sizing:border-box;width:100%;color:var(--checkout-text-primary);border-radius:8px;padding:.75rem;font-size:1rem;transition:all .2s}.auth-inputs:focus{border-color:var(--checkout-brand);outline:none;box-shadow:0 0 0 3px #3b82f61a}.auth-inputs::placeholder{color:var(--checkout-text-muted)}.auth-submit-btn{background:var(--checkout-brand);color:#fff;cursor:pointer;border:none;border-radius:8px;width:100%;padding:.75rem;font-size:1rem;font-weight:600;transition:all .2s}.auth-submit-btn:hover:not(:disabled){background:var(--checkout-brand-hover);transform:translateY(-1px)}.auth-submit-btn:disabled{background:var(--checkout-text-muted);cursor:not-allowed;opacity:.7}.order-note-container{margin-top:1rem}.order-note-input{border:1px solid var(--checkout-border);resize:vertical;background:var(--checkout-input-bg);width:100%;color:var(--checkout-text-primary);border-radius:8px;padding:.75rem;font-family:inherit;font-size:.95rem;transition:border-color .2s}.order-note-input:focus{border-color:var(--checkout-brand);outline:none;box-shadow:0 0 0 2px #3b82f61a}.order-note-input::placeholder{color:var(--checkout-text-muted)}.order-note-hint{color:var(--checkout-text-secondary);margin-top:.5rem;margin-bottom:0;font-size:.75rem}@media (max-width:1024px){.checkout-layout{grid-template-columns:1fr;gap:1.5rem}.checkout-summary{position:static}}@media (max-width:768px){.checkout-page{width:100%;padding:1rem;overflow-x:hidden}.checkout-layout{flex-direction:column;justify-content:flex-start;align-items:stretch;gap:1rem;width:100%;padding:0;display:flex}.form-grid{flex-direction:column;gap:1.5rem;display:flex}.fulfillment-options{grid-template-columns:1fr}.operators-grid{grid-template-columns:repeat(2,1fr)}.pickup-location-card{padding:1rem}.pickup-form{flex-direction:column}.auth-modal{width:95%;margin:0 auto;padding:1.5rem}}@media (max-width:480px){.checkout-page{padding:.75rem}.operators-grid{grid-template-columns:1fr}.pickup-location-header{text-align:center;flex-direction:column}.pickup-location-address,.pickup-location-hours{text-align:center;padding-left:0}.auth-modal{padding:1.25rem}}body{background:var(--checkout-bg-secondary);margin:0;padding:0;overflow-x:hidden}*{box-sizing:border-box;max-width:100%}