/* ============================================================
   ONE PAGE CHECKOUT — Equilibrium
   v1.7
   ============================================================ */

/* -------- Variables -------- */
.eq-opc {
	--eq-accent:  #FCB784;
	--eq-accent2: #FDA36B;
	--eq-text:    #1a1a1a;
	--eq-muted:   #888;
	--eq-border:  #e4e4e4;
	--eq-bg:      #fff;
	--eq-radius:  10px;
	--eq-shadow:  0 2px 14px rgba(0,0,0,0.07);

	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 20px;
	box-sizing: border-box;
	font-family: 'Majorant', sans-serif;
	font-weight: 300;
	color: var(--eq-text);
}

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

/* -------- Layout principal -------- */
.eq-opc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: start;
}

.eq-opc-col {
	min-width: 0;
}

/* -------- Paneles -------- */
.eq-opc-cart-summary,
.eq-opc-checkout-wrap,
.eq-opc-bottom {
	border: 1px solid var(--eq-border);
	border-radius: var(--eq-radius);
	background: var(--eq-bg);
	box-shadow: var(--eq-shadow);
	padding: 24px;
}

.eq-opc-cart-summary {
	position: sticky;
	top: 18px;
}

.eq-opc-checkout {
	border: none;
	box-shadow: none;
	padding: 0;
}

.eq-opc-bottom {
	margin-top: 28px;
}

/* -------- Títulos -------- */
.eq-opc-title,
.eq-opc-order-title {
	margin: 0 0 20px;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--eq-muted);
	font-family: 'Majorant', sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--eq-border);
	padding-bottom: 12px;
}

/* -------- Items del carrito -------- */
.eq-opc-cart-items {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 0 16px;
}

.eq-opc-cart-item {
	display: grid;
	grid-template-columns: 60px 1fr auto;
	gap: 12px;
	align-items: center;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--eq-border);
}

.eq-opc-cart-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.eq-opc-cart-item.eq-opc-removing {
	opacity: 0.35;
	pointer-events: none;
	transition: opacity 0.2s;
}

.eq-opc-cart-thumb-wrap img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.eq-opc-cart-name {
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--eq-text);
	line-height: 1.4;
}

.eq-opc-cart-qty {
	font-size: 0.8rem;
	color: var(--eq-muted);
	margin-top: 3px;
}

.eq-opc-cart-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.eq-opc-cart-line {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--eq-text);
	white-space: nowrap;
}

/* Botón eliminar × */
.eq-opc-remove-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 0.85rem;
	line-height: 1;
	color: #bbb !important;
	background: transparent !important;
	border: 1px solid #ddd !important;
	border-radius: 50% !important;
	text-decoration: none !important;
	padding: 0 !important;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
	font-weight: 400;
	flex-shrink: 0;
}

.eq-opc-remove-item:hover {
	color: #e05252 !important;
	border-color: #e05252 !important;
	background: #fff5f5 !important;
}

/* -------- Totales carrito -------- */
.eq-opc-totals {
	border-top: 1px solid var(--eq-border);
	padding-top: 14px;
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.eq-opc-total-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.eq-opc-total-label {
	color: var(--eq-muted);
	font-size: 0.88rem;
}

.eq-opc-total-grand .eq-opc-total-label,
.eq-opc-total-grand .eq-opc-total-value {
	color: var(--eq-text);
	font-weight: 700;
	font-size: 1rem;
}

/* -------- Botón "Ir a pagar" — solo móvil -------- */
.eq-opc-go-pay {
	display: none; /* oculto en desktop */
}

/* -------- Toggle resumen (solo móvil) -------- */
.eq-opc-cart-toggle {
	display: none;
	width: 100%;
	margin-bottom: 12px;
	padding: 12px 16px;
	border: 1px solid var(--eq-border);
	border-radius: var(--eq-radius);
	background: #fff;
	font-family: 'Majorant', sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--eq-text);
	cursor: pointer;
	text-align: left;
}

/* ============================================================
   RESUMEN DE DIRECCIÓN GUARDADA
   ============================================================ */

.eq-opc-addr-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.eq-opc-addr-header .eq-opc-title {
	margin-bottom: 0;
	border-bottom: none;
	padding-bottom: 0;
}

/* Separador visual debajo del header */
.eq-opc-checkout-wrap .eq-opc-title {
	border-bottom: 1px solid var(--eq-border);
	padding-bottom: 12px;
	margin-bottom: 0;
}

.eq-opc-addr-header .eq-opc-title {
	flex: 1;
}

.eq-opc-addr-toggle {
	font-family: 'Majorant', sans-serif !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	color: var(--eq-accent) !important;
	background: transparent !important;
	border: 1px solid var(--eq-accent) !important;
	border-radius: 4px !important;
	padding: 4px 12px !important;
	cursor: pointer !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	transition: background-color 0.15s, color 0.15s !important;
	white-space: nowrap;
	height: auto !important;
}

.eq-opc-addr-toggle:hover {
	background-color: var(--eq-accent) !important;
	color: #fff !important;
}

/* Resumen compacto de dirección */
.eq-opc-addr-summary {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 16px;
	background: #fafafa;
	border: 1px solid var(--eq-border);
	border-radius: 8px;
	margin-top: 14px;
}

.eq-opc-addr-name {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--eq-text);
	font-family: 'Majorant', sans-serif;
}

.eq-opc-addr-line,
.eq-opc-addr-city {
	font-size: 0.88rem;
	color: var(--eq-muted);
	font-family: 'Majorant', sans-serif;
	font-weight: 300;
}

/* Formulario colapsado */
.eq-opc-addr-form.eq-opc-addr-hidden {
	display: none;
}

.eq-opc-addr-form {
	margin-top: 16px;
}

/* Cuando el formulario está abierto, ocultar el resumen */
.eq-opc-addr-form:not(.eq-opc-addr-hidden) ~ .eq-opc-addr-summary,
.eq-opc-checkout-wrap.eq-addr-editing .eq-opc-addr-summary {
	display: none;
}

/* ============================================================
   FORMULARIO DE DIRECCIONES
   ============================================================ */

/* Labels — títulos de sección */
.eq-opc .woocommerce-billing-fields h3,
.eq-opc .woocommerce-shipping-fields h3,
.eq-opc .woocommerce-additional-fields h3 {
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	color: var(--eq-muted) !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	border-bottom: 1px solid var(--eq-border) !important;
	padding-bottom: 10px !important;
	margin: 0 0 16px !important;
	font-family: 'Majorant', sans-serif !important;
}

.eq-opc .woocommerce-shipping-fields {
	margin-top: 24px;
}

/* Labels de campos de formulario (NO los del bloque #payment) */
.eq-opc .form-row label,
.eq-opc .woocommerce-form__label {
	font-family: 'Majorant', sans-serif !important;
	font-weight: 400 !important;
	font-size: 0.78rem !important;
	color: var(--eq-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	display: block !important;
	margin-bottom: 6px !important;
	line-height: 1.4 !important;
}

/* Inputs */
.eq-opc input[type="text"],
.eq-opc input[type="email"],
.eq-opc input[type="tel"],
.eq-opc input[type="password"],
.eq-opc input[type="number"],
.eq-opc textarea {
	font-family: 'Majorant', sans-serif !important;
	font-weight: 300 !important;
	font-size: 0.95rem !important;
	color: var(--eq-text) !important;
	background: #fafafa !important;
	border: 1.5px solid #d8d8d8 !important;
	border-radius: 7px !important;
	padding: 0 14px !important;
	width: 100% !important;
	height: 46px !important;
	line-height: 46px !important;
	outline: none !important;
	transition: border-color 0.15s, box-shadow 0.15s !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	display: block !important;
}

.eq-opc textarea {
	height: auto !important;
	line-height: 1.5 !important;
	padding: 12px 14px !important;
	min-height: 90px;
}

.eq-opc input[type="text"]:focus,
.eq-opc input[type="email"]:focus,
.eq-opc input[type="tel"]:focus,
.eq-opc input[type="password"]:focus,
.eq-opc input[type="number"]:focus,
.eq-opc textarea:focus {
	border-color: var(--eq-accent) !important;
	box-shadow: 0 0 0 3px rgba(252,183,132,0.2) !important;
	background: #fff !important;
}

/* Select nativo */
.eq-opc select {
	font-family: 'Majorant', sans-serif !important;
	font-weight: 300 !important;
	font-size: 0.95rem !important;
	color: var(--eq-text) !important;
	background: #fafafa !important;
	border: 1.5px solid #d8d8d8 !important;
	border-radius: 7px !important;
	padding: 0 14px !important;
	width: 100% !important;
	height: 46px !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* Select2 */
.eq-opc .select2-container {
	width: 100% !important;
}

.eq-opc .select2-container--default .select2-selection--single {
	font-family: 'Majorant', sans-serif !important;
	font-size: 0.95rem !important;
	height: 46px !important;
	padding: 0 14px !important;
	border: 1.5px solid #d8d8d8 !important;
	border-radius: 7px !important;
	background: #fafafa !important;
	display: flex !important;
	align-items: center !important;
}

.eq-opc .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 !important;
	line-height: normal !important;
	color: var(--eq-text) !important;
}

.eq-opc .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px !important;
	right: 10px !important;
}

