/* SF Store Engine — storefront
   Identity: ink black (#111) + brushed gold (#C8A24B), tight uppercase eyebrows,
   confident spacing. Scoped under .sfse-* so it never bleeds into the theme. */

.sfse-gcform,
.sfse-checkout-gc,
.sfse-account,
.sfse-balance-check,
.sfse-referrals {
	--sfse-ink: #111111;
	--sfse-gold: #C8A24B;
	--sfse-line: #e6e3dc;
	--sfse-muted: #6b6b6b;
	font-family: inherit;
	color: var(--sfse-ink);
}

.sfse-eyebrow {
	display: block;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sfse-muted);
	margin-bottom: 10px;
}

/* ── Product purchase form ──────────────────────────────────────────────── */
.sfse-gcform { margin: 20px 0 8px; }
.sfse-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sfse-chip {
	position: relative;
	cursor: pointer;
}
.sfse-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sfse-chip span {
	display: inline-block;
	padding: 10px 16px;
	border: 1.5px solid var(--sfse-line);
	border-radius: 10px;
	font-weight: 600;
	transition: border-color .15s, background .15s, color .15s;
}
.sfse-chip input:checked + span {
	border-color: var(--sfse-ink);
	background: var(--sfse-ink);
	color: #fff;
}
.sfse-chip input:focus-visible + span { outline: 2px solid var(--sfse-gold); outline-offset: 2px; }

.sfse-custom-wrap { margin-top: 14px; }
.sfse-rupee { display: flex; align-items: center; max-width: 220px; border: 1.5px solid var(--sfse-line); border-radius: 10px; overflow: hidden; }
.sfse-rupee span { padding: 0 12px; color: var(--sfse-muted); background: #faf9f6; align-self: stretch; display: flex; align-items: center; }
.sfse-rupee input { border: 0; padding: 12px; width: 100%; font-size: 16px; }
.sfse-rupee input:focus { outline: none; }

.sfse-hint { font-size: 12.5px; color: var(--sfse-muted); margin: 6px 0 0; }

.sfse-self {
	display: flex; align-items: center; gap: 8px;
	margin: 20px 0; font-weight: 600; cursor: pointer;
}
.sfse-recipient { border-top: 1px solid var(--sfse-line); padding-top: 18px; margin-top: 4px; }
.sfse-field { margin: 0 0 14px; }
.sfse-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.sfse-field input, .sfse-field textarea {
	width: 100%; padding: 11px 12px;
	border: 1.5px solid var(--sfse-line); border-radius: 10px; font-size: 15px;
}
.sfse-field input:focus, .sfse-field textarea:focus { outline: none; border-color: var(--sfse-ink); }

/* ── Checkout field ─────────────────────────────────────────────────────── */
.sfse-checkout-gc { margin: 18px 0; padding: 16px; border: 1px solid var(--sfse-line); border-radius: 12px; background: #fcfbf8; }
.sfse-gc-entry { display: flex; gap: 8px; }
.sfse-gc-entry input { flex: 1; padding: 10px 12px; border: 1.5px solid var(--sfse-line); border-radius: 9px; font-family: ui-monospace, monospace; letter-spacing: 1px; }
.sfse-gc-entry .button { white-space: nowrap; }
.sfse-gc-applied { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.sfse-gc-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--sfse-ink); color: #fff; padding: 6px 6px 6px 12px; border-radius: 999px; font-size: 13px; }
.sfse-gc-pill code { color: var(--sfse-gold); background: transparent; }
.sfse-gc-remove { background: rgba(255,255,255,.15); border: 0; color: #fff; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; line-height: 1; }
.sfse-gc-feedback { margin: 10px 0 0; font-size: 13.5px; min-height: 1em; }
.sfse-gc-feedback.is-ok { color: #1a7f37; }
.sfse-gc-feedback.is-error { color: #b42318; }

/* ── Account cards ──────────────────────────────────────────────────────── */
.sfse-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sfse-card {
	border-radius: 14px; padding: 20px;
	background: linear-gradient(150deg, #1a1a1a, #111);
	color: #fff; position: relative; overflow: hidden;
}
.sfse-card.is-spent { opacity: .55; }
.sfse-card::after {
	content: ""; position: absolute; right: -40px; top: -40px;
	width: 120px; height: 120px; border-radius: 50%;
	background: radial-gradient(circle, rgba(200,162,75,.35), transparent 70%);
}
.sfse-card__top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.sfse-card__brand { color: var(--sfse-gold); }
.sfse-card__status { color: rgba(255,255,255,.6); }
.sfse-card__balance { margin: 18px 0; }
.sfse-card__balance .sfse-eyebrow { color: rgba(255,255,255,.55); margin-bottom: 4px; }
.sfse-card__balance strong { font-size: 28px; }
.sfse-card__initial { font-size: 13px; color: rgba(255,255,255,.55); margin-left: 6px; }
.sfse-card__code code { background: rgba(255,255,255,.1); color: #fff; padding: 6px 10px; border-radius: 7px; letter-spacing: 2px; font-size: 14px; }
.sfse-card__exp { margin-top: 12px; font-size: 12px; color: rgba(255,255,255,.5); }
.sfse-empty { color: var(--sfse-muted); }

/* ── Balance check ──────────────────────────────────────────────────────── */
.sfse-balance-check { max-width: 460px; padding: 20px; border: 1px solid var(--sfse-line); border-radius: 12px; }
.sfse-balance-result { margin: 12px 0 0; font-weight: 600; min-height: 1em; }
.sfse-balance-result.is-ok { color: var(--sfse-ink); }
.sfse-balance-result.is-error { color: #b42318; }

/* ── Referrals ──────────────────────────────────────────────────────────── */
.sfse-ref-hero { background: var(--sfse-ink); color: #fff; padding: 28px; border-radius: 16px; }
.sfse-ref-hero h3 { color: #fff; font-size: 26px; margin: 6px 0 10px; }
.sfse-ref-hero .sfse-eyebrow { color: var(--sfse-gold); }
.sfse-ref-hero p { color: rgba(255,255,255,.8); margin: 0; }
.sfse-ref-link { margin: 22px 0; }
.sfse-ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sfse-stat { border: 1px solid var(--sfse-line); border-radius: 12px; padding: 16px; text-align: center; }
.sfse-stat span { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--sfse-muted); }
.sfse-stat strong { display: block; font-size: 22px; margin-top: 6px; }

@media (max-width: 480px) {
	.sfse-gc-entry { flex-direction: column; }
	.sfse-ref-stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.sfse-chip span { transition: none; }
}