/* VirtGold Codes — customer side. Uses the theme colours when available. */
.vgk{--k-b:var(--vg-border,#e6e3dc);--k-s:var(--vg-surface,#fff);--k-s2:var(--vg-surface-2,#f6f4ef);--k-t:var(--vg-text,#17171c);--k-m:var(--vg-muted,#6b6b76);--k-g:var(--vg-primary,#f4a622);--k-a:var(--vg-accent,#5b47e0);display:grid;gap:8px;margin-top:8px;color:var(--k-t)}
.vgk p{margin:0;color:var(--k-m);font-size:13.5px;line-height:1.5}
.vgk__badge{display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;padding:3px 10px;border-radius:99px;background:color-mix(in srgb,var(--k-g) 16%,transparent);color:color-mix(in srgb,var(--k-g) 55%,var(--k-t));font-size:12px;font-weight:700}
.vgk__badge.is-ok{background:color-mix(in srgb,#12855b 14%,transparent);color:#0f6e4b}
.vgk-code{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 8px 8px 12px;border:1.5px dashed color-mix(in srgb,var(--k-g) 70%,transparent);border-radius:12px;background:color-mix(in srgb,var(--k-g) 7%,var(--k-s))}
.vgk-code__n{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--k-m)}
.vgk-code code{min-width:0;padding:0;background:none;font:600 15px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;color:var(--k-t);overflow-wrap:anywhere;white-space:pre-wrap}
.vgk-code__btns{display:flex;gap:6px}
.vgk-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 12px;border:1px solid var(--k-b);border-radius:10px;background:var(--k-s);color:var(--k-t);font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.vgk-btn:hover{border-color:color-mix(in srgb,var(--k-t) 30%,transparent)}
.vgk-btn:focus-visible{outline:2px solid var(--k-a);outline-offset:2px}
.vgk-btn--gold{border-color:transparent;background:var(--k-g);color:#17171c}
.vgk-btn.is-done{background:#12855b;border-color:#12855b;color:#fff}
.vgk-how{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.vgk-how p{flex:1 1 260px}
.vgk-redeem{font-weight:700;font-size:13.5px;color:var(--k-a);text-decoration:none;white-space:nowrap}
.vgk-redeem:hover{text-decoration:underline}
.vgk-wait{display:grid;gap:6px;padding:10px 12px;border-radius:12px;background:var(--k-s2)}
.vgk--wait{padding:10px 12px;border-radius:12px;background:var(--k-s2)}
.vgk-manual{padding:10px 12px;border:1px solid var(--k-b);border-radius:12px;background:var(--k-s2);font-size:14px;line-height:1.55;overflow-wrap:anywhere}
.vgk--manual .vgk-btn{justify-self:start}
.vgk-box{margin:0 0 24px;padding:clamp(16px,3vw,22px);border:1px solid color-mix(in srgb,var(--vg-primary,#f4a622) 40%,var(--vg-border,#e6e3dc));border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--vg-primary,#f4a622) 7%,var(--vg-surface,#fff)),var(--vg-surface,#fff) 120px)}
.vgk-box__title{margin:0 0 12px;font-size:1.15rem}
.vgk-box__row{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid var(--vg-border,#e6e3dc)}
.vgk-box__row:first-of-type{border-top:0;padding-top:0}
.vgk-box__img{width:56px;height:56px;border-radius:12px;object-fit:cover;background:var(--vg-surface-2,#f6f4ef)}
.vgk-box__name{display:block;font-size:15px}
.vgk-box__note{margin:6px 0 0;font-size:12.5px;color:var(--vg-muted,#6b6b76)}
@media (max-width:560px){.vgk-code{grid-template-columns:minmax(0,1fr)}.vgk-code__n{display:none}.vgk-code__btns .vgk-btn{flex:1}.vgk-box__row{grid-template-columns:44px minmax(0,1fr)}.vgk-box__img{width:44px;height:44px}}
html[data-theme=dark] .vgk__badge.is-ok{color:#4fd69c;background:color-mix(in srgb,#4fd69c 14%,transparent)}