/* ==========================================================================
   BST Quote to Order – Front-end styles
   ========================================================================== */

/* ---- Variables ----------------------------------------------------------- */
:root {
	--bst-green:         #7cb518;
	--bst-green-dark:    #639213;
	--bst-danger:        #e74c3c;
	--bst-primary:       #2c3e50;
	--bst-success-bg:    #d4edda;
	--bst-success-border:#c3e6cb;
	--bst-success-text:  #155724;
	--bst-error-bg:      #f8d7da;
	--bst-error-border:  #f5c6cb;
	--bst-error-text:    #721c24;
	--bst-border:        #e5e5e5;
	--bst-bg-subtle:     #f9fafb;
	--bst-radius:        6px;
	--bst-shadow:        0 2px 12px rgba(0, 0, 0, 0.08);
	--bst-focus-shadow:  rgba(124, 181, 24, 0.15);
	--bst-font-body:     inherit;
	--bst-font-heading:  inherit;
}

/* ---- Mini quote icon (floating) ----------------------------------------- */
.bst-mini-quote-icon {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9999;
	background: var(--bst-primary);
	color: #fff;
	border-radius: 50px;
	padding: 10px 16px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	transition: background 0.2s, transform 0.15s;
}

.bst-mini-quote-icon:hover {
	background: #1a252f;
	transform: translateY(-2px);
}

.bst-mini-quote-icon a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	text-decoration: none;
}

.bst-quote-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bst-danger);
	color: #fff;
	border-radius: 50%;
	min-width: 20px;
	height: 20px;
	font-size: 12px;
	font-weight: 700;
	padding: 0 4px;
}

/* ---- Outer wrapper ------------------------------------------------------- */
.bst-quote-basket {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px;
	font-family: var(--bst-font-body);
}

/* ---- Empty state --------------------------------------------------------- */
.bst-quote-basket__empty {
	text-align: center;
	padding: 64px 20px;
}

.bst-quote-basket__empty p {
	font-size: 1.05rem;
	margin-bottom: 20px;
	color: #888;
}

/* ---- Step sections ------------------------------------------------------- */
.bst-step {
	margin-bottom: 48px;
}

.bst-step__heading {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--bst-primary);
	margin: 0 0 24px;
	font-family: var(--bst-font-heading);
	padding-bottom: 0;
	border-bottom: none;
}

/* ---- Basket table -------------------------------------------------------- */
.bst-basket-table {
	width: 100%;
	border-collapse: collapse;
}

.bst-basket-table th {
	padding: 0 12px 12px;
	border-bottom: 2px solid var(--bst-border);
	font-size: 13px;
	font-weight: 700;
	color: #555;
	text-align: left;
}

.bst-basket-table td {
	padding: 16px 12px;
	border-bottom: 1px solid var(--bst-border);
	vertical-align: middle;
}

.bst-basket-table tbody tr:last-child td {
	border-bottom: none;
}

.bst-basket-table tbody tr {
	transition: background 0.12s;
}

.bst-basket-table tbody tr:hover {
	background: var(--bst-bg-subtle);
}

.bst-col-image {
	width: 100px; /* overridden to auto in the mobile grid */
}

.bst-col-image img {
	display: block;
	border-radius: 4px;
	object-fit: cover;
	border: 1px solid var(--bst-border);
}

.bst-col-remove {
	width: 40px;
	text-align: center;
}

.bst-remove-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: #f0f0f0;
	border: 1px solid #d0d0d0;
	border-radius: 50%;
	font-size: 16px;
	line-height: 1;
	color: #888;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.bst-remove-item:hover {
	color: var(--bst-danger);
	border-color: var(--bst-danger);
	background: #fdf2f2;
}

.bst-product-name {
	font-weight: 600;
	color: var(--bst-green);
	text-decoration: none;
}

.bst-product-name:hover {
	text-decoration: underline;
}

.bst-product-sku {
	font-size: 0.8rem;
	color: #999;
	margin-top: 3px;
}

.bst-variation {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
	margin: 5px 0 0;
	font-size: 0.8rem;
	color: #aaa;
}

.bst-variation dt,
.bst-variation dd {
	margin: 0;
}

.bst-variation dt::after {
	content: ':';
}

/* ---- Quantity controls --------------------------------------------------- */
.bst-qty-wrapper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--bst-border);
	border-radius: var(--bst-radius);
	overflow: hidden;
}

.bst-qty-btn {
	width: 32px;
	height: 38px;
	border: none;
	background: var(--bst-bg-subtle);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	color: #555;
	transition: background 0.12s;
	flex-shrink: 0;
}

.bst-qty-btn:hover {
	background: #e8eaed;
}

.bst-qty-input {
	width: 60px;
	height: 38px;
	text-align: center;
	border: none;
	border-left: 1px solid var(--bst-border);
	border-right: 1px solid var(--bst-border);
	font-size: 14px;
	padding: 0 4px;
	-moz-appearance: textfield;
}

