/* ==========================================================================
   Vibers v0.7 — avatars, profiles, Vibers directory, Codes cards, how-to modals
   ========================================================================== */

/* Avatars (photo or initials) */
.sf-avatar { flex: 0 0 auto; }
.sf-avatar-img { object-fit: cover; background: var(--sf-soft); padding: 0; }
.sf-avatar-sm { width: 30px; height: 30px; font-size: .72rem; }
.sf-avatar-lg { width: 76px; height: 76px; font-size: 1.5rem; }
.sf-avatar-xl { width: 116px; height: 116px; font-size: 2.3rem; box-shadow: 0 0 0 5px var(--sf-card), 0 12px 30px rgba(109, 40, 217, .25); }
.sf-avatar-edit { display: inline-block; }

/* Codes: owner under each card */
.sf-code-card { display: flex; flex-direction: column; gap: .5rem; height: 100%; }
.sf-code-owner { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--sf-body); padding: .15rem .25rem; border-radius: 12px; align-self: flex-start; }
.sf-code-owner:hover { background: var(--sf-soft); color: var(--sf-primary); }
.sf-code-owner > span { display: flex; flex-direction: column; line-height: 1.15; }
.sf-code-owner b { font-size: .86rem; color: var(--sf-ink); }
.sf-code-owner small { font-size: .74rem; color: var(--sf-muted); }

/* Vibers directory */
.sf-viber-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; height: 100%; padding: 1.5rem 1.1rem 1.2rem; background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: 22px; box-shadow: var(--sf-shadow); text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; }
.sf-viber-card:hover { transform: translateY(-3px); border-color: #c4b5fd; box-shadow: 0 18px 40px rgba(109, 40, 217, .14); }
.sf-viber-card .sf-avatar { margin-bottom: .5rem; }
.sf-viber-card > b { color: var(--sf-ink); font-size: 1.02rem; }
.sf-viber-card > small { color: var(--sf-muted); }
.sf-viber-headline { font-size: .84rem; color: var(--sf-body); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .2rem; }
.sf-viber-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: auto; padding-top: .75rem; }
.sf-viber-stats span { font-size: .74rem; font-weight: 700; border-radius: 99px; padding: .2rem .6rem; background: var(--sf-soft); color: var(--sf-primary); }
.sf-viber-stats span:nth-child(2) { background: rgba(148, 163, 184, .16); color: var(--sf-muted); }

/* Profile */
.sf-profile-hero { position: relative; background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: 24px; overflow: hidden; box-shadow: var(--sf-shadow); }
.sf-profile-cover { height: 130px; background: radial-gradient(500px 200px at 85% 0%, rgba(236, 72, 153, .45), transparent 70%), linear-gradient(135deg, #8b3dff, #5b21b6); }
.sf-profile-main { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.25rem; padding: 1rem 1.75rem 1.5rem; }
.sf-profile-main > .sf-avatar { margin-top: -74px; position: relative; z-index: 2; } /* above the cover photo (positioned) */
.sf-profile-main > .btn { align-self: center; }
.sf-profile-user { color: var(--sf-muted); margin: 0 0 .5rem; }
.sf-profile-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0; font-size: .88rem; color: var(--sf-body); }
.sf-profile-meta .bi { color: var(--sf-violet); }
.sf-viber-badge { display: inline-flex; align-items: center; gap: .25rem; vertical-align: middle; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--sf-grad); border-radius: 99px; padding: .2rem .6rem; }
.sf-profile-stats { display: flex; gap: .75rem; }
.sf-profile-stats > div { text-align: center; background: var(--sf-soft); border-radius: 16px; padding: .6rem 1rem; min-width: 96px; }
.sf-profile-stats b { display: block; font-size: 1.6rem; font-weight: 800; color: var(--sf-primary); line-height: 1.1; }
.sf-profile-stats span { font-size: .74rem; color: var(--sf-muted); }
.sf-profile-text { color: var(--sf-body); line-height: 1.7; white-space: normal; }
@media (max-width: 767.98px) {
    .sf-profile-main { padding: 0 1rem 1.25rem; }
    .sf-profile-stats { width: 100%; }
}

