/*
 * Tư-Trà Beverage: the order hub (4.0.0), Tư-Trà Order (tt-el-wc-order).
 * From the demo signed off on 13 Oct 2026. Colours on the colorway
 * variables; journey tokens (--tt-pl-bev-j-*) from tt-pl-bev-journey.css.
 */
.tt-el-wc-or-part { width: 100%; }
.tt-el-wc-or, .tt-el-wc-or-head {
	--tt-el-wc-or-dock: var(--tt-el-bn-space-full, 74px);
	font-family: var(--tt-pl-bev-j-sans); color: var(--tt-pl-bev-j-ink);
}

/* Head, in the green band */
.tt-el-wc-or-head { text-align: center; color: var(--color-camelia, rgb(252, 250, 241)); }
.tt-el-wc-or-title { margin: 0; font-family: var(--tt-pl-bev-j-serif); font-weight: 400; font-size: var(--step-5, 2.75rem); line-height: 1; letter-spacing: 0.04em; color: inherit; }
.tt-el-wc-or-fr { margin: 4px 0 0; font-family: var(--tt-pl-bev-j-script, var(--tt-pl-bev-j-serif)); font-size: var(--step-2, 1.5rem); color: inherit; opacity: 0.9; }
.tt-el-wc-or-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: 20rem; margin: 21px auto 0; }
.tt-el-wc-or-seg button { position: relative; margin: 0; border: 0; border-radius: 0; background: none; padding: 8px 0 13px; cursor: pointer;
	color: rgba(252, 250, 241, 0.62); font-family: var(--tt-pl-bev-j-sans); font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; transition: color 0.3s var(--tt-pl-bev-j-ease); }
.tt-el-wc-or-seg button[aria-selected="true"] { color: var(--color-camelia, rgb(252, 250, 241)); }
.tt-el-wc-or-ink { position: absolute; left: 0; bottom: 0; width: 50%; height: 1.5px; background: var(--color-cassonade, rgb(224, 206, 170)); transition: transform 0.42s var(--tt-pl-bev-j-ease); }
.tt-el-wc-or-seg[data-on="orders"] .tt-el-wc-or-ink { transform: translateX(100%); }
.tt-el-wc-or-badge { display: inline-block; min-width: 1.5em; margin-left: 6px; padding: 1px 5px; border-radius: 999px; background: var(--color-cassonade, rgb(224, 206, 170)); color: var(--tt-pl-bev-j-ink); font-size: 0.6875rem; letter-spacing: 0; vertical-align: 1px; }
.tt-el-wc-or-badge:empty { display: none; }
.tt-el-wc-or-badge.is-live { width: 7px; min-width: 0; height: 7px; padding: 0; vertical-align: 2px; animation: tt-el-wc-or-live 1.6s ease-in-out infinite; }
@keyframes tt-el-wc-or-live { 50% { opacity: 0.35; } }

/* Body */
.tt-el-wc-or { max-width: 34rem; margin: 0 auto; padding-bottom: calc(150px + var(--tt-el-wc-or-dock) + env(safe-area-inset-bottom, 0px)); }
.tt-el-wc-or[data-tab="orders"], .tt-el-wc-or[data-empty="1"] { padding-bottom: calc(var(--tt-el-wc-or-dock) + 55px + env(safe-area-inset-bottom, 0px)); }
.tt-el-wc-or-from { margin: 21px 0 0; text-align: center; font-size: 0.8125rem; color: var(--tt-pl-bev-j-soft); }
.tt-el-wc-or-sec { padding: 34px 0 21px; border-bottom: 0.5px solid var(--tt-pl-bev-j-hair); }
.tt-el-wc-or-sec:last-child { border-bottom: 0; }
.tt-el-wc-or-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 13px; margin: 0 0 13px; }
.tt-el-wc-or-sec-h h2 { margin: 0; font-family: var(--tt-pl-bev-j-serif); font-weight: 500; font-size: 1.5rem; line-height: 1.2; color: var(--tt-pl-bev-j-ink); }
.tt-el-wc-or-link { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; color: var(--color-the, rgb(98, 112, 77)); font-family: var(--tt-pl-bev-j-sans); font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 0.5px; }
.tt-el-wc-or-muted { margin: 0; font-family: var(--tt-pl-bev-j-serif); font-size: 1.125rem; color: var(--tt-pl-bev-j-soft); }
.tt-el-wc-or .tt-el-wc-ca-wrap { max-width: none; }
.tt-el-wc-or .tt-el-wc-ca-swipe { grid-template-columns: 64px minmax(0, 1fr); }

