/* ==========================================================================
   WCFM Wishlist WhatsApp — Estilos v1.3
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Botón WA individual — pill verde con ícono + texto "Ordenar"
   -------------------------------------------------------------------------- */

.wcfm-wl-wa-btn--individual {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	vertical-align:   middle;
	gap:              6px;
	padding:          7px 14px;
	border-radius:    22px;
	background-color: #25D366;
	color:            #fff;
	text-decoration:  none;
	font-size:        0.82rem;
	font-weight:      700;
	white-space:      nowrap;
	line-height:      1.4;
	transition:       background-color 0.2s ease,
	                  transform        0.15s ease,
	                  box-shadow       0.2s ease;
	flex-shrink:      0;
	box-shadow:       0 2px 8px rgba(37, 211, 102, 0.35);
}

.wcfm-wl-wa-btn--individual:hover,
.wcfm-wl-wa-btn--individual:focus {
	background-color: #1ebe5d;
	transform:        translateY(-1px);
	box-shadow:       0 4px 14px rgba(37, 211, 102, 0.5);
	color:            #fff;
	outline:          none;
}

.wcfm-wl-wa-btn--individual svg {
	width:       16px;
	height:      16px;
	display:     block;
	flex-shrink: 0;
}

.wcfm-wl-wa-btn-text {
	font-size:      0.82rem;
	font-weight:    700;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   2. Columna WhatsApp — ocultar contenido nativo de YITH, dejar solo nuestro
      botón WA y el botón eliminar nativo (repeat_remove_button de YITH)
   -------------------------------------------------------------------------- */

/* Ocultar cualquier elemento que YITH meta en esa celda (botón add-to-cart, links, etc.)
   que NO sea nuestro botón WA ni el botón eliminar nativo */
.wishlist_table td.product-add-to-cart > *:not(.wcfm-wl-wa-btn):not(.remove_from_wishlist) {
	display: none !important;
}

/* Ancho y centrado de la columna WhatsApp (WA pill + tacho derecho) */
.wishlist_table th.product-add-to-cart,
.wishlist_table td.product-add-to-cart {
	text-align:     center;
	width:          175px;
	min-width:      155px;
	vertical-align: middle;
	white-space:    nowrap;   /* evita que los dos elementos salten de línea */
}

/* --------------------------------------------------------------------------
   3. Columna Eliminar — ocultar texto de los botones nativos, reemplazado
      por SVG de basura vía JS en ambos tachos (izq. y der.)
   -------------------------------------------------------------------------- */

.wishlist_table th.product-remove,
.wishlist_table td.product-remove {
	width:          44px;
	min-width:      40px;
	text-align:     center;
	vertical-align: middle;
}

/* Tacho izquierdo (producto-remove) — base */
.wishlist_table td.product-remove a {
	display:          inline-flex !important;
	align-items:      center !important;
	justify-content:  center !important;
	width:            32px !important;
	height:           32px !important;
	border-radius:    50% !important;
	background-color: #fff0f0 !important;
	color:            #ef9a9a !important;
	text-decoration:  none !important;
	font-size:        0 !important;
	border:           1.5px solid #ffcdd2 !important;
	transition:       background-color 0.2s ease,
	                  color            0.2s ease,
	                  border-color     0.2s ease,
	                  transform        0.15s ease;
}

.wishlist_table td.product-remove a:hover,
.wishlist_table td.product-remove a:focus {
	background-color: #ffe0e0 !important;
	color:            #e53935 !important;
	border-color:     #e53935 !important;
	transform:        scale(1.1);
	outline:          none;
}

/* Icono basura SVG inyectado por JS dentro del tacho izquierdo */
.wishlist_table td.product-remove a .wcfm-wl-trash-icon {
	width:          14px !important;
	height:         14px !important;
	display:        block !important;
	pointer-events: none;
}

/* Tacho derecho nativo de YITH (repeat_remove_button) — dentro de celda WhatsApp.
   Usa background-image SVG como método primario (evita conflictos con .button de YITH
   y no depende de timing JS). */
.wishlist_table td.product-add-to-cart a.remove_from_wishlist {
	display:             inline-flex !important;
	align-items:         center !important;
	justify-content:     center !important;
	width:               32px !important;
	height:              32px !important;
	border-radius:       50% !important;
	background-color:    #fff0f0 !important;
	background-image:    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3h6l1 1h4v2H4V4h4l1-1zm1 5h1v9H10V8zm3 0h1v9h-1V8zM5 7h14l-1.4 14H6.4L5 7z' fill='%23ef9a9a'/%3E%3C/svg%3E") !important;
	background-size:     14px 14px !important;
	background-repeat:   no-repeat !important;
	background-position: center !important;
	border:              1.5px solid #ffcdd2 !important;
	color:               transparent !important;   /* oculta texto "Remove" sin font-size:0 */
	text-decoration:     none !important;
	font-size:           0 !important;             /* doble seguro para texto */
	padding:             0 !important;             /* anula padding de .button nativo */
	margin-left:         6px !important;           /* separación del botón WA */
	vertical-align:      middle !important;
	transition:          background-color 0.2s ease,
	                     border-color     0.2s ease,
	                     transform        0.15s ease;
}

.wishlist_table td.product-add-to-cart a.remove_from_wishlist:hover,
.wishlist_table td.product-add-to-cart a.remove_from_wishlist:focus {
	background-color:  #ffe0e0 !important;
	background-image:  url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3h6l1 1h4v2H4V4h4l1-1zm1 5h1v9H10V8zm3 0h1v9h-1V8zM5 7h14l-1.4 14H6.4L5 7z' fill='%23e53935'/%3E%3C/svg%3E") !important;
	border-color:      #e53935 !important;
	transform:         scale(1.1);
	outline:           none;
}

/* --------------------------------------------------------------------------
   4. Alineación de columnas — Nombre a la izquierda, Precio a la derecha
   -------------------------------------------------------------------------- */

.wishlist_table th.product-name {
	text-align:   left !important;
	padding-left: 8px !important;
}

.wishlist_table td.product-name {
	text-align: left;
}

.wishlist_table th.product-price,
.wishlist_table td.product-price {
	text-align:    right;
	padding-right: 16px !important;
}

/* --------------------------------------------------------------------------
   6. Fila separadora de tienda — header por vendor
   -------------------------------------------------------------------------- */

.wcfm-wl-vendor-header {
	background: linear-gradient(90deg, #f0faf4 0%, #fafafa 100%);
	border-top:    2px solid #25D366;
	border-bottom: 1px solid #d4edda;
}

.wcfm-wl-vendor-header td {
	padding:        12px 16px !important;
	border:         none !important;
	vertical-align: middle !important;
}

.wcfm-wl-vendor-header-inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             12px;
	flex-wrap:       wrap;
}

.wcfm-wl-vendor-name {
	font-size:      0.88rem;
	font-weight:    700;
	color:          #1a7a3f;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   7. Botón "Encargar todo" (bulk) — pill destacado a la derecha del header
   -------------------------------------------------------------------------- */

.wcfm-wl-wa-btn--bulk {
	display:          inline-flex;
	align-items:      center;
	gap:              7px;
	padding:          8px 20px;
	border-radius:    22px;
	background-color: #25D366;
	color:            #fff;
	font-size:        0.82rem;
	font-weight:      700;
	text-decoration:  none;
	white-space:      nowrap;
	border:           none;
	cursor:           pointer;
	line-height:      1.4;
	letter-spacing:   0.02em;
	box-shadow:       0 2px 10px rgba(37, 211, 102, 0.4);
	transition:       background-color 0.2s ease,
	                  transform        0.15s ease,
	                  box-shadow       0.2s ease;
}

.wcfm-wl-wa-btn--bulk:hover,
.wcfm-wl-wa-btn--bulk:focus {
	background-color: #1ebe5d;
	color:            #fff;
	transform:        translateY(-1px);
	box-shadow:       0 4px 16px rgba(37, 211, 102, 0.55);
	outline:          none;
}

.wcfm-wl-wa-btn--bulk svg {
	width:       15px;
	height:      15px;
	flex-shrink: 0;
	display:     block;
}

/* --------------------------------------------------------------------------
   8. Responsive — tabla con scroll horizontal en mobile (seguro con YITH)
   -------------------------------------------------------------------------- */

/* Wrapper de scroll horizontal si YITH no lo tiene ya */
.wcfm-wl-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
	/* Scroll horizontal en la tabla directamente como fallback */
	.wishlist_table {
		display:   block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Ocultar columna thumbnail — libera ~80px */
	.wishlist_table th.product-thumbnail,
	.wishlist_table td.product-thumbnail {
		display: none !important;
	}

	/* Reducir padding general para compactar */
	.wishlist_table th,
	.wishlist_table td {
		padding: 8px 6px !important;
	}

	/* Botón WA: mostrar solo ícono en mobile para ahorrar espacio */
	.wcfm-wl-wa-btn--individual {
		padding: 7px 10px;
	}

	.wcfm-wl-wa-btn-text {
		display: none;
	}

	/* Botón bulk: más compacto */
	.wcfm-wl-wa-btn--bulk {
		font-size: 0.75rem;
		padding:   7px 12px;
	}

	/* Header de vendor más compacto */
	.wcfm-wl-vendor-header td {
		padding: 10px 10px !important;
	}

	/* Precio sin tanto padding a la derecha */
	.wishlist_table th.product-price,
	.wishlist_table td.product-price {
		padding-right: 6px !important;
	}
}