/* Tư-Trà POS Kit 2.41.0: the basket and the checkout in the Quick Order's language.

   The tokens are the Quick Order's, from the same seed (--phi-step-2): a capsule h = seed × φ tall, its text a
   seed ÷ φ, the row's letters and figures all as tall as the choices' value capitals (capv), the inner padding
   (h − seed) ÷ 2 and the rim that ÷ φ². Every rounded shape is clipped by Tư-Trà UI Kit's G2 outline (its
   data-tt-pl-uk-shape attribute; border-radius stays as the fallback). */
.tt-el-pk-or, .tt-el-pk-ca-wrap {
	--tt-pl-pk-q-s: var(--phi-step-2, 1.618rem);
	--tt-pl-pk-q-h: calc(var(--tt-pl-pk-q-s) * 1.618033988749895);
	--tt-pl-pk-q-text: calc(var(--tt-pl-pk-q-s) / 1.618033988749895);
	--tt-pl-pk-q-capv: calc(var(--tt-pl-pk-q-text) / 1.618033988749895 / 1.272019649514069 * 1.127838485561);
	--tt-pl-pk-q-pad: calc((var(--tt-pl-pk-q-h) - var(--tt-pl-pk-q-s)) / 2);
	--tt-pl-pk-q-rim: calc(var(--tt-pl-pk-q-pad) / 2.618033988749895);
	--tt-pl-pk-q-pill: calc(var(--tt-pl-pk-q-h) - var(--tt-pl-pk-q-rim) * 2);
	--tt-pl-pk-q-c: var(--color-the, rgb(98, 112, 77));
	--tt-pl-pk-q-ink: var(--color-camelia, rgb(244, 245, 240));
	--tt-pl-pk-q-fill: rgba(var(--color-camelia-rgb, 244, 245, 240), 0.14);
	--tt-pl-pk-q-soft: rgba(var(--color-the-rgb, 98, 112, 77), 0.07);
	--tt-pl-pk-q-ease: cubic-bezier(0.45, 0, 0.55, 1);   /* close to the Quick Order's smootherstep, a curve Safari runs off the main thread */
	--tt-pl-pk-q-blur: 0.4s;
}

/* The place-order button: the Quick Order's add-to-cart button. Its words in Cormorant Unicase and its figures in
   Cormorant Garamond, both as tall as the value capitals, each a box of that height (no leading, the baseline on
   the box's floor: L = 2H − 0.637 em), centred; the font's own spacing. No dimming while the order is placed: the
   words and the total blur out, then the dots blur in, centred; an error brings the words back the same way. */