.eq-opc .select2-container--default.select2-container--focus .select2-selection--single,
.eq-opc .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--eq-accent) !important;
	box-shadow: 0 0 0 3px rgba(252,183,132,0.2) !important;
}

/* Filas de campos — una sola columna dentro del panel */
.eq-opc .form-row {
	margin-bottom: 14px !important;
	padding: 0 !important;
	float: none !important;
	width: 100% !important;
	clear: none !important;
}

/* Nombre y apellidos: 50/50 */
.eq-opc #billing_first_name_field,
.eq-opc #billing_last_name_field,
.eq-opc #shipping_first_name_field,
.eq-opc #shipping_last_name_field {
	width: calc(50% - 7px) !important;
	float: left !important;
	clear: none !important;
}

.eq-opc #billing_first_name_field,
.eq-opc #shipping_first_name_field {
	margin-right: 14px !important;
}

/* Clearfix después de nombre/apellidos */
.eq-opc #billing_last_name_field,
.eq-opc #shipping_last_name_field {
	margin-right: 0 !important;
}

.eq-opc #billing_last_name_field + *,
.eq-opc #shipping_last_name_field + * {
	clear: both;
}

/* Requerido asterisco */
.eq-opc .required {
	color: var(--eq-accent) !important;
	font-weight: 700 !important;
}

/* Mensaje de error por campo */
.eq-opc .woocommerce-invalid input,
.eq-opc .woocommerce-invalid .select2-selection {
	border-color: #e05252 !important;
}

.eq-opc .woocommerce-invalid-required-field::after {
	content: attr(data-title);
	display: block;
	font-size: 0.78rem;
	color: #e05252;
	margin-top: 4px;
}

/* ============================================================
   BOTONES
   ============================================================ */

.eq-opc a.button,
.eq-opc button.button,
.eq-opc button[type="submit"],
.eq-opc input[type="submit"],
.eq-opc .woocommerce-button {
	font-family: 'Majorant', sans-serif !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	background-color: var(--eq-accent) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 6px !important;
	padding: 13px 22px !important;
	height: auto !important;
	line-height: 1.4 !important;
	text-align: center !important;
	text-decoration: none !important;
	display: inline-block !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.eq-opc a.button:hover,
.eq-opc button.button:hover,
.eq-opc button[type="submit"]:hover,
.eq-opc input[type="submit"]:hover,
.eq-opc .woocommerce-button:hover {
	background-color: var(--eq-accent2) !important;
	color: #fff !important;
}

/* Botón "Realizar pedido" — CTA principal */
.eq-opc #place_order {
	display: block !important;
	width: 100% !important;
	font-size: 1rem !important;
	padding: 16px 24px !important;
	margin-top: 10px !important;
	letter-spacing: 0.08em !important;
}

/* ============================================================
   SECCIÓN INFERIOR (cupón + order review + pago)
   ============================================================ */

/* ── Cupón propio — cerrado por defecto ── */
.eq-opc-coupon-wrap {
	margin-bottom: 20px;
}

.eq-opc-coupon-toggle {
	margin: 0;
	font-size: 0.88rem;
	color: var(--eq-muted);
	font-family: 'Majorant', sans-serif;
}

.eq-opc-coupon-btn {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	height: auto !important;
	font-family: 'Majorant', sans-serif !important;
	font-size: 0.88rem !important;
	font-weight: 400 !important;
	color: var(--eq-accent) !important;
	text-decoration: underline !important;
	cursor: pointer !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	display: inline !important;
	transition: color 0.15s !important;
}

.eq-opc-coupon-btn:hover {
	color: var(--eq-accent2) !important;
}

/* Formulario cupón: oculto por defecto via atributo hidden */
.eq-opc-coupon-form {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid var(--eq-border);
	border-radius: var(--eq-radius);
	margin-top: 10px;
	background: #fafafa;
}

.eq-opc-coupon-form[hidden] {
	display: none !important;
}

.eq-opc-coupon-form .form-row {
	margin: 0 !important;
	float: none !important;
	width: auto !important;
	padding: 0 !important;
}

.eq-opc-coupon-form .form-row-first {
	flex: 1;
}

.eq-opc-coupon-form .form-row-last {
	flex-shrink: 0;
}

.eq-opc-coupon-apply {
	white-space: nowrap;
}

/* Tabla order review: ocultar thead (productos) — ya se ven en el carrito izquierdo.
   Se oculta via CSS para que el DOM/nonces de WooCommerce y Redsys estén intactos. */
.eq-opc .woocommerce-checkout-review-order-table thead,
.eq-opc .woocommerce-checkout-review-order-table tbody {
	display: none !important;
}

