/* WSD Loyalty Points – storefront. Colors can be overridden with the CSS variables below. */
:root {
	--wsdlp-accent: #7f54b3;
	--wsdlp-bg: #f7f3fb;
	--wsdlp-border: #e4d9f1;
	--wsdlp-text: inherit;
	--wsdlp-muted: #6b6b76;
	--wsdlp-plus: #1a7f37;
	--wsdlp-minus: #b42318;
	--wsdlp-radius: 8px;
}

.wsdlp-notice,
.wsdlp-redeem {
	display: block;
	background: var(--wsdlp-bg);
	border: 1px solid var(--wsdlp-border);
	border-left: 4px solid var(--wsdlp-accent);
	border-radius: var(--wsdlp-radius);
	padding: 12px 16px;
	margin: 0 0 16px;
	color: var(--wsdlp-text);
	line-height: 1.5;
}
.wsdlp-icon { color: var(--wsdlp-accent); margin-right: 4px; }
.wsdlp-product { margin: 12px 0 18px; }
.wsdlp-cart { margin-bottom: 20px; }

.wsdlp-redeem form { margin: 0; }
.wsdlp-redeem .wsdlp-text { margin: 0 0 10px; }
.wsdlp-redeem--applied form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; }
.wsdlp-redeem--applied .wsdlp-text { margin: 0; }
.wsdlp-redeem--info { border-left-color: var(--wsdlp-muted); }
.wsdlp-redeem-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.wsdlp-range { flex: 1 1 180px; accent-color: var(--wsdlp-accent); }
.wsdlp-redeem input.wsdlp-points { width: 110px; flex: 0 0 auto; }
.wsdlp-preview { font-weight: 600; min-width: 70px; }
.wsdlp-btn-link { white-space: nowrap; }

.wsdlp-badge {
	display: inline-block;
	font-size: .8em;
	color: var(--wsdlp-accent);
	background: var(--wsdlp-bg);
	border-radius: 999px;
	padding: 1px 8px;
	margin: 4px 0;
}

/* My account */
.wsdlp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
.wsdlp-card {
	border: 1px solid var(--wsdlp-border);
	border-radius: var(--wsdlp-radius);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.wsdlp-card--primary { background: var(--wsdlp-accent); border-color: var(--wsdlp-accent); color: #fff; }
.wsdlp-card--primary .wsdlp-card__sub,
.wsdlp-card--primary .wsdlp-card__label { color: rgba(255,255,255,.85); }
.wsdlp-card--warn { border-left: 4px solid #d97706; }
.wsdlp-card__label { font-size: .85em; color: var(--wsdlp-muted); text-transform: uppercase; letter-spacing: .03em; }
.wsdlp-card__value { font-size: 1.8em; font-weight: 700; line-height: 1.2; }
.wsdlp-card__sub { font-size: .9em; color: var(--wsdlp-muted); }
.wsdlp-progress { height: 8px; background: var(--wsdlp-bg); border-radius: 999px; overflow: hidden; margin: 6px 0 2px; }
.wsdlp-progress span { display: block; height: 100%; background: var(--wsdlp-accent); border-radius: 999px; }

.wsdlp-ways { list-style: none; margin: 0 0 24px; padding: 0; border: 1px solid var(--wsdlp-border); border-radius: var(--wsdlp-radius); }
.wsdlp-ways li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--wsdlp-border); margin: 0; }
.wsdlp-ways li:last-child { border-bottom: 0; }
.wsdlp-ways strong { color: var(--wsdlp-accent); white-space: nowrap; }

.wsdlp-referral { background: var(--wsdlp-bg); border-radius: var(--wsdlp-radius); padding: 16px; margin-bottom: 24px; }
.wsdlp-referral h3 { margin-top: 0; }
.wsdlp-copy { display: flex; gap: 8px; }
.wsdlp-copy input { flex: 1; min-width: 0; }
.wsdlp-muted { color: var(--wsdlp-muted); font-size: .9em; }

.wsdlp-history .wsdlp-num { text-align: right; white-space: nowrap; }
.wsdlp-plus { color: var(--wsdlp-plus); font-weight: 600; }
.wsdlp-minus { color: var(--wsdlp-minus); font-weight: 600; }
.wsdlp-pagination { display: flex; justify-content: space-between; gap: 8px; }
.wsdlp-birthday select { width: auto; display: inline-block; }

.wsdlp-flash { border-radius: var(--wsdlp-radius); padding: 10px 14px; margin: 0 0 12px; font-weight: 600; }
.wsdlp-flash--success { background: #ecfdf3; color: #05603a; border: 1px solid #abefc6; }
.wsdlp-flash--error { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }