/*
 * Checkout specific visual refinements for Tapper Brews.
 *
 * In the look the cart, checkout and account pages share (owner, 2026-10-02).
 * The --tc-* tokens come from tt-flow on <body> (motta-child/assets/flow.css);
 * each is read with its literal, so these are right without that sheet too.
 * Anything here that carries the theme's `.button` class -- "Show delivery
 * FAQs", "Remove this vendor" -- takes its shape from that sheet; only what
 * differs is said here.
 */

/* The tips: a plain panel that opens, not a card competing with the form under it. */
.tt-checkout-upsell {
	background: var(--tc-band, #F5EFE3);
	border: 0;
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 16px;
	box-shadow: none;
	color: var(--tc-ink, #121111);
	font-size: 14px;
	line-height: 1.45;
}

.tt-checkout-upsell__title {
	margin: 0;
	color: var(--tc-ink, #121111);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.45;
	text-transform: none;
}

.tt-checkout-upsell__list {
	margin: 0;
	padding-left: 1.25rem;
	color: var(--tc-body, #413E3C);
}

.tt-checkout-upsell__list a {
	color: var(--tc-green, #29594B);
	font-weight: 600;
}

.tt-checkout-note {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--tc-muted, #6B6660);
}

/* "Show delivery FAQs": the page sheet's quiet button; this is only its place. */
.tt-checkout-upsell__body .button {
	margin-top: 12px;
}

/*
 * The FAQ answer, white inside the band so it reads as the thing the button
 * opened. No `display` here: the script shows and hides it with the attribute.
 */
.tt-checkout-highlight {
	background: var(--tc-card, #FFFFFF);
	border: 0;
	padding: 12px 14px;
	border-radius: 10px;
	margin-top: 12px;
	color: var(--tc-body, #413E3C);
}

.tt-checkout-highlight p {
	margin: 0;
}

/* ---- Dokan's "Delivery details" box ---- */

#dokan-delivery-time-box .header .delivery-timezone {
	display: none !important;
}

#dokan-delivery-time-box .dokan-store-location-selector,
#dokan-delivery-time-box .delivery-time-date-picker {
	display: none !important;
}

/*
 * Dokan draws this box as a grey raised card, 50px clear of everything, with a
 * grey box per seller (delivery-time/assets/css/script-style.css). Here it is
 * one section of the order card: a label, then a row per seller -- the name at
 * the left, the estimate at the right, wrapping under it on a phone.
 *
 * Dokan's rules reach (1,3,1) and its sheet prints after this one, so each of
 * these is named from <body> and carries one class more than the rule it
 * answers. Tapper Brews prints the same markup for its own wait and restyles it
 * from .tc-delivery-box (tapper-cafe-fulfillment/assets/delivery.css).
 */
.woocommerce-checkout #dokan-delivery-time-box {
	margin: 0;
	padding: 16px 0;
	border-top: 1px solid var(--tc-line, rgba(18, 17, 17, 0.1));
}

.woocommerce-checkout #dokan-delivery-time-box .header h3 {
	margin: 0 0 10px;
	color: var(--tc-muted, #6B6660);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.woocommerce-checkout #dokan-delivery-time-box .delivery-time-body {
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.woocommerce-checkout #dokan-delivery-time-box .delivery-time-body .delivery-group {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 12px;
	margin: 0 0 8px;
}

.woocommerce-checkout #dokan-delivery-time-box .delivery-time-body .delivery-group:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout #dokan-delivery-time-box .delivery-time-body .delivery-group .title {
	margin: 0;
}

/* The bag icon beside each name: a row per seller already says "a seller". */
.woocommerce-checkout #dokan-delivery-time-box .delivery-time-body .delivery-group .title svg {
	display: none;
}

.woocommerce-checkout #dokan-delivery-time-box .delivery-time-body .delivery-group .title span {
	margin: 0;
	color: var(--tc-ink, #121111);
	font-size: 15px;
	font-weight: 600;
}

.woocommerce-checkout #dokan-delivery-time-box .delivery-time-body .delivery-group .vendor-info {
	min-width: 0;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
}

/* A seller that cannot deliver takes the whole row under its name. */
.woocommerce-checkout #dokan-delivery-time-box .delivery-time-body .delivery-group .vendor-info:has(.tt-checkout-vendor-error),
.woocommerce-checkout #dokan-delivery-time-box .delivery-time-body .delivery-group .vendor-info:has(.tt-checkout-vendor-warning) {
	flex: 1 0 100%;
	margin-top: 6px;
}

