/* ==========================================================================
   WP B2B Inquiry – front end
   Colors, radius and WhatsApp style come from Inquiries → Settings →
   Appearance (printed as inline CSS variables). Defaults: industrial green,
   capsule buttons.
   ========================================================================== */

:root {
	--b2bi-primary: #16a34a;
	--b2bi-primary-text: #ffffff;
	--b2bi-hover: #15803d;
	--b2bi-hover-text: #ffffff;
	--b2bi-btn-radius: 999px;
	--b2bi-soft: color-mix(in srgb, var(--b2bi-primary) 14%, #fff);
	--b2bi-ring: color-mix(in srgb, var(--b2bi-primary) 30%, transparent);
	--b2bi-glow: color-mix(in srgb, var(--b2bi-primary) 24%, transparent);
	--b2bi-wa: #25d366;
	--b2bi-wa-dark: #1ebe5b;
	--b2bi-wa-ink: #128c4a;
	--b2bi-text: #1f2937;
	--b2bi-muted: #6b7280;
	--b2bi-border: #e5e7eb;
	--b2bi-bg-soft: #f8fafc;
	--b2bi-danger: #dc2626;
	--b2bi-radius: 14px;
	--b2bi-shadow: 0 24px 60px rgba(15, 23, 42, .25);
}

[class^="b2bi-"][hidden],
[class*=" b2bi-"][hidden] {
	display: none !important;
}

/* ---------- Catalog mode fallbacks (themes with custom markup) ---------- */

.b2bi-catalog form.cart:not(.b2bi-keep),
.b2bi-catalog .single_add_to_cart_button,
.b2bi-catalog .add_to_cart_button,
.b2bi-catalog .ajax_add_to_cart,
.b2bi-catalog .wc-block-components-product-button__button,
.b2bi-catalog .wc-block-mini-cart,
.b2bi-catalog .ast-on-card-button,
.b2bi-catalog .widget_shopping_cart,
.b2bi-hide-price .price,
.b2bi-hide-price .wc-block-components-product-price,
.b2bi-hide-price .wc-block-grid__product-price {
	display: none !important;
}

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

.b2bi-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 18px 0 22px;
	clear: both;
}

.b2bi-btn,
.b2bi-btn:visited {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box; /* <a> and <button> must size the same */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 28px;
	border: 2px solid transparent;
	border-radius: var(--b2bi-btn-radius);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .2px;
	text-decoration: none !important;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 4px 14px var(--b2bi-glow);
	transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}

.b2bi-btn:hover { transform: translateY(-1px); }
.b2bi-btn:active { transform: translateY(0); }
.b2bi-btn:focus-visible { outline: 3px solid var(--b2bi-ring); outline-offset: 2px; }

.b2bi-btn--primary,
.b2bi-btn--primary:visited {
	background: var(--b2bi-primary);
	color: var(--b2bi-primary-text) !important;
}
.b2bi-btn--primary:hover,
.b2bi-btn--primary:focus {
	background: var(--b2bi-hover);
	color: var(--b2bi-hover-text) !important;
	box-shadow: 0 6px 18px var(--b2bi-glow);
}

.b2bi-btn--whatsapp,
.b2bi-btn--whatsapp:visited {
	background: var(--b2bi-wa);
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(37, 211, 102, .25);
}
.b2bi-btn--whatsapp:hover,
.b2bi-btn--whatsapp:focus {
	background: var(--b2bi-wa-dark);
	color: #fff !important;
}

/* Outline WhatsApp variant (white button, green border) */
.b2bi-btn--wa-outline,
.b2bi-btn--wa-outline:visited {
	background: #fff;
	color: var(--b2bi-wa-ink) !important;
	border-color: var(--b2bi-wa);
	box-shadow: none;
}
.b2bi-btn--wa-outline:hover,
.b2bi-btn--wa-outline:focus {
	background: var(--b2bi-wa);
	color: #fff !important;
}

.b2bi-actions .b2bi-btn { flex: 1 1 200px; max-width: 280px; }

.b2bi-ico { width: 18px; height: 18px; flex: 0 0 auto; }

