/* ======================================================
   SMARTIFY — PORTAL HEADER (SaaS Premium + FIX)
   Objetivo:
   - Header premium, estável no WP Admin (sem interferência)
   - Mega menu responsivo (hover + click via JS)
   - Ícones Iconify/SVG com controle por contexto (NAV / ACTIONS)
   - Perfil com tamanhos de ícone INDIVIDUAIS (sem variáveis)
   - Drawer só no mobile (<=991px)

   NOTAS DE MANUTENÇÃO (LEIA ANTES DE MEXER):
   - Não altere selectors (classes) para evitar quebra do plugin/HTML.
   - Ajustes globais de tamanho/spacing devem ser feitos no :root (KNOBS).
   - O bloco "FIXES FINAIS — ICONIFY" existe por causa do WP Admin/Iconify.
   ====================================================== */


/* ======================================================
   0) TOKENS + KNOBS (mexa aqui para ajustes globais)
   ====================================================== */
:root{
  /* Brand */
  --sf-primary: #826DEF;
  --sf-primary-2: rgba(130,109,239,.16);

  /* Surfaces */
  --sf-bg: #F8F9FD;
  --sf-surface: #ffffff;
  --sf-surface-2: #F7F9FC;
  --sf-soft: #F4F4FE;

  /* Text */
  --sf-text: #545454;
  --sf-muted: #666666;

  /* Borders / radius / shadows */
  --sf-border: rgba(25,28,33,.10);

  --sf-radius-xl: 22px;
  --sf-radius: 18px;
  --sf-radius-sm: 14px;

  --sf-shadow: 0 18px 60px rgba(0,0,0,.12);
  --sf-shadow-soft: 0 3px 10px rgba(0,0,0,.10);

  /* (LEGADO) — não usar como “tamanho universal”.
     Mantido apenas para compatibilidade/diagnóstico. */
  --sf-header-icon-size: 25px;

  /* ===== Icon sizes (KNOBS por contexto) =====
     - NAV: ícones do menu principal
     - ACTIONS: ícones da direita (link/help/bell)
     OBS: profile NÃO usa variável (controle individual mais abaixo)
  */
  --sf-ico-nav: 25px;
  --sf-ico-actions: 23px;

  /* ===== Layout KNOBS ===== */
  --sf-topbar-pad-y: 18px;
  --sf-topbar-pad-x: 24px;

  --sf-pill-pad-y: 12px;
  --sf-pill-pad-x: 14px;

  /* ===== Search KNOBS ===== */
  --sf-search-width: 550px;
  --sf-search-radius: 14px;
  --sf-search-prefix-size: 44px;
  --sf-search-prefix-bg: rgba(130,109,239,.90);

  /* ===== Mega menu KNOBS ===== */
  --sf-mega-min-col: 260px;
  --sf-mega-gap: 26px;
  --sf-mega-pad: 22px;

  /* ===== Breakpoint KNOB ===== */
  --sf-break-mobile: 991px;
}


/* ======================================================
   1) HEADER ROOT
   ====================================================== */
.sf-portal-header{
  /*position: sticky;*/
  /*top: 0;*/
  z-index: 9999;
  background: var(--sf-surface);
  font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  max-width: 1500px;
  margin: 0 auto;
  padding: 10px 7px;
}


/* ======================================================
   2) DEFENSIVO — RESET (WP ADMIN)
   ====================================================== */
.sf-portal-header a,
.sf-portal-header button{
  font: inherit;
  color: inherit;
  text-decoration: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}

.sf-portal-header button{
  -webkit-appearance: none;
  appearance: none;
}

.sf-portal-header *{
  box-sizing: border-box;
}


/* ======================================================
   3) ICONS — BASE + CONTEXTOS
   Regras:
   - Iconify (web component) → controla tamanho via --iconify-size (por contexto)
   - SVG e .iconify (legado) → width/height
   Importante:
   - NÃO “fixar” tamanho global aqui, apenas definir defaults.
   ====================================================== */

/* Base: Iconify herda cor e pode receber --iconify-size por contexto */
.sf-portal-header iconify-icon{
  color: var(--sf-primary);
  /* default (caso nenhum contexto aplique) */
  --iconify-size: var(--sf-ico-nav);
}

/* Base: SVG e Iconify antigo (default NAV) */
.sf-portal-header .iconify,
.sf-portal-header svg{
  width: var(--sf-ico-nav) !important;
  height: var(--sf-ico-nav) !important;
  min-width: var(--sf-ico-nav) !important;
  min-height: var(--sf-ico-nav) !important;
  color: var(--sf-primary);
}

/* DEFENSIVO: inline style do Iconify (alguns plugins injetam) */
.sf-portal-header iconify-icon[style]{
  --iconify-size: var(--sf-ico-nav) !important;
}
.sf-portal-header .iconify[style]{
  width: var(--sf-ico-nav) !important;
  height: var(--sf-ico-nav) !important;
}


/* ======================================================
   3.1) ICONS — Overrides por contexto
   - NAV e ACTIONS continuam com variáveis (knobs)
   - PROFILE: tamanhos individuais (controle fino)
   ====================================================== */

/* NAV (menu principal) */
.sf-nav iconify-icon{ --iconify-size: var(--sf-ico-nav); }
.sf-nav svg,
.sf-nav .iconify{
  width: var(--sf-ico-nav) !important;
  height: var(--sf-ico-nav) !important;
}

/* ACTIONS (topbar direita: ícones com class .sf-ico) */
.sf-topbar-right iconify-icon.sf-ico{ --iconify-size: var(--sf-ico-actions); }
.sf-topbar-right .sf-ico.iconify,
.sf-topbar-right .sf-ico svg{
  width: var(--sf-ico-actions) !important;
  height: var(--sf-ico-actions) !important;
}

/* PROFILE (INDIVIDUAL — sem variáveis) */
/* Chevron do botão do perfil (pequeno por design) */
.sf-profile-chev{ --iconify-size: 16px; }

/* Ícone do e-mail no header do dropdown */
.sf-profile-email__ico{ --iconify-size: 13px !important; margin-top: 2px;}

/* Ícones dentro dos quadradinhos (.sf-profile-link__ico) */
.sf-profile-link__ico iconify-icon{ --iconify-size: 24px !important; }

/* Fallback seguro (evita herdar NAV sem querer) */
.sf-profile-dropdown iconify-icon:not(.sf-profile-chev):not(.sf-profile-email__ico){
  --iconify-size: 20px;
}

/* ======================================================
   3.2) FIX — Ícones NÃO mudarem de tamanho no desktop
   Motivo:
   - Iconify usa "1em" e, se algum CSS externo alterar font-size/line-height,
     os ícones podem “pular” de tamanho.
   Solução:
   - Travamos os ícones do header por contexto (font-size/line-height).
   ====================================================== */
.sf-portal-header .sf-nav iconify-icon,
.sf-portal-header .sf-topbar-right iconify-icon,
.sf-portal-header .sf-profile iconify-icon{
  font-size: var(--iconify-size, 1em) !important;
  line-height: 1 !important;
}


/* ======================================================
   4) TOPBAR (Linha 1)
   ====================================================== */
.sf-topbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  padding: var(--sf-topbar-pad-y) var(--sf-topbar-pad-x);
}

/* Left */
.sf-topbar-left{
  display:flex;
  align-items:center;
  gap:12px;
}


/* ======================================================
   LOGO SMARTIFY
   ====================================================== */
.sf-logo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}

.sf-logo-img{
  height: 35px;
  width: auto;
  display: block;
}


/* ======================================================
   Center: Search (Desktop)
   ====================================================== */
.sf-topbar-center{
  position: relative;
  display:flex;
  justify-content:center;
}

.sf-search-wrap{
  display:flex;
  align-items:center;
  width: var(--sf-search-width);
  border-radius: var(--sf-search-radius);
  overflow: hidden;
  border: 1px solid rgba(25,28,33,.10);
  background: #fff;
  transition: box-shadow .15s ease, border-color .15s ease;
  height: 40px;
}

.sf-search-prefix{
  width: var(--sf-search-prefix-size);
  height: var(--sf-search-prefix-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--sf-search-prefix-bg);
}

/* Ícone branco no prefix (não herda roxo do header) */
.sf-search-prefix iconify-icon,
.sf-search-prefix svg{
  color: #fff !important;
  --iconify-size: 20px !important;
}

.sf-search{
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  padding: 12px 14px;
  color: var(--sf-text);
  font-size: 15px;

  box-shadow: none !important;
  transform: none !important;
}

.sf-search::placeholder{
  color: rgba(84,84,84,.70);
}

.sf-search-wrap:focus-within{
  border-color: rgba(130,109,239,.55);
}


/* Search results dropdown (Desktop) */
.sf-search-results{
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 100%);
  background: #fff;
  border: 1px solid rgba(25, 28, 33, .10);
  border-radius: 10px;
  box-shadow: var(--sf-shadow-soft);
  display: none;
  overflow: hidden;
  z-index: 10000;
}

.sf-search-results.is-open{ display:block; }

.sf-search-item{
  display:block;
  padding: 12px 14px;
  color: inherit;
  border-top: 1px solid rgba(25,28,33,.06);
}

.sf-search-item:first-child{ border-top:0; }
.sf-search-item:hover{ background: var(--sf-surface-2); }

.sf-search-item__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.sf-search-item__meta{
  font-size: 12px;
  color: var(--sf-muted);
  margin-top: 2px;
}

.sf-search-item__desc{
  font-size: 12px;
  color: var(--sf-text);
  opacity: .85;
  margin-top: 4px;
  line-height: 1.25;
}

.sf-search-empty{
  padding: 14px;
  color: var(--sf-muted);
  font-size: 13px;
}


/* Right actions */
.sf-topbar-right{
  display:flex;
  align-items:center;
  gap: 7px;
  line-height: 1;
}

.sf-topbar-right a.sf-desktop-only,
.smartify_notifications,
.sf-topbar-right .sf-icon-btn{
  padding: 8px 5px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}

.sf-topbar-right a.sf-desktop-only:hover,
.smartify_notifications:hover,
.sf-topbar-right .sf-icon-btn:hover{
  background: rgba(130,109,239,.10);
  transform: translateY(-1px);
}



/* ======================================================
   PROFILE (Topbar right)
   ====================================================== */
.sf-profile{
  position: relative;
  display:flex;
  align-items:center;
}

.sf-profile-btn{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}

.sf-profile-btn:hover{
  background: rgba(130,109,239,.10);
  transform: translateY(-1px);
}

.sf-avatar{
  width: 34px;
  height: 34px;
}

.sf-avatar img,
.sf-profile-head__avatar img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 999px !important;
}

.sf-profile-chev{
  opacity: .65;
  transition: transform .14s ease, opacity .14s ease;
}

.sf-profile.is-open .sf-profile-chev{
  opacity: .9;
  transform: rotate(180deg);
}

.sf-profile-dropdown{
  display:none;
  position:absolute;
  right:0;
  top: calc(100% + 12px);
  width: 360px;
  padding: 16px;
  background: #fff;
  border: 1px solid rgba(25,28,33,.10);
  border-radius: var(--sf-radius-xl);
  box-shadow: var(--sf-shadow-soft);
  z-index: 10001;
}

.sf-profile.is-open .sf-profile-dropdown{ display:block; }

.sf-profile-dropdown hr{
  border: 0;
  border-top: 1px solid rgba(25,28,33,.08);
  margin: 14px 0;
}

/* Header (avatar + meta) */
.sf-profile-head{
  display:flex;
  gap: 14px;
  align-items:center;
}

.sf-profile-head__avatar{
  width: 74px;
  height: 74px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sf-profile-head__avatar img.avatar{
  display: block;
  border-radius: 999px !important;
  object-fit: cover;
}

/* Overlay do UsersWP (câmera) */
.sf-profile-head__avatar .card-img-overlay{
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  padding: 0 !important;
  pointer-events: none;
}

.sf-profile-head__avatar a.uwp-banner-change-icon{
  position: absolute !important;
  right: 23px !important;
  bottom: -7px !important;

  width: 26px !important;
  height: 26px !important;
  border-radius: 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #fff !important;
  border: 1px solid rgba(25,28,33,.12) !important;

  pointer-events: auto;
  z-index: 5;
}

.sf-profile-head__avatar a.uwp-banner-change-icon i{
  font-size: 13px !important;
  line-height: 1 !important;
  color: var(--sf-primary) !important;
}

.sf-profile-head__avatar a.uwp-banner-change-icon:hover{
  background: var(--sf-soft) !important;
  border-color: rgba(130,109,239,.25) !important;
}

.sf-profile-name{
  font-weight: 600;
  font-size: 16px;
  color: var(--sf-text);
  margin-bottom: 6px;
}

.sf-profile-email{
  display:flex;
  align-items:center;
  gap: 8px;
  color: rgba(84,84,84,.88);
  font-size: 13px;
}

/* Role pill */
.sf-profile-role{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #ecf2ff;
  color: #668eff;
  font-weight: 500;
  font-size: 12px;
}

/* AI card (desktop dropdown) */
.sf-ai-card{
  border-radius: 18px;
  padding: 16px 16px;
  background-image: linear-gradient(37deg,#2979e8 0%,#b409f7 100% 100%);
}

.sf-ai-card .ai_stats_title{
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 10px;
  color: #fff;
  letter-spacing: 0.7px;
}

/* MWAI stats (desktop dropdown) */
.smartify_ai_stats .mwai-statistics-usage{
  display:flex;
  flex-direction: column !important;
  gap: 14px !important;
}

.smartify_ai_stats .mwai-statistics-usage .mwai-statistics-bar-text{
  color: #ffd610 !important;
  font-weight: 700;
}

.smartify_ai_stats .mwai-statistics-bar-text::before{
  content: "Você utilizou";
  margin-right: 6px;
  font-weight: 500;
  font-size: 14px;
  color: #fff;
}

.smartify_ai_stats .mwai-statistics-bar-text::after{
  content: "da sua cota mensal";
  margin-left: 6px;
  font-weight: 500;
  font-size: 14px;
  color: #fff;
}

.smartify_ai_stats .mwai-statistics-usage .mwai-statistics-bar-container{
  height: 14px !important;
  background-color: rgba(244,244,254,.95) !important;
  width: 250px;
  margin: 0 auto;
  border-radius: 999px;
  overflow: hidden;
}

.smartify_ai_stats .mwai-statistics-usage .mwai-statistics-bar-container .mwai-statistics-bar{
  background: #ffd610;
}

/* AI CREDITS — ROLE GATING (Locked state no dropdown) */
.sf-ai-card--locked{
  position: relative;
  overflow: hidden;
  /* Deixa o card “menos chamativo” sem matar o gradiente */
  background: #f4f4f4;
}

.sf-ai-locked{
  margin-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.sf-ai-locked__text{
  font-size: 13px;
  line-height: 1.35;
  max-width: 280px;
  text-align: center;
}

.sf-ai-locked__title {
  color: #545454;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

.sf-ai-locked__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.98) !important;
  color: #826def !important;
  font-weight: 800;
  text-decoration: none;
  transition: transform .12s ease, background .12s ease;
}

.sf-ai-locked__btn:hover{
  transform: translateY(-1px);
  background: #fff;
}


/* Links (cards) */
.sf-profile-links{
  display:grid;
  gap: 2px;
}

.sf-profile-link{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(244,244,254,.70);
  border: 1px solid rgba(130,109,239,.08);
  transition: background .12s ease, transform .12s ease, border-color .12s ease;
  cursor: pointer;
}

.sf-profile-link:hover{
  background: rgba(130,109,239,.08);
  border-color: rgba(130,109,239,.18);
  transform: translateY(-1px);
}

.sf-profile-link__ico{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(130,109,239,.10);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.sf-profile-link__text{ display:block; }

.sf-profile-link__title{
  display:block;
  font-weight: 600;
  font-size: 14px;
  color: var(--sf-text);
  line-height: 1.2;
}

.sf-profile-link__desc{
  display:block;
  margin-top: 2px;
  font-size: 13px;
  color: rgba(84,84,84,.78);
  line-height: 1.25;
}

/* Logout */
.sf-profile-logout{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top: 14px;
  height: 48px;
  border-radius: 16px;
  background: rgba(244,244,254,.95);
  border: 1px solid rgba(130,109,239,.12);
  font-weight: 800;
  color: var(--sf-primary);
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}

.sf-profile-logout:hover{
  background: rgba(130,109,239,.10);
  transform: translateY(-1px);
}


/* ======================================================
   5) NAV (Linha 2) — Pills
   ====================================================== */
.sf-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  padding: 6px 10px;
  line-height: 1;
}

.sf-nav-item{
  display:flex;
  align-items:center;
}

.sf-nav-item a,
.sf-nav-button{
  padding: var(--sf-pill-pad-y) var(--sf-pill-pad-x);
  border-radius: 999px;

  display:inline-flex;
  align-items:center;
  gap: 10px;

  color: var(--sf-text);
  font-weight: 500;
  font-size: 16px;

  transition: background .12s ease, transform .12s ease, color .12s ease;
  cursor: pointer;
}

.sf-nav-item a:hover,
.sf-nav-button:hover{
  background: rgba(130,109,239,.08);
  transform: translateY(-1px);
  color: var(--sf-primary);
}

.sf-nav-item.is-active .sf-nav-button{
  background: rgba(130,109,239,.12);
  color: var(--sf-primary);
  transform: none;
}

/* ======================================================
   NAV — Estado “você está aqui” (pai da página atual)
   Objetivo:
   - Mesmo visual do active/open, mas permanente enquanto a URL bater
   - Funciona tanto para <button> (mega) quanto <a> (direct)
   ====================================================== */

/* Pai mega (button) */
.sf-nav-item.is-current .sf-nav-button{
  background: rgba(130,109,239,.12);
  color: var(--sf-primary);
  transform: none;
}

/* Pai direct (link) */
.sf-nav-item.is-current > a{
  background: rgba(130,109,239,.12);
  color: var(--sf-primary);
  transform: none;
}

/* Opcional: deixa o chevron “neutro” quando apenas current (não aberto)
   (se quiser, mantém como está — só não rotaciona) */
.sf-nav-item.is-current:not(.is-active) .sf-nav-chev{
  transform: translateY(1px) rotate(0deg);
  opacity: .75;
}


.sf-nav-chev{
  opacity: .65;
  margin-left: -5px;
  --iconify-size: 18px;
  transform: translateY(1px) rotate(0deg);
  transition: transform .14s ease, opacity .14s ease;
}

.sf-nav-button:hover .sf-nav-chev,
.sf-nav-item.is-active .sf-nav-chev{
  opacity: .9;
  transform: translateY(1px) rotate(180deg);
}


/* ======================================================
   6) MEGA MENU (Desktop)
   ====================================================== */
.sf-mega-menu{
  position: relative;
  z-index: 9998;
}

.sf-mega-panel{
  position: absolute;
  top: 5px;

  left: 0;
  right: auto;
  transform: none;

  background: #fff;
  border: 1px solid rgba(25,28,33,.08);
  border-radius: var(--sf-radius-xl);
  box-shadow: 0 2px 5px rgba(0,0,0,.10);
  overflow: hidden;

  width: max-content;
  max-width: calc(90% - 50px);
}

.sf-mega-grid{
  display:grid;
  grid-template-columns: repeat(var(--sf-mega-cols, 3), minmax(var(--sf-mega-min-col), 1fr));
  gap: var(--sf-mega-gap);
  padding: var(--sf-mega-pad);

  background:
    radial-gradient(900px 180px at 14% 0%, rgba(130,109,239,.06), transparent 60%),
    radial-gradient(900px 180px at 86% 0%, rgba(130,109,239,.04), transparent 62%),
    #fff;
}


/* ======================================================
   SMARTIFY — Mega Menu | Ajuste específico por seção
   Motivo:
   - Conteúdo tem apenas 2 colunas
   - Não precisa herdar o max-width grande global
   ====================================================== */

.sf-mega-panel[data-section="conteudo"], .sf-mega-panel[data-section="redes-sociais"]{
  max-width: 950px;     
  width: 100%;          
}

/* ========================================== */

.sf-mega-col__title{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 12px;
}

.sf-mega-col__ico{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  color: var(--sf-primary);
  --iconify-size: 18px;
}

.sf-mega-col__label{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--sf-text);
}

.sf-mega-col__items{
  display:grid;
  gap: 18px;
}

.sf-mega-item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 8px;
  border-radius: 18px;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  transition: background .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
  cursor: pointer;
}

