/* ==========================================================================
   WC Logo Branding Options - front-end styles
   Uses CSS variables so colours can be re-themed per site in one place.
   ========================================================================== */

.wclb-branding-block {
	--wclb-border: #e2e4e8;
	--wclb-border-active: #FC0200;
	--wclb-bg-active: #fdecec;
	--wclb-text: #000000;
	--wclb-text-muted: #667085;
	--wclb-radius: 10px;
	--wclb-border-width: 2px;
	--wclb-summary-border: #000000;
	--wclb-summary-bg: #f6f6f7;

	margin: 1.75em 0;
	padding: 1.5em;
	border: var(--wclb-border-width) solid var(--wclb-border);
	background: #fff;
}

.wclb-heading {
	margin: 0 0 1em;
	font-size: 1.05em;
	font-weight: 700;
	color: var(--wclb-text);
}

.wclb-field-group {
	margin-bottom: 1.5em;
}

.wclb-field-group:last-of-type {
	margin-bottom: 0;
}

.wclb-label {
	display: block;
	margin-bottom: 0.6em;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--wclb-text);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* --- New logo / Reorder tabs (top of block) ------------------------------ */

.wclb-customer-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: var(--wclb-border-width) solid var(--wclb-border);
	border-radius: var(--wclb-radius);
	overflow: hidden;
}

.wclb-customer-tab {
	display: flex;
	margin: 0 !important;
	cursor: pointer;
}

.wclb-customer-tab + .wclb-customer-tab {
	border-left: var(--wclb-border-width) solid var(--wclb-border);
}

.wclb-customer-tab input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.wclb-customer-tab-inner {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	padding: 0.75em 1em;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wclb-customer-tab-title {
	font-size: 0.95em;
	font-weight: 700;
	color: var(--wclb-text);
}

.wclb-customer-tab-sub {
	font-size: 0.8em;
	color: var(--wclb-text-muted);
}

.wclb-customer-tab:hover .wclb-customer-tab-inner {
	background: var(--wclb-bg-active);
}

.wclb-customer-tab input:checked + .wclb-customer-tab-inner {
	background: var(--wclb-border-active);
}

.wclb-customer-tab input:checked + .wclb-customer-tab-inner .wclb-customer-tab-title,
.wclb-customer-tab input:checked + .wclb-customer-tab-inner .wclb-customer-tab-sub {
	color: #fff;
}

.wclb-customer-tab input:focus-visible + .wclb-customer-tab-inner {
	outline: 2px solid var(--wclb-text);
	outline-offset: -4px;
}

.wclb-customer-note {
	display: block;
	margin-top: 0.75em;
	padding: 0.7em 0.9em;
	font-size: 0.85em;
	color: var(--wclb-text);
	background: var(--wclb-summary-bg);
	border-left: 3px solid var(--wclb-border-active);
	animation: wclb-fade-in 0.2s ease;
}

.wclb-customer-note--returning,
.wclb-is-returning .wclb-customer-note--new,
.wclb-is-blank .wclb-customer-note {
	display: none;
}

.wclb-is-returning:not(.wclb-is-blank) .wclb-customer-note--returning {
	display: block;
}

@media (max-width: 520px) {
	.wclb-customer-tabs {
		grid-template-columns: 1fr;
	}

	.wclb-customer-tab + .wclb-customer-tab {
		border-left: 0;
		border-top: var(--wclb-border-width) solid var(--wclb-border);
	}
}

/* Setup fee note on the Embroidery button swaps on the Reorder tab. */
.wclb-fee-note--returning,
.wclb-is-returning .wclb-fee-note--new {
	display: none;
}

.wclb-is-returning .wclb-fee-note--returning {
	display: inline;
}

/* --- Logo on file reference ------------------------------------------------ */

.wclb-text-input {
	width: 100%;
	max-width: 420px;
	padding: 0.65em 0.8em;
	border: var(--wclb-border-width) solid var(--wclb-border);
	border-radius: var(--wclb-radius);
	font-size: 0.92em;
	box-sizing: border-box;
}

.wclb-text-input:focus {
	border-color: var(--wclb-border-active);
	outline: none;
}

.wclb-onfile-group {
	animation: wclb-fade-in 0.2s ease;
}

.wclb-is-returning .wclb-reorder-tip {
	display: none;
}

.wclb-price-summary-row--waived .wclb-price-summary-amount {
	color: #1e7e34;
}

/* --- Position grid ------------------------------------------------------ */

.wclb-position-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 0.75em;
}

