/* Boton "Agregar al cotizador" */


/*
 * El boton se inserta explicitamente desde el template (ver
 * offq_add_to_quote_loop_button() en content-product-standard.php del child
 * theme) justo debajo del boton nativo "Anadir al carrito", sin reubicacion
 * via JS: queda donde el template lo puso.
 */


.offq-add-to-quote-btn.offq-loading {
	opacity: 0.6;
	pointer-events: none;
}

/*
 * En la pagina de producto individual se emula la animacion nativa de
 * ".single_add_to_cart_button" (ver style.css): a diferencia del loop, el
 * texto no se oculta bajando la opacidad del span, sino con una capa opaca
 * (:before, background-color:inherit) que tapa todo el boton por encima del
 * texto; el spinner (:after) va encima de esa capa. Mismo tamano/animacion
 * "wd-rotate" que el resto de los botones nativos del theme.
 */
.offq-context-single.offq-loading {
	opacity: 1;
}

.offq-context-single:before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	z-index: 1;
	border-radius: inherit;
	background-color: inherit;
	box-shadow: inherit;
	transition: opacity 0s ease;
}

.offq-context-single:after {
	position: absolute;
	top: calc(50% - 9px);
	inset-inline-start: calc(50% - 9px);
	opacity: 0;
	z-index: 2;
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 1px solid transparent;
	border-left-color: currentColor;
	border-radius: 50%;
	vertical-align: middle;
	animation: wd-rotate 450ms infinite linear;
	transition: opacity 0s ease;
}

.offq-context-single.offq-loading:before {
	opacity: 1;
	transition: opacity .25s ease;
}

.offq-context-single.offq-loading:after {
	opacity: 1;
	transition: opacity .25s ease;
}

/*
 * En los listados de productos se emula la animacion nativa del add-to-cart
 * de Woodmart (ver .wd-add-btn-replace .add-to-cart-loop.loading en
 * style.css): al hacer click se oculta el texto (envuelto en el span
 * .offq-btn-label) y se muestra un icono de carga giratorio via :after,
 * reutilizando la misma animacion "wd-rotate" que ya define el theme.
 */
/*
 * El padding se saca del <a> (que solo aporta el min-height del boton) y se
 * pasa al span .offq-btn-label, igual que hace el add-to-cart nativo
 * (".wd-add-btn-replace .add-to-cart-loop { padding: 0 }" + el span interno
 * se encarga del padding/centrado). El child theme tiene su propia regla
 * "html body :is(.btn, .button...) { padding: 5px 30px }" con mas
 * especificidad que --btn-padding, por eso se pisa con !important aqui; se
 * reutiliza el mismo valor (5px 30px) en el span para no cambiar el tamano
 * visual del boton.
 */
.offq-context-loop {
	padding: 0 !important;
}

.offq-context-loop .offq-btn-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 30px;
}

.offq-context-loop.offq-loading {
	opacity: 1;
	pointer-events: none;
}

.offq-context-loop.offq-loading .offq-btn-label {
	opacity: 0;
}

.offq-context-loop.offq-loading:after {
	position: absolute;
	top: calc(50% - 9px);
	inset-inline-start: calc(50% - 9px);
	opacity: 1;
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 1px solid transparent;
	border-left-color: currentColor;
	border-radius: 50%;
	vertical-align: middle;
	animation: wd-rotate 450ms infinite linear;
}

.offq-toast {
	display: block;
	font-size: 12px;
	margin-top: 4px;
}

.offq-toast-error {
	color: #c0392b;
}

/*
 * Icono del contador en el header (shortcode [offq_quote_count]). El resto
 * del estilo (tamano, color, badge redondo) se hereda gratis de las clases
 * nativas de Woodmart "wd-tools-element/wd-design-5/wd-tools-icon/wd-tools-count"
 * que ya trae el markup del shortcode; aqui solo se pisa el glifo del icono.
 */
.offq-quote-icon:before {
	content: "\f145";
	font-family: "woodmart-font";
	font-weight: 400;
	font-size: 18px!important;
}
.offq-quote-icon .offq-quote-count {
	top: 0!important;
}

/*
 * El bloque del contador en el header queda siempre visible (revertido a
 * pedido del cliente: antes se ocultaba con el cotizador vacio).
 */
.offq-quote-count-link {
	display: inline-flex;
	align-items: center;
}

/*
 * Prioridad visual al cotizador: si tiene productos y el carro de compras
 * esta vacio, se le baja la opacidad al icono nativo del carrito (ver
 * updateCartDimming() en offq-frontend.js, que decide cuando aplica).
 */
.wd-header-cart {
	transition: opacity 0.4s ease;
}

.wd-header-cart.offq-cart-dimmed {
	opacity: 0.4;
}

/* Pagina del cotizador */
#offq-quote-cart-app {
	max-width: 900px;
	margin: 0 auto;
}

.offq-quote-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 60px;
}

.offq-quote-table th,
.offq-quote-table td {
	padding: 10px;
	border-bottom: 1px solid #e5e5e5;
	text-align: left;
	vertical-align: middle;
}

.offq-line-thumb img {
	max-width: 60px;
	height: auto;
	display: block;
}

/*
 * Cantidad con +/- igual que en el producto individual: se reutiliza el
 * mismo markup nativo (div.quantity > input.minus/.qty/.plus) para heredar
 * el estilo y el script "wd-woocommerce-quantity" del theme (delegado en
 * document, funciona aunque este markup se inserte despues via AJAX/popup).
 */
