/* WaitWhatWeb Stamp Loyalty System — public + admin styles */

:root {
	--wws-primary: #6c4bf4;
	--wws-primary-dark: #4c2fd6;
	--wws-success: #1ba97e;
	--wws-danger: #e2523d;
	--wws-bg-light: #f7f6fb;
	--wws-text: #1f1b2e;
	--wws-muted: #7a7690;
	--wws-radius: 16px;
}

/* ---------- Notices ---------- */
.wws-notice {
	padding: 14px 18px;
	border-radius: 10px;
	background: var(--wws-bg-light);
	color: var(--wws-text);
	margin-bottom: 16px;
}
.wws-notice--info { border-left: 4px solid var(--wws-primary); }

/* ---------- Stamp Card ---------- */
.wws-stamp-card {
	position: relative;
	background: linear-gradient(135deg, var(--wws-primary), var(--wws-primary-dark));
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: 28px;
	margin-bottom: 24px;
	box-shadow: 0 10px 30px rgba(76, 47, 214, 0.25);
	overflow: hidden;
}

.wws-stamp-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}

.wws-stamp-card__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.wws-stamp-card__count {
	text-align: right;
}

.wws-stamp-card__balance {
	font-size: 32px;
	font-weight: 800;
	display: block;
	line-height: 1;
}

.wws-stamp-card__label {
	font-size: 12px;
	text-transform: uppercase;
	opacity: 0.85;
	letter-spacing: 0.08em;
}

.wws-progress {
	background: rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
	margin-bottom: 8px;
}

.wws-progress--small {
	height: 6px;
}

.wws-progress__bar {
	height: 100%;
	background: #fff;
	border-radius: 999px;
	transition: width 0.4s ease;
}

.wws-progress__text {
	font-size: 13px;
	opacity: 0.9;
	margin: 0 0 18px;
}

.wws-stamp-grid {
	display: grid;
	grid-template-columns: repeat(var(--wws-per-row, 5), 1fr);
	gap: 12px;
}

.wws-layout-row .wws-stamp-grid {
	grid-auto-flow: column;
	grid-template-columns: none;
	overflow-x: auto;
	padding-bottom: 6px;
}

.wws-stamp-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wws-stamp-size, 48px);
	height: var(--wws-stamp-size, 48px);
}

.wws-stamp-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 50%;
}

.wws-stamp-fallback {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: block;
}

.wws-stamp-fallback--active {
	background: #fff;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.wws-stamp-fallback--empty {
	background: rgba(255, 255, 255, 0.15);
	border: 2px dashed rgba(255, 255, 255, 0.4);
}

/* ---------- History ---------- */
.wws-history,
.wws-rewards {
	background: #fff;
	border-radius: var(--wws-radius);
	padding: 4px 0 24px;
}

.wws-history__title,
.wws-rewards__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--wws-text);
	margin: 24px 0 12px;
}

.wws-history__table,
.wws-rewards table.wws-history__table {
	width: 100%;
	border-collapse: collapse;
}

.wws-history__table th,
.wws-history__table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid #ece9f5;
	font-size: 14px;
	color: var(--wws-text);
}

.wws-history__desc {
	color: var(--wws-muted);
	font-size: 12px;
	margin-top: 2px;
}

.wws-history__amount--positive { color: var(--wws-success); font-weight: 700; }
.wws-history__amount--negative { color: var(--wws-danger); font-weight: 700; }

.wws-empty {
	color: var(--wws-muted);
	font-style: italic;
}

/* ---------- Rewards grid ---------- */
.wws-rewards__balance {
	color: var(--wws-muted);
	margin-bottom: 16px;
}

.wws-reward-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 18px;
}

.wws-reward-card {
	border: 1px solid #ece9f5;
	border-radius: var(--wws-radius);
	overflow: hidden;
	background: #fff;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wws-reward-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(31, 27, 46, 0.08);
}

.wws-reward-card__banner img {
	width: 100%;
	display: block;
	height: 120px;
	object-fit: cover;
}

.wws-reward-card__body {
	padding: 16px;
}

.wws-reward-card__image {
	width: 44px;
	height: 44px;
	object-fit: contain;
	margin-bottom: 8px;
}

.wws-reward-card__name {
	margin: 0 0 6px;
	font-size: 16px;
	color: var(--wws-text);
}

.wws-reward-card__desc {
	font-size: 13px;
	color: var(--wws-muted);
	margin-bottom: 12px;
}

.wws-reward-card__requirement {
	font-size: 12px;
	color: var(--wws-muted);
	margin: 6px 0 14px;
}

/* ---------- Buttons ---------- */
.wws-btn {
	display: inline-block;
	border: none;
	border-radius: 999px;
	padding: 10px 20px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.wws-btn--redeem,
.wws-btn--primary {
	background: var(--wws-primary);
	color: #fff;
	width: 100%;
}

.wws-btn--redeem:hover,
.wws-btn--primary:hover {
	background: var(--wws-primary-dark);
}

.wws-btn--redeem:disabled {
	background: #ddd8ea;
	color: #9992b3;
	cursor: not-allowed;
}

.wws-btn--secondary {
	background: #f0eef8;
	color: var(--wws-text);
}

/* ---------- Badges ---------- */
.wws-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.wws-badge--active,
.wws-badge--completed { background: #e4f8f1; color: var(--wws-success); }
.wws-badge--disabled,
.wws-badge--cancelled { background: #f2f0f7; color: var(--wws-muted); }
.wws-badge--expired { background: #fdeceb; color: var(--wws-danger); }
.wws-badge--pending { background: #fff6e0; color: #b8860b; }

/* ---------- Modal ---------- */
.wws-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
}

.wws-modal.is-open {
	display: flex;
}

.wws-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(31, 27, 46, 0.55);
}

.wws-modal__panel {
	position: relative;
	background: #fff;
	border-radius: var(--wws-radius);
	padding: 28px;
	max-width: 420px;
	width: 90%;
	text-align: center;
	animation: wws-pop 0.2s ease;
}

@keyframes wws-pop {
	from { transform: scale(0.92); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

.wws-modal__close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 22px;
	cursor: pointer;
	color: var(--wws-muted);
}

.wws-modal__message--error {
	color: var(--wws-danger);
}

.wws-modal__coupon {
	background: var(--wws-bg-light);
	border: 1px dashed var(--wws-primary);
	border-radius: 10px;
	padding: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.wws-modal__actions {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.wws-modal__actions .wws-btn {
	flex: 1;
}

.wws-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #ece9f5;
	border-top-color: var(--wws-primary);
	border-radius: 50%;
	margin: 0 auto 12px;
	animation: wws-spin 0.7s linear infinite;
}

@keyframes wws-spin {
	to { transform: rotate(360deg); }
}

/* ---------- Admin ---------- */
.wws-admin-columns {
	display: flex;
	gap: 24px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.wws-admin-col--form { flex: 1 1 380px; max-width: 480px; }
.wws-admin-col--list { flex: 2 1 520px; }

.wws-postbox {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 6px;
}

.wws-media-picker .wws-media-preview img {
	max-width: 100px;
	max-height: 100px;
	display: block;
	margin-bottom: 8px;
	border-radius: 6px;
}

.wws-delete-link {
	color: var(--wws-danger);
}

@media (max-width: 782px) {
	.wws-reward-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
	.wws-reward-grid { grid-template-columns: 1fr; }
	.wws-stamp-card { padding: 20px; }
}