/* ============================================================================
   Save For Later — WoodMart-compatible styles
   ============================================================================ */

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
	--sfl-primary: #3e3e3e;
	--sfl-primary-hover: #222222;
	--sfl-link: #0066c0;
	--sfl-link-hover: #c45500;
	--sfl-red: #cc0c39;
	--sfl-green: #067d62;
	--sfl-orange: #e47911;
	--sfl-border: #e5e5e5;
	--sfl-bg: #ffffff;
	--sfl-bg-section: #fafafa;
	--sfl-text: #333333;
	--sfl-text-muted: #767676;
	--sfl-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	--sfl-radius: 8px;
	--sfl-transition: 0.25s ease;
}

/* ============================================================================
   1.  "Save for Later" link inside cart rows
   ============================================================================ */

.sfl-save-wrap {
	margin-top: 6px;
}

.sfl-save-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--sfl-link);
	text-decoration: none;
	cursor: pointer;
	transition: color var(--sfl-transition);
	border: none;
	background: none;
	padding: 2px 0;
}

.sfl-save-link:hover,
.sfl-save-link:focus {
	color: var(--sfl-link-hover);
	text-decoration: underline;
}

.sfl-save-link .sfl-save-icon {
	display: inline-flex;
	align-items: center;
}

.sfl-save-link .sfl-save-icon svg {
	width: 14px;
	height: 14px;
}

.sfl-save-link.sfl-loading {
	pointer-events: none;
	opacity: 0.6;
}

/* ============================================================================
   2.  "Saved for Later" section
   ============================================================================ */

.sfl-saved-section {
	margin-top: 40px;
	padding: 32px 0 20px;
	border-top: 2px solid var(--sfl-border);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.sfl-header {
	margin-bottom: 20px;
}

.sfl-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--sfl-text);
	margin: 0;
	line-height: 1.3;
}

.sfl-count {
	font-weight: 400;
	color: var(--sfl-text-muted);
	font-size: 17px;
	margin-inline-start: 4px;
}

/* ── Category tabs ──────────────────────────────────────────────────────── */

.sfl-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--sfl-border);
}

.sfl-tab {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--sfl-text);
	background: var(--sfl-bg);
	border: 1px solid var(--sfl-border);
	border-radius: 20px;
	cursor: pointer;
	transition: all var(--sfl-transition);
	white-space: nowrap;
}

.sfl-tab:hover {
	border-color: var(--sfl-primary);
	color: var(--sfl-primary);
}

.sfl-tab.sfl-tab-active {
	background: var(--sfl-primary);
	color: #ffffff;
	border-color: var(--sfl-primary);
}

/* ── Items Grid ─────────────────────────────────────────────────────────── */

.sfl-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

@media (max-width: 1024px) {
	.sfl-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.sfl-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.sfl-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Card ───────────────────────────────────────────────────────────────── */

.sfl-card {
	background: var(--sfl-bg);
	border: 1px solid var(--sfl-border);
	border-radius: var(--sfl-radius);
	overflow: hidden;
	box-shadow: var(--sfl-shadow);
	transition: box-shadow var(--sfl-transition), transform var(--sfl-transition), opacity var(--sfl-transition);
	display: flex;
	flex-direction: column;
}

.sfl-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

/* Fade-out animation */
.sfl-card.sfl-removing {
	opacity: 0;
	transform: scale(0.95);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Image */
.sfl-card-image {
	position: relative;
	overflow: hidden;
	background: #f8f8f8;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
}

.sfl-card-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.sfl-card-image img.sfl-card-img,
.sfl-card-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 12px;
	transition: transform var(--sfl-transition);
}

.sfl-card:hover .sfl-card-image img {
	transform: scale(1.05);
}

/* Body */
.sfl-card-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Title */
.sfl-card-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sfl-card-title a {
	color: var(--sfl-text);
	text-decoration: none;
	transition: color var(--sfl-transition);
}

.sfl-card-title a:hover {
	color: var(--sfl-link);
}

/* Price */
.sfl-card-price {
	font-size: 16px;
	font-weight: 700;
	color: var(--sfl-text);
	margin-bottom: 8px;
}

.sfl-card-price del {
	font-size: 13px;
	color: var(--sfl-text-muted);
	font-weight: 400;
}

.sfl-card-price ins {
	text-decoration: none;
	color: var(--sfl-red);
}

/* Attributes (variation info) */
.sfl-card-attributes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.sfl-attr {
	font-size: 12px;
	color: var(--sfl-text-muted);
	background: #f5f5f5;
	padding: 2px 8px;
	border-radius: 4px;
}

.sfl-attr strong {
	color: var(--sfl-text);
}

/* Stock badges */
.sfl-card-stock {
	margin-bottom: 12px;
}

.sfl-stock-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 12px;
}

