/* ==========================================================
   SEJA POPULAR - IDENTIDADE DAS PAGINAS PUBLICAS
   Para trocar as cores de tudo, altere so as variaveis abaixo.
   ========================================================== */
:root{
    --sp-primary: #6A1FB0;
    --sp-primary-dark: #4A1380;
    --sp-magenta: #C2185B;
    --sp-grad: linear-gradient(120deg, #4A1380 0%, #7B2CBF 50%, #C2185B 100%);
    --sp-ink: #160F29;
    --sp-muted: #5E5873;
    --sp-bg: #F7F5FC;
    --sp-soft: #EFE7FA;
    --sp-line: #E7E1F1;
    --sp-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* nomes antigos, usados pelo painel interno */
    --sp-btn-1: #440075;
    --sp-btn-2: #53002D;
    --sp-btn-gradient: linear-gradient(90deg, var(--sp-btn-1) 0%, var(--sp-btn-2) 100%);
    --sp-accent-1: #440075;
    --sp-accent-2: #53002D;
}

/* ==========================================================
   CABECALHO DAS PAGINAS PUBLICAS (.jap-public-nav)
   ========================================================== */
.navbar.navbar-default.jap-public-nav{
    background: rgba(255,255,255,.82) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    position: fixed !important;
    top: 0; left: 0; right: 0; z-index: 1000;
    min-height: 76px;
    padding: 0;
    font-family: var(--sp-font);
    transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.navbar.navbar-default.jap-public-nav.is-scrolled{
    background: rgba(255,255,255,.94) !important;
    border-bottom-color: var(--sp-line) !important;
    box-shadow: 0 10px 30px -18px rgba(22,15,41,.35);
}
.navbar.navbar-default.jap-public-nav>.container{
    max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 20px;
}
.jap-public-nav .navbar-brand img{ max-height: 48px; max-width: 220px; width: auto; height: auto; }
.navbar.navbar-default.jap-public-nav .navbar-left-block{ display: none !important; }

@media (min-width:768px){
    .navbar.navbar-default.jap-public-nav>.container{ display: flex; align-items: center; justify-content: space-between; min-height: 76px; }
    .navbar.navbar-default.jap-public-nav>.container:before,
    .navbar.navbar-default.jap-public-nav>.container:after{ display: none; }
    .navbar.navbar-default.jap-public-nav .navbar-header{ float: none; margin: 0; display: flex; align-items: center; }
    .navbar.navbar-default.jap-public-nav .navbar-brand{ float: none; height: auto; padding: 0; margin: 0; display: flex; align-items: center; }
    .navbar.navbar-default.jap-public-nav .navbar-collapse{
        display: flex !important; align-items: center; justify-content: flex-end;
        float: none; padding: 0; margin: 0; border: 0; box-shadow: none;
        flex: 1 1 auto; max-height: none; overflow: visible;
    }
    .navbar.navbar-default.jap-public-nav .navbar-nav{ display: flex; align-items: center; gap: 6px; float: none; margin: 0; }
    .navbar.navbar-default.jap-public-nav .navbar-nav>li{ float: none; padding: 0; margin: 0; }
}

/* Links do menu: texto simples; Entrar = contorno; Criar conta = destaque */
.navbar.navbar-default.jap-public-nav .navbar-nav>li>a,
.navbar.navbar-default.jap-public-nav .navbar-nav>li.active>a{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent !important;
    color: var(--sp-ink) !important;
    font-size: 14.5px; font-weight: 600; line-height: 1.2;
    text-transform: none; text-decoration: none; white-space: nowrap;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.navbar.navbar-default.jap-public-nav .navbar-nav>li>a:hover,
.navbar.navbar-default.jap-public-nav .navbar-nav>li>a:focus{
    background: var(--sp-soft) !important;
    color: var(--sp-primary) !important;
}
.navbar.navbar-default.jap-public-nav .navbar-nav>li>a[href*="signin"],
.navbar.navbar-default.jap-public-nav .navbar-nav>li>a[href*="#signin-form"]{
    border-color: var(--sp-line);
    background: #fff !important;
}
.navbar.navbar-default.jap-public-nav .navbar-nav>li>a[href*="signin"]:hover,
.navbar.navbar-default.jap-public-nav .navbar-nav>li>a[href*="#signin-form"]:hover{
    border-color: var(--sp-primary);
    color: var(--sp-primary) !important;
    background: #fff !important;
}
.navbar.navbar-default.jap-public-nav .navbar-nav>li>a[href*="signup"]{
    background: var(--sp-grad) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px -12px rgba(90,24,154,.8);
}
.navbar.navbar-default.jap-public-nav .navbar-nav>li>a[href*="signup"]:hover,
.navbar.navbar-default.jap-public-nav .navbar-nav>li>a[href*="signup"]:focus{
    color: #fff !important;
    filter: brightness(1.06);
}

@media (max-width:767px){
    /* sem desfoque no celular: o backdrop-filter prenderia o menu em tela cheia dentro do header */
    .navbar.navbar-default.jap-public-nav{ min-height: 0; background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .navbar.navbar-default.jap-public-nav>.container{ display: flex; align-items: center; min-height: 66px; padding: 0 16px; }
    .navbar.navbar-default.jap-public-nav .navbar-header{ float: none; margin: 0; width: 100%; display: flex; align-items: center; position: relative; z-index: 2; }
    .navbar.navbar-default.jap-public-nav .navbar-brand{ float: none; order: 1; height: auto; padding: 0; margin: 0; display: flex; align-items: center; }
    .navbar.navbar-default.jap-public-nav .navbar-brand img{ max-height: 40px !important; max-width: 180px !important; }
    .navbar.navbar-default.jap-public-nav .navbar-toggle{
        float: none; order: 2; margin: 0 0 0 auto; padding: 0;
        width: 44px; height: 40px; background: #fff; border: 1px solid var(--sp-line); border-radius: 10px;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .navbar.navbar-default.jap-public-nav .navbar-toggle:hover,
    .navbar.navbar-default.jap-public-nav .navbar-toggle:focus{ background: #fff; }
    .navbar.navbar-default.jap-public-nav .navbar-toggle .icon-bar{
        width: 18px; height: 2px; border-radius: 2px; background: var(--sp-ink); display: block;
        transition: transform .25s ease, opacity .2s ease, background .2s ease;
    }
    .navbar.navbar-default.jap-public-nav .navbar-toggle .icon-bar + .icon-bar{ margin-top: 4px; }
    .navbar.navbar-default.jap-public-nav .navbar-toggle:not(.collapsed){ background: var(--sp-primary); border-color: var(--sp-primary); }
    .navbar.navbar-default.jap-public-nav .navbar-toggle:not(.collapsed) .icon-bar{ background: #fff; }
    .navbar.navbar-default.jap-public-nav .navbar-toggle:not(.collapsed) .icon-bar:nth-child(2){ transform: translateY(6px) rotate(45deg); }
    .navbar.navbar-default.jap-public-nav .navbar-toggle:not(.collapsed) .icon-bar:nth-child(3){ opacity: 0; }
    .navbar.navbar-default.jap-public-nav .navbar-toggle:not(.collapsed) .icon-bar:nth-child(4){ transform: translateY(-6px) rotate(-45deg); }
    .navbar.navbar-default.jap-public-nav .navbar-collapse{
        position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;
        background: #fff; padding: 90px 20px 0; margin: 0;
        border: 0; box-shadow: none; max-height: none; overflow-y: auto;
    }
    .navbar.navbar-default.jap-public-nav .navbar-collapse.collapse:not(.in){ display: none !important; }
    .navbar.navbar-default.jap-public-nav .navbar-nav{ float: none; width: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
    .navbar.navbar-default.jap-public-nav .navbar-nav>li{ float: none; width: 100%; margin: 0; }
    .navbar.navbar-default.jap-public-nav .navbar-nav>li>a,
    .navbar.navbar-default.jap-public-nav .navbar-nav>li.active>a{
        display: flex; justify-content: center; width: 100%; padding: 14px 16px;
        border: 1px solid var(--sp-line); font-size: 16px;
    }
}

/* Paginas publicas internas compensam o header fixo.
   O :where() deixa a regra fraca, assim cada pagina (API, FAQ, Blog...) define o proprio espaco. */
.navbar.navbar-default.jap-public-nav ~ *{ margin-top: 0; }
.jap-public-nav ~ :where(:not(.jap-lp, .jap-foot, script, style, link, #notify-wrapper)){ padding-top: 100px; }
body:has(.jap-public-nav){ background: var(--sp-bg); font-family: var(--sp-font); color: var(--sp-ink); }

/* Paginas simples: redefinir senha, nova senha, 2FA, confirmar e-mail e paginas criadas no admin */
.jap-public-nav ~ .container{ padding-top: 116px; padding-bottom: 80px; }
.jap-public-nav ~ .container .well{ background: #fff; border: 1px solid var(--sp-line); border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(22,15,41,.25); padding: 40px; margin: 0 auto; color: var(--sp-ink); font-size: 15.5px; line-height: 1.65; }
.jap-public-nav ~ .container .well:has(form){ max-width: 560px; }
.jap-public-nav ~ .container .well h1,
.jap-public-nav ~ .container .well h2,
.jap-public-nav ~ .container .well h3,
.jap-public-nav ~ .container .well h4{ margin: 0 0 18px; font-family: var(--sp-font); font-weight: 800; letter-spacing: -.02em; color: var(--sp-ink); }
.jap-public-nav ~ .container .well h3,
.jap-public-nav ~ .container .well h4{ font-size: 28px; }
.jap-public-nav ~ .container .well label{ font-size: 14px; font-weight: 600; color: var(--sp-ink); }
.jap-public-nav ~ .container .form-control{ height: 52px; padding: 12px 16px; border: 1px solid var(--sp-line); border-radius: 12px; background: var(--sp-bg); box-shadow: none; font-size: 15px; color: var(--sp-ink); }
.jap-public-nav ~ .container .form-control:focus{ background: #fff; border-color: var(--sp-primary); box-shadow: 0 0 0 4px rgba(123,44,191,.12); }
.jap-public-nav ~ .container .btn-primary{ height: 52px; padding: 0 28px; border: 0; border-radius: 12px; background: var(--sp-grad); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 10px 24px -10px rgba(90,24,154,.7); }
.jap-public-nav ~ .container .btn-primary:hover,
.jap-public-nav ~ .container .btn-primary:focus{ background: var(--sp-grad); color: #fff; filter: brightness(1.05); }
.jap-public-nav ~ .container .alert{ border-radius: 12px; }
.jap-public-nav ~ .container .well a:not(.btn){ color: var(--sp-primary); font-weight: 600; }
@media (max-width:767px){
    .jap-public-nav ~ .container{ padding-top: 92px; padding-bottom: 56px; }
    .jap-public-nav ~ .container .well{ padding: 26px 20px; border-radius: 20px; }
    .jap-public-nav ~ .container .btn-primary{ width: 100%; }
}

/* ============================================
   LANDING PAGE - TEMPLATE PASSION
   ============================================ */

/**
 * Template Name: Passion
 * Template URL: https://bootstrapmade.com/passion-bootstrap-template/
 */

:root {
	--default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--heading-font: "Barlow", sans-serif;
	--nav-font: "Inter", sans-serif;
	--background-color: #ffffff;
	--default-color: #140d1a;
	--heading-color: #0a3223;
	--accent-color: #43007A;
	--surface-color: #ffffff;
	--contrast-color: #ffffff;
	--nav-color: #ffffff;
	--nav-hover-color: #43007A;
	--nav-mobile-background-color: #ffffff;
	--nav-dropdown-background-color: #ffffff;
	--nav-dropdown-color: #14201c;
	--nav-dropdown-hover-color: #43007A;
}

.light-background {
	--background-color: #f4f9f7;
	--surface-color: #ffffff;
}

.dark-background {
	--background-color: #000704;
	--default-color: #ffffff;
	--heading-color: #ffffff;
	--surface-color: #28323a;
	--contrast-color: #ffffff;
}

:root {
	scroll-behavior: smooth;
}

.hero .hero-actions .btn-primary {
	background: var(--accent-color);
	color: var(--contrast-color);
	padding: 16px 32px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-color), transparent 60%);
}

/* ============================================
   ORDER STATUS BADGES
   ============================================ */

.order-status {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: capitalize;
	white-space: nowrap;
}

.order-status--completed,
.order-status--concluído,
.order-status--concluido {
	background-color: #d4edda;
	color: #1a6b35;
}

.order-status--pending,
.order-status--pendente {
	background-color: #fff3cd;
	color: #856404;
}

.order-status--in-progress,
.order-status--em-andamento,
.order-status--processing,
.order-status--processando {
	background-color: #cce5ff;
	color: #004085;
}

.order-status--partial,
.order-status--parcial {
	background-color: #e2d9f3;
	color: #44007a;
}

.order-status--canceled,
.order-status--cancelado,
.order-status--cancelled {
	background-color: #f8d7da;
	color: #842029;
}

.order-status--refunded,
.order-status--reembolsado {
	background-color: #d1ecf1;
	color: #0c5460;
}

/* ============================================
   BOTÕES FLUTUANTES
   ============================================ */

.integration-fixed {
	position: fixed !important;
	bottom: 20px !important;
	right: 20px !important;
	z-index: 2147483647 !important;
}

.integration-fixed iframe {
	pointer-events: none !important;
}



/* ==========================================================
   PAINEL DO CLIENTE (area logada)
   Usa as mesmas variaveis --sp-* das paginas publicas.
   Modo escuro: classe sp-dark no body (botao da lua no topo).
   ========================================================== */
body.dashboard-logged{
    --sp-page: #F4F2FA;
    --sp-surface: #FFFFFF;
    --sp-field: #F7F5FC;
    --sp-hover: #F3EEFB;
    --sp-sidebar-w: 268px;
    --bs-body-font-family: var(--sp-font);
    --bs-body-color: var(--sp-ink);
    --bs-body-bg: var(--sp-page);
    --bs-border-color: var(--sp-line);
    --bs-primary: #6A1FB0;
    --bs-primary-rgb: 106,31,176;
    --bs-link-color: #6A1FB0;
    --bs-link-color-rgb: 106,31,176;
    --bs-link-hover-color: #4A1380;
    --bs-link-hover-color-rgb: 74,19,128;
    margin: 0;
    min-height: 100vh;
    background: var(--sp-page);
    color: var(--sp-ink);
    font-family: var(--sp-font);
    font-size: 14.5px;
    -webkit-font-smoothing: antialiased;
}
body.dashboard-logged.sp-dark{
    --sp-page: #0E0A18;
    --sp-surface: #171126;
    --sp-field: #1F1832;
    --sp-hover: #241C3B;
    --sp-ink: #EEEAF7;
    --sp-muted: #A79FBF;
    --sp-line: #2D2545;
    --sp-soft: rgba(157,78,221,.18);
    --sp-primary: #B57BFF;
    --bs-body-color: var(--sp-ink);
    --bs-body-bg: var(--sp-page);
    --bs-border-color: var(--sp-line);
    --bs-secondary-color: var(--sp-muted);
    --bs-emphasis-color: #fff;
    --bs-heading-color: var(--sp-ink);
    --bs-primary-rgb: 181,123,255;
    --bs-link-color: #B57BFF;
    --bs-link-color-rgb: 181,123,255;
    --bs-link-hover-color: #D2B0FF;
    --bs-link-hover-color-rgb: 210,176,255;
    color-scheme: dark;
}
body.dashboard-logged h1, body.dashboard-logged h2, body.dashboard-logged h3,
body.dashboard-logged h4, body.dashboard-logged h5, body.dashboard-logged h6{ color: var(--sp-ink); font-family: var(--sp-font); }

/* ---------- Estrutura: menu lateral ---------- */
.sp-app{ min-height: 100vh; }
.sp-sidebar{
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1045;
    width: var(--sp-sidebar-w);
    display: flex; flex-direction: column;
    background: var(--sp-surface);
    border-right: 1px solid var(--sp-line);
    transition: transform .25s ease;
}
.sp-sidebar-head{ flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 72px; padding: 0 16px 0 22px; border-bottom: 1px solid var(--sp-line); }
.sp-logo{ display: flex; align-items: center; font-size: 20px; font-weight: 800; color: var(--sp-ink); text-decoration: none; }
.sp-logo img{ display: block; max-height: 42px; max-width: 190px; width: auto; height: auto; }
.sp-balance-card{
    position: relative; overflow: hidden; flex: 0 0 auto;
    margin: 16px 16px 8px; padding: 16px 18px;
    border-radius: 18px; background: var(--sp-grad); color: #fff;
    box-shadow: 0 18px 30px -20px rgba(90,24,154,.9);
}
.sp-balance-card:after{ content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.12); }
.sp-balance-label{ display: block; font-size: 12.5px; font-weight: 600; opacity: .85; }
.sp-balance-value{ display: block; margin: 2px 0 12px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.sp-balance-add{ position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; background: rgba(255,255,255,.18); color: #fff !important; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .2s; }
.sp-balance-add:hover{ background: rgba(255,255,255,.3); }
.sp-nav{ flex: 1 1 auto; overflow-y: auto; padding: 8px 12px 18px; }
.sp-nav ul{ list-style: none; margin: 0; padding: 0; }
.sp-nav li{ margin: 2px 0; }
.sp-nav li > a{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--sp-muted); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.sp-nav li > a .navbar-icon{ flex: 0 0 20px; width: 20px; text-align: center; font-size: 15px; color: inherit; opacity: .85; }
.sp-nav li > a:hover{ background: var(--sp-hover); color: var(--sp-ink); }
.sp-nav li.active > a, .sp-nav li > a.is-active{ background: var(--sp-soft); color: var(--sp-primary); }
.sp-nav li.active > a .navbar-icon, .sp-nav li > a.is-active .navbar-icon{ opacity: 1; }
.sp-nav li.sp-extra-item{ display: none; }
.sp-nav li.sp-extra-item.sp-extra-show{ display: block; }
.sp-nav .sp-more-btn{ display: block; width: 100%; margin: 8px 0 0; padding: 10px 12px; border: 1px dashed var(--sp-line); border-radius: 12px; background: transparent; color: var(--sp-primary); font-size: 13.5px; font-weight: 700; text-align: center; cursor: pointer; }
.sp-nav .sp-more-btn:hover{ background: var(--sp-soft); border-style: solid; }

/* ---------- Estrutura: topo e conteudo ---------- */
.sp-main{ min-height: 100vh; margin-left: var(--sp-sidebar-w); display: flex; flex-direction: column; transition: margin-left .25s ease; }
.sp-topbar{
    position: sticky; top: 0; z-index: 1030;
    display: flex; align-items: center; gap: 12px;
    height: 72px; padding: 0 28px;
    background: var(--sp-surface);
    background: color-mix(in srgb, var(--sp-surface) 86%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--sp-line);
}
.sp-icon-btn{ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--sp-line); border-radius: 12px; background: var(--sp-surface); color: var(--sp-ink); font-size: 15px; text-decoration: none; cursor: pointer; transition: border-color .2s, color .2s; }
.sp-icon-btn:hover, .sp-icon-btn:focus-visible{ border-color: var(--sp-primary); color: var(--sp-primary); }
.sp-topbar-logo{ display: none; align-items: center; text-decoration: none; font-weight: 800; color: var(--sp-ink); }
.sp-topbar-logo img{ display: block; max-height: 34px; max-width: 150px; width: auto; height: auto; }
.sp-hello{ font-size: 14.5px; color: var(--sp-muted); white-space: nowrap; }
.sp-hello strong{ color: var(--sp-ink); }
.sp-search{ display: flex; align-items: center; gap: 10px; flex: 0 1 360px; height: 42px; margin: 0 0 0 12px; padding: 0 14px; border: 1px solid var(--sp-line); border-radius: 12px; background: var(--sp-field); color: var(--sp-muted); font-weight: 400; cursor: text; }
.sp-search:focus-within{ border-color: var(--sp-primary); box-shadow: 0 0 0 4px rgba(123,44,191,.12); }
.sp-search input{ flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--sp-ink); font-size: 14px; }
.sp-topbar-actions{ display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sp-chip-balance{ display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; background: var(--sp-soft); color: var(--sp-primary) !important; font-size: 14.5px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.sp-chip-balance:hover{ filter: brightness(.97); }
.change-theme .fa-sun{ display: none; }
body.sp-dark .change-theme .fa-sun{ display: inline-block; }
body.sp-dark .change-theme .fa-moon{ display: none; }
body.sp-hide-balance [data-sp-balance]{ filter: blur(6px); user-select: none; }
body.sp-hide-balance .sp-toggle-balance .fa-eye:before{ content: "\f070"; }
.sp-avatar{ display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--sp-grad); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; }
.sp-user-menu{ min-width: 230px; }
.sp-user-menu-head{ display: flex; flex-direction: column; padding: 8px 12px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--sp-line); }
.sp-user-menu-head strong{ color: var(--sp-ink); }
.sp-user-menu-head span{ font-size: 13px; color: var(--sp-muted); }
body.dashboard-logged .main-wrapper{ flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
body.dashboard-logged .main{ flex: 1 1 auto; width: 100%; max-width: 1480px; margin: 0 auto; padding: 28px; }
.sp-dash-footer{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 18px 28px; border-top: 1px solid var(--sp-line); color: var(--sp-muted); font-size: 13px; }
.sp-dash-footer nav{ display: flex; gap: 18px; }
.sp-dash-footer a{ color: var(--sp-muted); text-decoration: none; }
.sp-dash-footer a:hover{ color: var(--sp-primary); }
.sp-backdrop, .sp-bottom-nav, .sp-only-mobile{ display: none; }
body.sp-sidebar-collapsed .sp-sidebar{ transform: translateX(-100%); }
body.sp-sidebar-collapsed .sp-main{ margin-left: 0; }
body.sp-sidebar-collapsed .sp-topbar-logo{ display: flex; }
@media (max-width:1199.98px){ .sp-hello{ display: none; } }
@media (max-width:991.98px){
    .sp-sidebar{ transform: translateX(-100%); }
    body.sp-sidebar-open .sp-sidebar{ transform: none; box-shadow: 0 30px 60px -10px rgba(22,15,41,.45); }
    body.sp-sidebar-open{ overflow: hidden; }
    .sp-backdrop{ display: block; position: fixed; inset: 0; z-index: 1044; background: rgba(14,10,24,.45); opacity: 0; pointer-events: none; transition: opacity .25s; }
    body.sp-sidebar-open .sp-backdrop{ opacity: 1; pointer-events: auto; }
    .sp-only-mobile{ display: inline-flex; }
    .sp-main, body.sp-sidebar-collapsed .sp-main{ margin-left: 0; }
    .sp-topbar{ height: 64px; padding: 0 14px; gap: 8px; }
    .sp-topbar-logo{ display: flex; }
    .sp-search{ display: none; }
    body.dashboard-logged .main{ padding: 18px 14px 96px; }
    .sp-dash-footer{ justify-content: center; text-align: center; padding: 16px 14px 92px; }
    .sp-bottom-nav{ display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--sp-surface); border-top: 1px solid var(--sp-line); box-shadow: 0 -10px 30px -20px rgba(22,15,41,.35); }
    .sp-bottom-nav a, .sp-bottom-nav button{ flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 0; border-radius: 12px; background: none; color: var(--sp-muted); font-size: 11px; font-weight: 600; text-decoration: none; }
    .sp-bottom-nav i{ font-size: 17px; }
    .sp-bottom-nav a.is-active{ background: var(--sp-soft); color: var(--sp-primary); }
    body.dashboard-logged .integration-fixed{ bottom: 84px !important; }
}
@media (max-width:575.98px){
    .sp-hide-sm{ display: none !important; }
    .sp-chip-balance{ padding: 0 10px; font-size: 13.5px; }
    .sp-chip-balance i{ display: none; }
    .sp-topbar-logo img{ max-width: 112px; }
}

/* ---------- Componentes ---------- */
body.dashboard-logged .card{ --bs-card-bg: var(--sp-surface); --bs-card-color: var(--sp-ink); --bs-card-border-color: var(--sp-line); --bs-card-border-radius: 18px; --bs-card-inner-border-radius: 17px; --bs-card-cap-bg: transparent; --bs-card-cap-color: var(--sp-ink); box-shadow: 0 1px 2px rgba(22,15,41,.04); }
body.dashboard-logged .card-header{ padding: 16px 20px; border-bottom: 1px solid var(--sp-line); }
body.dashboard-logged .card-header h6, body.dashboard-logged .card-header .h6{ margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--sp-ink); }
body.dashboard-logged .card-body{ padding: 20px; }
body.dashboard-logged .box-content, body.dashboard-logged .well{ padding: 20px; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 18px; color: var(--sp-ink); box-shadow: 0 1px 2px rgba(22,15,41,.04); }

body.dashboard-logged .nav-tabs{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 6px; border: 0; border-radius: 14px; background: var(--sp-field); }
body.dashboard-logged .nav-tabs .nav-item{ margin: 0; }
body.dashboard-logged .nav-tabs .nav-link{ margin: 0; padding: 9px 16px; border: 0; border-radius: 10px; background: transparent; color: var(--sp-muted); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
body.dashboard-logged .nav-tabs .nav-link:hover{ color: var(--sp-ink); }
body.dashboard-logged .nav-tabs .nav-link.active, body.dashboard-logged .nav-tabs .nav-item.show .nav-link, body.dashboard-logged .nav-tabs > li.active > a{ background: var(--sp-surface); color: var(--sp-primary); box-shadow: 0 2px 10px -3px rgba(22,15,41,.18); }
body.dashboard-logged .nav-pills .nav-link{ border-radius: 10px; color: var(--sp-muted); font-weight: 700; }
body.dashboard-logged .nav-pills .nav-link.active, body.dashboard-logged .nav-pills > li.active > a{ background: var(--sp-primary); color: #fff; }

body.dashboard-logged .form-group{ margin-bottom: 16px; }
body.dashboard-logged .control-label, body.dashboard-logged .form-label, body.dashboard-logged .form-group > label{ display: inline-block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--sp-ink); }
body.dashboard-logged .form-control, body.dashboard-logged .form-select{ min-height: 46px; padding: 10px 14px; border: 1px solid var(--sp-line); border-radius: 12px; background-color: var(--sp-field); color: var(--sp-ink); font-size: 14.5px; box-shadow: none; }
body.dashboard-logged .form-control::placeholder{ color: var(--sp-muted); opacity: .8; }
body.dashboard-logged .form-control:focus, body.dashboard-logged .form-select:focus{ border-color: var(--sp-primary); background-color: var(--sp-surface); color: var(--sp-ink); box-shadow: 0 0 0 4px rgba(123,44,191,.14); }
body.dashboard-logged .form-control[readonly], body.dashboard-logged .form-control:disabled{ background-color: var(--sp-hover); opacity: 1; }
body.dashboard-logged textarea.form-control{ min-height: 120px; }
body.dashboard-logged select.form-control{ appearance: auto; -webkit-appearance: auto; }
body.dashboard-logged input[type=checkbox], body.dashboard-logged input[type=radio]{ accent-color: var(--sp-primary); }
body.dashboard-logged .form-check-input:checked{ background-color: var(--sp-primary); border-color: var(--sp-primary); }
body.dashboard-logged .help-block, body.dashboard-logged .form-text{ margin-top: 6px; font-size: 12.5px; color: var(--sp-muted); }
body.dashboard-logged .input-group > .form-control{ min-height: 46px; }
body.dashboard-logged .input-group-btn{ display: flex; }

body.dashboard-logged .btn{ --bs-btn-border-radius: 12px; --bs-btn-font-weight: 700; --bs-btn-padding-y: 10px; --bs-btn-padding-x: 20px; --bs-btn-font-size: 14.5px; transition: filter .2s, background .2s, color .2s, border-color .2s; }
body.dashboard-logged .btn-primary{ --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; background: var(--sp-grad); border: 0; color: #fff; box-shadow: 0 10px 22px -12px rgba(90,24,154,.85); }
body.dashboard-logged .btn-primary:hover, body.dashboard-logged .btn-primary:focus, body.dashboard-logged .btn-primary:active{ background: var(--sp-grad); color: #fff; filter: brightness(1.07); }
body.dashboard-logged .btn-default, body.dashboard-logged .btn-secondary, body.dashboard-logged .btn-light, body.dashboard-logged .btn-outline-dark, body.dashboard-logged .btn-outline-primary, body.dashboard-logged .btn-outline-secondary{ background: var(--sp-surface); color: var(--sp-ink); border: 1px solid var(--sp-line); box-shadow: none; }
body.dashboard-logged .btn-default:hover, body.dashboard-logged .btn-secondary:hover, body.dashboard-logged .btn-light:hover, body.dashboard-logged .btn-outline-dark:hover, body.dashboard-logged .btn-outline-primary:hover, body.dashboard-logged .btn-outline-secondary:hover{ background: var(--sp-surface); color: var(--sp-primary); border-color: var(--sp-primary); }
body.dashboard-logged .btn-success{ background: #16a34a; border-color: #16a34a; color: #fff; }
body.dashboard-logged .btn-danger{ background: #dc2626; border-color: #dc2626; color: #fff; }
body.dashboard-logged .btn-xs{ padding: 4px 10px; font-size: 12.5px; border-radius: 8px; }
body.dashboard-logged .btn-sm{ padding: 6px 12px; font-size: 13px; border-radius: 10px; }
body.dashboard-logged .btn-block{ display: block; width: 100%; }

body.dashboard-logged .content-table{ background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 18px; }
body.dashboard-logged .content-table{ overflow: hidden; }
body.dashboard-logged .table-responsive{ border: 0; margin: 0; }
body.dashboard-logged .table{ --bs-table-bg: transparent; --bs-table-color: var(--sp-ink); --bs-table-border-color: var(--sp-line); --bs-table-striped-bg: var(--sp-field); --bs-table-striped-color: var(--sp-ink); --bs-table-hover-bg: var(--sp-hover); --bs-table-hover-color: var(--sp-ink); margin-bottom: 0; color: var(--sp-ink); }
body.dashboard-logged .table > thead > tr > th, body.dashboard-logged .table thead th{ padding: 13px 14px; border-bottom: 1px solid var(--sp-line); background: var(--sp-field); color: var(--sp-muted); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
body.dashboard-logged .table > tbody > tr > td{ padding: 13px 14px; border-color: var(--sp-line); background: transparent; color: var(--sp-ink); font-size: 14px; vertical-align: middle; }
body.dashboard-logged .table > tbody > tr:hover > td{ background: var(--sp-hover); }
body.dashboard-logged .table td.link, body.dashboard-logged .table td.link a{ max-width: 380px; word-break: break-all; }
body.dashboard-logged .content-table .table td .btn, body.dashboard-logged .content-table .table td .badge{ white-space: nowrap; }

body.dashboard-logged .alert{ border: 0; border-radius: 14px; padding: 14px 18px; font-size: 14.5px; }
body.dashboard-logged .alert-success{ background: #E8F7EE; color: #166534; }
body.dashboard-logged .alert-danger{ background: #FDECEC; color: #991B1B; }
body.dashboard-logged .alert-warning{ background: #FEF5E7; color: #92400E; }
body.dashboard-logged .alert-info{ background: var(--sp-soft); color: var(--sp-primary); }
body.dashboard-logged .alert .close{ float: right; margin-left: 12px; padding: 0; border: 0; background: none; color: inherit; font-size: 22px; line-height: 1; opacity: .6; }
body.dashboard-logged .alert .close:hover{ opacity: 1; }

body.dashboard-logged .pagination{ display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
body.dashboard-logged .pagination > li > a, body.dashboard-logged .pagination > li > span, body.dashboard-logged .pagination .page-link{ display: block; min-width: 38px; padding: 8px 12px; border: 1px solid var(--sp-line); border-radius: 10px !important; background: var(--sp-surface); color: var(--sp-ink); font-weight: 600; text-align: center; text-decoration: none; }
body.dashboard-logged .pagination > li > a:hover, body.dashboard-logged .pagination .page-link:hover{ border-color: var(--sp-primary); color: var(--sp-primary); }
body.dashboard-logged .pagination > .active > a, body.dashboard-logged .pagination > .active > span, body.dashboard-logged .pagination .page-item.active .page-link{ background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; }

body.dashboard-logged .dropdown-menu{ --bs-dropdown-bg: var(--sp-surface); --bs-dropdown-color: var(--sp-ink); --bs-dropdown-border-color: var(--sp-line); --bs-dropdown-link-color: var(--sp-ink); --bs-dropdown-link-hover-color: var(--sp-primary); --bs-dropdown-link-hover-bg: var(--sp-hover); --bs-dropdown-link-active-color: #fff; --bs-dropdown-link-active-bg: var(--sp-primary); padding: 6px; border-radius: 14px; box-shadow: 0 24px 40px -20px rgba(22,15,41,.4); }
body.dashboard-logged .dropdown-item{ border-radius: 8px; padding: 8px 12px; font-size: 14px; }
body.dashboard-logged .dropdown-item i{ width: 18px; margin-right: 8px; text-align: center; color: var(--sp-muted); }
body.dashboard-logged .modal-content{ --bs-modal-bg: var(--sp-surface); --bs-modal-color: var(--sp-ink); border: 0; border-radius: 20px; color: var(--sp-ink); }
body.dashboard-logged .modal-header{ border-bottom: 1px solid var(--sp-line); }
body.dashboard-logged .modal-footer{ border-top: 1px solid var(--sp-line); }
body.dashboard-logged .badge{ border-radius: 999px; padding: 5px 10px; font-weight: 700; }

/* compatibilidade: plugins Bootstrap 3 do PerfectPanel usam .in e .open */
body.dashboard-logged .fade.in{ opacity: 1; }
body.dashboard-logged .modal.in .modal-dialog{ transform: none; }
body.dashboard-logged .modal-backdrop.in{ opacity: .5; }
body.dashboard-logged .collapse.in{ display: block; }
body.dashboard-logged .tooltip.in{ opacity: 1; }
body.dashboard-logged .open > .dropdown-menu{ display: block; }
/* ...e o CSS global do PerfectPanel traz regras do Bootstrap 3 que escondem o .show do Bootstrap 5 */
body.dashboard-logged .fade.show{ opacity: 1; }
body.dashboard-logged .modal.show .modal-dialog{ transform: none; }
body.dashboard-logged .modal-backdrop.show{ opacity: .5; }
body.dashboard-logged .tooltip.show, body.dashboard-logged .popover.show{ opacity: 1; }
body.dashboard-logged .collapse.show{ display: block; }
body.dashboard-logged .hidden{ display: none !important; }
body.dashboard-logged .pull-right{ float: right; }
body.dashboard-logged .pull-left{ float: left; }
body.dashboard-logged .text-right{ text-align: right; }
body.dashboard-logged .text-left{ text-align: left; }
body.dashboard-logged .img-responsive{ max-width: 100%; height: auto; }
body.dashboard-logged .text-primary{ color: var(--sp-primary) !important; }
body.dashboard-logged .text-muted{ color: var(--sp-muted) !important; }
body.dashboard-logged .font-14{ font-size: 14px; }
body.dashboard-logged .color-dark{ color: var(--sp-ink); }

/* ---------- Novo pedido ---------- */
body.dashboard-logged .box-card > .card{ height: 100%; }
body.dashboard-logged .hide-btn{ display: inline-flex; align-items: center; margin-left: auto; padding: 6px 12px; border: 1px solid var(--sp-line); border-radius: 10px; background: var(--sp-surface); color: var(--sp-muted); font-size: 13px; font-weight: 600; cursor: pointer; }
body.dashboard-logged .hide-btn:hover{ border-color: var(--sp-primary); color: var(--sp-primary); }
body.dashboard-logged .hide-btn > div:last-child{ display: none; }
body.dashboard-logged .hide-btn.is-collapsed > div:first-child{ display: none; }
body.dashboard-logged .hide-btn.is-collapsed > div:last-child{ display: block; }
body.dashboard-logged .social-cat.sp-collapsed{ display: none; }
body.dashboard-logged .social-btn{ --bs-gutter-x: 10px; row-gap: 10px; }
body.dashboard-logged .brand-category{ gap: 10px; height: 48px; padding: 0 14px; border: 1px solid var(--sp-line); border-radius: 14px; background: var(--sp-surface); color: var(--sp-ink); font-size: 14px; font-weight: 700; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s, color .2s, background .2s; }
body.dashboard-logged .brand-category i{ width: 20px; font-size: 17px; text-align: center; color: var(--sp-primary); }
body.dashboard-logged .brand-category:hover{ border-color: var(--sp-primary); color: var(--sp-ink); transform: translateY(-1px); box-shadow: 0 10px 20px -16px rgba(90,24,154,.7); }
body.dashboard-logged .brand-category.active, body.dashboard-logged .brand-category.is-active, body.dashboard-logged .brand-category.selected{ border-color: var(--sp-primary); background: var(--sp-soft); color: var(--sp-primary); }
body.dashboard-logged .brand-category[data-id=instagram] i{ color: #E1306C; }
body.dashboard-logged .brand-category[data-id=facebook] i{ color: #1877F2; }
body.dashboard-logged .brand-category[data-id=youtube] i{ color: #FF0000; }
body.dashboard-logged .brand-category[data-id=twitter] i, body.dashboard-logged .brand-category[data-id=tiktok] i{ color: var(--sp-ink); }
body.dashboard-logged .brand-category[data-id=spotify] i{ color: #1DB954; }
body.dashboard-logged .brand-category[data-id=linkedin] i{ color: #0A66C2; }
body.dashboard-logged .brand-category[data-id=google] i{ color: #4285F4; }
body.dashboard-logged .brand-category[data-id=telegram] i{ color: #26A5E4; }
body.dashboard-logged .brand-category[data-id=discord] i{ color: #5865F2; }
body.dashboard-logged .brand-category[data-id=snapchat] i{ color: #E8B900; }
body.dashboard-logged .brand-category[data-id=twitch] i{ color: #9146FF; }
body.dashboard-logged .new-order-stat h6{ margin: 0 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--sp-muted); }
body.dashboard-logged .new-order-stat #service_name{ padding: 12px 14px; border-radius: 12px; background: var(--sp-field); font-size: 14.5px; font-weight: 700; line-height: 1.5; }
body.dashboard-logged #service_description .font-14{ max-height: 420px; overflow: auto; color: var(--sp-ink); line-height: 1.65; }
body.dashboard-logged #history-search{ margin-left: auto; }
body.dashboard-logged #history-search .form-control{ min-height: 38px; height: 38px; font-size: 13.5px; }

/* ---------- Modo escuro: ajustes finos ---------- */
body.sp-dark .card, body.sp-dark .box-content, body.sp-dark .well{ box-shadow: none; }
body.sp-dark .alert-success{ background: rgba(34,197,94,.14); color: #86EFAC; }
body.sp-dark .alert-danger{ background: rgba(239,68,68,.15); color: #FCA5A5; }
body.sp-dark .alert-warning{ background: rgba(245,158,11,.15); color: #FCD34D; }
body.sp-dark .btn-close{ filter: invert(1) grayscale(100%) brightness(200%); }
body.sp-dark .sp-logo img, body.sp-dark .sp-topbar-logo img{ padding: 4px 8px; border-radius: 10px; background: #fff; }

/* ---------- Paginas do painel: pedidos, status e paginacao ---------- */
body.dashboard-logged .table-tab{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 !important; padding: 14px 14px 12px; border-bottom: 1px solid var(--sp-line); }
body.dashboard-logged .table-tab .nav-tabs{ margin: 0; }
body.dashboard-logged .table-tab form, body.dashboard-logged .table-tab .search{ margin-left: auto; }
body.dashboard-logged .table-tab .form-control{ min-height: 40px; height: 40px; min-width: 220px; }
body.dashboard-logged .table-tools .btn{ --bs-btn-padding-y: 7px; --bs-btn-padding-x: 14px; --bs-btn-font-size: 13.5px; }
body.dashboard-logged .sp-col-date{ white-space: nowrap; color: var(--sp-muted); font-size: 13.5px; }
body.dashboard-logged .sp-col-link{ min-width: 200px; max-width: 280px; word-break: break-all; }
body.dashboard-logged .sp-col-link strong{ font-weight: 600; }
body.dashboard-logged .sp-col-service{ min-width: 280px; max-width: 440px; line-height: 1.45; }
body.dashboard-logged .btn-custom{ margin-left: 6px; background: var(--sp-soft) !important; color: var(--sp-primary) !important; box-shadow: none !important; border-radius: 8px !important; }
body.dashboard-logged .order-checkbox{ width: 16px; height: 16px; vertical-align: -3px; }
body.dashboard-logged .badge{ font-size: 12px; letter-spacing: .01em; }
body.dashboard-logged .badge-completed{ background: rgba(22,163,74,.14); color: #15803D; }
body.dashboard-logged .badge-pending, body.dashboard-logged .badge-awaiting{ background: rgba(245,158,11,.16); color: #B45309; }
body.dashboard-logged .badge-processing, body.dashboard-logged .badge-inprogress{ background: rgba(37,99,235,.14); color: #1D4ED8; }
body.dashboard-logged .badge-partial{ background: var(--sp-soft); color: var(--sp-primary); }
body.dashboard-logged .badge-canceled{ background: rgba(220,38,38,.13); color: #B91C1C; }
body.dashboard-logged .badge-refunded{ background: rgba(13,148,136,.14); color: #0F766E; }
body.sp-dark .badge-completed{ color: #86EFAC; }
body.sp-dark .badge-pending, body.sp-dark .badge-awaiting{ color: #FCD34D; }
body.sp-dark .badge-processing, body.sp-dark .badge-inprogress{ color: #93C5FD; }
body.sp-dark .badge-canceled{ color: #FCA5A5; }
body.sp-dark .badge-refunded{ color: #5EEAD4; }
body.dashboard-logged .paginations{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 16px 20px; list-style: none; border-top: 1px solid var(--sp-line); }
body.dashboard-logged .paginations li{ list-style: none; }
body.dashboard-logged .paginations button.link, body.dashboard-logged .paginations a{ display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--sp-line); border-radius: 10px; background: var(--sp-surface); color: var(--sp-ink); font-weight: 600; text-decoration: none; cursor: pointer; }
body.dashboard-logged .paginations button.link:hover, body.dashboard-logged .paginations a:hover{ border-color: var(--sp-primary); color: var(--sp-primary); }
body.dashboard-logged .paginations button.link.active, body.dashboard-logged .paginations li.active a{ background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; }
@media (max-width:767.98px){
    body.dashboard-logged .table-tab .nav-tabs{ flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
    body.dashboard-logged .table-tab form, body.dashboard-logged .table-tab .search{ margin-left: 0; width: 100%; }
    body.dashboard-logged .table-tab .form-control{ width: 100%; min-width: 0; }
}

/* ---------- Conta ---------- */
body.dashboard-logged .box-card + .box-card, body.dashboard-logged #alert-container + .box-card{ margin-top: 20px; }
body.dashboard-logged .d-cs-flex{ display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
body.dashboard-logged .user-info{ gap: 14px; }
body.dashboard-logged .sp-acc-avatar{ flex: 0 0 48px; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sp-grad); color: #fff; font-size: 18px; font-weight: 800; }
body.dashboard-logged .user-info .name{ font-size: 16px; font-weight: 800; color: var(--sp-ink); text-transform: none; letter-spacing: 0; }
body.dashboard-logged .user-info .name span{ margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--sp-muted); }
body.dashboard-logged .acc-items .item{ padding: 22px 0; border-bottom: 1px solid var(--sp-line); }
body.dashboard-logged .acc-items .item:first-of-type{ padding-top: 2px; }
body.dashboard-logged .acc-items .item:last-child{ padding-bottom: 2px; border-bottom: 0; }
body.dashboard-logged .sp-acc-title{ margin: 0 0 12px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; text-transform: none; color: var(--sp-ink); }
body.dashboard-logged .acc-items p{ color: var(--sp-muted); }
body.dashboard-logged .acc-items .btn.w-100{ min-height: 46px; }
body.dashboard-logged .new-order-tab.w-50{ width: auto !important; }
body.dashboard-logged .card-header .nav-tabs{ margin: 0; }

/* ---------- Dashboard: resumo e niveis ---------- */
body.dashboard-logged .user-list{ margin: 0; padding: 0; list-style: none; }
body.dashboard-logged .user-list li{ display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--sp-line); color: var(--sp-muted); font-size: 14px; }
body.dashboard-logged .user-list li:last-child{ border-bottom: 0; }
body.dashboard-logged .user-list li .ms-auto{ color: var(--sp-ink); font-weight: 700; text-align: right; }
body.dashboard-logged .user-list p{ margin: 0; color: var(--sp-ink); }
body.dashboard-logged #cd-table{ display: flex; margin: 8px 0 0; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 18px; overflow: hidden; }
body.dashboard-logged #cd-table > header.cd-table-column{ flex: 0 0 300px; background: var(--sp-field); border-right: 1px solid var(--sp-line); }
body.dashboard-logged #cd-table .cd-table-container{ flex: 1 1 auto; overflow-x: auto; }
body.dashboard-logged #cd-table .cd-table-wrapper{ display: flex; min-width: 560px; }
body.dashboard-logged #cd-table .cd-table-wrapper .cd-table-column{ flex: 1 1 0; min-width: 92px; border-right: 1px solid var(--sp-line); }
body.dashboard-logged #cd-table .cd-table-wrapper .cd-table-column:last-child{ border-right: 0; }
body.dashboard-logged #cd-table h2{ display: flex; align-items: center; justify-content: center; height: 56px; margin: 0; padding: 0 10px; border-bottom: 1px solid var(--sp-line); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-ink); }
body.dashboard-logged #cd-table header h2{ justify-content: flex-start; padding: 0 18px; color: var(--sp-primary); }
body.dashboard-logged #cd-table ul{ margin: 0; padding: 0; list-style: none; }
body.dashboard-logged #cd-table li{ display: flex; align-items: center; justify-content: center; height: 56px; padding: 0 10px; border-bottom: 1px solid var(--sp-line); font-size: 13.5px; }
body.dashboard-logged #cd-table li:last-child{ border-bottom: 0; }
body.dashboard-logged #cd-table header li{ justify-content: flex-start; padding: 0 18px; color: var(--sp-ink); font-weight: 600; line-height: 1.3; }
body.dashboard-logged #cd-table .fa-certificate{ font-size: 17px; }
body.dashboard-logged .cd-scroll-right{ display: none; }
body.dashboard-logged #cd-table + p{ margin-top: 16px !important; padding: 16px 20px; border-radius: 14px; background: var(--sp-field); color: var(--sp-muted); font-size: 13.5px; line-height: 1.7; }
@media (max-width:767.98px){ body.dashboard-logged #cd-table > header.cd-table-column{ flex-basis: 170px; } body.dashboard-logged #cd-table header li{ font-size: 12.5px; } }

/* ---------- Refill e paginas com abas antigas (Bootstrap 3) ---------- */
body.dashboard-logged .nav-pills{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; padding: 6px; border-radius: 14px; background: var(--sp-field); list-style: none; }
body.dashboard-logged .nav-pills > li{ float: none; margin: 0; }
body.dashboard-logged .nav-pills > li > a{ display: block; padding: 9px 16px; border-radius: 10px; color: var(--sp-muted); font-size: 13.5px; font-weight: 700; text-decoration: none; }
body.dashboard-logged .nav-pills > li > a:hover{ color: var(--sp-ink); }
body.dashboard-logged .nav-pills > li.active > a{ background: var(--sp-surface); color: var(--sp-primary); box-shadow: 0 2px 10px -3px rgba(22,15,41,.18); }
body.dashboard-logged .nav-pills > li.search{ margin-left: auto; }
body.dashboard-logged .nav-pills > li.search .form-control{ min-height: 40px; height: 40px; border-radius: 10px 0 0 10px; }
body.dashboard-logged .nav-pills > li.search .btn{ height: 40px; border-radius: 0 10px 10px 0; padding: 0 14px; }
body.dashboard-logged .well-float{ padding: 0; overflow: auto; }
body.dashboard-logged .container-fluid{ padding: 0; }

/* ---------- Adicionar saldo ---------- */
body.dashboard-logged .card-select{ display: none; }
@media (max-width:767.98px){ body.dashboard-logged .card-header .nav-tabs{ flex-wrap: nowrap; overflow-x: auto; } }

/* ---------- Selects com busca do PerfectPanel (select2) ---------- */
body.dashboard-logged .select2-container{ max-width: 100%; }
body.dashboard-logged .select2-selection--single.form-control{ position: relative; display: flex; align-items: center; height: auto; min-height: 46px; padding: 8px 40px 8px 14px; overflow: hidden; cursor: pointer; }
body.dashboard-logged .select2-selection__rendered{ display: block; width: 100%; min-width: 0; padding: 0 !important; overflow: hidden; color: var(--sp-ink) !important; line-height: 1.4 !important; white-space: nowrap; text-overflow: ellipsis; }
body.dashboard-logged .select2-selection__rendered > span{ display: flex; align-items: center; gap: 8px; min-width: 0; }
body.dashboard-logged .select2-selection__text{ min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.dashboard-logged .select2-selection__icon img, body.dashboard-logged .select2-results__option img{ max-width: 18px; max-height: 18px; }
body.dashboard-logged .select2-selection__arrow{ position: absolute !important; top: 50% !important; right: 12px !important; height: auto !important; transform: translateY(-50%); }
body.dashboard-logged .select2-dropdown{ overflow: hidden; border: 1px solid var(--sp-line); border-radius: 14px; background: var(--sp-surface); color: var(--sp-ink); box-shadow: 0 24px 40px -20px rgba(22,15,41,.4); }
body.dashboard-logged .select2-search--dropdown{ padding: 8px; }
body.dashboard-logged .select2-search--dropdown .select2-search__field{ padding: 8px 10px; border: 1px solid var(--sp-line); border-radius: 10px; background: var(--sp-field); color: var(--sp-ink); outline: 0; }
body.dashboard-logged .select2-results__option{ padding: 9px 12px; font-size: 14px; color: var(--sp-ink); }
body.dashboard-logged .select2-results__option--highlighted, body.dashboard-logged .select2-results__option[aria-selected=true]{ background: var(--sp-soft) !important; color: var(--sp-primary) !important; }

/* ---------- Celular: topo e redes sociais ---------- */
@media (max-width:575.98px){
    .sp-topbar{ gap: 6px; }
    .sp-topbar-actions{ gap: 6px; }
    .sp-toggle-balance{ display: none; }
    .sp-topbar-logo img{ max-width: 96px; }
    body.dashboard-logged .social-btn > [class*="col-"]{ flex: 0 0 50%; max-width: 50%; }
    body.dashboard-logged .brand-category{ height: 44px; padding: 0 10px; gap: 8px; font-size: 13px; }
    body.dashboard-logged .card-header, body.dashboard-logged .card-body{ padding: 14px; }
}

/* ==========================================================
   MARCA (logo em SVG + texto, igual em todo o site)
   ========================================================== */
.sp-brand{ display: inline-flex; align-items: center; gap: 10px; line-height: 1; text-decoration: none; }
.sp-brand-mark{ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #FF8A3D 0%, #E1306C 50%, #7B2CBF 100%); box-shadow: 0 8px 18px -10px rgba(225,48,108,.9), inset 0 1px 0 rgba(255,255,255,.28); }
.sp-brand-mark svg{ width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.sp-brand-mark .sp-brand-spark{ fill: #fff; stroke: none; opacity: .95; }
.sp-brand-text{ display: flex; flex-direction: column; gap: 4px; }
.sp-brand-name{ font-family: var(--sp-font); font-size: 21px; font-weight: 800; letter-spacing: -.035em; color: var(--sp-ink); white-space: nowrap; }
.sp-brand-name b{ font-weight: 800; background: linear-gradient(90deg, #E1306C 0%, #7B2CBF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-brand-tag{ padding-left: 1px; font-family: var(--sp-font); font-size: 9.5px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--sp-muted); }
.sp-brand--sm{ gap: 8px; }
.sp-brand--sm .sp-brand-mark{ width: 34px; height: 34px; border-radius: 10px; }
.sp-brand--sm .sp-brand-mark svg{ width: 22px; height: 22px; }
.sp-brand--sm .sp-brand-name{ font-size: 18px; }
.sp-brand--sm .sp-brand-tag{ font-size: 8.5px; }
.jap-foot .sp-brand-name, body.sp-dark .sp-brand-name{ color: #fff; }
.jap-foot .sp-brand-name b, body.sp-dark .sp-brand-name b{ background-image: linear-gradient(90deg, #FF7AA8 0%, #C79BFF 100%); }
.jap-foot .sp-brand-tag{ color: #A79FC0; }
.jap-public-nav .navbar-brand{ display: flex; align-items: center; }
@media (max-width:767px){
    .jap-public-nav .sp-brand-mark{ width: 34px; height: 34px; border-radius: 10px; }
    .jap-public-nav .sp-brand-mark svg{ width: 22px; height: 22px; }
    .jap-public-nav .sp-brand-name{ font-size: 18px; }
    .jap-public-nav .sp-brand-tag{ font-size: 8.5px; }
}
@media (max-width:575.98px){
    .sp-topbar .sp-brand-text{ display: none; }
}

/* ---------- Pedidos: botoes Refill / Cancelar ---------- */
body.dashboard-logged .sp-col-actions{ white-space: nowrap; }
body.dashboard-logged .order-actions{ display: flex; align-items: center; gap: 6px; }
body.dashboard-logged .order-actions .btn{ display: inline-flex; align-items: center; gap: 6px; }
body.dashboard-logged .order-actions .btn.disabled{ opacity: .55; pointer-events: auto; cursor: help; }

/* ---------- Dashboard: niveis de fidelidade ---------- */
body.dashboard-logged .sp-level-pill{ padding: 4px 12px; border-radius: 999px; background: var(--sp-grad); color: #fff !important; font-size: 13px; }
body.dashboard-logged .sp-next-text{ margin: 0 0 16px; color: var(--sp-ink); font-size: 15px; line-height: 1.6; }
body.dashboard-logged .sp-progress{ height: 12px; border-radius: 999px; background: var(--sp-field); overflow: hidden; border: 1px solid var(--sp-line); }
body.dashboard-logged .sp-progress span{ display: block; height: 100%; width: 0; border-radius: 999px; background: var(--sp-grad); transition: width .6s ease; }
body.dashboard-logged .sp-progress-legend{ display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; color: var(--sp-muted); font-size: 12.5px; font-weight: 600; }
body.dashboard-logged .sp-levels-table td{ font-size: 14.5px; }
body.dashboard-logged .sp-levels-table tr.is-current > td{ background: var(--sp-soft); }
body.dashboard-logged .sp-level-dot{ display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--sp-line); vertical-align: 0; }
body.dashboard-logged .sp-levels-table tr.is-current .sp-level-dot{ background: var(--sp-grad); box-shadow: 0 0 0 4px rgba(123,44,191,.18); }
body.dashboard-logged .sp-levels-note{ margin: -8px 0 24px; color: var(--sp-muted); font-size: 13.5px; }

body.dashboard-logged .table .sp-col-actions{ position: sticky; right: 0; z-index: 1; background: var(--sp-surface); box-shadow: -10px 0 14px -12px rgba(22,15,41,.35); }
body.dashboard-logged .table thead .sp-col-actions{ background: var(--sp-field); }

/* ---------- Banner "Abrir no aplicativo" do PerfectPanel ----------
   Ele poe um transform no #page, o que prende o menu lateral (position: fixed) a pagina inteira.
   Anulamos o transform e descontamos a altura do banner (medida no layout, em --sp-banner-h). */
body.dashboard-logged.pp-app--show #page{ transform: none !important; }
body.pp-app--show .sp-sidebar, body.pp-app--show .sp-backdrop{ top: var(--sp-banner-h, 68px); }
body.pp-app--show .sp-topbar{ top: var(--sp-banner-h, 68px); }
body.pp-app--show .navbar.navbar-default.jap-public-nav{ top: var(--sp-banner-h, 68px); }
.sp-nav{ min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sp-sidebar{ overflow: hidden; }
@media (max-width:991.98px){
    .sp-sidebar{ padding-bottom: env(safe-area-inset-bottom); }
    body.sp-sidebar-open .sp-bottom-nav{ visibility: hidden; }
}

@media (max-width:991.98px){
    /* no celular o menu inteiro rola (saldo + lista) e o topo com a logo fica fixo */
    .sp-sidebar{ overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .sp-sidebar-head{ position: sticky; top: 0; z-index: 2; background: var(--sp-surface); }
    .sp-nav{ flex: 0 0 auto; overflow: visible; padding-bottom: 28px; }
}


/* Abas do Novo pedido (Novo pedido / Favoritos / Assinaturas) em uma linha no celular */
@media (max-width:575.98px){
    body.dashboard-logged #myTab{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; }
    body.dashboard-logged #myTab .nav-item{ min-width: 0; }
    body.dashboard-logged #myTab .nav-link{ width: 100%; padding: 9px 4px; font-size: 13px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Numero (ID) do servico no seletor do Novo pedido: a classe badge-secondary e do Bootstrap 4 e ficava branca sem fundo */
body.dashboard-logged .select2-container .badge.badge-secondary{ background: rgba(106,31,176,.12); color: #6A1FB0; font-weight: 700; font-size: 11.5px; padding: 3px 8px; border-radius: 999px; }
body.dashboard-logged .select2-results__option--highlighted .badge.badge-secondary{ background: rgba(255,255,255,.22); color: #fff; }
body.dashboard-logged.sp-dark .select2-container .badge.badge-secondary{ background: rgba(201,167,245,.16); color: #D9C2F8; }