/* ============================================================
   Surface System v2 — controls
   Buttons, chips, tabs, form fields, badges, pagination.
   Legacy class names keep working; this layer retunes them onto the
   shared tokens so a button in the shop matches one in the PMS.
   ============================================================ */

/* ---------- Focus, sitewide ----------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: none;
	box-shadow: var(--s-focus-ring);
	border-radius: calc(var(--s-radius-xs) * var(--s-radius-scale));
}

/* ---------- Buttons --------------------------------------------------- */

.s-btn,
.seraj-btn {
	--btn-bg: transparent;
	--btn-ink: var(--seraj-text);
	--btn-edge: var(--s-line);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 44px;
	padding: .7rem 1.25rem;
	font-family: inherit;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	border-radius: var(--s-radius-pill);
	border: 1px solid var(--btn-edge);
	background: var(--btn-bg);
	color: var(--btn-ink);
	transition:
		background-color var(--s-fast) var(--s-ease),
		color var(--s-fast) var(--s-ease),
		border-color var(--s-fast) var(--s-ease),
		box-shadow var(--s-fast) var(--s-ease),
		transform var(--s-fast) var(--s-ease);
}
.s-btn:hover,
.seraj-btn:hover { transform: translateY(-1px); }
.s-btn:active,
.seraj-btn:active { transform: translateY(1px) scale(.99); }

.s-btn--primary,
.seraj-btn--primary {
	--btn-bg: var(--seraj-primary);
	--btn-ink: #fff;
	--btn-edge: var(--seraj-primary);
	box-shadow: var(--s-shadow-raised);
}
.s-btn--primary:hover,
.seraj-btn--primary:hover { --btn-bg: var(--seraj-primary-ink); --btn-edge: var(--seraj-primary-ink); color: #fff; }

.s-btn--secondary {
	--btn-bg: var(--s-tint);
	--btn-ink: var(--seraj-primary-ink);
	--btn-edge: var(--s-line-accent);
}
.s-btn--secondary:hover { --btn-bg: var(--s-tint-strong); }

.s-btn--ghost,
.seraj-btn--ghost { --btn-bg: transparent; --btn-ink: var(--seraj-text); --btn-edge: var(--s-line); }
.s-btn--ghost:hover,
.seraj-btn--ghost:hover { --btn-bg: var(--s-sunken); --btn-edge: var(--s-line-accent); color: var(--seraj-text); }

.s-btn--quiet { --btn-edge: transparent; padding-inline: .75rem; }
.s-btn--quiet:hover { --btn-bg: var(--s-sunken); }

.s-btn--danger { --btn-bg: var(--s-danger); --btn-ink: #fff; --btn-edge: var(--s-danger); }
.s-btn--danger:hover { --btn-bg: color-mix(in srgb, #000 12%, var(--s-danger)); color: #fff; }

.s-btn--sm { min-height: 36px; padding: .45rem .9rem; font-size: .85rem; }
.s-btn--lg,
.seraj-btn--lg { min-height: 52px; padding: 1rem 1.65rem; font-size: 1rem; }
.s-btn--block { display: flex; width: 100%; }

.s-btn[disabled],
.s-btn.is-disabled,
.seraj-btn[disabled] {
	opacity: var(--s-disabled-opacity);
	pointer-events: none;
	box-shadow: none;
}

/* Loading — the label stays for width, a spinner takes its place. */
.s-btn.is-loading { color: transparent !important; pointer-events: none; }
.s-btn.is-loading::after {
	content: "";
	position: absolute;
	width: 1.05em;
	height: 1.05em;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-top-color: transparent;
	color: var(--btn-ink);
	animation: s-spin .7s linear infinite;
}
@keyframes s-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .s-btn.is-loading::after { animation-duration: 2s; } }

.s-btn__icon { display: inline-flex; width: 1.15em; height: 1.15em; }
.s-btn__icon svg { width: 100%; height: 100%; }

/* Icon-only buttons keep a real touch target. */
.s-iconbtn {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--s-radius-pill);
	border: 1px solid transparent;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color var(--s-fast) var(--s-ease), border-color var(--s-fast) var(--s-ease);
}
.s-iconbtn:hover { background: var(--s-sunken); border-color: var(--s-hairline); }
.s-iconbtn svg { width: 20px; height: 20px; }

/* ---------- Chips, tabs and segmented controls ------------------------ */

.s-chip,
.seraj-chip,
.seraj-kit-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	min-height: 34px;
	padding: .35rem .8rem;
	font-size: .85rem;
	font-weight: 600;
	border-radius: var(--s-radius-pill);
	border: 1px solid var(--s-hairline);
	background: var(--s-raised);
	color: var(--seraj-text);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--s-fast) var(--s-ease), border-color var(--s-fast) var(--s-ease), color var(--s-fast) var(--s-ease);
}
.s-chip:hover,
.seraj-chip:hover,
.seraj-kit-chip:hover { border-color: var(--s-line-accent); background: var(--s-tint); }
.s-chip.is-active,
.s-chip[aria-pressed="true"],
.seraj-kit-chip.is-active,
.seraj-kit-chip[aria-current="true"] {
	background: var(--s-selected-bg);
	border-color: var(--s-line-accent);
	color: var(--s-selected-ink);
}
.s-chip__count { font-weight: 500; color: var(--seraj-muted); }

