/* ==========================================================================
   FormaPro Theme Override — Frontend (Site / Área do Aluno)
   Aplica-se POR CIMA do main.css / responsive.css originais.
   Não remove nenhuma classe/funcionalidade, apenas redesenha visualmente.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
  --fp-red:        #E6181C;
  --fp-red-dark:   #A80F14;
  --fp-red-light:  #FF5A5F;
  --fp-black:      #0A0A0C;
  --fp-black-2:    #141417;
  --fp-black-3:    #1D1D22;
  --fp-white:      #FFFFFF;
  --fp-gray-100:   #F5F6F8;
  --fp-gray-300:   #E3E5EA;
  --fp-gray-600:   #6B6E76;
  --fp-gradient:   linear-gradient(135deg, var(--fp-red) 0%, var(--fp-red-dark) 55%, var(--fp-black) 130%);
  --fp-gradient-soft: linear-gradient(135deg, rgba(230,24,28,.14) 0%, rgba(10,10,12,.04) 100%);
  --fp-radius:     16px;
  --fp-radius-sm:  10px;
  --fp-shadow:     0 10px 30px rgba(0,0,0,.18);
  --fp-shadow-lg:  0 20px 50px rgba(0,0,0,.28);
  --fp-glow:       0 0 0 rgba(230,24,28,0);
  --fp-glow-hover: 0 8px 24px rgba(230,24,28,.35);
  --fp-ease:       cubic-bezier(.4,0,.2,1);
}

/* ---------- Base ---------- */
body{
  font-family:'Poppins',"Open Sans",sans-serif !important;
  color:#26262c;
  scroll-behavior:smooth;
}
::selection{ background:var(--fp-red); color:#fff; }

/* scrollbar futurista */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:var(--fp-gray-100); }
::-webkit-scrollbar-thumb{ background:var(--fp-gradient); border-radius:10px; }

a{ transition:color .25s var(--fp-ease); }

h1,h2,h3,h4,h5,h6{ font-weight:700; letter-spacing:-.02em; }

/* ---------- Navbar / Menu ---------- */
.menu-area{
  background:rgba(10,10,12,.85) !important;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(230,24,28,.25);
  transition:background .3s var(--fp-ease), box-shadow .3s var(--fp-ease);
}
.menu-area.fp-scrolled{
  box-shadow:0 6px 24px rgba(0,0,0,.35);
}
.menu-area .navbar{
  background:transparent !important;
  border-bottom:none;
}
.menu-area .navbar .nav-item > a{
  color:#fff !important;
  font-weight:500;
  position:relative;
}
/* FormaPro: o menu de categorias/mobile (.main-nav-wrap) tem painéis com
   fundo BRANCO (flyout de categorias, menu mobile) — não força mais
   branco no texto aqui, senão o texto some no fundo branco. Mantém a
   cor original do tema pra esses painéis. */
.main-nav-wrap,
.main-nav-wrap *{
  color:#333 !important;
}
.main-nav-wrap .category,
.main-nav-wrap .sub-category{
  background:#fff !important;
}
.main-nav-wrap a:hover,
.main-nav-wrap a:hover *{
  color:var(--fp-red) !important;
}
.main-nav-wrap .go-back,
.main-nav-wrap .go-back-menu{
  color:var(--fp-red) !important;
}
.main-nav-wrap .go-back *,
.main-nav-wrap .go-back-menu *{
  color:var(--fp-red) !important;
}
.menu-area .navbar .nav-item > a:hover,
.menu-area .navbar .nav-item.active > a{
  color:var(--fp-red-light) !important;
}
.menu-area .navbar .nav-item > a:after{
  content:'';
  position:absolute;
  left:0; bottom:-4px;
  width:0; height:2px;
  background:var(--fp-gradient);
  transition:width .3s var(--fp-ease);
}
.menu-area .navbar .nav-item > a:hover:after{ width:100%; }

/* logo glow */
.navbar-brand img{
  filter:drop-shadow(0 0 10px rgba(230,24,28,.45));
}

/* ---------- Botões (globais) ---------- */
.btn,
.sign-in-box .btn,
.big-cart-button,
.add-to-cart-btn,
button[type="submit"],
.theme-btn{
  border-radius:999px !important;
  font-weight:600 !important;
  letter-spacing:.02em;
  border:none !important;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .25s var(--fp-ease), box-shadow .25s var(--fp-ease), background .25s var(--fp-ease) !important;
  z-index:1;
}
.btn-primary,
.add-to-cart-btn,
.big-cart-button,
.sign-in-box .btn-sign-in,
.home-banner-wrap .btn{
  background:var(--fp-gradient) !important;
  color:#fff !important;
  box-shadow:var(--fp-glow);
}
.btn-primary:hover,
.add-to-cart-btn:hover,
.big-cart-button:hover,
.sign-in-box .btn-sign-in:hover{
  transform:translateY(-3px);
  box-shadow:var(--fp-glow-hover);
  color:#fff !important;
}
.btn-secondary,
.sign-in-box .btn-sign-up{
  background:transparent !important;
  color:var(--fp-black) !important;
  border:2px solid var(--fp-black) !important;
}
.sign-in-box .btn-sign-up:hover{
  background:var(--fp-black) !important;
  color:#fff !important;
}
/* ripple element criado via JS */
.fp-ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  transform:scale(0);
  animation:fp-ripple-anim .6s var(--fp-ease);
  pointer-events:none;
}
@keyframes fp-ripple-anim{ to{ transform:scale(3); opacity:0; } }