/* Mostrar solo el tfoot (subtotal, envío, total) */
.eq-opc .woocommerce-checkout-review-order-table tfoot {
	display: table-footer-group !important;
}

.eq-opc .woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
	font-size: 0.9rem;
}

.eq-opc .woocommerce-checkout-review-order-table tfoot th,
.eq-opc .woocommerce-checkout-review-order-table tfoot td {
	padding: 10px 8px;
	border-bottom: 1px solid var(--eq-border);
	font-family: 'Majorant', sans-serif;
	font-weight: 300;
	color: var(--eq-text);
	text-align: left;
}

.eq-opc .woocommerce-checkout-review-order-table tfoot tr:last-child td,
.eq-opc .woocommerce-checkout-review-order-table tfoot tr:last-child th {
	font-weight: 700;
	font-size: 1rem;
	border-bottom: 0;
	padding-top: 14px;
}

/* Métodos de pago */
.eq-opc #payment {
	border-radius: var(--eq-radius);
	background: #fafafa;
	border: 1px solid var(--eq-border);
	padding: 20px;
	margin-top: 6px;
}

.eq-opc #payment ul.payment_methods {
	list-style: none !important;
	list-style-type: none !important;
	padding: 0 !important;
	margin: 0 0 18px !important;
}

.eq-opc #payment ul.payment_methods li {
	list-style: none !important;
	list-style-type: none !important;
	padding: 12px 0;
	border-bottom: 1px solid var(--eq-border);
}

.eq-opc #payment ul.payment_methods li:last-child {
	border-bottom: none;
}

/* Radio + label en la misma línea */
.eq-opc #payment ul.payment_methods li input[type="radio"] {
	width: auto !important;
	height: auto !important;
	display: inline-block !important;
	margin: 0 8px 0 0 !important;
	vertical-align: middle !important;
	flex-shrink: 0;
}

.eq-opc #payment ul.payment_methods li label {
	display: inline !important;
	font-family: 'Majorant', sans-serif !important;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	color: var(--eq-text) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin-bottom: 0 !important;
	vertical-align: middle;
	cursor: pointer;
}

.eq-opc #payment .payment_box {
	padding: 12px;
	background: #fff;
	border-radius: 6px;
	margin-top: 10px;
	font-size: 0.88rem;
	color: var(--eq-muted);
	border: 1px solid var(--eq-border);
}

/* ============================================================
   NOTICES
   ============================================================ */

.eq-opc .woocommerce-error,
.eq-opc .woocommerce-message,
.eq-opc .woocommerce-info {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 16px;
	font-size: 0.88rem;
	font-family: 'Majorant', sans-serif;
	list-style: none;
}

.eq-opc .woocommerce-error {
	border-left: 4px solid #e05252;
	background: #fff5f5;
	color: #c0392b;
}

.eq-opc .woocommerce-message,
.eq-opc .woocommerce-info {
	border-left: 4px solid var(--eq-accent);
	background: #FFF8F2;
	color: var(--eq-text);
}

/* Spinner de carga durante AJAX */
.eq-opc form.processing {
	opacity: 0.6;
	pointer-events: none;
}

/* ============================================================
   RESPONSIVE — Tablet / Móvil
   ============================================================ */

@media (max-width: 1024px) {
	.eq-opc {
		padding: 20px 0;
	}

	.eq-opc-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.eq-opc-cart-summary {
		position: static;
	}

	/* Toggle visible en móvil */
	.eq-opc-cart-toggle {
		display: block;
	}

	.eq-opc-cart-panel[hidden] {
		display: none !important;
	}

	/* "Ir a pagar" visible en móvil debajo del carrito */
	.eq-opc-go-pay {
		display: block;
		width: 100%;
		text-align: center;
		margin-top: 16px;
		padding: 13px 20px;
		background-color: var(--eq-accent) !important;
		color: #fff !important;
		font-family: 'Majorant', sans-serif;
		font-size: 0.9rem;
		font-weight: 600;
		text-decoration: none !important;
		border: 0 !important;
		border-radius: 6px !important;
		cursor: pointer;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.eq-opc-go-pay:hover {
		background-color: var(--eq-accent2) !important;
		color: #fff !important;
	}
}

@media (max-width: 640px) {
	/* Nombre/Apellidos: full width en pantallas pequeñas */
	.eq-opc #billing_first_name_field,
	.eq-opc #billing_last_name_field,
	.eq-opc #shipping_first_name_field,
	.eq-opc #shipping_last_name_field {
		width: 100% !important;
		float: none !important;
		margin-right: 0 !important;
	}

	.eq-opc .checkout_coupon {
		flex-direction: column;
		align-items: stretch;
	}

	.eq-opc .checkout_coupon .button {
		width: 100% !important;
		text-align: center !important;
	}
}
