/*
Theme Name:   Blue Team Army Child
Theme URI:    https://blueteam.army
Description:  Blue Team Army — SOC Dark Theme. Child theme of Master Study Lite.
Author:       Rodrigo Monteiro
Author URI:   https://blueteam.army
Template:     master-study-lite
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  blueteam-army-child
*/

/* ============================================================
   BLUE TEAM ARMY — SOC THEME
   Security Operations Center Dark UI
   Paleta: Azul elétrico, Roxo, Preto profundo, Cinza, Branco
   ============================================================ */

/* --- GOOGLE FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Exo+2:wght@300;400;600;700&family=Share+Tech+Mono&display=swap');

/* --- VARIÁVEIS GLOBAIS --- */
:root {
  --bg:           #060a12;
  --bg2:          #0a1020;
  --bg3:          #0f1728;
  --bg-card:      #111c2e;
  --bg-hover:     #162238;

  --blue:         #2196f3;
  --blue-bright:  #42a5f5;
  --blue-dark:    #0d47a1;
  --blue-glow:    rgba(33,150,243,0.18);
  --blue-border:  rgba(33,150,243,0.25);

  --cyan:         #00bcd4;
  --cyan-glow:    rgba(0,188,212,0.15);

  --purple:       #7b1fa2;
  --purple-light: #ce93d8;
  --purple-glow:  rgba(123,31,162,0.18);

  --green:        #00e676;
  --green-dim:    #1b5e20;

  --white:        #e8f0fe;
  --white-dim:    #b0bec5;
  --gray:         #263238;
  --gray-mid:     #37474f;
  --gray-light:   #78909c;

  --border:       rgba(33,150,243,0.15);
  --border-hi:    rgba(33,150,243,0.5);

  --font-head:    'Rajdhani', sans-serif;
  --font-body:    'Exo 2', sans-serif;
  --font-mono:    'Share Tech Mono', monospace;

  --radius:       6px;
  --radius-lg:    12px;
  --tr:           all 0.3s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg) !important;
  color: var(--white-dim) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Grade de fundo estilo terminal */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(33,150,243,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33,150,243,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
}

/* Brilho central sutil */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse, rgba(33,150,243,0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.stm-lms-heading {
  font-family: var(--font-head) !important;
  color: var(--white) !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem) !important; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem) !important; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem) !important; }
h4 { font-size: 1.3rem !important; }
h5 { font-size: 1.1rem !important; }

p, li, span, label, td, th {
  font-family: var(--font-body) !important;
  color: var(--white-dim) !important;
}

a {
  color: var(--blue-bright) !important;
  text-decoration: none !important;
  transition: var(--tr) !important;
}

a:hover {
  color: var(--cyan) !important;
}

/* Texto monospace para detalhes técnicos */
code, pre, .mono {
  font-family: var(--font-mono) !important;
  color: var(--cyan) !important;
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 2px 8px !important;
  font-size: 0.9em !important;
}

/* ============================================================
   HEADER
   ============================================================ */

header,
.site-header,
#masthead,
.stm-header,
.stm_header,
.elementor-location-header {
  background: rgba(6,10,18,0.97) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  box-shadow: 0 1px 40px rgba(0,0,0,0.7) !important;
}

/* Linha de acento no topo do header */
header::before,
.site-header::before,
.stm-header::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), var(--cyan), var(--purple-light), transparent);
}

/* Logo */
.site-logo img,
.stm-header .logo img,
header .logo img {
  filter: drop-shadow(0 0 8px var(--blue-glow)) !important;
  transition: var(--tr) !important;
}

.site-logo img:hover,
.stm-header .logo img:hover {
  filter: drop-shadow(0 0 14px rgba(33,150,243,0.5)) !important;
}

/* Nav links */
.main-navigation a,
header nav a,
.stm-header nav a,
.stm-header .nav > li > a {
  font-family: var(--font-head) !important;
  color: var(--gray-light) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 8px 16px !important;
  border-radius: var(--radius) !important;
  transition: var(--tr) !important;
  position: relative !important;
}

