/**
 * Multi-site checkout panel.
 *
 * Styled from the theme's own checkout tokens rather than a palette of its own,
 * so the panel reads as another step of the checkout: peach pill headings,
 * 30px cards, 4px white fields, green pill primary buttons, sofia-pro
 * throughout (inherited, never restated).
 */

/*
 * Lifted from the theme's checkout: step titles, order summary card,
 * place-order button and field styling. Declared on :root so the account
 * page picks them up too — it reuses these components outside .tmo-panel.
 */
:root {
	--tmo-peach: #ffbd99;
	--tmo-lavender: #f4e7f4;
	/* The theme's "v3 green" mint (totm-bg-v3green). */
	--tmo-mint: #b9e3df;

	/*
	 * The checkout's own heading face, taken from
	 * .wc-block-components-checkout-step__title. It has to be stated rather
	 * than inherited: the theme styles bare h2 (ivypresto-display) and h4
	 * (termina) elements, and an element rule beats inheritance.
	 */
	--tmo-font: sofia-pro, Georgia, serif;
	--tmo-green: #9ccb8b;
	--tmo-ink: #0a0a0a;
	--tmo-muted: #5b5d5f;
	--tmo-field-border: rgba( 43, 45, 47, 0.8 );
	--tmo-line: rgba( 43, 45, 47, 0.18 );
	--tmo-surface: #faf7fa;
	--tmo-danger: #a12a2a;

	--tmo-r-card: 30px;
	--tmo-r-pill: 100px;
	--tmo-r-box: 16px;
	--tmo-r-field: 4px;
}

/*
 * No card around the panel — the checkout's own steps are transparent and sit
 * straight on the page, so this does too. Background and border are stated
 * rather than left off, because the theme paints some wrapper elements.
 */
.tmo-panel {
	margin: 0 0 40px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var( --tmo-ink );
}

/*
 * Inline placement: sitting among the checkout's own steps, the panel matches
 * their rhythm rather than the looser spacing it needs when it stands alone
 * above the form.
 */
.tmo-panel--inline {
	margin: 0 0 24px;
}

/*
 * The theme styles bare <header>/<footer> elements with a white background and
 * a rule. The markup uses divs, and these keep any inherited wrapper styling
 * from painting a band across the panel.
 */
.tmo-panel__header,
.tmo-panel__body,
.tmo-panel__footer {
	padding: 0;
	border: 0;
	background: none;
}

/*
 * Author-level display rules (the flex on the loading row, for one) outrank the
 * user-agent [hidden] rule, so restate it — the panel toggles visibility
 * entirely through the hidden attribute.
 */
.tmo-panel[hidden],
.tmo-panel [hidden] {
	display: none !important;
}

