/**
 * LetsGoPedir - Design System (painéis: lojista, administração, afiliado)
 * Base: modo Sistema/App (SaaS, dashboards, CRUD), recolorido com a paleta oficial da marca LetsGoPedir.
 *
 * Paleta oficial (manual da marca):
 *   Roxo principal #6C4DFF (marca, tecnologia) · Roxo secundário #5A2DFF (destaques)
 *   Laranja principal #FF7A3D (ação, energia) · Laranja claro #FF9D5A (apoio)
 *   Creme #FFF8EF (só para destaques pontuais; o fundo do app é cinza-claro neutro #F5F5F7) · Grafite #171717 (texto) · Cinza #E5E7EB (bordas) · Branco #FFFFFF (superfícies)
 *
 * Extrapolações (NÃO estão no manual): neutros do modo escuro (grafite com leve tom roxo), textos secundário/terciário,
 * cores semânticas de sucesso/erro/aviso. Revisar com o time de marca se necessário.
 *
 * Regras:
 * - Roxo #6C4DFF é ação/marca e é IDÊNTICO em modo claro e escuro (nunca clarear/escurecer)
 * - Laranja #FF7A3D é acento (chamadas, destaques, indicadores) — não use como cor de status de erro
 * - Tipografia: Sora (UI: títulos 24px/600, headers 12px/600 uppercase, células 13-14px/400, números 32-40px/600)
 * - Geometria: botões radius 8px, cards radius 12-16px, inputs radius 8px
 * - Submenus/Dropdowns: sem divisores, padding 9px 14px, raio 6px nos itens
 * - Tabelas: 44px de altura de linha, cabeçalho sticky, divisor hairline, sem zebra
 */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap');

[data-theme="dark"] {
  /* Paleta Neutra (modo escuro, suportado via toggle) */
  --ba-bg-base: #0F0D14;
  --ba-bg-surface: #171520;
  --ba-bg-elevated: #1F1C2B;
  --ba-border: #2B2738;
  --ba-border-hover: #3A3549;
  --ba-text-primary: #F7F5FF;
  --ba-text-secondary: #9B97AE;
  --ba-text-tertiary: #67627A;

  /* Cor de Marca / Ação Primária (roxo LetsGoPedir, idêntico nos dois temas) */
  --ba-primary: #6C4DFF;
  --ba-primary-hover: #5A2DFF;
  --ba-primary-active-bg: rgba(108, 77, 255, 0.14);
  --ba-accent: #FF7A3D;
  --ba-accent-light: #FF9D5A;
  --ba-accent-bg: rgba(255, 122, 61, 0.14);

  /* Status Semântico (Separado da cor de marca) */
  --ba-success: #22c55e;
  --ba-success-bg: rgba(34, 197, 94, 0.12);
  --ba-warning: #f59e0b;
  --ba-warning-bg: rgba(245, 158, 11, 0.12);
  --ba-danger: #ef4444;
  --ba-danger-bg: rgba(239, 68, 68, 0.12);
  --ba-info: #3b82f6;
  --ba-info-bg: rgba(59, 130, 246, 0.12);

  /* Inputs & Superfícies */
  --ba-input-bg: #1F1C2B;
  --ba-hover-bg: rgba(255, 255, 255, 0.04);
  --ba-hover-surface: rgba(255, 255, 255, 0.06);

  /* Sombras */
  --ba-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --ba-shadow-dropdown: 0 14px 32px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.3);
  --ba-shadow-modal: 0 20px 45px rgba(0, 0, 0, 0.6);
  --ba-shadow-box: 0 4px 16px rgba(0, 0, 0, 0.3);

  /* Geometria / Raio */
  --ba-radius-sm: 6px;
  --ba-radius-md: 8px;
  --ba-radius-lg: 12px;
  --ba-radius-xl: 16px;

  /* Tipografia */
  --ba-font-sans: 'Sora', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

:root,
[data-theme="light"] {
  /* Paleta Neutra (light-first, padrão do painel desde 30/09/2026 — Base #F5F5F7, Surface #FFFFFF, Elevado #EDEEF1) */
  --ba-bg-base: #F5F5F7;
  --ba-bg-surface: #FFFFFF;
  --ba-bg-elevated: #EDEEF1;
  --ba-border: #E5E7EB;
  --ba-border-hover: #D2D5DC;
  --ba-text-primary: #171717;
  --ba-text-secondary: #5F6470;
  --ba-text-tertiary: #9AA0AA;

  /* Cor de Marca / Ação Primária (roxo LetsGoPedir, idêntico nos dois temas) */
  --ba-primary: #6C4DFF;
  --ba-primary-hover: #5A2DFF;
  --ba-primary-active-bg: rgba(108, 77, 255, 0.09);
  --ba-accent: #FF7A3D;
  --ba-accent-light: #FF9D5A;
  --ba-accent-bg: rgba(255, 122, 61, 0.14);

  /* Status Semântico */
  --ba-success: #16a34a;
  --ba-success-bg: rgba(22, 163, 74, 0.10);
  --ba-warning: #d97706;
  --ba-warning-bg: rgba(217, 119, 6, 0.10);
  --ba-danger: #dc2626;
  --ba-danger-bg: rgba(220, 38, 38, 0.10);
  --ba-info: #2563eb;
  --ba-info-bg: rgba(37, 99, 235, 0.10);

  /* Inputs & Superfícies */
  --ba-input-bg: #FFFFFF;
  --ba-hover-bg: rgba(0, 0, 0, 0.03);
  --ba-hover-surface: rgba(0, 0, 0, 0.05);

  /* Sombras */
  --ba-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --ba-shadow-dropdown: 0 12px 28px rgba(15, 17, 23, 0.08), 0 2px 8px rgba(15, 17, 23, 0.04);
  --ba-shadow-modal: 0 20px 40px rgba(15, 17, 23, 0.14), 0 4px 12px rgba(15, 17, 23, 0.06);
  --ba-shadow-box: 0 2px 10px rgba(15, 17, 23, 0.04);

  /* Geometria / Raio */
  --ba-radius-sm: 6px;
  --ba-radius-md: 8px;
  --ba-radius-lg: 12px;
  --ba-radius-xl: 16px;

  /* Tipografia */
  --ba-font-sans: 'Sora', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   RESET & BASE (App Shell)
   ========================================================================== */

html, body {
  background-color: var(--ba-bg-base) !important;
  color: var(--ba-text-primary) !important;
  font-family: var(--ba-font-sans) !important;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body {
  min-height: 100vh;
}

a {
  color: var(--ba-text-primary);
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

a:hover, a:focus {
  color: var(--ba-primary) !important;
  text-decoration: none;
}

/* Background Utility Overrides */
.bg-gray,
.middle.bg-gray,
.home-middle,
.fullfit {
  background-color: var(--ba-bg-base) !important;
}

hr {
  border-top: 1px solid var(--ba-border) !important;
  opacity: 1;
  margin: 20px 0;
}

/* ==========================================================================
   BRAND LOGOS (Dark vs Light Switcher)
   ========================================================================== */

[data-theme="dark"] .brand-logo-dark {
  display: inline-block !important;
}
[data-theme="dark"] .brand-logo-light {
  display: none !important;
}

[data-theme="light"] .brand-logo-dark {
  display: none !important;
}
[data-theme="light"] .brand-logo-light {
  display: inline-block !important;
}

/* ==========================================================================
   TIPOGRAFIA (Escala de UI - Sistema/App)
   ========================================================================== */

h1, .h1,
.page-title {
  font-family: var(--ba-font-sans) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--ba-text-primary) !important;
  letter-spacing: -0.4px;
  margin-top: 0;
  margin-bottom: 16px;
}

h2, .h2,
h3, .h3,
.welcome-message h3,
.title-line {
  font-family: var(--ba-font-sans) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--ba-text-primary) !important;
  letter-spacing: -0.3px;
}

.welcome-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 15px 0 25px 0;
}

.welcome-message h3 {
  margin: 0;
}

.panel-title,
.listing-title,
.title-min {
  font-family: var(--ba-font-sans) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ba-text-primary) !important;
}

.listing-title .counter {
  color: var(--ba-primary) !important;
  font-weight: 600;
}

