/* Ajustes compartilhados: meta mobile, camadas do status, cupons e hover. */
:root {
 --seller-hover-accent: oklch(0.54 0.22 294);
 --seller-goal-ink: oklch(0.25 0.02 280);
 --seller-goal-muted: oklch(0.56 0.02 280);
 --seller-goal-surface: oklch(1 0 0);
 --seller-goal-soft: oklch(0.96 0.02 294);
 --seller-goal-border: oklch(0.9 0.02 294);
 --seller-goal-backdrop: oklch(0.2 0.03 280 / 35%);
 --seller-card-border: oklch(0.92 0.005 260);
 --seller-input-focus-border: oklch(0.6 0.015 260);
}
html body[data-app-variant="seller"] #main .seller-overview-status-badge {
 position: relative !important; inset: auto !important; z-index: auto !important;
}
@layer seller-interaction-fixes {

/* O valor permanece neutro, inclusive sob regras globais de hover e foco. */

html body[data-app-variant="seller"] dialog.seller-goal-dialog .seller-goal-input-wrap:focus-within {
}

@media all {
 html body[data-app-variant="seller"] #main .seller-workspace > section.seller-goal-card {
  background:var(--seller-goal-surface) !important;
  border:1px solid var(--seller-card-border) !important;
 }
}
}
@media all {
 /* Proteção imediata durante navegação e reconstruções em tempo real. */
 html body[data-app-variant="seller"] #main .seller-workspace:not(:has(> .seller-overview-head)) > .seller-goal-card {
  display:none !important;
 }
 html body[data-app-variant="seller"] #main .seller-workspace > .seller-goal-card {
  display:flex !important; flex-direction:column !important; position:relative !important;
  width:100% !important; min-width:0 !important; max-width:100% !important;
  margin:8px 0 20px !important; padding:16px !important; gap:9px !important;
  order:0 !important; transform:none !important; color:var(--seller-goal-ink) !important;
  background:var(--seller-goal-surface) !important; border:1px solid var(--seller-card-border) !important;
  border-radius:8px !important; box-sizing:border-box !important;
  box-shadow:none !important;
 }
 html body[data-app-variant="seller"] .seller-goal-card-head { display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:center !important; gap:12px !important; }
 html body[data-app-variant="seller"] .seller-goal-label { font-size:14px !important; font-weight:600 !important; }
 html body[data-app-variant="seller"] .seller-goal-edit { display:grid !important; place-items:center !important; width:40px !important; height:40px !important; padding:9px !important; color:var(--seller-hover-accent) !important; background:var(--seller-goal-soft) !important; border:0 !important; border-radius:8px !important; cursor:pointer; }
 html body[data-app-variant="seller"] .seller-goal-edit svg { display:block !important; width:22px !important; height:22px !important; }
 html body[data-app-variant="seller"] .seller-goal-edit img.seller-goal-edit-icon { display:block !important; width:22px !important; height:22px !important; max-width:22px !important; object-fit:contain !important; pointer-events:none !important; }
 html body[data-app-variant="seller"] .seller-goal-values { display:flex !important; align-items:baseline !important; gap:6px !important; flex-wrap:wrap !important; }
 html body[data-app-variant="seller"] .seller-goal-values strong { font-size:20px !important; color:var(--seller-goal-ink) !important; }
 html body[data-app-variant="seller"] .seller-goal-values span,.seller-goal-since { font-size:12px !important; color:var(--seller-goal-muted) !important; }
 html body[data-app-variant="seller"] .seller-goal-track { display:block !important; width:100% !important; height:6px !important; border-radius:8px !important; overflow:hidden !important; background:var(--seller-goal-soft) !important; }
 html body[data-app-variant="seller"] .seller-goal-track > span { display:block !important; height:100% !important; background:var(--seller-hover-accent) !important; }
 html body[data-app-variant="seller"] .seller-goal-foot { display:grid !important; grid-template-columns:auto minmax(0,1fr) !important; gap:8px !important; font-size:12px !important; color:var(--seller-goal-muted) !important; }
 html body[data-app-variant="seller"] .seller-goal-foot span:first-child { color:var(--seller-hover-accent) !important; }
 html body[data-app-variant="seller"] .seller-goal-dialog { width:calc(100% - 32px) !important; max-width:430px !important; max-height:calc(100dvh - 32px) !important; margin:auto !important; padding:0 !important; border:1px solid var(--seller-goal-border) !important; border-radius:8px !important; background:var(--seller-goal-surface) !important; color:var(--seller-goal-ink) !important; overflow:auto !important; }
 .seller-goal-dialog::backdrop { background:var(--seller-goal-backdrop); }
 html body[data-app-variant="seller"] .seller-goal-form { display:flex !important; flex-direction:column !important; gap:12px !important; padding:20px !important; font-family:Outfit,sans-serif !important; }
 .seller-goal-dialog-head { display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; gap:12px !important; align-items:start !important; }
 html body[data-app-variant="seller"] .seller-goal-dialog h2 { margin:0 !important; font-size:20px !important; line-height:1.25 !important; }
 .seller-goal-dialog-eyebrow { font-size:11px !important; color:var(--seller-hover-accent) !important; }
 .seller-goal-dialog p,.seller-goal-dialog-note { margin:0 !important; font-size:13px !important; line-height:1.5 !important; color:var(--seller-goal-muted) !important; }
 .seller-goal-input-wrap { display:flex !important; gap:8px !important; align-items:center !important; padding:12px !important; border:1px solid var(--seller-goal-border) !important; border-radius:8px !important; }
 html body[data-app-variant="seller"] .seller-goal-input-wrap input { width:100% !important; min-width:0 !important; padding:0 !important; border:0 !important; font-size:18px !important; background:transparent !important; color:var(--seller-goal-ink) !important; }
 .seller-goal-dialog-actions { display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; }
 html body[data-app-variant="seller"] .seller-goal-dialog-actions button { min-height:44px !important; border-radius:8px !important; border:1px solid var(--seller-goal-border) !important; font:600 14px Outfit,sans-serif !important; }
 html body[data-app-variant="seller"] .seller-goal-cancel,.seller-goal-dialog-close { background:var(--seller-goal-soft) !important; color:var(--seller-hover-accent) !important; }
 html body[data-app-variant="seller"] .seller-goal-save { background:var(--seller-hover-accent) !important; color:var(--seller-goal-surface) !important; }
 html body[data-app-variant="seller"] .seller-goal-dialog-close { width:40px !important; height:40px !important; border:0 !important; border-radius:8px !important; font-size:24px !important; }
}