/* Suggestions */
.tt-el-wc-or-more { display: flex; gap: 13px; overflow-x: auto; margin: 0 -21px; padding: 0 21px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tt-el-wc-or-more::-webkit-scrollbar { display: none; }
.tt-el-wc-or-card { position: relative; flex: 0 0 9.5rem; scroll-snap-align: start; }
.tt-el-wc-or-ph { display: block; height: 9.5rem; padding: 4px; border: 0.5px solid var(--tt-pl-bev-j-hair); background: var(--color-camelia, rgb(252, 250, 241)); }
.tt-el-wc-or-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-el-wc-or-add { position: absolute; right: 8px; top: calc(9.5rem - 42px); width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; text-decoration: none;
	background: var(--color-the, rgb(98, 112, 77)); color: var(--color-camelia, rgb(252, 250, 241)); font-size: 1.25rem; line-height: 1; transition: transform 0.2s var(--tt-pl-bev-j-ease); }
.tt-el-wc-or-add:active { transform: scale(0.9); }
.tt-el-wc-or-card p { margin: 8px 0 0; font-family: var(--tt-pl-bev-j-serif); font-size: 1.0625rem; line-height: 1.2; }
.tt-el-wc-or-card small { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--tt-pl-bev-j-soft); }

/* Rows that open a sheet */
.tt-el-wc-or-row { display: grid; grid-template-columns: 1fr auto; gap: 13px; align-items: center; width: 100%; margin: 0; padding: 13px 0; border: 0; border-radius: 0; background: none; text-align: left; cursor: pointer; color: inherit; font-family: inherit; }
.tt-el-wc-or-row b { display: block; font-weight: 400; font-size: 1rem; }
.tt-el-wc-or-row small { display: block; margin-top: 2px; font-size: 0.875rem; line-height: 1.4; color: var(--tt-pl-bev-j-soft); }
.tt-el-wc-or-row > span:last-child { font-size: 1.25rem; color: var(--tt-pl-bev-j-soft); }
.tt-el-wc-or-row.is-missing b { color: var(--color-rooibos, rgb(158, 72, 63)); }
.tt-el-wc-or-row.is-shake { animation: tt-el-wc-or-shake 0.42s var(--tt-pl-bev-j-ease); }
@keyframes tt-el-wc-or-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

/* Delivery and payment choices */
.tt-el-wc-or-opt, .tt-el-wc-or #payment ul.payment_methods > li {
	display: grid; grid-template-columns: 20px 1fr auto; gap: 13px; align-items: center; margin: 0 0 8px; padding: 13px 16px; cursor: pointer;
	border: 0.5px solid var(--tt-pl-bev-j-hair); border-radius: 12px; list-style: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.tt-el-wc-or-opt input { position: absolute; opacity: 0; pointer-events: none; }
.tt-el-wc-or-opt:has(input:checked), .tt-el-wc-or #payment ul.payment_methods > li:has(input:checked) { border-color: var(--color-the, rgb(98, 112, 77)); box-shadow: inset 0 0 0 1px var(--color-the, rgb(98, 112, 77)); }
.tt-el-wc-or-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--tt-pl-bev-j-soft); display: grid; place-items: center; }
.tt-el-wc-or-opt:has(input:checked) .tt-el-wc-or-dot { border-color: var(--color-the, rgb(98, 112, 77)); }
.tt-el-wc-or-opt:has(input:checked) .tt-el-wc-or-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-the, rgb(98, 112, 77)); }
.tt-el-wc-or #payment { background: none; border-radius: 0; }
.tt-el-wc-or #payment ul.payment_methods { margin: 0; padding: 0; border: 0; }
.tt-el-wc-or #payment ul.payment_methods > li { grid-template-columns: auto 1fr; }
.tt-el-wc-or #payment ul.payment_methods > li input { accent-color: var(--color-the, rgb(98, 112, 77)); margin: 0; }
.tt-el-wc-or #payment ul.payment_methods > li label { margin: 0; cursor: pointer; }
.tt-el-wc-or #payment .payment_box { grid-column: 1 / -1; margin: 4px 0 0; padding: 0; background: none; font-family: var(--tt-pl-bev-j-serif); font-size: 0.9375rem; color: var(--tt-pl-bev-j-soft); }
.tt-el-wc-or #payment .payment_box::before { display: none; }
.tt-el-wc-or #payment .place-order { margin: 0; padding: 0; }
.tt-el-wc-or #payment #place_order { display: none; }   /* the bar's button places the order */
.tt-el-wc-or #payment .woocommerce-terms-and-conditions-wrapper { font-size: 0.8125rem; color: var(--tt-pl-bev-j-soft); line-height: 1.5; }

