@charset "UTF-8";
:root{--vip-primary:#112d49;--vip-accent:#3b82f6;--vip-success:#16a34a;--vip-danger:#e11d48;--vip-muted:#6b7280;--vip-bg:#f5f7fb;--vip-card:#ffffff;--vip-border:#e5e7eb;--vip-radius:12px;--vip-shadow:0 6px 20px rgba(17,45,73,.06);}
html,body{background:var(--vip-bg)!important}
body,.panel,.panel *{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{text-decoration:none}a:hover{text-decoration:underline}
#wallBar{position:sticky;top:0;z-index:999;background:var(--vip-primary)!important}
.navbar-brand img{height:36px;width:auto;object-fit:contain}
#searchBarMain{margin-left:0;width:100%;max-width:520px;display:inline-block;vertical-align:middle}
#searchBarMain .search{width:100%!important;border:1px solid var(--vip-border);border-radius:10px;padding:10px 12px}
#btn-search-home-top{border-radius:10px}
.panel-default{border:1px solid var(--vip-border);border-radius:var(--vip-radius);box-shadow:var(--vip-shadow);overflow:hidden;background:var(--vip-card)}
.panel-heading{background:var(--vip-card);color:#111;border-bottom:1px solid var(--vip-border);padding:14px 16px}
.panel-body{padding:16px}.whiteBar{background:#fff;border-bottom:1px solid var(--vip-border)}.whiteBar li{height:52px}
.smallFace,.searchFace,.conversationFace,.panel-body .img-circle{border-radius:50%!important}
.feed-author{color:var(--vip-primary);font-weight:600;text-transform:capitalize}
.st_like_share{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:#f9fafb;color:#444;border-top:1px solid var(--vip-border)}
.st_like_share a{color:#374151;font-weight:600}
.newsFeed-block img,.timeline-added-images img{border-radius:10px}
/*
.newsFeed-block video,.videopreview,.upload-preview video{width:100%!important;height:auto!important;display:block;border-radius:10px;aspect-ratio:16/9}
@supports not (aspect-ratio:16/9){.newsFeed-block video,.videopreview,.upload-preview video{height:auto!important}}
*/
.wallbutton{border-radius:10px;padding:10px 14px;font-weight:700;border:1px solid rgba(0,0,0,.04);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 8px 14px rgba(16,185,129,.12);transition:transform .06s ease,filter .16s ease;background-color:#0099D2!important;border-color:#0099D2!important}
.wallbutton:hover{filter:brightness(.96)}.wallbutton:active{transform:translateY(1px)}
.messageButton{background:#4285f4!important;border-color:#4285f4!important;border-radius:10px}.removeButton{background:#E06666!important;border-color:#E06666!important}
.row-button-custom-1{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;border:1px solid var(--vip-border);border-radius:12px;padding:10px 12px;box-shadow:var(--vip-shadow)}
.btn-default-custom{border:1px solid var(--vip-border);background:#fff;border-radius:10px;padding:8px 12px;line-height:1}
#panel-advancedSearch{margin-top:10px}#panel-advancedSearch label{font-weight:600;color:#111}
#panel-advancedSearch .selectpicker,#panel-advancedSearch input.form-control{border-radius:10px}

.sidebar{background-color:#F9F9F9!important}
.sidebar-block{padding:12px}

.sidebar-block .category{color:#365D98!important;font-weight:700}
.numberCount{background:var(--vip-danger);font-weight:700;border-radius:999px}
:focus{outline:2px solid var(--vip-accent);outline-offset:2px}button:focus,a:focus{border-radius:8px}
.margintop10{margin-top:12px!important}.marginbottom10{margin-bottom:12px!important}.preview{border-radius:10px}.commentPic,.commentPreview{height:160px!important}
#notificationContainer{border:1px solid var(--vip-border);border-radius:12px;box-shadow:var(--vip-shadow);overflow:hidden}
@media (min-width:1200px){.row [class*="col-"]{padding-left:18px;padding-right:18px}}
#wallBar{background-color:#112D49!important}body{background-color:#F9F9F9!important}.sidebar{background-color:#F9F9F9!important}
.pricing-head h3{background:#365D98!important;color:#FFFFFF!important}.pricing-head h4{color:#8E8072!important}
#mobileNavbar,#upArrow{color:var(--vip-primary)}
.models-section-title,.models-section-title span{font-family:Inter,sans-serif;font-weight:700}


/* === Navbar: manter logo + busca na mesma linha e aumentar a logo === */

/* Desktop e tablets (>= 992px) */
@media (min-width: 992px){
  /* Deixa a barra em linha única */
  #wallBar .navbar-header{
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* Aumenta a logo (versão desktop) */
  #wallBar .navbar-brand{ padding: 8px 15px; height: 72px; }
  #wallBar .navbar-brand img.hidden-xs.hidden-sm{
    height: 56px;       /* ajuste fino aqui se quiser maior/menor */
    width: auto;
  }
  .navbar-main.navbar-primary{ min-height: 72px; }

  /* Busca: não ocupar 100% e não “cair” de linha */
  #searchBarMain{
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto !important;      /* corrige o 100% anterior */
    flex: 0 1 560px;              /* largura alvo (ajuste p/ 520–620 se quiser) */
    max-width: 620px;
  }
  #searchBarMain .search{
    flex: 1 1 auto;
    height: 40px; line-height: 40px;
    border-radius: 10px;
  }
  #btn-search-home-top{
    flex: 0 0 auto;
    height: 40px; padding: 8px 12px;
    border-radius: 10px;
  }

  /* Ícone de busca alinhado e visível */
  #searchIcon{ margin-left: 6px; color: #fff; opacity: .9; }
}

/* Mobile (< 992px): usa a logo pequena e deixa a busca pelo ícone */
@media (max-width: 991px){
  #wallBar .navbar-brand img.visible-xs.visible-sm{
    height: 28px; width: auto;
  }
  /* a busca já abre por JS no clique do #searchIcon */
}


/* ===== Escopo correto para os cards da lateral ===== */
/* Aplica o visual de card só na sidebar da esquerda */
#profileSidebar .sidebar-block,
.sidebar.left .sidebar-block{
  background:#fff;
  border:1px solid var(--vip-border);
  border-radius:12px;
  box-shadow:var(--vip-shadow);
  margin-bottom:16px;
  padding:12px;
}

/* ===== Não aplicar no cover ===== */
/* No cover o bloco deve ser “transparente”, sem borda/sombra,
   pra não tampar a foto de fundo */
#cover .sidebar-block{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
 /* padding:0 !important;*/
  margin:0 !important;
}

/* ================================
   Tipografia — Secular One + Source Sans Pro
   ================================ */

/* Tokens de fonte e tamanho */
:root{
  --font-heading: "Secular One", "Source Sans Pro", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Source Sans Pro", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --fs-xs:.875rem;         /* 14px */
  --fs-sm:.95rem;          /* 15.2px */
  --fs-md:1rem;            /* 16px */
  --fs-lg:1.125rem;        /* 18px */
  --fs-xl:1.375rem;        /* 22px */
  --fs-2xl:1.75rem;        /* 28px */
}

/* Corpo do site */
html, body{
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Títulos e elementos de navegação */
h1,h2 {
  font-family: var(--font-heading) !important;
  letter-spacing: .2px;
}

/* Ajustes de tamanhos-chave */
#cover #fullName{ font-size: var(--fs-2xl); }
#settings .panel-heading{ font-size: var(--fs-lg); }
.navbar-subnav .navbarLinks>li>a{ font-size: var(--fs-sm); }

/* Números mais alinhados (contadores/badges) */
.numberCount,
.countNumber{
  font-variant-numeric: tabular-nums lining-nums;
}

/* Legibilidade em textos longos das infos do perfil */
#settings .panel-body li{
  font-size: var(--fs-sm);
}

/* ===========================
   Página: Convite de Amigos
   =========================== */

/* Cabeçalhos */
.title-page{
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: .3px;
  margin: 18px 0 6px;
}
.title-page + h4{
  font-family: var(--font-body);
  color: #4b5563;
  margin: 0 0 22px;
}

/* Card central do formulário */
.form-invite{
  max-width: 760px;
  margin: 12px auto 40px;
  background: #fff;
  border: 1px solid var(--vip-border);
  border-radius: 16px;
  box-shadow: var(--vip-shadow);
  padding: 22px 24px;
}

/* Campos */
.form-invite .form-group{ margin-bottom: 16px; }
.form-invite label{
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}
.form-invite .form-control{
  height: 44px;
  border: 1px solid var(--vip-border);
  border-radius: 10px;
  box-shadow: none;
}
.form-invite .form-control:focus{
  border-color: var(--vip-accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
  outline: 0;
}
.form-invite .form-control::placeholder{ color:#9ca3af; }

/* Botão primário do convite (sem afetar outros botões do site) */
.form-invite .inviteButton{
  min-width: 220px;
  height: 44px;
  border-radius: 12px;
  font-weight: 700;
  background: linear-gradient(180deg,#5fa0ff 0%,#3b82f6 60%,#2563eb 100%) !important;
  border-color: #2563eb !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.20), 0 1px 0 rgba(255,255,255,.6) inset;
  transition: transform .06s ease, filter .16s ease;
}
.form-invite .inviteButton:hover{ filter: brightness(.96); }
.form-invite .inviteButton:active{ transform: translateY(1px); }

/* Centraliza o grupo do botão */
.form-invite .form-group.text-center{ margin-top: 8px; }



/* ===========================
   Busca — empilhar status e distância
   (atua só na lista de resultados)
   =========================== */

/* 1) status (span#online) em linha própria */
#result-search-list .user-box-advancedsearch .panel-body .media > [id="online"]{
  display: block !important;       /* sobrescreve o inline "display:inline-block" */
  width: 14px; height: 14px;       /* opcional: menor que 20px */
  margin: 6px 0 6px 0 !important;  /* remove o margin-left inline */
  vertical-align: baseline !important;
  border-radius: 50%;
}

/* 2) ícone de localização + texto "km" permanecem na mesma linha */
#result-search-list .user-box-advancedsearch .panel-body .media > .fa-location-arrow{
  display: inline-block;
  margin-right: 6px;
}

/* leve ajuste de altura de linha do bloco todo */
#result-search-list .user-box-advancedsearch .panel-body .media{
  line-height: 1.25;
}

#result-search-list .user-box-advancedsearch .panel-body .media > [id="online"][title="Online"]{
  background:#16a34a;
}

/* ===========================
   Busca — status em cima e distância abaixo
   =========================== */

/* 1) Garante que o ponto de status apareça (quebra linha e limpa floats) */
#result-search-list .user-box-advancedsearch .panel-body .media > span#online{
  display: block !important;       /* sobrescreve o inline */
  clear: both;                     /* evita colidir com floats do .media */
  width: 14px; height: 14px;
  border-radius: 50%;
  margin: 6px 0 6px 0 !important;  /* tira o margin-left inline */
  vertical-align: baseline !important;
  background-color: #9ca3af;       /* fallback (Offline) caso não venha no inline */
}

/* Verde quando vier marcado como Online no title */
#result-search-list .user-box-advancedsearch .panel-body .media > span#online[title="Online"]{
  background-color: #16a34a !important;
}

/* 2) Ícone de localização + “km” permanecem na MESMA linha */
#result-search-list .user-box-advancedsearch .panel-body .media > i.fa-location-arrow{
  display: inline-block;
  margin-right: 6px;
}

/* 3) Espaçamento/altura de linha geral do bloco */
#result-search-list .user-box-advancedsearch .panel-body .media{
  line-height: 1.25;
}

/* ===========================
   Busca — alinhar status e distância na coluna da direita
   =========================== */

/* defina uma largura padrão para o thumbnail dos cards de busca */
.user-box-advancedsearch{
  --thumb-w: 120px;     /* <<< AJUSTE AQUI se sua miniatura for 128/140/etc */
  --thumb-gap: 14px;    /* espaço entre a foto e o conteúdo */
}
/* garanta que o thumb respeita essa largura */
.user-box-advancedsearch .custom-search-user-thumb{
  width: var(--thumb-w);
  height: auto;
}

/* 1) status em linha própria alinhado com a coluna de texto */
#result-search-list .user-box-advancedsearch .panel-body .media > span#online{
  display: block !important;
  clear: both;
  width: 14px; height: 14px; border-radius: 50%;
  margin: 6px 0 6px calc(var(--thumb-w) + var(--thumb-gap)) !important;
  vertical-align: baseline !important;
  background-color: #9ca3af; /* fallback (Offline) */
}
/* verde quando Online */
#result-search-list .user-box-advancedsearch .panel-body .media > span#online[title="Online"]{
  background-color: #16a34a !important;
}

