/**
 * Bunny Affiliate Manager — Frontend CSS
 *
 * Estilos para el bloque de affiliate links en el frontend público.
 * Diseño limpio, ligero y sin dependencias externas.
 * Compatible con los estilos 'vertical' y 'horizontal'.
 *
 * v0.0.5: .wpam-link-item es ahora un <a> — card completamente clicable.
 *         Se añaden estilos para display_content y CTA como <span>.
 *
 * Override desde tema: los temas pueden añadir reglas en su propio CSS
 * usando las mismas clases .wpam-* para personalizar la apariencia.
 *
 * @package WP_AffiliateManager
 * @since   4.0.0
 */

/* ---------------------------------------------------------------------------
   Variables CSS — personalizables desde el tema
   --------------------------------------------------------------------------- */
:root {
	--wpam-color-bg:       #ffffff;
	--wpam-color-border:   #e2e8f0;
	--wpam-color-text:     #1a1a1a;
	--wpam-color-subtext:  #64748b;
	--wpam-color-btn-bg:   #6c47ff;
	--wpam-color-btn-text: #ffffff;
	--wpam-color-btn-hover:#5538e0;
	--wpam-radius:         8px;
	--wpam-gap:            12px;
	--wpam-font-size:      0.9rem;
}

/* ---------------------------------------------------------------------------
   Wrapper externo
   --------------------------------------------------------------------------- */
.wpam-links-wrapper {
	margin: 2rem 0;
	font-family: inherit;
	font-size: var(--wpam-font-size);
	color: var(--wpam-color-text);
}

.wpam-links-inner {
	display: flex;
	flex-direction: column;
	gap: var(--wpam-gap);
}

/* ---------------------------------------------------------------------------
   Estilo VERTICAL (por defecto — lista apilada)
   --------------------------------------------------------------------------- */
.wpam-style-vertical .wpam-links-inner {
	flex-direction: column;
}

/* ---------------------------------------------------------------------------
   Estilo HORIZONTAL (fila, con wrap)
   --------------------------------------------------------------------------- */
.wpam-style-horizontal .wpam-links-inner {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
}

.wpam-style-horizontal .wpam-link-item {
	flex: 1 1 220px;
	min-width: 200px;
	max-width: 340px;
}

/* ---------------------------------------------------------------------------
   Link item — ahora es un <a> (card completamente clicable)
   --------------------------------------------------------------------------- */
.wpam-link-item {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--wpam-color-bg);
	border: 1px solid var(--wpam-color-border);
	border-radius: var(--wpam-radius);
	padding: 14px 16px;
	text-decoration: none !important; /* Suprimir subrayado de enlace */
	color: var(--wpam-color-text) !important; /* Heredar color de texto, no color de enlace */
	cursor: pointer;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.wpam-link-item:hover {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
	border-color: #c8c8e0;
	text-decoration: none !important;
}

.wpam-link-item:focus {
	outline: 2px solid var(--wpam-color-btn-bg);
	outline-offset: 2px;
}

/* Color de marca como acento en el borde izquierdo */
.wpam-link-item[style*="--wpam-brand-color"] {
	border-left: 3px solid var(--wpam-brand-color, var(--wpam-color-btn-bg));
}

/* ---------------------------------------------------------------------------
   Logo del afiliado
   --------------------------------------------------------------------------- */
.wpam-link-logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 30px;
	/* Fondo checkerboard sutil para logos con transparencia o fondo blanco.
	   Evita que logos blancos se pierdan sobre el fondo claro de la card. */
	background-color: #ffffff;
	background-size: 8px 8px;
	background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
	border-radius: 4px;
	padding: 4px;
}

.wpam-link-logo img {
	max-width: 72px;
	max-height: 44px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* ---------------------------------------------------------------------------
   Modo logo-only: centra el contenido y reduce el padding lateral
   --------------------------------------------------------------------------- */
.wpam-link-item--logo-only {
	justify-content: center;
	padding: 12px;
}

.wpam-link-item--logo-only .wpam-link-logo {
	max-width: 96px;
	max-height: 56px;
}

.wpam-link-item--logo-only .wpam-link-logo img {
	max-width: 88px;
	max-height: 52px;
}

/* ---------------------------------------------------------------------------
   Info del afiliado
   --------------------------------------------------------------------------- */
.wpam-link-info {
	flex: 1;
	min-width: 0; /* Evita desbordamiento en flex */
}

.wpam-link-name {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--wpam-color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   Botón CTA — ahora es un <span> visual (no un <a> anidado)
   --------------------------------------------------------------------------- */
.wpam-link-action {
	flex-shrink: 0;
}

.wpam-link-btn {
	display: inline-block;
	padding: 8px 18px;
	background: var(--wpam-brand-color, var(--wpam-color-btn-bg));
	color: var(--wpam-color-btn-text) !important;
	border-radius: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
	line-height: 1.4;
	pointer-events: none; /* El clic lo gestiona el <a> padre (.wpam-link-item) */
	transition: background 0.15s ease;
}

/* El hover del <span> se activa cuando el <a> padre recibe hover */
.wpam-link-item:hover .wpam-link-btn {
	background: var(--wpam-color-btn-hover);
}

/* ---------------------------------------------------------------------------
   Responsive — móvil
   --------------------------------------------------------------------------- */
@media ( max-width: 600px ) {
	.wpam-link-item {
		flex-wrap: wrap;
		gap: 10px;
	}

	.wpam-link-action {
		width: 100%;
	}

	.wpam-link-btn {
		width: 100%;
		text-align: center;
		padding: 10px;
	}

	.wpam-style-horizontal .wpam-link-item {
		flex: 1 1 100%;
		max-width: 100%;
	}
}