.s-tabs {
	display: flex;
	gap: .25rem;
	overflow-x: auto;
	border-bottom: 1px solid var(--s-hairline);
	scrollbar-width: none;
}
.s-tabs::-webkit-scrollbar { display: none; }
.s-tab {
	position: relative;
	padding: .7rem 1rem;
	font-weight: 600;
	font-size: .93rem;
	color: var(--seraj-muted);
	border: 0;
	background: none;
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--s-fast) var(--s-ease);
}
.s-tab:hover { color: var(--seraj-text); }
.s-tab::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px 0;
	height: 2px;
	background: var(--seraj-primary);
	scale: 0 1;
	transition: scale var(--s-base) var(--s-ease);
}
.s-tab.is-active,
.s-tab[aria-selected="true"] { color: var(--seraj-text); }
.s-tab.is-active::after,
.s-tab[aria-selected="true"]::after { scale: 1 1; }

.s-segment {
	display: inline-flex;
	padding: 3px;
	gap: 2px;
	background: var(--s-sunken);
	border: 1px solid var(--s-hairline);
	border-radius: var(--s-radius-pill);
}
.s-segment__item {
	border: 0;
	background: none;
	cursor: pointer;
	padding: .4rem .9rem;
	font-size: .85rem;
	font-weight: 600;
	border-radius: var(--s-radius-pill);
	color: var(--seraj-muted);
	transition: background-color var(--s-fast) var(--s-ease), color var(--s-fast) var(--s-ease);
}
.s-segment__item.is-active,
.s-segment__item[aria-pressed="true"] { background: var(--s-raised); color: var(--seraj-text); box-shadow: var(--s-shadow-raised); }

/* ---------- Filter bar ------------------------------------------------ */

.s-filterbar,
.seraj-kit-filter-bar {
	background: color-mix(in srgb, var(--s-raised) 90%, transparent);
	backdrop-filter: blur(10px);
	border-block: 1px solid var(--s-hairline);
	z-index: 20;
}
.s-filterbar--sticky,
.seraj-kit-filter-bar--sticky { position: sticky; top: var(--seraj-header-height, 0); }

/* ---------- Form fields ----------------------------------------------- */

.s-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.s-field__label { font-size: .85rem; font-weight: 600; color: var(--seraj-text); }
.s-field__req { color: var(--s-danger); margin-inline-start: .15rem; }
.s-field__hint { font-size: .8rem; color: var(--seraj-muted); }
.s-field__error { font-size: .82rem; color: var(--s-danger); font-weight: 600; }

.s-input,
.s-select,
.s-textarea,
.seraj-input,
.seraj-select,
input[type="text"].seraj-field,
input[type="email"].seraj-field,
input[type="tel"].seraj-field,
input[type="number"].seraj-field,
input[type="date"].seraj-field,
input[type="password"].seraj-field,
input[type="search"].seraj-field,
select.seraj-field,
textarea.seraj-field {
	width: 100%;
	min-height: 44px;
	padding: .6rem .85rem;
	font-family: inherit;
	font-size: .95rem;
	color: var(--seraj-text);
	background: var(--s-raised);
	border: 1px solid var(--s-line);
	border-radius: calc(var(--s-radius-sm) * var(--s-radius-scale));
	transition: border-color var(--s-fast) var(--s-ease), box-shadow var(--s-fast) var(--s-ease), background-color var(--s-fast) var(--s-ease);
}
.s-textarea, textarea.seraj-field { min-height: 7rem; resize: vertical; line-height: 1.55; }
.s-input::placeholder, .s-textarea::placeholder { color: color-mix(in srgb, var(--seraj-muted) 80%, transparent); }
.s-input:hover, .s-select:hover, .s-textarea:hover { border-color: var(--s-line-accent); }
.s-input:focus, .s-select:focus, .s-textarea:focus,
.seraj-input:focus, .seraj-select:focus {
	outline: none;
	border-color: var(--seraj-primary);
	box-shadow: var(--s-focus-ring);
}
.s-input[aria-invalid="true"],
.s-field.is-invalid .s-input,
.s-field.is-invalid .s-select,
.s-field.is-invalid .s-textarea { border-color: var(--s-danger); }
.s-input[disabled], .s-select[disabled], .s-textarea[disabled] { background: var(--s-sunken); opacity: var(--s-disabled-opacity); cursor: not-allowed; }

