/* ==========================================================================
   GhostSpy Theme - High-End Red & Clean White
   Strictly Scoped to Offer Components (Home, CTA, Quiz, Upsells, Back-Redirect)
   DO NOT affect Instagram clone flows (/feed, /direct, /chat, login loading)
   ========================================================================== */

/* 1. HOME OFFER SCOPE */
.ghost-home-scope {
  background-color: #F8FAFC !important;
  background: radial-gradient(circle at 50% 0%, rgba(14, 130, 248, 0.05) 0%, transparent 600px), #F8FAFC !important;
  color: #0F172A !important;
}

.ghost-home-scope .glass-card {
  background: #FFFFFF !important;
  border: 1.5px solid #60A5FA !important;
  box-shadow: 0 20px 45px -12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  color: #0F172A !important;
}

/* High contrast typography in Home */
.ghost-home-scope h1,
.ghost-home-scope .text-gray-100 {
  color: #0F172A !important;
  letter-spacing: -0.02em !important;
}

.ghost-home-scope h2,
.ghost-home-scope .text-gray-400,
.ghost-home-scope p {
  color: #475569 !important;
}

.ghost-home-scope .gradient-text {
  background: linear-gradient(135deg, #0E82F8 0%, #0D54A3 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.ghost-home-scope .typing-cursor {
  color: #0E82F8 !important;
}

/* Trust badges & small text */
.ghost-home-scope svg[style*="color: #6B59D8"],
.ghost-home-scope svg[style*="color: rgb(107, 89, 216)"],
.ghost-home-scope svg[style*="color: #0E82F8"] {
  color: #0E82F8 !important;
}

.ghost-home-scope span[style*="color: #f5f5f5"],
.ghost-home-scope span[style*="color: rgb(245, 245, 245)"],
.ghost-home-scope span[style*="color: #475569"] {
  color: #475569 !important;
}

/* Input & Search */
.ghost-home-scope .input-dark {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1.5px solid #CBD5E1 !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04) !important;
}

.ghost-home-scope .input-dark:focus {
  border-color: #0E82F8 !important;
  box-shadow: 0 0 0 3px rgba(14, 130, 248, 0.15) !important;
  outline: none !important;
}

.ghost-home-scope .input-dark::placeholder {
  color: #94A3B8 !important;
}

.ghost-home-scope .text-\[\#4a37b6\],
.ghost-home-scope .text-\[\#0E82F8\] {
  color: #0E82F8 !important;
}

.ghost-home-scope #usernameInput~button,
.ghost-home-scope .btn-primary {
  background: linear-gradient(135deg, #0E82F8 0%, #0D54A3 100%) !important;
  border-color: #0E82F8 !important;
  box-shadow: 0 10px 24px -4px rgba(14, 130, 248, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}

.ghost-home-scope #usernameInput~button *,
.ghost-home-scope .btn-primary * {
  color: #FFFFFF !important;
}

/* Modal de confirmação de perfil */
.ghost-home-scope .modal-overlay,
.modal-overlay {
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(8px) !important;
}

.ghost-home-scope .modal-overlay>div:not(canvas),
.modal-overlay>div:not(canvas) {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.2) !important;
  color: #0F172A !important;
}

.ghost-home-scope .modal-overlay h3 {
  background: linear-gradient(135deg, #0E82F8 0%, #0D54A3 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.ghost-home-scope .modal-overlay .text-gray-300 {
  color: #475569 !important;
}

.ghost-home-scope .modal-overlay .text-white {
  color: #0F172A !important;
}

.ghost-home-scope .modal-overlay .text-gray-400 {
  color: #64748B !important;
}

.ghost-home-scope .modal-overlay .text-gray-100 {
  color: #334155 !important;
}

/* 2. CTA PAGE SCOPE */
.cta-page {
  background-color: #F8FAFC !important;
  background: radial-gradient(circle at 50% 0%, rgba(14, 130, 248, 0.05) 0%, transparent 600px), #F8FAFC !important;
  color: #0F172A !important;
}

.cta-page .cta-timer-bar {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
}

.cta-page .cta-timer-bar p {
  color: #0F172A !important;
}

.cta-page .cta-timer-button {
  background: linear-gradient(135deg, #0E82F8 0%, #0D54A3 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(14, 130, 248, 0.35) !important;
}

.cta-page .cta-timer-button * {
  color: #FFFFFF !important;
}

.cta-page .cta-main-title {
  color: #0F172A !important;
}

.cta-page .cta-gradient {
  background: linear-gradient(135deg, #0E82F8 0%, #0D54A3 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.cta-page .cta-profile-card {
  background: #FFFFFF !important;
  border: 2px solid #0E82F8 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05), 0 0 0 3px rgba(14, 130, 248, 0.10) !important;
  color: #0F172A !important;
}

.cta-page .cta-profile-card-name,
.cta-page .cta-profile-card-stat-number {
  color: #0F172A !important;
}

.cta-page .cta-profile-card-stat-label {
  color: #64748B !important;
}

.cta-page .cta-profile-card-bio {
  color: #475569 !important;
}

.cta-page .cta-profile-card-badge {
  background: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
}

.cta-page .cta-badge-text,
.cta-page .cta-badge-title,
.cta-page .cta-badge-line-1,
.cta-page .cta-badge-line-2 {
  color: #0D54A3 !important;
}

.cta-page .cta-features-section {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06) !important;
}

.cta-page .cta-feature-item {
  border-bottom: 1px solid #E2E8F0 !important;
}

.cta-page .cta-feature-title {
  color: #0F172A !important;
}

.cta-page .cta-feature-desc {
  color: #475569 !important;
}

.cta-page .cta-feature-icon {
  color: #0E82F8 !important;
  stroke: #0E82F8 !important;
}

.cta-page .cta-chat-preview {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

.cta-page .cta-chat-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

.cta-page .cta-chat-name {
  color: #0F172A !important;
}

.cta-page .cta-chat-status {
  color: #64748B !important;
}

.cta-page .cta-message-bubble {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #E2E8F0 !important;
}

.cta-page .cta-message-sent .cta-message-bubble {
  background: #EFF6FF !important;
  color: #0D54A3 !important;
  border: 1px solid #BFDBFE !important;
}

.cta-page .cta-tool-title {
  color: #0F172A !important;
}

.cta-page .cta-pricing-value-container {
  background: #FFFFFF !important;
  border: 1.5px solid #BFDBFE !important;
  box-shadow: 0 12px 35px rgba(14, 130, 248, 0.08) !important;
}

.cta-page .cta-pricing-amount,
.cta-page .cta-pricing-cents {
  background: linear-gradient(135deg, #0E82F8, #0D54A3) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #0E82F8 !important;
}

.cta-page .cta-pricing-old-price {
  color: #64748B !important;
}

.cta-page .cta-pricing-note-item {
  color: #475569 !important;
}

.cta-page .cta-pricing-benefit-item span {
  color: #0F172A !important;
}

.cta-page .cta-pricing-benefit-item svg {
  color: #0E82F8 !important;
}

.cta-page .cta-pricing-cta-button {
  background: linear-gradient(135deg, #0E82F8 0%, #0D54A3 100%) !important;
  box-shadow: 0 10px 24px -4px rgba(14, 130, 248, 0.38) !important;
  color: #FFFFFF !important;
}

.cta-page .cta-pricing-cta-button * {
  color: #FFFFFF !important;
}

.cta-page .cta-testimonials-section {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06) !important;
}

.cta-page .cta-testimonials-title {
  color: #0F172A !important;
}

.cta-page .cta-testimonial {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

.cta-page .cta-testimonial-header h4 {
  color: #0F172A !important;
}

.cta-page .cta-testimonial-text {
  color: #475569 !important;
}

.cta-page .cta-dot {
  background: #CBD5E1 !important;
}

.cta-page .cta-dot.active {
  background: #0E82F8 !important;
}

.cta-page .cta-faq-new {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06) !important;
}

.cta-page .cta-faq-new-title {
  color: #0F172A !important;
}

.cta-page .cta-faq-new-item {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

.cta-page .cta-faq-new-btn {
  color: #0F172A !important;
}

.cta-page .cta-faq-new-icon {
  color: #0E82F8 !important;
}

.cta-page .cta-faq-new-answer p {
  color: #475569 !important;
}

.cta-page .cta-guarantee-box {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important;
}

.cta-page .cta-guarantee-box h3 {
  color: #0F172A !important;
}

.cta-page .cta-guarantee-box p {
  color: #475569 !important;
}

.cta-page .cta-attention-alert {
  background: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
  color: #0D54A3 !important;
}

/* 3. QUIZ & FUNNEL EXTENSIONS */
.ghostspy-ext-overlay {
  background: radial-gradient(circle at top, rgba(14, 130, 248, 0.06), transparent 45%), rgba(248, 250, 252, 0.96) !important;
  backdrop-filter: blur(14px) !important;
}

.ghostspy-ext-shell {
  color: #0F172A !important;
}

.ghostspy-ext-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

.ghostspy-ext-title {
  color: #0F172A !important;
}

.ghostspy-ext-subtitle {
  color: #64748B !important;
}

.ghostspy-ext-progress {
  color: #64748B !important;
}

.ghostspy-ext-progress-bar {
  background: #E2E8F0 !important;
}

.ghostspy-ext-progress-fill {
  background: linear-gradient(135deg, #0E82F8, #0D54A3) !important;
}

.ghostspy-ext-option {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  color: #0F172A !important;
}

.ghostspy-ext-option:hover {
  border-color: #60A5FA !important;
  background: #EFF6FF !important;
}

.ghostspy-ext-option.active {
  background: #EFF6FF !important;
  border-color: #0E82F8 !important;
  box-shadow: 0 0 0 1px #0E82F8, 0 6px 16px rgba(14, 130, 248, 0.12) !important;
}

.ghostspy-ext-option-label {
  color: #0F172A !important;
}

.ghostspy-ext-option small {
  color: #64748B !important;
}

.ghostspy-ext-option-icon {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #0E82F8 !important;
}

.ghostspy-ext-option.active .ghostspy-ext-option-icon {
  background: linear-gradient(135deg, #0E82F8, #0D54A3) !important;
  border-color: #0E82F8 !important;
  color: #FFFFFF !important;
}

.ghostspy-ext-option.active .ghostspy-ext-option-check {
  background: #0E82F8 !important;
  border-color: #0E82F8 !important;
}

.ghostspy-ext-btn-secondary {
  color: #334155 !important;
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
}

/* 4. UPSELL PAGES (up/ & up/back/) */
.card-dpgm {
  background: #FFFFFF !important;
  border: 1.5px solid #60A5FA !important;
  border-radius: clamp(16px, 5vw, 24px) !important;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06) !important;
  color: #0F172A !important;
}

.title-dpgm, .main-title-firewall, .titulo-medio, .titulo-medio-grande {
  color: #0F172A !important;
}

.subtitle-firewall, .subtitle-dpgm {
  color: #475569 !important;
}

.pricing-current {
  background: linear-gradient(135deg, #0E82F8 0%, #0D54A3 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.pricing-old {
  color: #94A3B8 !important;
}

.benefit-item {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

.benefit-item svg {
  color: #0E82F8 !important;
}

.btn-dpgm {
  background: linear-gradient(135deg, #0E82F8 0%, #0D54A3 100%) !important;
  box-shadow: 0 10px 24px -4px rgba(14, 130, 248, 0.35) !important;
  color: #FFFFFF !important;
}

.btn-dpgm * {
  color: #FFFFFF !important;
}

.badge-dpgm, .badge-primary, .badge-diamond, .badge-premium {
  background: #EFF6FF !important;
  color: #0E82F8 !important;
  border: 1px solid #BFDBFE !important;
  box-shadow: none !important;
}

.countdown-dpgm {
  background: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
}

.countdown-number {
  color: #0E82F8 !important;
}

.countdown-label {
  color: #0D54A3 !important;
}

.dropdown-trigger,
.input-dpgm,
.input-group {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
}

.input-dpgm::placeholder,
.input-group input::placeholder {
  color: #94A3B8 !important;
}

.dropdown-menu {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1) !important;
}

.dropdown-item {
  color: #0F172A !important;
}

.dropdown-item:hover {
  background: #EFF6FF !important;
  color: #0E82F8 !important;
}

.input-group {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
}

.input-group input {
  color: #0F172A !important;
}

.footer-dpgm {
  border-top: 1px solid #E2E8F0 !important;
}

.footer-text, .footer-link {
  color: #64748B !important;
}

/* Regras adicionais de Upsells (Firewall & Câmera) */
.alert-dpgm.alert-warning {
  color: #0D54A3 !important;
  background: #EFF6FF !important;
  border: 1.5px solid #BFDBFE !important;
}

.alert-dpgm.alert-warning strong {
  color: #0A3F7A !important;
}

.card-dpgm .text-white,
.card-dpgm strong.text-white,
.card-dpgm div.text-white {
  color: #0F172A !important;
}

.card-dpgm .text-\[\#ab58f4\],
.card-dpgm svg.text-\[\#ab58f4\],
.card-dpgm .text-\[\#6B59D8\],
.card-dpgm svg.text-\[\#6B59D8\] {
  color: #0E82F8 !important;
}

.card-dpgm .w-10.h-10 {
  background-color: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
}

.card-dpgm .bg-\[rgba\(171\,88\,244\,0\.15\)\],
.card-dpgm .bg-\[rgba\(171\,88\,244\,0\.1\)\] {
  background-color: #EFF6FF !important;
}

.card-dpgm .border-\[rgba\(171\,88\,244\,0\.3\)\],
.card-dpgm .border-\[\#ab58f4\] {
  border-color: #BFDBFE !important;
}

/* Barra de progresso dos upsells */
.progress-bar-dpgm {
  background: #E2E8F0 !important;
}

.progress-bar-fill,
.progress-bar-fill-dynamic {
  background: linear-gradient(135deg, #0E82F8 0%, #0D54A3 100%) !important;
}

/* ==========================================================================
   Loadings e Spinners do Front-end (Clean White & Ghost Blue)
   ========================================================================== */

/* Cores de borda do spinner roxo antigo -> Azul GhostSpy */
.border-purple-500,
[class*="border-purple-500"] {
  border-color: #0E82F8 !important;
  border-top-color: transparent !important;
}

.animate-spin.border-purple-500,
.animate-spin[class*="border-purple"] {
  border-color: #0E82F8 !important;
}

.animate-spin.border-t-2.border-b-2 {
  border-top-color: #0E82F8 !important;
  border-bottom-color: #0E82F8 !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
}

/* Eliminar backgrounds pretos de loading ou fallbacks de rota
   (apenas estilos inline das páginas de oferta; as classes bg-[#040607]/bg-[#0b1014]
   NÃO são mais forçadas aqui porque o feed usa tema nativo escuro do Instagram) */
div[style*="background: #040607"],
div[style*="background:#040607"],
div[style*="background: rgb(4, 6, 7)"] {
  background-color: #F8FAFC !important;
}

/* Classe NOVA para fundos claros de loading/fallback no tema Ghost.
   Usar esta classe em vez de recolorir bg-[#040607]/bg-[#0b1014] compartilhados. */
.bg-ghost-light {
  background-color: #F8FAFC !important;
}

/* Container de status de quebra de criptografia / login da Home
   (o campo de senha é um <input>, não div, por isso o seletor extra) */
div[style*="background: rgb(12, 16, 17)"],
input[style*="background: rgb(12, 16, 17)"] {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

div[style*="background: rgb(12, 16, 17)"] p {
  color: #0F172A !important;
}

/* Tela de login/carregamento da Home (antes do feed) — o container inline
   rgb(4, 6, 7) é forçado para claro acima; os textos nativos claros da tela
   escura precisam ficar escuros APENAS dentro dela (classes compartilhadas
   como .text-gray-100 permanecem intactas para o resto do app) */
div[style*="background: rgb(4, 6, 7)"] .text-gray-100,
div[style*="background: rgb(4, 6, 7)"] input {
  color: #0F172A !important;
}

div[style*="background: rgb(4, 6, 7)"] input::placeholder {
  color: #94A3B8 !important;
}

div[style*="background: rgb(4, 6, 7)"] .text-gray-400 {
  color: #475569 !important;
}

/* Logo branco do Instagram some no fundo claro — escurecer apenas nesta tela */
div[style*="background: rgb(4, 6, 7)"] img[src*="logo-insta"] {
  filter: brightness(0.25);
}

/* Ícones de spinner */
svg.animate-spin:not(button *):not(.btn-primary *) {
  color: #0E82F8 !important;
}

button svg.animate-spin,
.btn-primary svg.animate-spin {
  color: #FFFFFF !important;
}

/* Textos informativos de loading (ex: 'Verificando...') — apenas em fallbacks
   inline claros; NÃO usar seletor global .min-h-screen p.text-gray-500 porque
   o feed e telas escuras usam text-gray-500 sobre fundo escuro */
div[style*="background: #F8FAFC"] p.text-gray-500,
div[style*="background:#F8FAFC"] p.text-gray-500 {
  color: #334155 !important;
  font-weight: 600 !important;
}