/* Wishlist Module — Frontend Styles */

/* ─── Button Wrapper ─── */
.jwp-stk-wl-btn-wrap {
	display: block;
	width: 100%;
}

.jwp-stk-wl-btn-wrap--left {
	text-align: left;
}

.jwp-stk-wl-btn-wrap--center {
	text-align: center;
}

.jwp-stk-wl-btn-wrap--right {
	text-align: right;
}

/* ─── Wishlist Button ─── */
.jwp-stk-wishlist-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 6px 4px 0;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.jwp-stk-wishlist-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Icon variants */
.jwp-stk-wl-icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	vertical-align: middle;
	transition: fill 0.2s ease;
}

.jwp-stk-wishlist-btn.is-wishlisted .jwp-stk-wl-icon {
	fill: currentColor;
}

/* Size variants */
.jwp-stk-wl-btn--small {
	font-size: 11px;
	padding: 4px 10px;
}

.jwp-stk-wl-btn--large {
	font-size: 15px;
	padding: 10px 22px;
}

/* icon-only button */
.jwp-stk-wl-btn--icon {
	background: none;
	border: none;
	padding: 6px;
}

/* Product page context */
.jwp-stk-wl-ctx--product {
	margin-top: 12px;
	margin-bottom: 4px;
}

/* ─── Wishlist Table ─── */
.jwp-stk-wishlist-wrap {
	width: 100%;
}

.jwp-stk-wishlist-shared-notice {
	padding: 10px 14px;
	background: #f0f6ff;
	border-left: 4px solid #0073aa;
	margin-bottom: 16px;
	font-size: 14px;
}

.jwp-stk-wishlist-empty {
	padding: 24px 0;
	font-size: 15px;
	color: #555;
}

.jwp-stk-wishlist-empty a {
	margin-left: 8px;
}

.jwp-stk-wishlist-table {
	width: 100%;
	border-collapse: collapse;
}

.jwp-stk-wishlist-table th,
.jwp-stk-wishlist-table td {
	padding: 12px 10px;
	vertical-align: middle;
	border-bottom: 1px solid #e5e5e5;
	text-align: left;
}

.jwp-stk-wishlist-table thead th {
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #666;
}

/* Column widths */
.jwp-stk-wl-col-image {
	width: 80px;
}

.jwp-stk-wl-col-image img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.jwp-stk-wl-col-name a {
	font-weight: 500;
	color: inherit;
	text-decoration: none;
}

.jwp-stk-wl-col-name a:hover {
	text-decoration: underline;
}

.jwp-stk-wl-col-price {
	white-space: nowrap;
}

.jwp-stk-wl-col-stock ins {
	text-decoration: none;
}

.jwp-stk-wl-col-actions .button {
	white-space: nowrap;
}

.jwp-stk-wl-col-remove {
	width: 40px;
	text-align: center;
}

/* Remove button */
.jwp-stk-wl-remove-btn {
	background: none;
	border: none;
	cursor: pointer;
	color: #999;
	padding: 4px;
	line-height: 1;
	transition: color 0.15s ease;
}

.jwp-stk-wl-remove-btn:hover {
	color: #c0392b;
}

/* Row removal animation */
.jwp-stk-wl-row {
	transition: opacity 0.3s ease;
}

.jwp-stk-wl-row.is-removing {
	opacity: 0;
}

/* Unavailable label */
.jwp-stk-wl-unavailable {
	color: #999;
	font-size: 13px;
}

/* ─── Share section ─── */
.jwp-stk-wl-footer {
	margin-top: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.jwp-stk-wl-share-url-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 260px;
}

.jwp-stk-wl-share-url {
	flex: 1;
	font-size: 13px;
	padding: 6px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #f9f9f9;
	color: #333;
}

.jwp-stk-wl-copy-url {
	white-space: nowrap;
}

/* ─── Loading spinner ─── */
.jwp-stk-wishlist-btn.is-loading .jwp-stk-wl-icon,
.jwp-stk-wishlist-btn.is-loading .jwp-stk-wl-btn-text {
	opacity: 0.5;
}

/* ─── Button Type ─── */
.jwp-stk-wl-btn--outline {
	background-color: transparent !important;
	border: 2px solid currentColor;
}

/* Custom style — hover */
.jwp-stk-wl-btn-wrap--custom .jwp-stk-wishlist-btn:hover:not( :disabled ) {
	background-color: var( --jwp-wl-hover-bg, #555555 ) !important;
	color: var( --jwp-wl-hover-text, #ffffff ) !important;
	border-color: var( --jwp-wl-hover-bg, #555555 ) !important;
}