.tmo-panel[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

/* Header ---------------------------------------------------------------- */

/* Matches .wc-block-components-checkout-step__title exactly. */
.tmo-panel__title {
	display: block;
	margin: 0 0 20px;
	padding: 12px 18px;
	border-radius: var( --tmo-r-pill );
	background: var( --tmo-peach );
	color: #000;
	font-family: var( --tmo-font );
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
}

.tmo-panel__intro {
	margin: 0 0 16px;
	max-width: 68ch;
	font-size: 16px;
	line-height: 1.5;
	color: var( --tmo-muted );
}

.tmo-panel__loading {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var( --tmo-muted );
}

.tmo-spinner {
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: tmo-spin 0.7s linear infinite;
}

@keyframes tmo-spin {
	to { transform: rotate( 360deg ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.tmo-spinner { animation-duration: 3s; }
}

/* Checkbox — mirrors .wc-block-components-checkbox ---------------------- */

.tmo-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	font-size: 16px;
	line-height: 1.4;
}

.tmo-checkbox__input {
	position: absolute;
	width: 20px;
	height: 20px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.tmo-checkbox__box {
	flex: 0 0 auto;
	display: block;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border: 1px solid rgba( 0, 0, 0, 0.48 );
	border-radius: var( --tmo-r-field );
	background: #fff;
}

.tmo-checkbox__box svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: #fff;
	opacity: 0;
}

.tmo-checkbox__input:checked + .tmo-checkbox__box {
	border-color: var( --tmo-ink );
	background: var( --tmo-ink );
}

.tmo-checkbox__input:checked + .tmo-checkbox__box svg {
	opacity: 1;
}

.tmo-checkbox__input:focus-visible + .tmo-checkbox__box {
	outline: 2px solid var( --tmo-ink );
	outline-offset: 2px;
}

.tmo-checkbox__label {
	font-weight: 500;
}

.tmo-panel.is-blocked .tmo-checkbox {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Sections -------------------------------------------------------------- */

.tmo-panel__body {
	margin-top: 24px;
}

.tmo-section + .tmo-section {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid var( --tmo-line );
}

/*
 * Same face as the panel title, one step down and without the pill — the pill
 * is what marks a checkout step, and these are headings inside one.
 */
.tmo-section__title {
	margin: 0 0 14px;
	padding: 0;
	background: none;
	color: var( --tmo-ink );
	font-family: var( --tmo-font );
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

.tmo-section__hint {
	margin: 0 0 16px;
	font-size: 15px;
	color: var( --tmo-muted );
}

/* Site cards ------------------------------------------------------------ */

/* Two per row, wrapping to the next row after that. */
.tmo-sites {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 16px;
}

.tmo-site {
	padding: 18px;
	border: 1px solid var( --tmo-line );
	border-radius: var( --tmo-r-box );
	background: #fff;
	font-size: 15px;
	line-height: 1.45;
}

.tmo-site.is-selected {
	border-color: var( --tmo-ink );
	box-shadow: inset 0 0 0 1px var( --tmo-ink );
}

.tmo-site__choose {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
}

.tmo-site__choose input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var( --tmo-ink );
}

.tmo-site__name {
	font-size: 16px;
	font-weight: 700;
}

.tmo-site__address {
	margin: 10px 0 0;
	padding-left: 32px;
	font-style: normal;
	color: var( --tmo-muted );
}

.tmo-site__ref {
	margin-top: 6px;
	padding-left: 32px;
	font-size: 14px;
	color: var( --tmo-muted );
}

.tmo-site__actions {
	display: flex;
	gap: 18px;
	margin-top: 14px;
	padding-left: 32px;
}

.tmo-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 10px;
	border-radius: var( --tmo-r-pill );
	background: var( --tmo-lavender );
	font-size: 12px;
	font-weight: 500;
	vertical-align: middle;
}

/*
 * One row, one shape. These used to be an outlined pill plus two bare
 * underlined links, which wrapped onto separate lines at different heights and
 * read as three unrelated controls. As equal-sized pills they stay tidy however
 * they wrap, and the primary action carries a darker border rather than a
 * different shape.
 */
.tmo-sites__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 20px;
}

.tmo-panel .tmo-sites__actions .tmo-btn--chip {
	/* Grow to fill the row rather than leaving a ragged tail of pills. */
	flex: 1 1 auto !important;
	padding: 10px 18px !important;
	border: 1px solid var( --tmo-line ) !important;
	border-radius: var( --tmo-r-pill ) !important;
	background: #fff !important;
	color: var( --tmo-ink ) !important;
	font-size: 15px !important;
	font-weight: 400;
	text-decoration: none !important;
}

.tmo-panel .tmo-sites__actions .tmo-btn--chip-primary {
	border-color: var( --tmo-ink ) !important;
	font-weight: 500;
}

.tmo-panel .tmo-sites__actions .tmo-btn--chip:hover,
.tmo-panel .tmo-sites__actions .tmo-btn--chip:focus-visible {
	border-color: var( --tmo-ink ) !important;
}

.tmo-empty {
	margin: 0;
	font-size: 16px;
	color: var( --tmo-muted );
}

/* Buttons --------------------------------------------------------------- */

/*
 * The theme styles buttons very aggressively (html body .button… with a
 * pseudo-element arrow and 60px of right padding) and would otherwise turn
 * "Edit" and "Remove" into full-width pills. Scoped to the plugin's own
 * containers, with !important only where that rule would win.
 */
.tmo-panel .tmo-btn,
.tmo-form--page .tmo-btn,
.tmo-account-actions .tmo-btn,
.tmo-account-site__actions .tmo-btn,
.tmo-import .tmo-btn {
	position: static !important;
	display: inline-block !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	font: inherit;
	line-height: 1.3 !important;
	text-align: center;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
	box-shadow: none !important;
}

.tmo-panel .tmo-btn::before,
.tmo-panel .tmo-btn::after,
.tmo-form--page .tmo-btn::before,
.tmo-form--page .tmo-btn::after,
.tmo-account-actions .tmo-btn::before,
.tmo-account-actions .tmo-btn::after,
.tmo-account-site__actions .tmo-btn::before,
.tmo-account-site__actions .tmo-btn::after,
.tmo-import .tmo-btn::before,
.tmo-import .tmo-btn::after {
	content: none !important;
	display: none !important;
}

/* Mirrors the place-order button. */
.tmo-panel .tmo-btn--primary,
.tmo-form--page .tmo-btn--primary,
.tmo-account-actions .tmo-btn--primary {
	padding: 14px 28px !important;
	border: 0 !important;
	border-radius: var( --tmo-r-pill, 100px ) !important;
	background: #9ccb8b !important;
	color: #000 !important;
	font-size: 17px !important;
	font-weight: 500;
	text-decoration: none !important;
}

.tmo-panel .tmo-btn--secondary,
.tmo-account-actions .tmo-btn--secondary,
.tmo-import .tmo-btn--secondary {
	padding: 13px 26px !important;
	border: 1px solid #0a0a0a !important;
	border-radius: var( --tmo-r-pill, 100px ) !important;
	background: transparent !important;
	color: #0a0a0a !important;
	font-size: 16px !important;
}

.tmo-panel .tmo-btn--link,
.tmo-form--page .tmo-btn--link,
.tmo-account-actions .tmo-btn--link,
.tmo-account-site__actions .tmo-btn--link,
.tmo-import .tmo-btn--link {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: inherit !important;
	font-size: 15px !important;
	font-weight: 400;
	text-decoration: underline !important;
}

.tmo-panel .tmo-btn--danger,
.tmo-account-site__actions .tmo-btn--danger {
	color: #a12a2a !important;
}

.tmo-panel .tmo-btn:focus-visible,
.tmo-form--page .tmo-btn:focus-visible,
.tmo-account-site__actions .tmo-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Mode chips ------------------------------------------------------------ */

.tmo-modes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 14px;
}

/*
 * Grow to share the row, or stack at equal width when the column is too narrow
 * for both — two pills of different widths on separate lines read as a mistake.
 */
.tmo-mode {
	flex: 1 1 220px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	border: 1px solid var( --tmo-line );
	border-radius: var( --tmo-r-pill );
	background: #fff;
	cursor: pointer;
	font-size: 16px;
	/* The theme's body line-height leaves a gulf when a label wraps. */
	line-height: 1.25;
}

.tmo-mode input {
	margin: 0;
	accent-color: var( --tmo-ink );
}

/*
 * Selected state uses the theme's v3 green mint (totm-bg-v3green).
 *
 * Everything else in this column is peach or lavender: peach is the
 * section-header colour, and lavender carries the order summary, this table's
 * header and the Default badge — a selected chip in either family disappeared
 * into the surrounding blocks. Solid ink read as too heavy among soft brand
 * colours. Mint is the one palette colour that is nowhere near a divider or a
 * section fill, so "selected" is unmistakable, and it sits far enough from the
 * green place-order button (a yellower green, and never adjacent).
 */
.tmo-mode.is-selected {
	border-color: var( --tmo-mint );
	background: var( --tmo-mint );
	color: var( --tmo-ink );
	font-weight: 600;
}

/* Allocation table ------------------------------------------------------ */

.tmo-alloc__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var( --tmo-r-box );
}

.tmo-alloc {
	width: 100%;
	border-collapse: collapse;
	overflow: hidden;
	border-radius: var( --tmo-r-box );
	background: #fff;
	font-size: 15px;
}

.tmo-alloc thead th {
	padding: 14px 12px;
	background: var( --tmo-lavender );
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
}

.tmo-alloc thead th:first-child {
	text-align: left;
}

.tmo-alloc td,
.tmo-alloc tbody th {
	padding: 14px 12px;
	border-bottom: 1px solid var( --tmo-line );
	text-align: center;
	vertical-align: middle;
}

.tmo-alloc tbody tr:last-child td,
.tmo-alloc tbody tr:last-child th {
	border-bottom: 0;
}

.tmo-alloc__item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 220px;
	font-weight: 500;
	text-align: left;
}

.tmo-alloc__thumb {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 8px;
	flex: 0 0 auto;
}

/* A missing or unreachable image collapses to a neutral tile. */
.tmo-alloc__thumb--empty {
	display: inline-block;
	background: var( --tmo-lavender );
	border: 1px solid var( --tmo-line );
}

/*
 * The row header inherits the table's centre alignment, which left the short
 * SKU floating under the middle of the product name. Specific enough to beat
 * `.tmo-alloc tbody th`.
 */
.tmo-alloc tbody th.tmo-alloc__item {
	text-align: left;
}

.tmo-alloc__item small {
	display: block;
	margin-top: 2px;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.2;
	color: var( --tmo-muted );
}