.bst-qty-input::-webkit-inner-spin-button,
.bst-qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
}

.bst-qty-input:focus {
	outline: none;
	background: #fff;
}

/* ---- Total row ----------------------------------------------------------- */
.bst-basket-total-row td {
	padding-top: 18px;
	padding-bottom: 4px;
	border-top: 2px solid var(--bst-border);
	border-bottom: none;
}

.bst-total-label {
	text-align: right;
	color: #555;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: 0.8rem !important;
}

.bst-total-value {
	font-size: 1.2rem !important;
	font-weight: 700;
	color: var(--bst-primary);
}

/* ---- Table action row (UPDATE QUOTE) ------------------------------------- */
.bst-table-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
}

/* ---- Pricing notice ------------------------------------------------------ */
.bst-basket-notice {
	font-size: 0.82rem;
	color: #aaa;
	margin: 12px 0 0;
	padding: 10px 14px;
	background: var(--bst-bg-subtle);
	border-left: 3px solid var(--bst-border);
	border-radius: 0 4px 4px 0;
}

/* ---- Green action buttons (UPDATE QUOTE / PLACE QUOTE) ------------------ */
.bst-action-btn {
	display: inline-block;
	padding: 13px 32px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em;
	text-align: center;
	background: var(--bst-green) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 4px !important;
	cursor: pointer;
	transition: background 0.15s !important;
	text-transform: uppercase;
}

.bst-action-btn:hover {
	background: var(--bst-green-dark) !important;
	color: #fff !important;
}

.bst-action-btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

/* ---- Two-column form grid ------------------------------------------------ */
.bst-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 32px;
}

.bst-form-row {
	/* one column by default */
}

.bst-form-row--full {
	grid-column: 1 / -1;
}

.bst-form-row label {
	display: block;
	font-weight: 700;
	margin-bottom: 7px;
	font-size: 14px;
	color: #222;
}

.bst-req {
	color: var(--bst-danger);
	margin-left: 1px;
}

/* ---- Input / select / textarea ------------------------------------------ */
.bst-form-row input[type="text"],
.bst-form-row input[type="email"],
.bst-form-row input[type="tel"],
.bst-form-row input[type="date"],
.bst-form-row input[type="number"],
.bst-form-row select,
.bst-form-row textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	color: #333;
	background: #fff;
	transition: border-color 0.15s, border-left-color 0.15s;
	box-sizing: border-box;
	appearance: auto;
}

.bst-form-row select {
	padding-right: 32px;
}

/* Required field — has a value: green left border */
.bst-form-row input[required]:not(:placeholder-shown),
.bst-form-row input[required]:valid:not([value=""]) {
	border-left: 3px solid var(--bst-green);
}

/* Required field — empty: red left border */
.bst-form-row input[required]:placeholder-shown {
	border-left: 3px solid var(--bst-danger);
}

/* Pre-filled (logged-in) required fields get green border immediately */
.bst-form-row input[required][value]:not([value=""]) {
	border-left: 3px solid var(--bst-green);
}

.bst-form-row input:focus,
.bst-form-row select:focus,
.bst-form-row textarea:focus {
	outline: none;
	border-color: var(--bst-green);
	border-left-color: var(--bst-green);
	box-shadow: 0 0 0 3px var(--bst-focus-shadow);
}

.bst-form-row textarea {
	resize: vertical;
	min-height: 120px;
}

/* ---- Form actions -------------------------------------------------------- */
.bst-form-actions {
	margin-top: 28px;
	display: flex;
	justify-content: flex-end;
}

/* ---- Notification messages ----------------------------------------------- */
#bst-quote-messages {
	margin-bottom: 20px;
}

.bst-message {
	padding: 12px 16px;
	border-radius: var(--bst-radius);
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 1.5;
}

.bst-message--success {
	background: var(--bst-success-bg);
	border: 1px solid var(--bst-success-border);
	color: var(--bst-success-text);
}

.bst-message--error {
	background: var(--bst-error-bg);
	border: 1px solid var(--bst-error-border);
	color: var(--bst-error-text);
}

/* ---- Post-submission success state --------------------------------------- */
.bst-quote-success {
	text-align: center;
	padding: 64px 40px;
	max-width: 560px;
	margin: 0 auto;
}

.bst-quote-success__icon {
	width: 80px;
	height: 80px;
	background: var(--bst-success-bg);
	border: 2px solid var(--bst-success-border);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 28px;
	color: var(--bst-success-text);
}

.bst-quote-success__title {
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--bst-primary);
	margin: 0 0 14px;
}

.bst-quote-success__msg {
	color: #666;
	font-size: 1rem;
	line-height: 1.65;
	margin: 0 0 36px;
}

