/* --- 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: 1rem;
	margin-bottom: 1.25rem;
	padding: 1.25rem 1.375rem;
	color: #fff;
	background: linear-gradient(135deg, #4f46e5 0%, #4338ca 50%, #312e81 100%);
	box-shadow: 0 12px 36px rgba(79, 70, 229, 0.22);
}

.sv-shell-hero--cyan { background: linear-gradient(135deg, #0891b2 0%, #0e7490 50%, #164e63 100%); box-shadow: 0 12px 36px rgba(8, 145, 178, 0.22); }
.sv-shell-hero--violet { background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #4c1d95 100%); box-shadow: 0 12px 36px rgba(124, 58, 237, 0.22); }
.sv-shell-hero--amber { background: linear-gradient(135deg, #d97706 0%, #b45309 50%, #78350f 100%); box-shadow: 0 12px 36px rgba(217, 119, 6, 0.22); }
.sv-shell-hero--emerald { background: linear-gradient(135deg, #059669 0%, #047857 50%, #064e3b 100%); box-shadow: 0 12px 36px rgba(5, 150, 105, 0.22); }

.sv-shell-hero__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 55% 80% at 100% 0%, rgba(255,255,255,.14), transparent 55%),
		radial-gradient(ellipse 40% 60% at 0% 100%, rgba(255,255,255,.08), transparent 50%);
}

.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: rgba(255,255,255,.75);
	text-decoration: none;
	margin-bottom: 0.5rem;
	transition: color 0.15s;
}

.sv-shell-hero__crumb:hover { color: #fff; }

.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: 1.625rem;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.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: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.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: #fff !important;
	color: #4338ca !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; }

.sv-tabs-card {
	background: var(--uds-surface, #fff);
	border: 1px solid var(--uds-border, rgba(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 { background: linear-gradient(135deg,#4f46e5,#6366f1); }
.sv-tab-active.sv-tab--cyan { background: linear-gradient(135deg,#0891b2,#06b6d4); }
.sv-tab-active.sv-tab--violet { background: linear-gradient(135deg,#7c3aed,#8b5cf6); }
.sv-tab-active.sv-tab--amber { background: linear-gradient(135deg,#d97706,#f59e0b); }
.sv-tab-active.sv-tab--emerald { background: linear-gradient(135deg,#059669,#10b981); }

.sv-tab-inactive .sv-count {
	background: var(--uds-surface-2, rgba(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: var(--uds-primary-600, #4f46e5); 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: rgba(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: #a5b4fc; }

.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: linear-gradient(135deg,#4f46e5,#7c3aed);
	box-shadow: 0 4px 14px rgba(79,70,229,.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, rgba(99,102,241,.1));
}

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

@media (max-width: 640px) {
	.sv-shell-hero__title { font-size: 1.35rem; }
	.sv-shell-hero__aside { width: 100%; justify-content: space-between; }
}

/* ─── 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;
    background:linear-gradient(135deg,#4f46e5 0%,#6d28d9 55%,#7c3aed 100%);
    box-shadow:0 16px 48px rgba(79,70,229,.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%,rgba(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;
    background:linear-gradient(135deg,rgba(99,102,241,.06) 0%,rgba(139,92,246,.04) 100%);
    border-radius:1.25rem;
    padding:3px;
    box-shadow:0 8px 40px rgba(99,102,241,.12);
}
.dark .sv-search-outer {
    background:linear-gradient(135deg,rgba(99,102,241,.12) 0%,rgba(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:linear-gradient(135deg,#6366f1,#8b5cf6,#06b6d4);
    opacity:0; transition:opacity .3s;
    pointer-events:none;
}
.sv-search-outer:focus-within::before { opacity:1; }

.sv-search-wrap {
    position:relative;
    background:#fff;
    border-radius:1.1rem;
    overflow:hidden;
    display:flex; align-items:center;
}
.dark .sv-search-wrap { background:#0f0f1e; }

/* Gradient left accent bar */
.sv-search-wrap::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
    background:linear-gradient(180deg,#6366f1,#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:#6366f1;
    transition:transform .2s, color .2s;
}
.sv-search-outer:focus-within .sv-search-icon {
    transform:translateY(-50%) scale(1.15);
    color:#8b5cf6;
}

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:rgba(99,102,241,.1); color:#6366f1;
    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:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);
    color:#fff; border:none; cursor:pointer;
    box-shadow:0 4px 14px rgba(79,70,229,.4);
    transition:all .2s cubic-bezier(.4,0,.2,1);
    white-space:nowrap;
}
.sv-search-btn:hover {
    background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
    box-shadow:0 6px 22px rgba(99,102,241,.55);
    transform:translateY(-1px);
}
.sv-search-btn:active { transform:translateY(0); box-shadow:0 2px 8px rgba(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:rgba(99,102,241,.1); color:rgba(99,102,241,.8);
    border:1px solid rgba(99,102,241,.2);
    pointer-events:none;
}
.dark .sv-search-kbd { background:rgba(99,102,241,.15); color:rgba(165,180,252,.8); border-color:rgba(99,102,241,.3); }

/* Suggestions dropdown */
.sv-suggestions {
    position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:9999;
    background:#fff;
    border:1.5px solid rgba(99,102,241,.15);
    border-radius:1rem; overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.13), 0 0 0 1px rgba(99,102,241,.04);
    animation:svDropIn .15s cubic-bezier(.4,0,.2,1);
}
.dark .sv-suggestions {
    background:rgba(13,13,26,.98);
    border-color:rgba(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 rgba(99,102,241,.07);
}
.sv-suggestions-label {
    font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    color:rgba(99,102,241,.7);
}
.sv-suggestions-count {
    font-size:.68rem; font-weight:600;
    color:rgba(148,163,184,.8);
    background:rgba(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 rgba(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:linear-gradient(135deg,#6366f1,#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 { background:rgba(99,102,241,.04); }
.dark .sv-suggestion-item:hover { background:rgba(99,102,241,.08); }

.sv-suggestion-icon {
    width:38px; height:38px; border-radius:10px;
    background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(139,92,246,.08));
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    border:1px solid rgba(99,102,241,.1);
    transition:transform .15s;
}
.sv-suggestion-item:hover .sv-suggestion-icon { transform:scale(1.05); }
.dark .sv-suggestion-icon { background:rgba(99,102,241,.12); border-color:rgba(99,102,241,.18); }

.sv-suggestion-name {
    font-size:.84rem; font-weight:600; color:inherit;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.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:rgba(99,102,241,.3); flex-shrink:0;
    transition:transform .15s, color .15s;
}
.sv-suggestion-item:hover .sv-suggestion-arrow {
    transform:translateX(3px);
    color:#6366f1;
}

/* 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:rgba(99,102,241,.05); border-color:rgba(99,102,241,.1);
    color:rgba(107,114,128,1);
}
.dark .sv-tab-inactive { background:rgba(99,102,241,.07); color:rgba(148,163,184,.8); }
.sv-tab-inactive:hover { background:rgba(99,102,241,.12); border-color:rgba(99,102,241,.25); color:#6366f1; }
.sv-tab-active {
    background:linear-gradient(135deg,#4f46e5,#7c3aed);
    color:#fff; border-color:transparent;
    box-shadow:0 4px 14px rgba(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 rgba(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:rgba(99,102,241,.13); }
.sv-card:hover {
    border-color:rgba(99,102,241,.3);
    box-shadow:0 12px 40px rgba(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, rgba(99,102,241,.06), rgba(139,92,246,.06));
    aspect-ratio: 16 / 9;
    min-height: 140px;
    width: 100%;
    height: auto;
}
.dark .sv-img-wrap { background: rgba(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:rgba(99,102,241,.9); background:rgba(99,102,241,.08); border-radius:99px;
    padding:.2rem .6rem;
}
.dark .sv-provider-badge { color:rgba(165,180,252,.9); background:rgba(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:#4f46e5; }
.dark .sv-card:hover .sv-card-title { color:#a5b4fc; }

.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,#4f46e5,#7c3aed);
    box-shadow:0 4px 14px rgba(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 rgba(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;
    background:linear-gradient(135deg,#4f46e5,#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);
}