.s-select {
	appearance: none;
	padding-inline-end: 2.2rem;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 1.05rem center, right .8rem center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.s-field-row { display: grid; gap: var(--s-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Checkbox / radio rows read as tappable surfaces. */
.s-check {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	padding: .65rem .8rem;
	border: 1px solid var(--s-hairline);
	border-radius: calc(var(--s-radius-sm) * var(--s-radius-scale));
	cursor: pointer;
	transition: background-color var(--s-fast) var(--s-ease), border-color var(--s-fast) var(--s-ease);
}
.s-check:hover { background: var(--s-sunken); }
.s-check input { margin-top: .2rem; accent-color: var(--seraj-primary); width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.s-check.is-checked,
.s-check:has(input:checked) { background: var(--s-tint); border-color: var(--s-line-accent); }

/* Quantity stepper */
.s-qty { display: inline-flex; align-items: center; border: 1px solid var(--s-line); border-radius: var(--s-radius-pill); overflow: hidden; }
.s-qty button { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; font-size: 1.1rem; color: var(--seraj-text); }
.s-qty button:hover { background: var(--s-sunken); }
.s-qty input { width: 3rem; border: 0; text-align: center; font-weight: 600; background: none; min-height: 40px; }
.s-qty input:focus { outline: none; }

/* ---------- Badges and status pills ----------------------------------- */

.s-badge {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .22rem .6rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: var(--s-radius-pill);
	background: var(--s-sunken);
	color: var(--seraj-muted);
	border: 1px solid var(--s-hairline);
	white-space: nowrap;
}
.s-badge::before { content: ""; width: .42em; height: .42em; border-radius: 50%; background: currentColor; }
.s-badge--plain::before { display: none; }
.s-badge--ok,
.s-badge--available,
.s-badge--paid,
.s-badge--confirmed,
.s-badge--delivered { color: var(--s-ok); background: color-mix(in srgb, var(--s-ok) 10%, var(--s-raised)); border-color: color-mix(in srgb, var(--s-ok) 26%, transparent); }
.s-badge--warn,
.s-badge--pending,
.s-badge--processing,
.s-badge--hold { color: var(--s-warn); background: color-mix(in srgb, var(--s-warn) 12%, var(--s-raised)); border-color: color-mix(in srgb, var(--s-warn) 28%, transparent); }
.s-badge--danger,
.s-badge--cancelled,
.s-badge--refunded,
.s-badge--soldout,
.s-badge--failed { color: var(--s-danger); background: color-mix(in srgb, var(--s-danger) 9%, var(--s-raised)); border-color: color-mix(in srgb, var(--s-danger) 24%, transparent); }
.s-badge--info,
.s-badge--shipped,
.s-badge--quoted { color: var(--s-info); background: color-mix(in srgb, var(--s-info) 9%, var(--s-raised)); border-color: color-mix(in srgb, var(--s-info) 24%, transparent); }
.s-badge--sale { color: #fff; background: var(--seraj-accent, #a67043); border-color: transparent; }

/* Badge floating over card media */
.s-badge--overlay {
	position: absolute;
	inset-block-start: .7rem;
	inset-inline-start: .7rem;
	z-index: 2;
	background: color-mix(in srgb, var(--s-floating) 88%, transparent);
	backdrop-filter: blur(6px);
	box-shadow: var(--s-shadow-raised);
}

/* ---------- Pagination, breadcrumbs, back links ------------------------ */

.s-pagination { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; align-items: center; margin-top: var(--s-gap-lg); }
.s-pagination .page-numbers,
.s-pagination a,
.s-pagination span {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding-inline: .6rem;
	border-radius: calc(var(--s-radius-sm) * var(--s-radius-scale));
	border: 1px solid var(--s-hairline);
	background: var(--s-raised);
	font-weight: 600;
	font-size: .9rem;
	transition: background-color var(--s-fast) var(--s-ease), border-color var(--s-fast) var(--s-ease);
}
.s-pagination .page-numbers:hover { border-color: var(--s-line-accent); background: var(--s-tint); }
.s-pagination .page-numbers.current { background: var(--seraj-primary); border-color: var(--seraj-primary); color: #fff; }
.s-pagination .page-numbers.dots { border-color: transparent; background: none; }

.s-crumbs { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .85rem; color: var(--seraj-muted); }
.s-crumbs li { display: inline-flex; align-items: center; gap: .35rem; }
.s-crumbs li + li::before { content: "/"; opacity: .5; }
.s-crumbs a:hover { color: var(--seraj-primary); }

.s-back { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; color: var(--seraj-muted); }
.s-back:hover { color: var(--seraj-primary); }
.s-back svg { transition: transform var(--s-fast) var(--s-ease); }
.s-back:hover svg { transform: translateX(-3px); }

/* ---------- Touch targets on small screens ----------------------------- */

@media (max-width: 640px) {
	.s-btn, .seraj-btn { min-height: 46px; }
	.s-chip, .seraj-kit-chip { min-height: 38px; }
}