/* Soulls Tattoo Subscription — Frontend styles (BEM-ish, mobile-first) */
:root {
	--st-color-bg: #ffffff;
	--st-color-ink: #111111;
	--st-color-muted: #6b6b6b;
	--st-color-border: #e6e6e6;
	--st-color-accent: #111111;
	--st-color-accent-ink: #ffffff;
	--st-color-warn: #b45309;
	--st-color-ok: #15803d;
	--st-color-err: #b91c1c;
	--st-radius: 10px;
	--st-radius-sm: 6px;
	--st-shadow: 0 6px 24px rgba(0,0,0,.06);
	--st-space: 16px;
	--st-font: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.st-form, .st-profile, .st-plans, .st-card, .st-table, .st-notice { font-family: var(--st-font); color: var(--st-color-ink); }

/* Cards */
.st-card {
	background: var(--st-color-bg);
	border: 1px solid var(--st-color-border);
	border-radius: var(--st-radius);
	padding: 20px;
	margin: 16px 0;
	box-shadow: var(--st-shadow);
}
.st-card--hero {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	justify-content: space-between;
}
@media (min-width: 640px) {
	.st-card--hero { flex-direction: row; align-items: center; }
}

/* Forms */
.st-form { display: block; }
.st-form__title { font-size: 1.5rem; margin: 0 0 16px; font-weight: 600; }
.st-form__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: .9rem; flex-wrap: wrap; }
.st-form__msg { min-height: 1.4em; margin-top: 10px; font-size: .95rem; }
.st-form__msg.is-ok { color: var(--st-color-ok); }
.st-form__msg.is-err { color: var(--st-color-err); }

.st-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.st-field label { font-size: .9rem; font-weight: 500; }
.st-field input, .st-field select, .st-field textarea {
	font: inherit;
	padding: 10px 12px;
	border: 1px solid var(--st-color-border);
	border-radius: var(--st-radius-sm);
	background: #fafafa;
	transition: border-color .15s, background .15s;
	width: 100%;
	box-sizing: border-box;
}
.st-field input:focus, .st-field select:focus, .st-field textarea:focus {
	outline: none;
	border-color: var(--st-color-ink);
	background: #fff;
}
.st-field small { color: var(--st-color-muted); font-size: .8rem; }
.st-check { display: inline-flex; gap: 8px; align-items: center; margin: 8px 0; font-size: .9rem; }

.st-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
	.st-grid--2 { grid-template-columns: 1fr 1fr; }
	.st-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.st-field--full { grid-column: 1 / -1; }
}

/* Buttons */
.st-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 18px;
	border-radius: var(--st-radius-sm);
	border: 1px solid var(--st-color-ink);
	background: transparent;
	color: var(--st-color-ink);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: transform .12s, background .15s, color .15s;
	min-height: 44px;
}
.st-btn:hover { transform: translateY(-1px); }
.st-btn--primary { background: var(--st-color-accent); color: var(--st-color-accent-ink); }
.st-btn--ghost { background: transparent; }
.st-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.st-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Notices */
.st-notice { padding: 12px 16px; border-radius: var(--st-radius-sm); background: #f4f4f4; border-left: 3px solid var(--st-color-ink); margin: 12px 0; }
.st-notice--warn { border-color: var(--st-color-warn); background: #fff7ed; }

/* Tables */
.st-table-wrap { overflow-x: auto; }
.st-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.st-table th, .st-table td { padding: 10px 12px; border-bottom: 1px solid var(--st-color-border); text-align: left; }
.st-table th { font-weight: 600; background: #fafafa; }
.st-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }

/* Badges */
.st-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: .78rem;
	background: #eee;
	color: #333;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.st-badge--active, .st-badge--approved, .st-badge--credit, .st-badge--sent { background: #dcfce7; color: #14532d; }
.st-badge--pending { background: #fef3c7; color: #78350f; }
.st-badge--cancelled, .st-badge--rejected, .st-badge--debit, .st-badge--failed { background: #fee2e2; color: #7f1d1d; }
.st-badge--expired, .st-badge--paused { background: #e5e7eb; color: #374151; }

/* Balance */
.st-balance { display: flex; flex-direction: column; padding: 12px 18px; background: #111; color: #fff; border-radius: var(--st-radius); text-align: right; }
.st-balance__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.st-balance__value { font-size: 1.8rem; font-weight: 600; }

/* Profile lists */
.st-list { list-style: none; padding: 0; margin: 8px 0; }
.st-list li { padding: 6px 0; border-bottom: 1px dashed var(--st-color-border); }
.st-list li:last-child { border: 0; }
.st-muted { color: var(--st-color-muted); }

/* Plans */
.st-plans {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
	margin: 24px 0;
}
@media (min-width: 720px) {
	.st-plans { grid-template-columns: repeat(3, 1fr); }
}
.st-plan {
	position: relative;
	border: 1px solid var(--st-color-border);
	border-radius: var(--st-radius);
	padding: 28px 22px;
	background: #fff;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.st-plan--featured { border-color: var(--st-color-ink); box-shadow: var(--st-shadow); transform: scale(1.02); }
.st-plan__ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #111; color: #fff; padding: 4px 14px; border-radius: 999px; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.st-plan__title { font-size: 1.4rem; margin: 0; font-weight: 600; }
.st-plan__price { font-size: 1.6rem; font-weight: 600; }
.st-plan__price small { font-size: .9rem; color: var(--st-color-muted); font-weight: 400; }
.st-plan__minutes { font-size: 1.1rem; padding: 8px 0; border-top: 1px solid var(--st-color-border); border-bottom: 1px solid var(--st-color-border); }
.st-plan__minutes small { display: block; color: var(--st-color-muted); font-size: .8rem; }
.st-plan__desc { color: var(--st-color-muted); font-size: .9rem; margin: 0; }
.st-plan__gateway { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; text-align: left; }
.st-plan__form { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.st-plans__general {
	max-width: 760px;
	margin: 8px auto 20px;
	text-align: center;
	color: var(--st-color-muted);
	font-size: .98rem;
}
.st-plan__includes {
	margin: 2px 0 6px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 7px;
	text-align: left;
}
.st-plan__includes li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .9rem;
}
.st-plan__icon {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .72rem;
	font-weight: 700;
	line-height: 1;
	flex: 0 0 18px;
}
.st-plan__includes .is-included .st-plan__icon {
	background: #dcfce7;
	color: #166534;
}
.st-plan__includes .is-excluded .st-plan__icon {
	background: #f3f4f6;
	color: #4b5563;
}
.st-plan__includes .is-excluded span:last-child {
	color: #9ca3af;
}

/* Cards list */
.st-cards, .st-list-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.st-card-item, .st-list-cards li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 14px;
	border: 1px solid var(--st-color-border);
	border-radius: var(--st-radius-sm);
	background: #fafafa;
	gap: 12px;
	flex-wrap: wrap;
}
.st-list-cards li span.st-muted { margin-left: 8px; }

/* Plan calculator */
.st-plan-calc {
	margin: 8px 0 24px;
	padding: 22px;
	border: 1px solid var(--st-color-border);
	border-radius: var(--st-radius);
	background: #fff;
	box-shadow: var(--st-shadow);
}
.st-plan .st-plan-calc {
	width: 100%;
	box-sizing: border-box;
	margin: 2px 0;
	padding: 14px;
	box-shadow: none;
}
.st-plan-calc__head h3 {
	margin: 0 0 6px;
	font-size: 1.25rem;
	font-weight: 600;
}
.st-plan-calc__head p {
	margin: 0;
	color: var(--st-color-muted);
	font-size: .95rem;
}
.st-plan-calc__list {
	display: flex;
	flex-direction: column;
}
.st-plan-calc__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--st-color-border);
}
.st-plan-calc__row:last-child {
	border-bottom: none;
}
.st-plan-calc__label {
	font-size: .9rem;
	font-weight: 500;
	color: var(--st-color-muted);
}
.st-plan-calc__row select {
	font: inherit;
	padding: 8px 10px;
	border: 1px solid var(--st-color-border);
	border-radius: var(--st-radius-sm);
	background: #fafafa;
}
.st-plan-calc__value {
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.2;
}
.st-plan-calc__note {
	margin: 12px 0 0;
	font-size: .9rem;
	color: var(--st-color-muted);
}