/* The rule between sellers: the rows are spaced, and a rule per row read as a table. */
.woocommerce-checkout #dokan-delivery-time-box .delivery-time-body .delivery-group hr {
	display: none;
}

/* The date the script puts in bold. */
#dokan-delivery-time-box .vendor-info strong {
	color: var(--tc-ink, #121111);
	font-weight: 600;
}

/*
 * "Delivery is not available for this address", as an error panel on the line
 * itself -- the script puts the class on the span, so the span is the panel.
 * Named the long way because Dokan zeroes a line's padding at (1,3,1).
 */
.woocommerce-checkout #dokan-delivery-time-box .delivery-time-body .delivery-group .vendor-info .tt-checkout-vendor-error {
	display: block;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--tc-danger-soft, #FBEDEB);
	color: var(--tc-danger, #9B2C1F) !important;
	line-height: 1.45;
}

/* "Please enter your State and Pincode": nothing is wrong yet, so the warning's colours. */
.woocommerce-checkout #dokan-delivery-time-box .delivery-time-body .delivery-group .vendor-info .tt-checkout-vendor-warning {
	display: block;
	padding: 12px 14px;
	border-radius: 10px;
	background: #FBF0D9;
	color: var(--tc-amber-ink, #8A5A00) !important;
	font-weight: 500;
	line-height: 1.45;
}

/*
 * "Remove this vendor". It carries `.button`, so the page sheet draws it as the
 * quiet button; this was a bare underlined link and its resets are gone so that
 * can land. What is left is its place, and the danger colour -- named from
 * body.tt-flow so it is past the page sheet's own button colour.
 */
#dokan-delivery-time-box .vendor-info .tt-checkout-remove-vendor {
	margin-top: 8px;
}

body.tt-flow #dokan-delivery-time-box .vendor-info .tt-checkout-remove-vendor,
body.tt-flow #dokan-delivery-time-box .vendor-info .tt-checkout-remove-vendor:hover,
body.tt-flow #dokan-delivery-time-box .vendor-info .tt-checkout-remove-vendor:focus,
body.tt-flow #dokan-delivery-time-box .vendor-info .tt-checkout-remove-vendor:active {
	color: var(--tc-danger, #9B2C1F);
}

body.tt-flow #dokan-delivery-time-box .vendor-info .tt-checkout-remove-vendor:hover,
body.tt-flow #dokan-delivery-time-box .vendor-info .tt-checkout-remove-vendor:focus {
	border-color: var(--tc-danger, #9B2C1F);
	background: var(--tc-danger-soft, #FBEDEB);
}

#dokan-delivery-time-box .vendor-info span {
	color: var(--tc-body, #413E3C) !important;
	font-size: 14px !important;
}
/* ---- the tips block, collapsed until asked for ---- */

/*
 * The heading is a <button>, and Motta styles bare buttons with `min-width:
 * 160px`, `border-radius: 30px` and a dark green fill on `:hover` and `:focus`
 * -- without changing the text colour to go with it. Left alone, this heading
 * turned into a dark slab with dark text on it the moment a pointer touched it,
 * and the same again on keyboard focus.
 *
 * So every state is declared here rather than inherited, and the theme's sizing
 * is reset. Three classes of specificity because the theme's own button rules
 * are not something to out-order by accident.
 */

.tt-checkout-upsell__title {
	margin: 0;
}

.tt-checkout-upsell .tt-checkout-upsell__title .tt-checkout-upsell__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	min-width: 0;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	transition: color 0.12s ease;
}

/*
 * No fill on any of them. An affordance the size of a heading does not need a
 * background to say it is pressable, and a fill is exactly what went wrong.
 */
