/* ============================================================
   Surface System v2 — surfaces
   Panels, sections, wells, drawers, modals, stat tiles, empty and
   loading states. Everything raised on the site is made of the same
   material as the cards.
   ============================================================ */

/* ---------- The primitive ------------------------------------------ */

.s-surface {
	position: relative;
	background: var(--s-raised);
	border: 1px solid var(--s-hairline);
	border-radius: calc(var(--s-radius-md) * var(--s-radius-scale));
	box-shadow: var(--s-shadow-raised);
	color: var(--seraj-text);
}

.s-surface--flat { background: var(--s-flat); box-shadow: none; }
.s-surface--sunken { background: var(--s-sunken); box-shadow: var(--s-shadow-inset); border-color: transparent; }
.s-surface--tint { background: var(--s-tint); border-color: var(--s-line-accent); }
.s-surface--quiet { box-shadow: none; }
.s-surface--floating { background: var(--s-floating); box-shadow: var(--s-shadow-floating); border-radius: calc(var(--s-radius-lg) * var(--s-radius-scale)); }
.s-surface--sm { border-radius: calc(var(--s-radius-sm) * var(--s-radius-scale)); }
.s-surface--lg { border-radius: calc(var(--s-radius-lg) * var(--s-radius-scale)); }

.s-surface--interactive {
	transition:
		transform var(--s-base) var(--s-ease),
		box-shadow var(--s-base) var(--s-ease),
		border-color var(--s-base) var(--s-ease);
}
.s-surface--interactive:hover {
	transform: translateY(var(--s-lift));
	box-shadow: var(--s-shadow-lifted);
	border-color: var(--s-line-accent);
}

/* ---------- Panel: a surface with a head, body and foot ------------ */

.s-panel {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.s-panel__head {
	display: flex;
	align-items: center;
	gap: var(--s-gap);
	flex-wrap: wrap;
	padding: var(--s-pad);
	border-bottom: 1px solid var(--s-hairline);
	background: var(--s-sunken);
}
.s-panel__title {
	margin: 0;
	font-family: var(--seraj-font-display);
	font-size: 1.05rem;
	line-height: 1.25;
	flex: 1 1 12rem;
	min-width: 0;
}
.s-panel__sub {
	margin: .2rem 0 0;
	font-size: .85rem;
	color: var(--seraj-muted);
	font-family: var(--seraj-font-body);
	font-weight: 400;
}
.s-panel__actions { display: flex; align-items: center; gap: var(--s-gap-sm); flex-wrap: wrap; }
.s-panel__body { padding: var(--s-pad); display: flex; flex-direction: column; gap: var(--s-gap); }
.s-panel__body--flush { padding: 0; }
.s-panel__foot {
	padding: var(--s-pad);
	border-top: 1px solid var(--s-hairline);
	background: var(--s-sunken);
	display: flex;
	align-items: center;
	gap: var(--s-gap-sm);
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* ---------- Legacy panel classes adopt the same material ----------- */

.seraj-panel,
.seraj-box,
.seraj-partner-card,
.seraj-manager-card,
.seraj-pms-panel,
.seraj-shop-panel,
.seraj-account-card,
.seraj-form-card,
.seraj-widget-card {
	background: var(--s-raised);
	border: 1px solid var(--s-hairline);
	border-radius: calc(var(--s-radius-md) * var(--s-radius-scale));
	box-shadow: var(--s-shadow-raised);
}

/* ---------- Section frame ------------------------------------------ */

.s-section { padding-block: var(--s-section-y); }
.s-section--tight { padding-block: var(--s-section-y-tight); }
.s-section--alt { background: var(--s-sunken); }
.s-section--tinted { background: var(--s-tint); }
.s-section + .s-section--alt,
.s-section--alt + .s-section { border-top: 1px solid var(--s-hairline); }

.s-section__inner {
	width: min(100% - 2 * var(--s-gap-lg), var(--seraj-max, 1280px));
	margin-inline: auto;
}
.s-section__inner--narrow { width: min(100% - 2 * var(--s-gap-lg), var(--seraj-max-narrow, 780px)); }

/* Section header rhythm — same everywhere it appears. */
.s-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-gap-lg); flex-wrap: wrap; margin-bottom: var(--s-gap-lg); }
.s-sechead__text { max-width: 62ch; }
.s-sechead__eyebrow {
	display: block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--seraj-primary);
	margin-bottom: .4rem;
}
.s-sechead__title { margin: 0; font-size: clamp(1.5rem, 3vw, 2.15rem); }
.s-sechead__intro { margin: .5rem 0 0; color: var(--seraj-muted); text-wrap: pretty; }
.s-sechead__action {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 600;
	color: var(--seraj-primary);
	white-space: nowrap;
}
.s-sechead__action svg,
.s-sechead__action .s-arrow { transition: transform var(--s-base) var(--s-ease); }
.s-sechead__action:hover svg,
.s-sechead__action:hover .s-arrow { transform: translateX(3px); }

