.elementor-1864 .elementor-element.elementor-element-e31110e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:0;}.elementor-1864 .elementor-element.elementor-element-d4ff3fb{margin:-11px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-1864 .elementor-element.elementor-element-094f030{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-62px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1864 .elementor-element.elementor-element-3e3067a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-1864 .elementor-element.elementor-element-094f030{--width:100%;}}@media(max-width:767px){.elementor-1864 .elementor-element.elementor-element-d4ff3fb{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-1864 .elementor-element.elementor-element-094f030{--width:1600px;--margin-top:25px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1864 .elementor-element.elementor-element-3e3067a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}}/* Start custom CSS for shortcode, class: .elementor-element-3e3067a *//* =========================
🔥 PLAYRAS CLEAN UI (FINAL)
========================= */

/* ===== BASE ===== */
body {
  background: #26272f;
}

/* ROOT */
#studio-ia-playras-root {
  width: 100%;
  padding: 10px;
}

/* CARDS */
.sip-card {
  background: #1f2027;
  border: 1px solid #353641;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.6);
}


/* hover */
.sip-btn:hover,
.sip-download:hover,
#abrir-locutores:hover,
#sip-generate-gpt:hover,
.sip-generate:hover,
#sip-share-whatsapp:hover {
  background: #13141a;
  border-color: #ffd770;
  transform: translateY(-1px);
}


/* ===== INPUTS ===== */
input, textarea, select {
  background: #17181f;
  border: 1px solid #333543;
  color: #fff;
  border-radius: 8px;
  padding: 10px;
}

/* ===== HEADER ===== */
.sip-logo-text {
  font-size: 18px;
  text-align: center;
  color: #ffd700;
}

.sip-subtitle {
  font-size: 12px;
  text-align: center;
  opacity: 0.7;
}

/* =========================
📱 MOBILE (APP STYLE)
========================= */
@media (max-width: 768px){

  /* remove laterais */
  .elementor-container,
  .elementor-section {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body {
    margin: 0;
  }

  /* cards ocupam tudo */
  .sip-card {
    padding: 14px;
  }

  /* botão principal */
  .sip-generate {
    font-size: 15px;
    padding: 12px;
  }

  /* botões menores */
  .sip-download {
    font-size: 12px;
    padding: 8px;
  }

  /* texto menor */
  p {
    font-size: 13px;
  }

}
/* =========================
🔥 AJUSTE FINAL APP MOBILE PRO
========================= */

@media (max-width: 768px){

  /* 🔥 EXPANDIR TELA (SEM BORDA LATERAL) */
  .elementor-container,
  .elementor-section {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  #studio-ia-playras-root {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* 🔥 CARDS MAIS CONFORTÁVEIS */
  .sip-card {
    padding: 18px !important;
    margin-bottom: 16px !important;
  }

  /* 🔥 BOTÃO PRINCIPAL MAIS BONITO */
  .sip-generate {
    border-radius: 14px !important;
    font-size: 16px !important;
    padding: 14px !important;
  }

  /* 🔥 BOTÕES DE DOWNLOAD VOLTAM */
  .sip-download {
    display: inline-flex !important;
    width: 48% !important;
    margin: 4px 1% !important;
    justify-content: center;
  }

  /* 🔥 CONTAINER DOS DOWNLOADS */
  .sip-actions-bottom {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between;
  }

  /* 🔥 REMOVE QUALQUER ROXO (FORÇA PADRÃO OURO) */
  .sip-mode button,
  .sip-voice-mode button,
  .sip-mode-group button {
    background: #1f2027 !important;
    border: 1px solid #c89b2b !important;
    color: #fff !important;
  }

  .sip-mode button.active,
  .sip-mode button.is-active,
  .sip-mode button.selected {
    background: linear-gradient(135deg, #ffcc4d, #ff9830) !important;
    color: #2b2420 !important;
  }

  /* 🔥 SELECT (CANAIS) PADRÃO */
  select {
    background: #17181f !important;
    border: 1px solid #c89b2b !important;
    color: #fff !important;
  }

}
/* =========================
🔥 GRID CORREÇÃO CARDS TOPO
========================= */

/* CONTAINER DOS CARDS */
.sip-grid-top,
.playras-grid,
.studio-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  align-items: stretch;
}

/* CARDS */
.sip-card {
  width: 100% !important;
  margin: 0 !important;
}

/* REMOVE QUALQUER LARGURA QUEBRADA */
.sip-card,
.elementor-column {
  max-width: 100% !important;
}

/* =========================
📱 MOBILE
========================= */

@media (max-width: 768px){

  .sip-grid-top,
  .playras-grid,
  .studio-grid {
    grid-template-columns: 1fr !important;
  }

}
/* Faz a grade usar 1 coluna sempre, ocupando toda a largura */
#studio-ia-playras-root .sip-grid {
  display: block !important;
}

/* Cada card vira um bloco 100% */
#studio-ia-playras-root .sip-card,
#studio-ia-playras-root .sip-card-full {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 20px 0 !important;
  float: none !important;
}
/* Dá respiro lateral igual dentro do card-root */
#studio-ia-playras-root.sip-root {
  padding-left: 18px !important;
  padding-right: 18px !important;
}
/* --- Destaque para o botão "GERAR ÁUDIO" --- */
.sip-generate {
    padding: 14px 35px !important; /* Maior */
    font-size: 1.1rem !important; /* Fonte maior */
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    border-width: 2px !important; /* Borda mais grossa */
    border-color: var(--color-primary-gold-light) !important; /* Borda mais clara */
    background-color: var(--color-dark-bg) !important; /* Fundo mais escuro */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8) !important; /* Sombra mais forte */
}
/* --- Centralizar e alargar "Locutores Comerciais - PRO" --- */
.sip-presets { /* Container do botão Locutores */
    text-align: center !important; /* Centraliza o conteúdo */
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}
#abrir-locutores {
    width: 90% !important; /* Mais largo */
    max-width: 400px !important; /* Limite para não ficar gigante em telas grandes */
    margin: 0 auto !important; /* Garante centralização se o width for menor que o container */
    padding: 14px 20px !important; /* Ajusta padding para o novo tamanho */
    font-size: 1rem !important;
}
/* --- Centralizar botão "Gerar Roteiro com IA" (do popup GPT) --- */
/* Assumindo que ele está dentro de um container que pode ser centralizado */
.sip-gpt-button-container { /* Exemplo de classe para o container, ajuste se for diferente */
    text-align: center !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}