/* Alteração de senha começa recolhida e só abre por ação explícita do lojista. */
html body[data-app-variant="seller"] .seller-password-disclosure {
  width: 100%;
}
html body[data-app-variant="seller"] .seller-password-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #25272b);
}
html body[data-app-variant="seller"] .seller-password-disclosure > summary::-webkit-details-marker {
  display: none;
}
html body[data-app-variant="seller"] .seller-password-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1edff;
  color: #7a3df0;
  font-size: 20px;
  line-height: 1;
  transition: transform .18s ease;
}
html body[data-app-variant="seller"] .seller-password-disclosure[open] .seller-password-chevron {
  transform: rotate(180deg);
}
html body[data-app-variant="seller"] .seller-password-content {
  padding-top: 14px;
}

/* O título recolhível acompanha o peso visual dos títulos Dados e Conta. */
html body[data-app-variant="seller"] .seller-password-disclosure > summary {
  font-weight: 800;
}

/* O texto está dentro do summary; aplicar o peso diretamente no span evita herança sobrescrita. */
html body[data-app-variant="seller"] .seller-password-disclosure > summary > span:first-child {
  font-family: Outfit, sans-serif !important;
  font-weight: 700 !important;
  color: var(--ink, #25272b) !important;
}

/* Botão de expansão no estilo de duas linhas, adaptado ao painel de senha. */
html body[data-app-variant="seller"] .seller-password-disclosure > summary .seller-password-toggle.container {
  display: block;
  position: relative;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 8px;
  background: rgba(216, 216, 216, 0.42);
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}
html body[data-app-variant="seller"] .seller-password-disclosure > summary .seller-password-toggle.container:hover {
  background: rgba(197, 197, 197, 0.55);
}
html body[data-app-variant="seller"] .seller-password-toggle.container input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
html body[data-app-variant="seller"] .seller-password-toggle.container .line {
  position: absolute;
  top: 50%;
  left: 4px;
  width: calc(100% - 8px);
  height: 3px;
  border-radius: 3px;
  background: #7a3df0;
  transform: translateY(-50%);
  transition: transform .35s cubic-bezier(0, 1, .33, 1.2), background .25s;
}
html body[data-app-variant="seller"] .seller-password-toggle.container .line-indicator {
  transform: translateY(-50%) rotate(90deg);
}
html body[data-app-variant="seller"] .seller-password-disclosure[open] .seller-password-toggle.container .line-indicator {
  transform: translateY(-50%);
}

/* Controle compacto: o próprio botão alterna o painel. */
html body[data-app-variant="seller"] .seller-password-disclosure > summary .seller-password-toggle.container {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
html body[data-app-variant="seller"] .seller-password-toggle.container .line {
  left: 3px;
  width: calc(100% - 6px);
  height: 2px;
}