.wclb-position-option {
	display: flex;
	margin: 0 !important;
	cursor: pointer;
}

.wclb-position-option input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.wclb-position-card {
	flex: 1 1 auto; /* Every card in a row matches the tallest, even if a label wraps. */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4em;
	padding: 0.6em 0.5em;
	border: var(--wclb-border-width) solid var(--wclb-border);
	border-radius: var(--wclb-radius);
	background: #fff;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
	text-align: center;
}

.wclb-position-card img {
	width: 100%;
	max-width: 56px;
	height: 40px;
	object-fit: contain;
}

.wclb-position-name {
	font-size: 0.82em;
	font-weight: 500;
	color: var(--wclb-text);
	line-height: 1.25;
}

.wclb-position-option input:checked + .wclb-position-card {
	border-color: var(--wclb-border-active);
	background: var(--wclb-bg-active);
	box-shadow: 0 0 0 1px var(--wclb-border-active);
}

.wclb-position-option:hover .wclb-position-card {
	border-color: var(--wclb-border-active);
}

.wclb-hint {
	display: block;
	margin-top: 0.6em;
	font-size: 0.8em;
	color: var(--wclb-text-muted);
}

/* --- Method toggle -------------------------------------------------------- */

.wclb-method-toggle {
	display: inline-flex;
	border: var(--wclb-border-width) solid var(--wclb-border);
	border-radius: var(--wclb-radius);
	overflow: hidden;
}

.wclb-method-option {
	margin: 0 !important;
	cursor: pointer;
}