/* 2) distância na linha de baixo, alinhada com a mesma coluna */
#result-search-list .user-box-advancedsearch .panel-body .media > i.fa-location-arrow{
  display: inline-block;
  /*margin-left: calc(var(--thumb-w) + var(--thumb-gap));*/
  margin-right: 6px;
}

/* === Status online/offline — cor dinâmica, sem forçar verde === */

/* LISTA DE BUSCA */
#result-search-list .user-box-advancedsearch .panel-body .media > span#online[title="Online" i]{
  background-color:#16a34a !important;  /* verde */
}
#result-search-list .user-box-advancedsearch .panel-body .media > span#online[title="Offline" i]{
  background-color:#9ca3af !important;  /* cinza */
}

 

/* ===========================
   NAVBAR — Mobile (XS)
   =========================== */
@media (max-width: 767px){
  /* barra em linha e com respiro */
  #wallBar .navbar-header{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 6px 10px;
  }

  /* logo maior no mobile */
  #wallBar .navbar-brand img.visible-xs.visible-sm{
    height: 36px;             /* ajuste p/ 32–42 se quiser */
    width: auto;
  }

  /* ícone de busca alinhado à direita e com hit-area maior */
  #searchIcon{
    margin-left: auto;         /* empurra pra direita */
    font-size: 22px;
    line-height: 1;
    padding: 6px;              /* área clicável */
    color: #fff;
  }

  /* hamburguer não colar no resto */
  .navbar-toggle{ margin-left: 6px; }

  /* >>> A BUSCA viRÁ como DROPDOWN abaixo da barra (não empurra os ícones) */
  #searchBarMain{
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: #112D49;
    padding: 10px 12px;
    display: none;             /* padrão: fechado */
    z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  /* quando o seu JS der `.show()` (display:block inline), transforma em flex */
  #searchBarMain[style*="display: block"]{
    display: flex !important;
    align-items: center;
    gap: 8px;
  }

  #searchBarMain .form-control.search{
    flex: 1 1 auto;
    height: 40px;
    border-radius: 10px;
  }
  #btn-search-home-top{
    flex: 0 0 auto;
    height: 40px;
    border-radius: 10px;
    padding: 8px 12px;
  }
}