.sf-mega-item:hover{
  transform: translateY(-1px);
  border-color: rgba(130,109,239,.16);
  background: rgba(130,109,239,.06);
}

.sf-mega-item.is-current{
  background: rgba(130,109,239,.08);
  border-color: rgba(130,109,239,.20);
}

.sf-mega-item__chev{
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  color: var(--sf-primary);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  margin-top: -5px !important;
  transform: none !important;
}

/* (LEGADO/segurança) */
.sf-dropdown-item { align-items: flex-start; }

.sf-mega-item__text{
  flex: 1;
  min-width: 0;
}

.sf-mega-item__title{
  font-weight: 600;
  font-size: 15px;
  color: var(--sf-text);
  display:block;
}

.sf-mega-item__desc{
  margin-top: 6px;
  font-size: 14px;
  font-weight: 400 !important;
  color: rgba(84,84,84,.88);
  line-height: 1.35;
  display:block;
}

.sf-portal-header .sf-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left: auto;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(130,109,239,.12);
  color: var(--sf-primary);
  margin-left: 10px;
  white-space: nowrap;
}

/* ======================================================
   6.x) BADGES — Sistema (Plan) + Editorial (Custom)
   Objetivo:
   - "badge" (menu.json) = status/marketing ("Beta", "Novo", etc.) — manual
   - "minPlan" (menu.json) = plano mínimo ("premium"/"elite") — automático
   - Tooltips: apenas para Plan Badges (aria-label)
   ====================================================== */

/* Container para múltiplos badges (ex.: Beta + Premium) */
.sf-portal-header .sf-badges{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;      /* empurra badges para a direita quando possível */
  flex-wrap: wrap;
}

/* Quando o badge está dentro do wrapper, removemos o "auto" individual */
.sf-portal-header .sf-badges .sf-badge{
  margin-left: 0 !important;
}

/* Badge com ícone */
.sf-portal-header .sf-badge__ico{
  --iconify-size: 16px;
  color: currentColor;
}

/* Badge editorial (manual): mais neutro */
.sf-portal-header .sf-badge--custom{
  background: rgba(25,28,33,.06);
  color: rgba(84,84,84,.92);
}

/* Badges de plano (automáticos) */
.sf-portal-header .sf-badge--plan{
  background: rgba(130,109,239,.12);
  color: var(--sf-primary);
  border: 1px solid rgba(130,109,239,.18);
}

/* Premium (👑) — discreto */
.sf-portal-header .sf-badge--premium{
  background: rgba(130,109,239,.12);
  border-color: rgba(130,109,239,.18);
}

/* Elite (💎) — um pouco mais forte, ainda discreto */
.sf-portal-header .sf-badge--elite{
  background: rgba(130,109,239,.16);
  border-color: rgba(130,109,239,.26);
}

/* Tooltip (hover) para Plan Badges */
.sf-portal-header .sf-badge--plan[aria-label]{
  position: relative;
}

/* Tooltip global (injetado via JS) */

.sf-plan-tooltip{
  position: fixed;
  z-index: 100000;
  pointer-events: none;

  padding: 6px 10px;
  border-radius: 12px;

  background: rgb(94 96 97);
  color: #fff;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;

  box-shadow: 0 12px 26px rgba(0,0,0,.14);
  white-space: nowrap;

  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity .10s ease;
}

.sf-plan-tooltip.is-visible{
  opacity: 1;
}

/* Setinha */
.sf-plan-tooltip::after{
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% - 1px);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgb(94 96 97);
}


/* Badges em resultados de busca (desktop) */
.sf-portal-header .sf-badges--search{
  margin-left: 0;
}

.sf-portal-header .sf-search-item__top{
  gap: 10px;
}

@media (max-width: 1100px){
  .sf-mega-grid{ grid-template-columns: repeat(2, minmax(var(--sf-mega-min-col), 1fr)); }
}
@media (max-width: 900px){
  .sf-mega-grid{ grid-template-columns: 1fr; }
  .sf-mega-panel{ left: 12px; right: 12px; max-width: calc(100vw - 24px); }
}


