/**
 * GST Data Engine — tool styles (search widget, result card, calculator,
 * state-code pages). Uses theme brand tokens with hard fallbacks so the
 * plugin renders correctly even without the gstsearch theme.
 */

/* ---------- Search widget ---------- */

.gs-search {
	max-width: 720px;
	margin: 0 auto;
	font-family: var(--gs-font, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
}

.gs-search__form {
	margin: 0;
}

.gs-search__box {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 8px;
	background: var(--gs-surface, #ffffff);
	border: 1px solid var(--gs-border, #e2e8f0);
	border-radius: var(--gs-radius-lg, 20px);
	padding: 8px;
	box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.05), var(--gs-shadow, 0 1px 3px rgba(15, 23, 42, 0.08));
	transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.gs-search__box:focus-within {
	border-color: var(--gs-primary, #2563eb);
	box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.04), 0 0 0 4px var(--gs-primary-light, #dbeafe), var(--gs-shadow-lg, 0 12px 40px rgba(37, 99, 235, 0.14));
}

.gs-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: none;
	background: transparent;
	font-size: 18px; /* ≥16px prevents iOS zoom */
	font-family: inherit;
	letter-spacing: 0.02em;
	color: var(--gs-text, #1e293b);
	padding: 12px 8px 12px 14px;
	text-transform: none;
}

.gs-search__input::placeholder {
	color: var(--gs-slate, #475569);
	opacity: 0.65;
	text-transform: none;
	letter-spacing: 0;
}

.gs-search__input.is-code {
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.gs-search__chip {
	align-self: center;
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--gs-primary-light, #dbeafe);
	color: var(--gs-primary-dark, #1d4ed8);
	white-space: nowrap;
}

.gs-search__btn {
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	padding: 12px 26px;
	border-radius: calc(var(--gs-radius-lg, 20px) - 8px);
	background: linear-gradient(135deg, var(--gs-primary, #2563eb), var(--gs-primary-dark, #1d4ed8));
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
	transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.gs-search__btn:hover,
.gs-search__btn:focus-visible {
	filter: brightness(1.06);
	box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
	transform: translateY(-1px);
}

.gs-search__btn:active {
	transform: translateY(0);
}

.gs-search__btn:focus-visible {
	outline: 3px solid var(--gs-primary-light, #dbeafe);
	outline-offset: 2px;
}

.gs-search__btn[disabled] {
	opacity: 0.6;
	cursor: wait;
	transform: none;
}

.gs-search__hint {
	margin: 10px 4px 0;
	font-size: 13.5px;
	color: var(--gs-slate, #475569);
}

.gs-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Result area ---------- */

.gs-search__result {
	margin-top: 18px;
}

.gs-search__result:empty {
	margin-top: 0;
}

/* Skeleton shimmer while loading */
.gs-search__skeleton {
	border-radius: var(--gs-radius, 12px);
	border: 1px solid var(--gs-border, #e2e8f0);
	background: var(--gs-surface, #ffffff);
	padding: 22px;
	box-shadow: var(--gs-shadow, 0 1px 3px rgba(15, 23, 42, 0.08));
}

.gs-search__skeleton .gs-skel-line {
	height: 14px;
	border-radius: 7px;
	margin-bottom: 14px;
	background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 45%, #eef2f7 65%);
	background-size: 400% 100%;
	animation: gs-shimmer 1.3s ease-in-out infinite;
}

.gs-search__skeleton .gs-skel-line--title {
	height: 22px;
	width: 55%;
}

.gs-search__skeleton .gs-skel-line--short {
	width: 35%;
}

.gs-search__skeleton .gs-skel-line:last-child {
	margin-bottom: 0;
}

@keyframes gs-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

/* Result card */
.gs-result-card {
	background: var(--gs-surface, #ffffff);
	border: 1px solid var(--gs-border, #e2e8f0);
	border-radius: var(--gs-radius, 12px);
	box-shadow: var(--gs-shadow, 0 1px 3px rgba(15, 23, 42, 0.08));
	padding: 24px;
	animation: gs-reveal 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.gs-result-card + .gs-result-card {
	margin-top: 14px;
}

@keyframes gs-reveal {
	from { opacity: 0; transform: translateY(10px) scale(0.99); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.gs-result-card { animation: none; }
	.gs-search__skeleton .gs-skel-line { animation: none; }
}

.gs-result-card__header {
	margin-bottom: 14px;
}

.gs-result-card__title {
	margin: 0 0 6px;
	font-size: 24px;
	line-height: 1.25;
	color: var(--gs-navy, #0f172a);
	overflow-wrap: anywhere;
}

.gs-result-card__sub {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.gs-gstin-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 15px;
	letter-spacing: 0.06em;
	color: var(--gs-slate, #475569);
	background: var(--gs-bg, #f8fafc);
	border: 1px solid var(--gs-border, #e2e8f0);
	border-radius: 8px;
	padding: 3px 8px;
}

/* Badges */
.gs-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	padding: 6px 11px;
	border-radius: 999px;
	letter-spacing: 0.02em;
}

.gs-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.gs-badge--status-active {
	color: #047857;
	background: rgba(16, 185, 129, 0.12);
}

.gs-badge--status-cancelled {
	color: #b91c1c;
	background: rgba(239, 68, 68, 0.12);
}

.gs-badge--status-suspended {
	color: #b45309;
	background: rgba(245, 158, 11, 0.14);
}

.gs-badge--status-unknown {
	color: var(--gs-slate, #475569);
	background: var(--gs-bg, #f8fafc);
}

.gs-badge--cached,
.gs-badge--live {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.gs-badge--cached {
	color: var(--gs-primary-dark, #1d4ed8);
	background: var(--gs-primary-light, #dbeafe);
}

.gs-badge--live {
	color: #047857;
	background: rgba(16, 185, 129, 0.12);
}

/* Field rows / table */
.gs-result-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.gs-result-table th,
.gs-result-table td,
.gs-result-row {
	text-align: left;
}

.gs-result-table th {
	width: 38%;
	font-weight: 600;
	color: var(--gs-slate, #475569);
	vertical-align: top;
}

.gs-result-table th,
.gs-result-table td {
	padding: 10px 8px;
	border-bottom: 1px solid var(--gs-border, #e2e8f0);
	overflow-wrap: anywhere;
}

.gs-result-table tr:last-child th,
.gs-result-table tr:last-child td {
	border-bottom: 0;
}

div.gs-result-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--gs-border, #e2e8f0);
}

div.gs-result-row span:first-child {
	color: var(--gs-slate, #475569);
	font-weight: 500;
}

div.gs-result-row strong {
	color: var(--gs-navy, #0f172a);
	overflow-wrap: anywhere;
	text-align: right;
}

.gs-result-card__meta {
	margin: 14px 0 0;
	font-size: 13.5px;
	color: var(--gs-slate, #475569);
}

.gs-result-card__link {
	display: inline-block;
	margin-top: 12px;
	font-weight: 600;
	color: var(--gs-primary, #2563eb);
	text-decoration: none;
}

.gs-result-card__link:hover {
	text-decoration: underline;
}

/* Error state */
.gs-search__error {
	border: 1px solid rgba(239, 68, 68, 0.35);
	background: rgba(239, 68, 68, 0.06);
	color: #991b1b;
	border-radius: var(--gs-radius, 12px);
	padding: 16px 18px;
	font-size: 15px;
	animation: gs-reveal 0.3s ease both;
}

.gs-search__error--info {
	border-color: rgba(245, 158, 11, 0.4);
	background: rgba(245, 158, 11, 0.07);
	color: #92400e;
}

/* ---------- Calculator ---------- */

.gs-calc {
	max-width: 560px;
	margin: 0 auto;
	background: var(--gs-surface, #ffffff);
	border: 1px solid var(--gs-border, #e2e8f0);
	border-radius: var(--gs-radius-lg, 20px);
	box-shadow: var(--gs-shadow, 0 1px 3px rgba(15, 23, 42, 0.08));
	padding: 26px;
	font-family: var(--gs-font, 'Inter', system-ui, sans-serif);
}

.gs-calc__modes,
.gs-calc__split {
	display: flex;
	gap: 8px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.gs-calc__mode,
.gs-calc__split-btn {
	flex: 1 1 auto;
	border: 1px solid var(--gs-border, #e2e8f0);
	background: var(--gs-bg, #f8fafc);
	color: var(--gs-slate, #475569);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	padding: 10px 14px;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.gs-calc__mode.is-active,
.gs-calc__split-btn.is-active {
	background: var(--gs-primary, #2563eb);
	border-color: var(--gs-primary, #2563eb);
	color: #ffffff;
	box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3);
}

.gs-calc__mode:focus-visible,
.gs-calc__split-btn:focus-visible,
.gs-calc__slab:focus-visible,
.gs-calc__copy:focus-visible {
	outline: 3px solid var(--gs-primary-light, #dbeafe);
	outline-offset: 2px;
}

.gs-calc__label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--gs-navy, #0f172a);
	margin-bottom: 6px;
}

.gs-calc__input {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 20px;
	font-weight: 600;
	color: var(--gs-text, #1e293b);
	padding: 14px 16px;
	border: 1px solid var(--gs-border, #e2e8f0);
	border-radius: var(--gs-radius, 12px);
	background: var(--gs-bg, #f8fafc);
	box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.05);
	margin-bottom: 18px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gs-calc__input:focus {
	outline: none;
	border-color: var(--gs-primary, #2563eb);
	box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.03), 0 0 0 4px var(--gs-primary-light, #dbeafe);
}

.gs-calc__slabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

.gs-calc__slab {
	border: 1px solid var(--gs-border, #e2e8f0);
	background: var(--gs-surface, #ffffff);
	color: var(--gs-slate, #475569);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	padding: 9px 16px;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.gs-calc__slab.is-active {
	background: linear-gradient(135deg, var(--gs-primary, #2563eb), var(--gs-primary-dark, #1d4ed8));
	border-color: var(--gs-primary-dark, #1d4ed8);
	color: #ffffff;
	box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3);
}

.gs-calc__result {
	border-top: 2px dashed var(--gs-border, #e2e8f0);
	padding-top: 16px;
	animation: gs-reveal 0.3s ease both;
}

.gs-calc__result .gs-result-row--total strong {
	font-size: 20px;
	color: var(--gs-primary-dark, #1d4ed8);
}

.gs-calc__result em {
	font-style: normal;
	font-size: 12.5px;
	color: var(--gs-slate, #475569);
}

.gs-calc__copy {
	margin-top: 16px;
	width: 100%;
	border: 1px solid var(--gs-primary, #2563eb);
	background: var(--gs-primary-light, #dbeafe);
	color: var(--gs-primary-dark, #1d4ed8);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	padding: 11px 16px;
	border-radius: var(--gs-radius, 12px);
	cursor: pointer;
	transition: background 0.15s ease;
}

.gs-calc__copy:hover {
	background: #c7dcfd;
}

.gs-calc__copy.is-copied {
	background: rgba(16, 185, 129, 0.15);
	border-color: var(--gs-success, #10b981);
	color: #047857;
}

/* ---------- State code table + programmatic pages ---------- */

.gs-state-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	background: var(--gs-surface, #ffffff);
	border: 1px solid var(--gs-border, #e2e8f0);
	border-radius: var(--gs-radius, 12px);
	overflow: hidden;
	box-shadow: var(--gs-shadow, 0 1px 3px rgba(15, 23, 42, 0.08));
}

.gs-state-table th {
	background: var(--gs-bg, #f8fafc);
	color: var(--gs-navy, #0f172a);
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--gs-border, #e2e8f0);
}

.gs-state-table td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--gs-border, #e2e8f0);
}

.gs-state-table tr:last-child td {
	border-bottom: 0;
}

.gs-state-table tbody tr:hover {
	background: var(--gs-primary-light, #dbeafe);
}

.gs-state-table a {
	color: var(--gs-primary, #2563eb);
	text-decoration: none;
	font-weight: 500;
}

.gs-state-table a:hover {
	text-decoration: underline;
}

.gs-breadcrumb {
	font-size: 13.5px;
	color: var(--gs-slate, #475569);
	margin-bottom: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.gs-breadcrumb a {
	color: var(--gs-primary, #2563eb);
	text-decoration: none;
}

.gs-breadcrumb a:hover {
	text-decoration: underline;
}

.gs-gstin-example {
	padding: 20px;
	margin-top: 14px;
}

.gs-gstin-example__label {
	margin: 0 0 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--gs-slate, #475569);
}

.gs-gstin-example__value {
	font-size: clamp(18px, 4vw, 28px);
	letter-spacing: 0.12em;
	margin: 0 0 10px;
	background: transparent;
	border: 0;
	padding: 0;
}

.gs-gstin-example__part {
	padding: 4px 2px;
	border-radius: 6px;
}

.gs-gstin-example__part--state { color: var(--gs-primary-dark, #1d4ed8); background: var(--gs-primary-light, #dbeafe); }
.gs-gstin-example__part--pan   { color: var(--gs-navy, #0f172a); }
.gs-gstin-example__part--entity { color: #b45309; background: rgba(245, 158, 11, 0.14); }
.gs-gstin-example__part--z     { color: var(--gs-slate, #475569); }
.gs-gstin-example__part--check { color: #047857; background: rgba(16, 185, 129, 0.12); }

.gs-gstin-example__note {
	margin: 0;
	font-size: 13.5px;
	color: var(--gs-slate, #475569);
}

.gs-company-list {
	list-style: none;
	margin: 18px 0;
	padding: 0;
}

.gs-company-list__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	background: var(--gs-surface, #ffffff);
	border: 1px solid var(--gs-border, #e2e8f0);
	border-radius: var(--gs-radius, 12px);
	margin-bottom: 8px;
	box-shadow: var(--gs-shadow, 0 1px 3px rgba(15, 23, 42, 0.08));
}

.gs-company-list__item a {
	font-weight: 600;
	color: var(--gs-navy, #0f172a);
	text-decoration: none;
	flex: 1 1 240px;
}

.gs-company-list__item a:hover {
	color: var(--gs-primary, #2563eb);
}

.gs-company-list__status {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--gs-slate, #475569);
}

.gs-pagination {
	display: flex;
	gap: 10px;
	margin: 20px 0;
}

/* Mobile */
@media (max-width: 560px) {
	.gs-search__box {
		flex-wrap: wrap;
	}

	.gs-search__btn {
		width: 100%;
	}

	.gs-search__chip {
		position: absolute;
		top: -14px;
		right: 12px;
	}

	.gs-result-table th {
		width: 44%;
	}

	.gs-calc {
		padding: 18px;
	}
}