.main-navigation a:hover,
header nav a:hover,
.stm-header nav a:hover,
.main-navigation .current-menu-item > a {
  color: var(--blue-bright) !important;
  background: var(--blue-glow) !important;
}

/* ============================================================
   BOTÕES
   ============================================================ */

.elementor-button,
.elementor-button-wrapper a,
.stm-btn,
.btn,
.button,
button:not(.elementor-tab-title):not(.slick-arrow),
input[type="submit"],
input[type="button"],
a.elementor-button,
.stm-lms-button,
.woocommerce button.button,
.woocommerce input.button {
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%) !important;
  border: 1px solid var(--blue) !important;
  border-radius: var(--radius) !important;
  padding: 12px 32px !important;
  cursor: pointer !important;
  transition: var(--tr) !important;
  box-shadow: 0 0 20px var(--blue-glow), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.elementor-button::before,
.stm-btn::before,
.button::before,
button::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transition: left 0.5s ease;
}

.elementor-button:hover::before,
.stm-btn:hover::before,
.button:hover::before {
  left: 100%;
}

.elementor-button:hover,
.stm-btn:hover,
.button:hover,
button:not(.elementor-tab-title):not(.slick-arrow):hover,
input[type="submit"]:hover {
  background: linear-gradient(135deg, var(--purple) 0%, var(--blue) 100%) !important;
  border-color: var(--purple-light) !important;
  box-shadow: 0 0 30px var(--purple-glow), 0 0 15px var(--blue-glow) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
}

/* ============================================================
   SEÇÕES — FORÇAR FUNDO ESCURO
   ============================================================ */

/* Todas as seções do Elementor */
.elementor-section,
.elementor-top-section,
.elementor-inner-section,
.e-con,
.e-con-inner {
  position: relative;
  z-index: 1;
}

/* Seções sem background definido */
.elementor-section:not([style*="background"]),
.elementor-top-section:not([style*="background"]) {
  background-color: var(--bg) !important;
}

/* Força fundo escuro mesmo em estilos inline */
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background-color: rgb(255, 255, 255)"],
[style*="background-color: #f5f5f5"],
[style*="background-color: #f0f0f0"],
[style*="background-color: #fafafa"],
[style*="background-color:#f5f5f5"],
[style*="background-color: #ecf0f1"],
[style*="background-color: #eee"],
[style*="background-color:#eee"] {
  background-color: var(--bg2) !important;
}

[style*="background-color: #f8f9fa"],
[style*="background-color:#f8f9fa"],
[style*="background-color: #f1f1f1"],
[style*="background-color: rgba(255, 255, 255"] {
  background-color: var(--bg3) !important;
}

/* Wrappers e containers */
.elementor-container,
.elementor-widget-wrap,
.elementor-column-wrap {
  background-color: transparent !important;
}

/* ============================================================
   HERO SECTION
   ============================================================ */

.elementor-section:first-of-type,
.stm-hero,
.stm-banner,
[class*="hero"],
[class*="banner"] {
  background: linear-gradient(135deg, #060a12 0%, #0a1530 45%, #120a28 75%, #060a12 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Efeito de scanner no hero */
.elementor-section:first-of-type::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(ellipse at 30% 50%, rgba(33,150,243,0.08) 0%, transparent 55%),
              radial-gradient(ellipse at 70% 30%, rgba(123,31,162,0.06) 0%, transparent 45%);
  pointer-events: none;
  animation: heroGlow 8s ease-in-out infinite alternate;
}

@keyframes heroGlow {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 1;   transform: scale(1.05); }
}

/* ============================================================
   CARDS DE CURSOS — MASTERSTUDY
   ============================================================ */

.stm-course--single,
.stm_lms_course,
.stm-courses--list article,
.stm-courses--list li,
ul.stm-courses--list > li,
[class*="stm-course"],
.post-type-archive-stm_lms_course article {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  transition: var(--tr) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
}

.stm-course--single:hover,
.stm-courses--list article:hover,
.stm-courses--list li:hover {
  border-color: var(--border-hi) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 24px var(--blue-glow) !important;
}

