/**
 * B2B Cart to Order — front-end styles.
 * Loaded only on the cart page.
 */

/**
 * Standard WooCommerce checkout button is hidden — the B2B panel
 * replaces it.
 *
 * The a[href*="/checkout"] rule alone stopped working on the Romanian
 * cart page once the Checkout page's URL was made Polylang-aware
 * (b2bora.com/ro/finalizare-solicitare/ — it no longer contains the
 * substring "checkout" at all). The block-wrapper selector below hides
 * the WooCommerce Cart Block's "Proceed to Checkout" button by its own
 * stable class instead, regardless of language or the button's href.
 */
.wc-proceed-to-checkout,
.checkout-button,
a[href*="/checkout"],
.wp-block-woocommerce-proceed-to-checkout-block {
	display: none !important;
}

.b2b-order-panel {
	margin-top: 30px;
	padding: 30px;
	background: #ffffff;
	border: 1px solid #e9e9e9;
	border-radius: 12px;
}

.b2b-order-panel__title {
	margin: 0 0 25px;
	font-size: 24px;
	font-weight: 600;
}

.b2b-order-field {
	padding: 8px 0;
}

.b2b-order-field label {
	display: block;
	margin-bottom: 7px;
	font-size: 14px;
	font-weight: 500;
}

.b2b-order-field input,
.b2b-order-field textarea {
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	border: 1px solid #dddddd;
	border-radius: 7px;
	background: #ffffff;
	font-size: 14px;
	box-sizing: border-box;
}

.b2b-order-field textarea {
	resize: vertical;
}

.b2b-order-phone-row {
	display: flex;
	gap: 8px;
}

.b2b-order-phone-row select {
	flex: 0 0 190px;
	max-width: 190px;
	padding: 10px 8px;
	border: 1px solid #dddddd;
	border-radius: 7px;
	background: #ffffff;
	font-size: 13px;
	box-sizing: border-box;
}

.b2b-order-phone-row input {
	flex: 1;
}

@media (max-width: 480px) {

	.b2b-order-phone-row {
		flex-direction: column;
	}

	.b2b-order-phone-row select {
		flex: 1 1 auto;
		max-width: 100%;
	}
}

.b2b-order-actions {
	margin-top: 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.b2b-order-button,
.b2b-order-submit {
	min-height: 50px;
	padding: 13px 20px;
	border: 0;
	border-radius: 7px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	transition: opacity .2s ease, transform .2s ease;
}

.b2b-order-button:hover,
.b2b-order-submit:hover {
	opacity: .9;
	transform: translateY(-1px);
}

.b2b-order-button:disabled,
.b2b-order-submit:disabled {
	opacity: .55;
	cursor: wait;
	transform: none;
}

.b2b-order-submit {
	/* width, background and text color come from the admin's
	   Appearance settings, injected as inline CSS after this file. */
	display: inline-block;
}

.b2b-order-message {
	display: none;
	margin-bottom: 20px;
	padding: 14px 17px;
	border-radius: 7px;
	font-size: 14px;
	line-height: 1.5;
}

.b2b-order-message__text {
	margin: 0 0 4px;
}

.b2b-order-message.is-success {
	display: block;
	background: #eef9f1;
	color: #176b36;
}

.b2b-order-message.is-error {
	display: block;
	background: #fff0f0;
	color: #a32626;
}

/* "Have you sent it in WhatsApp?" confirmation prompt. */
.b2b-order-message.is-confirm {
	display: block;
	background: #fff8e6;
	color: #7a5b00;
}

.b2b-order-message__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.b2b-order-button--confirm-yes,
.b2b-order-button--confirm-no {
	min-height: 42px;
	padding: 10px 16px;
	border: 0;
	border-radius: 7px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
}

.b2b-order-button--confirm-yes {
	background: #176b36;
	color: #ffffff;
}

.b2b-order-button--confirm-no {
	background: #eeeeee;
	color: #333333;
}

@media (max-width: 600px) {

	.b2b-order-panel {
		padding: 20px;
	}
}

/**
 * Mobile side padding on the panel.
 *
 * CONFIRMED ROOT CAUSE this was ever missing on the Romanian page: this
 * used to be patched in the CHILD THEME's style.css instead of here,
 * scoped to ".elementor-9" — Elementor's per-page wrapper class, which
 * is literally the numeric post ID of the English "Cart" page (post 9).
 * The Romanian "Coș" page is a separate post (9187), rendered inside
 * ".elementor-9187" instead, so that rule never matched there at all.
 *
 * Consolidated here instead, targeting this plugin's own stable
 * ".b2b-order-panel" class, which is identical on every language page —
 * this is now correct on English, Romanian, and any future translation,
 * with no per-page-ID to keep in sync, and lives in the one plugin that
 * owns this markup instead of being split across the theme.
 */
@media (max-width: 767px) {
	.b2b-order-panel {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/**
 * reCAPTCHA v2 checkbox, responsive fix.
 *
 * ROOT CAUSE: this stylesheet had no rule at all for the widget. Google
 * always renders the "I'm not a robot" checkbox at a fixed ~304x78px
 * regardless of viewport size, so on a narrow phone it overflows the
 * panel — the checkbox gets clipped or spills past the panel's edge and
 * becomes hard or impossible to tap ("the captcha doesn't work"). This
 * affects both languages equally; it showed up worse on Romanian only
 * because of the ".elementor-9" bug above leaving that page's panel
 * narrower.
 *
 * FIX: scale the widget down at narrow widths and explicitly reserve the
 * post-scale box size (a CSS transform alone doesn't shrink the space
 * the browser reserves in the layout for the untransformed element), so
 * it always fits inside the panel regardless of page or language.
 */
.b2b-order-recaptcha {
	overflow: hidden;
}

@media (max-width: 480px) {

	.b2b-order-recaptcha {
		width: 262px;
		height: 68px;
	}

	.b2b-order-recaptcha .g-recaptcha {
		transform: scale(0.86);
		transform-origin: 0 0;
	}
}

@media (max-width: 340px) {

	.b2b-order-recaptcha {
		width: 228px;
		height: 60px;
	}

	.b2b-order-recaptcha .g-recaptcha {
		transform: scale(0.75);
		transform-origin: 0 0;
	}
}

/* Success banner shown on redirect (?b2b_order=success). */
.b2b-order-success-notice {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99999;
	max-width: 90%;
	padding: 14px 22px;
	border-radius: 8px;
	background: #eef9f1;
	color: #176b36;
	font-size: 15px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

/**
 * Outer Elementor column/container width fix — the [b2b_order_panel]
 * shortcode sits inside an Elementor column/container whose own width
 * (a fixed desktop percentage, or a "boxed" content width) doesn't
 * collapse to full width on mobile the way the rest of the page does.
 * Visually this looks like a narrow white box with large empty gray
 * margins on both sides — different from, and in addition to, the
 * panel's own internal padding fixed above.
 *
 * Targeted via :has() on this plugin's own stable ".b2b-order-panel"
 * class rather than any Elementor per-page element ID, so it's correct
 * on English, Romanian, and any future language without needing a
 * separate rule kept in sync per page.
 */
@media (max-width: 767px) {
	.elementor-column:has(.b2b-order-panel),
	.e-con:has(.b2b-order-panel),
	.elementor-widget-shortcode:has(.b2b-order-panel),
	.elementor-widget-shortcode:has(.b2b-order-panel) > .elementor-widget-container {
		width: 100% !important;
		max-width: 100% !important;
		flex-basis: 100% !important;
		flex-grow: 1 !important;
	}

	.b2b-order-panel {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}