/* myanas: order popup (delivery-truck animation, adapted from "Order confirm animation" by @coding.stella). */

/* ---------- Popup shell ---------- */
html.mto-lock { overflow: hidden; }
.mto {
	position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 16px;
	background: rgba(8, 16, 12, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	opacity: 0; transition: opacity .25s ease;
}
.mto[hidden] { display: none; }
.mto.is-open { opacity: 1; }
.mto__card {
	position: relative; box-sizing: border-box; width: 100%; max-width: 380px; padding: 28px 22px 22px; text-align: center;
	background: var(--card, #fff); color: var(--text-primary, #111); border-radius: 22px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35); transform: translateY(14px) scale(.97); transition: transform .3s cubic-bezier(.2, .9, .3, 1.2);
	outline: none;
}
.mto.is-open .mto__card { transform: none; }
.mto__title { margin: 20px 0 8px; font-size: 1.3rem; font-weight: 800; line-height: 1.25; color: inherit; }
.mto__text { margin: 0; font-size: .95rem; line-height: 1.55; opacity: .8; }
.mto__close {
	position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
	background: var(--bg-elevated, #f1f1f1); color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.mto__close:hover { background: var(--btn-soft, #e4f4ea); }
.mto__actions { display: grid; gap: 8px; margin-top: 20px; }
.mto__btn {
	display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-height: 46px; padding: 0 16px;
	border-radius: 14px; border: 1.5px solid transparent; font-size: .98rem; font-weight: 800; text-decoration: none !important; cursor: pointer;
}
.mto__btn--wa { background: #0b7a4b; color: #fff !important; }
.mto__btn--wa:hover { background: #096640; }
.mto__btn--ghost { background: transparent; color: inherit !important; border-color: var(--line, #ddd); }
.mto__btn--ghost:hover { background: var(--bg-elevated, #f4f4f4); }
.mto__btn svg { width: 20px; height: 20px; flex: none; }
.mto__btn:focus-visible, .mto__close:focus-visible { outline: 3px solid var(--btn-ring, rgba(31, 154, 71, .45)); outline-offset: 2px; }

/* Indeterminate progress bar while the order is processed */
.mto__bar { position: relative; height: 5px; margin: 20px auto 0; max-width: 220px; border-radius: 3px; background: var(--line, #e3e3e3); overflow: hidden; }
.mto__bar::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 3px; background: #17793a;
	animation: mto-bar 1.3s ease-in-out infinite;
}
@keyframes mto-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ---------- Truck stage ---------- */
.mto-stage {
	--mto-dur: 10s;
	--mto-iter: 1;
	--mto-cab: #17793a;
	--mto-cab-light: #8be8ab;
	--mto-dark: #1c212e;
	--mto-grey-dark: #3f4656;
	--mto-grey: #6c7486;
	--mto-grey-light: #cdd9ed;
	--mto-green: #16bf78;
	--mto-sand: #dcb773;
	--mto-sand-light: #edd9a9;
	position: relative; width: 240px; max-width: 100%; height: 63px; margin: 0 auto; border-radius: 32px;
	background: var(--mto-dark); overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.mto-stage.is-once { --mto-iter: 1; }

.mto-done {
	--o: 0; --offset: 16px;
	position: absolute; left: 0; right: 0; top: 19px; line-height: 24px; text-align: center; color: #fff; font-size: 16px; font-weight: 500;
	opacity: var(--o); transition: opacity .3s ease;
}
.mto-done svg {
	width: 12px; height: 10px; display: inline-block; vertical-align: top; fill: none; margin: 7px 0 0 4px;
	stroke: var(--mto-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16px; stroke-dashoffset: var(--offset);
	transition: stroke-dashoffset .3s ease;
}
.mto-stage.is-done .mto-done { --o: 1; transition-delay: calc(var(--mto-dur) * .7); }
.mto-stage.is-done .mto-done svg { --offset: 0; transition-delay: calc(var(--mto-dur) * .73); }
/* Finished state with no waiting (truck already drove off): checkout success step and the thank-you popup. */
.mto-stage.is-instant.is-done .mto-done { transition-delay: 0s; }
.mto-stage.is-instant.is-done .mto-done svg { transition-delay: .15s; }

.mto-lines {
	opacity: 0; position: absolute; height: 3px; background: #fff; border-radius: 2px; width: 6px; top: 30px; left: 100%;
	box-shadow: 15px 0 0 #fff, 30px 0 0 #fff, 45px 0 0 #fff, 60px 0 0 #fff, 75px 0 0 #fff, 90px 0 0 #fff, 105px 0 0 #fff, 120px 0 0 #fff, 135px 0 0 #fff, 150px 0 0 #fff, 165px 0 0 #fff, 180px 0 0 #fff, 195px 0 0 #fff, 210px 0 0 #fff, 225px 0 0 #fff, 240px 0 0 #fff, 255px 0 0 #fff, 270px 0 0 #fff, 285px 0 0 #fff, 300px 0 0 #fff, 315px 0 0 #fff, 330px 0 0 #fff;
}
.mto-back, .mto-box { --start: #fff; --stop: var(--mto-grey-light); border-radius: 2px; background: linear-gradient(var(--start), var(--stop)); position: absolute; }

.mto-truck { width: 60px; height: 41px; left: 100%; z-index: 1; top: 11px; position: absolute; transform: translateX(24px); }
.mto-truck:before, .mto-truck:after {
	--r: -90deg; content: ""; height: 2px; width: 20px; right: 58px; position: absolute; display: block; background: #fff; border-radius: 1px;
	transform-origin: 100% 50%; transform: rotate(var(--r));
}
.mto-truck:before { top: 4px; }
.mto-truck:after { --r: 90deg; bottom: 4px; }
.mto-truck .mto-back { left: 0; top: 0; width: 60px; height: 41px; z-index: 1; }
.mto-front { overflow: hidden; position: absolute; border-radius: 2px 9px 9px 2px; width: 26px; height: 41px; left: 60px; }
.mto-front:before, .mto-front:after { content: ""; position: absolute; display: block; }
.mto-front:before { height: 13px; width: 2px; left: 0; top: 14px; background: linear-gradient(var(--mto-grey), var(--mto-grey-dark)); }
.mto-front:after { border-radius: 2px 9px 9px 2px; background: var(--mto-cab); width: 24px; height: 41px; right: 0; }
.mto-window {
	overflow: hidden; border-radius: 2px 8px 8px 2px; background: var(--mto-cab-light); transform: perspective(4px) rotateY(3deg);
	width: 22px; height: 41px; position: absolute; left: 2px; top: 0; z-index: 1; transform-origin: 0 50%;
}
.mto-window:before, .mto-window:after { content: ""; position: absolute; right: 0; }
.mto-window:before { top: 0; bottom: 0; width: 14px; background: var(--mto-dark); }
.mto-window:after { width: 14px; top: 7px; height: 4px; position: absolute; background: rgba(255, 255, 255, .14); transform: skewY(14deg); box-shadow: 0 7px 0 rgba(255, 255, 255, .14); }
.mto-light { width: 3px; height: 8px; left: 83px; transform-origin: 100% 50%; position: absolute; border-radius: 2px; transform: scaleX(.8); background: #f0dc5f; }
.mto-light:before {
	content: ""; height: 4px; width: 7px; opacity: 0; transform: perspective(2px) rotateY(-15deg) scaleX(.94); position: absolute; transform-origin: 0 50%;
	left: 3px; top: 50%; margin-top: -2px; background: linear-gradient(90deg, #f0dc5f, rgba(240, 220, 95, .7), rgba(240, 220, 95, 0));
}
.mto-light.mto-top { top: 4px; }
.mto-light.mto-bottom { bottom: 4px; }
.mto-box { --start: var(--mto-sand-light); --stop: var(--mto-sand); width: 21px; height: 21px; right: 100%; top: 21px; }
.mto-box:before, .mto-box:after { content: ""; top: 10px; position: absolute; left: 0; right: 0; }
.mto-box:before { height: 3px; margin-top: -1px; background: rgba(0, 0, 0, .1); }
.mto-box:after { height: 1px; background: rgba(0, 0, 0, .15); }

/* Run: same timing and keyframes as the reference "Order confirm animation" (10s, truck arrives, doors open, box loads, truck drives off). */
.mto-stage.is-run .mto-truck { animation: mto-truck var(--mto-dur) ease forwards; }
.mto-stage.is-run .mto-truck:before { animation: mto-door1 2.4s ease forwards .3s; }
.mto-stage.is-run .mto-truck:after { animation: mto-door2 2.4s ease forwards .6s; }
.mto-stage.is-run .mto-light:before, .mto-stage.is-run .mto-light:after { animation: mto-light var(--mto-dur) ease forwards; }
.mto-stage.is-run .mto-box { animation: mto-box var(--mto-dur) ease forwards; }
.mto-stage.is-run .mto-lines { animation: mto-lines var(--mto-dur) ease forwards; }

@keyframes mto-truck { 10%, 30% { transform: translateX(-164px); } 40% { transform: translateX(-104px); } 60% { transform: translateX(-224px); } 75%, 100% { transform: translateX(24px); } }
@keyframes mto-lines { 0%, 30% { opacity: 0; transform: scaleY(.7) translateX(0); } 35%, 65% { opacity: 1; } 70% { opacity: 0; } 100% { transform: scaleY(.7) translateX(-400px); } }
@keyframes mto-light { 0%, 30% { opacity: 0; transform: perspective(2px) rotateY(-15deg) scaleX(.88); } 40%, 100% { opacity: 1; transform: perspective(2px) rotateY(-15deg) scaleX(.94); } }
@keyframes mto-door1 { 30%, 50% { transform: rotate(32deg); } }
@keyframes mto-door2 { 30%, 50% { transform: rotate(-32deg); } }
@keyframes mto-box { 8%, 10% { transform: translateX(40px); opacity: 1; } 25% { transform: translateX(112px); opacity: 1; } 26% { transform: translateX(112px); opacity: 0; } 27%, 100% { transform: translateX(0); opacity: 0; } }

/* Reduced motion: the popup shell and the thank-you stage skip the movement (the finished state shows at once).
   The "Placing your order" truck keeps running: it is the only loading indicator, it stays inside its own small pill,
   and with the animation off the truck would sit outside the pill and the pill would look empty (many phones report
   "reduce motion" when battery saver / "remove animations" is on). */
@media (prefers-reduced-motion: reduce) {
	.mto, .mto__card { transition: none; }
	.mto__bar::before { animation: none; width: 100%; }
	.mto-stage.is-done.is-run .mto-truck, .mto-stage.is-done.is-run .mto-truck:before, .mto-stage.is-done.is-run .mto-truck:after,
	.mto-stage.is-done.is-run .mto-light:before, .mto-stage.is-done.is-run .mto-box, .mto-stage.is-done.is-run .mto-lines { animation: none; }
	.mto-stage.is-done .mto-done, .mto-stage.is-done .mto-done svg { transition-delay: 0s; }
}

/* ---------- Thank-you popup: full confirmation message ----------
   Built to fit every screen without scrolling: fluid fonts/spacing (clamp), buttons in a compact grid,
   and extra tightening on short screens. overflow-y stays "auto" only as a last-resort safety net. */
.mto:has(.mto__text--rich) { padding: 8px; }
.mto__card:has(.mto__text--rich) {
	width: min(100%, 400px); max-width: 400px; padding: clamp(12px, 2.6vh, 22px) clamp(14px, 4vw, 20px) clamp(12px, 2.4vh, 20px);
	max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; text-align: left;
	border-radius: 20px;
}
.mto__card:has(.mto__text--rich) .mto-stage { transform-origin: center top; }
.mto__card:has(.mto__text--rich) .mto__title {
	margin: clamp(10px, 2vh, 16px) 0 clamp(6px, 1.2vh, 10px); text-align: center; font-size: clamp(1rem, 4.4vw, 1.18rem); line-height: 1.3;
}
.mto__text--rich { display: block; opacity: 1; }
.mto__text--rich .mto__line { display: block; margin: 0 0 clamp(6px, 1.2vh, 10px); font-size: clamp(.8rem, 3.4vw, .9rem); line-height: 1.5; opacity: .88; }
.mto__text--rich .mto__order {
	display: block; margin: 0 0 clamp(6px, 1.2vh, 10px); padding: clamp(6px, 1.2vh, 9px) 10px; border-radius: 12px; border: 1px dashed var(--g, #0b7a4b);
	background: var(--bg-elevated, #f4f4f4); font-size: clamp(.9rem, 3.8vw, 1rem); line-height: 1.3; text-align: center;
}
.mto__text--rich .mto__pay {
	display: block; margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--g-soft, #e4f4ea);
	font-size: clamp(.78rem, 3.3vw, .88rem); font-weight: 700; line-height: 1.5; text-align: center; overflow: visible;
}
.mto__card:has(.mto__text--rich) .mto__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: clamp(10px, 2vh, 16px); }
.mto__card:has(.mto__text--rich) .mto__btn {
	min-height: clamp(38px, 6vh, 44px); padding: 0 8px; border-radius: 12px; font-size: clamp(.78rem, 3.4vw, .9rem); line-height: 1.2; text-align: center;
}
.mto__card:has(.mto__text--rich) .mto__btn--main { grid-column: 1 / -1; font-size: clamp(.86rem, 3.8vw, .98rem); }
.mto__card:has(.mto__text--rich) .mto__btn--ghost:last-child:nth-child(2) { grid-column: 1 / -1; }
.mto__card:has(.mto__text--rich) .mto__btn svg { width: 16px; height: 16px; }
.mto__card:has(.mto__text--rich) .mto__close { top: 8px; right: 8px; width: 30px; height: 30px; font-size: 1.15rem; }
.mto__btn--main { background: var(--g, #0b7a4b); color: #fff !important; }
.mto__btn--main:hover { background: var(--g-dark, #096640); }

/* Short screens (landscape phones, small browsers): smaller truck, tighter text */
@media (max-height: 700px) {
	.mto__card:has(.mto__text--rich) .mto-stage { transform: scale(.88); margin: -4px auto -6px; }
}
@media (max-height: 560px) {
	.mto__card:has(.mto__text--rich) .mto-stage, .mto__logo { display: none; }
	.mto__card:has(.mto__text--rich) .mto__title { margin-top: 4px; }
	.mto__card:has(.mto__text--rich) .mto__line { line-height: 1.4; }
}
/* Very narrow phones */
@media (max-width: 340px) {
	.mto__card:has(.mto__text--rich) .mto-stage { transform: scale(.82); }
}

/* ---------- Site logo at the top of the popup ---------- */
.mto__logo { display: flex; align-items: center; justify-content: center; margin: 0 0 clamp(6px, 1.2vh, 10px); }
.mto__card .mto__logo .mto__logo-img { display: block; width: auto; height: clamp(18px, 3vh, 24px) !important; max-width: 45% !important; object-fit: contain; }
.mto__card .mto__logo .mto__logo-img--dark { display: none; }
/* Dark mode: swap to the dark-mode logo */
:root[data-theme="dark"] .mto__logo-img--light:not(:only-child) { display: none; }
:root[data-theme="dark"] .mto__card .mto__logo .mto__logo-img--dark { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mto__logo-img--light:not(:only-child) { display: none; }
	:root:not([data-theme="light"]) .mto__card .mto__logo .mto__logo-img--dark { display: block; }
}
/* No dark logo uploaded: the light logo sits on a white plate in dark mode */
:root[data-theme="dark"] .mto__logo--single .mto__logo-img { background: #fff; padding: 4px 8px; border-radius: 8px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mto__logo--single .mto__logo-img { background: #fff; padding: 4px 8px; border-radius: 8px; } }

/* ---------- [ Call | View order ] row ---------- */
:root { --call: #1769e0; --call-soft: #e8f1fe; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --call: #6aa8ff; --call-soft: #14233d; } }
:root[data-theme="dark"] { --call: #6aa8ff; --call-soft: #14233d; }
.mto__row { display: flex; align-items: stretch; gap: 6px; grid-column: 1 / -1; min-width: 0; }
.mto__row .mto__btn--main { flex: 1 1 0; min-width: 0; }
.mto__card .mto__row .mto__btn--call {
	flex: 0 0 auto; padding: 0 14px; background: var(--call-soft); color: var(--call) !important; border: 1.5px solid var(--call);
	transition: background-color .15s ease, color .15s ease;
}
.mto__card .mto__row .mto__btn--call:only-child { flex: 1 1 auto; }
.mto__card .mto__row .mto__btn--call:hover, .mto__card .mto__row .mto__btn--call:focus-visible { background: var(--call); color: #fff !important; }
.mto__card .mto__row .mto__btn--call svg { width: 17px; height: 17px; }
@media (max-width: 340px) { .mto__card .mto__row .mto__btn--call { padding: 0 10px; } .mto__card .mto__row .mto__btn--call span { display: none; } }