/* manter a barra sobre o dropdown da busca/scroll */
#wallBar{ position: sticky; top:0; z-index: 999; }

/* ===========================
   BUSCA AVANÇADA — respiros no mobile
   =========================== */
@media (max-width: 767px){
  /* cada “col” da linha de filtros ganha margem embaixo */
  #panel-advancedSearch .panel-body .col-xs-12.col-sm-4.col-md-2{
    margin-bottom: 12px;
  }
  /* botão não colar nas bordas */
  #panel-advancedSearch .buttonAdvancedSearch{
    margin-top: 6px;
    border-radius: 10px;
  }
}


/* ===========================
   NAVBAR — MOBILE (XS)
   Logo à ESQUERDA, usuário + lupa + hambúrguer à DIREITA
   =========================== */
@media (max-width: 767px){
  /* barra como flex */
  #wallBar .navbar-header{
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
  }

  /* LOGO: volta a ser estática e fica como 1º item (esquerda) */
  #wallBar .navbar-brand{
    position: static !important;
    transform: none !important;
    margin: 0; padding: 0;
    order: 1;                /* primeiro */
  }
  #wallBar .navbar-brand img.visible-xs.visible-sm{
    height: 40px;            /* ajuste se quiser 36–44 */
    width: auto;
  }

  /* USUÁRIO: primeiro do grupo da direita e empurra o resto com margin-left:auto */
  #toggle-sidebar-menu{
    order: 2;
  /*  margin-left: auto;  */     /* tudo depois dele vai para a direita */
   /* padding: 6px;*/
  }

  /* LUPA: logo após o usuário */
  #searchIcon{
    order: 3;
    font-size: 22px;
    padding: 6px;
  }

  /* HAMBÚRGUER: por último, no extremo direito */
  .navbar-toggle{
    order: 4;
    margin-left: 6px;
  }

  /* Dropdown da busca continua abaixo da barra */
  #searchBarMain{
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: #112D49;
    padding: 10px 12px;
    display: none;
    z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  #searchBarMain[style*="display: block"]{
    display: flex !important;
    align-items: center;
    gap: 8px;
  }
  #searchBarMain .form-control.search{ height: 40px; border-radius: 10px; }
  #btn-search-home-top{ height: 40px; border-radius: 10px; padding: 8px 12px; }
}

