/* ==========================================================================
   Ballistic Enquiries — global quote styles (drawer, add-to-quote controls).
   Design: Quote Drawer.dc.html, Product Pilot Shirt.dc.html.
   Uses theme tokens (--bu-*) with fallbacks so the plugin works with any theme.
   ========================================================================== */

/* Add to quote (product page + cards) ---------------------------------- */

.bu-quote-add {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}

.bu-quote-add__button {
	width: 100%;
	min-height: var(--bu-button-height-lg, 54px);
}

.bu-quote-add__button[aria-busy="true"] {
	opacity: .7;
	cursor: progress;
}

.bu-quote-add__status:empty {
	display: none;
}

.bu-quote-add__status,
.bu-quote-add__hint {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bu-color-text-2, #4B4E55);
}

.bu-quote-add__hint {
	font-size: 13px;
	color: var(--bu-color-muted, #6B6E75);
}

.bu-quote-add__status.is-error,
.bu-quote-message--error {
	margin: 0;
	padding: 8px 12px;
	border-left: 3px solid var(--bu-color-accent, #C4161C);
	background: #FDF3F3;
	color: #8E0F15;
	font-size: 14px;
	line-height: 1.5;
}

.bu-card-quote {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bu-card-quote .bu-button {
	width: 100%;
}

/* Drawer (native <dialog>, built by quote.js) ---------------------------- */

.bu-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(460px, 100vw);
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--bu-color-white, #fff);
	color: var(--bu-color-ink, #1F2124);
	box-shadow: -20px 0 50px rgba(15, 16, 17, .2);
	font-family: var(--bu-font-body, system-ui, sans-serif);
}

.bu-drawer[open] {
	display: flex;
	flex-direction: column;
	animation: bu-drawer-in .2s ease-out;
}

.bu-drawer::backdrop {
	background: rgba(15, 16, 17, .5);
}

@keyframes bu-drawer-in {
	from {
		transform: translateX(24px);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

.bu-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--bu-color-border, #E3DFD8);
}

.bu-drawer__title {
	margin: 0;
	font-family: var(--bu-font-body, system-ui, sans-serif);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	color: var(--bu-color-heading, #141516);
}

.bu-drawer__title:focus {
	outline: none;
}

.bu-drawer__meta {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--bu-color-muted, #6B6E75);
}

.bu-drawer__close {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--bu-color-white, #fff);
	border: 1px solid var(--bu-color-border-strong, #DDD9D2);
	color: inherit;
}

.bu-drawer__body {
	flex: 1;
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
	padding: 8px 20px;
}

.bu-drawer__empty {
	padding: 40px 0;
	text-align: center;
	font-size: 16px;
	line-height: 1.5;
	color: var(--bu-color-muted, #6B6E75);
}

.bu-drawer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bu-drawer__line {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--bu-color-hairline, #EEEBE5);
}

.bu-drawer__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 88px;
	padding: 6px;
	border: 1px solid var(--bu-color-hairline, #EEEBE5);
}

.bu-drawer__thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.bu-drawer__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.bu-drawer__name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bu-color-ink, #1F2124);
}

.bu-drawer__category {
	font-size: 14px;
	color: var(--bu-color-text-3, #5A5D64);
}

.bu-drawer__options {
	font-size: 14px;
	color: var(--bu-color-text-2, #4B4E55);
	overflow-wrap: anywhere;
}

.bu-drawer__issue {
	font-size: 14px;
	color: #8E0F15;
}

.bu-drawer__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 8px;
}

.bu-drawer__foot {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--bu-color-border, #E3DFD8);
	background: var(--bu-color-surface-2, #FAF9F7);
}

.bu-drawer__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--bu-color-muted, #6B6E75);
}

.bu-drawer__buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.bu-drawer__buttons .bu-button {
	width: 100%;
	min-height: 50px;
	padding: 0 12px;
	font-size: 15px;
}

.bu-drawer__buttons [aria-disabled="true"] {
	opacity: .5;
	pointer-events: none;
}

.bu-drawer__live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Shared small controls (drawer + quote page) --------------------------- */

.bu-stepper {
	display: inline-flex;
	border: 1px solid var(--bu-color-border-input, #CFCAC2);
	background: var(--bu-color-white, #fff);
}

.bu-stepper__button {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: var(--bu-color-white, #fff);
	color: inherit;
	font-size: 18px;
	line-height: 1;
}

.bu-stepper input[type="number"] {
	width: 56px;
	height: 40px;
	padding: 0;
	border: 0;
	border-inline: 1px solid var(--bu-color-border-input, #CFCAC2);
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	-moz-appearance: textfield;
	appearance: textfield;
}

.bu-stepper input[type="number"]::-webkit-inner-spin-button,
.bu-stepper input[type="number"]::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.bu-text-button {
	min-height: 44px;
	padding: 0 8px;
	background: transparent;
	border: 0;
	color: var(--bu-color-muted, #6B6E75);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.bu-text-button:hover {
	color: var(--bu-color-accent, #C4161C);
}

@media (max-width: 369.98px) {
	.bu-drawer__buttons {
		grid-template-columns: 1fr;
	}
}

/* Product-page branding option (legacy per-product options, Phase 3B) */
.bu-quote-add__branding {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bu-quote-add__branding label {
	font-size: 15px;
	font-weight: 600;
}

.bu-quote-add__branding .bu-optional {
	font-weight: 400;
	color: var(--bu-color-muted, #6B6E75);
}

.bu-quote-add__branding select {
	width: 100%;
	min-height: 48px;
	padding: 0 12px;
	border: 1px solid var(--bu-color-border-input, #CFCAC2);
	border-radius: 0;
	background: var(--bu-color-white, #fff);
	font-size: 16px;
}