/**
 * Taobao importer — front end.
 *
 * The plugin sits inside somebody else's theme, so type is inherited and every
 * colour is a custom property the theme or child theme can override.
 */

.wti {
	--wti-ink: #17181c;
	--wti-muted: #6b6f76;
	--wti-line: #dcdee2;
	--wti-line-strong: #b6bac1;
	--wti-surface: #ffffff;
	--wti-sunken: #f5f6f8;
	--wti-accent: #23395b;
	--wti-accent-ink: #ffffff;
	--wti-alert: #9c2c15;
	--wti-ok: #1d6b4a;

	font: inherit;
	color: var(--wti-ink);
	max-width: 62rem;
	margin-inline: auto;
}

.wti *,
.wti *::before,
.wti *::after {
	box-sizing: border-box;
}

/* ---------- Intake ---------- */

.wti-intake__heading {
	margin: 0 0 0.25em;
	font-size: 1.35em;
	line-height: 1.2;
}

.wti-intake__description {
	margin: 0 0 1.1em;
	max-width: 52ch;
	color: var(--wti-muted);
	line-height: 1.55;
}

.wti-intake__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: stretch;
}

.wti-intake__input {
	flex: 1 1 22rem;
	min-width: 0;
	padding: 0.75rem 0.9rem;
	font: inherit;
	color: inherit;
	background: var(--wti-surface);
	border: 1px solid var(--wti-line-strong);
	border-radius: 6px;
	direction: ltr;
}

.wti-intake__input:focus-visible,
.wti-intake__submit:focus-visible {
	outline: 2px solid var(--wti-accent);
	outline-offset: 2px;
}

.wti-intake__submit {
	flex: 0 0 auto;
	padding: 0.75rem 1.4rem;
	font: inherit;
	font-weight: 600;
	color: var(--wti-accent-ink);
	background: var(--wti-accent);
	border: 1px solid var(--wti-accent);
	border-radius: 6px;
	cursor: pointer;
}

.wti-intake__submit[disabled] {
	opacity: 0.55;
	cursor: progress;
}

.wti-feedback {
	margin: 0.7rem 0 0;
	min-height: 1.2em;
	font-size: 0.92em;
	line-height: 1.45;
}

.wti-feedback[data-tone="error"] {
	color: var(--wti-alert);
}

.wti-feedback[data-tone="ok"] {
	color: var(--wti-ok);
}

.wti-feedback[data-tone="busy"] {
	color: var(--wti-muted);
}

/* Hero bar styles ship inline with [taobao_import_bar] (WTI_Frontend::bar_css()),
   so the bar keeps its layout even when this file is cached or overridden. */

/* ---------- WhatsApp ordering ---------- */

.wti-wa-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
}

.wti-wa-button::before {
	content: "";
	width: 1.1em;
	height: 1.1em;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 11.9 11.9 0 0 0 4.6 4c1.7.7 2.3.8 3.2.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.2-.2-.4-.3z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 11.9 11.9 0 0 0 4.6 4c1.7.7 2.3.8 3.2.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.2-.2-.4-.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.single-product form.cart .wti-wa-button {
	margin-left: 0.5em;
}

.wc-proceed-to-checkout .wti-wa-button,
.wti-wa-cart-block .wti-wa-button {
	width: 100%;
}

.wti-wa-cart-block {
	margin: 1rem 0 0;
}

.wti-wa-button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.wti-wa-note {
	flex-basis: 100%;
	margin: 0.5em 0 0;
	font-size: 0.92em;
	color: #9c2c15;
}

/*
 * WhatsApp-only mode: the WhatsApp button replaces add to cart. The quantity
 * box and option dropdowns stay, since the message carries both.
 */
.wti-whatsapp-only form.cart .single_add_to_cart_button {
	display: none !important;
}

.wti-whatsapp-only form.cart .wti-wa-button {
	margin-left: 0.5em;
	background-color: #1f8f4e;
	border-color: #1f8f4e;
	color: #fff;
}

.wti-whatsapp-only form.cart .wti-wa-button:hover,
.wti-whatsapp-only form.cart .wti-wa-button:focus-visible {
	background-color: #17733e;
	border-color: #17733e;
	color: #fff;
}

/*
 * Checkout taken over by WhatsApp: hide block checkout buttons and the
 * express payment buttons of the common gateways (Stripe, WooPayments,
 * PayPal, Square). The server refuses their orders as well.
 */
.wti-no-checkout .wc-block-cart__submit-container,
.wti-no-checkout .wc-block-mini-cart__footer-checkout,
.wti-no-checkout .wc-block-components-express-payment,
.wti-no-checkout .wc-block-components-express-payment-continue-rule,
.wti-no-checkout #wc-stripe-payment-request-wrapper,
.wti-no-checkout #wc-stripe-payment-request-button-separator,
.wti-no-checkout #wc-stripe-express-checkout-element,
.wti-no-checkout #wc-stripe-express-checkout-button-separator,
.wti-no-checkout #wcpay-payment-request-wrapper,
.wti-no-checkout #wcpay-payment-request-button-separator,
.wti-no-checkout #wcpay-express-checkout-element,
.wti-no-checkout #wcpay-express-checkout-button-separator,
.wti-no-checkout .wcpay-express-checkout-wrapper,
.wti-no-checkout .ppc-button-wrapper,
.wti-no-checkout #ppc-button-ppcp-gateway,
.wti-no-checkout #wc-square-digital-wallet {
	display: none !important;
}

/* ---------- Imported description ---------- */

.wti-description img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}