/* "Code secreto" card: shows that something exists, never what */
.sf-code-secret { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; aspect-ratio: 16 / 12; height: 100%; border-radius: 20px; border: 1.5px dashed #c4b5fd; background: repeating-linear-gradient(135deg, var(--sf-soft) 0 14px, var(--sf-card) 14px 28px); text-align: center; padding: 1rem; cursor: default; user-select: none; }
.sf-code-q { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 2.2rem; font-weight: 800; color: #fff; background: var(--sf-grad); box-shadow: var(--sf-shadow-violet); margin-bottom: .35rem; }
.sf-code-secret b { color: var(--sf-ink); font-size: 1.05rem; }
.sf-code-secret small { color: var(--sf-muted); }

/* How-to steps (domain + payments modals) */
.sf-modal-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--sf-grad); color: #fff; font-size: 1.3rem; flex: 0 0 auto; }
.sf-modal-stripe { background: linear-gradient(135deg, #635bff, #7a73ff); }
.sf-howto { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .75rem; }
.sf-howto li { display: flex; gap: .8rem; align-items: flex-start; }
.sf-howto li > span { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: #fff; background: var(--sf-grad); }
.sf-howto b { color: var(--sf-ink); }
.sf-howto p { margin: .1rem 0 0; color: var(--sf-body); font-size: .9rem; }
.sf-dns-table code { font-size: .85rem; }
[data-payments-open].is-done { border-color: #86efac; color: #16a34a; }
:root[data-theme="dark"] [data-payments-open].is-done { color: #86efac; border-color: #166534; }

/* ⚡ Raio (like) */
.sf-code-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sf-like { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--sf-border); background: var(--sf-card); color: var(--sf-muted); border-radius: 99px; padding: .3rem .75rem; font-weight: 800; font-size: .85rem; text-decoration: none; cursor: pointer; transition: all .15s; }
.sf-like:hover { color: #f59e0b; border-color: #fcd34d; }
.sf-like .bi { font-size: 1rem; }
.sf-like.is-on { color: #fff; background: linear-gradient(135deg, #f59e0b, #f97316); border-color: transparent; box-shadow: 0 6px 16px rgba(245, 158, 11, .35); }
.sf-like.is-mine { cursor: default; color: #f59e0b; }
.sf-like.is-zap .bi { animation: sf-zap .5s ease-out; }
@keyframes sf-zap { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.6) rotate(-12deg); } 100% { transform: scale(1) rotate(0); } }

/* Public profile inside the site */
.sf-profile-page { padding-top: 2.5rem; }

/* Admin KPIs + SVG charts */
.sf-kpi-label { display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sf-muted); }
.sf-kpi-big { display: block; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; background: var(--sf-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sf-kpi-sub { color: var(--sf-muted); font-weight: 700; }
.sf-kpi-delta { display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; color: #16a34a; background: rgba(34, 197, 94, .12); border-radius: 99px; padding: .35rem .85rem; }
.sf-kpi-delta small { font-weight: 600; opacity: .8; }
.sf-chart { display: block; width: 100%; height: 280px; }
.sf-chart-grid { stroke: var(--sf-border); stroke-width: 1; }
.sf-chart-axis { fill: var(--sf-muted); font-size: 12px; font-family: inherit; }
.sf-chart-line { fill: none; stroke: #7c3aed; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.sf-chart-dot { fill: #fff; stroke: #7c3aed; stroke-width: 3; }
:root[data-theme="dark"] .sf-kpi-delta { color: #86efac; }

/* ---------- v0.9 ---------- */
/* Sidebar: still scrolls, but the scrollbar is invisible */
.sf-sidebar-inner { scrollbar-width: none; -ms-overflow-style: none; }
.sf-sidebar-inner::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Profile cover photo */
.sf-profile-cover { position: relative; overflow: hidden; }
.sf-profile-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-cover-edit { position: relative; border-radius: 18px; overflow: hidden; }
.sf-cover-preview { height: 140px; background: radial-gradient(500px 200px at 85% 0%, rgba(236, 72, 153, .45), transparent 70%), linear-gradient(135deg, #8b3dff, #5b21b6); position: relative; }
.sf-cover-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-cover-actions { position: absolute; right: .75rem; bottom: .75rem; display: flex; gap: .4rem; }
.sf-cover-actions form { margin: 0; }
.sf-cover-hint { position: absolute; left: .9rem; bottom: .8rem; color: #fff; font-size: .75rem; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); max-width: 55%; }

/* Home: numbers under the hero, about, plans, quick links */
.sf-stats-band { margin-top: 0; padding: 2.5rem 0 3.5rem; }
.sf-bigstat { padding: 1.4rem 1.5rem; }
.sf-bigstat b { font-size: clamp(1.5rem, 2.3vw, 2.2rem); white-space: normal; line-height: 1.1; }
.sf-home-about { border-radius: 28px; margin-top: 0; padding: 4rem 0; }
.sf-home-plans { padding: 4.5rem 0 3rem; background: radial-gradient(700px 360px at 10% 30%, rgba(124, 58, 237, .22), transparent 60%), var(--sf-night-2); }
.sf-home-plan { position: relative; display: flex; flex-direction: column; gap: .35rem; height: 100%; background: rgba(255, 255, 255, .04); border: 1px solid rgba(167, 139, 250, .25); border-radius: 22px; padding: 1.6rem 1.3rem 1.3rem; color: #fff; }
.sf-home-plan.is-popular { border: 2px solid #8b5cf6; box-shadow: 0 20px 50px rgba(109, 40, 217, .35); }
.sf-home-plan h3 { font-size: 1.2rem; font-weight: 800; color: #fff; margin: 0; }
.sf-home-plan-desc { color: rgba(255, 255, 255, .7); font-size: .88rem; min-height: 2.6em; margin: 0; }
.sf-home-plan-price b { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.sf-home-plan-price span { color: rgba(255, 255, 255, .6); }
.sf-home-plan .sf-plan-credits { margin: .25rem 0 1rem; }
.sf-home-links { padding: 0 0 3.5rem; background: var(--sf-night-2); }
.sf-home-link { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: 18px; text-decoration: none; background: rgba(255, 255, 255, .05); border: 1px solid rgba(167, 139, 250, .25); color: #fff; transition: transform .15s, border-color .15s; height: 100%; }
.sf-home-link:hover { transform: translateY(-2px); border-color: #a78bfa; color: #fff; }
.sf-home-link b { display: block; }
.sf-home-link small { color: rgba(255, 255, 255, .7); }
:root[data-theme="light"] .sf-home-plans, :root[data-theme="light"] .sf-home-links { background: #efeafc; }
:root[data-theme="light"] .sf-home-plan, :root[data-theme="light"] .sf-home-link { background: #fff; border-color: var(--sf-border); color: var(--sf-ink); box-shadow: var(--sf-shadow); }
:root[data-theme="light"] .sf-home-plan h3, :root[data-theme="light"] .sf-home-link:hover { color: var(--sf-ink); }
:root[data-theme="light"] .sf-home-plan-desc, :root[data-theme="light"] .sf-home-plan-price span, :root[data-theme="light"] .sf-home-link small { color: var(--sf-muted); }
:root[data-theme="light"] .sf-home-plan-price b { color: var(--sf-ink); }
:root[data-theme="light"] .sf-home-plan.is-popular { border-color: #8b5cf6; }

/* Integrations: the viber's agent team */
.sf-role-card { height: 100%; border: 1px solid var(--sf-border); border-radius: 16px; padding: 1rem; background: var(--sf-card); }
.sf-role-card.is-lead { border-color: #a78bfa; box-shadow: 0 10px 26px rgba(109, 40, 217, .12); }
.sf-role-card-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; font-size: 1rem; }
.sf-role-card-head .bi { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--sf-soft); color: var(--sf-primary); }
.sf-role-card.is-lead .sf-role-card-head .bi { background: var(--sf-grad); color: #fff; }
.sf-role-card.sf-rc-designer .sf-role-card-head .bi { background: rgba(236, 72, 153, .12); color: #db2777; }
.sf-role-card.sf-rc-programmer .sf-role-card-head .bi { background: rgba(249, 115, 22, .12); color: #ea580c; }
.sf-role-card.sf-rc-marketing .sf-role-card-head .bi { background: rgba(34, 197, 94, .12); color: #16a34a; }

/* Home "Sobre nós": a white-to-purple gradient so the page does not read as one white block */
.sf-home-about { background: linear-gradient(135deg, #ffffff 0%, #efe6ff 50%, #d9c7ff 100%); }
:root[data-theme="dark"] .sf-home-about { background: linear-gradient(135deg, #14111f 0%, #1d1533 55%, #2a1b4d 100%); }

/* Admin "⋯" menu on the cards of "Nossos vibers" and Codes (admins only) */
.sf-viber-cell, .sf-code-card { position: relative; height: 100%; }
.sf-card-admin { position: absolute; top: .6rem; right: .6rem; z-index: 3; }
.sf-card-admin .sf-dots { background: var(--sf-card); border: 1px solid var(--sf-border); width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: var(--sf-shadow); }
.sf-card-admin .sf-dots:hover, .sf-card-admin .sf-dots[aria-expanded="true"] { background: var(--sf-soft); color: var(--sf-primary); }
.sf-viber-admin { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--sf-border); width: 100%; }
.sf-viber-email { font-size: .74rem; color: var(--sf-muted); word-break: break-all; }
.sf-viber-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.sf-viber-badges .badge { font-weight: 600; white-space: normal; }
.sf-admin-scope { display: flex; flex-wrap: wrap; gap: .5rem; }