/* ==========================================================================
   Vedamaxx Coin System — Frontend Styles
   Palette: ink navy #14152B · deep violet #3B2E6B · warm gold #C9A227
            soft lilac #A99BFF · mint success #3FBF8F · cloud #F7F6FB
   Type: system stack for speed (no external font requests = lightweight)
   ========================================================================== */

:root{
	--vcs-ink:#14152B;
	--vcs-violet:#3B2E6B;
	--vcs-violet-soft:#EFEBFF;
	--vcs-gold:#C9A227;
	--vcs-gold-soft:#F8EFD2;
	--vcs-lilac:#A99BFF;
	--vcs-mint:#3FBF8F;
	--vcs-red:#E5484D;
	--vcs-cloud:#F7F6FB;
	--vcs-white:#FFFFFF;
	--vcs-border:#E7E4F4;
	--vcs-text:#1E1C33;
	--vcs-text-muted:#6E6A85;
	--vcs-radius:16px;
	--vcs-radius-sm:10px;
	--vcs-shadow:0 12px 32px rgba(20,21,43,0.14);
	--vcs-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.vcs-overlay,.vcs-dashboard,.vcs-redeem-box,.vcs-earn-preview{
	font-family:var(--vcs-font);
	box-sizing:border-box;
}
.vcs-overlay *,.vcs-dashboard *,.vcs-redeem-box *{ box-sizing:border-box; }

/* ---------------- Login Popup ---------------- */
.vcs-overlay{
	position:fixed; inset:0; z-index:99999;
	background:radial-gradient(circle at 30% 20%, rgba(59,46,107,0.55), rgba(20,21,43,0.82));
	display:none; align-items:center; justify-content:center;
	backdrop-filter:blur(4px);
	padding:20px;
}
.vcs-overlay.is-open{ display:flex; }

.vcs-modal{
	position:relative;
	width:100%; max-width:400px;
	background:var(--vcs-white);
	border-radius:20px;
	padding:36px 32px 28px;
	box-shadow:0 30px 80px rgba(20,21,43,0.45);
	animation:vcsPopIn .35s cubic-bezier(.2,.9,.25,1);
}
@keyframes vcsPopIn{
	from{ opacity:0; transform:translateY(18px) scale(.97); }
	to{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion:reduce){ .vcs-modal{ animation:none; } }

.vcs-modal__close{
	position:absolute; top:14px; right:16px;
	background:none; border:none; font-size:22px; line-height:1;
	color:var(--vcs-text-muted); cursor:pointer;
}
.vcs-modal__brand{ text-align:center; margin-bottom:22px; }
.vcs-modal__coin{
	position:relative;
	display:inline-flex; align-items:center; justify-content:center;
	width:56px; height:56px; border-radius:50%;
	background:linear-gradient(145deg,var(--vcs-gold),#e9cf72);
	font-size:26px; margin-bottom:12px;
	box-shadow:0 8px 20px rgba(201,162,39,0.4);
}
.vcs-modal__coin-glow{
	position:absolute; inset:-10px; border-radius:50%;
	background:radial-gradient(circle, rgba(201,162,39,0.35), transparent 70%);
	animation:vcsGlow 2.4s ease-in-out infinite;
	z-index:-1;
}
@keyframes vcsGlow{
	0%,100%{ opacity:.5; transform:scale(1); }
	50%{ opacity:1; transform:scale(1.15); }
}
.vcs-modal__brand h2{ font-size:20px; margin:0 0 6px; color:var(--vcs-ink); }
.vcs-modal__brand p{ font-size:13.5px; color:var(--vcs-text-muted); margin:0; }

.vcs-step label{ display:block; font-size:13px; font-weight:600; color:var(--vcs-ink); margin-bottom:6px; }
.vcs-step input[type=email]{
	width:100%; padding:13px 14px; border-radius:var(--vcs-radius-sm);
	border:1.5px solid var(--vcs-border); font-size:15px; margin-bottom:14px;
	outline:none; transition:border-color .15s;
}
.vcs-step input[type=email]:focus{ border-color:var(--vcs-violet); }

.vcs-btn{
	width:100%; padding:13px 16px; border-radius:var(--vcs-radius-sm);
	border:none; font-size:14.5px; font-weight:700; cursor:pointer;
	transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.vcs-btn--primary{
	background:linear-gradient(135deg,var(--vcs-violet),#5844a8);
	color:#fff; box-shadow:0 10px 24px rgba(59,46,107,0.35);
}
.vcs-btn--primary:hover{ transform:translateY(-1px); }
.vcs-btn--primary:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.vcs-btn--link{
	background:none; color:var(--vcs-violet); font-weight:600;
	box-shadow:none; margin-top:10px; padding:6px;
}

.vcs-step__hint{ font-size:13.5px; color:var(--vcs-text-muted); margin:0 0 16px; text-align:center; }
.vcs-otp-inputs{ display:flex; gap:8px; justify-content:center; margin-bottom:18px; }
.vcs-otp-digit{
	width:44px; height:52px; text-align:center; font-size:20px; font-weight:700;
	border:1.5px solid var(--vcs-border); border-radius:10px; outline:none;
	transition:border-color .15s;
}
.vcs-otp-digit:focus{ border-color:var(--vcs-violet); }

.vcs-error{ color:var(--vcs-red); font-size:13px; margin:10px 0 0; min-height:16px; text-align:center; }
.vcs-modal__footer{ font-size:11.5px; color:var(--vcs-text-muted); text-align:center; margin:18px 0 0; }

.vcs-success-tick{
	width:56px; height:56px; border-radius:50%; margin:0 auto 14px;
	background:var(--vcs-mint); color:#fff; font-size:28px;
	display:flex; align-items:center; justify-content:center;
	animation:vcsPopIn .3s ease;
}
#vcs-step-success{ text-align:center; padding:10px 0; }

/* ---------------- Checkout redeem widget ---------------- */
.vcs-redeem-box{
	background:var(--vcs-violet-soft); border:1px solid #ddd6ff;
	border-radius:var(--vcs-radius); padding:18px 20px; margin:0 0 20px;
}
.vcs-redeem-box__head{ font-size:15px; color:var(--vcs-ink); margin-bottom:4px; }
.vcs-redeem-box__sub{ font-size:13px; color:var(--vcs-text-muted); margin:0 0 12px; }
.vcs-redeem-controls input[type=range]{ width:100%; accent-color:var(--vcs-violet); }
.vcs-redeem-readout{ font-size:13.5px; color:var(--vcs-ink); margin-top:8px; font-weight:600; }
.vcs-earn-preview{
	background:var(--vcs-gold-soft); color:#7a5f0f; font-size:13px; font-weight:600;
	padding:10px 14px; border-radius:var(--vcs-radius-sm); margin-bottom:14px;
}

/* ---------------- Dashboard ---------------- */
.vcs-dashboard{
	background:var(--vcs-white); border-radius:20px; border:1px solid var(--vcs-border);
	box-shadow:var(--vcs-shadow); overflow:hidden; max-width:920px; margin:0 auto;
}
.vcs-dashboard__header{
	background:linear-gradient(135deg,var(--vcs-ink),var(--vcs-violet));
	color:#fff; padding:28px 28px 24px;
	display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.vcs-dashboard__welcome{ display:flex; align-items:center; gap:14px; }
.vcs-avatar{
	width:48px; height:48px; border-radius:50%; background:var(--vcs-gold);
	display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; color:var(--vcs-ink);
}
.vcs-dashboard__welcome h3{ margin:0 0 4px; font-size:17px; }
.vcs-tier-badge{
	display:inline-block; background:rgba(255,255,255,0.14); font-size:11.5px;
	font-weight:700; letter-spacing:.03em; padding:3px 10px; border-radius:20px; text-transform:uppercase;
}
.vcs-dashboard__balance{ text-align:right; }
.vcs-balance-label{ display:block; font-size:12px; opacity:.75; margin-bottom:2px; }
.vcs-balance-value{ font-size:24px; font-weight:800; color:var(--vcs-gold); }

.vcs-tabs{
	display:flex; gap:4px; padding:10px 20px 0; overflow-x:auto;
	border-bottom:1px solid var(--vcs-border); background:var(--vcs-cloud);
}
.vcs-tab{
	background:none; border:none; padding:12px 16px; font-size:13.5px; font-weight:600;
	color:var(--vcs-text-muted); cursor:pointer; border-bottom:2.5px solid transparent;
	white-space:nowrap; transition:color .15s, border-color .15s;
}
.vcs-tab:hover{ color:var(--vcs-ink); }
.vcs-tab.is-active{ color:var(--vcs-violet); border-color:var(--vcs-violet); }

.vcs-tab-panel{ padding:24px 28px 30px; min-height:220px; }
.vcs-tab-loading{ padding:60px 0; display:flex; justify-content:center; }
.vcs-spinner{
	width:28px; height:28px; border:3px solid var(--vcs-border);
	border-top-color:var(--vcs-violet); border-radius:50%; animation:vcsSpin .7s linear infinite;
}
@keyframes vcsSpin{ to{ transform:rotate(360deg); } }

.vcs-cards-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:26px; }
.vcs-stat-card{
	background:var(--vcs-cloud); border:1px solid var(--vcs-border);
	border-radius:var(--vcs-radius-sm); padding:16px 18px;
}
.vcs-stat-card__label{ display:block; font-size:12px; color:var(--vcs-text-muted); margin-bottom:6px; }
.vcs-stat-card__value{ font-size:19px; font-weight:800; color:var(--vcs-ink); }

.vcs-section-title{ font-size:14.5px; font-weight:700; color:var(--vcs-ink); margin:0 0 4px; }
.vcs-section-sub{ font-size:13px; color:var(--vcs-text-muted); margin:0 0 16px; }
.vcs-empty{ font-size:13.5px; color:var(--vcs-text-muted); padding:20px 0; text-align:center; }

.vcs-ledger__row,.vcs-product-row{
	display:flex; align-items:center; justify-content:space-between;
	padding:12px 0; border-bottom:1px solid var(--vcs-border);
}
.vcs-ledger__row:last-child,.vcs-product-row:last-child{ border-bottom:none; }
.vcs-ledger__type{ display:block; font-size:13px; font-weight:700; color:var(--vcs-ink); }
.vcs-ledger__desc{ display:block; font-size:12.5px; color:var(--vcs-text-muted); }
.vcs-ledger__date{ display:block; font-size:11.5px; color:#9b97ae; margin-top:2px; }
.vcs-ledger__amount{ font-size:15px; font-weight:800; }
.vcs-ledger__amount.is-positive{ color:var(--vcs-mint); }
.vcs-ledger__amount.is-negative{ color:var(--vcs-red); }

.vcs-product-row__name{ display:block; font-size:13.5px; font-weight:600; color:var(--vcs-ink); }
.vcs-product-row__date{ display:block; font-size:12px; color:var(--vcs-text-muted); }
.vcs-status-pill{
	font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px;
	background:var(--vcs-violet-soft); color:var(--vcs-violet); text-transform:capitalize;
}
.vcs-status-pill--completed{ background:#dcf5e9; color:#1f8f5f; }
.vcs-status-pill--processing{ background:var(--vcs-gold-soft); color:#8a6d10; }

.vcs-growth-hero{
	background:linear-gradient(135deg,var(--vcs-violet-soft),#f4f1ff);
	border-radius:var(--vcs-radius); padding:20px 22px; margin-bottom:22px;
}
.vcs-growth-hero__label{ display:block; font-size:12px; color:var(--vcs-text-muted); }
.vcs-growth-hero__name{ display:block; font-size:22px; font-weight:800; color:var(--vcs-violet); margin-bottom:12px; }
.vcs-progress__bar{ height:8px; border-radius:6px; background:#e3ddff; overflow:hidden; }
.vcs-progress__fill{ height:100%; background:linear-gradient(90deg,var(--vcs-violet),var(--vcs-lilac)); border-radius:6px; }
.vcs-progress__caption{ font-size:12.5px; color:var(--vcs-text-muted); margin:8px 0 0; }

.vcs-tier-track{ display:flex; flex-wrap:wrap; gap:10px; }
.vcs-tier-step{
	flex:1 1 110px; text-align:center; padding:14px 10px; border-radius:var(--vcs-radius-sm);
	background:var(--vcs-cloud); border:1px solid var(--vcs-border); opacity:.55;
}
.vcs-tier-step.is-reached{ opacity:1; background:var(--vcs-gold-soft); border-color:#eddb9a; }
.vcs-tier-step__dot{ display:block; width:10px; height:10px; border-radius:50%; background:var(--vcs-gold); margin:0 auto 8px; }
.vcs-tier-step__name{ display:block; font-size:12.5px; font-weight:700; color:var(--vcs-ink); }
.vcs-tier-step__req{ display:block; font-size:11px; color:var(--vcs-text-muted); }

.vcs-suggestion-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px; }
.vcs-suggestion-card{ display:block; text-decoration:none; color:inherit; }
.vcs-suggestion-card__img{ border-radius:var(--vcs-radius-sm); overflow:hidden; margin-bottom:8px; background:var(--vcs-cloud); }
.vcs-suggestion-card__img img{ width:100%; height:auto; display:block; }
.vcs-suggestion-card__name{ display:block; font-size:12.5px; font-weight:600; color:var(--vcs-ink); }
.vcs-suggestion-card__price{ display:block; font-size:12.5px; color:var(--vcs-violet); font-weight:700; }

.vcs-referral-link{ display:flex; gap:8px; margin:14px 0 22px; }
.vcs-referral-link input{
	flex:1; padding:11px 14px; border-radius:var(--vcs-radius-sm);
	border:1.5px solid var(--vcs-border); font-size:13px; color:var(--vcs-text-muted);
}
.vcs-referral-link .vcs-btn{ width:auto; padding:11px 18px; }

@media (max-width:600px){
	.vcs-dashboard__header{ flex-direction:column; align-items:flex-start; }
	.vcs-dashboard__balance{ text-align:left; }
	.vcs-tab-panel{ padding:20px 16px 26px; }
}

/* ---------------- Method switch (Email/Phone tabs) ---------------- */
.vcs-method-switch{
	display:flex; gap:6px; background:var(--vcs-cloud); border-radius:999px;
	padding:4px; margin-bottom:20px;
}
.vcs-method-pill{
	flex:1; border:none; background:none; padding:9px 0; border-radius:999px;
	font-size:13px; font-weight:700; color:var(--vcs-text-muted); cursor:pointer;
	transition:background .15s, color .15s;
}
.vcs-method-pill.is-active{ background:var(--vcs-white); color:var(--vcs-violet); box-shadow:0 2px 8px rgba(20,21,43,0.1); }
.vcs-step input[type=tel]{
	width:100%; padding:13px 14px; border-radius:var(--vcs-radius-sm);
	border:1.5px solid var(--vcs-border); font-size:15px; margin-bottom:14px; outline:none;
}
.vcs-step input[type=tel]:focus{ border-color:var(--vcs-violet); }
#vcs-recaptcha-container{ margin-bottom:4px; }

.vcs-btn.is-loading{ position:relative; }
.vcs-btn--small{ width:auto; display:inline-block; padding:9px 14px; text-decoration:none; text-align:center; }
.vcs-btn--gold{
	background:linear-gradient(135deg,var(--vcs-gold),#e0bb45); color:var(--vcs-ink);
	box-shadow:0 10px 24px rgba(201,162,39,0.35);
}

/* ---------------- Product earn badges (shop / single product) ---------------- */
.vcs-earn-badge{
	display:inline-flex; align-items:center; gap:4px;
	background:var(--vcs-gold-soft); color:#7a5f0f; font-weight:700;
	border-radius:999px; margin-top:8px;
}
.vcs-earn-badge--single{ font-size:13px; padding:6px 12px; }
.vcs-earn-badge--loop{ font-size:11.5px; padding:3px 8px; }

/* ---------------- Redeem panel (dashboard coupon generator) ---------------- */
.vcs-redeem-panel{
	background:linear-gradient(135deg,#fffaf0,var(--vcs-gold-soft));
	border:1px solid #eddb9a; border-radius:var(--vcs-radius);
	padding:20px 22px; margin-bottom:26px;
}
.vcs-redeem-panel--locked{ display:flex; align-items:center; gap:12px; background:var(--vcs-cloud); border-color:var(--vcs-border); }
.vcs-redeem-panel--locked p{ margin:0; font-size:13px; color:var(--vcs-text-muted); }
.vcs-redeem-panel__head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.vcs-redeem-panel__icon{ font-size:26px; }
.vcs-redeem-panel__head h4{ margin:0 0 4px; font-size:15px; color:var(--vcs-ink); }
.vcs-redeem-panel__head p{ margin:0; font-size:12.5px; color:var(--vcs-text-muted); }
.vcs-redeem-panel__controls input[type=range]{ width:100%; accent-color:var(--vcs-gold); margin-bottom:10px; }
.vcs-redeem-panel__readout{ font-size:14px; font-weight:700; color:var(--vcs-ink); margin-bottom:14px; }
.vcs-coupon-result{
	display:flex; align-items:center; gap:12px; flex-wrap:wrap;
	background:#fff; border-radius:var(--vcs-radius-sm); padding:12px 14px; margin-top:14px;
	border:1px dashed var(--vcs-gold);
}
.vcs-coupon-result__code{ font-family:monospace; font-weight:800; font-size:15px; color:var(--vcs-violet); letter-spacing:.03em; }

/* ---------------- Filter pills (ledger) ---------------- */
.vcs-filter-row{ display:flex; gap:8px; margin-bottom:14px; }
.vcs-filter-pill{
	border:1px solid var(--vcs-border); background:var(--vcs-white); color:var(--vcs-text-muted);
	font-size:12.5px; font-weight:600; padding:6px 14px; border-radius:999px; cursor:pointer;
	transition:all .15s;
}
.vcs-filter-pill.is-active{ background:var(--vcs-violet); border-color:var(--vcs-violet); color:#fff; }
.vcs-ledger__row{ display:flex; align-items:center; gap:12px; }
.vcs-ledger__icon{
	width:30px; height:30px; border-radius:50%; flex-shrink:0;
	display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
}
.vcs-ledger__icon.is-positive{ background:#dcf5e9; color:var(--vcs-mint); }
.vcs-ledger__icon.is-negative{ background:#fbe2e2; color:var(--vcs-red); }
.vcs-ledger__note{ flex:1; }
.vcs-stat-card--hero{ background:linear-gradient(135deg,var(--vcs-violet-soft),#fff); border-color:#ddd6ff; }

/* ---------------- Growth ring ---------------- */
.vcs-growth-hero--ring{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.vcs-ring-wrap{ position:relative; width:128px; height:128px; flex-shrink:0; }
.vcs-ring{ width:128px; height:128px; transform:rotate(-90deg); }
.vcs-ring__track{ fill:none; stroke:#e3ddff; stroke-width:10; }
.vcs-ring__fill{
	fill:none; stroke:url(#vcsRingGradient); stroke:var(--vcs-violet); stroke-width:10;
	stroke-linecap:round; transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1);
}
.vcs-ring__center{
	position:absolute; inset:0; display:flex; flex-direction:column;
	align-items:center; justify-content:center;
}
.vcs-ring__pct{ font-size:20px; font-weight:800; color:var(--vcs-ink); }
.vcs-ring__label{ font-size:11px; color:var(--vcs-text-muted); text-transform:uppercase; letter-spacing:.04em; }
.vcs-growth-hero__copy{ flex:1; min-width:180px; }
.vcs-growth-hero__eyebrow{ display:block; font-size:12px; color:var(--vcs-text-muted); margin-bottom:2px; }
.vcs-growth-hero__name{ display:block; font-size:24px; font-weight:800; color:var(--vcs-violet); margin-bottom:6px; }
.vcs-growth-hero__caption{ font-size:13px; color:var(--vcs-text-muted); margin:0; }
.vcs-tier-step.is-current{ outline:2px solid var(--vcs-violet); outline-offset:2px; }
.vcs-tier-step__dot{ display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--vcs-gold); margin:0 auto 8px; color:#fff; font-size:11px; font-weight:800; }

/* ---------------- Suggestion coin badge ---------------- */
.vcs-suggestion-card__img{ position:relative; }
.vcs-suggestion-card__badge{
	position:absolute; top:6px; right:6px; background:rgba(20,21,43,0.85); color:var(--vcs-gold);
	font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px;
}

/* ---------------- Dashboard entrance animation ---------------- */
.vcs-dashboard{ animation:vcsFadeUp .4s ease; }
@keyframes vcsFadeUp{
	from{ opacity:0; transform:translateY(10px); }
	to{ opacity:1; transform:translateY(0); }
}
.vcs-tab-panel{ animation:vcsFadeUp .35s ease; }