/* Info box dentro dos cards */
.stm-course--info,
.stm-course--single .stm-course--info {
  background-color: var(--bg-card) !important;
  padding: 20px !important;
}

/* Títulos dos cards */
.stm-course--title,
.stm-course--title a,
.stm-course--single h3,
.stm-course--single h4,
.stm-course--single h5 {
  color: var(--white) !important;
  font-family: var(--font-head) !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

/* Textos secundários */
.stm-course--meta,
.stm-course--meta span,
.stm-course--single p,
.stm-course--info p {
  color: var(--gray-light) !important;
  font-size: 13px !important;
}

/* Categoria */
.stm-course--taxonomy a,
.stm-course--taxonomy span {
  color: var(--cyan) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* Linha separadora */
.stm-course--info-meta {
  border-top: 1px solid var(--border) !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
}

/* Rating estrelas */
.stm-rating .marked { color: #ffd700 !important; }

/* Imagens dos cursos — escurecer */
.stm-course--single img,
.stm-course--thumbnail img {
  filter: brightness(0.7) saturate(0.8) !important;
  transition: filter 0.4s ease !important;
  width: 100% !important;
  object-fit: cover !important;
}

.stm-course--single:hover img {
  filter: brightness(0.85) saturate(1) !important;
}

/* ============================================================
   SEÇÃO TEACHER OF MONTH
   ============================================================ */

.stm-teacher-of-month,
[class*="teacher-of-month"],
[class*="instructor"] {
  background: linear-gradient(135deg, var(--bg2), var(--bg3)) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
}

.stm-teacher-of-month img,
[class*="teacher-of-month"] img {
  filter: brightness(0.85) !important;
  border-radius: var(--radius-lg) !important;
}

/* ============================================================
   CAIXAS DE FEATURES — WHY CHOOSE US
   ============================================================ */

.elementor-icon-box-wrapper,
.elementor-widget-icon-box .elementor-widget-container,
.stm-icon-box,
[class*="icon-box"],
[class*="feature-box"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px !important;
  transition: var(--tr) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Linha de acento no topo das caixas */
.elementor-icon-box-wrapper::before,
.stm-icon-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  opacity: 0;
  transition: var(--tr);
}

.elementor-icon-box-wrapper:hover::before,
.stm-icon-box:hover::before {
  opacity: 1;
}

.elementor-icon-box-wrapper:hover,
.stm-icon-box:hover,
[class*="icon-box"]:hover {
  border-color: var(--border-hi) !important;
  box-shadow: 0 0 28px var(--blue-glow) !important;
  transform: translateY(-4px) !important;
}

.elementor-icon-box-title,
.elementor-icon-box-title * {
  color: var(--white) !important;
  font-family: var(--font-head) !important;
}

.elementor-icon-box-description,
.elementor-icon-box-description * {
  color: var(--gray-light) !important;
}

.elementor-icon i,
.elementor-icon svg {
  color: var(--blue-bright) !important;
  fill: var(--blue-bright) !important;
}

/* ============================================================
   DEPOIMENTOS
   ============================================================ */

[class*="testimonial"],
.elementor-testimonial-wrapper,
.stm-testimonials {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px !important;
}

[class*="testimonial"] *,
.elementor-testimonial-wrapper * {
  color: var(--white-dim) !important;
}

/* ============================================================
   FORMULÁRIOS
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--white) !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  transition: var(--tr) !important;
  width: 100% !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px var(--blue-glow) !important;
  outline: none !important;
  background: var(--bg3) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--gray-mid) !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
}

/* ============================================================
   ÁREA DO ALUNO / DASHBOARD
   ============================================================ */

.stm-lms-dashboard,
[class*="dashboard"],
.student-dashboard {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px !important;
}

/* Barra de progresso */
[class*="progress-bar"],
.stm-course-progress {
  background: var(--gray) !important;
  border-radius: 99px !important;
  height: 6px !important;
  overflow: hidden !important;
}

[class*="progress-fill"],
[class*="progress-bar"] > *,
.stm-course-progress > * {
  background: linear-gradient(90deg, var(--blue), var(--cyan)) !important;
  border-radius: 99px !important;
  box-shadow: 0 0 8px var(--blue-glow) !important;
  transition: width 0.8s cubic-bezier(.4,0,.2,1) !important;
}

/* ============================================================
   QUIZZES
   ============================================================ */

.stm-quiz,
[class*="quiz-wrap"],
[class*="quiz-container"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px !important;
}

[class*="quiz-answer"],
[class*="quiz-option"],
.stm-quiz-answer {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 14px 18px !important;
  margin-bottom: 10px !important;
  cursor: pointer !important;
  transition: var(--tr) !important;
  color: var(--white-dim) !important;
}

[class*="quiz-answer"]:hover,
.stm-quiz-answer:hover {
  border-color: var(--blue) !important;
  background: var(--blue-glow) !important;
  color: var(--white) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

footer,
.site-footer,
#colophon,
.elementor-location-footer {
  background: var(--bg2) !important;
  border-top: 1px solid var(--border) !important;
  position: relative !important;
}

footer::before,
.site-footer::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), var(--cyan), var(--purple-light), transparent);
}

footer *,
.site-footer * {
  color: var(--gray-light) !important;
}

footer a:hover,
.site-footer a:hover {
  color: var(--blue-bright) !important;
}

/* ============================================================
   WOOCOMMERCE
   ============================================================ */

.woocommerce-page,
.woocommerce {
  background: transparent !important;
}

.woocommerce .product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px !important;
  transition: var(--tr) !important;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--border-hi) !important;
  box-shadow: 0 0 24px var(--blue-glow) !important;
}