/* Perfil — mobile: descer o avatar no cover */
@media (max-width: 767px){
  /* dá um respiro acima do bloco do avatar */
  #cover #timelineProfilePic{
    margin-top: 14px;            /* aumente para 18–22 se quiser mais */
  }
  /* e um ajuste fino direto na imagem, se precisar */
  #cover #profilePicImage .profilePic{
    margin-top: 6px;             /* pode zerar se não precisar */
    width: 88px; height: 88px;   /* opcional: tamanho confortável no XS */
    border-radius: 50%;
  }
}

/* Perfil — mobile: alinhar ações numa única linha */
@media (max-width: 767px){
  /* o container imediato que segura os botões vira uma “faixa” flex */
  /* pega painéis/headers logo abaixo do cover e áreas comuns de ação */
  #settings .panel-heading,
  .navbar-subnav .whiteBar,
  #friendButton,                   /* fallback (existe no seu HTML) */
  .rightButton{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;             /* não quebrar linha */
    overflow-x: auto;              /* se faltar largura, rola na horizontal */
  }

  /* garante que os três botões ficam com largura só do conteúdo */
  #settings .panel-heading .wallbutton,
  #settings .panel-heading .messageButton,
  #settings .panel-heading .addButton,
  #settings .panel-heading .addButton-new,
  #settings .panel-heading .removeButton,
  .navbar-subnav .whiteBar .wallbutton,
  .navbar-subnav .whiteBar .messageButton,
  .navbar-subnav .whiteBar .addButton,
  .navbar-subnav .whiteBar .addButton-new,
  .navbar-subnav .whiteBar .removeButton{
    white-space: nowrap;
    margin: 0;                     /* remove margens que empurram pra baixo */
  }
}
/* ===========================
   Perfil (mobile): nome ao lado do avatar
   =========================== */