/* ===== BOTÕES PRINCIPAIS (MESMO TAMANHO E PADRÃO) ===== */
/* Locutores PRO + Gerar Roteiro com IA + Gerar Áudio */

#abrir-locutores,
#sip-generate-gpt,
.sip-generate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    /* TAMANHO PADRÃO ÚNICO */
    min-width: 280px;       /* largura igual pros 3 */
    padding: 10px 28px;     /* altura/“gordura” igual */

    border-radius: 10px;
    border: 1px solid #c89b2b;
    background: #1f2027;
    color: #ffffff;

    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;

    box-shadow: 0 6px 10px rgba(0,0,0,0.6);
    transition: all 0.2s ease-out;

    /* CENTRALIZADOS */
    margin: 18px auto;
}
/* =========================
📱 FIX BOTÕES DOWNLOAD (REAL)
========================= */

@media (max-width: 768px){

  /* PEGA OS BOTÕES DENTRO DO MODAL */
  #gpt-playras-modal button {

    width: 48% !important;
    display: inline-flex !important;
    justify-content: center !important;
    margin: 5px 1% !important;
    font-size: 13px !important;
    padding: 10px !important;

  }

  /* ORGANIZA EM LINHA */
  #gpt-playras-modal .gpt-playras-modal-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  /* WHATSAPP FULL */
  #gpt-playras-modal button:last-child {
    width: 100% !important;
  }
/* =========================
📱 FIX REAL BOTÕES DOWNLOAD
========================= */

@media (max-width: 768px){

  /* CONTAINER */
  .sip-download-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px;
  }

  /* BOTÕES */
  .sip-download {
    width: 45% !important; /* menor pra caber */
    font-size: 12px !important;
    padding: 8px 6px !important;
    border-radius: 10px !important;
    text-align: center;
  }

  /* TEXTO INTERNO */
  .sip-download span,
  .sip-download i {
    font-size: 12px !important;
  }

  /* WHATSAPP */
  #sip-share-whatsapp {
    width: 100% !important;
    margin-top: 10px;
  }

}
	#sip-generate {
  background: linear-gradient(135deg, #d4af37, #ffb347) !important;
  color: #2b2420 !important;
  border: none !important;
  font-weight: bold;
  box-shadow: 0 0 15px rgba(212,175,55,0.4);
}

/* HOVER */
#sip-generate:hover {
  transform: scale(1.02);
  box-shadow: 0 0 25px rgba(212,175,55,0.6);
}
	#sip-generate-gpt {
  background: linear-gradient(135deg, #d4af37, #ffb347) !important;
  color: #2b2420 !important;
  border: none !important;
  font-weight: bold;
}
	#abrir-locutores {
  border: 1px solid #d4af37 !important;
  color: #d4af37 !important;
  position: relative;
}

/* TAG PRO */
#abrir-locutores::after {
  content: "PRO";
  position: absolute;
  top: -8px;
  right: -8px;
  background: #d4af37;
  color: #000;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: bold;
}
	#abrir-locutores::after {
  content: "PRO";
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, #c89b2b, #e0b84a);
  color: #1a1a1a;
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 6px;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
	/* =========================
🔥 BOTÕES PRINCIPAIS (OURO PADRÃO)
========================= */

#sip-generate,
#sip-generate-gpt,
#abrir-locutores {
  background: linear-gradient(135deg, #b8962e, #d4af37) !important;
  color: #1a1a1a !important;
  border: none !important;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(212,175,55,0.25);
}

/* HOVER */
#sip-generate:hover,
#sip-generate-gpt:hover,
#abrir-locutores:hover {
  background: linear-gradient(135deg, #caa93a, #e0b84a) !important;
}

/* CLICK (PRESSIONADO) */
#sip-generate:active,
#sip-generate-gpt:active,
#abrir-locutores:active {
  background: #2a2a2a !important;
  color: #fff !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
}
	/* =========================
🔥 PADRÃO OURO - AVANÇADO COMPLETO
========================= */

/* BOTÃO MOSTRAR / OCULTAR */
#sip-toggle-advanced {
  border: 1px solid #b8962e !important;
  color: #b8962e !important;
  background: rgba(184,150,46,0.08) !important;
  border-radius: 10px;
  font-weight: 600;
}

/* HOVER */
#sip-toggle-advanced:hover {
  background: rgba(184,150,46,0.2) !important;
}

/* ATIVO */
#sip-toggle-advanced.active,
#sip-toggle-advanced:active {
  background: #2a2a2a !important;
  color: #fff !important;
}


/* =========================
🔥 BOTÕES INTERNOS (MODO, ETC)
========================= */

.sip-advanced-tools button,
.sip-mode button,
.sip-chip {
  border: 1px solid #b8962e !important;
  color: #b8962e !important;
  background: rgba(184,150,46,0.08) !important;
  border-radius: 8px;
}

/* HOVER */
.sip-advanced-tools button:hover,
.sip-mode button:hover,
.sip-chip:hover {
  background: rgba(184,150,46,0.2) !important;
}

/* ATIVO (SELECIONADO) */
.sip-advanced-tools button.active,
.sip-mode button.active,
.sip-chip.active {
  background: #2a2a2a !important;
  color: #fff !important;
  border-color: #444 !important;
}


/* =========================
🔥 SELECT (CANAIS)
========================= */

.sip-select {
  border: 1px solid #b8962e !important;
  background: #1a1a1a !important;
  color: #fff !important;
}


/* =========================
🔥 SLIDERS (REMOVE ROXO)
========================= */

input[type="range"] {
  accent-color: #b8962e !important;
}


/* =========================
🔥 TEXTO (PADRÃO)
========================= */

.sip-advanced-tools label {
  color: #ddd !important;
}
/* =========================
🔥 BOTÃO AVANÇADO + SELO PRO
========================= */

#sip-toggle-advanced {

  display: block !important;
  margin: 12px auto !important;

  padding: 10px 20px !important;
  font-size: 14px !important;

  border-radius: 12px;
  font-weight: 600;

  background: linear-gradient(135deg, #b8962e, #d4af37) !important;
  color: #1a1a1a !important;
  border: none !important;

  width: fit-content;
  position: relative;

  box-shadow: 0 4px 12px rgba(212,175,55,0.25);
}

/* SELO PRO */
#sip-toggle-advanced::after {
  content: "PRO";
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, #c89b2b, #e0b84a);
  color: #000;
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 6px;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* HOVER */
#sip-toggle-advanced:hover {
  background: linear-gradient(135deg, #caa93a, #e0b84a) !important;
}

/* CLICK */
#sip-toggle-advanced:active,
#sip-toggle-advanced.active {
  background: #2a2a2a !important;
  color: #fff !important;
}/* End custom CSS */