:root{--color-bg:#fafafa;--color-surface:#fff;--color-surface-hover:#f5f5f5;--color-border:#e5e5e5;--color-border-focus:#2563eb;--color-text:#171717;--color-text-muted:#737373;--color-text-subtle:#a3a3a3;--color-primary:#2563eb;--color-primary-hover:#1d4ed8;--color-primary-text:#fff;--color-success:#16a34a;--color-success-bg:#f0fdf4;--color-error:#dc2626;--color-error-bg:#fef2f2;--color-warning:#f59e0b;--font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--shadow-sm:0 1px 2px rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.05);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.04);--transition-fast:.15s cubic-bezier(.4,0,.2,1);--transition-normal:.25s cubic-bezier(.4,0,.2,1)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh}.checkout-layout{align-items:flex-start;display:flex;justify-content:center;min-height:100vh;padding:var(--space-lg)}.checkout-container{margin-top:var(--space-2xl);max-width:480px;width:100%}.checkout-card{animation:fadeInUp .4s ease-out;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--space-xl)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.checkout-header{margin-bottom:var(--space-xl);text-align:center}.checkout-logo{color:var(--color-text-subtle);font-size:.75rem;font-weight:600;letter-spacing:.1em;margin-bottom:var(--space-sm);text-transform:uppercase}.checkout-amount{color:var(--color-text);font-size:2rem;font-weight:700;line-height:1.2}.checkout-currency{color:var(--color-text-muted);font-size:.875rem;font-weight:500;margin-left:var(--space-xs)}.checkout-order-id{color:var(--color-text-subtle);font-size:.8125rem;margin-top:var(--space-xs)}.checkout-divider{border:none;border-top:1px solid var(--color-border);margin:var(--space-lg) 0}.form-group{margin-bottom:var(--space-md)}.form-label{color:var(--color-text-muted);display:block;font-size:.8125rem;font-weight:500;margin-bottom:var(--space-xs)}.form-input{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-family:var(--font-sans);font-size:.9375rem;outline:none;padding:.625rem .75rem;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);width:100%}.form-input:focus{border-color:var(--color-border-focus);box-shadow:0 0 0 3px #2563eb1a}.form-input::-moz-placeholder{color:var(--color-text-subtle)}.form-input::placeholder{color:var(--color-text-subtle)}.form-row{display:grid;gap:var(--space-md);grid-template-columns:1fr 1fr}.saved-cards{margin-bottom:1rem}.saved-card-option{align-items:center;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;display:flex;gap:.75rem;margin-bottom:.5rem;padding:.75rem 1rem;transition:border-color var(--transition-fast),background var(--transition-fast)}.saved-card-option:hover{border-color:var(--color-border-focus)}.saved-card-option.selected{background:#2563eb0a;border-color:var(--color-primary,#2563eb)}.saved-card-option input[type=radio]{accent-color:var(--color-primary,#2563eb);flex-shrink:0;height:1.125rem;margin:0;width:1.125rem}.card-info{align-items:center;display:flex;flex:1;font-size:.875rem;gap:.625rem}.card-brand,.card-last4{font-weight:500}.card-last4{color:var(--color-text-primary)}.card-expiry{color:var(--color-text-muted);font-size:.8125rem;margin-left:auto}.tap-card-element{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);min-height:44px;padding:.625rem .75rem;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.tap-card-element:focus-within{border-color:var(--color-border-focus);box-shadow:0 0 0 3px #2563eb1a}.tap-notification{color:var(--color-text-muted);font-size:.75rem;margin-top:var(--space-xs);min-height:1rem}.tap-notification:empty{display:none}.btn{align-items:center;border:none;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-size:.9375rem;font-weight:600;gap:var(--space-sm);justify-content:center;padding:.75rem 1.5rem;transition:all var(--transition-fast);width:100%}.btn-primary{background:var(--color-primary);color:var(--color-primary-text)}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn:disabled{cursor:not-allowed;opacity:.6}.spinner{animation:spin .6s linear infinite;border:2px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#fff;display:inline-block;height:18px;width:18px}@keyframes spin{to{transform:rotate(1turn)}}.status-message{flex-direction:column;padding:var(--space-xl) 0;text-align:center}.status-icon,.status-message{align-items:center;display:flex}.status-icon{animation:scaleIn .3s ease-out;border-radius:50%;font-size:1.5rem;height:64px;justify-content:center;margin-bottom:var(--space-lg);width:64px}@keyframes scaleIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.status-icon.success{background:var(--color-success-bg);color:var(--color-success)}.status-icon.error{background:var(--color-error-bg);color:var(--color-error)}.status-icon.loading{background:#eff6ff;color:var(--color-primary)}.status-title{font-size:1.25rem;font-weight:600;margin-bottom:var(--space-sm)}.status-description{color:var(--color-text-muted);font-size:.875rem;max-width:300px}.security-badge{align-items:center;border-top:1px solid var(--color-border);color:var(--color-text-subtle);display:flex;font-size:.75rem;gap:var(--space-xs);justify-content:center;margin-top:var(--space-lg);padding-top:var(--space-lg)}.security-badge svg{height:14px;width:14px}.error-alert{animation:fadeInUp .2s ease-out;background:var(--color-error-bg);border:1px solid #fecaca;border-radius:var(--radius-md);color:var(--color-error);font-size:.8125rem;margin-bottom:var(--space-md);padding:var(--space-sm) var(--space-md)}.powered-by{color:var(--color-text-subtle);font-size:.6875rem;margin-top:var(--space-lg);text-align:center}.powered-by a{color:var(--color-text-muted);text-decoration:none}.powered-by a:hover{text-decoration:underline}@media(max-width:520px){.checkout-layout{align-items:stretch;padding:0}.checkout-container{margin-top:0;max-width:100%}.checkout-card{border-left:none;border-radius:0;border-right:none;box-shadow:none;min-height:100vh}.form-row{grid-template-columns:1fr}}.form-group-with-status{position:relative}.field-status{align-items:center;color:var(--color-text-subtle);display:flex;font-size:.75rem;gap:.25rem;pointer-events:none;position:absolute;right:.75rem;top:50%;transform:translateY(-50%)}.field-status .spinner{border-color:#2563eb4d;border-top-color:var(--color-primary);border-width:1.5px;height:14px;width:14px}.email-locked{align-items:center;background:#f9fafb;border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex;justify-content:space-between;padding:.625rem .75rem}.email-locked-value{align-items:center;color:var(--color-text);display:flex;font-size:.9375rem;font-weight:500;gap:.5rem}.email-locked-icon{color:var(--color-text-subtle);flex-shrink:0}.email-change-btn{background:none;border:none;border-radius:var(--radius-sm);color:var(--color-primary);cursor:pointer;font-family:var(--font-sans);font-size:.8125rem;font-weight:500;padding:.25rem .5rem;transition:background var(--transition-fast)}.email-change-btn:hover,.profile-badge{background:#eff6ff}.profile-badge{align-items:center;animation:fadeInUp .3s ease-out;border:1px solid #bfdbfe;border-radius:var(--radius-md);color:var(--color-primary);display:flex;font-size:.8125rem;gap:var(--space-sm);margin-bottom:var(--space-md);padding:var(--space-sm) var(--space-md)}.profile-badge-icon{flex-shrink:0;font-size:1rem}.otp-step{animation:fadeInUp .3s ease-out;margin-bottom:var(--space-md)}.otp-step-title{color:var(--color-text);font-size:.875rem;font-weight:500;margin-bottom:var(--space-xs)}.otp-step-description{color:var(--color-text-muted);font-size:.8125rem;margin-bottom:var(--space-md)}.otp-input-group{display:flex;gap:.5rem;justify-content:center;margin-bottom:var(--space-sm)}.otp-digit{background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-family:var(--font-sans);font-size:1.25rem;font-weight:600;height:52px;outline:none;text-align:center;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);width:44px}.otp-digit:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #2563eb1a}.otp-digit.filled{background:#f0f5ff;border-color:var(--color-primary)}.otp-actions{align-items:center;display:flex;flex-direction:column;gap:var(--space-xs);margin-top:var(--space-sm)}.otp-resend-btn{background:none;border:none;color:var(--color-primary);cursor:pointer;font-family:var(--font-sans);font-size:.8125rem;padding:0}.otp-resend-btn:hover{text-decoration:underline}.otp-resend-btn:disabled{color:var(--color-text-subtle);cursor:not-allowed;text-decoration:none}.otp-skip-btn{background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-family:var(--font-sans);font-size:.75rem;padding:0}.otp-skip-btn:hover{color:var(--color-primary);text-decoration:underline}.otp-error{color:var(--color-error);font-size:.8125rem;margin-top:var(--space-sm);text-align:center}.compact-row{align-items:center;animation:fadeInUp .25s ease-out;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;padding:.75rem 0}.compact-row:first-child{padding-top:0}.compact-label{color:var(--color-text-muted);flex-shrink:0;font-size:.8125rem;font-weight:400;width:5rem}.compact-value-group{align-items:center;display:flex;flex:1;gap:.5rem;justify-content:flex-end}.compact-value{color:var(--color-text);font-size:.875rem;font-weight:500}.compact-action{background:none;border:none;border-radius:var(--radius-sm);color:var(--color-text-muted);cursor:pointer;font-size:1.25rem;line-height:1;padding:0 .25rem;transition:color var(--transition-fast),background var(--transition-fast)}.compact-action:hover{background:#f3f4f6;color:var(--color-text)}.compact-select{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-family:var(--font-sans);font-size:.75rem;padding:0}.compact-select:hover{color:var(--color-primary)}.pay-with-value{align-items:center;display:flex;gap:.5rem}.card-brand{background:#f3f4f6;border-radius:3px;font-size:.6875rem;font-weight:600;letter-spacing:.02em;padding:.125rem .375rem}.save-opt-in{background:#fafbff;border:1px solid #e0e7ff;border-radius:var(--radius-md);margin-bottom:var(--space-md);margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md)}.save-opt-in-check{align-items:flex-start;cursor:pointer;display:flex;gap:var(--space-sm)}.save-opt-in-check input[type=checkbox]{accent-color:var(--color-primary);margin-top:.15rem}.save-opt-in-text{color:var(--color-text);font-size:.8125rem;font-weight:500}.save-opt-in-sub{color:var(--color-text-muted);font-size:.75rem;margin-top:.125rem}.btn-secondary{background:var(--color-surface);border:1px solid var(--color-primary);color:var(--color-primary)}.btn-secondary:hover:not(:disabled){background:#eff6ff}.btn-sm{font-size:.8125rem;padding:.5rem 1rem}.success-alert{animation:fadeInUp .2s ease-out;background:var(--color-success-bg);border:1px solid #bbf7d0;border-radius:var(--radius-md);color:var(--color-success);font-size:.8125rem;margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md)}.delivery-section,.delivery-toggle{margin-bottom:var(--space-md)}.delivery-toggle{display:grid;gap:var(--space-sm);grid-template-columns:1fr 1fr}.toggle-option{align-items:center;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:.875rem;font-weight:500;gap:var(--space-sm);justify-content:center;padding:.75rem 1rem;transition:all var(--transition-fast)}.toggle-option:hover{border-color:var(--color-border-focus);color:var(--color-text)}.toggle-option.active{background:#2563eb0a;border-color:var(--color-primary);color:var(--color-primary);font-weight:600}.delivery-estimate,.delivery-fields{animation:fadeInUp .25s ease-out}.delivery-estimate{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:var(--radius-md);margin-top:var(--space-md);padding:var(--space-md)}.estimate-row{align-items:center;color:var(--color-text);display:flex;font-size:.875rem;justify-content:space-between}.estimate-row+.estimate-row{margin-top:var(--space-xs)}.estimate-value{color:var(--color-success);font-weight:600}.btn-location{align-items:center;background:#eff6ff;border:1.5px dashed var(--color-primary);border-radius:var(--radius-md);color:var(--color-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:.875rem;font-weight:500;gap:var(--space-sm);justify-content:center;margin-bottom:var(--space-md);padding:.75rem 1rem;transition:all var(--transition-fast);width:100%}.btn-location:hover:not(:disabled){background:#dbeafe;border-style:solid}.btn-location:disabled{cursor:not-allowed;opacity:.7}.spinner-sm{border-color:#2563eb4d;border-top-color:var(--color-primary);border-width:1.5px;height:14px;width:14px}.location-error{color:var(--color-error);font-size:.8125rem;margin-bottom:var(--space-md)}.delivery-map{border:1.5px solid var(--color-border);border-radius:var(--radius-md);height:0;margin-bottom:0;overflow:hidden;transition:height .3s ease-out,margin .3s ease-out;width:100%}.delivery-map.map-visible{height:220px;margin-bottom:var(--space-md)}