/* Customer-facing refinement; brand colours continue to come from merchant settings. */ #yatoon-wrap#yatoon-wrap{--yt-surface:#fff;--yt-line:#e6e8eb;--yt-muted:#596579} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap{max-width:1180px;margin-inline:auto;padding:16px;color:#17202d;background:#fafbfc;line-height:1.5} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-menu-header{padding:10px 14px;margin-bottom:12px;border:1px solid var(--yt-line);box-shadow:none;border-radius:12px} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-pickup-banner,#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-trust-row{display:none} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-ordering-status{margin:0;padding:8px 0;background:none;border:0;border-radius:0;gap:10px;font-size:13px} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-ordering-status strong{white-space:normal;text-align:right} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-biz-hours{margin:0 0 4px;font-size:12px;color:var(--yt-muted)} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-service-context{display:flex;align-items:center;gap:12px;padding:8px 14px;border:1px solid var(--yt-line);border-radius:12px;background:#fff;margin-bottom:8px;font-size:13px} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-service-context select{flex:1;min-width:0;background:#fff;border:0;min-height:40px;font:inherit;font-weight:600;color:inherit} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-hero-banner{padding:18px;border-radius:12px;margin-bottom:12px} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-hero-title{font-size:24px;line-height:1.25} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-search-wrap{margin:0 0 8px;border:1px solid var(--yt-line);box-shadow:none;border-radius:12px} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-cat-nav{box-shadow:none;border-bottom:1px solid var(--yt-line);margin-bottom:12px;border-radius:0;background:#fafbfc} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-cat-tab{min-height:44px;padding-inline:14px} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-featured-wrap{padding:12px;background:#f1f4f6;border:0;border-radius:12px;margin:0 0 22px;box-shadow:none} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-featured-header{margin-bottom:8px} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-featured-header h2{font-size:17px;margin:0} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-feat-card{box-shadow:none;border:1px solid var(--yt-line);border-radius:10px;flex:0 0 148px;width:148px} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-feat-img,#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-feat-img-wrap{height:88px;min-height:0;object-fit:cover} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-feat-name{font-size:14px;line-height:1.35;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-item{border:1px solid var(--yt-line);border-radius:12px;box-shadow:none;padding:16px;gap:14px;background:#fff} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-item-name{font-size:16px;line-height:1.4;font-weight:650;overflow-wrap:anywhere} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-item-desc{font-size:13px;line-height:1.5;color:var(--yt-muted)} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-item-price{font-size:16px;margin-top:8px} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-item-img-wrap{flex:0 0 96px;width:96px;min-width:0;align-self:center} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-item-img{width:96px;height:84px;object-fit:cover;border-radius:10px} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-item.no-image .yatoon-item-img-wrap{flex-basis:48px;width:48px;background:none} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-item-add-circle,#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-feat-add{width:44px;height:44px;min-width:44px;min-height:44px;box-shadow:0 2px 8px #18223020} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-section-title{font-size:21px;margin-top:22px;line-height:1.3} #yatoon-app#yatoon-app .yatoon-checkout-sheet,#yatoon-app#yatoon-app .yatoon-modal,#yatoon-app#yatoon-app .yatoon-auth-sheet{color:#17202d} #yatoon-app#yatoon-app .yatoon-checkout-sheet input,#yatoon-app#yatoon-app .yatoon-checkout-sheet textarea,#yatoon-app#yatoon-app .yatoon-checkout-sheet select,#yatoon-app#yatoon-app .yatoon-modal input,#yatoon-app#yatoon-app .yatoon-modal textarea{font-size:16px;max-width:100%;box-sizing:border-box} #yatoon-app#yatoon-app .yatoon-slot-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;min-width:0} #yatoon-app#yatoon-app .yatoon-slot-picker label{font-size:12px;margin:0} #yatoon-app#yatoon-app .yatoon-slot-picker label[for="yatoon-slot-date"]{grid-column:1;grid-row:1} #yatoon-app#yatoon-app .yatoon-slot-picker label[for="yatoon-slot-time"]{grid-column:2;grid-row:1} #yatoon-app#yatoon-app .yatoon-slot-picker select{width:100%;min-width:0;min-height:44px;border:1px solid #d7dde5;border-radius:8px;padding:8px;background:#fff;grid-row:2} #yatoon-app#yatoon-app .yatoon-slot-status{grid-column:1/-1;font-size:12px;color:#596579;margin:2px 0} #yatoon-app#yatoon-app #yatoon-refresh-times{justify-self:start;grid-column:1/-1} #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-form-row{margin-bottom:16px} #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-order-review{border:1px solid #e6e8eb;background:#fafbfc;box-shadow:none;border-radius:10px;padding:12px} #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-time-opt{min-height:44px;white-space:normal} #yatoon-app#yatoon-app .yatoon-reorder-dialog{width:520px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 40px);overflow:auto;box-sizing:border-box;border:1px solid #d7dde5;border-radius:16px;padding:24px;background:#fff;color:#17202d;font:inherit;box-shadow:0 20px 70px #11182730} #yatoon-app#yatoon-app .yatoon-reorder-dialog::backdrop{background:#10182880} #yatoon-app#yatoon-app .yatoon-reorder-dialog h2{font-size:22px;margin:0 0 10px} #yatoon-app#yatoon-app .yatoon-reorder-dialog p,#yatoon-app#yatoon-app .yatoon-reorder-dialog li{font-size:14px;line-height:1.6;overflow-wrap:anywhere} #yatoon-app#yatoon-app .yatoon-reorder-dialog ul{padding-left:20px} #yatoon-app#yatoon-app .yatoon-reorder-changes{color:#8b4712} #yatoon-app#yatoon-app .yatoon-reorder-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} #yatoon-app#yatoon-app .yatoon-reorder-actions button{width:auto;flex:1;min-height:44px;margin:0} @media(max-width:640px){#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap{padding:12px 12px 92px}#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-hero-banner{padding:14px}#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-hero-title{font-size:20px}#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-hero-sub{font-size:13px}#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-item{padding:14px;gap:12px}#yatoon-app#yatoon-app .yatoon-checkout-sheet{max-height:calc(100dvh - 16px);border-radius:16px 16px 0 0}#yatoon-app#yatoon-app .yatoon-reorder-dialog{padding:20px}#yatoon-app#yatoon-app .yatoon-reorder-actions{flex-direction:column}#yatoon-app#yatoon-app .yatoon-reorder-actions button{flex:none;width:100%}} @media(prefers-reduced-motion:reduce){#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap *, #yatoon-app#yatoon-app .yatoon-reorder-dialog{scroll-behavior:auto;transition:none;animation:none}} #yatoon-app#yatoon-app #yatoon-drawer:not(.open):not(.is-dragging){visibility:hidden;pointer-events:none}#yatoon-app#yatoon-app #yatoon-drawer.open,#yatoon-app#yatoon-app #yatoon-drawer.is-dragging{visibility:visible;pointer-events:auto} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-item{min-height:126px;align-items:center}#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-item.no-image{min-height:112px}#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-item.no-image .yatoon-item-img-wrap{height:44px;min-height:0}#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-item.no-image .yatoon-item-add-circle{position:static;transform:none;margin:0}#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-item-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .yatoon-price-breakdown{margin:10px 0 18px;border:1px solid #e6e8eb;border-radius:10px;background:#fafbfc}.yatoon-price-breakdown summary{padding:12px;cursor:pointer;font-size:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.yatoon-price-breakdown summary strong{margin-left:auto}.yatoon-price-breakdown summary span{width:100%;font-size:12px;color:#596579}.yatoon-price-breakdown #yatoon-order-totals{border:0;margin:0;background:transparent}.yatoon-checkout-sheet .yatoon-price-breakdown{flex-shrink:0} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-compact-menu .yatoon-search-wrap{margin:8px 0;padding:0} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-compact-menu .yatoon-location-note{display:none} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-compact-menu .yatoon-search-box{min-height:48px;border-radius:10px;margin:0} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-compact-menu .yatoon-cat-nav{margin:8px 0;padding:0} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-compact-menu .yatoon-section{padding-top:8px} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-compact-menu .yatoon-section-title{margin:10px 0 12px;font-size:21px} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-compact-service{display:flex!important;align-items:center;gap:8px;padding:0;margin:0 0 8px;min-width:0} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-compact-service .yatoon-ordering-status{margin:0;padding:9px 12px;min-height:42px;flex:1;box-shadow:none;border-radius:10px;gap:8px} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-compact-menu .yatoon-service-context{padding:6px 12px;margin:0 0 8px;min-height:42px} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-item-name{white-space:normal;overflow:visible;text-overflow:clip;display:block;-webkit-line-clamp:unset;overflow-wrap:anywhere} .yatoon-modifier-group>summary{cursor:pointer;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600;margin-bottom:10px;min-height:44px;list-style:revert} .yatoon-selection-count{margin-inline-start:auto;color:#596579;font-weight:400} .yatoon-modifier-group.yatoon-required-error>summary{color:#b42318} #yatoon-app#yatoon-app .yatoon-checkout-sheet #yatoon-phone-country{width:100%;min-width:0;max-width:100%;min-height:44px;margin-bottom:8px} #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-phone-row{flex-wrap:wrap} #yatoon-app#yatoon-app .yatoon-checkout-sheet #yatoon-cust-phone{flex-basis:100%;width:100%} #yatoon-app#yatoon-app .yatoon-contact-purpose{font-size:12px;line-height:1.5;color:#596579;margin:0 0 16px} [dir=rtl] #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap{text-align:right} @media(max-width:640px){#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-compact-menu{padding-top:8px}#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-compact-menu .yatoon-item{padding:12px}} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-compact-menu .yatoon-service-context .yatoon-ordering-status{border:0;margin:0;padding:0;min-height:0;box-shadow:none;flex:1;background:transparent} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-compact-menu .yatoon-service-context > label{display:none} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-compact-menu .yatoon-service-context > select{width:120px;max-width:45%;min-height:36px;border:0} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-compact-menu .yatoon-ordering-status.is-open > span{display:none} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-compact-menu .yatoon-service-context .yatoon-ordering-status strong{margin-inline-start:auto} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-compact-service:empty{display:none!important} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-compact-menu .yatoon-menu-header{display:none!important} article.yatoon-has-menu-shortcode>.entry-header .entry-title{display:none!important} /* Mobile checkout: keep native country-select text vertically centered and leave scroll room after the sticky order action so the final form controls stay reachable. */ @media (max-width: 640px) { #yatoon-app#yatoon-app .yatoon-checkout-sheet #yatoon-phone-country { display: block; box-sizing: border-box; height: 56px; min-height: 56px; line-height: normal; padding: 0 14px; font-size: 16px; -webkit-appearance: menulist; appearance: auto; vertical-align: middle; } #yatoon-app#yatoon-app .yatoon-checkout-sheet { scroll-padding-bottom: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); } #yatoon-app#yatoon-app #yatoon-place-btn { position: static; inset: auto; z-index: auto; transform: none; margin-top: 16px; } } /* Restaurant identity and clear AI action affordance. */ #yatoon-app#yatoon-app .yatoon-phone-country-select { position: relative; display: block; flex: 0 0 100%; width: 100%; min-width: 0; margin: 0 0 8px; } #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-phone-country-select #yatoon-phone-country { display: block; box-sizing: border-box; width: 100%; height: 56px; min-height: 56px; padding: 12px 48px 12px 14px; border: 1px solid #d7dde5; border-radius: 999px; background: #fff; color: #17202d; font-family: inherit; font-size: 16px; font-weight: 500; line-height: 30px; text-align: left; text-indent: 0; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-appearance: none; appearance: none; } #yatoon-app#yatoon-app .yatoon-phone-country-select::after { content: ""; position: absolute; top: 50%; right: 20px; width: 9px; height: 9px; border-right: 2px solid #475467; border-bottom: 2px solid #475467; transform: translateY(-70%) rotate(45deg); pointer-events: none; } /* Centered restaurant identity, balanced header controls, and visible ordering hours. */ #yatoon-wrap#yatoon-wrap .yatoon-order-hours{display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;margin:0 0 12px;padding:8px 12px;border:1px solid var(--yt-line);border-radius:10px;background:#fff;color:var(--yt-muted);font-size:13px;line-height:1.4;text-align:center} #yatoon-wrap#yatoon-wrap .yatoon-order-hours span{color:#344054;font-size:15px;font-weight:700} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-compact-menu .yatoon-compact-service:has(.yatoon-ordering-status.is-open){display:none} @media(max-width:640px){ #yatoon-wrap#yatoon-wrap .yatoon-order-hours{justify-content:flex-start;text-align:left;padding:8px 11px;font-size:12px} } /* Wide layout: the menu keeps its normal width and a fixed order summary sits to its right (>=1100px); 900-1099px uses a header cart dropdown. */ #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap{width:100%;box-sizing:border-box} #yatoon-app#yatoon-app .yatoon-desktop-order{display:none} #yatoon-wrap#yatoon-wrap .yatoon-header-cart{position:relative;display:none} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-header-cart-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:8px 14px 8px 12px;border:1px solid #d7dde5;border-radius:999px;background:#fff;color:#17202d;font:inherit;font-size:14px;font-weight:700;line-height:1.2;cursor:pointer;box-shadow:none} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-header-cart-btn:hover,#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-header-cart-btn[aria-expanded="true"]{border-color:#64748b;background:#f8fafc} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-header-cart-btn:focus-visible{outline:2px solid #475569;outline-offset:2px} #yatoon-wrap#yatoon-wrap .yatoon-header-cart-btn svg{flex:0 0 auto} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-header-cart-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #yatoon-wrap#yatoon-wrap .yatoon-header-cart-count{display:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#111827;color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center;box-sizing:border-box} #yatoon-wrap#yatoon-wrap .yatoon-header-cart.has-items .yatoon-header-cart-count{display:inline-block} #yatoon-wrap#yatoon-wrap .yatoon-header-cart-total{display:none;font-variant-numeric:tabular-nums} #yatoon-wrap#yatoon-wrap .yatoon-header-cart.has-items .yatoon-header-cart-total{display:inline} #yatoon-wrap#yatoon-wrap .yatoon-cart-popover{position:absolute;z-index:1000;top:calc(100% + 10px);right:0;width:340px;max-width:calc(100vw - 32px);box-sizing:border-box;border:1px solid #e6e8eb;border-radius:14px;background:#fff;color:#17202d;box-shadow:0 18px 48px rgba(15,23,42,.18);text-align:left} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-cart-popover[hidden]{display:none} #yatoon-wrap#yatoon-wrap .yatoon-cart-popover .yatoon-desktop-order-inner{padding:18px} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-cart-popover h2{margin:0 0 12px;font-size:18px;line-height:1.3} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-cart-popover p{margin:8px 0 0;font-size:13px;line-height:1.5;color:#596579} #yatoon-wrap#yatoon-wrap .yatoon-cart-popover .yatoon-review-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #f0f2f4;font-size:13px} #yatoon-wrap#yatoon-wrap .yatoon-cart-popover .yatoon-review-row span{min-width:0;overflow-wrap:anywhere} #yatoon-wrap#yatoon-wrap .yatoon-cart-popover .yatoon-desktop-order-list{max-height:min(45vh,320px);overflow:auto} #yatoon-wrap#yatoon-wrap .yatoon-cart-popover .yatoon-desktop-order-total{display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding-top:12px;border-top:1px solid #e6e8eb;font-size:15px} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-cart-popover button{width:100%;min-height:44px;margin:12px 0 0} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-cart-popover .yatoon-edit-cart-btn{margin-top:8px} @media(min-width:900px) and (max-width:1099px){#yatoon-wrap#yatoon-wrap .yatoon-header-cart{display:block}} @media(min-width:1100px){#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-has-summary{position:relative;box-sizing:border-box;width:min(1520px,calc(100vw - 48px));max-width:none;margin-left:calc(50% - min(1520px,calc(100vw - 48px)) / 2);margin-right:0;padding-right:356px;min-height:580px}#yatoon-app#yatoon-app .yatoon-desktop-order{display:block;position:absolute;right:16px;top:16px;bottom:24px;width:316px}#yatoon-app#yatoon-app .yatoon-desktop-order .yatoon-desktop-order-inner{position:sticky;top:28px;border:1px solid #e6e8eb;background:#fff;border-radius:14px;padding:20px;box-shadow:0 3px 12px #18223006}#yatoon-app#yatoon-app .yatoon-desktop-order h2{font-size:20px;margin:0 0 12px}#yatoon-app#yatoon-app .yatoon-desktop-order p{font-size:14px;color:#596579}#yatoon-app#yatoon-app .yatoon-desktop-order .yatoon-review-row{display:flex;justify-content:space-between;font-size:13px;padding:9px 0;gap:12px;border-bottom:1px solid #f0f2f4}#yatoon-app#yatoon-app .yatoon-desktop-order button{margin-top:12px;width:100%;min-height:44px}#yatoon-app#yatoon-app .yatoon-desktop-order .yatoon-desktop-order-total{display:flex;justify-content:space-between;border-top:1px solid #e6e8eb;padding-top:12px;margin-top:8px}#yatoon-app#yatoon-app .yatoon-desktop-order .yatoon-desktop-order-list{max-height:45vh;overflow:auto}#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-header-cart{display:none}[dir=rtl] #yatoon-app#yatoon-app .yatoon-desktop-order{left:16px;right:auto}[dir=rtl] #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-has-summary{padding-right:16px;padding-left:356px}} [dir=rtl] #yatoon-wrap#yatoon-wrap .yatoon-cart-popover{right:auto;left:0;text-align:right} @media(prefers-reduced-motion:no-preference){#yatoon-wrap#yatoon-wrap .yatoon-cart-popover{animation:yatoonCartPop .14s ease-out}@keyframes yatoonCartPop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}} /* Featured items: only whole cards are visible; the arrows page through the rest (5 on wide, fewer on narrow containers). */ #yatoon-wrap#yatoon-wrap .yatoon-featured-wrap{container-type:inline-size;container-name:yt-feat} #yatoon-wrap#yatoon-wrap .yatoon-featured-track{--yt-cols:2;overscroll-behavior-x:contain} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-featured-track{gap:12px;padding:1px 0 7px;scroll-padding-left:0;scroll-snap-type:x mandatory} @supports not (container-type:inline-size){#yatoon-wrap#yatoon-wrap .yatoon-featured-track{--yt-cols:3}} @container yt-feat (min-width:468px){#yatoon-wrap#yatoon-wrap .yatoon-featured-track{--yt-cols:3}} @container yt-feat (min-width:620px){#yatoon-wrap#yatoon-wrap .yatoon-featured-track{--yt-cols:4}} @container yt-feat (min-width:772px){#yatoon-wrap#yatoon-wrap .yatoon-featured-track{--yt-cols:5}} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-feat-card{flex:0 0 calc((100% - (var(--yt-cols) - 1) * 12px) / var(--yt-cols));width:calc((100% - (var(--yt-cols) - 1) * 12px) / var(--yt-cols));min-width:0;max-width:none;box-sizing:border-box;scroll-snap-align:start} #yatoon-wrap#yatoon-wrap .yatoon-feat-img-wrap{aspect-ratio:16/10} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-feat-img-wrap{position:relative;width:100%;height:auto;overflow:hidden} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-feat-img-wrap .yatoon-feat-img,#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-feat-img-wrap img{display:block;width:100%;height:100%;object-fit:cover} /* Search: one clear focus ring on the field container instead of a second outline around the input. */ #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-search-box{display:flex;align-items:center;box-sizing:border-box} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-search-box .yatoon-search-input, #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-search-box .yatoon-search-input:hover, #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-search-box .yatoon-search-input:focus, #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-search-box .yatoon-search-input:focus-visible, #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-search-box .yatoon-search-input:active{flex:1 1 auto;min-width:0;width:100%;height:auto;margin:0;padding-top:0;padding-bottom:0;border:0;border-radius:0;outline:0;outline-offset:0;box-shadow:none;background:transparent;-webkit-appearance:none;appearance:none} #yatoon-wrap#yatoon-wrap .yatoon-search-input::-webkit-search-cancel-button,#yatoon-wrap#yatoon-wrap .yatoon-search-input::-webkit-search-decoration{-webkit-appearance:none;display:none} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-search-box:focus-within{border-color:#111827;box-shadow:0 0 0 3px rgba(17,24,39,.12)} /* Confirmation dialogs (e.g. "Clear order?") are centred on every screen size instead of hugging the bottom edge. */ #yatoon-app#yatoon-app .yatoon-confirm-overlay.open{align-items:center;justify-content:center} #yatoon-app#yatoon-app .yatoon-confirm-overlay .yatoon-confirm-sheet{border-radius:20px;padding:26px 22px 20px;box-shadow:0 24px 80px rgba(15,23,42,.28)} #yatoon-app#yatoon-app .yatoon-confirm-overlay .yatoon-confirm-grabber{display:none} /* Promo banner (off by default): compact one-row strip */ #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-hero-banner{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title btn" "sub btn";align-items:center;column-gap:16px;row-gap:2px;min-height:0;padding:12px 18px;margin:0 0 12px;border-radius:12px;box-shadow:none} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-hero-banner::after{display:none} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-hero-tag{display:none} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-hero-title{grid-area:title;max-width:none;margin:0;font-size:17px;line-height:1.25;letter-spacing:0;font-weight:800} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-hero-sub{grid-area:sub;max-width:none;margin:0;font-size:13px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-hero-btn{grid-area:btn;min-height:34px;margin:0;padding:0 14px;font-size:13px;box-shadow:none;white-space:nowrap} @media(max-width:640px){#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-hero-banner{padding:10px 12px;column-gap:10px}#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-hero-title{font-size:15px}#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-hero-sub{font-size:12px}#yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-hero-btn{min-height:32px;padding:0 11px;font-size:12px}} /* Mobile sizing: inset item popup, slimmer order bar, compact checkout with a pinned Place Order button */ @media (max-width: 640px) { #yatoon-app#yatoon-app .yatoon-modal-overlay.yatoon-modal-overlay{padding:0 10px calc(10px + env(safe-area-inset-bottom));box-sizing:border-box} #yatoon-app#yatoon-app .yatoon-modal-overlay .yatoon-modal-sheet.yatoon-modal-sheet{width:100%;max-width:520px;max-height:min(84dvh,660px);border-radius:20px} #yatoon-app#yatoon-app .yatoon-modal-sheet .yatoon-modal-img-wrap{margin:8px 8px 0;width:auto;height:132px;max-height:132px;border-radius:14px} #yatoon-app#yatoon-app .yatoon-modal-sheet .yatoon-modal-close{top:14px;right:14px;width:34px;height:34px;min-height:0;font-size:22px} #yatoon-app#yatoon-app .yatoon-modal-sheet #yatoon-modal-name{font-size:19px;line-height:1.2;margin-bottom:4px} #yatoon-app#yatoon-app .yatoon-modal-sheet #yatoon-modal-price{font-size:16px;margin-bottom:6px} #yatoon-app#yatoon-app .yatoon-modal-sheet #yatoon-modal-desc{font-size:14px;line-height:1.45;margin-bottom:12px} #yatoon-app#yatoon-app .yatoon-modal-sheet .yatoon-modal-footer{padding:10px 14px calc(10px + env(safe-area-inset-bottom))} #yatoon-app#yatoon-app .yatoon-modal-sheet #yatoon-modal-add-btn{height:46px;min-height:46px;font-size:15px;border-radius:14px} #yatoon-app#yatoon-app #yatoon-fab.yatoon-fab{left:0;right:0;bottom:0;width:100%;max-width:none;min-height:0;gap:8px;transform:none;padding:8px 12px max(8px,env(safe-area-inset-bottom));border-radius:16px 16px 0 0;border-left:0;border-right:0;border-bottom:0;box-sizing:border-box} #yatoon-app#yatoon-app #yatoon-fab .yatoon-fab-cart{height:44px;min-height:0;padding:0} #yatoon-app#yatoon-app #yatoon-fab .yatoon-fab-icon{width:36px;height:36px;border-radius:11px} #yatoon-app#yatoon-app #yatoon-fab .yatoon-fab-icon svg{width:19px;height:19px} #yatoon-app#yatoon-app #yatoon-fab .yatoon-fab-count{min-width:20px;height:20px;font-size:11px;top:-6px;right:-6px} #yatoon-app#yatoon-app #yatoon-fab .yatoon-fab-copy strong{font-size:14px} #yatoon-app#yatoon-app #yatoon-fab .yatoon-fab-copy small{font-size:11px} #yatoon-app#yatoon-app #yatoon-fab .yatoon-fab-checkout{height:44px;min-height:0;min-width:118px;padding:0 16px;font-size:14px;border-radius:13px} #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap,body.yatoon-cart-active #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap{padding-bottom:84px} #yatoon-app#yatoon-app .yatoon-checkout-overlay.yatoon-checkout-overlay{padding:8px 8px calc(8px + env(safe-area-inset-bottom));box-sizing:border-box} #yatoon-app#yatoon-app .yatoon-checkout-overlay .yatoon-checkout-sheet.yatoon-checkout-sheet{width:100%;max-width:560px;max-height:94dvh;border-radius:20px;padding:14px 14px 0;scroll-padding-bottom:80px} #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-modal-close{top:10px;right:10px;width:34px;height:34px;min-height:0;font-size:22px} #yatoon-app#yatoon-app .yatoon-checkout-sheet h2#yatoon-checkout-title{font-size:20px;line-height:1.2;margin:2px 44px 10px 0} #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-order-review{padding:9px 12px;margin:0 0 8px;font-size:14px;border-radius:12px} #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-edit-cart-btn{min-height:34px;height:34px;padding:0 14px;margin:0 0 10px;font-size:13px;border-radius:12px} #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-form-row{margin-bottom:10px} #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-form-row > label{margin:0 0 4px;font-size:11px;line-height:1.2} #yatoon-app#yatoon-app .yatoon-checkout-sheet input[type=text],#yatoon-app#yatoon-app .yatoon-checkout-sheet input[type=tel],#yatoon-app#yatoon-app .yatoon-checkout-sheet input[type=email],#yatoon-app#yatoon-app .yatoon-checkout-sheet select,#yatoon-app#yatoon-app .yatoon-checkout-sheet textarea{min-height:42px;height:42px;padding:0 12px;border-radius:12px;font-size:16px} #yatoon-app#yatoon-app .yatoon-checkout-sheet textarea{height:auto;min-height:56px;padding:9px 12px} #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-phone-country-select #yatoon-phone-country,#yatoon-app#yatoon-app .yatoon-checkout-sheet #yatoon-phone-country{height:42px;min-height:42px;margin-bottom:6px;padding:0 12px} #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-time-opt{min-height:40px;padding:0 12px;border-radius:12px;font-size:14px} #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-contact-purpose{margin:0 0 10px;font-size:12px;line-height:1.4} #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-price-breakdown{margin:6px 0 10px} #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-price-breakdown summary{padding:8px 12px;font-size:13px} #yatoon-app#yatoon-app .yatoon-checkout-sheet #yatoon-place-btn.yatoon-checkout-btn{position:sticky;inset:auto;bottom:calc(8px + env(safe-area-inset-bottom));z-index:5;width:100%;margin:12px 0 calc(8px + env(safe-area-inset-bottom));height:48px;min-height:48px;padding:0 16px;border-radius:14px;font-size:16px;box-sizing:border-box;box-shadow:0 0 0 8px #fff,0 -14px 14px 6px #fff} } /* Reserve real space for category labels and header actions, including a populated tablet cart. */ #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap .yatoon-header-cart-btn{max-width:100%;flex-wrap:wrap;justify-content:center} #yatoon-wrap#yatoon-wrap .yatoon-business-note{margin:-5px 0 12px;padding:0 12px;font-size:12px;color:#596579;text-align:center} #yatoon-wrap#yatoon-wrap .yatoon-order-hours{flex-wrap:wrap} #yatoon-wrap#yatoon-wrap .yatoon-order-hours .yatoon-order-hours-text{color:inherit;font-size:inherit;font-weight:inherit} @media(max-width:640px){ #yatoon-wrap#yatoon-wrap .yatoon-business-note{text-align:left} } @media(min-width:900px) and (max-width:1099px){ #yatoon-wrap#yatoon-wrap .yatoon-header-cart{order:-1;flex-basis:100%;text-align:right} } /* Native country picker opens on demand; only the dialling prefix occupies space. */ #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-phone-input-group{display:flex;align-items:stretch;width:100%;min-width:0;min-height:48px;flex:1 1 100%;border:1px solid #d7dde5;border-radius:14px;background:#fff;box-sizing:border-box} .yatoon-checkout-sheet .yatoon-phone-input-group:focus-within{outline:2px solid var(--yt-accent,#2563eb);outline-offset:2px} #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-phone-input-group .yatoon-phone-country-select{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 84px;width:84px;min-width:84px;margin:0;border-inline-end:1px solid #e4e7ec} .yatoon-checkout-sheet .yatoon-phone-input-group .yatoon-phone-prefix{padding-inline-end:14px;white-space:nowrap} #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-phone-input-group .yatoon-phone-prefix{display:block;font-size:16px;font-weight:600;color:#17202d;line-height:1.5} #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-phone-input-group .yatoon-phone-country-select::after{right:12px;width:6px;height:6px} #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-phone-input-group .yatoon-phone-country-select #yatoon-phone-country{position:absolute;inset:0;opacity:0;width:100%;height:100%;min-height:44px;margin:0;padding:0;cursor:pointer;border:0;border-radius:0;font-size:16px} #yatoon-app#yatoon-app .yatoon-checkout-sheet .yatoon-phone-input-group #yatoon-cust-phone{flex:1 1 0;flex-basis:0;width:0;min-width:0;max-width:none;height:auto;min-height:48px;margin:0;padding:10px 12px;border:0;border-radius:0 14px 14px 0;box-shadow:none;outline:none;font-size:16px;line-height:1.5} /* Match the existing Midnight surfaces and keep mobile hours legible. */ #yatoon-app#yatoon-app .yatoon-dark .yatoon-checkout-sheet .yatoon-phone-input-group{background:#172231;border-color:#43546a} #yatoon-app#yatoon-app .yatoon-dark .yatoon-checkout-sheet .yatoon-phone-input-group .yatoon-phone-country-select{border-color:#43546a} #yatoon-app#yatoon-app .yatoon-dark .yatoon-checkout-sheet .yatoon-phone-input-group .yatoon-phone-prefix{color:#f1f5f9} #yatoon-app#yatoon-app .yatoon-dark .yatoon-checkout-sheet .yatoon-phone-input-group .yatoon-phone-country-select::after{border-color:#b8c6d8} .yatoon-total-feedback{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:8px 0 16px;padding:10px 12px;border:1px solid #e7b69e;border-radius:10px;background:#fff7ed;color:#8a411a;font-size:13px;line-height:1.5} #yatoon-app#yatoon-app .yatoon-total-feedback[hidden]{display:none} .yatoon-total-feedback button{flex:0 0 auto;min-height:44px;padding:8px 12px;border:1px solid currentColor;border-radius:8px;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer} .yatoon-dark .yatoon-total-feedback{background:#302b20;color:#f5deb0;border-color:#76643c} /* 3.4.1: one centred rail for discovery tools, inside the full-width menu. */ #yatoon-wrap#yatoon-wrap.yatoon-wrap { --yt-discovery-inset: 16px; } #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-wrap > :is(.yatoon-hero-banner, .yatoon-search-wrap, .yatoon-ai-food-helper, .yatoon-cat-nav, .yatoon-featured-wrap) { box-sizing: border-box; width: calc(100% - var(--yt-discovery-inset) - var(--yt-discovery-inset)); min-width: 0; max-width: none; margin: 0 auto 10px; } #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-wrap .yatoon-section { max-width: none; } #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-wrap > .yatoon-featured-wrap { margin-bottom: 24px; } #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-wrap > .yatoon-cat-nav { padding: 6px; border-radius: 12px; } #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-wrap > .yatoon-search-wrap { padding: 0; border: 0; background: transparent; } #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-wrap .yatoon-search-box { width: 100%; border-radius: 12px; box-shadow: none; } #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-wrap .yatoon-search-box:focus-within { box-shadow: 0 0 0 3px rgba(17,24,39,.12); } #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-wrap .yatoon-ai-food-helper.is-collapsed .yatoon-ai-food-toggle { border-radius: 12px; } @media (max-width: 640px) { #yatoon-wrap#yatoon-wrap.yatoon-wrap { --yt-discovery-inset: 0px; } #yatoon-app#yatoon-app #yatoon-wrap#yatoon-wrap.yatoon-wrap > .yatoon-featured-wrap { margin-bottom: 16px; } } /* Separate, optional promotional consent; transaction contact fields stay independent. */ .yatoon-marketing-consent { margin: 12px 0; padding: 12px; border: 1px solid #d7dde5; border-radius: 12px; min-width: 0; } .yatoon-marketing-consent legend { padding: 0 4px; font-size: 13px; font-weight: 600; } .yatoon-marketing-consent label { align-items: flex-start; gap: 10px; padding: 7px 0; line-height: 1.5; cursor: pointer; } #yatoon-app#yatoon-app .yatoon-marketing-consent label { display: flex; font-size: 13px; } .yatoon-marketing-consent input[type=checkbox] { flex: 0 0 18px; } #yatoon-app#yatoon-app .yatoon-marketing-consent input[type=checkbox] { width: 18px; height: 18px; min-height: 18px; margin: 2px 0 0; } .yatoon-marketing-consent p { font-size: 12px; line-height: 1.5; margin: 6px 0 0; } .yatoon-dark .yatoon-marketing-consent { border-color: #65788e; color: #d5deeb; } /* Menu-only mode never reserves space for checkout or exposes add-to-order controls. */ #yatoon-app#yatoon-app #yatoon-wrap.yatoon-menu-only .yatoon-desktop-order, #yatoon-app#yatoon-app #yatoon-wrap.yatoon-menu-only .yatoon-cart-icon-wrap, #yatoon-app#yatoon-app #yatoon-wrap.yatoon-menu-only .yatoon-fab, #yatoon-app#yatoon-app #yatoon-wrap.yatoon-menu-only .yatoon-item-add-circle, #yatoon-app#yatoon-app #yatoon-wrap.yatoon-menu-only .yatoon-feat-add { display: none; } #yatoon-app#yatoon-app #yatoon-wrap.yatoon-menu-only.yatoon-has-summary { padding-right: 16px; } .yatoon-success-sheet { position: relative; } /* Keep the close control neutral even when the site theme styles all buttons. */ #yatoon-success-overlay #yatoon-success-close { cursor: pointer; z-index: 2; } #yatoon-app#yatoon-app #yatoon-success-overlay #yatoon-success-close { appearance: none; position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 44px; min-width: 44px; max-width: 44px; height: 44px; min-height: 44px; max-height: 44px; padding: 0; margin: 0; border: 0; border-radius: 6px; background: transparent; color: #64748b; box-shadow: none; font: 400 28px/1 Arial, sans-serif; text-indent: 0; text-shadow: none; transform: none; } #yatoon-app#yatoon-app #yatoon-success-overlay #yatoon-success-close:hover, #yatoon-app#yatoon-app #yatoon-success-overlay #yatoon-success-close:active { color: #111827; } #yatoon-app#yatoon-app #yatoon-success-overlay #yatoon-success-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } #yatoon-app#yatoon-app #yatoon-success-overlay.yatoon-dark #yatoon-success-close { color: #cbd5e1; } #yatoon-app#yatoon-app #yatoon-success-overlay.yatoon-dark #yatoon-success-close:hover, #yatoon-app#yatoon-app #yatoon-success-overlay.yatoon-dark #yatoon-success-close:active { color: #f8fafc; } #yatoon-checkout-asap-estimate { padding: 10px 12px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; color: #166534; }