/* A Leaf Rewards — reuses the theme's brand variables where available,
   with plain fallbacks so the plugin still looks reasonable on any theme. */

.aleaf-wishlist-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,.92);
	color: var(--aleaf-gray, #6b7280);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
	cursor: pointer;
	transition: transform .15s ease, color .15s ease;
}
.aleaf-wishlist-btn svg { width: 18px; height: 18px; fill: none; }
.aleaf-wishlist-btn:hover { transform: scale(1.08); }
.aleaf-wishlist-btn.is-active { color: var(--aleaf-red, #d9483c); }
.aleaf-wishlist-btn.is-active svg { fill: currentColor; }

.aleaf-product-card__image { position: relative; }

.aleaf-wishlist-single { margin: 14px 0; }
.aleaf-wishlist-single .aleaf-wishlist-btn {
	position: static;
	width: auto;
	height: auto;
	border-radius: 999px;
	padding: 10px 18px;
	box-shadow: none;
	border: 1px solid var(--aleaf-border, #e5e0d5);
	gap: 8px;
	display: inline-flex;
}
.aleaf-wishlist-single .aleaf-wishlist-btn svg { width: 16px; height: 16px; }
.aleaf-wishlist-single .aleaf-wishlist-btn::after { content: "Lưu vào yêu thích"; font-size: 13px; font-weight: 600; margin-left: 2px; }
.aleaf-wishlist-single .aleaf-wishlist-btn.is-active::after { content: "Đã lưu yêu thích"; }

/* ---- Cart page points redeem widget ------------------------------- */
.aleaf-points-redeem {
	background: var(--aleaf-cream, #fff6ee);
	border: 1px solid var(--aleaf-border, #eaddd0);
	border-radius: var(--aleaf-radius, 10px);
	padding: 16px;
	margin-bottom: 18px;
}
.aleaf-points-redeem__label { font-weight: 700; margin: 0 0 10px; font-size: 14px; }
.aleaf-points-redeem__form { display: flex; gap: 8px; }
.aleaf-points-redeem__form input { flex: 1; padding: 10px 12px; border: 1px solid var(--aleaf-border, #eaddd0); border-radius: 8px; }
.aleaf-points-redeem__active { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; margin: 0; color: var(--aleaf-primary, #fc6a03); font-weight: 700; }
.aleaf-points-redeem__cancel { border: none; background: none; text-decoration: underline; cursor: pointer; font-weight: 600; color: var(--aleaf-gray, #6b7280); }
.aleaf-points-redeem__msg { font-size: 12.5px; color: var(--aleaf-red, #d9483c); margin: 8px 0 0; }

/* ---- Account dashboard --------------------------------------------- */
.aleaf-rewards-dashboard { max-width: 100%; }
.aleaf-rewards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 30px; }
@media (max-width: 900px) { .aleaf-rewards-grid { grid-template-columns: 1fr; } }

.aleaf-rewards-card {
	background: #fff;
	border: 1px solid var(--aleaf-border, #eaddd0);
	border-radius: var(--aleaf-radius, 10px);
	padding: 20px;
}
.aleaf-rewards-card__label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--aleaf-gray, #6b7280); font-weight: 700; margin-bottom: 10px; }
.aleaf-rewards-card__hint { font-size: 13px; color: var(--aleaf-gray, #6b7280); margin: 6px 0 10px; }
.aleaf-rewards-card__footnote { font-size: 12px; color: var(--aleaf-gray, #6b7280); margin-top: 14px; border-top: 1px dashed var(--aleaf-border, #eaddd0); padding-top: 10px; }

.aleaf-rewards-tier-badge {
	display: inline-block;
	font-size: 20px;
	font-weight: 800;
	padding: 6px 16px;
	border-radius: 999px;
	color: #fff;
	background: var(--tier-color, #6b7280);
}
.aleaf-rewards-progress__bar { height: 8px; background: var(--aleaf-gray-light, #f5efe7); border-radius: 999px; overflow: hidden; margin-top: 14px; }
.aleaf-rewards-progress__bar span { display: block; height: 100%; background: var(--tier-color, var(--aleaf-primary, #fc6a03)); border-radius: 999px; }
.aleaf-rewards-progress__text { font-size: 12.5px; color: var(--aleaf-gray, #6b7280); margin: 8px 0 0; }

.aleaf-rewards-points-balance { font-size: 30px; font-weight: 800; color: var(--aleaf-primary, #fc6a03); margin-bottom: 4px; }
.aleaf-rewards-points-balance span { font-size: 14px; font-weight: 600; color: var(--aleaf-dark, #241c15); }

.aleaf-rewards-history { list-style: none; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--aleaf-border, #eaddd0); max-height: 220px; overflow-y: auto; }
.aleaf-rewards-history li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 6px 0; }
.aleaf-rewards-history__reason { color: var(--aleaf-gray, #6b7280); }
.aleaf-rewards-history__delta { font-weight: 700; white-space: nowrap; }
.aleaf-rewards-history__delta.is-positive { color: #1f8a4c; }
.aleaf-rewards-history__delta.is-negative { color: var(--aleaf-red, #d9483c); }

.aleaf-rewards-referral-link { display: flex; gap: 8px; margin-top: 4px; }
.aleaf-rewards-referral-link input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--aleaf-border, #eaddd0); border-radius: 8px; font-size: 12.5px; color: var(--aleaf-gray, #6b7280); }

.aleaf-rewards-section { margin-bottom: 30px; }
.aleaf-rewards-section h3 { font-size: 17px; margin-bottom: 14px; }
.aleaf-rewards-empty { color: var(--aleaf-gray, #6b7280); font-size: 13.5px; }

.aleaf-rewards-wishlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.aleaf-rewards-wishlist-item { display: block; border: 1px solid var(--aleaf-border, #eaddd0); border-radius: var(--aleaf-radius, 10px); overflow: hidden; color: inherit; }
.aleaf-rewards-wishlist-item img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.aleaf-rewards-wishlist-item__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; font-weight: 600; padding: 8px 10px 2px; }
.aleaf-rewards-wishlist-item__price { display: block; padding: 0 10px 10px; font-size: 13px; font-weight: 700; color: var(--aleaf-red, #d9483c); }

.aleaf-rewards-tier-table table { width: 100%; border-collapse: collapse; }
.aleaf-rewards-tier-table th, .aleaf-rewards-tier-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--aleaf-border, #eaddd0); font-size: 13.5px; }
.aleaf-rewards-tier-table tr.is-current { background: var(--aleaf-cream, #fff6ee); font-weight: 700; }
.aleaf-rewards-tier-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }