/*
 * Design system: formulários.
 * Autenticação (login, cadastro, senha, 2FA, modais), configurações
 * (inclui a .settings-sidebar reaproveitada por estúdio/painel/anúncios),
 * envio/edição/importação de vídeo, cards de vídeo, criar/editar post.
 *
 * Carregado antes de studio.css (ordem alfabética): regras com .ds-studio
 * continuam vencendo onde o estúdio quiser algo diferente.
 */

/* ======================================================================
   1. Linguagem de formulário comum
   pp_mat_input vira "rótulo acima do campo" dentro das áreas abaixo.
   ====================================================================== */











/* emojionearea, tag-it e bootstrap-select dentro do campo */


























/* Arquivo (trailer / legenda) */










/* Grupo de radios em cards (privacidade, idade, monetização...) */














/* Botões de ação das áreas de formulário */


/* ======================================================================
   2. Autenticação
   ====================================================================== */



























/* erros / sucesso */










/* "Esqueceu a senha?" */














/* Lembrar dispositivo: checkbox simples */






















/* Termos (cadastro) */










/* Separador e rodapé do card */






/* Login social: botões outline */






.pt-auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  grid-column: 1 / -1;
  margin: var(--space-2) 0;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pt-auth-divider::before,
.pt-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}













/* Modal de login/cadastro */










/* ======================================================================
   3. Navegação lateral (settings-sidebar) — configurações, painel,
   estúdio, comentários, analytics, transações, anúncios
   ====================================================================== */



















/* Layout da página de configurações: barra estreita + painel */
@media (min-width: 1024px) {
  .sett_row_rev {
    display: flex;
    align-items: flex-start;
  }

  .sett_row_rev::before,
  .sett_row_rev::after {
    display: none;
  }

  .sett_row_rev > .col-sm-4 {
    flex: 0 0 248px;
    width: 248px;
  }

  

  /* Páginas que reaproveitam a linha (afiliados, desenvolvedores):
     título ocupa a largura toda, conteúdo quebra para baixo */
  .sett_row_rev:has(> .mat_header) {
    flex-wrap: wrap;
  }

  .sett_row_rev > .mat_header {
    flex: 0 0 100%;
    width: 100%;
    padding: 0 15px !important;
  }

  .sett_row_rev > .content {
    flex: 1 1 100%;
    margin: 0 15px;
  }
}

/* ======================================================================
   4. Painel de configurações
   ====================================================================== */

.user-setting-panel {
  margin-bottom: var(--space-8);
  padding: var(--space-6) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--card) !important;
  box-shadow: none !important;
}

.user-setting-panel.form-horizontal .form-group {
  margin-right: 0;
  margin-left: 0;
}

.user-setting-panel > .row {
  margin-right: calc(var(--space-3) * -1);
  margin-left: calc(var(--space-3) * -1);
}









.user-setting-panel.pt_forms .form-group {
  margin-bottom: var(--space-5);
  padding-right: var(--space-3);
  padding-left: var(--space-3);
}

.user-setting-panel .form-group > label,
.user-setting-panel.pt_forms .form-group label.col-md-12 {
  display: block;
  margin: 0 0 var(--space-2);
  padding: 0;
  color: var(--foreground);
  font-size: var(--text-sm);
  font-weight: 500;
}

.user-setting-panel .form-group > [class*="col-"] {
  padding: 0;
}

.user-setting-panel input[type="text"],
.user-setting-panel input[type="password"],
.user-setting-panel input[type="email"],
.user-setting-panel input[type="number"],
.user-setting-panel input[type="url"],
.user-setting-panel select,
.user-setting-panel.pt_forms .form-group input[type="text"],
.user-setting-panel.pt_forms .form-group input[type="password"],
.user-setting-panel.pt_forms .form-group input[type="email"],
.user-setting-panel.pt_forms .form-group input[type="number"],
.user-setting-panel.pt_forms .form-group select {
  height: 40px !important;
  padding: 0 var(--space-3);
  border: 1px solid var(--input) !important;
  border-radius: var(--radius-md) !important;
  background-color: transparent !important;
  color: var(--foreground) !important;
  font-size: var(--text-base) !important;
  box-shadow: var(--shadow-xs) !important;
}

.user-setting-panel select,
.user-setting-panel.pt_forms .form-group select {
  padding-inline-end: var(--space-8);
}

.user-setting-panel textarea,
.user-setting-panel.pt_forms .form-group textarea {
  height: auto !important;
  min-height: 96px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--input) !important;
  border-radius: var(--radius-md) !important;
  color: var(--foreground) !important;
  font-size: var(--text-base) !important;
  box-shadow: var(--shadow-xs) !important;
  resize: vertical;
}

.user-setting-panel input:focus,
.user-setting-panel select:focus,
.user-setting-panel textarea:focus {
  border-color: var(--ring) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent) !important;
}

.user-setting-panel input[readonly],
.user-setting-panel input[disabled] {
  background-color: var(--muted) !important;
  color: var(--muted-foreground) !important;
}

.user-setting-panel .help-block,
.user-setting-panel.pt_forms .form-group .help-block {
  margin: var(--space-2) 0 0;
  color: var(--muted-foreground) !important;
  font-size: var(--text-xs);
  opacity: 1;
}

.user-setting-panel small{
  display: block;
  margin-top: var(--space-1);
  color: var(--warning);
  font-size: var(--text-xs);
}

.user-setting-panel hr {
  width: auto;
  margin: var(--space-2) var(--space-3) var(--space-6);
  border-color: var(--border);
}

.user-setting-panel > br,
.pt_forms_large_btns .user-setting-panel > br {
  display: none;
}

/* Barra de salvar: alinhada ao fim, separada por borda */


.user-setting-panel > .row > hr:last-child{
  display: none;
}

.user-setting-panel .setting-panel-mdbtn,
.pt_forms_large_btns .user-setting-panel .setting-panel-mdbtn {
  height: auto !important;
  min-height: 36px;
  margin: 0 !important;
  padding: 0 var(--space-4) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-base) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.user-setting-panel .setting-panel-mdbtn svg {
  display: none;
}


[class^="setting-"][class$="-alert"]:empty {
  display: none;
}

.user-setting-panel [class*="-alert"] .alert {
  margin-bottom: var(--space-5);
}

/* Switches e linhas de privacidade */


/* Avatar e capa */








/* Lista de sessões / bloqueados */


@media (max-width: 767px) {
  .user-setting-panel {
    padding: var(--space-5) var(--space-4) !important;
  }

  

  
}

/* ======================================================================
   5. Envio de vídeo (wizard)
   ====================================================================== */



/* Stepper */














/* Dropzone */














/* Barra de progresso */
























/* Etapa 2: prévia e miniaturas */














































/* Etapa 3: tipo de envio */






















/* Navegação entre etapas */




@media (max-width: 767px) {
  

  

  

  /* Só o rótulo da etapa atual (as classes step-*-active se acumulam) */
  

  

  

  

  

  

  

  

  
}

/* ======================================================================
   6. Editar vídeo / Importar vídeo / Cards de vídeo / Post
   ====================================================================== */

.content.pt_forms_large_btns{
  padding: var(--space-6) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--card) !important;
  box-shadow: none !important;
}

.content.pt_forms_large_btns::after{
  content: "";
  display: table;
  clear: both;
}

.upload-head .edit-video-title,
.edit-video-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--foreground);
  font-size: var(--text-2xl) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight) !important;
}

.edit-video-title svg {
  width: 20px;
  height: 20px;
  color: var(--muted-foreground);
}

.upload-head hr {
  margin: var(--space-4) 0 var(--space-6);
  border-color: var(--border) !important;
}

.pt_edt_vdo_form {
  margin-top: 0;
}

#video-success:empty,
.content.pt_forms_large_btns > .errors:empty {
  display: none;
}

/* Rodapé de ações do editar vídeo */

.pt_edt_vdo_form > div:has(> .setting-panel-mdbtn) {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin: var(--space-6) 0 0 !important;
  padding: var(--space-4) 0 0 !important;
  border-top: 1px solid var(--border);
  background: transparent !important;
  text-align: end;
}

.pt_forms_large_btns .pt_forms .setting-panel-mdbtn {
  margin: 0 !important;
}

.pt_forms_large_btns .pt_forms .setting-panel-mdbtn.btn-danger {
  border: 1px solid color-mix(in oklch, var(--destructive) 40%, transparent) !important;
  background: transparent !important;
  color: var(--destructive) !important;
}

.pt_forms_large_btns .pt_forms .setting-panel-mdbtn.btn-danger:hover {
  background: color-mix(in oklch, var(--destructive) 10%, transparent) !important;
}

/* Prévia lateral (thumbnail atual) */
.thumbnail-preview img,
.pt_forms_large_btns .col-md-4 img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Importar vídeo */


































@media (max-width: 767px) {
  .content.pt_forms_large_btns{
    padding: var(--space-5) var(--space-4) !important;
  }

  

  

  

  .content.pt_forms_large_btns > [class*="col-"] {
    padding: 0;
  }

  
  .pt_edt_vdo_form > div:has(> .setting-panel-mdbtn) .btn {
    flex: 1;
  }
}

/* ======================================================================
   7. Avatar e capa (configurações)
   ====================================================================== */





















/* Separadores: espaço em vez de linhas duplicadas */
.user-setting-panel hr {
  display: none;
}



/* bootstrap-select fora do pp_mat_input (perfil, monetização...) */
body .user-setting-panel .bootstrap-select > .dropdown-toggle {
  height: 40px !important;
  padding: 0 var(--space-3) !important;
  border: 1px solid var(--input) !important;
  border-radius: var(--radius-md) !important;
  background: transparent !important;
  color: var(--foreground) !important;
  font-size: var(--text-base) !important;
  font-weight: 400 !important;
  box-shadow: var(--shadow-xs) !important;
}

body .user-setting-panel .bootstrap-select > .dropdown-toggle.bs-placeholder {
  color: var(--muted-foreground) !important;
}

/* Campo inválido marcado pelo JS do envio */


/* Ajustes do wizard */
















.pt_forms_large_btns .pt_forms .setting-panel-mdbtn.btn-delete {
  border: 1px solid color-mix(in oklch, var(--destructive) 40%, transparent) !important;
  background: transparent !important;
  color: var(--destructive) !important;
}

.pt_forms_large_btns .pt_forms .setting-panel-mdbtn.btn-delete:hover {
  background: color-mix(in oklch, var(--destructive) 10%, transparent) !important;
}

.pt_edt_vdo_form .pp_mat_input > .bootstrap-select,
.pt_edt_vdo_form .pp_mat_input > label + .bootstrap-select {
  margin-top: 0 !important;
}



/* Criar / editar publicação */


















/* Ícones em alertas gerados por JS */



td .action.pointer svg {
  width: 16px;
  height: 16px;
  color: var(--muted-foreground);
}

td .action.pointer:hover svg {
  color: var(--destructive);
}

/* Vencer cores do night-mode legado */














/* Ícones da página de afiliados: neutros em vez de 4 cores fixas */


/* Mensagem de erro de campo (2FA) */
.ds-field-error {
  margin-top: var(--space-2);
  color: var(--destructive);
  font-size: var(--text-sm);
}

.ds-field-error:empty {
  display: none;
}

/* Banners de Pontos e Monetização: cartão neutro (antes amarelo e verde fixos) */