.offq-col-qty .quantity {
	width: 110px;
}

.offq-col-qty .quantity .qty {
	width: 100%;
}

.offq-empty-cart {
	padding: 20px 0;
}

.offq-remove-line {
	color: #c0392b;
	text-decoration: none;
}

#offq-quote-form .form-row {
	margin-bottom: 14px;
}

#offq-quote-form .form-row-first,
#offq-quote-form .form-row-last {
	width: 48%;
}

#offq-quote-form .form-row-first {
	float: left;
}

#offq-quote-form .form-row-last {
	float: right;
}

#offq-quote-form .form-row-wide {
	clear: both;
}

/*
 * Boton "Solicitar cotizacion": mismo loader que en el archive/listados
 * (texto oculto via opacidad + spinner ":after" con la animacion "wd-rotate"
 * del theme), mismo tamano de spinner, sin cambiar el tamano del boton.
 */
#offq-quote-form button[type="submit"].offq-loading .offq-btn-label {
	opacity: 0;
}

#offq-quote-form button[type="submit"].offq-loading:after {
	position: absolute;
	top: calc(50% - 9px);
	inset-inline-start: calc(50% - 9px);
	opacity: 1;
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 1px solid transparent;
	border-left-color: currentColor;
	border-radius: 50%;
	vertical-align: middle;
	animation: wd-rotate 450ms infinite linear;
}

/* Pagina de agradecimiento */
.offq-thankyou .woocommerce-order-overview {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.offq-thankyou .woocommerce-order-overview li {
	list-style: none;
}

.offq-thankyou .woocommerce-order-details,
.offq-thankyou .woocommerce-customer-details {
	margin-bottom: 24px;
}

.offq-thankyou-actions {
	margin-top: 16px;
}

#offq-quote-form .offq-has-error input,
#offq-quote-form .offq-has-error textarea {
	border-color: #c0392b;
}

.offq-field-error {
	display: block;
	color: #c0392b;
	font-size: 12px;
	margin-top: 4px;
}

.offq-form-message {
	padding: 12px;
	margin-bottom: 16px;
}

.offq-form-message.offq-success {
	background: #eafaf1;
	color: #1e7e34;
}

.offq-form-message.offq-error {
	background: #fdecea;
	color: #c0392b;
}

/* Popup de confirmacion "producto agregado al cotizador" */
body.offq-popup-open {
	overflow: hidden;
}

.offq-popup-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.offq-popup {
	position: relative;
	background: #fff;
	border-radius: 6px;
	max-width: 600px;
	width: 90%;
	padding: 36px 28px 28px;
	text-align: center;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

html body .offq-popup-close {
	position: absolute;
	right: -8px;
	top: -8px;
	padding: 0 !important;
	width: 25px;
	height: 25px;
	line-height: 25px;
	min-height: 0;
	border-radius: 100px;
	font-size: 18px;
}


.offq-popup-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 8px;
}

.offq-popup-message {
	margin: 0 0 24px;
	color: #666;
}

/*
 * Listado de productos dentro del popup (misma tabla que la pagina del
 * cotizador, reutilizada tal cual). Se limita la altura y se deja scroll
 * propio para cotizadores con muchos productos.
 */
.offq-popup-table-wrap {
	max-height: 320px;
	overflow-y: auto;
	margin: 0 0 24px;
	text-align: left;
}

.offq-popup-table-wrap .offq-quote-table {
	margin-bottom: 0;
}

/*
 * En mobile la tabla de 4 columnas (imagen/nombre/cantidad/eliminar) no
 * entra en el ancho del popup y termina forzando scroll horizontal. Se
 * reordena cada fila como una tarjeta (imagen arriba, nombre debajo,
 * cantidad y eliminar en la misma linea) solo dentro del popup: la tabla
 * de la pagina del cotizador tiene mas ancho disponible y se deja tal cual.
 */
@media (max-width: 576px) {
	.offq-popup {
		padding: 32px 16px 20px;
	}
	.offq-remove-line {
		position: absolute;
		top: 0;
		right: 0;
		font-size: 30px;
	}
	.offq-popup-table-wrap .offq-quote-table thead {
		display: none;
	}

	.offq-popup-table-wrap .offq-quote-table,
	.offq-popup-table-wrap .offq-quote-table tbody {
		display: block;
		width: 100%;
	}

	.offq-popup-table-wrap .offq-quote-table tr.offq-line {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"thumb thumb"
			"name name"
			"qty remove";
		align-items: center;
		column-gap: 12px;
		row-gap: 10px;
		padding: 16px 0;
		position: relative;
	}

	.offq-popup-table-wrap .offq-quote-table tr.offq-line td {
		display: block;
		padding: 0;
		border-bottom: none;
		text-align: center;
	}

	.offq-popup-table-wrap .offq-col-thumb {
		grid-area: thumb;
		text-align: center;
	}

	.offq-popup-table-wrap .offq-col-thumb img {
		max-width: 100px;
		margin: 0 auto;
	}

	.offq-popup-table-wrap .offq-col-name {
		grid-area: name;
		text-align: center;
		font-weight: 600;
	}

	.offq-popup-table-wrap .offq-col-qty {
		grid-area: qty;
	}

	.offq-popup-table-wrap .offq-col-qty .quantity {
		width: 100%;
		max-width: 130px;
	}

	.offq-popup-table-wrap .offq-col-remove {
		grid-area: remove;
		text-align: right;
	}
}

.offq-popup-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.offq-popup-actions .btn {
	flex: 1 1 auto;
}