.wclb-method-option input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.wclb-method-option span {
	display: block;
	padding: 0.65em 1.5em;
	font-size: 0.92em;
	font-weight: 600;
	color: var(--wclb-text-muted);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wclb-method-option:not(:last-child) span {
	border-right: var(--wclb-border-width) solid var(--wclb-border);
}

/* Same light-red hover as the New logo / Reorder tabs. */
.wclb-method-option:hover input:not(:checked) + span {
	background: var(--wclb-bg-active);
	color: var(--wclb-text);
}

.wclb-method-option input:focus-visible + span {
	outline: 2px solid var(--wclb-text);
	outline-offset: -4px;
}

.wclb-method-option input:checked + span {
	background: var(--wclb-border-active);
	color: #fff;
}

/* "Blank - no logo" confirmation shown under the toggle */
.wclb-blank-note {
	display: block;
	margin-top: 0.75em;
	padding: 0.7em 0.9em;
	font-size: 0.85em;
	color: var(--wclb-text);
	background: var(--wclb-summary-bg);
	border-left: 3px solid var(--wclb-border-active);
}

/* With three options (Print / Embroidery / Blank) the toggle can get too
   wide for a phone, so stack the buttons on narrow screens. */
@media (max-width: 520px) {
	.wclb-method-toggle {
		display: flex;
		flex-direction: column;
	}

	.wclb-method-option:not(:last-child) span {
		border-right: 0;
		border-bottom: var(--wclb-border-width) solid var(--wclb-border);
	}
}

/* --- Logo source (have it / design it) ------------------------------------ */

.wclb-source-options {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

.wclb-source-option {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	margin: 0 !important;
	padding: 0.75em 0.9em;
	border: var(--wclb-border-width) solid var(--wclb-border);
	border-radius: var(--wclb-radius);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.wclb-source-option input {
	margin-top: 0.2em;
}

.wclb-source-text {
	font-size: 0.92em;
	color: var(--wclb-text);
	line-height: 1.4;
}

.wclb-source-text strong {
	color: var(--wclb-border-active);
}

.wclb-source-note {
	display: block;
	margin-top: 0.25em;
	font-size: 0.85em;
	font-weight: 500;
	color: var(--wclb-text-muted);
}

/* :has() has good modern browser support; on the rare older browser this
   just means the selected option isn't highlighted - it still works. */
.wclb-source-option:has(input:checked) {
	border-color: var(--wclb-border-active);
	background: var(--wclb-bg-active);
}

/* --- Live price summary ---------------------------------------------------- */

.wclb-price-summary {
	margin: 1.5em 0;
	padding: 0.85em 1em;
	border-radius: var(--wclb-radius);
	background: var(--wclb-summary-bg);
	border: var(--wclb-border-width) solid var(--wclb-summary-border);
	animation: wclb-fade-in 0.2s ease;
}

.wclb-price-summary-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.wclb-price-summary-row + .wclb-price-summary-row {
	margin-top: 0.5em;
	padding-top: 0.5em;
	border-top: 1px dashed var(--wclb-border);
}

.wclb-price-summary-label {
	font-size: 0.88em;
	font-weight: 600;
	color: var(--wclb-text);
}

.wclb-price-summary-amount {
	font-size: 1.15em;
	font-weight: 700;
	color: var(--wclb-text);
}

.wclb-price-summary-note {
	display: block;
	margin-top: 0.4em;
	font-size: 0.78em;
	color: var(--wclb-text-muted);
}

/* Totals (per item / overall) stand out from the breakdown rows above. */
.wclb-price-summary-row--strong .wclb-price-summary-label {
	font-size: 0.95em;
}

.wclb-price-summary-row--grand {
	border-top-style: solid !important;
}

.wclb-price-summary-row--discount .wclb-price-summary-amount {
	color: #1e7e34;
}

.wclb-price-summary-positions {
	font-weight: 400;
	color: var(--wclb-text-muted);
}

.wclb-price-summary-select-note {
	display: block;
	margin-top: 0.6em;
	font-size: 0.8em;
	font-weight: 600;
	color: var(--wclb-text);
}

.wclb-price-summary-note--logo {
	margin-top: 0.75em;
}

.wclb-price-summary-note a {
	color: inherit;
	text-decoration: underline;
}

/* --- File upload ---------------------------------------------------------- */

.wclb-upload-group input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.wclb-upload-button {
	display: inline-flex;
	align-items: center;
	gap: 0.9em;
	cursor: pointer;
	border: var(--wclb-border-width) dashed var(--wclb-border);
	border-radius: var(--wclb-radius);
	padding: 0.55em 0.6em 0.55em 0.55em;
	max-width: 100%;
}

.wclb-upload-button-text {
	flex-shrink: 0;
	padding: 0.55em 1.1em;
	border-radius: 7px;
	background: var(--wclb-border-active);
	color: #fff;
	font-size: 0.88em;
	font-weight: 600;
}

.wclb-upload-filename {
	font-size: 0.88em;
	color: var(--wclb-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wclb-upload-hint {
	display: block;
	margin-top: 0.5em;
	font-size: 0.78em;
	color: var(--wclb-text-muted);
}

/* Simple reveal transition for the method/upload groups */
.wclb-position-group,
.wclb-source-group,
.wclb-upload-group,
.wclb-blank-note {
	animation: wclb-fade-in 0.2s ease;
}

@keyframes wclb-fade-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- "Added to basket" tip (inc/basket-message.php) ----------------------- */

.wclb-added-tip {
	display: block;
	margin-top: 0.4em;
	font-size: 0.92em;
	font-weight: 600;
}