.woocommerce-cart table,
.woocommerce-checkout table {
  background: var(--bg-card) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}

/* ============================================================
   NOTIFICAÇÕES / ALERTS
   ============================================================ */

.alert-success, .notice-success, .woocommerce-message {
  background: rgba(0,230,118,0.1) !important;
  border: 1px solid var(--green) !important;
  color: var(--green) !important;
  border-radius: var(--radius) !important;
}

.alert-error, .notice-error, .woocommerce-error {
  background: rgba(244,67,54,0.1) !important;
  border: 1px solid #f44336 !important;
  color: #ef9a9a !important;
  border-radius: var(--radius) !important;
}

/* ============================================================
   TABELAS
   ============================================================ */

table {
  background: var(--bg-card) !important;
  border-collapse: collapse !important;
  width: 100% !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}

th {
  background: var(--bg2) !important;
  color: var(--cyan) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--border) !important;
}

td {
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--white-dim) !important;
}

tr:hover td {
  background: var(--bg-hover) !important;
}

/* ============================================================
   BADGES / TAGS
   ============================================================ */

.badge, .tag,
[class*="course-badge"],
[class*="course-tag"],
.stm-label {
  background: var(--blue-glow) !important;
  color: var(--blue-bright) !important;
  border: 1px solid var(--blue-border) !important;
  border-radius: 99px !important;
  padding: 3px 14px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* ============================================================
   STATUS INDICATORS — ESTILO SOC
   ============================================================ */

/* Ponto verde pulsante (online/ativo) */
.status-online::before,
.user-online::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 6px var(--green);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}

/* ============================================================
   ANIMAÇÕES DE ENTRADA
   ============================================================ */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.elementor-widget {
  animation: fadeInUp 0.5s ease both;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--blue-dark);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue);
}

/* ============================================================
   SELEÇÃO DE TEXTO
   ============================================================ */

::selection {
  background: var(--blue) !important;
  color: #fff !important;
}

/* ============================================================
   RESPONSIVO MOBILE
   ============================================================ */

@media (max-width: 768px) {
  body { font-size: 15px !important; }

  .elementor-button,
  .button,
  button,
  input[type="submit"] {
    width: 100% !important;
    text-align: center !important;
    padding: 14px 20px !important;
  }

  table { font-size: 13px !important; }
  th, td { padding: 10px 12px !important; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.8rem !important; }
  h2 { font-size: 1.4rem !important; }
}