/* Micro / Caption */
.form-tip,
.caption,
.text-muted,
.sub-info {
  font-family: var(--ba-font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ba-text-tertiary) !important;
}

/* Tabular Nums para Dados e Dashboard */
.stat-number,
.tabular-nums,
.number,
.total,
.valor {
  font-variant-numeric: tabular-nums !important;
}

/* ==========================================================================
   PAGE TITLE ICON & BREADCRUMBS
   ========================================================================== */

.title-icon {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 10px 0 24px 0 !important;
  font-size: 22px !important;
}

.title-icon i {
  background: var(--ba-primary-active-bg) !important;
  border: 1px solid rgba(108, 77, 255, 0.25) !important;
  color: var(--ba-primary) !important;
  border-radius: var(--ba-radius-md) !important;
  padding: 10px 12px !important;
  font-size: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.title-icon span {
  font-family: var(--ba-font-sans) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--ba-text-primary) !important;
  letter-spacing: -0.4px;
}

.title-line i {
  color: var(--ba-primary) !important;
}

.bread,
.bread a,
.bread span {
  font-family: var(--ba-font-sans) !important;
  font-size: 12px !important;
  color: var(--ba-text-tertiary) !important;
}

.bread i {
  color: var(--ba-primary) !important;
}

.bread a:hover {
  color: var(--ba-primary) !important;
}

/* ==========================================================================
   TOPBAR & HEADER
   ========================================================================== */

.header {
  border-bottom: 1px solid var(--ba-border);
}

.header .top,
.top.top-painel {
  background-color: var(--ba-bg-surface) !important;
  border-bottom: 1px solid var(--ba-border) !important;
  border-top: 0 !important;
  padding: 14px 0 !important;
}

/* Brand Logo in Topbar */
.brand-login img {
  height: 72px !important;
  max-height: 80px !important;
  width: auto !important;
  display: inline-block;
}

.top .brand img,
.top .brand a img {
  height: 44px !important;
  max-height: 48px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

.top-painel .brand a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.top-painel .brand img {
  width: 42px !important;
  height: 42px !important;
  border-radius: var(--ba-radius-md) !important;
  border: 1px solid var(--ba-border);
}

.top-painel .brand span {
  font-family: var(--ba-font-sans) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ba-text-primary) !important;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.top-painel .brand span .colored {
  color: var(--ba-primary) !important;
}

/* User Info Top Right */
.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-info div {
  margin: 0 !important;
}

.user-info-login a,
.user-info-config a,
.user-info-logout a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--ba-radius-md);
  border: 1px solid var(--ba-border);
  background-color: var(--ba-bg-elevated);
  color: var(--ba-text-secondary) !important;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.user-info-login a:hover,
.user-info-config a:hover,
.user-info-logout a:hover {
  background-color: var(--ba-hover-surface);
  border-color: var(--ba-border-hover);
  color: var(--ba-text-primary) !important;
}

.user-info-logout a:hover {
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--ba-danger) !important;
}

.user-info i {
  color: var(--ba-primary) !important;
  font-size: 16px;
}

.user-info-logout i {
  color: var(--ba-text-secondary) !important;
}

.user-info-logout a:hover i {
  color: var(--ba-danger) !important;
}

.user-info span {
  color: var(--ba-text-secondary) !important;
  margin-left: 0 !important;
}

/* ==========================================================================
   THEME SWITCHER TOGGLE (Light / Dark)
   ========================================================================== */

.user-info-theme {
  display: inline-flex;
  align-items: center;
}

.ba-theme-toggle {
  background-color: var(--ba-bg-elevated) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: var(--ba-radius-md) !important;
  color: var(--ba-text-secondary) !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.ba-theme-toggle:hover {
  background-color: var(--ba-hover-surface) !important;
  border-color: var(--ba-border-hover) !important;
  color: var(--ba-primary) !important;
}

.ba-theme-toggle i {
  font-size: 16px !important;
  color: inherit !important;
  line-height: 1 !important;
  margin: 0 !important;
  transform: none !important;
  transition: transform 0.2s ease;
}

.ba-theme-toggle:hover i {
  transform: rotate(18deg);
}

[data-theme="dark"] .ba-theme-toggle .theme-icon-light {
  display: inline-block !important;
}
[data-theme="dark"] .ba-theme-toggle .theme-icon-dark {
  display: none !important;
}

[data-theme="light"] .ba-theme-toggle .theme-icon-light {
  display: none !important;
}
[data-theme="light"] .ba-theme-toggle .theme-icon-dark {
  display: inline-block !important;
}

/* Mobile Theme Toggle in Menu Bar */
.user-menu .ba-theme-toggle {
  margin-left: 6px !important;
}

/* ==========================================================================
   NAVIGATOR (Desktop Navigation Bar)
   ========================================================================== */

.navigator.naver {
  background-color: var(--ba-bg-surface) !important;
  border-bottom: 1px solid var(--ba-border) !important;
  border-top: 0 !important;
  padding: 4px 0 !important;
}

.naver .navbar {
  margin-bottom: 0;
  min-height: auto;
}

.naver .navbar-nav > li > a {
  font-family: var(--ba-font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ba-text-secondary) !important;
  padding: 10px 14px !important;
  border-radius: var(--ba-radius-md) !important;
  margin: 2px 2px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.naver .navbar-nav > li > a:hover,
.naver .navbar-nav > li > a:focus {
  background-color: var(--ba-hover-bg) !important;
  color: var(--ba-text-primary) !important;
}

.naver .navbar-nav > li.active > a,
.naver .navbar-nav > li.active > a:hover,
.naver .navbar-nav > li.active > a:focus {
  background-color: var(--ba-primary-active-bg) !important;
  color: var(--ba-primary) !important;
  font-weight: 600 !important;
}

.naver .navbar-nav > li.active > a i,
.naver .navbar-nav > li > a:hover i {
  color: var(--ba-primary) !important;
}

.naver .navbar-nav > li > a i {
  color: var(--ba-text-tertiary);
  font-size: 14px;
}

/* ==========================================================================
   SUBMENU / DROPDOWN MENUS (STRICT: ZERO LINHAS DIVISORAS ENTRE ITENS)
   ========================================================================== */

.dropdown-menu,
.naver .dropdown-menu,
.navbar-nav > li > .dropdown-menu {
  background-color: var(--ba-bg-surface) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: var(--ba-radius-md) !important;
  box-shadow: var(--ba-shadow-dropdown) !important;
  padding: 6px !important;
  margin-top: 6px !important;
  min-width: 220px !important;
  list-style: none !important;
}

.dropdown-menu > li,
.naver .dropdown-menu > li,
.navbar-nav > li > .dropdown-menu > li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
}

/* Link dos Itens de Submenu - Sem Linha Divisora */
.dropdown-menu a,
.dropdown-menu > li > a,
.naver .dropdown-menu > li > a,
.navbar-nav > li > .dropdown-menu a,
.navbar-nav > li > .dropdown-menu > li > a {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  margin: 2px 0 !important;
  padding: 10px 14px !important;
  border-radius: var(--ba-radius-sm) !important;
  font-family: var(--ba-font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ba-text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}

/* Hover e Focus no Item do Submenu */
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.naver .dropdown-menu > li > a:hover,
.naver .dropdown-menu > li > a:focus,
.navbar-nav > li > .dropdown-menu a:hover,
.navbar-nav > li > .dropdown-menu a:focus {
  background-color: var(--ba-primary-active-bg) !important;
  color: var(--ba-primary) !important;
  border: 0 !important;
  border-bottom: 0 !important;
}

/* Ícones dentro dos itens de Submenu */
.dropdown-menu a i,
.dropdown-menu > li > a i,
.naver .dropdown-menu > li > a i,
.navbar-nav > li > .dropdown-menu li i,
.navbar-nav > li > .dropdown-menu a i {
  color: var(--ba-text-tertiary) !important;
  font-size: 16px !important;
  margin: 0 !important;
  transform: none !important;
  width: 18px !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.15s ease !important;
}

.dropdown-menu a:hover i,
.dropdown-menu > li > a:hover i,
.naver .dropdown-menu > li > a:hover i,
.navbar-nav > li > .dropdown-menu a:hover i {
  color: var(--ba-primary) !important;
}

/* External Link / Store Button on Right */
.naver .pull-right .navbar-nav > li > a {
  border: 1px solid var(--ba-border);
  background-color: var(--ba-hover-bg);
}

.naver .pull-right .navbar-nav > li > a:hover {
  border-color: var(--ba-primary);
  color: var(--ba-primary) !important;
}

/* Indicação/CTA no menu esquerdo: destaque de convite, não de "página atual" (antes reaproveitava .active) */
.naver .navbar-nav > li.nav-cta > a {
  border: 1px solid var(--ba-primary-active-bg) !important;
  background-color: var(--ba-primary-active-bg) !important;
  color: var(--ba-primary) !important;
  font-weight: 600 !important;
}

.naver .navbar-nav > li.nav-cta > a:hover {
  border-color: var(--ba-primary) !important;
  background-color: var(--ba-primary) !important;
  color: #fff !important;
}

/* ==========================================================================
   SIDEBAR (Mobile / Offcanvas)
   ========================================================================== */

.sidebar,
#sidebarLeft .sidebar,
#sidebarRight .sidebar {
  background-color: var(--ba-bg-surface) !important;
  border-right: 1px solid var(--ba-border) !important;
  border-left: 1px solid var(--ba-border) !important;
  width: 264px;
}

.sidebar .sidebar-header {
  background-color: var(--ba-bg-surface) !important;
  border-bottom: 1px solid var(--ba-border) !important;
  padding: 16px 20px !important;
}

.sidebar .sidebar-header .close-sidebar {
  color: var(--ba-text-secondary) !important;
  font-size: 20px;
  cursor: pointer;
  transition: color 0.15s;
}

.sidebar .sidebar-header .close-sidebar:hover {
  color: var(--ba-text-primary) !important;
}

.sidebar .sidebar-content {
  padding: 16px;
}

.sidebar .navbar-nav > li > a {
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 12px !important;
  border-radius: var(--ba-radius-md) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ba-text-secondary) !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.sidebar .navbar-nav > li > a:hover {
  background-color: var(--ba-hover-bg) !important;
  color: var(--ba-text-primary) !important;
}

.sidebar .navbar-nav > li.active > a {
  background-color: var(--ba-primary-active-bg) !important;
  color: var(--ba-primary) !important;
}

.sidebar .navbar-nav > li.active > a i {
  color: var(--ba-primary) !important;
}

.sidebar .navbar-nav > li > a i {
  font-size: 18px;
  color: var(--ba-text-tertiary);
}

/* ==========================================================================
   DASHBOARD TILES & CARDS
   ========================================================================== */

/* Grid Stat Tiles */
.lista-menus .lista-menus-menu .bt {
  background-color: var(--ba-bg-surface) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: var(--ba-radius-lg) !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 80px;
  transition: all 0.2s ease !important;
  box-shadow: var(--ba-shadow-box) !important;
}

.lista-menus .lista-menus-menu .bt:hover {
  background-color: var(--ba-hover-surface) !important;
  border-color: var(--ba-border-hover) !important;
  transform: translateY(-1px);
}

.lista-menus .bt i {
  color: var(--ba-primary) !important;
  font-size: 24px !important;
  width: auto !important;
  float: none !important;
  margin-right: 14px;
}

.lista-menus .bt span {
  color: var(--ba-text-primary) !important;
  font-family: var(--ba-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: 0 !important;
  padding: 0 !important;
  float: none !important;
  flex: 1;
  line-height: 1.4;
}

.lista-menus .bt strong {
  float: none !important;
  width: auto !important;
}

.lista-menus .bt strong i,
.lista-menus .bt i.lni-chevron-right {
  color: var(--ba-text-tertiary) !important;
  font-size: 14px !important;
  margin-right: 0 !important;
}

/* General Box / Card Container */
.box-white,
.card,
.panel-default {
  background-color: var(--ba-bg-surface) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: var(--ba-radius-lg) !important;
  color: var(--ba-text-primary) !important;
  box-shadow: var(--ba-shadow-box) !important;
}

.box-white {
  padding: 24px !important;
  margin-bottom: 24px !important;
}

/* Panel Filters & Accordions (Override Orange/Yellow) */
.panel-default {
  overflow: hidden !important;
}

.panel-default > .panel-heading {
  background-color: var(--ba-bg-elevated) !important;
  border-bottom: 1px solid var(--ba-border) !important;
  padding: 0 !important;
}

.panel-default > .panel-heading a,
.panel-filters .panel-heading a {
  background: var(--ba-bg-elevated) !important;
  color: var(--ba-text-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 18px !important;
  font-family: var(--ba-font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: 0 !important;
  transition: background-color 0.15s ease;
}

.panel-default > .panel-heading a:hover,
.panel-filters .panel-heading a:hover {
  background-color: var(--ba-hover-surface) !important;
}

.panel-default > .panel-heading a .desc,
.panel-filters .panel-heading a .desc {
  color: var(--ba-text-primary) !important;
  font-family: var(--ba-font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 0 !important;
}

.panel-default > .panel-heading i,
.panel-filters .panel-heading i {
  color: var(--ba-primary) !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 16px !important;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body,
.panel-filters .panel-body {
  background-color: var(--ba-bg-surface) !important;
  border-top: 1px solid var(--ba-border) !important;
  color: var(--ba-text-primary) !important;
  padding: 18px 20px !important;
}

/* ==========================================================================
   WIZARD STEPS (Cadastro de Estabelecimento, Produtos, etc.)
   ========================================================================== */

.wizard {
  overflow: visible !important;
}

.wizard > .steps {
  margin-bottom: 24px !important;
}

.wizard > .steps ul {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.wizard > .steps > ul > li {
  float: none !important;
  flex: 1 1 0 !important;
  width: auto !important;
}

.wizard > .steps a {
  background: var(--ba-bg-elevated) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: var(--ba-radius-md) !important;
  color: var(--ba-text-secondary) !important;
  font-family: var(--ba-font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 12px 14px !important;
  display: block !important;
  text-align: center !important;
  margin-right: 0 !important;
  transition: all 0.15s ease !important;
}

.wizard > .steps a:hover {
  background: var(--ba-hover-surface) !important;
  border-color: var(--ba-border-hover) !important;
  color: var(--ba-text-primary) !important;
}

.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active {
  background: var(--ba-primary) !important;
  border-color: var(--ba-primary) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(108, 77, 255, 0.3) !important;
}

.wizard > .steps .done a {
  background: var(--ba-primary-active-bg) !important;
  border-color: rgba(108, 77, 255, 0.25) !important;
  color: var(--ba-text-primary) !important;
}

.wizard .actions {
  padding-top: 24px !important;
}

.wizard .actions a {
  background: var(--ba-primary) !important;
  border: 1px solid var(--ba-primary) !important;
  border-radius: var(--ba-radius-md) !important;
  color: #FFFFFF !important;
  font-family: var(--ba-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 10px 24px !important;
  transition: all 0.15s ease !important;
}

.wizard .actions a:hover {
  background: var(--ba-primary-hover) !important;
  border-color: var(--ba-primary-hover) !important;
}

.wizard .actions a[href="#previous"] {
  background: transparent !important;
  border: 1px solid var(--ba-border) !important;
  color: var(--ba-text-primary) !important;
}

.wizard .actions a[href="#previous"]:hover {
  background: var(--ba-hover-surface) !important;
  border-color: var(--ba-border-hover) !important;
}

.wizard .actions a[href="#finish"] {
  background: var(--ba-success) !important;
  border-color: var(--ba-success) !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   TABELAS (Sistema/App - Linhas de 44px, Headers 12px/600 Uppercase)
   ========================================================================== */

table.listing-table,
.clean-table,
.table-pedidos,
.table {
  background-color: var(--ba-bg-surface) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: var(--ba-radius-lg) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  margin-bottom: 24px;
  box-shadow: var(--ba-shadow-box) !important;
}

/* Table Header */
table.listing-table thead th,
.clean-table thead th,
.table-pedidos thead th,
.table thead th {
  background-color: var(--ba-bg-surface) !important;
  border-bottom: 1px solid var(--ba-border) !important;
  border-top: 0 !important;
  color: var(--ba-text-secondary) !important;
  font-family: var(--ba-font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 12px 16px !important;
  vertical-align: middle !important;
  white-space: nowrap;
}

/* Table Rows & Cells */
table.listing-table tbody tr,
.clean-table tbody tr,
.table-pedidos tbody tr,
.table tbody tr {
  background-color: transparent !important;
  border-bottom: 1px solid var(--ba-border) !important;
  transition: background-color 0.15s ease;
  height: 44px !important;
}

table.listing-table tbody tr:hover,
.clean-table tbody tr:hover,
.table-pedidos tbody tr:hover,
.table tbody tr:hover {
  background-color: var(--ba-hover-bg) !important;
}

/* No zebra stripes by default */
table.listing-table tr:nth-child(even),
.table-striped > tbody > tr:nth-child(odd) {
  background-color: transparent !important;
}

table.listing-table tbody td,
.clean-table tbody td,
.table-pedidos tbody td,
.table tbody td {
  border-top: 0 !important;
  border-bottom: 1px solid var(--ba-border) !important;
  color: var(--ba-text-primary) !important;
  font-family: var(--ba-font-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 10px 16px !important;
  vertical-align: middle !important;
}

/* Tabular Nums on Numeric Cells */
table.listing-table td.numeric,
table.listing-table td:nth-child(1),
.table-pedidos td:first-child {
  font-variant-numeric: tabular-nums;
}

/* Telas que ainda usam o card empilhado (.fake-table) no mobile: a altura fixa de 44px acima
   é pensada pra linha de tabela normal e não pra card com rótulo+valor empilhados — sem isso,
   as linhas ficam cortadas em 44px e o conteúdo de cada card vaza por cima do próximo. */
@media (max-width: 991px) {
  table.listing-table.fake-table tbody tr {
    height: auto !important;
  }
  table.listing-table.fake-table tbody td {
    padding: 0 !important;
  }
}

/* Row Action Buttons */
.form-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

.form-actions a {
  background-color: var(--ba-bg-elevated) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: var(--ba-radius-sm) !important;
  color: var(--ba-text-secondary) !important;
  padding: 6px 10px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.form-actions a:hover {
  border-color: var(--ba-primary) !important;
  color: var(--ba-primary) !important;
  background-color: var(--ba-primary-active-bg) !important;
}

.form-actions a i {
  font-size: 14px;
}

/* Rounded Thumbnails */
.rounded-thumb-holder,
.rounded-thumb {
  border-radius: var(--ba-radius-md) !important;
  overflow: hidden;
  border: 1px solid var(--ba-border);
}

/* ==========================================================================
   BOTÕES (Sistema/App - STRICT: Radius 8px, NUNCA Pill 50px)
   ========================================================================== */

/* Botão Primário */
button,
input[type=submit],
.btn-primary,
.form-field-submit button,
.botao-acao {
  background: var(--ba-primary) !important;
  border: 1px solid var(--ba-primary) !important;
  border-radius: var(--ba-radius-md) !important;
  color: #FFFFFF !important;
  font-family: var(--ba-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 9px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  text-decoration: none !important;
}

button:hover,
input[type=submit]:hover,
.btn-primary:hover,
.form-field-submit button:hover,
.botao-acao:hover {
  background: var(--ba-primary-hover) !important;
  border-color: var(--ba-primary-hover) !important;
  color: #FFFFFF !important;
}

button span,
.botao-acao span {
  color: #FFFFFF !important;
}

button i,
.botao-acao i {
  color: #FFFFFF !important;
  font-size: 14px;
}

/* Botão Secundário / Fakebutton / Backbutton / Add-New */
.fakebutton,
.backbutton,
.btn-secondary,
.btn-default,
.add-new a {
  background: var(--ba-bg-surface) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: var(--ba-radius-md) !important;
  color: var(--ba-text-primary) !important;
  font-family: var(--ba-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}

.fakebutton:hover,
.backbutton:hover,
.btn-secondary:hover,
.btn-default:hover,
.add-new a:hover {
  background: var(--ba-hover-surface) !important;
  border-color: var(--ba-border-hover) !important;
  color: var(--ba-primary) !important;
}

.fakebutton span,
.backbutton span,
.add-new a span {
  color: inherit !important;
}

.fakebutton i,
.backbutton i,
.add-new a i {
  color: var(--ba-primary) !important;
  font-size: 14px;
}

/* Botão Destrutivo */
.btn-danger,
.remover,
.btn-delete {
  background: transparent !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  border-radius: var(--ba-radius-md) !important;
  color: var(--ba-danger) !important;
  font-family: var(--ba-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  transition: all 0.15s ease !important;
}

.btn-danger:hover,
.remover:hover,
.btn-delete:hover {
  background: var(--ba-danger-bg) !important;
  border-color: var(--ba-danger) !important;
  color: var(--ba-danger) !important;
}

/* ==========================================================================
   FORMS & INPUTS
   ========================================================================== */

label {
  color: var(--ba-text-secondary) !important;
  font-family: var(--ba-font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
}

input[type=text],
input[type=email],
input[type=select],
input[type=password],
input[type=number],
textarea,
select,
.form-control,
.maskmoney {
  background-color: var(--ba-input-bg) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: var(--ba-radius-md) !important;
  color: var(--ba-text-primary) !important;
  font-family: var(--ba-font-sans) !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: none !important;
}

/* Select nativo: some com a seta do sistema (que sobrepõe rótulos longos, ex. "Saiu Para Entrega")
   e desenha uma seta própria, consistente com o resto do design system nos dois temas */
select,
select.form-control {
  /* o Bootstrap legado fixa .form-control em 34px de altura; com o padding de 10px do design
     system isso sobra só ~12px pro texto (20px de line-height) e corta o topo das letras */
  height: auto !important;
  min-height: 40px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 34px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239B97AE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--ba-primary) !important;
  box-shadow: 0 0 0 1px var(--ba-primary) !important;
  outline: none !important;
}

select option {
  background-color: var(--ba-bg-surface) !important;
  color: var(--ba-text-primary) !important;
}

::placeholder {
  color: var(--ba-text-tertiary) !important;
  opacity: 1;
}

/* Search Bar */
.search-bar form {
  background-color: var(--ba-input-bg) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: var(--ba-radius-md) !important;
  padding: 2px 8px;
}

.search-bar input[type=text] {
  background: transparent !important;
  border: 0 !important;
  color: var(--ba-text-primary) !important;
  padding: 8px 10px !important;
}

.search-bar button {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.search-bar button i {
  color: var(--ba-primary) !important;
}

/* Form Tips & Alerts */
.form-tip {
  background-color: var(--ba-bg-surface) !important;
  border-left: 3px solid var(--ba-primary) !important;
  border-radius: var(--ba-radius-sm) !important;
  color: var(--ba-text-secondary) !important;
  padding: 8px 14px !important;
  text-align: left !important;
  margin-bottom: 12px !important;
}

/* Checkboxes & Radios */
.form-field-radio {
  background-color: var(--ba-bg-elevated) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: var(--ba-radius-md) !important;
  color: var(--ba-text-primary) !important;
}

/* Error Labels */
label.error {
  color: var(--ba-danger) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
}

/* ==========================================================================
   STATUS BADGES & TAGS
   ========================================================================== */

.badge-status,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--ba-radius-sm);
  font-size: 12px;
  font-weight: 600;
}

.status-pendente,
.badge-warning {
  background-color: var(--ba-warning-bg) !important;
  color: var(--ba-warning) !important;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.status-concluido,
.badge-success {
  background-color: var(--ba-success-bg) !important;
  color: var(--ba-success) !important;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.status-cancelado,
.badge-danger {
  background-color: var(--ba-danger-bg) !important;
  color: var(--ba-danger) !important;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Funcionamento Store Indicator */
.funcionamento .aberto .bt {
  background-color: var(--ba-bg-surface) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: var(--ba-radius-lg) !important;
}

.funcionamento .bt {
  justify-content: flex-start !important;
  gap: 12px;
}

.funcionamento-label {
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.funcionamento .open-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* Sem isso, o dot fica sempre verde (herdava a regra genérica acima mesmo com a loja fechada) */
.funcionamento .aberto .open-status {
  background-color: var(--ba-success);
  box-shadow: 0 0 8px var(--ba-success);
}

.funcionamento .fechado .open-status {
  background-color: var(--ba-danger);
  box-shadow: 0 0 8px var(--ba-danger);
}

.funcionamento-chip { width: 34px !important; height: 34px !important; border-radius: 10px !important; background: var(--ba-bg-elevated) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: none !important; }

/* Empty state das listas (pedidos, produtos, etc.) -- ver painel_empty_state() em general.php */
.ba-empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 20px; text-align: center; }
.ba-empty-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--ba-bg-elevated); color: var(--ba-primary, #6C4DFF); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.ba-empty-state strong { font-size: 15px; font-weight: 700; color: var(--ba-text-primary); }
.ba-empty-state span { font-size: 13px; color: var(--ba-text-secondary); max-width: 360px; }
.ba-empty-state .lgp-onb-go { margin-top: 10px; }
.funcionamento-chip i.open-status { width: 10px !important; height: 10px !important; margin-right: 0 !important; }

.funcionamento-msg {
  color: var(--ba-text-secondary) !important;
  font-size: 12px !important;
}

/* ==========================================================================
   PAGINAÇÃO
   ========================================================================== */

.pagination > li > a,
.pagination > li > span {
  background-color: var(--ba-bg-surface) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: var(--ba-radius-sm) !important;
  color: var(--ba-text-secondary) !important;
  font-family: var(--ba-font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 0 2px !important;
  padding: 8px 14px !important;
  transition: all 0.15s ease;
}

.pagination > li > a:hover,
.pagination > li > a:focus {
  background-color: var(--ba-hover-bg) !important;
  border-color: var(--ba-border-hover) !important;
  color: var(--ba-text-primary) !important;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span {
  background-color: var(--ba-primary) !important;
  border-color: var(--ba-primary) !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   MODAIS (Elevated Surface)
   ========================================================================== */

.modal-content {
  background-color: var(--ba-bg-surface) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: var(--ba-radius-lg) !important;
  color: var(--ba-text-primary) !important;
  box-shadow: var(--ba-shadow-modal) !important;
}

.modal-header {
  border-bottom: 1px solid var(--ba-border) !important;
  padding: 16px 20px !important;
}

.modal-header .close {
  color: var(--ba-text-secondary) !important;
  opacity: 0.8;
  font-size: 24px;
}

.modal-header .close:hover {
  color: var(--ba-text-primary) !important;
  opacity: 1;
}

.modal-footer {
  border-top: 1px solid var(--ba-border) !important;
  padding: 14px 20px !important;
}

/* ==========================================================================
   TELA DE LOGIN / AUTENTICAÇÃO
   ========================================================================== */

.login-box.box-white {
  background-color: var(--ba-bg-surface) !important;
  border: 1px solid var(--ba-border) !important;
  border-top: 3px solid var(--ba-primary) !important;
  border-radius: var(--ba-radius-xl) !important;
  padding: 48px 40px !important;
  box-shadow: var(--ba-shadow-modal) !important;
}

.login-box .brand {
  margin-bottom: 24px !important;
}

.login-box .form-field-icon .form-icon {
  color: var(--ba-text-tertiary) !important;
}

.login-box input[type=text],
.login-box input[type=password] {
  padding-left: 44px !important;
  background-color: var(--ba-input-bg) !important;
}

.login-box input[type=text]:focus ~ .form-icon,
.login-box input[type=password]:focus ~ .form-icon {
  color: var(--ba-primary) !important;
}

.forgetpass a {
  color: var(--ba-text-secondary) !important;
  font-size: 13px !important;
}

.forgetpass a:hover {
  color: var(--ba-primary) !important;
}

/* ==========================================================================
   FOOTER & COPYRIGHT
   ========================================================================== */

.footer,
.copyright {
  background-color: var(--ba-bg-base) !important;
  border-top: 1px solid var(--ba-border) !important;
  color: var(--ba-text-tertiary) !important;
  padding: 20px 0 !important;
  font-size: 12px !important;
}

.copyright span {
  color: var(--ba-text-tertiary) !important;
}

/* Pedidos ao vivo: toasts de novo pedido e opção de impressão automática */
#lgp-toasts { position: fixed; top: 16px; right: 16px; z-index: 99999; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.lgp-toast { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 12px; background: var(--ba-primary, #6C4DFF); color: #fff !important; text-decoration: none !important; box-shadow: 0 8px 28px rgba(0,0,0,.28); animation: lgp-in .25s ease-out; transition: opacity .4s, transform .4s; }
.lgp-toast strong { font-size: 14px; font-weight: 600; }
.lgp-toast span { font-size: 13px; opacity: .9; }
.lgp-toast-out { opacity: 0; transform: translateY(-8px); }
@keyframes lgp-in { from { opacity: 0; transform: translateY(-10px); } }
.lgp-live-opt { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 500; cursor: pointer; }
.lgp-live-opt small { opacity: .6; font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .lgp-toast { animation: none; } }

/* Desempenho (analytics do lojista): KPIs, barras em CSS puro, rankings */
.lgp-range { display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 18px; border-radius: 10px; background: var(--ba-surface, rgba(127,127,127,.12)); }
.lgp-range a { padding: 6px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; color: inherit; text-decoration: none; opacity: .7; }
.lgp-range a.on { background: var(--ba-primary, #6C4DFF); color: #fff; opacity: 1; }
.lgp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.lgp-kpi, .lgp-card { border: 1px solid var(--ba-border, rgba(127,127,127,.22)); border-radius: 14px; background: var(--ba-card, rgba(127,127,127,.06)); }
.lgp-kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.lgp-kpi span { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .6; }
.lgp-kpi strong { font-size: 22px !important; font-weight: 600; line-height: 1.2 !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lgp-kpi small { font-size: 12px; opacity: .6; }
.lgp-card { padding: 18px 20px; margin-bottom: 16px; }
.lgp-card h3 { margin: 0 0 14px !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; }
.lgp-empty { display: flex; flex-direction: column; gap: 6px; padding: 32px; text-align: center; }
.lgp-empty span, .lgp-muted { opacity: .65; font-size: 13px; }
.lgp-bars { display: flex; align-items: flex-end; gap: 3px; height: 140px; }
.lgp-bars-hora { height: 110px; gap: 4px; }
.lgp-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; border-radius: 4px 4px 0 0; }
.lgp-bar i { display: block; width: 100%; min-height: 0; border-radius: 4px 4px 0 0; background: var(--ba-primary, #6C4DFF); opacity: .9; transition: opacity .15s; }
.lgp-bar:hover i { opacity: 1; background: var(--ba-accent, #FF7A3D); }
.lgp-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; opacity: .55; }
.lgp-axis-sem span { flex: 1; text-align: center; }
.lgp-rank, .lgp-share { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.lgp-rank { counter-reset: r; }
.lgp-rank li { display: flex; justify-content: space-between; gap: 12px; }
.lgp-rank li::before { counter-increment: r; content: counter(r); width: 20px; height: 20px; flex: none; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--ba-primary, #6C4DFF); color: #fff; }
.lgp-rank li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgp-share li { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 10px; }
.lgp-share div { height: 8px; border-radius: 4px; background: rgba(127,127,127,.18); overflow: hidden; }
.lgp-share div i { display: block; height: 100%; border-radius: 4px; background: var(--ba-primary, #6C4DFF); }
.lgp-share b { text-align: right; font-variant-numeric: tabular-nums; }

/* Onboarding do lojista (checklist na tela inicial) */
.lgp-onb-wrap { margin: 24px auto; display: flex; }
/* Bloco simples (não flex): ring+cabeçalho e a lista de passos são duas linhas
   empilhadas verticalmente, sem depender de flex-wrap pra quebrar — um <ul> com
   display:grid dentro de um pai flex não respeitava flex-basis:100% e vazava
   largura da página inteira (revelava o menu off-canvas escondido). */
.lgp-onb { border: 1px solid var(--ba-border, rgba(127,127,127,.22)); border-radius: 16px; padding: 20px 22px; background: linear-gradient(135deg, rgba(108,77,255,.10), rgba(108,77,255,.02) 60%), var(--ba-bg-surface); width: 100%; }
.lgp-onb-top { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; }
.lgp-onb-head { flex: 1; min-width: 0; }
.lgp-onb-head strong { display: block; font-size: 16px; font-weight: 600; }
.lgp-onb-head span { font-size: 13px; opacity: .65; }
/* Anel de progresso — substitui a barra linear (compete visualmente menos com a lista de passos abaixo) */
.lgp-onb-ring { position: relative; width: 64px; height: 64px; flex: none; }
.lgp-onb-ring svg { transform: rotate(-90deg); }
.lgp-onb-ring .track { stroke: var(--ba-border, rgba(127,127,127,.25)); }
.lgp-onb-ring .fill { stroke: var(--ba-primary, #6C4DFF); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.lgp-onb-ring .pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.lgp-onb ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lgp-onb li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid rgba(127,127,127,.15); }
.lgp-onb li:first-child { border-top: 0; }
.lgp-onb li div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lgp-onb li b { font-size: 14px; font-weight: 600; }
.lgp-onb li small { font-size: 12px; opacity: .65; }
.lgp-onb li.done b { opacity: .5; }
.lgp-onb li.done small { display: none; }
.lgp-onb-dot { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid rgba(127,127,127,.5); }
.lgp-onb li.done .lgp-onb-dot { border-color: var(--ba-primary, #6C4DFF); background: var(--ba-primary, #6C4DFF) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.lgp-onb-go { flex: none; padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; background: var(--ba-primary, #6C4DFF); color: #fff !important; text-decoration: none !important; box-shadow: 0 8px 20px -8px rgba(108,77,255,.6); transition: .15s; }
.lgp-onb-go:hover { background: var(--ba-primary-hover, #5A2DFF); }

/* Ícones @edusites/icons (ba-icons.js) — placeholder ocupa espaço antes do SVG carregar, evita pulo de layout */
[data-icone] { display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 0; color: currentColor; }
[data-icone] svg { display: block; }

/* Animação de pulso suave para status ao vivo */
@keyframes ba-pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Header Operacional — Início */
.ba-hello-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 14px; }
.ba-hello h1 { font-size: 26px; font-weight: 800; letter-spacing: -.025em; margin: 0; color: var(--ba-text-primary); line-height: 1.2; }
.ba-hello .date { color: var(--ba-text-tertiary); font-size: 13px; margin-top: 5px; font-weight: 500; }
.ba-hello-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ba-store-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px;
  font-size: 13px; font-weight: 700; cursor: pointer; user-select: none; transition: all .15s ease;
  border: 1px solid transparent !important; text-decoration: none !important;
  appearance: none; -webkit-appearance: none; outline: none; box-shadow: none !important;
}
.ba-store-pill.aberto {
  background: var(--ba-success-bg) !important; color: #15803d !important; border-color: rgba(22, 163, 74, 0.35) !important;
}
.ba-store-pill.aberto .lbl { color: #15803d !important; }
.ba-store-pill.aberto:hover {
  background: rgba(22, 163, 74, 0.16) !important; border-color: #15803d !important;
}
.ba-store-pill.aberto .dot {
  width: 8px; height: 8px; border-radius: 99px; background: #16a34a !important;
  box-shadow: 0 0 0 4px var(--ba-success-bg) !important; animation: ba-pulse 2s infinite;
}
.ba-store-pill.fechado {
  background: var(--ba-danger-bg) !important; color: #b91c1c !important; border-color: rgba(220, 38, 38, 0.35) !important;
}
.ba-store-pill.fechado .lbl { color: #b91c1c !important; }
.ba-store-pill.fechado:hover {
  background: rgba(220, 38, 38, 0.16) !important; border-color: #b91c1c !important;
}
.ba-store-pill.fechado .dot {
  width: 8px; height: 8px; border-radius: 99px; background: #dc2626 !important;
  box-shadow: 0 0 0 4px var(--ba-danger-bg) !important;
}
.ba-store-pill.loading { opacity: 0.7; pointer-events: none; }

.ba-store-view-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 99px;
  font-size: 13px; font-weight: 600; background: var(--ba-bg-surface); border: 1px solid var(--ba-border);
  color: var(--ba-text-secondary); text-decoration: none !important; transition: all .15s ease;
}
.ba-store-view-btn:hover {
  border-color: var(--ba-primary); color: var(--ba-primary); background: var(--ba-primary-active-bg);
}

/* Banner de Onboarding Compacto */
.ba-onb {
  background: linear-gradient(145deg, rgba(108, 77, 255, 0.08), rgba(108, 77, 255, 0.01) 60%), var(--ba-bg-surface);
  border: 1px solid var(--ba-border); border-radius: 16px; padding: 22px 26px; margin-bottom: 24px;
  display: flex; align-items: center; gap: 24px; transition: .2s ease;
}
.ba-onb-ring { position: relative; width: 68px; height: 68px; flex: none; }
.ba-onb-ring svg { transform: rotate(-90deg); display: block; }
.ba-onb-ring .track { stroke: var(--ba-border); }
.ba-onb-ring .fill { stroke: var(--ba-primary); stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.ba-onb-ring .pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: var(--ba-text-primary); font-family: var(--ba-font-sans);
}
.ba-onb-body { flex: 1; min-width: 0; }
.ba-onb-body h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; color: var(--ba-text-primary); }
.ba-onb-body p { margin: 0; color: var(--ba-text-tertiary); font-size: 12.5px; }
.ba-onb-steps { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ba-onb-step {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 5px 11px;
  border-radius: 99px; background: var(--ba-bg-elevated); border: 1px solid var(--ba-border);
  color: var(--ba-text-tertiary); text-decoration: none !important; transition: .15s;
}
.ba-onb-step.done { color: var(--ba-success); background: var(--ba-success-bg); border-color: rgba(34, 197, 94, 0.2); }
.ba-onb-step.pending { color: var(--ba-text-primary); border-color: var(--ba-primary); background: var(--ba-primary-active-bg); font-weight: 600; }
.ba-onb-cta {
  flex: none; background: var(--ba-primary); color: #fff !important; border: 0; border-radius: 10px;
  padding: 10px 18px; font-weight: 700; font-size: 13px; text-decoration: none !important;
  box-shadow: 0 8px 20px -6px rgba(108, 77, 255, 0.55); transition: .15s; white-space: nowrap;
}
.ba-onb-cta:hover { background: var(--ba-primary-hover); transform: translateY(-1px); }

/* Banners Modernos de Plano e Limites */
.ba-plan-alert {
  background: var(--ba-bg-surface); border: 1px solid var(--ba-border); border-left: 4px solid var(--ba-warning);
  border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.ba-plan-alert.danger { border-left-color: var(--ba-danger); }
.ba-plan-alert.info { border-left-color: var(--ba-info); }
.ba-plan-alert-content { flex: 1; min-width: 0; }
.ba-plan-alert-title { font-size: 13.5px; font-weight: 700; color: var(--ba-text-primary); margin-bottom: 3px; }
.ba-plan-alert-desc { font-size: 12.5px; color: var(--ba-text-secondary); line-height: 1.4; }
.ba-plan-alert-bar { width: 100%; max-width: 240px; height: 6px; background: var(--ba-bg-elevated); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.ba-plan-alert-fill { height: 100%; background: var(--ba-primary); border-radius: 99px; }
.ba-plan-alert-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 8px; font-size: 12px; font-weight: 700; background: var(--ba-primary);
  color: #fff !important; text-decoration: none !important; transition: .15s; white-space: nowrap;
}
.ba-plan-alert-btn:hover { background: var(--ba-primary-hover); }

/* Cards de KPI — Início (4 colunas) */
.ba-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 24px 0; }
.ba-kpi { background: var(--ba-bg-surface); border: 1px solid var(--ba-border); border-radius: 12px; padding: 20px 22px; transition: .18s ease; position: relative; overflow: hidden; }
.ba-kpi:hover { border-color: var(--ba-border-hover); transform: translateY(-2px); box-shadow: var(--ba-shadow-box); }
.ba-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ba-kpi-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.ba-kpi-delta { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; display: flex; align-items: center; gap: 3px; }
.ba-kpi-delta.up { color: var(--ba-success); background: var(--ba-success-bg); }
.ba-kpi-delta.down { color: var(--ba-danger); background: var(--ba-danger-bg); }
.ba-kpi-delta.flat { color: var(--ba-text-tertiary); background: var(--ba-bg-elevated); }
.ba-kpi-label { color: var(--ba-text-tertiary); font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.ba-kpi-value { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ba-text-primary); }
.ba-kpi-spark { display: block; width: 100%; height: 28px; margin-top: 12px; }

/* Grade Principal 2 Colunas */
.ba-dash-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: start; margin-bottom: 30px; }

/* Status Summary Pills (Hoje) */
.ba-status-summary-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.ba-status-summary-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 99px; background: var(--ba-bg-elevated); border: 1px solid var(--ba-border);
  color: var(--ba-text-secondary);
}
.ba-status-summary-chip.pendente { color: var(--ba-warning); background: var(--ba-warning-bg); border-color: rgba(245, 158, 11, 0.25); }
.ba-status-summary-chip.preparo { color: var(--ba-info); background: var(--ba-info-bg); border-color: rgba(59, 130, 246, 0.25); }
.ba-status-summary-chip.entrega { color: var(--ba-accent); background: var(--ba-accent-bg); border-color: rgba(255, 122, 61, 0.25); }
.ba-status-summary-chip.concluido { color: var(--ba-success); background: var(--ba-success-bg); border-color: rgba(34, 197, 94, 0.25); }

/* Painel de Pedidos Recentes */
.ba-recent-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ba-border-hover, var(--ba-border));
  text-decoration: none !important; color: inherit; transition: background .12s ease;
}
.ba-recent-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ba-recent-item:first-child { padding-top: 0; }
.ba-recent-item:hover .ba-recent-name { color: var(--ba-primary); }
.ba-recent-dot { width: 8px; height: 8px; border-radius: 99px; flex: none; }
.ba-recent-dot.success { background: var(--ba-success); box-shadow: 0 0 0 3px var(--ba-success-bg); }
.ba-recent-dot.warning { background: var(--ba-warning); box-shadow: 0 0 0 3px var(--ba-warning-bg); }
.ba-recent-dot.info { background: var(--ba-info); box-shadow: 0 0 0 3px var(--ba-info-bg); }
.ba-recent-dot.danger { background: var(--ba-danger); box-shadow: 0 0 0 3px var(--ba-danger-bg); }
.ba-recent-info { flex: 1; min-width: 0; }
.ba-recent-name { font-size: 13px; font-weight: 600; color: var(--ba-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s; }
.ba-recent-meta { font-size: 11.5px; color: var(--ba-text-tertiary); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.ba-recent-val { font-size: 13.5px; font-weight: 700; color: var(--ba-text-primary); font-variant-numeric: tabular-nums; flex: none; }

/* Atalhos da Coluna Direita */
.ba-quick-section { margin-bottom: 20px; }
.ba-quick-section:last-child { margin-bottom: 0; }
.ba-quick-section-title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ba-text-tertiary); margin-bottom: 10px; }
.ba-quick-list { display: flex; flex-direction: column; gap: 8px; }
.ba-quick-btn {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--ba-border); background: var(--ba-bg-surface); text-decoration: none !important;
  color: var(--ba-text-primary) !important; transition: all .15s ease;
}
.ba-quick-btn:hover { border-color: var(--ba-primary); background: var(--ba-primary-active-bg); transform: translateX(2px); }
.ba-quick-icon {
  width: 32px; height: 32px; border-radius: 8px; background: var(--ba-bg-elevated); color: var(--ba-primary);
  display: flex; align-items: center; justify-content: center; flex: none; font-size: 16px;
}
.ba-quick-label { flex: 1; font-size: 13px; font-weight: 600; }
.ba-quick-badge {
  font-size: 11.5px; font-weight: 700; color: var(--ba-text-secondary); background: var(--ba-bg-elevated);
  padding: 3px 8px; border-radius: 99px; font-variant-numeric: tabular-nums;
}
.ba-quick-badge.alert { color: var(--ba-warning); background: var(--ba-warning-bg); }
.ba-quick-badge.active { color: var(--ba-success); background: var(--ba-success-bg); }

/* Painel genérico (título + ação + conteúdo) */
.ba-card { background: var(--ba-bg-surface); border: 1px solid var(--ba-border); border-radius: 12px; padding: 20px 22px; }
.ba-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ba-card-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ba-text-primary); }
.ba-card-head a { font-size: 12px; font-weight: 600; color: var(--ba-primary); text-decoration: none; }
.ba-card-head a:hover { text-decoration: underline; }

/* Grade de acesso rápido legada / retrocompatibilidade */
.ba-qlink-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ba-qlink { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--ba-border); background: var(--ba-bg-surface); text-decoration: none !important; color: var(--ba-text-primary) !important; transition: .15s; }
.ba-qlink:hover { border-color: var(--ba-primary); background: var(--ba-primary-active-bg); }
.ba-qlink-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--ba-bg-elevated); color: var(--ba-primary); display: flex; align-items: center; justify-content: center; flex: none; }
.ba-qlink-label { flex: 1; font-size: 13.5px; font-weight: 600; }
.ba-qlink-count { font-size: 13px; font-weight: 700; color: var(--ba-text-secondary); font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .ba-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .ba-dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ba-kpi-grid, .ba-qlink-grid { grid-template-columns: 1fr; }
  .ba-onb { flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px 20px; }
  .ba-onb-cta { width: 100%; text-align: center; }
  .ba-hello-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ba-hello-actions { width: 100%; display: flex; flex-direction: column; gap: 8px; }
  .ba-store-pill { width: 100%; justify-content: center; padding: 9px 14px; font-size: 12.5px; }
  .ba-store-view-btn { width: 100%; justify-content: center; padding: 9px 14px; font-size: 12.5px; }
}

/* Disponibilidade (dias e turnos) nos formulários de produto e categoria */
.disp-dias { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.disp-dia { margin: 0 !important; cursor: pointer; }
.disp-dia input { position: absolute; opacity: 0; pointer-events: none; }
.disp-dia span { display: inline-block; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--ba-border, rgba(127,127,127,.3)); font-size: 13px; font-weight: 500; user-select: none; }
.disp-dia input:checked + span { background: var(--ba-primary, #6C4DFF); border-color: var(--ba-primary, #6C4DFF); color: #fff; }
.disp-dia input:focus-visible + span { outline: 2px solid var(--ba-primary, #6C4DFF); outline-offset: 2px; }
.disp-turnos { display: grid; gap: 8px; }
.disp-turno { display: flex; align-items: center; gap: 8px; }
.disp-turno input[type=time] { width: 130px; }
.disp-turno input[type=time] { height: 38px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--ba-border, rgba(127,127,127,.3)); background: var(--ba-bg-surface, transparent); color: inherit; color-scheme: light dark; font: inherit; }

/* Faixas de entrega por distância */
.faixa-linha { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; }
.faixa-linha input { width: 110px; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ba-border, rgba(127,127,127,.3)); background: var(--ba-bg-surface, transparent); color: inherit; font: inherit; }

/* ---------- Contratar plano ---------- */
.lgp-planos { margin: 8px 0 32px; }
.lgp-planos-ciclo { display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 20px; background: var(--ba-bg-elevated, rgba(127,127,127,.12)); border: 1px solid var(--ba-border, rgba(127,127,127,.22)); border-radius: 12px; }
.lgp-planos-ciclo button { height: 40px; padding: 0 18px; border: 0; border-radius: 8px; background: transparent; color: var(--ba-text-secondary, inherit); font: 500 13px/1 'Sora', system-ui, sans-serif; cursor: pointer; transition: background-color .2s, color .2s; }
.lgp-planos-ciclo button b { margin-left: 6px; padding: 2px 6px; border-radius: 6px; background: var(--ba-accent-bg, rgba(255,122,61,.14)); color: var(--ba-accent, #ff7a3d); font-size: 11px; font-weight: 600; }
.lgp-planos-ciclo button[aria-pressed="true"] { background: var(--ba-primary, #6c4dff); color: #fff; }
.lgp-planos-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: stretch; max-width: 900px; }
.lgp-plano { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px; background: var(--ba-bg-surface, transparent); border: 1px solid var(--ba-border, rgba(127,127,127,.22)); border-radius: 16px; }
.lgp-plano.is-destaque { border-color: var(--ba-primary, #6c4dff); box-shadow: 0 0 0 1px var(--ba-primary, #6c4dff), 0 18px 40px -20px rgba(108,77,255,.55); }
.lgp-plano-selo { position: absolute; top: -12px; left: 24px; padding: 4px 12px; border-radius: 999px; background: var(--ba-primary, #6c4dff); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.lgp-plano h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.lgp-plano-frase { margin: 0; min-height: 40px; font-size: 13px; line-height: 1.5; color: var(--ba-text-secondary, inherit); text-align: left; }
.lgp-plano-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.lgp-plano-preco[hidden] { display: none; }
.lgp-plano-preco strong { font-size: 38px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lgp-plano-preco span { font-size: 14px; color: var(--ba-text-secondary, inherit); }
.lgp-plano-preco small { flex-basis: 100%; font-size: 12px; color: var(--ba-text-secondary, inherit); }
.lgp-plano-cta { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 10px; border: 1px solid var(--ba-primary, #6c4dff); color: var(--ba-primary, #6c4dff); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .2s, color .2s, transform .5s cubic-bezier(.2,.9,.3,1.2); }
.lgp-plano-cta[hidden] { display: none; }
.lgp-plano-cta:hover { background: var(--ba-primary, #6c4dff); color: #fff; text-decoration: none; }
.lgp-plano-cta:active { transform: scale(.98); }
.lgp-plano.is-destaque .lgp-plano-cta { background: var(--ba-primary, #6c4dff); color: #fff; }
.lgp-plano ul { list-style: none; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid var(--ba-border, rgba(127,127,127,.22)); display: grid; gap: 10px; text-align: left; }
.lgp-plano li { position: relative; padding-left: 26px; font-size: 13px; line-height: 1.5; }
.lgp-plano li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 6px; height: 11px; border: solid var(--ba-success, #22c55e); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.lgp-plano-nota { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--ba-bg-elevated, rgba(127,127,127,.12)); font-size: 12px; line-height: 1.5; color: var(--ba-text-secondary, inherit); text-align: left; }
.lgp-planos-rodape { margin: 22px 0 0; font-size: 13px; color: var(--ba-text-secondary, inherit); max-width: 900px; }
.lgp-planos .lgp-planos-ciclo button:not([aria-pressed="true"]) { background: transparent !important; color: var(--ba-text-secondary, inherit) !important; box-shadow: none !important; }
.lgp-planos .lgp-planos-ciclo button:not([aria-pressed="true"]):hover { background: var(--ba-hover-surface, rgba(127,127,127,.12)); }
.lgp-planos .lgp-planos-ciclo button[aria-pressed="true"] { background: var(--ba-primary, #6c4dff) !important; color: #fff !important; }

/* ==========================================================================
   Variações & Complementos - Design System
   ========================================================================== */
.variacoes {
  margin-top: 10px;
}
.panel-subvariacao .panel-default {
  border: 1px solid var(--ba-border) !important;
  background: var(--ba-bg-surface) !important;
  border-radius: var(--ba-radius-lg) !important;
  box-shadow: var(--ba-shadow-sm) !important;
  overflow: hidden;
  margin-bottom: 16px !important;
}
.panel-subvariacao .panel-heading {
  background: var(--ba-bg-elevated) !important;
  border-bottom: 1px solid var(--ba-border) !important;
  padding: 12px 18px !important;
}
.panel-subvariacao .subvariacao-link {
  color: var(--ba-text-primary) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-decoration: none !important;
}
.panel-subvariacao .menos {
  color: var(--ba-text-secondary) !important;
  font-size: 16px !important;
}
.panel-subvariacao .deletar {
  color: var(--ba-danger) !important;
  font-size: 18px !important;
  cursor: pointer;
  transition: transform .15s;
}
.panel-subvariacao .deletar:hover {
  transform: scale(1.15);
}
.panel-body-subvariacao {
  padding: 18px !important;
  background: var(--ba-bg-surface) !important;
}

/* Grupo de Variação (Cabeçalho com regras) */
.variacoes .variacao {
  overflow: visible !important;
}
.variacoes .variacao > .title {
  background: var(--ba-bg-elevated) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: var(--ba-radius-lg) !important;
  padding: 16px 18px 12px 18px !important;
  margin-bottom: 20px !important;
  text-align: left !important;
  color: var(--ba-text-primary) !important;
  filter: none !important;
}
.variacoes .variacao > .title .row {
  margin-left: -8px;
  margin-right: -8px;
}
.variacoes .variacao > .title .col {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.variacoes label,
.variacoes .variacao .title label,
.variacoes .item .title label,
.variacoes .item .content label {
  position: static !important;
  display: block !important;
  margin: 0 0 6px 0 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--ba-text-secondary) !important;
  text-align: left !important;
}
.variacoes .variacao .title input,
.variacoes .variacao .title select,
.variacoes .item .title input,
.variacoes .item .content input,
.variacoes .item .content select,
.variacoes .item .content textarea {
  padding: 10px 12px !important;
  background-color: var(--ba-input-bg) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: var(--ba-radius-md) !important;
  color: var(--ba-text-primary) !important;
  font-size: 13.5px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
  line-height: 1.4 !important;
}
.variacoes .variacao .title select {
  height: 42px !important;
}
.variacoes .variacao .title small {
  display: block !important;
  margin-top: 6px !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  color: var(--ba-text-tertiary) !important;
  opacity: 1 !important;
}

/* Container dos Itens */
.render-itens {
  background: transparent !important;
  padding: 0 !important;
  margin-left: -8px;
  margin-right: -8px;
}
.render-itens > [class*="col-"] {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Card do Item / Opção */
.variacoes .item {
  background: var(--ba-bg-surface) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: var(--ba-radius-lg) !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
  box-shadow: var(--ba-shadow-sm) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.variacoes .item:hover {
  border-color: var(--ba-border-hover) !important;
}
.variacoes .item .title {
  background: var(--ba-bg-elevated) !important;
  border-bottom: 1px solid var(--ba-border) !important;
  padding: 12px 14px 10px 14px !important;
  text-align: left !important;
  color: var(--ba-text-primary) !important;
  filter: none !important;
}
.variacoes .item .title .row {
  margin: 0 -4px;
  display: flex;
  align-items: flex-end;
}
.variacoes .item .title .col {
  padding: 0 4px;
}
.variacoes .item .remover {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
  border-radius: var(--ba-radius-md) !important;
  background: var(--ba-danger-bg) !important;
  color: var(--ba-danger) !important;
  cursor: pointer;
  border: 1px solid transparent !important;
  transition: background .15s, color .15s, transform .1s;
}
.variacoes .item .remover i {
  font-size: 16px !important;
  color: inherit !important;
  line-height: 1 !important;
}
.variacoes .item .remover:hover {
  background: var(--ba-danger) !important;
  color: #fff !important;
}
.variacoes .item .remover:active {
  transform: scale(.94);
}
.variacoes .item .content {
  padding: 14px 14px 4px 14px !important;
  background: var(--ba-bg-surface) !important;
}
.variacoes .item .content .form-field-default {
  margin-bottom: 12px !important;
}

/* Botões de Ação (+ Adicionar Item, + Adicionar Variação) */
.adicionar-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 280px !important;
  border: 2px dashed var(--ba-border) !important;
  border-radius: var(--ba-radius-lg) !important;
  background: var(--ba-bg-surface) !important;
  color: var(--ba-primary) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  margin-bottom: 16px !important;
  transition: border-color .15s, background .15s, transform .1s;
}
.adicionar-item i {
  font-size: 24px !important;
  color: inherit !important;
}
.adicionar-item:hover {
  border-color: var(--ba-primary) !important;
  background: var(--ba-primary-active-bg) !important;
}
.adicionar-item:active {
  transform: scale(.98);
}
.adicionar-variacao {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  border: 1.5px dashed var(--ba-border) !important;
  border-radius: var(--ba-radius-md) !important;
  background: var(--ba-bg-surface) !important;
  color: var(--ba-primary) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  margin: 10px 0 !important;
  transition: border-color .15s, background .15s;
}
.adicionar-variacao i {
  font-size: 16px !important;
  color: inherit !important;
}
.adicionar-variacao:hover {
  border-color: var(--ba-primary) !important;
  background: var(--ba-primary-active-bg) !important;
}