.kc-orders-page { max-width: 820px; }
.kc-orders-header { display: grid; gap: 13px; margin: 0 -18px; padding: 13px 18px 0; border-bottom: 1px solid var(--kc-border); background: #fff; }
.kc-orders-brand { display: flex; align-items: center; gap: 10px; font-weight: 950; }
.kc-orders-brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: linear-gradient(145deg, var(--kc-blue), var(--kc-blue-dark)); color: #fff; font-size: 15px; }
.kc-orders-header h1 { margin: 0; font-size: 20px; letter-spacing: -.35px; }
.kc-orders-back { color: var(--kc-blue) !important; font-size: 13px; font-weight: 900; }
.kc-orders-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; overflow-x: auto; }
.kc-orders-tab { min-width: 0; padding: 10px 5px 11px; border-bottom: 3px solid transparent; color: var(--kc-muted) !important; font-size: 11.5px; font-weight: 900; text-align: center; white-space: nowrap; }
.kc-orders-tab.is-active { border-color: var(--kc-blue); color: var(--kc-blue) !important; }
.kc-orders-guest { padding: 34px 0 8px; text-align: center; }
.kc-orders-guest-icon, .kc-order-result-icon { display: grid; width: 78px; height: 78px; margin: 0 auto 17px; place-items: center; border-radius: 50%; background: var(--kc-soft-blue); font-size: 34px; }
.kc-orders-guest h2, .kc-order-result h2 { margin: 0 0 8px; font-size: clamp(22px, 5vw, 30px); letter-spacing: -.6px; }
.kc-orders-guest > p, .kc-order-result > p { max-width: 470px; margin: 0 auto 22px; color: var(--kc-muted); font-size: 13px; line-height: 1.55; }
.kc-orders-benefits { display: grid; margin: 0 auto 20px; padding: 8px 17px; border: 1px solid var(--kc-border); border-radius: 22px; background: #fff; box-shadow: var(--kc-shadow); text-align: left; }
.kc-orders-benefit { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #edf1f6; font-size: 13px; font-weight: 850; }
.kc-orders-benefit:last-child { border-bottom: 0; }
.kc-orders-primary, .kc-order-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 11px 16px; border: 0; border-radius: 15px; background: var(--kc-blue); color: #fff !important; font-weight: 950; }
.kc-orders-primary { width: 100%; }
.kc-orders-guest-note, .kc-order-private-note { margin: 13px auto 0; color: var(--kc-muted); font-size: 11.5px; line-height: 1.5; text-align: center; }
.kc-orders-future-status { min-height: 20px; margin-top: 9px; color: var(--kc-blue-dark); font-size: 12px; font-weight: 850; }
.kc-orders-empty { max-width: 440px; margin: 0 auto; padding: 46px 0 14px; text-align: center; }
.kc-orders-empty h2 { margin: 0 0 7px; font-size: 23px; }
.kc-orders-empty p { margin: 0 0 20px; color: var(--kc-muted); font-size: 13px; }
.kc-order-list { display: grid; gap: 12px; padding-top: 18px; }
.kc-order-list-card { padding: 16px; border: 1px solid var(--kc-border); border-radius: 21px; background: #fff; box-shadow: var(--kc-shadow); cursor: pointer; }
.kc-order-list-card:focus-visible { outline: 3px solid rgba(247, 190, 0, .8); outline-offset: 2px; }
.kc-order-list-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 11px; }
.kc-order-business { display: flex; min-width: 0; align-items: center; gap: 10px; }
.kc-order-business-logo { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 13px; background: var(--kc-soft-blue); color: var(--kc-blue); font-weight: 950; }
.kc-order-business span:last-child { min-width: 0; }
.kc-order-business strong, .kc-order-business small { display: block; }
.kc-order-business strong { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.kc-order-business small { margin-top: 3px; color: var(--kc-muted); font-size: 10.8px; line-height: 1.35; }
.kc-order-list-summary { margin: 14px 0 0; color: var(--kc-muted); font-size: 12.5px; }
.kc-order-list-summary strong { color: var(--kc-text); }
.kc-order-list-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.kc-order-list-actions > :only-child { grid-column: 1 / -1; }
.kc-order-cancel-reason { margin: 13px 0 0; padding: 10px 11px; border-radius: 12px; background: #fff0f0; color: #8f1d1d; font-size: 11.5px; line-height: 1.45; }
.kc-orders-more { display: flex; min-height: 46px; align-items: center; justify-content: center; margin-top: 15px; border: 1px solid var(--kc-border); border-radius: 15px; background: #fff; color: var(--kc-blue) !important; font-size: 12.5px; font-weight: 900; }
.kc-order-result { padding: 26px 0 6px; text-align: center; }
.kc-order-result-icon { background: #e8f5e9; color: #2e7d32; font-size: 30px; font-weight: 950; }
.kc-order-result.is-cancelled .kc-order-result-icon, .kc-order-result.is-error .kc-order-result-icon { background: #fff0f0; color: #b42318; }
.kc-order-result.is-completed .kc-order-result-icon { background: #edf1f6; color: #475467; }
.kc-order-card { margin-top: 15px; padding: 19px; border: 1px solid var(--kc-border); border-radius: 24px; background: #fff; box-shadow: var(--kc-shadow); }
.kc-order-card-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; padding-bottom: 15px; border-bottom: 1px solid #edf1f6; }
.kc-order-card-head h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.4px; }
.kc-order-card-head p { margin: 0; color: var(--kc-muted); font-size: 12px; }
.kc-order-status { display: inline-flex; flex: 0 0 auto; min-height: 29px; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--kc-soft-blue); color: var(--kc-blue); font-size: 11px; font-weight: 950; }
.kc-order-status.is-ready { background: #e8f5e9; color: #2e7d32; }
.kc-order-status.is-completed { background: #edf1f6; color: #475467; }
.kc-order-status.is-cancelled { background: #fff0f0; color: #b42318; }
.kc-order-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.kc-order-summary-item { min-width: 0; padding: 11px; border-radius: 14px; background: #f6f8fb; }
.kc-order-summary-item span { display: block; margin-bottom: 4px; color: var(--kc-muted); font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.kc-order-summary-item strong { display: block; overflow-wrap: anywhere; font-size: 13px; }
.kc-order-callout { margin-top: 13px; padding: 13px 14px; border-radius: 16px; background: var(--kc-soft-blue); }
.kc-order-callout strong { display: block; margin-bottom: 4px; color: var(--kc-blue); font-size: 13px; }
.kc-order-callout p { margin: 0; color: #4a5c72; font-size: 12px; line-height: 1.5; }
.kc-order-section-title { margin: 21px 0 8px; font-size: 16px; }
.kc-order-items { border-top: 1px solid #edf1f6; }
.kc-order-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid #edf1f6; }
.kc-order-item strong, .kc-order-item span { display: block; }
.kc-order-item small { display: block; margin-top: 3px; color: var(--kc-muted); font-size: 11.5px; }
.kc-order-item-price { text-align: right; white-space: nowrap; }
.kc-order-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 13px; font-weight: 950; }
.kc-order-total strong { color: var(--kc-blue); font-size: 19px; }
.kc-order-timeline { display: grid; }
.kc-order-event { display: grid; min-height: 72px; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.kc-order-event-marker { display: flex; align-items: center; flex-direction: column; }
.kc-order-event-dot { width: 12px; height: 12px; flex: 0 0 auto; margin-top: 3px; border-radius: 50%; background: var(--kc-blue); }
.kc-order-event-line { width: 2px; flex: 1; min-height: 38px; margin-top: 4px; background: var(--kc-border); }
.kc-order-event:last-child .kc-order-event-line { visibility: hidden; }
.kc-order-event strong { display: block; font-size: 13.5px; }
.kc-order-event p { margin: 3px 0; color: var(--kc-muted); font-size: 12px; line-height: 1.45; }
.kc-order-event time { color: #98a2b3; font-size: 11px; }
.kc-order-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 20px; }
.kc-order-button { width: 100%; }
.kc-order-button.is-secondary { border: 1px solid var(--kc-border); background: #fff; color: var(--kc-blue) !important; }
.kc-order-button.is-danger { border: 1px solid #fecaca; background: #fff0f0; color: #b42318 !important; }
.kc-order-actions form { display: contents; }
.kc-order-flash { margin-top: 15px; padding: 12px 14px; border: 1px solid #a7f3d0; border-radius: 15px; background: #ecfdf5; color: #065f46; font-size: 13px; font-weight: 850; }
.kc-order-save-card { margin-top: 16px; padding: 18px; border-radius: 24px; background: linear-gradient(145deg, var(--kc-blue), var(--kc-blue-dark)); color: #fff; box-shadow: 0 12px 32px rgba(13, 90, 155, .22); }
.kc-order-save-kicker { margin: 0 0 4px; color: var(--kc-yellow); font-size: 10.5px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.kc-order-save-card h2 { margin: 0 0 7px; font-size: 20px; }
.kc-order-save-card > p:not(.kc-order-save-kicker) { margin: 0 0 14px; color: #d7e7f5; font-size: 12.5px; line-height: 1.45; }
.kc-order-save-button { width: 100%; min-height: 46px; border: 0; border-radius: 15px; background: var(--kc-yellow); color: #111827; font-weight: 950; }
.kc-order-overlay { position: fixed; inset: 0; z-index: 90; display: none; align-items: flex-end; justify-content: center; padding: 15px; background: rgba(15, 26, 40, .55); }
.kc-order-overlay.is-open { display: flex; }
.kc-order-modal-open { overflow: hidden; }
.kc-order-sheet { width: min(100%, 560px); max-height: min(88vh, 780px); overflow-y: auto; padding: 18px 20px calc(22px + env(safe-area-inset-bottom)); border-radius: 26px 26px 18px 18px; background: #fff; box-shadow: 0 -18px 44px rgba(15, 26, 40, .18); }
.kc-order-detail-sheet { width: min(100%, 660px); }
.kc-order-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kc-order-sheet-head p { margin: 3px 0 0; color: var(--kc-muted); font-size: 11.5px; }
.kc-order-modal-close { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 50%; background: #f4f6f9; color: var(--kc-muted); font-size: 23px; }
.kc-order-detail-body { padding-top: 12px; }
.kc-order-detail-status-row { display: flex; justify-content: flex-end; }
.kc-order-loading, .kc-order-error { padding: 25px 0; color: var(--kc-muted); font-size: 13px; text-align: center; }
.kc-order-error { color: #b42318; }
.kc-order-sheet h2 { margin: 0 0 4px; font-size: 20px; }
.kc-order-sheet > p { margin: 0 0 15px; color: var(--kc-muted); font-size: 12.5px; }
.kc-order-contact-list { display: grid; gap: 9px; }
.kc-order-contact-action { display: flex; width: 100%; min-height: 50px; align-items: center; gap: 11px; padding: 0 13px; border: 1px solid var(--kc-border); border-radius: 15px; background: #fff; color: var(--kc-text); font-weight: 900; text-align: left; }
.kc-order-contact-action.is-primary { border-color: var(--kc-blue); background: var(--kc-blue); color: #fff; }
.kc-order-contact-action small { margin-left: auto; color: inherit; font-weight: 700; }
.kc-order-sheet-close { width: 100%; min-height: 44px; margin-top: 10px; border: 0; border-radius: 14px; background: #f5f7fa; color: var(--kc-muted); font-weight: 900; }
.kc-order-toast { position: fixed; right: 18px; bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 110; padding: 10px 14px; border-radius: 999px; background: #111827; color: #fff; font-size: 12px; font-weight: 850; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .18s ease; }
.kc-order-toast.is-visible { opacity: 1; transform: none; }
.kc-reorder-status { margin-bottom: 12px; padding: 10px 12px; border-radius: 13px; font-size: 12px; font-weight: 850; line-height: 1.4; }
.kc-reorder-status.is-ok { background: #e8f5e9; color: #22723a; }
.kc-reorder-status.is-warning { background: #fff6dc; color: #8a5a00; }
.kc-reorder-items { border-top: 1px solid #edf1f6; border-bottom: 1px solid #edf1f6; }
.kc-reorder-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #edf1f6; }
.kc-reorder-item:last-child { border-bottom: 0; }
.kc-reorder-item.is-unavailable { opacity: .58; }
.kc-reorder-item strong, .kc-reorder-item small, .kc-reorder-price del { display: block; }
.kc-reorder-item small { margin-top: 3px; color: var(--kc-muted); font-size: 11px; }
.kc-reorder-price { text-align: right; white-space: nowrap; }
.kc-reorder-price del { color: var(--kc-muted); font-size: 10.5px; }
.kc-reorder-price.is-changed strong { color: #946200; }
.kc-reorder-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; font-size: 13px; font-weight: 900; }
.kc-reorder-total strong { color: var(--kc-blue); font-size: 18px; }
.kc-reorder-add { width: 100%; }
.kc-order-footer { padding: 24px 8px 4px; color: var(--kc-muted); font-size: 11.5px; line-height: 1.55; text-align: center; }
.kc-orders-primary:focus-visible, .kc-order-button:focus-visible, .kc-order-contact-action:focus-visible, .kc-order-sheet-close:focus-visible { outline: 3px solid rgba(247, 190, 0, .8); outline-offset: 2px; }
@media (min-width: 760px) { .kc-orders-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kc-orders-benefit { align-items: start; border-right: 1px solid #edf1f6; border-bottom: 0; padding: 14px; } .kc-orders-benefit:last-child { border-right: 0; } .kc-order-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kc-order-summary { grid-template-columns: 1fr; } .kc-order-actions { grid-template-columns: 1fr; } .kc-order-card-head { align-items: flex-start; flex-direction: column; } }
@media (max-width: 420px) { .kc-orders-header { margin-right: -12px; margin-left: -12px; padding-right: 12px; padding-left: 12px; } .kc-order-card { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .kc-order-toast { transition: none; } }

/* Run 10: opt-in PWA/Web Push order status notifications. */
.kc-order-push-card { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px 14px; margin-top: 16px; padding: 17px; border: 1px solid #cfe0f1; border-radius: 22px; background: linear-gradient(145deg,#f7fbff,#edf3fb); }
.kc-order-push-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; background: #fff; box-shadow: 0 5px 15px rgba(13,90,155,.12); font-size: 20px; }
.kc-order-push-copy { min-width: 0; }
.kc-order-push-kicker { margin: 0 0 3px; color: var(--kc-blue); font-size: 10px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.kc-order-push-copy h2 { margin: 0 0 5px; font-size: 17px; }
.kc-order-push-copy > p:not(.kc-order-push-kicker):not(.kc-order-push-status) { margin: 0; color: var(--kc-muted); font-size: 12px; line-height: 1.5; }
.kc-order-push-status { margin: 8px 0 0; color: #4a5c72; font-size: 11.5px; font-weight: 800; line-height: 1.4; }
.kc-order-push-status.is-on { color: #22723a; }
.kc-order-push-status.is-error { color: #b42318; }
.kc-order-push-actions { display: flex; grid-column: 1 / -1; gap: 8px; flex-wrap: wrap; }
.kc-order-push-button { min-height: 43px; flex: 1 1 190px; padding: 0 15px; border: 0; border-radius: 14px; background: var(--kc-blue); color: #fff; font-weight: 950; }
.kc-order-push-button.is-secondary { border: 1px solid var(--kc-border); background: #fff; color: var(--kc-blue); }
.kc-order-push-button:disabled { cursor: not-allowed; opacity: .58; }
.kc-order-push-button:focus-visible { outline: 3px solid rgba(247,190,0,.8); outline-offset: 2px; }