/* Tooltip genérico do header (ícones, perfil etc.) */
.sf-ui-tooltip{
  position: fixed;
  z-index: 100000;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgb(94 96 97);
  color: #fff;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;

  white-space: nowrap;

  opacity: 0;
  transform: translate(-50%, -85%);
  transition: opacity .10s ease;
}

.sf-ui-tooltip.is-visible{ opacity: 1; }

.sf-ui-tooltip::after{
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% - 1px);
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgb(94 96 97);
}



/* ======================================================
   7) MOBILE RULES (CRÍTICO)
   - No desktop: drawer/overlay NÃO aparecem (display:none)
   - No mobile: drawer vira o hub (menu + busca + atalhos)
   ====================================================== */
.sf-desktop-only{ display: inline-flex; }
.sf-mobile-search-btn,
.sf-mobile-menu-btn{ display: none !important; }

/* Por padrão (desktop), drawer/overlay ficam OFF */
.sf-drawer-overlay{ display:none; }
.sf-drawer{ display:none; }

@media (max-width: 991px){

  /* ----- Hide desktop UI ----- */
  .sf-desktop-only{ display:none !important; }
  .sf-mobile-search-btn,
  .sf-mobile-menu-btn{ display:inline-flex !important; }

  .sf-topbar{ padding: 14px 14px; }
  .sf-topbar-center{ display:none; } /* busca desktop some (mobile usa drawer-search) */
  .sf-nav{ display:none; }           /* pills do desktop somem */

  /* ======================================================
     Overlay do Drawer
     ====================================================== */
  .sf-drawer-overlay{
    display:block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.38);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 10000;
  }
  .sf-drawer-overlay.is-open{
    opacity: 1;
    pointer-events: auto;
  }

  /* ======================================================
     Drawer (casco) + scroll correto
     ====================================================== */
  .sf-drawer{
    display:block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(390px, 90vw);
    background: #fff;
    transform: translateX(-105%);
    transition: transform .18s ease;
    z-index: 10001;
    border-right: 1px solid rgba(25,28,33,.10);

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sf-drawer.is-open{ transform: translateX(0); }

  /* ======================================================
     MOBILE DRAWER UI (SKIN COMPLETA)
     - Sem isso o conteúdo aparece “cru” (texto sem hierarquia)
     ====================================================== */

  /* Topo sticky (brand + search + profile + credits + quick) */
  .sf-drawer__top{
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    padding: 14px 14px 12px;
    border-bottom: 1px solid rgba(25,28,33,.08);
  }

  .sf-drawer__brand{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
  }

    /* MOBILE: removemos o “Smartify” do topo para ganhar espaço (decisão A2) */
    .sf-drawer__brand .sf-logo{
      display: none !important;
    }
    
    /* Com o logo oculto, o botão de fechar fica alinhado à direita */
    .sf-drawer__brand{
      justify-content: flex-end;
    }

  /* Botão de fechar (herda estilo do botão de ícone do header) */
  .sf-drawer-close{
    padding: 8px 8px;
    border-radius: 12px;
  }
  .sf-drawer-close:hover{
    background: rgba(130,109,239,.10);
    transform: translateY(-1px);
  }

  /* Busca do drawer */
  .sf-drawer__search{
    position: relative;
    margin-top: 12px;
  }

  /* Ícone dentro da busca (lupa) */
  .sf-drawer__search::before{
    content:"";
    position:absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    opacity: .85;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23826DEF' d='M10 18a8 8 0 1 1 5.293-14.02A8 8 0 0 1 10 18m0-2a6 6 0 1 0 0-12a6 6 0 0 0 0 12m10.707 5.293l-5.4-5.4l1.414-1.414l5.4 5.4z'/%3E%3C/svg%3E");
  }

  .sf-drawer-search{
    width: 100%;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(25,28,33,.10);
    background: var(--sf-surface-2);
    padding: 0 14px 0 44px; /* espaço para a lupa */
    outline: none;
    font-size: 15px;
    color: var(--sf-text);
  }
  .sf-drawer-search::placeholder{ color: rgba(84,84,84,.70); }

  .sf-drawer-search:focus{
    border-color: rgba(130,109,239,.45);
    box-shadow: 0 0 0 4px rgba(130,109,239,.12);
    background: #fff;
  }

  /* Resultados da busca no drawer (renderizado via JS) */
  .sf-drawer-results{
    display:none;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(25,28,33,.10);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--sf-shadow-soft);
  }
  .sf-drawer-results.is-open{ display:block; }

  .sf-drawer-results .sf-search-empty{
    padding: 10px 6px;
    color: var(--sf-muted);
    font-size: 14px;
  }

  .sf-drawer-results .sf-search-item{
    display:block;
    text-decoration:none;
    color: var(--sf-text);
    padding: 10px 10px;
    border-radius: 12px;
    border-top: 0;
  }
  .sf-drawer-results .sf-search-item:hover{ background: rgba(130,109,239,.08); }

  .sf-drawer-results .sf-search-item__desc{
    font-size: 13px;
    line-height: 1.25;
  }

  /* Profile no topo do drawer */
  .sf-drawer__profile{
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(25,28,33,.08);
  }

  .sf-drawer__profile-title strong{
    display:block;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--sf-text);
  }

  /* Observação: no drawer o e-mail usa .sf-muted (mesma classe do sistema) */
  .sf-drawer__profile-title .sf-muted{
    margin-top: 4px;
    text-transform:none;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 700;
    color: rgba(84,84,84,.78);
  }

  /* ======================================================
     Créditos IA (drawer) — mesma identidade do desktop
     - No drawer, o shortcode MWAI NÃO vem com .smartify_ai_stats
       então estilizamos dentro de .sf-drawer__ai.
     ====================================================== */
  .sf-drawer__ai{
    margin-top: 12px;
    border-radius: 16px;
    padding: 12px 12px;
    background-image: linear-gradient(37deg,#2979e8 0%,#b409f7 100% 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .sf-drawer__ai .ai_stats_title{
    text-align:center;
    font-weight: 600;
    font-size: 13px;
    margin: 0 0 10px;
    letter-spacing: .04em;
    color: #fff;
  }

  /* MWAI stats dentro do drawer */
  .sf-drawer__ai .mwai-statistics{
    display:flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .sf-drawer__ai .mwai-statistics-usage .mwai-statistics-bar-text{
    color: #ffd610 !important;
    font-weight: 800 !important;
    text-align:center !important;
  }

  .sf-drawer__ai .mwai-statistics-bar-text::before{
    content: "Você utilizou";
    margin-right: 6px;
    font-weight: 600;
    font-size: 13px;
    color: #fff;
  }

  .sf-drawer__ai .mwai-statistics-bar-text::after{
    content: "da sua cota mensal";
    margin-left: 6px;
    font-weight: 600;
    font-size: 13px;
    color: #fff;
  }

  .sf-drawer__ai .mwai-statistics-usage .mwai-statistics-bar-container{
    height: 14px !important;
    background-color: rgba(244,244,254,.95) !important;
    width: 100% !important;
    margin: 0 auto;
    border-radius: 999px;
    overflow: hidden;
  }

  .sf-drawer__ai .mwai-statistics-usage .mwai-statistics-bar-container .mwai-statistics-bar{
    background: #ffd610;
  }

  /* Locked state (drawer) */
  .sf-drawer__ai .sf-ai-locked__text{
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.35;
    text-align:center;
    margin: 0;
  }

  .sf-drawer__ai .sf-ai-locked__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height: 40px;
    width: 140px;
    padding: 0 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.98) !important;
    color: #826def !important;
    font-weight: 700;
    text-decoration: none;
    margin: 0 auto;
    transition: transform .12s ease, background .12s ease;
  }
  .sf-drawer__ai .sf-ai-locked__btn:hover{
    transform: translateY(-1px);
    background: #fff;
  }

  /* ======================================================
     Quick links (drawer): Ver site / Central / Ajuda / Notificações
     ====================================================== */
    .sf-drawer__quick{
      margin: 12px 0 16px 0;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    
    .sf-drawer__quick a,
    .sf-drawer__quick button{
      display: flex;
      flex-direction: column;      /* ícone em cima, texto embaixo */
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 8px;
    
      width: 100%;
      min-height: 76px;
      padding: 12px 10px;
      border-radius: 7px;          /* pedido: 5 ou 7px */
      background: #fff;
      border: 1px solid rgba(25,28,33,.10);
    
      color: var(--sf-text);
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
    
      transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
    }
    
    .sf-drawer__quick a:hover,
    .sf-drawer__quick button:hover{
      background: rgba(130,109,239,.06);
      border-color: rgba(130,109,239,.22);
      box-shadow: 0 10px 24px rgba(25,28,33,.06);
      transform: translateY(-1px);
    }
    
    /* Ícones do grid: um pouco maiores para “ação rápida” */
    .sf-drawer__quick iconify-icon.sf-ico{
      --iconify-size: 22px !important;
    }

    .sf-drawer__nav{
      padding: 12px 14px 16px;
      border-top: 1px solid rgba(25,28,33,.08);
      margin-top: 2px;
    }
    
    .sf-drawer__nav::before{
      content: "Navegação";
      display: block;
      margin: 4px 2px 10px;
      color: rgba(84,84,84,.70);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

  /* Acordeão premium (Agendamentos/Conteúdo/Imagens etc.) */
  .sf-acc{
    background: #fff;
    border: 1px solid rgba(25,28,33,.10);
    border-radius: 16px;
    overflow:hidden;
    margin-bottom: 12px;
  }

  .sf-acc__btn{
    width: 100%;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px;
    border: 0;
    background: transparent;
    color: var(--sf-text);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.01em;
    cursor: pointer;
  }
  
.sf-acc__main{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.sf-acc__title{
  line-height: 1.15;
}

.sf-acc__desc{
  color: rgba(84,84,84,.70);
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 600;
}

  .sf-acc__btn:hover{
    background: rgba(130,109,239,.06);
  }

/* Chevron do accordion (chip) — agora usa classe para não afetar microcopy */
.sf-acc__btn .sf-acc__chev{
  width: 34px;
  height: 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: rgba(130,109,239,.12);
  color: var(--sf-primary);
  font-size: 18px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .16s ease, opacity .16s ease;
}

.sf-acc.is-open .sf-acc__btn .sf-acc__chev{
  transform: rotate(90deg);
}

.sf-acc--direct .sf-acc__btn--direct{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width: 100%;

    /* “reset” de link */
    text-decoration: none;
    color: var(--sf-text);

    /* mesma pegada do botão do accordion */
    padding: 14px 14px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    border-radius: 16px; /* garante sensação de card */
  }
  
  .sf-acc--direct .sf-acc__btn--direct:hover{
    background: rgba(130,109,239,.06);
  }
  .sf-acc__panel{
    display:none;
    padding: 2px 14px 14px;
  }
  .sf-acc.is-open .sf-acc__panel{ display:block; }

  /* Título de categoria dentro do painel (JS imprime com class sf-muted) */
  .sf-drawer .sf-muted{
    color: rgba(84,84,84,.70);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: 12px;
    margin-bottom: 6px;
  }

  /* Links internos do drawer (cards) */
  .sf-drawer-link{
    display:block;
    text-decoration:none;
    color: var(--sf-text);
    background: #fff;
    border: 1px solid rgba(25,28,33,.10);
    border-radius: 14px;
    padding: 12px 12px;
    margin-top: 8px;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
  }
  .sf-drawer-link:hover{
    background: rgba(130,109,239,.06);
    border-color: rgba(130,109,239,.28);
    transform: translateY(-1px);
  }

  /* O JS monta <strong> dentro de um <div>, então ajustamos por descendência */
  .sf-drawer-link div strong{
    font-size: 14px;
    font-weight: 700;
  }

  .sf-drawer-link__desc{
    margin-top: 4px;
    color: var(--sf-muted);
    font-size: 13px;
    line-height: 1.3;
  }

  /* Badge opcional (se o JS imprimir) */
  .sf-drawer .sf-badge{
    display:inline-flex;
    align-items:center;
    gap: 6px;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    background: rgba(130,109,239,.14);
    color: var(--sf-primary);
    vertical-align: middle;
  }

  /* Variantes no drawer (mantém a base existente, só diferencia levemente) */
  .sf-drawer .sf-badge--custom{
    background: rgba(25,28,33,.06);
    color: rgba(84,84,84,.92);
  }

  .sf-drawer .sf-badge--plan{
    background: rgba(130,109,239,.14);
    color: var(--sf-primary);
    border: 1px solid rgba(130,109,239,.18);
  }

  .sf-drawer .sf-badge__ico{
    --iconify-size: 13px;
  }

.sf-drawer__footer{
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--sf-surface-2);
  border-top: 1px solid rgba(25,28,33,.08);
  padding: 12px 14px 16px;
  display:flex;
  gap: 10px;
}

.sf-drawer__footer a{
  flex: 1;
  text-align:center;
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 14px;

  /* mais discreto que navegação */
  background: transparent;
  border: 1px solid rgba(25,28,33,.10);
  color: rgba(84,84,84,.90);

  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

/* Meu perfil: neutro (discreto) */
.sf-drawer__footer a:first-child{
  background: rgba(255,255,255,.85);
  color: #826def;
}

/* Sair: ainda mais discreto */
.sf-drawer__footer a:last-child{
  background: #f590901c;
  border-style: dashed;
  color: #db7171;
  border-color: #f59090;
}

.sf-drawer__footer a:hover{
  background: rgba(130,109,239,.06);
  border-color: rgba(130,109,239,.22);
  transform: translateY(-1px);
}

.sf-drawer__footer a:last-child:hover{
  background: white;
  border-color: #f59090;
}

  .sf-profile-dropdown{
    position: fixed;
    left: 12px;
    right: 12px;
    top: 72px;
    width: auto;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 92px);
    overflow: auto;
    z-index: 10002; /* acima do overlay e do drawer */
  }

  @supports (height: 100vh){
    .sf-profile-dropdown{ max-height: calc(100vh - 92px); }
  }
}


/* ======================================================
   8) FIXES FINAIS (manter no final)
   - Iconify web component: RESPEITAR o --iconify-size do contexto
   IMPORTANTE:
   - NÃO definir --iconify-size aqui.
   ====================================================== */
.sf-portal-header iconify-icon{
  display: inline-block !important;
  vertical-align: -0.125em;
  line-height: 1 !important;

  /* Faz o componente usar o tamanho que vier do contexto */
  font-size: var(--iconify-size, 1em) !important;

  /* Mantém cor padrão do header (prefix branco tem !important) */
  color: var(--sf-primary);
}

/* Tipografia do nav — normalizar links “únicos” */
.sf-portal-header .sf-nav{
  font-size: 16px;
  font-weight: 500;
}

.sf-portal-header .sf-nav a span,
.sf-portal-header .sf-nav button span{
  font-weight: inherit !important;
  font-size: inherit !important;
}