/* ---------- Hero / Banner ---------- */
.home-banner-area{
  position:relative;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(230,24,28,.35), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(230,24,28,.18), transparent 50%),
    linear-gradient(135deg, var(--fp-black) 0%, var(--fp-black-3) 100%) !important;
  overflow:hidden;
}
.home-banner-area:before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:42px 42px;
  animation:fp-grid-move 18s linear infinite;
  pointer-events:none;
}
@keyframes fp-grid-move{
  from{ background-position:0 0; }
  to{ background-position:120px 120px; }
}
.home-banner-wrap{ position:relative; z-index:2; }
.home-banner-wrap h2{
  background:linear-gradient(90deg,#fff, var(--fp-red-light));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}
.home-banner-wrap input[type="text"]{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25) !important;
  color:#fff;
  backdrop-filter:blur(6px);
}
.home-banner-wrap input[type="text"]::placeholder{ color:rgba(255,255,255,.6); }
.home-banner-wrap .btn{
  background:var(--fp-gradient) !important;
  color:#fff !important;
}
.home-banner-wrap .btn:hover{ background:var(--fp-gradient) !important; filter:brightness(1.15); }

/* fact/stats strip */
.home-fact-area{
  background:var(--fp-black) !important;
  background-image:linear-gradient(120deg, var(--fp-black) 0%, #1a1a1e 45%, var(--fp-red-dark) 160%) !important;
}

/* ---------- Course Cards ---------- */
.course-box-wrap{ perspective:1000px; }
.course-box{
  background:#fff;
  border-radius:var(--fp-radius) !important;
  box-shadow:var(--fp-shadow);
  border:1px solid rgba(0,0,0,.04);
  overflow:hidden;
  position:relative;
  transition:transform .4s var(--fp-ease), box-shadow .4s var(--fp-ease), border-color .4s var(--fp-ease) !important;
}
.course-box:hover{
  transform:translateY(-8px) scale(1.01);
  box-shadow:var(--fp-shadow-lg), 0 0 0 2px var(--fp-red);
}
.course-box:before,
.course-box:after{ display:none !important; } /* remove old overlay hack, we use box-shadow now */

/* imagem com proporção consistente (evita cards de altura desigual) */
.course-box .course-image{
  position:relative;
  overflow:hidden;
  aspect-ratio: 16 / 9;
  background:var(--fp-gray-100);
}
.course-box .course-image img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s var(--fp-ease);
}
.course-box:hover .course-image img{ transform:scale(1.07); }

.course-box .play-btn{
  background:var(--fp-gradient) !important;
  box-shadow:0 0 0 6px rgba(255,255,255,.25);
}

/* corpo do card */
.course-box .course-details{
  padding:18px 18px 8px;
}
.course-box .course-details .title{
  font-size:16.5px;
  font-weight:700;
  color:var(--fp-black);
  line-height:1.35;
  margin-bottom:6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:44px;
}
.course-box .course-details .instructors{
  font-size:13px;
  color:var(--fp-gray-600);
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:10px;
}

/* avaliação */
.course-box .rating{
  display:flex;
  align-items:center;
  gap:2px;
  margin-bottom:4px;
}
.course-box .rating i.fa-star{
  font-size:12.5px;
  color:#e0e0e0;
}
.course-box .rating i.fa-star.filled{
  color:#f4a300;
}
.course-box .rating .average-rating{
  font-size:12.5px;
  color:var(--fp-gray-600);
  font-weight:600;
  margin-left:4px;
}

/* preço — vira uma etiqueta de destaque, não só texto solto */
.course-box .price{
  position:absolute;
  top:12px;
  right:12px;
  background:rgba(10,10,12,.85);
  backdrop-filter:blur(4px);
  color:#fff !important;
  font-weight:700;
  font-size:13.5px;
  padding:5px 12px;
  border-radius:999px;
  margin:0;
  line-height:1.4;
}
.course-box .price small{
  color:rgba(255,255,255,.55);
  text-decoration:line-through;
  font-weight:400;
  margin-right:5px;
}
.course-box .price.price-free{
  background:#1fb37a;
}

/* ============================================================
   FormaPro: organiza a barra superior — "Instrutor" e "Meus
   treinamentos" ficavam soltos/espremidos ao lado da busca e dos
   ícones. Agora viram pequenas etiquetas com respiro e contraste.
   ============================================================ */
.instructor-box{
  display:flex;
  align-items:center;
}
.instructor-box a{
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:999px !important;
  padding:8px 16px !important;
  margin:0 4px !important;
  font-size:13px !important;
  font-weight:600;
  color:#fff !important;
  white-space:nowrap;
  transition:background .2s var(--fp-ease), border-color .2s var(--fp-ease);
}
.instructor-box a:hover{
  background:var(--fp-gradient) !important;
  border-color:transparent !important;
}
.menu-area .navbar > .container-fluid,
.menu-area .navbar-collapse{
  flex-wrap:nowrap;
}
@media (max-width:1200px){
  .instructor-box a{
    padding:6px 10px !important;
    font-size:12px !important;
    margin:0 2px !important;
  }
}
@media (max-width:991.98px){
  .instructor-box{ display:none; } /* no mobile some pra não espremer o menu — continua acessível pelo menu do usuário */
}

/* FormaPro: título da aula no currículo agora é link clicável — mantém
   a cor do tema em vez do azul padrão de link, com destaque no hover */
.course-curriculum-accordion .lecture-list .lecture .lecture-title{
  color:#007791 !important;
}
.course-curriculum-accordion .lecture-list .lecture .lecture-title:hover{
  color:var(--fp-red) !important;
}

/* ============================================================
   FormaPro: redesenho do card de "Meus Treinamentos" — corrige a
   sobreposição entre "% Concluído" e "Editar avaliação" (havia um
   margin-top:-18px fixo no HTML puxando a avaliação por cima do
   texto de progresso) e os botões cortados/sobrepostos.
   ============================================================ */
.course-box .course-details{
  padding:16px 16px 4px;
}
.course-box .course-details .title{
  font-size:15.5px;
  min-height:auto;
  margin-bottom:10px;
}
.course-box .progress{
  border-radius:999px;
  overflow:hidden;
  background:var(--fp-gray-100);
  margin-bottom:6px;
}
.course-box .progress-bar{
  background:var(--fp-gradient) !important;
}
.course-box > div > .course-details > small{
  display:block;
  font-size:12px;
  color:var(--fp-gray-600);
  margin-bottom:10px;
}
/* anula o margin-top:-18px inline que causava a sobreposição */
.course-box .rating.your-rating-box{
  position:static !important;
  margin-top:0 !important;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.course-box .rating.your-rating-box .your-rating-text{
  margin:0 0 0 auto;
  font-size:12px;
}
.course-box .rating i.fa-star{ font-size:13px; }

/* linha de botões (Detalhe do treinamento / Iniciar aula) */
.course-box .row[style*="padding: 5px"]{
  margin:12px 0 0;
  padding:0 12px 14px !important;
}
.course-box .row[style*="padding: 5px"] .col-md-6{
  padding:0 4px;
}
.course-box .row[style*="padding: 5px"] .btn{
  width:100%;
  padding:9px 4px !important;
  font-size:12.5px !important;
  font-weight:600;
  border-radius:8px !important;
  white-space:normal;
  line-height:1.25;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* categoria / icon boxes */
.category-item,
.icon-box,
.single-cat-box{
  border-radius:var(--fp-radius-sm) !important;
  transition:transform .3s var(--fp-ease), box-shadow .3s var(--fp-ease) !important;
}
.category-item:hover,
.icon-box:hover,
.single-cat-box:hover{
  transform:translateY(-6px);
  box-shadow:var(--fp-shadow);
}

/* ---------- Forms / Login-Register ---------- */
.sign-in-modal .modal-content,
.course-preview-modal .modal-content{
  border-radius:var(--fp-radius) !important;
  border:none;
  box-shadow:var(--fp-shadow-lg);
}
input.form-control,
select.form-control,
textarea.form-control{
  border-radius:var(--fp-radius-sm) !important;
  border:1.5px solid var(--fp-gray-300) !important;
  transition:border-color .25s var(--fp-ease), box-shadow .25s var(--fp-ease) !important;
}
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus{
  border-color:var(--fp-red) !important;
  box-shadow:0 0 0 3px rgba(230,24,28,.15) !important;
}

/* ---------- Badges / Preços / Tags ---------- */
.badge,
.course-box .course-price .current-price,
.cart-total-price .current-price{
  color:var(--fp-red) !important;
}
.badge-primary{ background:var(--fp-gradient) !important; }

/* ---------- Footer ---------- */
footer,
.footer-widget-area,
.footer-bottom-area{
  background:var(--fp-black) !important;
  color:#c9c9cf;
}
footer a,
.footer-widget-area a{ color:#c9c9cf !important; }
footer a:hover,
.footer-widget-area a:hover{ color:var(--fp-red-light) !important; }
footer h3, footer h4, footer h5{ color:#fff !important; }

/* ---------- Dashboard aluno / instrutor (sidebar interno) ---------- */
.dashboard-nav-wrap .nav-link,
.instructor-dashboard-nav a{
  border-radius:var(--fp-radius-sm) !important;
  transition:background .25s var(--fp-ease), color .25s var(--fp-ease) !important;
}
.dashboard-nav-wrap .nav-link.active,
.dashboard-nav-wrap .nav-link:hover{
  background:var(--fp-gradient-soft) !important;
  color:var(--fp-red) !important;
}

/* ---------- Scroll reveal (classe adicionada via JS) ---------- */
.fp-reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--fp-ease), transform .7s var(--fp-ease);
}
.fp-reveal.fp-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---------- Responsivo extra (mobile-first refinado) ---------- */
@media (max-width:1200px){
  .home-banner-wrap h2{ font-size:38px; }
}
@media (max-width:992px){
  .home-banner-area{ padding:120px 0 90px; }
  .home-banner-wrap h2{ font-size:32px; }
  .course-box-wrap{ margin-bottom:24px; }
}
@media (max-width:768px){
  .home-banner-area{ padding:90px 0 70px; text-align:center; }
  .home-banner-wrap{ max-width:100%; margin:0 auto; }
  .home-banner-wrap h2{ font-size:26px; }
  .home-banner-wrap p{ font-size:15px; }
  .btn, .theme-btn{ width:100%; text-align:center; }
  .course-box{ margin-bottom:18px; }
  footer{ text-align:center; }
}
@media (max-width:576px){
  .home-banner-wrap h2{ font-size:22px; }
  .home-banner-wrap input[type="text"]{ font-size:16px; height:44px; }
  .navbar-brand img{ height:32px; }
}

/* Respeita usuários que preferem menos animação */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---------- Seção de benefícios ISP (home) ---------- */
.fp-isp-benefits-area{
  padding:70px 0;
  background:var(--fp-gray-100);
}
.fp-section-heading{ margin-bottom:40px; }
.fp-section-heading h2{
  font-size:30px;
  color:var(--fp-black);
  margin-bottom:8px;
}
.fp-section-heading p{
  color:var(--fp-gray-600);
  font-size:16px;
}
.fp-benefit-card{
  background:#fff;
  border-radius:var(--fp-radius);
  padding:34px 26px;
  height:100%;
  box-shadow:var(--fp-shadow);
  transition:transform .35s var(--fp-ease), box-shadow .35s var(--fp-ease);
  margin-bottom:24px;
  border-top:3px solid transparent;
}
.fp-benefit-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--fp-shadow-lg);
  border-top-color:var(--fp-red);
}
.fp-benefit-icon{
  width:58px; height:58px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:var(--fp-gradient);
  color:#fff;
  font-size:24px;
  margin-bottom:18px;
}
.fp-benefit-card h4{ font-size:19px; margin-bottom:10px; color:var(--fp-black); }
.fp-benefit-card p{ color:var(--fp-gray-600); font-size:14.5px; line-height:1.6; margin:0; }

/* ---------- Crédito do desenvolvedor (footer) ---------- */
.fp-dev-credit-row{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:14px;
  padding-top:14px;
}
.fp-dev-credit{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
  font-size:13px;
  color:#9a9aa2;
}
.fp-dev-credit-brand,
.fp-dev-brand{
  color:var(--fp-red-light) !important;
  font-weight:700;
  text-decoration:none;
}
.fp-dev-contact{
  color:#9a9aa2 !important;
  text-decoration:none;
  transition:color .2s var(--fp-ease);
}
.fp-dev-contact:hover{ color:var(--fp-red-light) !important; }
.fp-dev-credit-sep{ opacity:.4; }

/* ---------- Botão flutuante do WhatsApp ---------- */
.fp-whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  color:#fff !important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  box-shadow:0 8px 24px rgba(37,211,102,.45);
  z-index:999;
  transition:transform .25s var(--fp-ease), box-shadow .25s var(--fp-ease);
  animation:fp-wa-pulse 2.4s infinite;
}
.fp-whatsapp-float:hover{
  transform:scale(1.08);
  color:#fff;
  box-shadow:0 10px 28px rgba(37,211,102,.6);
}
@keyframes fp-wa-pulse{
  0%   { box-shadow:0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow:0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow:0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width:576px){
  .fp-whatsapp-float{ right:14px; bottom:14px; width:52px; height:52px; font-size:24px; }
  .fp-isp-benefits-area{ padding:50px 0; }
  .fp-section-heading h2{ font-size:24px; }
}