*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-surface: #fff8f5;--color-surface-dim: #e1d8d4;--color-surface-container-lowest: #ffffff;--color-surface-container-low: #fbf2ed;--color-surface-container: #f5ece7;--color-surface-container-high: #efe6e2;--color-surface-container-highest: #e9e1dc;--color-on-surface: #1e1b18;--color-on-surface-variant: #53433f;--color-inverse-surface: #34302c;--color-inverse-on-surface: #f8efea;--color-outline: #86736e;--color-outline-variant: #d9c1bc;--color-primary: #713323;--color-on-primary: #ffffff;--color-primary-container: #8e4a38;--color-on-primary-container: #ffcbbd;--color-secondary: #615e57;--color-on-secondary: #ffffff;--color-secondary-container: #e7e2d9;--color-on-secondary-container: #67645d;--color-tertiary: #2c4d32;--color-on-tertiary: #ffffff;--color-tertiary-container: #446549;--color-on-tertiary-container: #bbe0bd;--color-error: #ba1a1a;--color-on-error: #ffffff;--color-error-container: #ffdad6;--font-headline: "Literata", serif;--font-body: "Plus Jakarta Sans", sans-serif;--rounded-sm: .25rem;--rounded: .5rem;--rounded-md: .75rem;--rounded-lg: 1rem;--rounded-xl: 1.5rem;--rounded-full: 9999px;--space-xs: 8px;--space-sm: 12px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px}body{font-family:var(--font-body);background:var(--color-surface);color:var(--color-on-surface);line-height:1.5;-webkit-font-smoothing:antialiased}.status-bar{position:sticky;top:0;z-index:100;background:var(--color-inverse-surface);color:var(--color-inverse-on-surface);padding:var(--space-sm) var(--space-md);display:flex;align-items:center;gap:var(--space-xs);font-size:14px;font-weight:600;animation:statusPulse 4s ease-in-out infinite}@keyframes statusPulse{0%,to{opacity:1}50%{opacity:.95}}.status-bar svg{width:16px;height:16px;flex-shrink:0;animation:spin 3s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.header{display:flex;align-items:center;padding:var(--space-md) 20px;border-bottom:1px solid var(--color-outline-variant);background:var(--color-surface);position:sticky;top:44px;z-index:99}.header-logo{display:flex;align-items:center;gap:var(--space-xs)}.header-logo svg{width:24px;height:24px;color:var(--color-on-surface)}.header-logo h1{font-family:var(--font-headline);font-size:24px;font-weight:700;color:var(--color-primary);line-height:1.2}.header-powered{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-on-surface-variant);margin-right:var(--space-sm)}.header-login{background:transparent;border:1.5px solid var(--color-primary);color:var(--color-primary);font-family:var(--font-body);font-size:14px;font-weight:600;padding:6px 16px;border-radius:var(--rounded-full);cursor:pointer;transition:transform .1s,background .15s}.header-login:active{transform:scale(.98);background:#7133230d}.receipt-wrapper{padding:var(--space-lg) 20px}.receipt-card{background:var(--color-surface-container-lowest);border-radius:var(--rounded-xl) var(--rounded-xl) 0 0;box-shadow:0 4px 20px #8e4a3814;padding:var(--space-lg) var(--space-md);position:relative}.receipt-card:after{content:"";position:absolute;bottom:-10px;left:0;right:0;height:10px;background:linear-gradient(135deg,var(--color-surface-container-lowest) 33.33%,transparent 33.33%) 0 0 / 10px 10px,linear-gradient(225deg,var(--color-surface-container-lowest) 33.33%,transparent 33.33%) 0 0 / 10px 10px;background-position:top left}.receipt-label{text-align:center;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-on-surface-variant);margin-bottom:2px}.receipt-id{text-align:center;font-size:14px;color:var(--color-on-surface-variant)}.receipt-date{text-align:center;font-size:14px;color:var(--color-on-surface-variant);margin-bottom:var(--space-sm)}.receipt-thankyou{font-family:var(--font-headline);font-size:28px;font-weight:700;text-align:center;line-height:36px;margin-bottom:var(--space-lg)}.rewards-card{background:var(--color-surface-container);border-radius:var(--rounded-lg);padding:var(--space-md);margin-bottom:var(--space-lg)}.rewards-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-xs)}.rewards-title{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--color-primary)}.rewards-title svg{width:18px;height:18px}.rewards-tier{font-size:12px;font-weight:600;color:var(--color-on-surface-variant)}.rewards-points{display:flex;align-items:baseline;gap:6px;margin-bottom:var(--space-xs)}.rewards-points strong{font-family:var(--font-headline);font-size:28px;font-weight:700;color:var(--color-on-surface)}.rewards-points span{font-size:14px;color:var(--color-on-surface-variant)}.rewards-progress{height:8px;background:var(--color-outline-variant);border-radius:var(--rounded-full);margin-bottom:var(--space-xs);overflow:hidden}.rewards-progress-fill{height:100%;background:var(--color-primary);border-radius:var(--rounded-full);transition:width .5s ease}.rewards-footer{display:flex;align-items:center;justify-content:space-between}.rewards-footer span{font-size:12px;color:var(--color-on-surface-variant)}.rewards-footer a{font-size:12px;font-weight:600;color:var(--color-primary);text-decoration:none}.line-items{margin-bottom:var(--space-lg)}.line-item{padding:var(--space-sm) 0;border-left:3px solid transparent;padding-left:var(--space-sm);cursor:pointer;transition:background .3s ease,box-shadow .3s ease,padding .3s ease,margin .3s ease}.line-item-status-ready{border-left-color:var(--color-tertiary)}.line-item-status-warming{border-left-color:var(--color-primary-container)}.line-item+.line-item{border-top:1px dashed rgba(113,51,35,.2)}.line-item-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-xs);transition:padding .3s ease}.line-item-name{font-size:16px;font-weight:600;color:var(--color-on-surface)}.line-item-price{font-family:var(--font-body);font-size:16px;font-weight:600;color:var(--color-on-surface);white-space:nowrap}.line-item-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:var(--rounded-full);margin-left:8px}.badge-ready{background:#2c4d3226;color:var(--color-tertiary)}.badge-warming{background:#8e4a3826;color:var(--color-primary-container)}.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.line-item-expand{font-size:13px;color:var(--color-on-surface-variant);margin-top:4px;display:flex;align-items:center;gap:4px;transition:opacity .2s ease}.line-item-expanded{padding:var(--space-md) var(--space-sm) var(--space-md) var(--space-sm);margin:4px calc(-1 * var(--space-xs));background:var(--color-surface-container-lowest);box-shadow:0 8px 32px #8e4a3833,0 2px 8px #00000014}.line-item-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.line-item-expanded .line-item-content{grid-template-rows:1fr}.line-item-content-inner{overflow:hidden}.line-item-image{width:100%;height:200px;object-fit:cover;border-radius:var(--rounded-md);margin:var(--space-sm) 0;opacity:0;transform:translateY(12px);transition:opacity .35s ease .1s,transform .35s ease .1s}.line-item-expanded .line-item-image{opacity:1;transform:translateY(0)}.line-item-details-section{margin-top:var(--space-sm)}.line-item-details-title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-on-surface-variant);margin-bottom:6px}.line-item-details-row{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--color-on-surface);margin-bottom:4px}.line-item-details-row svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--color-on-surface-variant)}.barista-note{background:var(--color-surface-container);border-radius:var(--rounded);padding:var(--space-sm);margin-top:var(--space-xs);display:flex;flex-direction:column;gap:4px}.barista-note-label{font-size:11px;font-weight:700;color:var(--color-on-surface-variant)}.barista-note-text{font-size:14px;font-style:italic;color:var(--color-on-surface)}.user-notes{margin-top:var(--space-sm)}.user-notes-input{width:100%;border:1px solid var(--color-outline-variant);border-radius:var(--rounded);padding:var(--space-sm);font-family:var(--font-body);font-size:14px;color:var(--color-on-surface);background:var(--color-surface-container-lowest);resize:none;min-height:40px;outline:none;transition:border-color .15s}.user-notes-input:focus{border-color:var(--color-primary)}.user-notes-input::placeholder{color:var(--color-outline)}.update-item-btn{margin-top:var(--space-sm);width:100%;background:var(--color-primary);color:var(--color-on-primary);border:none;border-radius:var(--rounded-md);padding:var(--space-sm) var(--space-md);font-family:var(--font-body);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;transition:transform .1s}.update-item-btn:active{transform:scale(.98)}.totals{border-top:1px dashed rgba(113,51,35,.2);padding-top:var(--space-sm);margin-bottom:var(--space-lg)}.totals-row{display:flex;justify-content:space-between;font-size:14px;color:var(--color-on-surface-variant);margin-bottom:4px}.totals-total{display:flex;justify-content:space-between;margin-top:var(--space-xs)}.totals-total span:first-child{font-family:var(--font-headline);font-size:22px;font-weight:700}.totals-total span:last-child{font-family:var(--font-headline);font-size:22px;font-weight:700;color:var(--color-primary)}.loyalty-cta{background:var(--color-surface-container);border-radius:var(--rounded-xl);padding:var(--space-xl) var(--space-lg);text-align:center;margin-bottom:var(--space-lg)}.loyalty-cta-icon{width:48px;height:48px;margin:0 auto var(--space-sm);color:var(--color-primary)}.loyalty-cta h3{font-family:var(--font-headline);font-size:20px;font-weight:700;margin-bottom:var(--space-xs)}.loyalty-cta p{font-size:14px;color:var(--color-on-surface-variant);margin-bottom:var(--space-md);line-height:1.5}.loyalty-cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--color-primary);color:var(--color-on-primary);border:none;border-radius:var(--rounded-md);padding:var(--space-sm) var(--space-lg);font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;transition:transform .1s;width:100%;justify-content:center}.loyalty-cta-btn:active{transform:scale(.98)}.footer{padding:var(--space-xl) 20px;text-align:center;border-top:1px solid var(--color-outline-variant)}.footer-social-title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-on-surface-variant);margin-bottom:var(--space-sm)}.footer-social-icons{display:flex;justify-content:center;gap:var(--space-md);margin-bottom:var(--space-lg)}.footer-social-icons a{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--color-on-surface);text-decoration:none;transition:color .15s}.footer-social-icons a:hover{color:var(--color-primary)}.footer-social-icons svg{width:20px;height:20px}.footer-receipt-section{padding-top:var(--space-lg);box-shadow:0 -4px 12px #8e4a380f;margin:0 -20px;padding-left:20px;padding-right:20px}.footer-links{display:flex;justify-content:center;gap:var(--space-md);margin-bottom:var(--space-sm)}.footer-links a{font-size:14px;font-weight:600;color:var(--color-on-surface);text-decoration:none}.footer-powered{font-size:12px;color:var(--color-outline);margin-bottom:4px}.footer-powered a{color:var(--color-primary);text-decoration:none;font-weight:600}.footer-copyright{font-size:12px;color:var(--color-outline)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:200;opacity:0;transition:opacity .3s;pointer-events:none}.modal-backdrop.open{opacity:1;pointer-events:auto}.modal-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--color-surface-container-lowest);border-radius:var(--rounded-xl) var(--rounded-xl) 0 0;padding:var(--space-sm) var(--space-lg) var(--space-xl);z-index:201;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,0,1);max-height:85vh;overflow-y:auto;touch-action:none}.modal-sheet.open{transform:translateY(0)}.modal-handle{width:40px;height:4px;background:var(--color-outline-variant);border-radius:var(--rounded-full);margin:0 auto var(--space-md)}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.modal-header h2{font-family:var(--font-headline);font-size:24px;font-weight:700}.modal-close{width:32px;height:32px;border:none;background:var(--color-surface-container);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-on-surface)}.modal-description{font-size:16px;color:var(--color-on-surface-variant);margin-bottom:var(--space-lg);line-height:1.5}.form-label{font-size:14px;font-weight:600;color:var(--color-on-surface);margin-bottom:var(--space-xs);display:block}.phone-input-row{display:flex;gap:var(--space-xs);margin-bottom:var(--space-lg)}.phone-prefix{display:flex;align-items:center;gap:4px;padding:var(--space-sm) var(--space-sm);border:1px solid var(--color-outline-variant);border-radius:var(--rounded);font-size:16px;background:var(--color-surface-container-lowest);color:var(--color-on-surface);white-space:nowrap}.phone-prefix svg{width:12px;height:12px;color:var(--color-outline)}.phone-input{flex:1;border:1px solid var(--color-outline-variant);border-radius:var(--rounded);padding:var(--space-sm);font-family:var(--font-body);font-size:16px;color:var(--color-on-surface);background:var(--color-surface-container-lowest)}.phone-input::placeholder{color:var(--color-outline)}.modal-submit-btn{width:100%;background:var(--color-primary);color:var(--color-on-primary);border:none;border-radius:var(--rounded-md);padding:var(--space-md);font-family:var(--font-body);font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .1s;margin-bottom:var(--space-md)}.modal-submit-btn:active{transform:scale(.98)}.modal-footer-text{text-align:center;font-size:14px;color:var(--color-on-surface-variant);margin-bottom:var(--space-xs)}.modal-footer-text a{color:var(--color-primary);text-decoration:none;font-weight:600}.modal-tos{text-align:center;font-size:12px;color:var(--color-outline)}.otp-container{display:flex;gap:var(--space-xs);justify-content:center;margin-bottom:var(--space-lg);border:1px solid var(--color-outline-variant);border-radius:var(--rounded);padding:var(--space-sm) var(--space-md)}.otp-digit{width:36px;height:44px;text-align:center;font-family:var(--font-body);font-size:24px;font-weight:600;border:none;background:transparent;color:var(--color-on-surface)}.otp-digit:focus{outline:none}