/**
 * Tracksies Perks Frontend Styles
 *
 * @package Tracksies_Perks
 */

/* Points Redemption Box */
.tracksies-perks-redemption-box {
	background: color-mix(in srgb, var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F)) 6%, white);
	border: 1px solid color-mix(in srgb, var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F)) 20%, white);
	border-radius: var(--tracksies-radius-medium, 8px);
	padding: 20px;
	margin-bottom: 20px;
}

.perks-box-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 15px;
	flex-wrap: wrap;
}

.perks-icon {
	font-size: 28px;
	line-height: 1;
}

.perks-balance {
	font-size: 16px;
	color: var(--tracksies-color-text, #332927);
}

.perks-balance strong {
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	font-size: 18px;
}

.perks-redemption-options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.perks-redeem-btn {
	background: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	color: #fff;
	border: none;
	padding: 12px 20px;
	border-radius: var(--tracksies-radius-small, 4px);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}

.perks-redeem-btn:hover {
	filter: brightness(0.9);
	transform: translateY(-1px);
}

.perks-redeem-btn:focus-visible {
	outline: 2px solid var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	outline-offset: 2px;
}

.perks-redeem-btn:disabled {
	background: var(--tracksies-color-border, #e0e0e0);
	cursor: not-allowed;
	transform: none;
}

.perks-redeem-btn.redeeming {
	opacity: 0.7;
}

.perks-status {
	margin-top: 15px;
	padding: 10px 15px;
	border-radius: var(--tracksies-radius-small, 4px);
	font-size: 14px;
}

.perks-status.success {
	background: color-mix(in srgb, var(--tracksies-color-success, #7EB77F) 15%, white);
	color: var(--tracksies-color-success, #7EB77F);
	border: 1px solid color-mix(in srgb, var(--tracksies-color-success, #7EB77F) 25%, white);
}

.perks-status.error {
	background: color-mix(in srgb, var(--tracksies-color-error, #E34D4E) 15%, white);
	color: var(--tracksies-color-error, #E34D4E);
	border: 1px solid color-mix(in srgb, var(--tracksies-color-error, #E34D4E) 25%, white);
}

/* Balance Notice (below minimum) */
.tracksies-perks-balance-notice {
	background: var(--tracksies-color-surface, #F1F2F2);
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-small, 4px);
	padding: 15px 20px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.tracksies-perks-balance-notice .perks-text {
	color: var(--tracksies-color-text-light, #666);
}

.tracksies-perks-balance-notice .perks-text strong {
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
}

/* Coupons Box */
.tracksies-perks-coupons-box {
	background: var(--tracksies-color-surface, #fff);
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-medium, 8px);
	padding: 20px;
	margin-bottom: 20px;
}

.perks-coupons-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
}

.perks-coupons-header .perks-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--tracksies-color-text, #332927);
}

.perks-coupons-list {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

/* Coupon Card */
.perks-coupon-card {
	background: var(--tracksies-color-surface, #F1F2F2);
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-medium, 8px);
	padding: 15px;
	min-width: 200px;
	max-width: 280px;
	flex: 1;
	position: relative;
}

.coupon-category {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 3px 8px;
	border-radius: var(--tracksies-radius-small, 4px);
	background: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	color: #fff;
	margin-bottom: 8px;
}

.coupon-category-redemption {
	background: var(--tracksies-color-success, #7EB77F);
}

.coupon-category-vip {
	background: var(--tracksies-color-secondary, #2AA9A9);
}

.coupon-category-birthday {
	background: var(--tracksies-color-accent, #F4AF30);
}

.coupon-category-welcome {
	background: var(--tracksies-color-info, #3E7CB1);
}

.coupon-discount {
	font-size: 24px;
	font-weight: 700;
	color: var(--tracksies-color-success, #7EB77F);
	margin-bottom: 5px;
}

.coupon-message {
	font-size: 13px;
	color: var(--tracksies-color-text-light, #666);
	margin-bottom: 8px;
	line-height: 1.4;
}

.coupon-code {
	font-family: monospace;
	font-size: 13px;
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	background: var(--tracksies-color-surface, #F1F2F2);
	padding: 5px 10px;
	border-radius: var(--tracksies-radius-small, 4px);
	display: inline-block;
	margin-bottom: 8px;
}

.coupon-expiry {
	font-size: 12px;
	color: var(--tracksies-color-error, #E34D4E);
	margin-bottom: 10px;
}

.perks-apply-coupon-btn {
	width: 100%;
	background: var(--tracksies-color-success, #7EB77F) !important;
	color: #fff !important;
	border: none !important;
	padding: 10px !important;
	border-radius: var(--tracksies-radius-small, 4px);
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s;
}

.perks-apply-coupon-btn:hover {
	opacity: 0.9;
}

.perks-apply-coupon-btn:focus-visible {
	outline: 2px solid var(--tracksies-color-success, #7EB77F);
	outline-offset: 2px;
}

.perks-apply-coupon-btn.applied {
	background: var(--tracksies-color-text-light, #a0aec0) !important;
	cursor: default;
}

/* My Account Page */
.tracksies-perks-account {
	max-width: 800px;
}

.tracksies-perks-balance-card {
	background: var(--tracksies-color-surface, #fff);
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-large, 12px);
	padding: 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}

.balance-icon {
	font-size: 36px;
	line-height: 1;
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
}

.balance-info {
	flex: 1;
}

.balance-points {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--tracksies-color-text, #333);
}

.balance-label {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--tracksies-color-text-light, #666);
	margin-bottom: 2px;
}

.balance-value {
	font-size: 14px;
	color: var(--tracksies-color-text-light, #666);
}

/* Tier Card */
.tracksies-perks-tier-card {
	background: var(--tracksies-color-surface, #fff);
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-medium, 8px);
	padding: 20px;
	margin-bottom: 30px;
}

.tier-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 15px;
	flex-wrap: wrap;
}

.tier-badge {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 5px 14px;
	border-radius: var(--tracksies-radius-pill, 9999px);
	background: var(--tracksies-color-text-light, #a0aec0);
	color: #fff;
}

.tier-badge-bronze {
	background: var(--tracksies-perkie-tier-bronze, #b87333);
}

.tier-badge-silver {
	background: var(--tracksies-perkie-tier-silver, #a0aec0);
}

.tier-badge-gold {
	background: var(--tracksies-perkie-tier-gold, #d69e2e);
}

.tier-badge-vip {
	background: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
}

.tier-multiplier {
	font-size: 13px;
	font-weight: 600;
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	background: color-mix(in srgb, var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F)) 8%, white);
	padding: 4px 10px;
	border-radius: var(--tracksies-radius-small, 4px);
}

.tier-progress {
	margin-top: 5px;
}

.tier-progress-bar {
	background: var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-small, 4px);
	height: 10px;
	overflow: hidden;
	margin-bottom: 8px;
}

.tier-progress-fill {
	background: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	height: 100%;
	border-radius: var(--tracksies-radius-small, 4px);
	transition: width 0.6s ease;
	min-width: 2%;
}

.tier-progress-label {
	font-size: 13px;
	color: var(--tracksies-color-text-light, #666);
}

.tier-progress-label strong {
	color: var(--tracksies-color-text, #332927);
}

.tier-max {
	color: var(--tracksies-color-success, #7EB77F);
	font-weight: 600;
}

/* Shared card surface — balance, referral, birthday, personal-dates all
   read as a family of cards with icon on the left and content on the
   right. Add new cards here by adding their class to these selectors. */
.tracksies-perks-referral-card,
.tracksies-perks-birthday-card,
.tracksies-perks-personal-dates-card {
	background: var(--tracksies-color-surface, #fff);
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-large, 12px);
	padding: 24px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 24px;
}

.tracksies-perks-referral-card .card-icon,
.tracksies-perks-birthday-card .card-icon,
.tracksies-perks-personal-dates-card .card-icon {
	font-size: 36px;
	line-height: 1;
	flex-shrink: 0;
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
}

.tracksies-perks-referral-card .card-body,
.tracksies-perks-birthday-card .card-body,
.tracksies-perks-personal-dates-card .card-body {
	flex: 1;
	min-width: 0;
}

.tracksies-perks-referral-card h3,
.tracksies-perks-birthday-card h3,
.tracksies-perks-personal-dates-card h3 {
	margin-top: 0;
	margin-bottom: 10px;
}

.personal-dates-description {
	color: var(--tracksies-color-text, #332927);
	font-size: 14px;
	margin-bottom: 15px;
	line-height: 1.5;
}

.referral-description {
	color: var(--tracksies-color-text, #332927);
	font-size: 14px;
	margin-bottom: 15px;
	line-height: 1.5;
}

.referral-link-box {
	display: flex;
	gap: 8px;
	margin-bottom: 15px;
}

.referral-link-input {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-small, 4px);
	font-size: 14px;
	color: var(--tracksies-color-text, #332927);
	background: var(--tracksies-color-surface, #F1F2F2);
}

.perks-copy-link {
	white-space: nowrap;
}

.referral-share-buttons {
	display: flex;
	gap: 8px;
	margin-bottom: 15px;
	flex-wrap: wrap;
}

.referral-share-btn {
	display: inline-block;
	padding: 8px 16px;
	border-radius: var(--tracksies-radius-small, 4px);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	transition: opacity 0.2s;
}

.referral-share-btn:hover {
	opacity: 0.9;
	color: #fff;
}

.referral-share-email {
	background: var(--tracksies-color-text-light, #718096);
}

.referral-stats {
	display: flex;
	gap: 20px;
	padding-top: 15px;
	border-top: 1px solid var(--tracksies-color-border, #e0e0e0);
}

.referral-stat {
	display: flex;
	flex-direction: column;
}

.referral-stat .stat-value {
	font-size: 24px;
	font-weight: 700;
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
}

.referral-stat .stat-label {
	font-size: 12px;
	color: var(--tracksies-color-text-light, #666);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Clearance Referrals */
.tracksies-perks-clearance-referrals {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid var(--tracksies-color-border, #e0e0e0);
}

.tracksies-perks-clearance-referrals h4 {
	font-size: 13px;
	font-weight: 600;
	color: var(--tracksies-color-text-light, #666);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 10px 0;
}

.clearance-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	background: color-mix(in srgb, var(--tracksies-color-accent, #F4AF30) 8%, white);
	border: 1px solid color-mix(in srgb, var(--tracksies-color-accent, #F4AF30) 25%, white);
	border-radius: var(--tracksies-radius-small, 4px);
	margin-bottom: 6px;
	font-size: 14px;
}

.clearance-item:last-child {
	margin-bottom: 0;
}

.clearance-reward {
	font-weight: 600;
	color: var(--tracksies-color-text, #332927);
}

.clearance-date {
	font-size: 13px;
	color: var(--tracksies-color-text-light, #666);
}

/* Birthday Status / Nudge */
.tracksies-perks-birthday-nudge,
.tracksies-perks-birthday-status {
	display: flex;
	align-items: center;
	gap: 12px;
	background: color-mix(in srgb, var(--tracksies-color-accent, #F4AF30) 10%, white);
	border: 1px solid color-mix(in srgb, var(--tracksies-color-accent, #F4AF30) 25%, white);
	border-radius: var(--tracksies-radius-medium, 8px);
	padding: 16px 20px;
	margin-bottom: 30px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--tracksies-color-text, #332927);
}

.tracksies-perks-birthday-nudge .birthday-icon,
.tracksies-perks-birthday-status .birthday-icon {
	font-size: 24px;
	color: var(--tracksies-color-accent, #F4AF30);
	flex-shrink: 0;
}

.tracksies-perks-birthday-nudge a {
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	font-weight: 600;
	text-decoration: underline;
}

/* Birthday Field (My Account > Account Details) */
.tracksies-birthday-row .tracksies-birthday-selects {
	display: flex;
	gap: 10px;
}

.tracksies-birthday-row .tracksies-birthday-selects select {
	flex: 1;
	max-width: 180px;
}

/* Pending Rewards */
.tracksies-perks-pending {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
}

.pending-reward {
	background: color-mix(in srgb, var(--tracksies-color-success, #7EB77F) 8%, white);
	border: 1px solid color-mix(in srgb, var(--tracksies-color-success, #7EB77F) 30%, white);
	border-radius: var(--tracksies-radius-small, 4px);
	padding: 10px 15px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.reward-code {
	font-family: monospace;
	font-weight: 600;
	color: var(--tracksies-color-success, #7EB77F);
}

.reward-value {
	color: var(--tracksies-color-success, #7EB77F);
	font-weight: 600;
}

/* Points History */
.tracksies-perks-history {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.tracksies-perks-history th,
.tracksies-perks-history td {
	padding: 12px 15px;
	text-align: left;
	border-bottom: 1px solid var(--tracksies-color-border, #e0e0e0);
}

.tracksies-perks-history th {
	background: var(--tracksies-color-surface, #F1F2F2);
	font-weight: 600;
	color: var(--tracksies-color-text, #332927);
}

.tracksies-perks-history tr.earned .points-change {
	color: var(--tracksies-color-success, #7EB77F);
	font-weight: 600;
}

.tracksies-perks-history tr.spent .points-change {
	color: var(--tracksies-color-error, #E34D4E);
	font-weight: 600;
}

.multiplier-badge {
	display: inline-block;
	background: var(--tracksies-color-accent, #F4AF30);
	color: var(--tracksies-color-text, #332927);
	font-size: 11px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: var(--tracksies-radius-small, 4px);
	margin-left: 5px;
}

/* Product Page Earning Badge */
.tracksies-perks-product-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--tracksies-color-surface, #f1f0ec);
	border: 1px solid var(--tracksies-color-border, #e0d9d0);
	border-radius: var(--tracksies-radius-small, 4px);
	padding: 8px 14px;
	margin-top: 12px;
	font-size: 14px;
	color: var(--tracksies-color-text, #332927);
}

.tracksies-perks-product-badge strong {
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
}

.perks-product-icon {
	font-size: 16px;
	line-height: 1;
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
}

.perks-product-multiplier {
	font-size: 11px;
	font-weight: 700;
	background: var(--tracksies-color-accent, #F4AF30);
	color: var(--tracksies-color-text, #332927);
	padding: 2px 6px;
	border-radius: var(--tracksies-radius-small, 4px);
}

/* Cart/Checkout Earning Summary */
.tracksies-perks-cart-earning {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--tracksies-color-surface, #f1f0ec);
	border: 1px solid var(--tracksies-color-border, #e0d9d0);
	border-radius: var(--tracksies-radius-small, 4px);
	padding: 12px 16px;
	margin-top: 15px;
	font-size: 14px;
	color: var(--tracksies-color-text, #332927);
}

.tracksies-perks-cart-earning strong {
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
}

.tracksies-perks-checkout-earning td {
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	font-weight: 600;
}

.tracksies-perks-checkout-earning td .perks-product-icon {
	margin-right: 4px;
}

/* Guest Nudge */
.tracksies-perks-guest-nudge {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--tracksies-color-surface, #f1f0ec);
	border: 1px solid var(--tracksies-color-border, #e0d9d0);
	border-radius: var(--tracksies-radius-small, 4px);
	padding: 12px 16px;
	margin-top: 15px;
	font-size: 14px;
	color: var(--tracksies-color-text, #332927);
}

.tracksies-perks-guest-nudge a {
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	font-weight: 600;
	text-decoration: underline;
}

.tracksies-perks-guest-nudge strong {
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
}

.tracksies-perks-checkout-guest-nudge td {
	padding-top: 12px;
	font-size: 14px;
	color: var(--tracksies-color-text, #332927);
}

.tracksies-perks-checkout-guest-nudge strong {
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
}

/* Loyalty Discount Badge (product page + cart) */
.tracksies-loyalty-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding: 10px 14px;
	background: var(--tracksies-color-surface, #f1f0ec);
	border: 1px solid var(--tracksies-color-border, #e0d9d0);
	border-radius: var(--tracksies-radius-small, 4px);
	font-size: 14px;
	color: var(--tracksies-color-text, #332927);
}

.tracksies-loyalty-badge i {
	color: var(--tracksies-color-success, #2e7d32);
}

/* =============================================
 * Unified Rewards Panel (cart/checkout)
 * ============================================= */

.tracksies-perks-panel {
	background: var(--tracksies-color-surface, #fff);
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-medium, 8px);
	margin-bottom: 20px;
	overflow: hidden;
	font-family: var(--bricks-body-font-family, var(--global-body-font-family, inherit));
}

/* Panel Header */
.perks-panel__header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 20px;
	cursor: pointer;
	user-select: none;
	background: var(--tracksies-color-surface, #fff);
	border-bottom: 1px solid var(--tracksies-color-border, #e0e0e0);
	transition: background 0.15s;
}

.perks-panel__header:hover {
	background: color-mix(in srgb, var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F)) 4%, var(--tracksies-color-surface, #fff));
}

.perks-panel__header:focus-visible {
	outline: 2px solid var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	outline-offset: -2px;
}

.perks-panel__icon {
	font-size: 24px;
	line-height: 1;
}

.perks-panel__title {
	font-size: 16px;
	font-weight: 600;
	color: var(--tracksies-color-text, #332927);
}

.perks-panel__balance {
	margin-left: auto;
	font-size: 15px;
	font-weight: 700;
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
}

.perks-panel__toggle {
	font-size: 10px;
	color: var(--tracksies-color-text-light, #666);
	margin-left: 4px;
	transition: transform 0.2s;
}

/* Panel Body */
.perks-panel__body {
	max-height: 800px;
	overflow: hidden;
	transition: max-height 0.3s ease, opacity 0.2s ease;
	opacity: 1;
}

.perks-panel__body--collapsed {
	max-height: 0;
	opacity: 0;
}

/* Status Messages */
.perks-panel__status {
	display: none;
	padding: 10px 20px;
	font-size: 14px;
	line-height: 1.4;
}

.perks-panel__status--success {
	background: color-mix(in srgb, var(--tracksies-color-success, #7EB77F) 15%, white);
	color: var(--tracksies-color-success, #7EB77F);
}

.perks-panel__status--error {
	background: color-mix(in srgb, var(--tracksies-color-error, #E34D4E) 15%, white);
	color: var(--tracksies-color-error, #E34D4E);
}

/* Panel Sections */
.perks-panel__section {
	padding: 16px 20px;
	border-bottom: 1px solid var(--tracksies-color-border, #f0f0f0);
}

.perks-panel__section:last-child {
	border-bottom: none;
}

.perks-panel__section-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--tracksies-color-text-light, #666);
	margin-bottom: 6px;
}

.perks-panel__section-subtitle {
	font-size: 13px;
	color: var(--tracksies-color-text-light, #666);
	margin-bottom: 12px;
}

/* Quick Redeem Options */
.perks-panel__redeem-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.perks-panel__redeem-btn {
	background: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	color: #fff;
	border: none;
	padding: 10px 18px;
	border-radius: var(--tracksies-radius-small, 4px);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s, transform 0.1s;
}

.perks-panel__redeem-btn:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

.perks-panel__redeem-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.perks-panel__redeem-btn--loading {
	opacity: 0.7;
}

.perks-panel__redeem-btn:focus-visible {
	outline: 2px solid var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	outline-offset: 2px;
}

/* Earn More Message */
.perks-panel__earn-more {
	font-size: 14px;
	color: var(--tracksies-color-text-light, #666);
	line-height: 1.5;
}

.perks-panel__earn-more strong {
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
}

/* Coupon Cards */
.perks-panel__coupons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.perks-panel__coupon {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--tracksies-color-surface, #fafafa);
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-small, 4px);
	padding: 10px 14px;
	flex: 1 1 auto;
	min-width: 200px;
	max-width: 100%;
}

.perks-panel__coupon--applied {
	opacity: 0.6;
	background: var(--tracksies-color-surface, #F1F2F2);
}

.perks-panel__coupon-cat {
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 2px 6px;
	border-radius: var(--tracksies-radius-small, 4px);
	background: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	color: #fff;
	white-space: nowrap;
}

.perks-panel__coupon-cat--redemption { background: var(--tracksies-color-success, #7EB77F); }
.perks-panel__coupon-cat--vip { background: var(--tracksies-color-secondary, #2AA9A9); }
.perks-panel__coupon-cat--birthday { background: var(--tracksies-color-accent, #F4AF30); }
.perks-panel__coupon-cat--welcome { background: var(--tracksies-color-info, #3E7CB1); }
.perks-panel__coupon-cat--referral { background: var(--tracksies-color-secondary, #2AA9A9); }
.perks-panel__coupon-cat--milestone { background: var(--tracksies-color-accent, #F4AF30); }

.perks-panel__coupon-discount {
	font-weight: 700;
	color: var(--tracksies-color-success, #7EB77F);
	font-size: 15px;
	flex: 1;
}

.perks-panel__coupon-expiry {
	font-size: 11px;
	color: var(--tracksies-color-error, #E34D4E);
	white-space: nowrap;
}

.perks-panel__coupon-btn {
	font-size: 13px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: var(--tracksies-radius-small, 4px);
	cursor: pointer;
	white-space: nowrap;
	transition: opacity 0.15s;
	border: none;
	background: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	color: #fff;
}

.perks-panel__coupon-btn:hover {
	opacity: 0.9;
}

.perks-panel__coupon-btn:focus-visible {
	outline: 2px solid var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	outline-offset: 2px;
}

.perks-panel__coupon-btn--applied {
	background: var(--tracksies-color-text-light, #a0aec0);
	cursor: default;
	font-weight: 500;
}

span.perks-panel__coupon-btn--applied {
	padding: 6px 14px;
	border-radius: var(--tracksies-radius-small, 4px);
	font-size: 13px;
	color: #fff;
	background: var(--tracksies-color-text-light, #a0aec0);
}

/* Tier Footer */
.perks-panel__tier {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	background: color-mix(in srgb, var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F)) 5%, var(--tracksies-color-surface, #fff));
	border-top: 1px solid var(--tracksies-color-border, #e0e0e0);
	flex-wrap: wrap;
}

.perks-panel__tier-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 3px 10px;
	border-radius: var(--tracksies-radius-large, 12px);
	background: var(--tracksies-color-text-light, #a0aec0);
	color: #fff;
}

.perks-panel__tier-badge--bronze { background: var(--tracksies-perkie-tier-bronze, #b87333); }
.perks-panel__tier-badge--silver { background: var(--tracksies-perkie-tier-silver, #a0aec0); }
.perks-panel__tier-badge--gold { background: var(--tracksies-perkie-tier-gold, #d69e2e); }
.perks-panel__tier-badge--vip { background: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F)); }

.perks-panel__tier-multi {
	font-size: 11px;
	opacity: 0.9;
}

.perks-panel__tier-next {
	font-size: 13px;
	color: var(--tracksies-color-text-light, #666);
	margin-left: auto;
}

/* Responsive */
@media (max-width: 768px) {
	.tracksies-perks-balance-card {
		padding: 16px;
	}

	.balance-points {
		font-size: 26px;
	}

	.perks-coupons-list {
		flex-direction: column;
	}

	.perks-coupon-card {
		max-width: 100%;
	}

	.referral-stats {
		flex-wrap: wrap;
	}

	/* Panel responsive - tablet */
	.perks-panel__coupons {
		flex-direction: column;
	}

	.perks-panel__coupon {
		min-width: 100%;
	}
}

@media (max-width: 600px) {
	.tracksies-perks-balance-card {
		flex-direction: column;
		text-align: center;
	}

	.perks-coupon-card {
		min-width: 100%;
		max-width: 100%;
	}

	.perks-redeem-btn {
		width: 100%;
	}

	.tracksies-perks-history {
		font-size: 12px;
	}

	.tracksies-perks-history th,
	.tracksies-perks-history td {
		padding: 8px 10px;
	}

	.tier-header {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Panel responsive */
	.perks-panel__header {
		padding: 14px 16px;
	}

	.perks-panel__section {
		padding: 14px 16px;
	}

	.perks-panel__redeem-options {
		flex-direction: column;
	}

	.perks-panel__redeem-btn {
		width: 100%;
	}

	.perks-panel__coupon {
		min-width: 100%;
		flex-wrap: wrap;
	}

	.perks-panel__tier {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.perks-panel__tier-next {
		margin-left: 0;
	}
}

/* ============================
   Join Screen (Opt-in mode)
   ============================ */

.tracksies-perks-join {
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
	padding: 40px 20px;
}

.perks-join-icon {
	font-size: 48px;
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	margin-bottom: 16px;
	display: block;
}

.perks-join-title {
	font-size: 22px;
	font-weight: 600;
	color: var(--tracksies-color-text, #332927);
	margin: 0 0 24px;
}

.perks-join-balance-notice {
	font-size: 15px;
	color: var(--tracksies-color-text, #332927);
	margin: 0 0 20px;
	padding: 12px 16px;
	background: color-mix(in srgb, var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F)) 8%, transparent);
	border-radius: var(--tracksies-radius-small, 6px);
}

.perks-join-balance-notice strong {
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
}

.perks-join-benefits {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	text-align: left;
}

.perks-join-benefits li {
	padding: 8px 0;
	font-size: 15px;
	color: var(--tracksies-color-text, #332927);
	display: flex;
	align-items: center;
	gap: 10px;
}

.perks-join-benefits li i {
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	font-size: 14px;
	flex-shrink: 0;
}

.perks-terms-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 20px;
	font-size: 14px;
	color: var(--tracksies-color-text-light, #6B5E5A);
	text-align: left;
	cursor: pointer;
}

.perks-terms-checkbox input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
}

.perks-terms-checkbox a {
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
}

.perks-terms-link {
	font-size: 13px;
	color: var(--tracksies-color-text-light, #6B5E5A);
	margin-bottom: 20px;
}

.perks-terms-link a {
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
}

.perks-join-btn {
	background: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	color: #fff;
	border: none;
	padding: 14px 40px;
	border-radius: var(--tracksies-radius-medium, 8px);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	width: 100%;
	max-width: 320px;
}

.perks-join-btn:hover {
	filter: brightness(0.9);
	transform: translateY(-1px);
}

.perks-join-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}

.perks-join-status {
	margin-top: 16px;
	padding: 10px 16px;
	border-radius: var(--tracksies-radius-small, 4px);
	font-size: 14px;
}

.perks-join-status.success {
	background: color-mix(in srgb, var(--tracksies-color-success, #7EB77F) 15%, white);
	color: color-mix(in srgb, var(--tracksies-color-success, #7EB77F) 80%, black);
}

.perks-join-status.error {
	background: color-mix(in srgb, var(--tracksies-color-error, #d63638) 12%, white);
	color: color-mix(in srgb, var(--tracksies-color-error, #d63638) 80%, black);
}

/* ============================
   Terms Acceptance Banner
   ============================ */

.tracksies-perks-terms-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: color-mix(in srgb, var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F)) 6%, white);
	border: 1px solid color-mix(in srgb, var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F)) 20%, white);
	border-radius: var(--tracksies-radius-medium, 8px);
	padding: 16px 20px;
	margin-bottom: 20px;
}

.terms-banner-content {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--tracksies-color-text, #332927);
}

.terms-banner-content i {
	font-size: 20px;
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	flex-shrink: 0;
}

.terms-banner-content a {
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	font-weight: 600;
}

.perks-accept-terms-btn {
	white-space: nowrap;
	flex-shrink: 0;
}

/* ============================
   Enrollment Nudge (cart/checkout)
   ============================ */

.tracksies-perks-enroll-nudge {
	display: flex;
	align-items: center;
	gap: 12px;
	background: color-mix(in srgb, var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F)) 6%, white);
	border: 1px solid color-mix(in srgb, var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F)) 20%, white);
	border-radius: var(--tracksies-radius-medium, 8px);
	padding: 14px 18px;
	margin-bottom: 20px;
	font-size: 14px;
	color: var(--tracksies-color-text, #332927);
}

.tracksies-perks-enroll-nudge a {
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	font-weight: 600;
}

/* ============================
   Program Terms Shortcode
   ============================ */

.perkie-program-terms h2 {
	margin-top: 0;
}

.perkie-tiers-table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0 24px;
}

.perkie-tiers-table th,
.perkie-tiers-table td {
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var(--tracksies-color-border, #e0d6d0);
}

.perkie-tiers-table th {
	background: color-mix(in srgb, var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F)) 8%, white);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.perkie-legal-clauses {
	list-style: disc;
	padding-left: 20px;
}

.perkie-legal-clauses li {
	margin-bottom: 8px;
	color: var(--tracksies-color-text-light, #6B5E5A);
}

/* Inline shortcodes */

.perkie-balance-inline,
.perkie-earning-estimate {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: inherit;
}

.perkie-balance-value {
	color: var(--tracksies-color-text-light, #6B5E5A);
	font-size: 0.9em;
}

.perkie-referral-inline {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 420px;
}

.perkie-referral-input {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid var(--tracksies-color-border, #e0d6d0);
	border-radius: var(--tracksies-radius-small, 4px);
	font-size: 14px;
}

/* ============================
   Signup Form Shortcode
   ============================ */

.perkie-signup-form {
	max-width: 520px;
	margin: 0 auto;
	padding: 30px;
	background: var(--tracksies-color-surface, #fff);
	border: 1px solid var(--tracksies-color-border, #e0d6d0);
	border-radius: var(--tracksies-radius-medium, 8px);
}

.perkie-signup-header {
	text-align: center;
	margin-bottom: 20px;
}

.perkie-signup-icon {
	font-size: 40px;
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	display: block;
	margin-bottom: 12px;
}

.perkie-signup-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--tracksies-color-text, #332927);
	margin: 0;
}

.perkie-signup-desc {
	text-align: center;
	color: var(--tracksies-color-text-light, #6B5E5A);
	margin-bottom: 20px;
}

.perkie-signup-form .perks-join-benefits {
	margin-bottom: 24px;
}

.perkie-signup-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 16px;
}

.perkie-signup-fields .form-row-wide {
	grid-column: 1 / -1;
}

.perkie-signup-fields label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
	color: var(--tracksies-color-text, #332927);
}

.perkie-signup-fields .input-text {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--tracksies-color-border, #e0d6d0);
	border-radius: var(--tracksies-radius-small, 4px);
	font-size: 14px;
}

.perkie-signup-fields .input-text:focus {
	border-color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	outline: none;
	box-shadow: 0 0 0 1px var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
}

.perkie-signup-bonus {
	background: color-mix(in srgb, var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F)) 8%, white);
	border-radius: var(--tracksies-radius-small, 4px);
	padding: 10px 14px;
	font-size: 14px;
	color: var(--tracksies-color-text, #332927);
	margin-bottom: 16px;
}

.perkie-signup-bonus i {
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	margin-right: 6px;
}

.perkie-signup-submit {
	width: 100%;
	background: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F)) !important;
	color: #fff !important;
	border: none !important;
	padding: 14px !important;
	border-radius: var(--tracksies-radius-medium, 8px) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: all 0.2s;
}

.perkie-signup-submit:hover {
	filter: brightness(0.9);
	transform: translateY(-1px);
}

.perkie-signup-login-link {
	text-align: center;
	font-size: 13px;
	margin-top: 16px;
	color: var(--tracksies-color-text-light, #6B5E5A);
}

.perkie-signup-login-link a {
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	font-weight: 600;
}

.perkie-signup-enrolled {
	text-align: center;
	padding: 20px 0;
}

.perkie-signup-enrolled i {
	color: #28a745;
	margin-right: 6px;
}

.perkie-signup-enrolled .button {
	margin-top: 12px;
}

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

	.perkie-signup-form {
		padding: 20px;
	}
}

/* Checkout terms checkbox */

.tracksies-perks-checkout-terms {
	margin-top: 12px;
}

.tracksies-perks-checkout-terms a {
	color: var(--tracksies-perkie-accent, var(--tracksies-color-primary, #E7722F));
	font-weight: 600;
}

/* Leave program */

.tracksies-perks-leave-program {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid var(--tracksies-color-border, #e5e0dd);
	text-align: center;
}

.perks-leave-btn {
	background: none;
	border: none;
	color: var(--tracksies-color-text-light, #6B5E5A);
	font-size: 12px;
	cursor: pointer;
	text-decoration: underline;
	padding: 4px 8px;
}

.perks-leave-btn:hover {
	color: #d63638;
}

/* Auto-generate password note */

.perkie-auto-password-note {
	font-size: 13px;
	color: var(--tracksies-color-text-light, #6B5E5A);
	font-style: italic;
}

@media (max-width: 600px) {
	.tracksies-perks-terms-banner {
		flex-direction: column;
		align-items: flex-start;
	}

	.perks-join-btn {
		max-width: 100%;
	}
}

/* ─── Custom Coupon Field ─── */
.perkie-coupon-field__form {
	display: flex;
	gap: 8px;
}

.perkie-coupon-field__input {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid var(--tracksies-color-border, #ddd);
	border-radius: var(--tracksies-radius-small, 4px);
	font-size: 14px;
	background: var(--tracksies-color-surface, #fff);
	color: var(--tracksies-color-text, #333);
}

.perkie-coupon-field__input:focus {
	outline: none;
	border-color: var(--tracksies-color-primary, #3E7CB1);
	box-shadow: 0 0 0 2px rgba(62, 124, 177, 0.15);
}

.perkie-coupon-field__btn {
	padding: 8px 16px;
	background: var(--tracksies-color-primary, #3E7CB1);
	color: #fff;
	border: none;
	border-radius: var(--tracksies-radius-small, 4px);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.perkie-coupon-field__btn:hover {
	opacity: 0.9;
}

.perkie-coupon-field__btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.perkie-coupon-field__status {
	font-size: 13px;
	margin-top: 6px;
}

.perkie-coupon-field__status--success {
	color: #28a745;
}

.perkie-coupon-field__status--error {
	color: #dc3545;
}