/* Mini button on product cards */
.b2bi-loop {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-content: flex-start; /* never stretch rows to fill spare card height */
	align-items: center;
	align-self: stretch; /* fill the card even in flex columns (Astra) */
	width: 100%;
	/* margin-top:auto pins the buttons to the bottom of flex-column cards, so
	   they line up across a row even when titles wrap to more lines; in normal
	   block layout it is 0 and padding-top keeps the gap. */
	margin: auto 0 4px;
	padding-top: 10px;
	box-sizing: border-box;
}
/* Share one row on wide cards; each takes a full row once they wrap. */
.b2bi-loop .b2bi-btn { flex: 1 1 auto; }

/* Astra product cards: grid rows already give cards equal height; make the
   card and its summary flex columns so the buttons can sit at the bottom. */
ul.products li.product:has(> .astra-shop-summary-wrap > .b2bi-loop) {
	display: flex;
	flex-direction: column;
}
ul.products li.product > .astra-shop-summary-wrap:has(> .b2bi-loop) {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.b2bi-btn--whatsapp.b2bi-btn--mini { box-shadow: none; }
.b2bi-btn--mini,
.b2bi-btn--mini:visited {
	min-height: 36px;
	padding: 7px 18px;
	font-size: 13px;
	box-shadow: 0 2px 8px var(--b2bi-glow);
}
.b2bi-btn--mini .b2bi-ico { width: 15px; height: 15px; }

.b2bi-btn--block { display: flex; width: 100%; }

/* ---------- Modal ---------- */

html.b2bi-lock,
html.b2bi-lock body { overflow: hidden !important; }

.b2bi-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity .28s ease, visibility 0s linear .28s;
	font-family: inherit;
	color: var(--b2bi-text);
}
.b2bi-modal.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity .28s ease, visibility 0s;
}
/* Guard against theme / page-builder rules targeting modals or [aria-hidden]:
   closed, it must never catch clicks; open, it must always show. */
#b2bi-modal:not(.is-open) { pointer-events: none !important; }
#b2bi-modal.is-open {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	z-index: 2147483000 !important;
}

.b2bi-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .6);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	cursor: pointer;
}

.b2bi-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 640px;
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background: #fff;
	border-radius: var(--b2bi-radius);
	border-top: 5px solid var(--b2bi-primary);
	box-shadow: var(--b2bi-shadow);
	padding: 26px 28px 22px;
	box-sizing: border-box;
	transform: translateY(24px) scale(.97);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.b2bi-modal.is-open .b2bi-modal__dialog { transform: none; }
.b2bi-modal__dialog:focus { outline: none; }
.b2bi-modal *,
.b2bi-modal *::before,
.b2bi-modal *::after { box-sizing: border-box; }

.b2bi-modal__close {
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f1f5f9;
	color: #475569;
	font-size: 24px;
	line-height: 38px;
	text-align: center;
	cursor: pointer;
	transition: background-color .2s, color .2s, transform .2s;
}
.b2bi-modal__close:hover { background: #fee2e2; color: var(--b2bi-danger); transform: rotate(90deg); }

.b2bi-modal__head { padding-inline-end: 40px; margin-bottom: 16px; }
.b2bi-modal__title { margin: 0 0 4px; font-size: 22px; font-weight: 800; line-height: 1.3; color: #111827; }
.b2bi-modal__sub { margin: 0; font-size: 14px; color: var(--b2bi-muted); }

/* Product card */
.b2bi-product {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 12px;
	margin-bottom: 18px;
	background: var(--b2bi-bg-soft);
	border: 1px solid var(--b2bi-border);
	border-inline-start: 4px solid var(--b2bi-primary);
	border-radius: 10px;
}
.b2bi-product__img {
	flex: 0 0 76px;
	width: 76px;
	height: 76px;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--b2bi-border);
}
.b2bi-product__img img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.b2bi-product__info { min-width: 0; }
.b2bi-product__title { font-size: 15px; font-weight: 700; line-height: 1.4; color: #111827; word-wrap: break-word; }
.b2bi-product__summary {
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--b2bi-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Inline form ([b2b_inquiry_form]): a white card, readable on light or dark sections. */
.b2bi-inline {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 26px 28px 22px;
	background: #fff;
	color: var(--b2bi-text);
	border-radius: var(--b2bi-radius);
	border-top: 5px solid var(--b2bi-primary);
	box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
	text-align: start;
	box-sizing: border-box;
}
.b2bi-inline *,
.b2bi-inline *::before,
.b2bi-inline *::after { box-sizing: border-box; }

/* Form */
.b2bi-form { margin: 0; }
.b2bi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.b2bi-field { display: flex; flex-direction: column; min-width: 0; }
.b2bi-field--full { grid-column: 1 / -1; }

.b2bi-field label,
.b2bi-label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}
.b2bi-req { color: var(--b2bi-danger); }

.b2bi-form input[type="text"],
.b2bi-form input[type="email"],
.b2bi-form input[type="tel"],
.b2bi-form select,
.b2bi-form textarea {
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	background: #fff;
	color: var(--b2bi-text);
	font: inherit;
	font-size: 15px; /* ≥15px avoids iOS zoom on focus */
	line-height: 1.4;
	box-shadow: none;
	transition: border-color .2s, box-shadow .2s;
}
.b2bi-form textarea { min-height: 120px; resize: vertical; }
.b2bi-form select { cursor: pointer; }
.b2bi-form input:focus,
.b2bi-form select:focus,
.b2bi-form textarea:focus {
	outline: none;
	border-color: var(--b2bi-primary);
	box-shadow: 0 0 0 3px var(--b2bi-ring);
}
.b2bi-form ::placeholder { color: #9ca3af; }

.b2bi-field.has-error input,
.b2bi-field.has-error textarea { border-color: var(--b2bi-danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.b2bi-error { display: block; min-height: 0; margin-top: 4px; font-size: 12px; color: var(--b2bi-danger); }
.b2bi-error:empty { display: none; }

/* Radios as pills */
.b2bi-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.b2bi-radio { position: relative; margin: 0 !important; cursor: pointer; }
.b2bi-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.b2bi-radio span {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid #d1d5db;
	border-radius: var(--b2bi-btn-radius);
	font-size: 14px;
	font-weight: 600;
	color: #374151;
	background: #fff;
	transition: all .2s;
}
.b2bi-radio:hover span { border-color: var(--b2bi-primary); }
.b2bi-radio input:checked + span { background: var(--b2bi-soft); border-color: var(--b2bi-primary); color: #111827; }
.b2bi-radio input:focus-visible + span { box-shadow: 0 0 0 3px var(--b2bi-ring); }

/* Honeypot */
.b2bi-hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Notice */
.b2bi-notice { margin: 16px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.b2bi-notice--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* Submit */
.b2bi-submit { margin-top: 18px; min-height: 52px; font-size: 16px; }
.b2bi-submit[disabled] { opacity: .85; cursor: wait; transform: none; }
.b2bi-spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: b2bi-spin .7s linear infinite;
}
.b2bi-submit.is-loading .b2bi-spinner { display: inline-block; }
@keyframes b2bi-spin { to { transform: rotate(360deg); } }

.b2bi-privacy { margin: 10px 0 0; text-align: center; font-size: 12px; color: #9ca3af; }

/* Success */
.b2bi-success { padding: 30px 10px 20px; text-align: center; animation: b2bi-pop .35s ease; }
.b2bi-success__icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--b2bi-primary);
	color: var(--b2bi-primary-text);
	font-size: 38px;
	line-height: 72px;
	box-shadow: 0 10px 30px var(--b2bi-glow);
}
.b2bi-success h4 { margin: 0 0 8px; font-size: 22px; color: #111827; }
.b2bi-success__msg { margin: 0; color: var(--b2bi-muted); font-size: 15px; }
@keyframes b2bi-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
	.b2bi-modal { padding: 0; align-items: flex-end; }
	.b2bi-modal__dialog {
		max-width: 100%;
		max-height: 94vh;
		max-height: 94dvh;
		border-radius: 18px 18px 0 0;
		padding: 22px 16px calc(16px + env(safe-area-inset-bottom));
		transform: translateY(100%);
	}
	.b2bi-modal__title { font-size: 19px; }
	.b2bi-grid { grid-template-columns: 1fr; gap: 12px; }
	.b2bi-inline { padding: 20px 16px 16px; }
	.b2bi-product__img { flex-basis: 60px; width: 60px; height: 60px; }
}

@media (max-width: 480px) {
	.b2bi-actions { flex-direction: column; }
	.b2bi-actions .b2bi-btn { max-width: none; width: 100%; flex: 0 0 auto; }
	.b2bi-btn--mini { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.b2bi-modal,
	.b2bi-modal__dialog,
	.b2bi-btn,
	.b2bi-success { transition: none !important; animation: none !important; }
}