@media (max-width: 767px){
  /* organiza avatar + (nome/online) em 2 colunas; descrição fica abaixo */
  #cover #timelineProfilePic{
    display: grid;
    grid-template-columns: 88px 1fr;   /* largura do avatar | área do nome */
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
    margin-top: 14px;                  /* desce um pouco o bloco no cover */
  }

  /* avatar */
  #cover #timelineProfilePic #profilePicImage{ grid-column: 1; }
  #cover #timelineProfilePic #profilePicImage .profilePic{
   width: 65px;
	height: 55px;
	border-radius: 50%;
	margin-left: 19px;
    display: block;
  }

  /* bloco com nome + status (é o 2º <div> dentro do timelineProfilePic) */
  #cover #timelineProfilePic > div:nth-of-type(2){
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;                      /* permite ellipsis no nome */
  }

  /* nome ao lado do avatar, com ellipsis se for grande */
  #cover #timelineProfilePic #fullName{
    margin: 0;
    font-size: 1.25rem;                /* ajuste se quiser maior/menor */
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* bolinha de online: neutraliza o inline (top/left) e alinha ao nome */
  #cover #timelineProfilePic [id="online"]{
    position: static !important;
    display: inline-block !important;
    width: 12px; height: 12px;
    margin: 0 0 0 8px !important;
    border-radius: 50%;
  }

  /* descrição do usuário em toda a largura, abaixo */
  #cover #timelineProfilePic #descriptionUser{
    grid-column: 1 / -1;
    margin: 6px 0 0;
  }
}

/* ===========================
   Perfil — DESKTOP: nome ao lado do avatar
   =========================== */
@media (min-width: 768px){
  /* organiza avatar + (nome/online) na mesma linha */
  #cover #timelineProfilePic{
    display: grid;
    grid-template-columns: 160px 1fr;  /* largura do avatar | área do nome */
    align-items: center;
    column-gap: 16px;
  }

  /* avatar (garante tamanho e formato) */
  #cover #timelineProfilePic #profilePicImage{ grid-column: 1; }
  #cover #timelineProfilePic #profilePicImage .profilePic{
    width: 160px; 
    height: 160px; 
    border-radius: 50%;
    display: block;
  }

  /* bloco do nome + status (é o 2º <div> do timelineProfilePic) */
  #cover #timelineProfilePic > div:nth-of-type(2){
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;               /* permite ellipsis no nome */
  }

  /* nome grande, com ellipsis se for longo */
  #cover #timelineProfilePic #fullName{
    margin: 0;
    font-size: 2rem;            /* ajuste se quiser 1.8–2.4rem */
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* status online: neutraliza top inline e alinha ao nome */
  #cover #timelineProfilePic [id="online"]{
    position: static !important;
    display: inline-block !important;
    width: 12px; 
    height: 12px;
    margin: 0 0 0 8px !important;
    border-radius: 50%;
  }

  /* descrição ocupa a coluna do texto, logo abaixo do nome */
  #cover #timelineProfilePic #descriptionUser{
    grid-column: 2;             /* só a coluna do texto */
    margin-top: 6px;
  }
} 


