/**
 * Cactus Cart — estilos base.
 *
 * Estos valores reflejan la línea editorial real de cactus.miprimeraweb.cl
 * (inspeccionada en vivo): fondo casi negro violáceo, acento verde-lima,
 * tipografía IBM Plex Sans para títulos / Hanken Grotesk para texto, y
 * botones tipo píldora en mayúsculas con tracking amplio. Todo esto es
 * sólo el punto de partida — cada valor se puede sobrescribir desde la
 * pestaña "Estilo" del widget en Elementor.
 */

.cactus-opc-wrapper {
	max-width: 100%;
	box-sizing: border-box;
	color: #C9BEEA;
	font-family: "Hanken Grotesk", sans-serif;
}

.cactus-opc-wrapper *,
.cactus-opc-wrapper *::before,
.cactus-opc-wrapper *::after {
	box-sizing: border-box;
}

.cactus-opc-wrapper .cactus-opc-heading {
	margin: 0;
	font-family: "IBM Plex Sans", sans-serif;
	font-weight: 800;
	font-size: 22px;
	color: #F3EDFF;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ---------- Header de la sección carrito (título + contador) ---------- */

.cactus-opc-cart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}

.cactus-opc-item-count {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.08);
	color: #C9BEEA;
	font-size: 12px;
	font-weight: 600;
}

.cactus-opc-continue-shopping {
	color: #C9BEEA;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 20px;
	transition: color 0.15s ease-in-out;
}

.cactus-opc-continue-shopping:hover {
	color: #C2FF00;
}

/* ---------- Carrito vacío ---------- */

.cactus-opc-empty-cart {
	text-align: center;
	padding: 40px 20px;
}

.cactus-opc-empty-cart p {
	color: #C9BEEA;
}

.cactus-opc-empty-cart__button {
	display: inline-block;
	margin-top: 16px;
	padding: 15px 40px;
	border-radius: 100px;
	background: #C2FF00;
	color: #160A24;
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* ---------- Layout de dos columnas ---------- */

.cactus-opc-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: flex-start;
}

.cactus-opc-col--cart {
	flex: 1 1 60%;
	min-width: 280px;
}

.cactus-opc-col--totals {
	flex: 1 1 34%;
	min-width: 260px;
}

.cactus-opc-sticky-totals-yes .cactus-opc-col--totals {
	position: sticky;
	top: 20px;
}

@media ( max-width: 767px ) {
	.cactus-opc-columns {
		flex-direction: column;
	}

	.cactus-opc-col--cart,
	.cactus-opc-col--totals {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}

	.cactus-opc-sticky-totals-yes .cactus-opc-col--totals {
		position: static;
	}
}

/* ---------- Tabla del carrito ---------- */

.cactus-opc-cart-table {
	width: 100%;
	border-collapse: collapse;
}

.cactus-opc-cart-table th {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #8a8398;
	font-weight: 600;
}

.cactus-opc-cart-table th,
.cactus-opc-cart-table td {
	padding: 14px 10px;
	text-align: left;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	vertical-align: middle;
}

.cactus-opc-cart-item__thumb img {
	display: block;
	border-radius: 12px;
	width: 70px;
	height: 70px;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.cactus-opc-cart-item__name {
	color: #F3EDFF;
	font-weight: 600;
}

.cactus-opc-cart-item__name a {
	color: #F3EDFF;
	text-decoration: none;
}

.cactus-opc-cart-item__price,
.cactus-opc-cart-item__subtotal {
	color: #C9BEEA;
}

.cactus-opc-cart-item__sku {
	font-size: 0.85em;
	color: #8a8398;
	margin-top: 4px;
}

/* ---------- Selector de cantidad ---------- */

.cactus-opc-cart-item__qty input.qty {
	width: 54px;
	padding: 8px 4px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
	color: #F3EDFF;
	text-align: center;
	-moz-appearance: textfield;
}

.cactus-opc-cart-item__qty input.qty::-webkit-outer-spin-button,
.cactus-opc-cart-item__qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Cápsula del selector +/-: el número vive DENTRO de esta píldora, sin su
   propio fondo/borde, para que se vea como un único control (no dos cajas
   distintas pegadas). Los !important son a propósito: garantizan que el
   look del stepper no dependa de estilos genéricos del tema para inputs. */
.cactus-opc-qty-stepper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 3px;
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* woocommerce_quantity_input() envuelve el <input> en su propio
   <div class="quantity">; lo neutralizamos para que siga viéndose como
   una sola píldora en vez de una caja anidada con su propio espaciado. */
.cactus-opc-qty-stepper .quantity {
	display: inline-flex;
	margin: 0;
}

.cactus-opc-qty-stepper input.qty {
	width: 34px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	color: #F3EDFF !important;
	text-align: center;
	font-weight: 600;
}

.cactus-opc-qty-btn {
	width: 30px;
	height: 30px;
	line-height: 30px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #F3EDFF;
	font-size: 15px;
	text-align: center;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.cactus-opc-qty-btn:hover {
	background: #C2FF00;
	color: #160A24;
}

/* ---------- Botón eliminar ---------- */

.cactus-opc-remove-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: #8a8398;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	transition: color 0.15s ease-in-out;
}

.cactus-opc-remove-item:hover {
	color: #E5147E;
}

/* ---------- Cupón ---------- */

.cactus-opc-coupon {
	max-width: 460px;
	margin: 20px 0 0;
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
}

.cactus-opc-coupon label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: #F3EDFF;
}

.cactus-opc-coupon__row {
	display: flex;
	gap: 8px;
}

.cactus-opc-coupon input[type="text"] {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.05);
	color: #F3EDFF;
}

.cactus-opc-coupon button {
	padding: 10px 22px;
	border: 1px solid #C2FF00;
	border-radius: 100px;
	background: transparent;
	color: #C2FF00;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.cactus-opc-coupon button:hover {
	background: #C2FF00;
	color: #160A24;
}

/* ---------- Caja de resumen / totales ---------- */

.cactus-opc-summary-box {
	padding: 28px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	background: #170F28;
}

.cactus-opc-summary-box table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
}

.cactus-opc-summary-box table.shop_table td,
.cactus-opc-summary-box table.shop_table th {
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: #C9BEEA;
}

.cactus-opc-order-item .product-name {
	color: #F3EDFF;
}

.cactus-opc-order-item .product-quantity {
	color: #8a8398;
	font-weight: 600;
	white-space: nowrap;
}

.cactus-opc-summary-box .order-total .amount {
	font-weight: 800;
	font-size: 1.2em;
	color: #C2FF00;
}

.cactus-opc-summary-box h2 {
	font-family: "IBM Plex Sans", sans-serif;
	font-weight: 800;
	color: #F3EDFF;
	margin: 0 0 16px;
}

/* ---------- Insignia de compra segura ---------- */

.cactus-opc-trust-badge {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	padding: 14px 16px;
	border-radius: 12px;
	background: rgba(194, 255, 0, 0.08);
	border: 1px solid rgba(194, 255, 0, 0.2);
}

.cactus-opc-trust-badge__icon {
	color: #C2FF00;
	font-size: 20px;
	line-height: 1;
	flex-shrink: 0;
}

.cactus-opc-trust-badge__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cactus-opc-trust-badge__title {
	color: #F3EDFF;
	font-weight: 700;
	font-size: 14px;
}

.cactus-opc-trust-badge__subtitle {
	color: #8a8398;
	font-size: 12px;
}

/* ---------- Íconos de métodos de pago ---------- */

.cactus-opc-payment-icons-wrap {
	margin-top: 20px;
	text-align: center;
}

.cactus-opc-payment-icons__label {
	margin: 0 0 10px;
	font-size: 12px;
	color: #8a8398;
}

.cactus-opc-payment-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.cactus-opc-payment-icons img {
	height: 26px;
	width: auto;
	background: #fff;
	padding: 4px 10px;
	border-radius: 6px;
}

/* ---------- Barra inferior de confianza ---------- */

.cactus-opc-trust-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 40px;
	padding: 24px;
	border-radius: 20px;
	background: #170F28;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* El número de columnas responsive se controla desde Elementor (control
   "Columnas" en Estilo > Barra de confianza); esto es sólo un respaldo. */
@media ( max-width: 900px ) {
	.cactus-opc-trust-bar {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media ( max-width: 500px ) {
	.cactus-opc-trust-bar {
		grid-template-columns: 1fr;
	}
}

.cactus-opc-trust-bar__item {
	display: flex;
	align-items: center;
	gap: 12px;
	border-radius: 16px;
}

.cactus-opc-trust-bar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(194, 255, 0, 0.1);
	color: #C2FF00;
	font-size: 18px;
	flex-shrink: 0;
}

.cactus-opc-trust-bar__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cactus-opc-trust-bar__title {
	color: #F3EDFF;
	font-weight: 700;
	font-size: 14px;
}

.cactus-opc-trust-bar__subtitle {
	color: #8a8398;
	font-size: 12px;
}

/* ---------- Métodos de pago (WooCommerce nativo) ---------- */

ul.payment_methods {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

ul.payment_methods li {
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	margin-bottom: 8px;
	background: rgba(255, 255, 255, 0.03);
	color: #F3EDFF;
}

/* ---------- Botón "Ir a pagar" ---------- */

.wc-proceed-to-checkout a.checkout-button {
	display: inline-block;
	width: 100%;
	text-align: center;
	padding: 16px 32px;
	border: none;
	border-radius: 100px;
	background: #C2FF00;
	color: #160A24 !important;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-decoration: none;
	transition: background-color 0.15s ease-in-out;
}

.wc-proceed-to-checkout a.checkout-button:hover {
	background: #a6e600;
}

/* ---------- Campos de formulario genéricos (por si un tema los reutiliza) ---------- */

.cactus-opc-wrapper input.input-text,
.cactus-opc-wrapper select,
.cactus-opc-wrapper textarea {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #F3EDFF;
	border-radius: 8px;
	padding: 10px 12px;
}

/* ---------- Notices ---------- */

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	list-style: none;
	padding: 14px 18px;
	border-radius: 12px;
	margin: 0 0 20px;
	font-size: 14px;
}

.woocommerce-error { background: rgba(229, 20, 78, 0.12); color: #ff8fb8; }
.woocommerce-message { background: rgba(194, 255, 0, 0.12); color: #C2FF00; }
.woocommerce-info { background: rgba(120, 150, 255, 0.12); color: #a9bcff; }

/* ---------- Estado de carga (AJAX) ---------- */

.cactus-opc-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.2s ease-in-out;
}