/**
 * Estilos del checkout
 *
 * @package GestionPagosOffline
 * @since 1.0.0
 */

/* ==========================================================================
   Mensajes de descuento y advertencia
   ========================================================================== */

.gpo-discount-message {
	margin: 15px 0;
	padding: 15px;
	background-color: #e7f7f9;
	border-left: 4px solid #007cba;
	color: #2c3338;
	font-size: 14px;
}

.gpo-discount-message::before {
	content: "\f348";
	font-family: dashicons;
	font-size: 20px;
	margin-right: 8px;
	vertical-align: middle;
	color: #007cba;
}

.gpo-outlet-warning {
	margin: 15px 0;
	padding: 15px;
	background-color: #fff8e5;
	border-left: 4px solid #f0b849;
	color: #2c3338;
	font-size: 14px;
}

.gpo-outlet-warning::before {
	content: "\f534";
	font-family: dashicons;
	font-size: 20px;
	margin-right: 8px;
	vertical-align: middle;
	color: #f0b849;
}

.gpo-discount-details {
	margin: 15px 0;
	padding: 15px;
	background-color: #f0f0f1;
	border-left: 4px solid #646970;
	font-size: 13px;
}

.gpo-discount-details p {
	margin: 0;
}

.gpo-discount-details strong {
	display: block;
	margin-bottom: 5px;
}

/* ==========================================================================
   Modificaciones de Payment Gateway
   ========================================================================== */

.gpo-gateway-discount-info {
	margin-top: 8px;
	padding: 8px 12px;
	background-color: #e7f7f9;
	border-radius: 3px;
	font-size: 13px;
	color: #007cba;
	font-weight: 600;
}

.gpo-gateway-outlet-note {
	margin-top: 5px;
	font-size: 12px;
	color: #646970;
	font-weight: normal;
	font-style: italic;
}

.gpo-gateway-with-discount .wc_payment_method label {
	font-weight: 600;
}

/* ==========================================================================
   Animaciones
   ========================================================================== */

@keyframes gpoFadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.gpo-discount-message,
.gpo-outlet-warning,
.gpo-discount-details {
	animation: gpoFadeIn 0.3s ease;
}

/* ==========================================================================
   Loading state
   ========================================================================== */

.gpo-loading {
	position: relative;
	pointer-events: none;
	opacity: 0.6;
}

.gpo-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid #f3f3f3;
	border-top: 2px solid #007cba;
	border-radius: 50%;
	animation: gpoSpin 1s linear infinite;
}

@keyframes gpoSpin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 768px) {
	.gpo-discount-message,
	.gpo-outlet-warning,
	.gpo-discount-details {
		font-size: 13px;
		padding: 12px;
	}

	.gpo-gateway-discount-info {
		font-size: 12px;
		padding: 6px 10px;
	}
}

/* ==========================================================================
   Compatibilidad con temas populares
   ========================================================================== */

/* Storefront */
.storefront .gpo-discount-message,
.storefront .gpo-outlet-warning {
	border-radius: 4px;
}

/* Astra */
.ast-container .gpo-discount-message,
.ast-container .gpo-outlet-warning {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* OceanWP */
#site-content .gpo-discount-message,
#site-content .gpo-outlet-warning {
	line-height: 1.6;
}