/* Sums */
.tt-el-wc-or-sum { display: flex; justify-content: space-between; gap: 13px; padding: 4px 0; font-size: 0.9375rem; }
.tt-el-wc-or-sum > span:first-child { color: var(--tt-pl-bev-j-soft); }
.tt-el-wc-or-sum.is-disc > span:last-child { color: var(--color-the, rgb(98, 112, 77)); }
.tt-el-wc-or-sum .woocommerce-remove-coupon { margin-left: 8px; font-size: 0.8125rem; color: var(--tt-pl-bev-j-soft); }

/* The total bar, above the dock */
.tt-el-wc-or-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--tt-el-wc-or-dock) + env(safe-area-inset-bottom, 0px)); z-index: 20;
	background: var(--color-camelia, rgb(252, 250, 241)); border-top: 0.5px solid var(--tt-pl-bev-j-hair); box-shadow: 0 -13px 34px -21px rgba(35, 31, 32, 0.35);
	transition: transform 0.42s var(--tt-pl-bev-j-ease); }
.tt-el-wc-or-bar.is-away { transform: translateY(calc(100% + var(--tt-el-wc-or-dock) + 21px)); }
.tt-el-wc-or-bar-in { max-width: 34rem; margin: 0 auto; padding: 13px 21px 16px; }
.tt-el-wc-or-tot { display: flex; align-items: baseline; justify-content: space-between; }
.tt-el-wc-or-tot span { font-size: 0.9375rem; color: var(--tt-pl-bev-j-soft); }
.tt-el-wc-or-tot strong { font-family: var(--tt-pl-bev-j-serif); font-weight: 500; font-size: 1.75rem; }
.tt-el-wc-or-saved { min-height: 1.1em; margin: 0 0 8px; font-size: 0.8125rem; color: var(--color-the, rgb(98, 112, 77)); }
.tt-el-wc-or-go { width: 100%; height: 50px; margin: 0; border: 0; border-radius: 0; cursor: pointer;
	background: var(--color-the, rgb(98, 112, 77)); color: var(--color-camelia, rgb(252, 250, 241)); font-family: var(--tt-pl-bev-j-sans); font-size: 0.8125rem; letter-spacing: 0.24em; text-transform: uppercase; }
.tt-el-wc-or-go:active { opacity: 0.85; }
.tt-el-wc-or-go--ghost { background: none; border: 1px solid var(--color-the, rgb(98, 112, 77)); color: var(--color-the, rgb(98, 112, 77)); margin-top: 21px; }
.tt-el-wc-or form.processing .tt-el-wc-or-go { opacity: 0.55; pointer-events: none; }

/* Sheets */
/* Sheets move like Tư-Trà Offcanvas (2.7.0): 0.45s, easeOutExpo in, easeInExpo out
   (the destination state carries the timing), and the same backdrop tone as the
   receipt panel in the overlay segment, so the two read as one system. */
.tt-el-wc-or, .tt-tp-overlay-receipt-slot {
	--tt-el-wc-or-dur: 0.45s; --tt-el-wc-or-in: cubic-bezier(0.16, 1, 0.3, 1); --tt-el-wc-or-out: cubic-bezier(0.7, 0, 0.84, 0);
}
.tt-el-wc-or-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(35, 31, 32, 0.32); opacity: 0; transition: opacity var(--tt-el-wc-or-dur) var(--tt-el-wc-or-out); }
.tt-el-wc-or-scrim.is-on { opacity: 1; transition-timing-function: var(--tt-el-wc-or-in); }
.tt-el-wc-or-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-width: 34rem; max-height: 88dvh; overflow: auto; margin: 0 auto;
	padding: 13px 21px calc(21px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0;
	background: var(--bricks-color-gdyapl, rgb(244, 245, 240)); transform: translateY(105%); transition: transform var(--tt-el-wc-or-dur) var(--tt-el-wc-or-out); }
