/* =============================================================================================================
 * Roblie Properties — YITH Native Wishlist ([yith_wcwl_wishlist]) Restyle
 * -----------------------------------------------------------------------------------------------------------
 * Pure CSS. Zero PHP. Does not touch rat_render_wishlist_button(), the archive template, content-product.php,
 * archive-property.css/js, price formatting, or anything else already working.
 *
 * Scoping strategy: every rule below is nested under .yith-wcwl-wishlist-container, which YITH itself wraps
 * around ALL of its [yith_wcwl_wishlist] output regardless of theme or page. This means these rules can only
 * ever affect the Saved Properties page — they cannot leak onto any other page on the site, without needing
 * to know that page's exact slug or body class.
 *
 * YITH's Remove control already exists natively in this shortcode's output (confirmed via the plugin's own
 * source: the link carries the classes "remove" and "remove_from_wishlist"). This file only styles it —
 * it does not add, duplicate, or replace any wishlist logic.
 *
 * Note: YITH's exact markup has evolved across plugin versions (older releases render a classic <table>,
 * newer releases can render a card/grid layout). The selectors below cover both patterns using the stable
 * class names YITH has kept across versions. If something still looks unstyled after deploying, inspect
 * that element and send me the exact class — I'll tighten the selector rather than guess further.
 * ============================================================================================================= */

.yith-wcwl-wishlist-container {
	--rat-navy: #0E2238;
	--rat-gold: #C8A15A;
	--rat-white: #FFFFFF;
	--rat-bg: #F8F8F8;
	--rat-border: #E5E5E5;
	--rat-text: #1F1F1F;
	--rat-text-secondary: #666666;
	--rat-radius: 14px;
	--rat-shadow: 0 6px 24px rgba(14, 34, 56, 0.08);
	--rat-transition: 0.3s ease;

	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 24px 70px;
	color: var(--rat-text);
}

/* -------------------------------------------------------------------------------------------------------------
 * Title / header row
 * ---------------------------------------------------------------------------------------------------------- */
.yith-wcwl-wishlist-container .wishlist-title,
.yith-wcwl-wishlist-container h2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.yith-wcwl-wishlist-container .wishlist-title h2,
.yith-wcwl-wishlist-container > h2 {
	color: var(--rat-navy);
	font-weight: 700;
	font-size: 26px;
	margin: 0;
}

.yith-wcwl-wishlist-container .wishlist-title .show-title-form,
.yith-wcwl-wishlist-container .yith-wcwl-share {
	color: var(--rat-navy);
}

/* -------------------------------------------------------------------------------------------------------------
 * Table layout (classic YITH template: table.wishlist_table)
 * ---------------------------------------------------------------------------------------------------------- */
.yith-wcwl-wishlist-container table.wishlist_table,
.yith-wcwl-wishlist-container table.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: var(--rat-white);
	border: 1px solid var(--rat-border);
	border-radius: var(--rat-radius);
	overflow: hidden;
	box-shadow: var(--rat-shadow);
}

.yith-wcwl-wishlist-container table.wishlist_table thead th,
.yith-wcwl-wishlist-container table.shop_table thead th {
	background: var(--rat-navy);
	color: var(--rat-white);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.04em;
	font-weight: 600;
	padding: 16px;
	text-align: left;
}

.yith-wcwl-wishlist-container table.wishlist_table tbody td,
.yith-wcwl-wishlist-container table.shop_table tbody td {
	padding: 18px 16px;
	border-top: 1px solid var(--rat-border);
	vertical-align: middle;
	color: var(--rat-text);
}

.yith-wcwl-wishlist-container table.wishlist_table tbody tr:hover,
.yith-wcwl-wishlist-container table.shop_table tbody tr:hover {
	background: var(--rat-bg);
}

.yith-wcwl-wishlist-container .product-thumbnail img {
	border-radius: 10px;
	width: 80px;
	height: 80px;
	object-fit: cover;
}

.yith-wcwl-wishlist-container .product-name a {
	color: var(--rat-navy);
	font-weight: 600;
	text-decoration: none;
}

.yith-wcwl-wishlist-container .product-name a:hover {
	color: var(--rat-gold);
}

.yith-wcwl-wishlist-container .product-price {
	color: var(--rat-navy);
	font-weight: 700;
}

.yith-wcwl-wishlist-container .product-stock-status .stock {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 5px 12px;
	border-radius: 999px;
}

.yith-wcwl-wishlist-container .product-stock-status .stock.in-stock {
	background: rgba(200, 161, 90, 0.15);
	color: var(--rat-navy);
}

.yith-wcwl-wishlist-container .product-stock-status .stock.out-of-stock {
	background: #FBEAEA;
	color: #B3221E;
}

/* -------------------------------------------------------------------------------------------------------------
 * "Add to cart" inside the wishlist row — reuse the same navy → gold button language as the rest of the site
 * ---------------------------------------------------------------------------------------------------------- */