.sidebar-block .profile { 
    padding-top: 86px !important;
}

/* =======================================================
   Moldura premium para o avatar dentro do cover
   (não precisa alterar o HTML)
   ======================================================= */
#cover #profilePicImage{
  position: relative;
  display: inline-block;
  padding: 6px;                     /* espessura da moldura */
  border-radius: 50%;
  /* anel dourado com leve profundidade */
  background:
   conic-gradient(from 210deg, #fffaef 0%, #ffffff 20%, #ffffff 45%, #fafaf9 60%, #ffffff 80%, #fffdf7 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.35) inset,
    0 8px 18px rgba(0,0,0,.35);
  isolation: isolate;
}

/* brilho/vinheta por cima do avatar (efeito premium) */
#cover #profilePicImage::after{
  content: "";
  position: absolute;
  inset: 6px;                       /* acompanha a espessura do anel */
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 25% 12%,
      rgba(255,255,255,.45) 0 35%, transparent 40%);
}

/* imagem do avatar preenche o círculo interno */
#cover #profilePicImage .profilePic{
  display: block;
  border-radius: 50%;
  width: 160px;                     /* desktop */
  height: 160px;
  object-fit: cover;
}

/* tamanhos no mobile – mantém a moldura proporcional */
@media (max-width: 767px){
  #cover #profilePicImage .profilePic{
    width: 88px;
    height: 88px;
  }
}
/* ===== Moldura premium (fix + responsivo) ===== */
#cover #profilePicImage{
  --ring: 6px;                     /* espessura da moldura */
  --size: 160px;                   /* tamanho padrão (desktop) */
  position: relative;
  display: inline-block;
  padding: var(--ring);
  border-radius: 50%;
  background:
    conic-gradient(from 210deg,
      #ffe9a8 0%,
      #f7cc6b 20%,
      #efab43 45%,
      #e78f2f 60%,
      #f7cc6b 80%,
      #ffe9a8 100%);
  box-shadow: 0 2px 0 rgba(255,255,255,.35) inset, 0 8px 18px rgba(0,0,0,.35);
  box-sizing: content-box;
}

/* brilho da moldura */
#cover #profilePicImage::after{
  content: "";
  position: absolute;
  inset: var(--ring);              /* acompanha a espessura */
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(120% 70% at 25% 12%, rgba(255,255,255,.45) 0 35%, transparent 40%);
}

/* imagem dentro da moldura */
#cover #profilePicImage .profilePic{
  display: block;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  object-fit: cover;
  margin: 0 !important;           /* evita deslocar a imagem da moldura */
}

/* ===== Mobile ===== */
@media (max-width: 767px){
  /* tamanho do avatar no mobile e deslocamento lateral */
  #cover #timelineProfilePic #profilePicImage{
    --size: 65px;                  /* use valores iguais p/ manter círculo */
    --ring: 6px;
    margin-left: 19px;             /* move o conjunto (moldura + foto) */
  }
  /* NÃO usar margin no IMG; deixamos zerado no seletor acima */
}

/* Dark overlay sobre a imagem do cover (não afeta textos) */
#coverBox{
  position: relative;
}

/* O ::before é pintado ANTES do conteúdo => fica acima da imagem e abaixo dos textos */
#coverBox::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;                     /* não bloqueia cliques/drag do cover */
  /* ajuste a opacidade conforme preferir (0.18–0.40) */
  background: rgba(0,0,0,.25);
}

/* (Opcional) um leve gradiente dá mais contraste no rodapé do cover */
#coverBox::before{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.22) 0%,
      rgba(0,0,0,.18) 45%,
      rgba(0,0,0,.28) 100%);
  opacity: 1; /* mantém o valor do gradiente */
}

/* Se quiser um pouco mais escuro no mobile: */
@media (max-width: 767px){
  #coverBox::before{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.28) 0%,
        rgba(0,0,0,.24) 45%,
        rgba(0,0,0,.34) 100%);
  }
}

