/* ===== Contenedor y bloques propios del plugin ===== */
.lp-payphone-payment-wrap {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	padding: 1.75rem;
	background: linear-gradient(160deg, #ffffff 0%, #f8fafc 100%);
	border-radius: 16px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.lp-payphone-charge-amount {
	margin-bottom: 1.25rem;
	font-size: 1.2rem;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.02em;
}

.lp-payphone-charge-amount .lp-payphone-fee-note {
	font-size: 0.85rem;
	font-weight: 500;
	color: #64748b;
}

.lp-payphone-button-container,
#pp-button {
	min-height: 280px;
	overflow: visible;
	display: block;
}

.lp-payphone-notice {
	margin-top: 1.25rem;
	padding: 0.85rem 1.1rem;
	font-size: 0.9rem;
	color: #475569;
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
	border-radius: 10px;
	border-left: 4px solid #0ea5e9;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Nota:
 * Se quitaron overrides visuales internos de #pp-button para respetar
 * el tema nativo del widget oficial de Payphone.
 */

/* Ocultar subida de comprobante cuando el pago es con tarjeta (Payphone) */
.step-payment-pay-w:has(.lp-payphone-payment-wrap) .lp-bank-transfer-proof-upload {
	display: none !important;
}

/* ===== Paso payment__processors (móvil): tarjetas más pequeñas en 2 columnas ===== */
@media (max-width: 767px) {
	.lp-payphone-payment-wrap {
		padding: 1rem !important;
		margin-top: 1rem !important;
		margin-bottom: 1rem !important;
		border-radius: 12px !important;
	}

	.lp-payphone-charge-amount {
		margin-bottom: 0.85rem !important;
		font-size: 1rem !important;
		line-height: 1.3 !important;
	}

	.lp-payphone-charge-amount .lp-payphone-fee-note {
		font-size: 0.8rem !important;
	}

	/* Compactar widget Payphone en móvil sin afectar desktop */
	#pp-button,
	#pp-button * {
		line-height: 1.2 !important;
	}

	#pp-button {
		min-height: 240px !important;
	}

	#pp-button input,
	#pp-button select,
	#pp-button button,
	#pp-button label,
	#pp-button p,
	#pp-button span,
	#pp-button h1,
	#pp-button h2,
	#pp-button h3,
	#pp-button h4 {
		font-size: 14px !important;
	}

	#pp-button input,
	#pp-button select,
	#pp-button button {
		min-height: 40px !important;
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	.step-payment-processors-w .lp-payment-processors-w .lp-options.lp-options-grid.lp-options-grid-three {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px !important;
	}

	.step-payment-processors-w .lp-payment-processors-w .lp-option {
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: stretch !important;
		padding: 10px 8px !important;
		min-height: 132px !important;
	}

	.step-payment-processors-w .lp-payment-processors-w .lp-option .lp-option-image-w {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		height: 54px !important;
		margin-bottom: 6px !important;
		flex: 0 0 auto !important;
	}

	.step-payment-processors-w .lp-payment-processors-w .lp-option .lp-option-image {
		display: block !important;
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;
		margin: 0 auto !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
		background-size: contain !important;
	}

	/* Alineado optico: ambos iconos al mismo nivel horizontal */
	.step-payment-processors-w .lp-payment-processors-w .lp-option[data-value="bank_transfer"] .lp-option-image {
		transform: translateY(-1px) !important;
	}

	.step-payment-processors-w .lp-payment-processors-w .lp-option[data-value="payphone"] .lp-option-image {
		transform: translateY(1px) !important;
	}

	.step-payment-processors-w .lp-payment-processors-w .lp-option .lp-option-label {
		border-top: 0 !important;
		padding-top: 0 !important;
		font-size: 13px !important;
		line-height: 1.25 !important;
		font-weight: 700 !important;
		text-align: center !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
		word-break: break-word !important;
		min-height: 40px !important;
	}
}