.tt-el-wc-or-sheet.is-on { transform: none; transition-timing-function: var(--tt-el-wc-or-in); }
.tt-el-wc-or-grab { width: 36px; height: 4px; margin: 0 auto 21px; border-radius: 2px; background: var(--tt-pl-bev-j-hair); }
.tt-el-wc-or-sheet h3 { margin: 0 0 21px; font-family: var(--tt-pl-bev-j-serif); font-weight: 500; font-size: 1.5rem; }
.tt-el-wc-or-sheet .form-row { margin: 0 0 21px; padding: 0; }
.tt-el-wc-or-sheet .form-row label { display: block; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tt-pl-bev-j-soft); }
.tt-el-wc-or-sheet .form-row label .required { color: inherit; text-decoration: none; }
.tt-el-wc-or-sheet .input-text, .tt-el-wc-or-sheet textarea {
	width: 100%; padding: 8px 0; border: 0; border-bottom: 0.5px solid var(--tt-pl-bev-j-hair); border-radius: 0; outline: none; background-color: transparent;
	font-family: var(--tt-pl-bev-j-serif); font-size: 1.1875rem; color: var(--tt-pl-bev-j-ink);
	background-image: linear-gradient(var(--color-the, rgb(98, 112, 77)), var(--color-the, rgb(98, 112, 77))); background-repeat: no-repeat; background-position: left bottom; background-size: 0 1.5px;
	transition: background-size 0.42s var(--tt-pl-bev-j-ease); }
.tt-el-wc-or-sheet .input-text:focus, .tt-el-wc-or-sheet textarea:focus { background-size: 100% 1.5px; }
.tt-el-wc-or-sheet textarea { resize: none; height: 3.2em; }
.tt-el-wc-or-sheet .woocommerce-invalid .input-text { border-bottom-color: var(--color-rooibos, rgb(158, 72, 63)); }
.tt-el-wc-or-err { display: block; min-height: 1.1em; margin-top: 4px; font-style: normal; font-size: 0.8125rem; color: var(--color-rooibos, rgb(158, 72, 63)); }
.tt-el-wc-or-hidden { display: none !important; }
.tt-el-wc-or-rcv .tt-el-wc-ty-rc { margin-top: 8px; }

/* WooCommerce's own error box, above the form */
.tt-el-wc-or .woocommerce-NoticeGroup-checkout { display: none; }   /* shown as the toast */
.tt-el-wc-or-toast { position: fixed; left: 50%; bottom: calc(160px + var(--tt-el-wc-or-dock) + env(safe-area-inset-bottom, 0px)); z-index: 45; max-width: calc(100% - 42px);
	padding: 10px 16px; transform: translate(-50%, 21px); opacity: 0; pointer-events: none; background: var(--tt-pl-bev-j-ink); color: var(--color-camelia, rgb(252, 250, 241));
	font-size: 0.875rem; line-height: 1.4; transition: opacity 0.3s var(--tt-pl-bev-j-ease), transform 0.3s var(--tt-pl-bev-j-ease); }
.tt-el-wc-or-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.tt-el-wc-or[data-tab="orders"] .tt-el-wc-or-toast { bottom: calc(var(--tt-el-wc-or-dock) + 21px + env(safe-area-inset-bottom, 0px)); }