/* The shared kit header inherits the same rhythm. */
.seraj-kit-section-header { margin-bottom: var(--s-gap-lg); }
.seraj-kit-section-header__action { display: inline-flex; align-items: center; gap: .4rem; }

/* ---------- Grids and rails ----------------------------------------- */

.s-grid { display: grid; gap: var(--s-grid-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.s-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.s-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }
.seraj-card-grid { gap: var(--s-grid-gap); }

.s-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(min(78%, 17rem), 1fr);
	gap: var(--s-grid-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--s-gap-lg);
	padding-block: .35rem;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	mask-image: linear-gradient(to right, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
}
.s-rail > * { scroll-snap-align: start; }
.s-rail::-webkit-scrollbar { height: 6px; }
.s-rail::-webkit-scrollbar-thumb { background: var(--s-line); border-radius: var(--s-radius-pill); }

.s-rail-wrap { position: relative; }
.s-rail-nav {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 3;
	width: 40px;
	height: 40px;
	display: none;
	place-items: center;
	border-radius: var(--s-radius-pill);
	border: 1px solid var(--s-hairline);
	background: var(--s-floating);
	box-shadow: var(--s-shadow-lifted);
	cursor: pointer;
	transition: transform var(--s-fast) var(--s-ease), opacity var(--s-fast) linear;
}
.s-rail-nav[hidden] { display: none !important; }
.s-rail-nav:hover { transform: translateY(-1px) scale(1.04); }
.s-rail-nav--prev { inset-inline-start: -18px; }
.s-rail-nav--next { inset-inline-end: -18px; }
@media (min-width: 900px) { .s-rail-wrap .s-rail-nav { display: grid; } }

/* ---------- Stat tiles ---------------------------------------------- */

.s-stats { display: grid; gap: var(--s-grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.s-stat {
	background: var(--s-raised);
	border: 1px solid var(--s-hairline);
	border-radius: calc(var(--s-radius-md) * var(--s-radius-scale));
	box-shadow: var(--s-shadow-raised);
	padding: var(--s-pad);
	display: flex;
	flex-direction: column;
	gap: .3rem;
	min-width: 0;
}
.s-stat__top { display: flex; align-items: center; gap: .5rem; }
.s-stat__icon {
	width: 34px; height: 34px;
	display: grid; place-items: center;
	border-radius: calc(var(--s-radius-sm) * var(--s-radius-scale));
	background: var(--s-tint);
	color: var(--seraj-primary);
	flex: 0 0 auto;
}
.s-stat__icon svg { width: 18px; height: 18px; }
.s-stat__label { font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--seraj-muted); }
.s-stat__value { font-family: var(--seraj-font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.1; }
.s-stat__meta { font-size: .82rem; color: var(--seraj-muted); }
.s-stat__trend { display: inline-flex; align-items: center; gap: .25rem; font-size: .82rem; font-weight: 600; }
.s-stat__trend--up { color: var(--s-ok); }
.s-stat__trend--down { color: var(--s-danger); }
.s-stat__trend--flat { color: var(--s-neutral); }

/* ---------- Wells, callouts and notices ----------------------------- */

.s-well {
	background: var(--s-sunken);
	border-radius: calc(var(--s-radius-sm) * var(--s-radius-scale));
	padding: var(--s-pad);
}
.s-note {
	display: flex;
	gap: .7rem;
	padding: var(--s-pad);
	border-radius: calc(var(--s-radius-sm) * var(--s-radius-scale));
	border: 1px solid var(--s-hairline);
	border-inline-start: 3px solid var(--s-neutral);
	background: var(--s-sunken);
	font-size: .92rem;
}
.s-note__icon { flex: 0 0 auto; margin-top: .1rem; }
.s-note__body { min-width: 0; }
.s-note__body > :first-child { margin-top: 0; }
.s-note__body > :last-child { margin-bottom: 0; }
.s-note--ok { border-inline-start-color: var(--s-ok); background: color-mix(in srgb, var(--s-ok) 7%, var(--s-raised)); }
.s-note--warn { border-inline-start-color: var(--s-warn); background: color-mix(in srgb, var(--s-warn) 8%, var(--s-raised)); }
.s-note--danger { border-inline-start-color: var(--s-danger); background: color-mix(in srgb, var(--s-danger) 7%, var(--s-raised)); }
.s-note--info { border-inline-start-color: var(--s-info); background: color-mix(in srgb, var(--s-info) 7%, var(--s-raised)); }

/* ---------- Empty state --------------------------------------------- */

.s-empty,
.seraj-kit-empty {
	text-align: center;
	padding: clamp(2rem, 5vw, 3.5rem) var(--s-pad);
	border: 1px dashed var(--s-line);
	border-radius: calc(var(--s-radius-lg) * var(--s-radius-scale));
	background: var(--s-sunken);
	color: var(--seraj-muted);
}
.s-empty__icon {
	width: 56px; height: 56px;
	margin: 0 auto .85rem;
	display: grid; place-items: center;
	border-radius: var(--s-radius-pill);
	background: var(--s-tint);
	color: var(--seraj-primary);
}
.s-empty__icon svg { width: 26px; height: 26px; }
.s-empty__title { margin: 0 0 .35rem; font-size: 1.15rem; color: var(--seraj-text); }
.s-empty__text { margin: 0 auto; max-width: 46ch; }
.s-empty__actions { margin-top: 1.1rem; display: flex; gap: var(--s-gap-sm); justify-content: center; flex-wrap: wrap; }

/* ---------- Skeletons ------------------------------------------------ */

.s-skeleton,
.seraj-kit-skeleton {
	background:
		linear-gradient(90deg,
			color-mix(in srgb, var(--seraj-text) 6%, transparent) 25%,
			color-mix(in srgb, var(--seraj-text) 10%, transparent) 37%,
			color-mix(in srgb, var(--seraj-text) 6%, transparent) 63%);
	background-size: 400% 100%;
	animation: s-shimmer 1.4s ease infinite;
	border-radius: calc(var(--s-radius-xs) * var(--s-radius-scale));
	color: transparent;
}
.s-skeleton--line { height: .8rem; margin-bottom: .5rem; }
.s-skeleton--title { height: 1.2rem; width: 60%; margin-bottom: .75rem; }
.s-skeleton--media { aspect-ratio: 4 / 3; width: 100%; border-radius: calc(var(--s-radius-md) * var(--s-radius-scale)); }
@keyframes s-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .s-skeleton, .seraj-kit-skeleton { animation: none; } }

/* ---------- Modals and drawers --------------------------------------- */

.s-scrim {
	position: fixed;
	inset: 0;
	background: rgba(10, 16, 12, .48);
	backdrop-filter: blur(3px);
	z-index: 900;
	opacity: 0;
	transition: opacity var(--s-base) var(--s-ease);
}
.s-scrim.is-open { opacity: 1; }

.s-modal {
	position: fixed;
	z-index: 901;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	width: min(100% - 2rem, 34rem);
	max-height: min(86vh, 48rem);
	overflow: auto;
	background: var(--s-floating);
	border: 1px solid var(--s-hairline);
	border-radius: calc(var(--s-radius-lg) * var(--s-radius-scale));
	box-shadow: var(--s-shadow-floating);
	opacity: 0;
	scale: .97;
	transition: opacity var(--s-base) var(--s-ease), scale var(--s-base) var(--s-ease);
}
.s-modal.is-open { opacity: 1; scale: 1; }

.s-drawer {
	position: fixed;
	z-index: 901;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(100%, 26rem);
	display: flex;
	flex-direction: column;
	background: var(--s-floating);
	border-inline-start: 1px solid var(--s-hairline);
	box-shadow: var(--s-shadow-floating);
	translate: 100% 0;
	transition: translate var(--s-slow) var(--s-ease-out);
	border-start-start-radius: calc(var(--s-radius-lg) * var(--s-radius-scale));
	border-end-start-radius: calc(var(--s-radius-lg) * var(--s-radius-scale));
}
.s-drawer.is-open { translate: 0 0; }
.s-drawer__head,
.s-modal__head {
	display: flex;
	align-items: center;
	gap: var(--s-gap-sm);
	padding: var(--s-pad);
	border-bottom: 1px solid var(--s-hairline);
}
.s-drawer__title,
.s-modal__title { margin: 0; font-size: 1.05rem; flex: 1 1 auto; }
.s-drawer__body,
.s-modal__body { padding: var(--s-pad); overflow: auto; flex: 1 1 auto; }
.s-drawer__foot,
.s-modal__foot {
	padding: var(--s-pad);
	padding-bottom: max(var(--s-pad), env(safe-area-inset-bottom));
	border-top: 1px solid var(--s-hairline);
	background: var(--s-sunken);
	display: flex;
	gap: var(--s-gap-sm);
	flex-wrap: wrap;
}

/* ---------- Sticky rails (booking widgets and friends) --------------- */

.s-sticky {
	position: sticky;
	top: calc(var(--seraj-header-height, 0px) + var(--s-gap));
	background: var(--s-raised);
	border: 1px solid var(--s-hairline);
	border-radius: calc(var(--s-radius-lg) * var(--s-radius-scale));
	box-shadow: var(--s-shadow-raised);
	padding: var(--s-pad);
}

/* ---------- Long-form content ---------------------------------------- */

.s-prose,
.seraj-prose { max-width: var(--s-measure); text-wrap: pretty; }
.s-prose > * + * { margin-top: 1.1em; }
.s-prose h2 { margin-top: 2em; }
.s-prose h3 { margin-top: 1.6em; }
.s-prose img,
.s-prose figure img { border-radius: calc(var(--s-radius-md) * var(--s-radius-scale)); }
.s-prose figcaption { font-size: .85rem; color: var(--seraj-muted); margin-top: .5rem; }
.s-prose blockquote {
	margin-inline: 0;
	padding: var(--s-pad) var(--s-pad-lg);
	border-inline-start: 3px solid var(--seraj-primary);
	background: var(--s-sunken);
	border-radius: 0 calc(var(--s-radius-sm) * var(--s-radius-scale)) calc(var(--s-radius-sm) * var(--s-radius-scale)) 0;
	font-family: var(--seraj-font-display);
	font-size: 1.15rem;
	line-height: 1.5;
}
.s-prose hr { border: 0; border-top: 1px solid var(--s-hairline); margin-block: 2.5em; }
.s-prose table { width: 100%; border-collapse: collapse; }