.sfl-stock-in {
	background: #e6f7f2;
	color: var(--sfl-green);
}

.sfl-stock-out {
	background: #fde8ec;
	color: var(--sfl-red);
}

.sfl-stock-low {
	background: #fff4e5;
	color: var(--sfl-orange);
}

/* Actions */
.sfl-card-actions {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 12px;
	border-top: 1px solid #f0f0f0;
}

.sfl-move-to-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: none;
	color: #ffffff !important;
	background: var(--sfl-primary) !important;
	border: none !important;
	border-radius: 6px !important;
	cursor: pointer;
	transition: all var(--sfl-transition);
	line-height: 1.4;
}

.sfl-move-to-cart:hover {
	background: var(--sfl-primary-hover) !important;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.sfl-move-to-cart:disabled {
	background: #cccccc !important;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.sfl-move-to-cart.sfl-loading {
	pointer-events: none;
	opacity: 0.7;
}

.sfl-delete-item {
	display: inline-block;
	font-size: 12px;
	color: var(--sfl-text-muted);
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: color var(--sfl-transition);
}

.sfl-delete-item:hover {
	color: var(--sfl-red);
	text-decoration: underline;
}

/* ── Empty state ────────────────────────────────────────────────────────── */

.sfl-empty {
	text-align: center;
	padding: 48px 20px;
	color: var(--sfl-text-muted);
}

.sfl-empty-icon {
	margin-bottom: 12px;
}

.sfl-empty p {
	font-size: 15px;
	margin: 0;
}

/* ── Cart row fade-out ──────────────────────────────────────────────────── */

tr.cart_item.sfl-row-removing {
	opacity: 0;
	transform: translateX(20px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

/* ============================================================================
   3.  RTL support
   ============================================================================ */

html[dir="rtl"] .sfl-save-link {
	flex-direction: row-reverse;
}

html[dir="rtl"] tr.cart_item.sfl-row-removing {
	transform: translateX(-20px);
}

/* ============================================================================
   4.  WoodMart dark-mode compatibility
   ============================================================================ */

.woodmart-dark .sfl-saved-section,
.dark-version .sfl-saved-section {
	border-top-color: rgba(255, 255, 255, 0.1);
}

.woodmart-dark .sfl-card,
.dark-version .sfl-card {
	background: #2a2a2a;
	border-color: #3a3a3a;
}

.woodmart-dark .sfl-card-title a,
.dark-version .sfl-card-title a {
	color: #e0e0e0;
}

.woodmart-dark .sfl-card-price,
.dark-version .sfl-card-price {
	color: #e0e0e0;
}

.woodmart-dark .sfl-title,
.dark-version .sfl-title {
	color: #e0e0e0;
}

.woodmart-dark .sfl-tab,
.dark-version .sfl-tab {
	background: #2a2a2a;
	border-color: #3a3a3a;
	color: #ccc;
}

.woodmart-dark .sfl-attr,
.dark-version .sfl-attr {
	background: #333;
	color: #aaa;
}

.woodmart-dark .sfl-card-image,
.dark-version .sfl-card-image {
	background: #333;
}

/* ============================================================================
   5.  Print: hide saved section
   ============================================================================ */

@media print {
	.sfl-saved-section {
		display: none !important;
	}
}