.company-phone-preview { --cp-primary:#FF4E24; --cp-background:#F1F2F6; --cp-bonus:#6C59E6; --cp-surface:#FFFFFF; --cp-text:#2D2D2D; --cp-muted:#757575; --cp-line:#E6E9EF; width:100%; max-width:420px; margin-inline:auto; color:var(--text,#172033); }
.company-phone-preview * { box-sizing:border-box; }
.cp-caption { display:flex; flex-direction:column; gap:3px; margin-bottom:12px; }
.cp-caption strong { font-size:19px; overflow-wrap:anywhere; }.cp-caption span,.cp-description { color:var(--text-muted,#64748b); font-size:12px; }
.cp-page-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:15px; }.cp-page-tabs button,.cp-navigation button { font:inherit; font-size:12px; border:1px solid var(--border,#dbe0e8); background:var(--surface,#fff); color:var(--text,#172033); border-radius:9px; padding:7px 10px; cursor:pointer; }.cp-page-tabs button[aria-pressed=true] { background:#152238; color:#fff; border-color:#152238; }
.cp-device { width:min(100%,350px); margin-inline:auto; border:7px solid #16202e; border-radius:39px; overflow:hidden; box-shadow:0 18px 45px #1720331c; background:var(--cp-background); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; line-height:1.35; }
.cp-status { position:relative; height:33px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; font-weight:700; font-size:11px; background:var(--cp-background); color:var(--cp-text); }.cp-island { position:absolute; width:80px; height:19px; top:5px; left:calc(50% - 40px); background:#16202e; border-radius:20px; }.cp-home { height:18px; background:var(--cp-background); position:relative; }.cp-home:after { content:''; position:absolute; width:94px; height:4px; background:var(--cp-text); border-radius:9px; top:7px; left:calc(50% - 47px); }
.cp-stage { height:570px; position:relative; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--cp-line) transparent; background:var(--cp-background); color:var(--cp-text); }.cp-stage button { font:inherit; color:inherit; cursor:pointer; }.cp-stage h1,.cp-stage h2,.cp-stage h3,.cp-stage p { margin:0; }.cp-stage h1 { font-size:24px; font-weight:750; }.cp-stage h2 { font-size:20px; font-weight:750; margin:17px 0 12px; }.cp-stage h3 { font-size:15px; font-weight:700; }.cp-stage p,.cp-stage small { font-size:12px; color:var(--cp-muted); }.cp-stage button:focus-visible { outline:3px solid var(--cp-ink); outline-offset:3px; }
.cp-menu-header,.cp-sheet-header { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--cp-background); padding:13px 15px; }.cp-address { display:flex; align-items:center; gap:10px; min-width:0; font-size:14px; }.cp-address small { display:block; margin-top:2px; }.cp-delivery-icon { width:38px; height:38px; background:var(--cp-surface); color:var(--cp-ink); border-radius:12px; display:grid; place-items:center; font-size:25px; }.cp-profile-open { border:0; padding:0; background:transparent; display:grid; place-items:center; }
.cp-avatar { width:42px; height:42px; border-radius:50%; display:inline-grid; place-items:center; overflow:hidden; vertical-align:middle; }.cp-avatar-large { width:65px; height:65px; }.cp-avatar img { width:100%; height:100%; object-fit:contain; }.cp-menu-body,.cp-sheet-body { padding:0 15px 20px; }.cp-stories { display:flex; gap:10px; overflow:auto; margin:2px 0 16px; }.cp-stories div { min-width:68px; text-align:center; }.cp-stories span { display:grid; place-items:center; height:72px; font-size:36px; border-radius:15px; background:var(--cp-surface); border:2px solid var(--cp-primary); }.cp-stories small { display:block; font-size:10px; margin-top:5px; }
.cp-categories { display:flex; gap:7px; overflow:auto; padding-bottom:4px; }.cp-categories button { border:0; border-radius:20px; background:var(--cp-surface); padding:9px 12px; white-space:nowrap; font-size:12px; }.cp-categories button.is-selected { background:var(--cp-text); color:var(--cp-background); }.cp-products { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.cp-product { padding:9px; border-radius:16px; background:var(--cp-surface); min-width:0; }.cp-product-photo { width:100%; border:0; border-radius:10px; background:var(--cp-card); height:110px; display:grid; place-items:center; }.cp-food { font-size:63px; }.cp-product h3 { margin:9px 0 4px; font-size:13px; }.cp-product p { font-size:10px; min-height:28px; }.cp-product-add { width:100%; border:0; border-radius:20px; background:var(--cp-button-catalog-price); color:var(--cp-on-button-catalog-price)!important; padding:9px 4px; font-size:12px!important; font-weight:700!important; margin-top:9px; }
.cp-delivery-bar { position:sticky; bottom:0; display:flex; justify-content:space-between; gap:8px; padding:15px 14px; background:var(--cp-background); border-top:1px solid var(--cp-line); font-size:12px; }.cp-delivery-bar span { font-size:10px; color:var(--cp-muted); }.cp-cart-fab { position:sticky; bottom:66px; margin-left:auto; margin-right:13px; display:flex; align-items:center; justify-content:center; gap:8px; width:75px; height:47px; border:0; border-radius:24px; background:var(--cp-button-menu); color:var(--cp-on-button-menu)!important; box-shadow:0 5px 15px #0002; margin-top:-47px; z-index:3; font-size:18px!important; }
.cp-sheet-header { border-bottom:1px solid var(--cp-line); font-size:17px; }.cp-sheet-header>span { width:34px; }.cp-icon-button { border:0; background:var(--cp-surface); border-radius:50%; width:34px; height:34px; font-size:26px!important; display:grid; place-items:center; }.cp-product-hero { min-height:210px; background:var(--cp-card); border-radius:18px; display:grid; place-items:center; font-size:130px; margin:14px 0; }.cp-sheet-body>p { margin:9px 0; line-height:1.6; }.cp-size-options { display:flex; gap:6px; padding:5px; background:var(--cp-control); border-radius:13px; margin:18px 0; }.cp-size-options span { flex:1; text-align:center; padding:9px; font-size:12px; }.cp-size-options .is-selected { background:var(--cp-surface); border-radius:10px; }.cp-info-grid { display:flex; gap:12px; color:var(--cp-muted); font-size:12px; margin:18px 0; }.cp-sticky-action { position:sticky; bottom:0; padding:12px 15px; background:var(--cp-background); border-top:1px solid var(--cp-line); }.cp-action { width:100%; border:0; border-radius:24px; padding:13px 12px; font-weight:700!important; font-size:14px!important; background:var(--cp-screen-button); color:var(--cp-on-screen-button)!important; }
.cp-cart-item { display:flex; align-items:center; gap:9px; padding:16px 0; }.cp-food-small { font-size:43px; }.cp-cart-item>div:nth-child(2) { flex:1; }.cp-cart-item small,.cp-cart-item b { display:block; margin-top:4px; font-size:11px; }.cp-quantity { display:flex; gap:5px; align-items:center; background:var(--cp-surface); border-radius:20px; padding:3px; font-size:12px; }.cp-quantity-button { border:0; background:transparent; padding:5px; }.cp-recommendations { display:flex; gap:8px; margin:12px 0; }.cp-recommendations span { flex:1; padding:13px 9px; background:var(--cp-card); border-radius:12px; font-size:11px; }.cp-panel { display:flex; flex-direction:column; gap:5px; padding:15px; background:var(--cp-card); border-radius:15px; margin:12px 0; font-size:13px; }.cp-panel small { font-size:11px; }.cp-bonus-row { flex-direction:row; align-items:center; gap:11px; }.cp-bonus-row>div { flex:1; }.cp-total { display:flex; justify-content:space-between; font-size:16px; margin:23px 0; }
.cp-person { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:18px 0; }.cp-person h1 { margin:5px 0; }.cp-quick-cards { display:grid; grid-template-columns:1.25fr 1fr; gap:9px; }.cp-bonus-card,.cp-quick-card { border:0; border-radius:15px; padding:14px; display:flex; flex-direction:column; gap:9px; text-align:left; font-size:11px!important; background:var(--cp-surface); }.cp-bonus-card { background:var(--cp-bonus); color:var(--cp-on-bonus)!important; }.cp-bonus-card small { color:var(--cp-on-bonus); }.cp-bonus-card strong,.cp-quick-card strong { font-size:28px; }.cp-bonus-card strong { display:flex; align-items:center; gap:5px; }.cp-coin { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; vertical-align:middle; }.cp-coin img { max-width:100%; max-height:100%; object-fit:contain; }.cp-coin>span { display:inline-flex; width:100%; height:100%; align-items:center; justify-content:center; color:var(--cp-bonus-ink); }.cp-coin-symbol { width:100%; height:100%; display:block; }.cp-promo { display:flex; gap:12px; padding:16px; background:var(--cp-surface); border-radius:15px; margin-bottom:14px; }.cp-promo>span { font-size:36px; }.cp-promo p { margin-top:6px; }.cp-referral { padding:17px; background:var(--cp-surface); border-radius:17px; margin:14px 0; }.cp-referral p { margin:8px 0 14px; }
.cp-stage-bonus,.cp-stage-bonus .cp-sheet-header { background:var(--cp-bonus); color:var(--cp-on-bonus); }.cp-stage-bonus .cp-sheet-header { border-color:var(--cp-on-bonus); }.cp-stage-bonus .cp-icon-button { color:var(--cp-on-bonus); background:transparent; }.cp-bonus-content { padding:30px 20px 50px; }.cp-bonus-label { font-size:15px; }.cp-balance { font-size:66px; line-height:1.3; display:flex; align-items:center; gap:13px; font-weight:750; margin:10px 0; }.cp-balance .cp-coin { width:45px; height:45px; }.cp-balance .cp-coin>span { font-size:45px; }.cp-stage-bonus p { color:var(--cp-on-bonus); font-size:13px; line-height:1.7; }.cp-bonus-explanation { border:1px solid var(--cp-on-bonus); border-radius:16px; padding:16px; margin:27px 0; }.cp-bonus-explanation h2 { margin:0 0 10px; font-size:20px; }.cp-bonus-history { display:flex; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--cp-on-bonus); font-size:12px; }.cp-settings-avatar { display:flex; flex-direction:column; gap:12px; align-items:center; margin:24px 0; font-size:14px; }.cp-avatar-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }.cp-avatar-grid button { border:2px solid transparent; border-radius:13px; background:transparent; padding:4px; }.cp-avatar-grid button.is-selected { border-color:var(--cp-primary); }.cp-navigation { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:15px auto 0; max-width:350px; }.cp-navigation span { font-size:12px; color:var(--text-muted,#64748b); }.cp-navigation button:disabled { opacity:.35; cursor:default; }.cp-description { line-height:1.6; margin:12px 0 0; }.cp-feedback { min-height:22px; margin-top:7px; font-size:12px; color:var(--text-muted,#64748b); }.company-phone-preview [hidden] { display:none!important; }
@media(max-width:380px){.cp-stage{height:530px}.cp-device{border-width:5px}.cp-menu-body,.cp-sheet-body{padding-inline:11px}.cp-page-tabs button{padding:6px 8px;font-size:11px}.cp-avatar-grid{gap:4px}.cp-avatar-grid .cp-avatar{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.company-phone-preview *{scroll-behavior:auto!important}}

.cp-bonus-explanation .cp-action { margin-top:15px; }.cp-coin img { background:transparent; }

.cp-menu-account{position:relative;display:block;width:48px;height:52px;margin-top:4px}.cp-menu-avatar-frame{position:absolute;top:0;left:0;display:grid;place-items:center;width:46px;height:46px;border:1px solid #EEEEEE;border-radius:50%;background:var(--cp-surface)}.cp-menu-balance{position:absolute;right:-4px;bottom:-3px;display:flex;align-items:center;gap:2px;border:0;border-radius:10px;background:var(--cp-surface);color:var(--cp-text);padding:2px 6px;font-size:11px!important;line-height:1;font-weight:700!important;box-shadow:0 1px 4px #0000001A}.cp-menu-balance .cp-coin{width:12px;height:12px}.cp-menu-balance .cp-coin>span{font-size:12px}.cp-coin [data-phone-generic-coin]{display:inline-flex;width:100%;height:100%}

.cp-campaign-summary{display:flex;align-items:center;gap:8px;margin:10px 0 16px;font-size:11px}.cp-campaign-summary>span{flex:1}.cp-campaign-summary s{color:var(--cp-muted)}.cp-campaign-price{padding:8px 12px;border-radius:18px;background:var(--cp-campaign-background);color:var(--cp-feature-campaign);font-size:13px}.cp-bonus-spend{background:var(--cp-bonus-spend-background);color:var(--cp-feature-bonus-spend)}.cp-bonus-spend small,.cp-bonus-spend .cp-coin>span{color:var(--cp-feature-bonus-spend)}.cp-gift-tabs{display:flex;gap:20px;margin:20px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--cp-line);font-size:13px}.cp-gift-selected{color:var(--cp-gift-accent-text);border-bottom:3px solid var(--cp-gift-accent);padding-bottom:8px}.cp-gift-pills{display:flex;gap:9px;margin-bottom:14px}.cp-gift-pill{flex:1;border:0;border-radius:18px;padding:14px 10px;background:var(--cp-gift-background);color:var(--cp-feature-gift)!important;font-size:12px!important}.cp-gift-card>span{font-size:62px;align-self:center;margin:6px}.cp-gift-action{background:var(--cp-gift-accent);color:var(--cp-feature-on-gift)!important}.cp-gift-payment{gap:12px;margin-top:20px}.cp-gift-payment-action{background:var(--cp-gift-payment-accent);color:var(--cp-feature-on-gift-payment)!important}

.cp-campaign-summary>.cp-campaign-marker{flex:0;padding:5px 7px;border-radius:7px;background:var(--cp-campaign-accent);color:var(--cp-on-campaign)}.cp-bonus-spend strong{color:var(--cp-bonus-spend-label)}