.bst-quote-success__btn {
	display: inline-block;
	padding: 13px 36px;
	background: var(--bst-green);
	color: #fff !important;
	border-radius: 4px;
	text-decoration: none !important;
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: background 0.15s;
}

.bst-quote-success__btn:hover {
	background: var(--bst-green-dark);
	color: #fff !important;
}

/* ---- Float toast (add-to-quote feedback) --------------------------------- */
.bst-float-message {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 99999;
	min-width: 220px;
	max-width: 320px;
	border-radius: var(--bst-radius);
	font-size: 14px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	padding: 12px 16px;
}

.bst-added-toast {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bst-toast-text {
	flex: 1;
}

.bst-toast-link {
	flex-shrink: 0;
	font-weight: 700;
	color: var(--bst-success-text) !important;
	text-decoration: underline !important;
	white-space: nowrap;
}

/* ---- Loading state ------------------------------------------------------- */
.bst-loading {
	opacity: 0.5;
	pointer-events: none;
}

.bst-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: bst-spin 0.7s linear infinite;
	vertical-align: middle;
	margin-left: 8px;
}

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

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 720px) {
	.bst-form-grid {
		grid-template-columns: 1fr;
	}

	.bst-form-row--full {
		grid-column: 1;
	}
}

@media (max-width: 640px) {
	.bst-step__heading {
		font-size: 1.2rem;
	}

	/* ---- Basket table: card layout ---- */
	.bst-basket-table {
		width: 100%;
		border: none;
	}

	.bst-basket-table thead {
		display: none;
	}

	/* Each product row becomes a self-contained card */
	.bst-basket-table tbody tr {
		display: grid;
		grid-template-columns: 36px 76px 1fr;
		grid-template-rows: 1fr auto;
		margin-bottom: 10px;
		border: 1px solid var(--bst-border);
		border-radius: var(--bst-radius);
		overflow: hidden;
		box-sizing: border-box;
		width: 100%;
	}

	.bst-basket-table td {
		border-bottom: none;
		padding: 10px 8px;
		min-width: 0;
		overflow: hidden;
	}

	/* Remove button — centred, spans both rows */
	.bst-col-remove {
		grid-column: 1;
		grid-row: 1 / span 2;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		background: var(--bst-bg-subtle);
		border-right: 1px solid var(--bst-border);
	}

	/* Image — spans both rows */
	.bst-col-image {
		grid-column: 2;
		grid-row: 1 / span 2;
		width: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 6px;
		border-right: 1px solid var(--bst-border);
	}

	.bst-col-image img {
		width: 56px !important;
		height: 56px !important;
		object-fit: cover;
	}

	/* Product name — top-right cell */
	.bst-col-name {
		grid-column: 3;
		grid-row: 1;
		padding: 10px 10px 6px;
		align-self: center;
		word-break: break-word;
		border-bottom: 1px solid var(--bst-border);
	}

	/* Quantity controls — bottom-right cell */
	.bst-col-qty {
		grid-column: 3;
		grid-row: 2;
		padding: 8px 10px;
		align-self: center;
	}

	/* Price / subtotal columns (visible when prices shown) */
	.bst-col-price,
	.bst-col-subtotal {
		grid-column: 3;
		grid-row: auto;
	}

	/* Quantity controls: tighter on mobile */
	.bst-qty-wrapper {
		display: inline-flex;
	}

	.bst-qty-btn {
		width: 30px;
		height: 34px;
		font-size: 15px;
	}

	.bst-qty-input {
		width: 44px;
		height: 34px;
		font-size: 13px;
	}

	/* ---- Total row: colspan fails on grid tr — use flex ---- */
	.bst-basket-total-row {
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		border: none !important;
		border-radius: 0 !important;
		padding: 14px 6px 4px !important;
		margin-bottom: 0 !important;
		border-top: 2px solid var(--bst-border) !important;
	}

	.bst-basket-total-row td {
		padding: 0 !important;
	}

	/* ---- Buttons: full width on mobile ---- */
	.bst-table-actions {
		margin-top: 12px;
	}

	.bst-table-actions .bst-action-btn,
	.bst-form-actions .bst-action-btn {
		display: block;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}

	.bst-form-actions {
		margin-top: 20px;
	}

	/* ---- Toast: full width at top on mobile ---- */
	.bst-float-message {
		top: 10px;
		right: 10px;
		left: 10px;
		max-width: none;
		min-width: 0;
	}

	/* ---- Success screen: reduce whitespace ---- */
	.bst-quote-success {
		padding: 40px 0;
	}

	.bst-quote-success__title {
		font-size: 1.4rem;
	}

	/* ---- Mini icon ---- */
	.bst-mini-quote-icon {
		bottom: 16px;
		right: 16px;
		padding: 8px 14px;
		font-size: 13px;
	}
}