/* container do grid */
#result-search-list{ position: relative; }

/* suaviza o movimento quando reposiciona */
#result-search-list .panel-search-custom{
  transition: left .18s ease, top .18s ease;
  will-change: left, top;
}

/* ====== HERO ====== */
#content .title-page{
  font-family: "Secular One", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .3px !important;
  margin-top: 8px !important;
  margin-bottom: 10px !important;
}
#content h4.text-center{
  color:#6b7280 !important;
  margin-bottom: 26px !important;
}

/* ====== GRID GUTTER ====== */
#content .col-md-4{ padding:14px !important }

/* ====== CARD ====== */
.pricing{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  background: #fff !important;
  border: 1px solid #e8eef5 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.pricing:hover{
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 44px rgba(15, 23, 42, .12) !important;
}

/* Topo do card */
.pricing-head{
  padding: 0 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #365D98, #1f3762) !important;
}
.pricing-head h3{
  margin: 0 !important;
  padding: 14px 18px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
}
.pricing-head h4{
  margin: 0 !important;
  padding: 28px 18px 22px !important;
  text-align: center !important;
  background: #fbfff6 !important;
  color: #6d645d !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 3.2vw, 44px) !important;
  line-height: 1.1 !important;
  border-top: 1px solid rgba(255,255,255,.15) !important;
}
.pricing-head h4 i{
  font-style: normal !important;
  font-size: .55em !important;
  opacity: .9 !important;
  margin-right: 3px !important;
}
.pricing-head h4 span{
  display: block !important;
  margin-top: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #7b8a97 !important;
}

/* Conteúdo */
.pricing-content{
  margin: 0 !important;
  padding: 16px 18px 8px !important;
  color: #4b5563 !important;
}
.pricing-content li{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 0 !important;
  border-bottom: 1px dashed #eef3f7 !important;
}
.pricing-content li:last-child{ border-bottom: 0 !important; }

/* Marcador com ícone */
.pricing-content li::before{
  content: "\f00c" !important;
  font: normal 14px/1 FontAwesome !important;
  color: #10b981 !important;
}

/* Rodapé / CTA */
.pricing-footer{
  margin-top: auto !important;
  padding: 16px 18px 22px !important;
  display: flex !important;
  justify-content: center !important;
}
.btn-pay-plan{
  border: 0 !important;
  border-radius: 12px !important;
  padding: 12px 22px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  color: #fff !important;
  background: linear-gradient(180deg, #12a3e2, #007db9) !important;
  box-shadow: 0 10px 22px rgba(0,153,210,.28) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.btn-pay-plan:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 28px rgba(0,153,210,.36) !important;
}

/* Destaque automático para o card do meio */
#content .col-md-4:nth-of-type(2) .pricing{
  border: 2px solid #2eaadc !important;
  box-shadow: 0 24px 46px rgba(0,153,210,.22) !important;
}
#content .col-md-4:nth-of-type(2) .pricing-head{
  background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
}
/* Fita "mais popular" */
#content .col-md-4:nth-of-type(2) .pricing::before{
  content: "Mais popular" !important;
  position: absolute !important;
  top: 14px !important; 
  right: -44px !important;
  transform: rotate(45deg) !important;
  background: #ffd95e !important;
  color: #3b2f00 !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  padding: 6px 64px !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.18) !important;
  z-index: 2 !important;
}

/* Responsivo */
@media (max-width: 991px){
  #content .col-md-4{ width:100% !important }
  .pricing{ margin-bottom: 10px !important }
}

/* ====== Variação opcional por classe (use se preferir marcar manualmente) ====== */
/* Para usar: adicione 'is-popular' na coluna do plano desejado
   <div class="col-md-4 is-popular"> ... */
#content .is-popular .pricing{
  border: 2px solid #2eaadc !important;
  box-shadow: 0 24px 46px rgba(0,153,210,.22) !important;
}
#content .is-popular .pricing-head{
  background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
}
#content .is-popular .pricing::before{
  content: "Mais popular" !important;
  position: absolute !important;
  top: 14px !important; 
  right: -44px !important;
  transform: rotate(45deg) !important;
  background: #ffd95e !important;
  color: #3b2f00 !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  padding: 6px 64px !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.18) !important;
  z-index: 2 !important;
}