/* Matches the block checkout's fields, at a size that suits a grid cell. */
.tmo-panel .tmo-alloc input[type="number"] {
	width: 76px !important;
	height: 50px !important;
	margin: 0 !important;
	padding: 12px !important;
	border: 1px solid var( --tmo-field-border ) !important;
	border-radius: var( --tmo-r-field ) !important;
	background: #fff !important;
	box-shadow: none !important;
	font: inherit;
	font-size: 16px !important;
	text-align: center;
}

.tmo-alloc__total {
	font-weight: 700;
}

/* Site form ------------------------------------------------------------- */

.tmo-form {
	margin-top: 20px;
	padding: 24px;
	border: 1px solid var( --tmo-line );
	border-radius: var( --tmo-r-box );
	background: #fff;
}

.tmo-form__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 16px;
}

.tmo-field { margin: 0; }

.tmo-field--wide { grid-column: 1 / -1; }

.tmo-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 16px;
	font-weight: 400;
}

/*
 * Matches .wc-block-components-text-input.
 *
 * The theme has a legacy checkout field style
 * (body.woocommerce-checkout input[type="text"] — transparent, bottom border
 * only) that outranks a plain class selector. WooCommerce's own block fields
 * beat it with more specific rules of their own; these do the same job with
 * !important so the panel's fields look like the ones directly beneath it.
 */
.tmo-panel .tmo-field input,
.tmo-panel .tmo-field select,
.tmo-panel .tmo-field textarea,
.tmo-form--page .tmo-field input,
.tmo-form--page .tmo-field select,
.tmo-form--page .tmo-field textarea {
	width: 100% !important;
	height: 50px !important;
	margin: 0 !important;
	padding: 16px 12px !important;
	border: 1px solid var( --tmo-field-border, rgba( 43, 45, 47, 0.8 ) ) !important;
	border-radius: var( --tmo-r-field, 4px ) !important;
	background: #fff !important;
	box-shadow: none !important;
	font: inherit;
	font-size: 16px !important;
	color: #2b2d2f !important;
}

.tmo-panel .tmo-field textarea,
.tmo-form--page .tmo-field textarea {
	height: auto !important;
	min-height: 76px;
	line-height: 1.45;
}

.tmo-field__hint {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var( --tmo-muted );
}

.tmo-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	margin-top: 24px;
}

/* Notices & footer ------------------------------------------------------ */

.tmo-notice {
	margin-bottom: 20px;
	padding: 14px 18px;
	border-radius: var( --tmo-r-box );
	background: #fdf1f1;
	font-size: 15px;
	line-height: 1.45;
}

.tmo-notice--warning { background: #fdf6e8; }
.tmo-notice--success { background: #eef7ea; }

.tmo-panel__footer {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var( --tmo-line );
	background: none;
}

.tmo-summary {
	margin: 0;
	font-size: 16px;
}

.tmo-summary__note {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.4;
	opacity: 0.7;
}

/* Thank-you page -------------------------------------------------------- */

.tmo-thankyou {
	margin: 0 0 32px;
	padding: 20px 30px 30px;
	border-radius: 30px;
	background: #faf7fa;
}

.tmo-thankyou h2 {
	margin: 0 0 8px;
	font-size: 22px;
}

.tmo-thankyou__list {
	margin: 12px 0 0;
	padding-left: 18px;
}

.tmo-thankyou__list li { margin-bottom: 8px; }

.tmo-thankyou__addr { color: #5b5d5f; }

/*
 * The sites a product is going to, under its quantity — the same note the
 * checkout showed while the basket was still being built.
 */
.tmo-order-summary__sites {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #5b5d5f;
}

/*
 * Delivery, per site.
 *
 * Each site is its own delivery, rated on what it is receiving, so one can be
 * free while another is charged. A single "Delivery" figure invites the
 * question; this answers it.
 */
.tmo-order-summary__breakdown {
	margin: -4px 0 10px;
	padding-left: 12px;
	font-size: 14px;
	color: #5b5d5f;
}

.tmo-order-summary__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 2px 0;
}

/* Narrow screens -------------------------------------------------------- */

@media ( max-width: 782px ) {
	.tmo-panel {
		padding: 16px 18px 22px;
		border-radius: 18px;
	}

	.tmo-panel__title {
		font-size: 18px;
		padding: 10px 16px;
	}

	.tmo-section__title {
		font-size: 16px;
	}

	.tmo-sites {
		grid-template-columns: 1fr;
	}
}