.tt-el-pk-or-bar .tt-el-pk-or-go.tt-el-pk-at-atc {
	position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--tt-pl-pk-q-rim);
	height: var(--tt-pl-pk-q-h); padding: 0 calc((var(--tt-pl-pk-q-h) - var(--tt-pl-pk-q-text)) / 2);
	border: 0; border-radius: calc(var(--tt-pl-pk-q-h) / 2); background: var(--tt-pl-pk-q-c); color: var(--tt-pl-pk-q-ink);
	opacity: 1; transform: none;
}
.tt-el-pk-or-bar .tt-el-pk-or-go.tt-el-pk-at-atc:active { opacity: 1; transform: scale(0.985); }
.tt-el-pk-or-bar .tt-el-pk-or-go .tt-el-pk-at-label {
	font: 400 calc(var(--tt-pl-pk-q-capv) / 0.468) / calc(0.468 * 2em - 0.637em) "Cormorant Unicase", "Cormorant Garamond", serif;
	height: 0.468em; letter-spacing: 0; text-transform: lowercase; white-space: nowrap;
}
.tt-el-pk-or-bar .tt-el-pk-or-go .tt-el-pk-at-price {
	display: flex; align-items: center; flex: none;
	font: 400 calc(var(--tt-pl-pk-q-capv) / 0.63) / 1 "Cormorant Garamond", serif; letter-spacing: 0;
	font-variant-numeric: lining-nums tabular-nums;
}
.tt-el-pk-or-go .tt-el-pk-at-label, .tt-el-pk-or-go .tt-el-pk-at-price, .tt-el-pk-or-dots {
	filter: blur(0px);   /* always a filter, so the end of a blur is not a switch to plain text (a visible snap) */
	transition: opacity var(--tt-pl-pk-q-blur) var(--tt-pl-pk-q-ease) 0.3s, filter var(--tt-pl-pk-q-blur) var(--tt-pl-pk-q-ease) 0.3s;
}
.tt-el-pk-or-dots {
	position: absolute; left: 50%; top: 50%; width: calc(var(--tt-pl-pk-q-capv) * 24 / 11); height: calc(var(--tt-pl-pk-q-capv) * 24 / 11);
	transform: translate(-50%, -50%); opacity: 0; filter: blur(calc(var(--tt-pl-pk-q-capv) / 2)); pointer-events: none;
	transition-delay: 0s;
}
.tt-el-pk-or-dots svg { display: block; width: 100%; height: 100%; }
.tt-el-pk-or-dots circle { animation: tt-pl-pk-q-dot 0.96s ease-in-out infinite; }
.tt-el-pk-or-dots circle:nth-of-type(2) { animation-delay: 0.16s; }
.tt-el-pk-or-dots circle:nth-of-type(3) { animation-delay: 0.32s; }
@keyframes tt-pl-pk-q-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.tt-el-pk-or form.processing .tt-el-pk-or-go, .tt-el-pk-or .tt-el-pk-or-go.is-placing { opacity: 1; pointer-events: none; }
.tt-el-pk-or form.processing .tt-el-pk-or-go .tt-el-pk-at-label, .tt-el-pk-or form.processing .tt-el-pk-or-go .tt-el-pk-at-price,
.tt-el-pk-or .tt-el-pk-or-go.is-placing .tt-el-pk-at-label, .tt-el-pk-or .tt-el-pk-or-go.is-placing .tt-el-pk-at-price {
	opacity: 0; filter: blur(calc(var(--tt-pl-pk-q-capv) / 2)); transition-delay: 0s;
}
.tt-el-pk-or form.processing .tt-el-pk-or-dots, .tt-el-pk-or .tt-el-pk-or-go.is-placing .tt-el-pk-or-dots { opacity: 1; filter: blur(0px); transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) { .tt-el-pk-or-go .tt-el-pk-at-label, .tt-el-pk-or-go .tt-el-pk-at-price, .tt-el-pk-or-dots { transition: none; } .tt-el-pk-or-dots circle { animation: none; } }

/* The quantity on a basket line (2.41.1): the Quick Order's, element for element. A G2 capsule (its own layer), −
   and + one rim in on round fills that give way to the UI Kit's liquid as it lifts (--tt-pl-uk-liquid-l), the
   figure a cap box as tall as the value capitals, rolling on the Quick Order's odometer */