.tt-checkout-upsell .tt-checkout-upsell__title .tt-checkout-upsell__toggle:hover,
.tt-checkout-upsell .tt-checkout-upsell__title .tt-checkout-upsell__toggle:focus,
.tt-checkout-upsell .tt-checkout-upsell__title .tt-checkout-upsell__toggle:active {
	background: transparent;
	box-shadow: none;
	color: var(--tc-green, #29594B);
	outline: none;
}

.tt-checkout-upsell .tt-checkout-upsell__title .tt-checkout-upsell__toggle:focus-visible {
	outline: 2px solid var(--tc-green, #29594B);
	outline-offset: 3px;
}

.tt-checkout-upsell__chevron {
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	/* Points down when closed, up when open. */
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.15s ease;
}

.tt-checkout-upsell__toggle[aria-expanded="true"] .tt-checkout-upsell__chevron {
	transform: rotate(-135deg);
}

.tt-checkout-upsell__body {
	margin-top: 10px;
}

.tt-checkout-upsell__body[hidden] {
	display: none;
}

/*
 * A picture beside each line of the "Your order" table.
 *
 * review_item_thumbnail() puts it in front of the name, inside td.product-name,
 * because review-order.php has no cell for one. Floated so the name, the
 * quantity and the line's details wrap beside it; the ::after clears it so a
 * short line still gives the picture its full height.
 *
 * 44px with 10px corners and a hairline: a line item's picture at the size a
 * summary draws it. The hairline is a border and the box is sized with it, so
 * the picture and the tile inside are both cut to the same rounded square.
 */
.woocommerce-checkout-review-order-table td.product-name::after {
	content: "";
	display: block;
	clear: both;
}

.tt-review-thumb {
	float: left;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	margin: 0 12px 4px 0;
	overflow: hidden;
	border: 1px solid var(--tc-line, rgba(18, 17, 17, 0.1));
	border-radius: 10px;
}

.tt-review-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/*
 * A Tapper Brews coffee's roast tile (TC_Cart_Media), shrunk to the same slot.
 * The slot's own corners and hairline are what show, so the tile drops its.
 */
.tt-review-thumb .tc-cart-media.tc-coffee__media {
	width: 100%;
	border-radius: 0;
	box-shadow: none;
}

.tt-review-thumb .tc-cart-media .tc-coffee__tileMark {
	width: 22px;
	height: 22px;
}

.tt-review-thumb .tc-cart-media .tc-coffee__tileMark--initial {
	font-size: 11px;
}

/*
 * The width of the "Your order" value column.
 *
 * The theme pins it with
 *
 *     form.checkout table.shop_table tbody td.product-total { width: 20% }
 *
 * (motta/woocommerce.css, from sass/woocommerce/_checkout.scss). Under auto
 * table layout a width on one cell sizes the whole column, so that 20% reaches
 * every tfoot value too -- subtotal, delivery, GST, total. On a 375px viewport
 * the review box is about 329px of content, which leaves the column near 66px:
 * enough to break a four-figure amount over two lines, and enough to turn the
 * tax breakdown into seven lines of two words. The 56px thumbnails that went
 * into td.product-name made it worse, because the name column now wants more
 * and this one has nothing to give.
 *
 * `width: 1%` with nowrap is shrink-to-fit: the column ends up exactly as wide
 * as the longest amount in it and not one pixel wider, and the name column
 * keeps everything else.
 *
 * Rows that span both columns are exempt by the :not([colspan]) -- the GST note,
 * the delivery progress bar, the reward picker and the surge note all carry
 * sentences, and nowrap would push them straight out of the table. Matching on
 * the attribute rather than on their four class names means a full-width row
 * added later is exempt without anyone having to remember this rule.
 *
 * This file is enqueued before the theme's woocommerce.css, so an
 * equal-specificity rule would lose. Naming .woocommerce-checkout-review-order-table
 * alongside .shop_table is what puts this one class ahead of the theme's.
 */
form.checkout table.shop_table.woocommerce-checkout-review-order-table tbody td.product-total,
form.checkout table.shop_table.woocommerce-checkout-review-order-table tfoot td:not([colspan]) {
	width: 1%;
	white-space: nowrap;
}