/* The current order: where it is */
.tt-el-wc-or-track { padding: 4px 0 21px; }
.tt-el-wc-or-track + .tt-el-wc-or-track { border-top: 0.5px solid var(--tt-pl-bev-j-hair); padding-top: 21px; }
.tt-el-wc-or-track-h { display: flex; justify-content: space-between; align-items: baseline; }
.tt-el-wc-or-track-h b { font-family: var(--tt-pl-bev-j-serif); font-weight: 500; font-size: 1.375rem; }
.tt-el-wc-or-track-h span { font-size: 0.8125rem; color: var(--tt-pl-bev-j-soft); }
.tt-el-wc-or-track-now { margin: 13px 0 0; font-family: var(--tt-pl-bev-j-serif); font-size: 1.125rem; }
.tt-el-wc-or-track-now small { display: block; margin-top: 2px; font-family: var(--tt-pl-bev-j-sans); font-size: 0.8125rem; color: var(--tt-pl-bev-j-soft); }
.tt-el-wc-or-stages { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 16px 0 13px; padding: 0; }
.tt-el-wc-or-stages li { position: relative; padding-top: 13px; font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--tt-pl-bev-j-soft); }
.tt-el-wc-or-stages li::before, .tt-el-wc-or-stages li::after { content: ""; position: absolute; top: 0; left: 0; height: 3px; border-radius: 2px; }
.tt-el-wc-or-stages li::before { right: 0; background: var(--tt-pl-bev-j-hair); }
.tt-el-wc-or-stages li::after { width: 0; background: var(--color-the, rgb(98, 112, 77)); transition: width 0.7s var(--tt-pl-bev-j-ease); }
.tt-el-wc-or-stages li.is-done::after { width: 100%; }
.tt-el-wc-or-stages li.is-now::after { width: 50%; animation: tt-el-wc-or-brew 1.8s ease-in-out infinite alternate; }
@keyframes tt-el-wc-or-brew { from { width: 20%; } to { width: 80%; } }
.tt-el-wc-or-stages li.is-done, .tt-el-wc-or-stages li.is-now { color: var(--tt-pl-bev-j-ink); }

/* Past orders */
.tt-el-wc-or-past { list-style: none; margin: 0; padding: 0; }
.tt-el-wc-or-past-i { display: grid; grid-template-columns: 1fr auto; gap: 4px 13px; padding: 16px 0; border-bottom: 0.5px solid var(--tt-pl-bev-j-hair); }
.tt-el-wc-or-past-i:last-child { border-bottom: 0; }
.tt-el-wc-or-when { font-size: 0.8125rem; color: var(--tt-pl-bev-j-soft); }
.tt-el-wc-or-what { grid-column: 1; font-family: var(--tt-pl-bev-j-serif); font-size: 1.125rem; line-height: 1.25; }
.tt-el-wc-or-amt { grid-column: 2; grid-row: 1 / span 2; align-self: start; text-align: right; }
.tt-el-wc-or-st { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--tt-pl-bev-j-soft); }
.tt-el-wc-or-st.is-off { color: var(--color-rooibos, rgb(158, 72, 63)); }
.tt-el-wc-or-acts { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 21px; margin-top: 8px; }
.tt-el-wc-or-redo { margin: 0; padding: 0 0 2px; border: 0; border-bottom: 1px solid var(--color-the, rgb(98, 112, 77)); border-radius: 0; background: none; cursor: pointer;
	color: var(--color-the, rgb(98, 112, 77)); font-family: var(--tt-pl-bev-j-sans); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; }
.tt-el-wc-or-redo[disabled] { opacity: 0.45; }
.tt-el-wc-or-terms { margin: 21px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--tt-pl-bev-j-soft); }

@media (prefers-reduced-motion: reduce) {
	.tt-el-wc-or *, .tt-el-wc-or-head * { animation: none !important; transition: none !important; }
}

/* The receipt panel in the overlay segment (template "Overlay — Receipt"): its
   grab handle, the receipt inside, its close button. */
.tt-oc .tt-tp-overlay-receipt-grab { flex: none; width: 36px; height: 4px; margin: 0 auto 21px; border-radius: 2px; background: var(--tt-pl-bev-j-hair); }
.tt-oc .tt-tp-overlay-receipt-slot { flex: none; }
.tt-oc .tt-tp-overlay-receipt-slot .tt-el-wc-ty-rc { margin-top: 8px; }
.tt-oc .tt-tp-overlay-receipt-close {
	flex: none; display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; margin: 21px 0 0; padding: 0; cursor: pointer;
	border: 1px solid var(--color-the, rgb(98, 112, 77)); border-radius: 0; background: none; color: var(--color-the, rgb(98, 112, 77));
	font-family: var(--tt-pl-bev-j-sans); font-size: 0.8125rem; letter-spacing: 0.24em; text-transform: uppercase;
}