/* --- Services catalog (migrated from templates/services/gsmbit.php) --- */

/* ─── Shell layout (painel logado) ───────────────────── */
.uds-page-container.uds-services--shell {
	width: 100%;
	max-width: var(--user-container-max, 1280px);
	margin: 0 auto;
	padding: var(--user-container-pad, 24px);
	padding-bottom: 2rem;
	box-sizing: border-box;
}

.uds-shell__main:has(.uds-services--shell) {
	padding-top: 0.75rem;
}

/* Hero compacto por categoria */
.sv-shell-hero {
	position: relative;
	overflow: hidden;
	border-radius: 1.25rem;
	margin-bottom: 1.25rem;
	padding: 1.625rem 1.5rem;
	/* --panel-hero-* vêm de Admin → Aparência; sem eles o hero segue o tema global. */
	--hero-on: var(--panel-hero-on, var(--theme-on-primary, #fff));
	--hero-on-rgb: var(--panel-hero-on-rgb, 255 255 255);
	color: var(--hero-on);
	background: var(--panel-hero-gradient, var(--theme-gradient, linear-gradient(135deg, var(--theme-primary, #4f46e5) 0%, var(--theme-primary-hover, #4338ca) 50%, var(--theme-primary-hover, #312e81) 100%)));
	box-shadow: 0 16px 40px rgb(var(--panel-hero-shadow-rgb, var(--theme-primary-rgb, 79 70 229)) / 0.3);
}

.sv-shell-hero--cyan,
.sv-shell-hero--violet,
.sv-shell-hero--amber,
.sv-shell-hero--emerald,
.sv-shell-hero--indigo {
	background: var(--panel-hero-gradient, var(--theme-gradient));
	box-shadow: 0 16px 40px rgb(var(--panel-hero-shadow-rgb, var(--theme-primary-rgb)) / 0.3);
	color: var(--hero-on);
}

/* Camada de efeitos vinda do admin. Duplicada aqui porque uds-dashboard.css
   não carrega nas páginas de serviços. */
.sv-shell-hero__custom {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.sv-shell-hero__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 60% 90% at 100% 0%, rgb(var(--hero-on-rgb) / 0.16), transparent 58%),
		radial-gradient(ellipse 45% 70% at 0% 100%, rgb(var(--hero-on-rgb) / 0.1), transparent 55%);
}

.sv-shell-hero__grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.07;
	background-image:
		linear-gradient(rgb(var(--hero-on-rgb) / 0.7) 1px, transparent 1px),
		linear-gradient(90deg, rgb(var(--hero-on-rgb) / 0.7) 1px, transparent 1px);
	background-size: 42px 42px;
}

/* Mascote do hero. Dimensões explícitas e !important porque o preflight do
   Tailwind (img { height: auto; max-width: 100% }) está ativo no site. */
.sv-shell-hero__mascot {
	position: absolute;
	right: -0.75rem;
	bottom: -0.5rem;
	width: 8.3rem;
	height: 7.5rem;
	opacity: 0.42;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.sv-shell-hero__mascot::before {
	content: "";
	position: absolute;
	inset: 6% -14% -8%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 55%, rgb(255 255 255 / 0.32), rgb(125 211 252 / 0.18) 46%, transparent 70%);
	filter: blur(20px);
}

.sv-shell-hero__mascot img {
	position: relative;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain;
	filter: drop-shadow(0 16px 30px rgb(2 6 23 / 0.5));
	animation: sv-hero-float 7s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes sv-hero-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
	.sv-shell-hero__mascot img { animation: none; }
}

@media (min-width: 700px) {
	.sv-shell-hero { min-height: 10rem; padding-right: 11rem; display: flex; flex-direction: column; justify-content: center; }
	.sv-shell-hero__mascot { width: 11.1rem; height: 10rem; right: 0; bottom: -0.75rem; opacity: 1; z-index: 1; }
}

@media (min-width: 900px) {
	.sv-shell-hero { min-height: 11rem; padding-right: 14rem; }
	.sv-shell-hero__mascot { width: 13.3rem; height: 12rem; right: 0.5rem; bottom: -1rem; }
}

@media (min-width: 1200px) {
	.sv-shell-hero { min-height: 12rem; padding-right: 16.5rem; }
	.sv-shell-hero__mascot { width: 14.9rem; height: 13.5rem; right: 1.25rem; bottom: -1.5rem; }
}

.sv-shell-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 1.25rem;
	flex-wrap: wrap;
}

.sv-shell-hero__crumb {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: rgb(var(--hero-on-rgb) / 0.78);
	text-decoration: none;
	margin-bottom: 0.5rem;
	transition: color 0.15s;
}

.sv-shell-hero__crumb:hover { color: var(--hero-on); }

.sv-shell-hero__eyebrow {
	margin: 0 0 0.25rem;
	font-size: 0.6875rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.85;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.sv-shell-hero__title {
	margin: 0;
	font-size: clamp(1.35rem, 3.2vw, 1.75rem);
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.025em;
}

.sv-shell-hero__sub {
	margin: 0.4rem 0 0;
	font-size: 0.8125rem;
	opacity: 0.88;
	max-width: 36rem;
}

.sv-shell-hero__aside {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	flex-shrink: 0;
}

.sv-shell-hero__balance {
	text-align: right;
	padding: 0.5rem 0.85rem;
	border-radius: 0.75rem;
	background: rgb(var(--hero-on-rgb) / 0.12);
	border: 1px solid rgb(var(--hero-on-rgb) / 0.2);
	backdrop-filter: blur(8px);
}

.sv-shell-hero__balance span {
	display: block;
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.8;
}

.sv-shell-hero__balance strong {
	display: block;
	font-size: 1.125rem;
	font-weight: 900;
	margin-top: 0.1rem;
}

.sv-shell-hero__deposit {
	background: var(--hero-on) !important;
	color: var(--panel-hero-btn-text, var(--theme-primary)) !important;
	border: none !important;
	font-weight: 800 !important;
	box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

.sv-search-section { margin-bottom: 1.125rem; position: relative; z-index: 45; }

.sv-tabs-card {
	background: var(--uds-surface, #fff);
	border: 1px solid var(--uds-border, rgb(var(--theme-primary-rgb, 99 102 241) / .1));
	border-radius: 1rem;
	padding: 0.65rem;
	margin-bottom: 1rem;
	box-shadow: var(--uds-shadow-sm, 0 1px 2px rgba(15,23,42,.06));
}

.dark .sv-tabs-card {
	background: var(--uds-surface, rgba(15,15,30,.82));
}

.sv-tabs--pills { gap: 0.4rem; }

.sv-tab__icon { font-size: 0.8rem; opacity: 0.9; }

.sv-tab-active.sv-tab--indigo,
.sv-tab-active.sv-tab--cyan,
.sv-tab-active.sv-tab--violet,
.sv-tab-active.sv-tab--amber,
.sv-tab-active.sv-tab--emerald {
	background: var(--theme-gradient, linear-gradient(135deg, var(--theme-primary, #4f46e5), var(--theme-secondary, #6366f1)));
	color: var(--theme-on-primary, #fff);
}

.sv-tab-inactive .sv-count {
	background: var(--uds-surface-2, rgb(var(--theme-primary-rgb, 99 102 241) / .08));
	color: var(--uds-text-muted, #64748b);
}

.sv-tab-active .sv-count {
	background: rgba(255,255,255,.22);
	color: #fff;
}

.sv-results-bar {
	margin-bottom: 0.875rem;
}

.sv-results-count {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--uds-text-muted, #64748b);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.sv-results-count i { color: rgb(var(--theme-primary-rgb, 79 70 229)); opacity: 0.85; }

.sv-results-query {
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--uds-text, #0f172a);
	opacity: 0.75;
}

.sv-services-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	transition: opacity 0.25s;
}

@media (min-width: 640px) {
	.sv-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem; }
}

@media (min-width: 1024px) {
	.sv-services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sv-empty-state {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3.5rem 1.5rem;
	text-align: center;
}

.sv-empty-state__icon {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 1rem;
	background: rgb(var(--theme-primary-rgb, 99 102 241) / .08);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.1rem;
}

.sv-empty-state__icon svg { width: 2.25rem; height: 2.25rem; color: rgb(var(--theme-primary-rgb, 99 102 241) / .45); }

.sv-empty-state__title {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--uds-text, #0f172a);
}

.sv-empty-state__sub {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	color: var(--uds-text-muted, #64748b);
	max-width: 20rem;
}

.sv-empty-state__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 1.1rem;
	border-radius: 0.75rem;
	font-size: 0.8125rem;
	font-weight: 800;
	color: #fff;
	text-decoration: none;
	background: var(--theme-gradient, linear-gradient(135deg,var(--theme-primary, #4f46e5),var(--theme-accent, #7c3aed)));
	box-shadow: 0 4px 14px rgb(var(--theme-primary-rgb, 79 70 229) / 0.3);
	transition: transform 0.15s;
}

.sv-empty-state__btn:hover { transform: translateY(-1px); }

.uds-services--shell .sv-card {
	border-radius: 1rem;
	border-color: var(--uds-border, rgb(var(--theme-primary-rgb, 99 102 241) / .1));
}

.uds-services--shell .sv-search-outer {
	box-shadow: 0 4px 24px rgb(var(--theme-primary-rgb, 99 102 241) / .08);
}

@media (max-width: 640px) {
	.sv-shell-hero {
		padding: 1.25rem 1.125rem;
		border-radius: 1rem;
		margin-bottom: 1rem;
	}
	.sv-shell-hero__aside { width: 100%; justify-content: space-between; }
	.sv-tabs-card {
		padding: 0.45rem;
		overflow: hidden;
	}
	.sv-tabs,
	.sv-tabs--pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	.sv-tabs::-webkit-scrollbar,
	.sv-tabs--pills::-webkit-scrollbar { display: none; }
	.sv-tab { flex-shrink: 0; }
}

/* ─── Services Page Premium ─────────────────────────── */
.sv-bg { background: var(--uds-bg, #f6f7fb); min-height: 100%; }
.dark .sv-bg { background: var(--uds-bg, #08080f); }

/* Hero */
.sv-hero {
    position:relative; overflow:hidden;
    border-radius:1.5rem;
    color: var(--theme-on-primary, #fff);
    background: var(--theme-gradient, linear-gradient(135deg,var(--theme-primary, #4f46e5) 0%,#6d28d9 55%,var(--theme-accent, #7c3aed) 100%));
    box-shadow:0 16px 48px rgb(var(--theme-primary-rgb, 79 70 229) / 0.3);
}
.sv-hero::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(ellipse 70% 50% at 100% 0%,rgba(255,255,255,.1),transparent 60%),
                radial-gradient(ellipse 40% 70% at -5% 100%,rgb(var(--theme-accent-rgb, 139 92 246) / .3),transparent 55%);
}
.sv-hero-grid {
    position:absolute; inset:0; pointer-events:none; opacity:.05;
    background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
    background-size:40px 40px;
}

/* ── Search premium ──────────────────────────────────────────── */
.sv-search-outer {
    position:relative;
    z-index: 40;
    background:linear-gradient(135deg,rgb(var(--theme-primary-rgb, 99 102 241) / .06) 0%,rgb(var(--theme-accent-rgb, 139 92 246) / .04) 100%);
    border-radius:1.25rem;
    padding:3px;
    box-shadow:0 8px 40px rgb(var(--theme-primary-rgb, 99 102 241) / .12);
}
.sv-search-outer.is-open,
.sv-search-outer:focus-within {
    z-index: 90;
}
.dark .sv-search-outer {
    background:linear-gradient(135deg,rgb(var(--theme-primary-rgb, 99 102 241) / .12) 0%,rgb(var(--theme-accent-rgb, 139 92 246) / .08) 100%);
    box-shadow:0 8px 40px rgba(0,0,0,.3);
}
.sv-search-outer::before {
    content:''; position:absolute; inset:0; border-radius:1.25rem;
    background: var(--theme-gradient, linear-gradient(135deg,var(--theme-primary, #6366f1),var(--theme-accent, #8b5cf6),#06b6d4));
    opacity:0; transition:opacity .3s;
    pointer-events:none;
}
.sv-search-outer:focus-within::before { opacity:1; }

.sv-search-wrap {
    position:relative;
    background: var(--uds-surface, #fff);
    border-radius:1.1rem;
    overflow:hidden;
    display:flex; align-items:center;
}
.dark .sv-search-wrap { background: color-mix(in srgb, var(--uds-surface, #0f0f1e) 100%, #0f0f1e); }

/* Gradient left accent bar */
.sv-search-wrap::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
    background: var(--theme-gradient, linear-gradient(180deg,var(--theme-primary, #6366f1),var(--theme-accent, #8b5cf6)));
    border-radius:0;
    transition:width .2s;
}
.sv-search-outer:focus-within .sv-search-wrap::before { width:5px; }

.sv-search-icon {
    position:absolute; left:1.15rem; top:50%; transform:translateY(-50%);
    color: rgb(var(--theme-primary-rgb, 99 102 241));
    transition:transform .2s, color .2s;
}
.sv-search-outer:focus-within .sv-search-icon {
    transform:translateY(-50%) scale(1.15);
    color: rgb(var(--theme-accent-rgb, 139 92 246));
}

input.sv-search-input,
.sv-search-wrap input[name="search"] {
    width:100% !important;
    background:transparent !important;
    border:none !important;
    outline:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding:1rem 10rem 1rem 3.25rem !important;
    font-size:.95rem;
    font-weight:500;
    color:inherit;
    appearance:none; -webkit-appearance:none;
    letter-spacing:.01em;
}
input.sv-search-input::placeholder,
.sv-search-wrap input[name="search"]::placeholder {
    color:rgba(148,163,184,.7);
    font-weight:400;
}

.sv-search-actions {
    position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
    display:flex; align-items:center; gap:.4rem;
}
.sv-search-clear {
    display:flex; align-items:center; justify-content:center;
    width:1.75rem; height:1.75rem; border-radius:50%;
    background: rgb(var(--theme-primary-rgb, 99 102 241) / .1); color: rgb(var(--theme-primary-rgb, 99 102 241));
    border:none; cursor:pointer; transition:all .2s;
}
.sv-search-clear:hover { background:rgba(239,68,68,.12); color:#ef4444; }
.sv-search-btn {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.55rem 1.2rem; border-radius:.75rem;
    font-size:.8rem; font-weight:700; letter-spacing:.02em;
    background: var(--theme-gradient, linear-gradient(135deg,var(--theme-primary, #4f46e5) 0%,var(--theme-accent, #7c3aed) 100%));
    color:#fff; border:none; cursor:pointer;
    box-shadow:0 4px 14px rgb(var(--theme-primary-rgb, 79 70 229) / .4);
    transition:all .2s cubic-bezier(.4,0,.2,1);
    white-space:nowrap;
}
.sv-search-btn:hover {
    filter: brightness(1.08);
    box-shadow:0 6px 22px rgb(var(--theme-primary-rgb, 99 102 241) / .55);
    transform:translateY(-1px);
}
.sv-search-btn:active { transform:translateY(0); box-shadow:0 2px 8px rgb(var(--theme-primary-rgb, 99 102 241) / .3); }

/* Search shortcut badge */
.sv-search-kbd {
    display:inline-flex; align-items:center; gap:.2rem;
    padding:.15rem .45rem; border-radius:.35rem;
    font-size:.65rem; font-weight:700; letter-spacing:.05em;
    background: rgb(var(--theme-primary-rgb, 99 102 241) / .1); color: rgb(var(--theme-primary-rgb, 99 102 241) / .8);
    border:1px solid rgb(var(--theme-primary-rgb, 99 102 241) / .2);
    pointer-events:none;
}
.dark .sv-search-kbd { background: rgb(var(--theme-primary-rgb, 99 102 241) / .15); color: rgb(var(--theme-primary-rgb, 99 102 241) / .8); border-color: rgb(var(--theme-primary-rgb, 99 102 241) / .3); }

/* Suggestions dropdown — ponte de hover no padding-top, painel interno com o visual */
.sv-suggestions {
    position:absolute; top:100%; left:0; right:0; z-index:95;
    padding-top: 8px;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}
.sv-suggestions-panel {
    background: var(--uds-surface, #fff);
    border:1.5px solid rgb(var(--theme-primary-rgb, 99 102 241) / .16);
    border-radius:1rem;
    overflow:hidden;
    max-height: min(62vh, 440px);
    overflow-y: auto;
    box-shadow:0 24px 56px rgba(15,23,42,.18), 0 0 0 1px rgb(var(--theme-primary-rgb, 99 102 241) / .05), 0 0 36px rgb(var(--theme-primary-rgb, 99 102 241) / .08);
    animation:svDropIn .16s cubic-bezier(.4,0,.2,1);
}
.dark .sv-suggestions-panel {
    background: color-mix(in srgb, var(--uds-surface, #0d0d1a) 94%, #0d0d1a);
    border-color: rgb(var(--theme-primary-rgb, 99 102 241) / .25);
    box-shadow:0 20px 60px rgba(0,0,0,.5);
}
@keyframes svDropIn { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:none; } }

.sv-suggestions-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:.6rem 1rem .5rem;
    border-bottom:1px solid rgb(var(--theme-primary-rgb, 99 102 241) / .07);
}
.sv-suggestions-label {
    font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    color: rgb(var(--theme-primary-rgb, 99 102 241) / .7);
}
.sv-suggestions-count {
    font-size:.68rem; font-weight:600;
    color:rgba(148,163,184,.8);
    background: rgb(var(--theme-primary-rgb, 99 102 241) / .07); border-radius:99px; padding:.1rem .5rem;
}
.sv-suggestion-item {
    display:flex; align-items:center; gap:.875rem;
    padding:.8rem 1rem; text-decoration:none;
    border-bottom:1px solid rgb(var(--theme-primary-rgb, 99 102 241) / .05);
    transition:background .12s;
    position:relative; overflow:hidden;
}
.sv-suggestion-item::after {
    content:''; position:absolute; left:0; top:0; bottom:0; width:0;
    background: var(--theme-gradient, linear-gradient(135deg,var(--theme-primary, #6366f1),var(--theme-accent, #8b5cf6)));
    opacity:.07; transition:width .15s;
}
.sv-suggestion-item:hover::after { width:100%; }
.sv-suggestion-item:last-child { border-bottom:none; }
.sv-suggestion-item:hover,
.sv-suggestion-item.is-active { background: rgb(var(--theme-primary-rgb, 99 102 241) / .06); }
.dark .sv-suggestion-item:hover,
.dark .sv-suggestion-item.is-active { background: rgb(var(--theme-primary-rgb, 99 102 241) / .1); }

.sv-suggestion-icon {
    width:38px; height:38px; border-radius:10px;
    background: linear-gradient(135deg, rgb(var(--theme-primary-rgb, 99 102 241) / .1), rgb(var(--theme-accent-rgb, 139 92 246) / .08));
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    border:1px solid rgb(var(--theme-primary-rgb, 99 102 241) / .1);
    transition:transform .15s;
    overflow:hidden;
    position:relative;
}
.sv-suggestion-icon img {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:contain; background:#fff; padding:3px; box-sizing:border-box;
}
.sv-suggestion-item:hover .sv-suggestion-icon,
.sv-suggestion-item.is-active .sv-suggestion-icon { transform:scale(1.05); }
.dark .sv-suggestion-icon { background: rgb(var(--theme-primary-rgb, 99 102 241) / .12); border-color: rgb(var(--theme-primary-rgb, 99 102 241) / .18); }
.dark .sv-suggestion-icon img { background: #0f172a; }

.sv-suggestion-name {
    font-size:.84rem; font-weight:600; color:inherit;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sv-suggestion-name mark {
    background: rgb(var(--theme-primary-rgb, 99 102 241) / .2);
    color: inherit;
    font-weight: 800;
    padding: 0 2px;
    border-radius: 3px;
}
.sv-suggestion-provider {
    font-size:.72rem; color:rgba(107,114,128,1); margin-top:2px;
    display:flex; align-items:center; gap:.3rem;
}
.sv-suggestion-price {
    font-size:.82rem; font-weight:800; color:#059669;
    white-space:nowrap; letter-spacing:.01em;
}
.dark .sv-suggestion-price { color:#34d399; }

.sv-suggestion-arrow {
    color: rgb(var(--theme-primary-rgb, 99 102 241) / .3); flex-shrink:0;
    transition:transform .15s, color .15s;
}
.sv-suggestion-item:hover .sv-suggestion-arrow,
.sv-suggestion-item.is-active .sv-suggestion-arrow {
    transform:translateX(3px);
    color: rgb(var(--theme-primary-rgb, 99 102 241));
}

/* Tabs */
.sv-tabs { display:flex; gap:.5rem; flex-wrap:wrap; }
.sv-tab {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.5rem 1.125rem; border-radius:.75rem; font-size:.82rem; font-weight:700;
    border:1.5px solid transparent; text-decoration:none; white-space:nowrap;
    transition:all .2s cubic-bezier(.4,0,.2,1);
}
.sv-tab-inactive {
    background: rgb(var(--theme-primary-rgb, 99 102 241) / .05); border-color: rgb(var(--theme-primary-rgb, 99 102 241) / .1);
    color:rgba(107,114,128,1);
}
.dark .sv-tab-inactive { background: rgb(var(--theme-primary-rgb, 99 102 241) / .07); color:rgba(148,163,184,.8); }
.sv-tab-inactive:hover { background: rgb(var(--theme-primary-rgb, 99 102 241) / .12); border-color: rgb(var(--theme-primary-rgb, 99 102 241) / .25); color: rgb(var(--theme-primary-rgb, 99 102 241)); }
.sv-tab-active {
    background: var(--theme-gradient, linear-gradient(135deg,var(--theme-primary, #4f46e5),var(--theme-accent, #7c3aed)));
    color:#fff; border-color:transparent;
    box-shadow:0 4px 14px rgb(var(--theme-primary-rgb, 79 70 229) / .35);
}
.sv-count {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:1.375rem; height:1.375rem; border-radius:99px; font-size:.65rem; font-weight:800;
}

/* Service card */
.sv-card {
    background:#fff; border:1px solid rgb(var(--theme-primary-rgb, 99 102 241) / .08); border-radius:1.125rem;
    overflow:hidden; display:flex; flex-direction:column;
    transition:all .25s cubic-bezier(.4,0,.2,1);
}
.dark .sv-card { background:rgba(15,15,30,.82); border-color:rgb(var(--theme-primary-rgb, 99 102 241) / .13); }
.sv-card:hover {
    border-color:rgb(var(--theme-primary-rgb, 99 102 241) / .3);
    box-shadow:0 12px 40px rgb(var(--theme-primary-rgb, 99 102 241) / .12);
    transform:translateY(-3px);
}
.dark .sv-card:hover { box-shadow:0 12px 40px rgba(0,0,0,.5); }

/* Imagens dos cards: evitar colapso (Tailwind img{height:auto}) e
   garantir exibição mesmo dentro do shell logado */
.sv-img-wrap {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgb(var(--theme-primary-rgb, 99 102 241) / .06), rgb(var(--theme-accent-rgb, 139 92 246) / .06));
    aspect-ratio: 16 / 9;
    min-height: 140px;
    width: 100%;
    height: auto;
}
.dark .sv-img-wrap { background: rgb(var(--theme-primary-rgb, 99 102 241) / .08); }
.sv-img-wrap img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    padding: .75rem;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform .4s;
}
.uds-shell__main .sv-img-wrap img {
    /* reforço: shell logado não deve zerar a imagem */
    opacity: 1 !important;
}
.sv-card:hover .sv-img-wrap img { transform: scale(1.05); }
.sv-img-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}

.sv-card-body { padding:1.125rem; flex:1; display:flex; flex-direction:column; gap:.625rem; }

.sv-provider-badge {
    display:inline-flex; align-items:center; gap:.35rem;
    font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:rgb(var(--theme-primary-rgb, 99 102 241) / .9); background:rgb(var(--theme-primary-rgb, 99 102 241) / .08); border-radius:99px;
    padding:.2rem .6rem;
}
.dark .sv-provider-badge { color:rgba(165,180,252,.9); background:rgb(var(--theme-primary-rgb, 99 102 241) / .12); }

.sv-card-title {
    font-size:.9rem; font-weight:700; line-height:1.3;
    color:#111827; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.dark .sv-card-title { color:#f1f5f9; }
.sv-card:hover .sv-card-title { color:var(--theme-primary, #4f46e5); }
.dark .sv-card:hover .sv-card-title { color:color-mix(in srgb, var(--theme-primary) 55%, white); }

.sv-desc {
    font-size:.78rem; color:rgba(107,114,128,1); line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.dark .sv-desc { color:rgba(148,163,184,.7); }

.sv-price { font-size:1.3rem; font-weight:800; color:#059669; letter-spacing:-.02em; }
.dark .sv-price { color:#34d399; }

.sv-order-btn {
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.625rem 1rem; border-radius:.75rem; font-size:.82rem; font-weight:800;
    color:#fff; border:none; cursor:pointer; text-decoration:none;
    background:linear-gradient(135deg,var(--theme-primary, #4f46e5),var(--theme-accent, #7c3aed));
    box-shadow:0 4px 14px rgb(var(--theme-primary-rgb, 79 70 229) / .3);
    transition:all .2s; white-space:nowrap; flex-shrink:0;
}
.sv-order-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgb(var(--theme-primary-rgb, 99 102 241) / .45); }

/* Empty state */
@keyframes sv-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.sv-pulse { animation:sv-pulse 2s ease-in-out infinite; }

/* Guest CTA strip */
.sv-guest-strip {
    position:relative; overflow:hidden; border-radius:1.125rem;
    color: var(--theme-on-primary, #fff);
    background: var(--theme-gradient, linear-gradient(135deg,var(--theme-primary, #4f46e5),var(--theme-accent, #7c3aed)));
    padding:1.25rem 1.5rem;
}
.sv-guest-strip::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 60% 80% at 100% 50%,rgba(255,255,255,.08),transparent);
}