.tt-pl-pk-q-qty { position: relative; z-index: 1; display: inline-flex; align-items: center; width: max-content; height: var(--tt-pl-pk-q-h); padding: 0 var(--tt-pl-pk-q-rim); color: var(--tt-pl-pk-q-ink); }
.tt-pl-pk-q-bg { position: absolute; inset: 0; z-index: -1; border-radius: calc(var(--tt-pl-pk-q-h) / 2); background: var(--tt-pl-pk-q-c); pointer-events: none; }
.tt-pl-pk-q-scene { position: absolute; inset: calc(var(--tt-pl-pk-q-h) / -2); visibility: hidden; pointer-events: none; }
.tt-pl-pk-q-step { position: relative; isolation: isolate; flex: none; display: grid; place-items: center; width: var(--tt-pl-pk-q-pill); height: var(--tt-pl-pk-q-pill); margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tt-pl-pk-q-fill { position: absolute; inset: 0; z-index: 0; border-radius: 50%; background: var(--tt-pl-pk-q-fill); opacity: calc(1 - var(--tt-pl-uk-liquid-l, 0)); pointer-events: none; }
.tt-pl-pk-q-step svg { position: relative; z-index: 1; display: block; width: calc(var(--tt-pl-pk-q-pill) / 2.058); height: calc(var(--tt-pl-pk-q-pill) / 2.058); }
.tt-pl-pk-q-n { display: inline-flex; align-items: flex-start; justify-content: center; min-width: var(--tt-pl-pk-q-pill); height: calc(var(--tt-pl-pk-q-capv) / 0.63 * 0.63);
	font: 400 calc(var(--tt-pl-pk-q-capv) / 0.63) / 1.2 "Cormorant Garamond", serif; font-variant-numeric: lining-nums tabular-nums; }
.tt-pl-pk-q-col { position: relative; display: inline-block; height: 1.2em; overflow: hidden; margin-top: calc(0.63em - 0.9185em); }   /* the baseline on the box's floor */
.tt-pl-pk-q-ch { display: block; transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1); }
.tt-pl-pk-q-ch.is-out { position: absolute; inset: 0; }
@media (prefers-reduced-motion: reduce) { .tt-pl-pk-q-ch { transition: none; } }
.tt-el-pk-ca-line.is-busy .tt-pl-pk-q-qty { opacity: 1; }

/* "Thêm món": a capsule on the soft fill, the Quick Order's type */
.tt-el-pk-or .tt-el-pk-or-pill { border: 0; border-radius: 999px; background: var(--tt-pl-pk-q-soft); letter-spacing: 0; }

/* The payment step: the methods as a flat list (WooCommerce's grey box around them is gone), each a soft G2 card,
   the chosen one deeper; the fine print and the privacy text move to the sheet behind the info dot by the title */
.tt-el-pk-or #payment, .tt-el-pk-or #payment.woocommerce-checkout-payment { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.tt-el-pk-or #payment ul.payment_methods > li { border: 0; box-shadow: none; background: var(--tt-pl-pk-q-soft); border-radius: calc(var(--tt-pl-pk-q-h) / 2.618033988749895); }
.tt-el-pk-or #payment ul.payment_methods > li:has(input:checked) { box-shadow: none; background: rgba(var(--color-the-rgb, 98, 112, 77), 0.16); }
.tt-el-pk-or.has-payinfo #payment .payment_box, .tt-el-pk-or.has-payinfo #payment .woocommerce-privacy-policy-text { display: none; }
.tt-el-pk-or #payment .form-row.place-order { padding: 0; margin: 0; background: none; }
.tt-el-pk-or-info {
	flex: none; display: grid; place-items: center; width: calc(var(--tt-pl-pk-q-capv) * 2.618033988749895); height: calc(var(--tt-pl-pk-q-capv) * 2.618033988749895);
	margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer;
}
.tt-el-pk-or-info svg { width: 61.8%; height: 61.8%; }
.tt-el-pk-or-payinfo { display: grid; gap: var(--phi-space-s, 1rem); padding-bottom: var(--phi-space-l, 2rem); }
.tt-el-pk-or-payinfo > section h3 { margin: 0 0 var(--phi-space-2xs, 0.5rem); font: 400 var(--phi-step-0, 1rem) / 1.3 "Cormorant Garamond", serif; }
.tt-el-pk-or-payinfo > section p, .tt-el-pk-or-payinfo > section div { margin: 0; font: 400 var(--phi-step-0, 1rem) / 1.5 "Cormorant Garamond", serif; opacity: 0.82; }

/* The coupon: its own section now */
#tt-el-pk-or-h-coupon + .tt-pl-pk-hub-coupon, .tt-el-pk-or-sec .tt-pl-pk-hub-coupon { margin: 0; }
.tt-el-pk-or .tt-pl-pk-hub-coupon__input, .tt-el-pk-or .tt-pl-pk-hub-coupon__apply { border-radius: calc(var(--tt-pl-pk-q-h) / 2); }
.tt-el-pk-or .tt-pl-pk-hub-coupon__apply { border: 0; background: var(--tt-pl-pk-q-c); color: var(--tt-pl-pk-q-ink); letter-spacing: 0; }