.yith-wcwl-wishlist-container .product-add-to-cart a.button,
.yith-wcwl-wishlist-container .add_to_cart_button,
.yith-wcwl-wishlist-container a.button.add-to-cart {
	display: inline-block;
	background: var(--rat-navy) !important;
	color: var(--rat-white) !important;
	border: none !important;
	padding: 10px 22px !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	font-size: 12.5px !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background var(--rat-transition), color var(--rat-transition);
}

.yith-wcwl-wishlist-container .product-add-to-cart a.button:hover,
.yith-wcwl-wishlist-container .add_to_cart_button:hover,
.yith-wcwl-wishlist-container a.button.add-to-cart:hover {
	background: var(--rat-gold) !important;
	color: var(--rat-navy) !important;
}

/* -------------------------------------------------------------------------------------------------------------
 * Remove control — YITH's native .remove_from_wishlist / .product-remove link, restyled as a small circular
 * navy button that fills gold on hover. This is the ONLY new visual treatment added; the click behavior and
 * underlying removal are entirely YITH's own, unchanged.
 * ---------------------------------------------------------------------------------------------------------- */
.yith-wcwl-wishlist-container .product-remove a.remove_from_wishlist,
.yith-wcwl-wishlist-container a.remove_from_wishlist,
.yith-wcwl-wishlist-container a.remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--rat-white) !important;
	border: 1.5px solid var(--rat-navy) !important;
	color: var(--rat-navy) !important;
	font-size: 16px;
	line-height: 1;
	text-decoration: none !important;
	transition: background var(--rat-transition), color var(--rat-transition), transform var(--rat-transition);
}

.yith-wcwl-wishlist-container .product-remove a.remove_from_wishlist:hover,
.yith-wcwl-wishlist-container a.remove_from_wishlist:hover,
.yith-wcwl-wishlist-container a.remove:hover {
	background: var(--rat-gold) !important;
	border-color: var(--rat-gold) !important;
	color: var(--rat-navy) !important;
	transform: scale(1.08);
}

/* -------------------------------------------------------------------------------------------------------------
 * Modern YITH card/grid layout (some plugin versions render products as cards rather than table rows)
 * ---------------------------------------------------------------------------------------------------------- */
.yith-wcwl-wishlist-container .wishlist-items-wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.yith-wcwl-wishlist-container .wishlist-items-wrapper .wishlist-item,
.yith-wcwl-wishlist-container .wishlist-items-wrapper .item {
	background: var(--rat-white);
	border: 1px solid var(--rat-border);
	border-radius: var(--rat-radius);
	box-shadow: var(--rat-shadow);
	overflow: hidden;
}

/* -------------------------------------------------------------------------------------------------------------
 * Responsive — stack the table into cards on smaller screens, matching the rest of the site's breakpoints
 * ---------------------------------------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.yith-wcwl-wishlist-container {
		padding: 16px 16px 50px;
	}

	.yith-wcwl-wishlist-container .wishlist-items-wrapper {
		grid-template-columns: repeat(2, 1fr);
	}

	.yith-wcwl-wishlist-container table.wishlist_table thead,
	.yith-wcwl-wishlist-container table.shop_table thead {
		display: none;
	}

	.yith-wcwl-wishlist-container table.wishlist_table,
	.yith-wcwl-wishlist-container table.wishlist_table tbody,
	.yith-wcwl-wishlist-container table.wishlist_table tr,
	.yith-wcwl-wishlist-container table.wishlist_table td,
	.yith-wcwl-wishlist-container table.shop_table,
	.yith-wcwl-wishlist-container table.shop_table tbody,
	.yith-wcwl-wishlist-container table.shop_table tr,
	.yith-wcwl-wishlist-container table.shop_table td {
		display: block;
		width: 100%;
	}

	.yith-wcwl-wishlist-container table.wishlist_table tr,
	.yith-wcwl-wishlist-container table.shop_table tr {
		margin-bottom: 20px;
		border: 1px solid var(--rat-border);
		border-radius: var(--rat-radius);
		box-shadow: var(--rat-shadow);
		padding: 16px;
	}

	.yith-wcwl-wishlist-container table.wishlist_table td,
	.yith-wcwl-wishlist-container table.shop_table td {
		border-top: none;
		padding: 8px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	.yith-wcwl-wishlist-container table.wishlist_table td[data-title]::before,
	.yith-wcwl-wishlist-container table.shop_table td[data-title]::before {
		content: attr(data-title);
		font-weight: 600;
		color: var(--rat-navy);
		text-transform: uppercase;
		font-size: 11px;
		letter-spacing: 0.03em;
	}
}

@media (max-width: 600px) {
	.yith-wcwl-wishlist-container .wishlist-items-wrapper {
		grid-template-columns: 1fr;
	}
}