/* eAula — Courses page restyle (v0 inspired) */

/* Hero with purple→coral gradient */
.eax-cur-hero{
  position:relative;color:#fff;
  background:linear-gradient(135deg,#2d005d 0%,#2d005d 50%,#ff304c 100%);
  padding:3.5rem 0 4rem;overflow:hidden;
}
@media(min-width:768px){.eax-cur-hero{padding:5rem 0 5.5rem}}
.eax-cur-hero::before,.eax-cur-hero::after{
  content:'';position:absolute;border-radius:50%;filter:blur(80px);opacity:.2;pointer-events:none;
}
.eax-cur-hero::before{top:2.5rem;left:2.5rem;width:18rem;height:18rem;background:#fff}
.eax-cur-hero::after{bottom:2.5rem;right:2.5rem;width:24rem;height:24rem;background:#ff304c}
.eax-cur-hero .eax-container{position:relative;z-index:1;text-align:center}
.eax-cur-hero-pill{
  display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(255,255,255,.2);backdrop-filter:blur(8px);
  padding:.5rem 1rem;border-radius:9999px;
  font-size:.825rem;font-weight:500;color:#fff;
  margin-bottom:1.25rem;
}
.eax-cur-hero h1{
  font-size:2.25rem;font-weight:800;line-height:1.15;
  margin:0 0 1rem;text-wrap:balance;letter-spacing:-.02em;color:#fff;
}
@media(min-width:640px){.eax-cur-hero h1{font-size:3rem}}
@media(min-width:768px){.eax-cur-hero h1{font-size:3.75rem}}
.eax-cur-hero p{
  font-size:1.05rem;line-height:1.65;opacity:.95;
  max-width:38rem;margin:0 auto;text-wrap:balance;
}
@media(min-width:768px){.eax-cur-hero p{font-size:1.2rem}}
.eax-cur-hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  max-width:36rem;margin:2rem auto 0;
}
.eax-cur-hero-stat{
  background:rgba(255,255,255,.1);backdrop-filter:blur(8px);
  border-radius:1rem;padding:1rem .5rem;text-align:center;
}
.eax-cur-hero-stat .eax-num{font-size:1.5rem;font-weight:800;line-height:1;color:#fff}
@media(min-width:640px){.eax-cur-hero-stat .eax-num{font-size:2rem}}
.eax-cur-hero-stat .eax-lbl{font-size:.8rem;opacity:.9;margin-top:.35rem}

/* Sticky filter bar */
.eax-cur-filterbar{
  position:sticky;
  top:var(--eax-filter-top,104px);
  z-index:40;
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--eax-border,#e5e7eb);
  box-shadow:0 4px 12px -8px rgba(44,22,84,.15);
  transition:top .3s ease,box-shadow .25s ease;
}
/* Sombra reforçada quando filterbar está no topo (header escondido) */
.eax-cur-filterbar.is-stuck{
  box-shadow:0 6px 20px -6px rgba(44,22,84,.22);
}
/* Fallback sem JS: mobile só tem nav-bar (60px), desktop tem top-bar+nav-bar (104px).
   O JS sobrescreve --eax-filter-top no elemento :root; quando JS não roda,
   a media query abaixo garante o valor correto no mobile. */
@media(max-width:1023px){
  .eax-cur-filterbar{ top:var(--eax-filter-top,60px); }
}
@media(prefers-reduced-motion:reduce){
  .eax-cur-filterbar{ transition:none!important; }
}
.eax-cur-filterbar-inner{
  padding:1rem 0;display:flex;flex-direction:column;gap:.85rem;align-items:stretch;
}
@media(min-width:768px){.eax-cur-filterbar-inner{flex-direction:row;align-items:center}}

/* Search input */
.eax-cur-search{position:relative;flex:1;width:100%}
.eax-cur-search i.fa-search{
  position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);
  color:#9ca3af;font-size:.95rem;
}
.eax-cur-search input{
  width:100%;height:3rem;
  padding:0 1rem 0 2.85rem;
  border:2px solid var(--eax-border,#e5e7eb);border-radius:9999px;
  font-size:.95rem;color:var(--eax-fg,#2c1654);outline:none;
  background:#fff;font-family:inherit;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.eax-cur-search input:focus{
  border-color:#ff304c;box-shadow:0 0 0 4px rgba(255,48,76,.1);
}

/* =========================================================
   Area multiselect dropdown
   ========================================================= */

/* Wrapper posicionado — ancora o popover */
.eax-cur-area-dropdown{
  position:relative;
  flex-shrink:0;
}

/* Botão trigger */
.eax-cur-area-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  height:3rem;padding:0 1.2rem;
  border:2px solid var(--eax-border,#e5e7eb);
  border-radius:9999px;
  background:#fff;
  color:var(--eax-fg,#2c1654);
  font-size:.9rem;font-weight:600;font-family:inherit;
  cursor:pointer;white-space:nowrap;
  transition:border-color .25s ease,box-shadow .25s ease,background .2s ease,color .2s ease;
}
.eax-cur-area-btn:hover,
.eax-cur-area-btn.is-open{
  border-color:#ff304c;
  box-shadow:0 0 0 4px rgba(255,48,76,.1);
}
.eax-cur-area-btn.has-filter{
  background:#2d005d;
  color:#fff;
  border-color:#2d005d;
}
.eax-cur-area-btn.has-filter:hover,
.eax-cur-area-btn.has-filter.is-open{
  background:#3b0772;
  border-color:#3b0772;
  box-shadow:0 0 0 4px rgba(45,0,93,.15);
}
.eax-area-chevron{
  font-size:.65rem;
  transition:transform .25s ease;
}
.eax-cur-area-btn.is-open .eax-area-chevron{
  transform:rotate(180deg);
}

/* Popover flutuante */
.eax-cur-area-popover{
  position:absolute;
  top:calc(100% + .5rem);
  right:0;
  min-width:220px;
  max-height:320px;
  background:#fff;
  border:1.5px solid var(--eax-border,#e5e7eb);
  border-radius:1rem;
  box-shadow:0 16px 40px -8px rgba(44,22,84,.2);
  z-index:200;
  display:flex;flex-direction:column;
  overflow:hidden;
  transform-origin:top;
  /* Estado padrão: oculto com animação possível (sem display:none) */
  opacity:0;
  transform:translateY(-8px);
  visibility:hidden;
  pointer-events:none;
  transition:opacity 180ms ease,transform 180ms ease,visibility 0s linear 180ms;
}
/* Estado aberto: ativado via .is-open no wrapper pai */
.eax-cur-area-dropdown.is-open .eax-cur-area-popover{
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:opacity 180ms ease,transform 180ms ease,visibility 0s;
}
/* Em mobile alinha à esquerda e ocupa a largura do viewport disponível */
@media(max-width:767px){
  .eax-cur-area-popover{
    right:auto;left:0;min-width:0;width:calc(100vw - 2rem);max-width:320px;
  }
}
/* Respeita preferência de movimento reduzido */
@media(prefers-reduced-motion:reduce){
  .eax-cur-area-popover,
  .eax-cur-area-dropdown.is-open .eax-cur-area-popover{
    transition:opacity 80ms ease,visibility 0s!important;
    transform:none!important;
  }
}

/* Lista de opções */
.eax-cur-area-list{
  list-style:none;margin:0;padding:.5rem 0;
  overflow-y:auto;flex:1;
}
.eax-cur-area-list li + li{
  border-top:1px solid var(--eax-border,#e5e7eb);
}

/* Label de cada opção */
.eax-cur-area-option{
  display:flex;align-items:center;gap:.75rem;
  padding:.65rem 1rem;
  cursor:pointer;
  transition:background .15s ease;
  font-size:.9rem;color:var(--eax-fg,#2c1654);
}
.eax-cur-area-option:hover{
  background:#f5f0ff;
}
/* Esconde o input nativo mas mantém acessível */
.eax-cur-area-option input[type="checkbox"]{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}
/* Caixa visual do checkbox */
.eax-area-check-box{
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  width:1.1rem;height:1.1rem;
  border:2px solid var(--eax-border,#e5e7eb);
  border-radius:.3rem;
  background:#fff;
  transition:border-color .2s ease,background .2s ease;
}
.eax-cur-area-option input[type="checkbox"]:checked ~ .eax-area-check-box{
  background:#2d005d;border-color:#2d005d;
}
/* Checkmark via ::after */
.eax-area-check-box::after{
  content:'';display:block;
  width:.35rem;height:.6rem;
  border:2px solid #fff;border-top:none;border-left:none;
  transform:rotate(45deg) translateY(-1px);
  opacity:0;transition:opacity .15s ease;
}
.eax-cur-area-option input[type="checkbox"]:checked ~ .eax-area-check-box::after{
  opacity:1;
}
/* Focus-visible ring na caixa */
.eax-cur-area-option input[type="checkbox"]:focus-visible ~ .eax-area-check-box{
  outline:3px solid rgba(255,48,76,.4);
  outline-offset:2px;
}

.eax-area-opt-name{flex:1;line-height:1.3}

/* Rodapé "Limpar" */
.eax-cur-area-popover-footer{
  padding:.6rem 1rem;
  border-top:1px solid var(--eax-border,#e5e7eb);
  background:#fafafa;
}
.eax-cur-area-clear{
  background:none;border:none;padding:0;
  font-size:.8rem;font-weight:600;color:#9ca3af;
  cursor:pointer;font-family:inherit;
  transition:color .2s ease;
}
.eax-cur-area-clear:hover{color:#ff304c}

/* =========================================================
   Active area filter badges row
   ========================================================= */

.eax-cur-active-filters{
  background:#fff;
  border-bottom:1px solid var(--eax-border,#e5e7eb);
  padding:.6rem 0;
}
.eax-cur-active-filters-inner{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.eax-cur-active-filters-label{
  font-size:.8rem;font-weight:600;color:#6b7280;white-space:nowrap;
}
.eax-cur-badges-row{
  display:flex;flex-wrap:wrap;gap:.4rem;
}

/* Botão "Limpar filtros" na row de badges */
.eax-cur-clear-all{
  margin-left:auto;
  flex-shrink:0;
  background:none;border:none;padding:.2rem .1rem;
  font-size:.8rem;font-weight:600;color:#9ca3af;
  cursor:pointer;font-family:inherit;
  text-decoration:none;white-space:nowrap;
  transition:color .2s ease;
  align-self:center;
}
.eax-cur-clear-all:hover{
  color:#ff304c;
  text-decoration:underline;
}
.eax-cur-clear-all:focus-visible{
  outline:3px solid rgba(255,48,76,.4);
  outline-offset:2px;
  border-radius:.25rem;
}

/* Badge individual */
.eax-cur-area-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  vertical-align:middle;
  padding:.3rem .55rem .3rem .75rem;
  background:#f5f0ff;
  border:1.5px solid #c4a9f5;
  border-radius:9999px;
  font-size:.8rem;font-weight:600;color:#2d005d;
  line-height:1;
  transition:background .2s ease,border-color .2s ease;
}
.eax-cur-area-badge:hover{
  background:#ede5ff;border-color:#a07de5;
}

/* Botão × dentro do badge */
.eax-cur-badge-rm{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.15rem;height:1.15rem;
  border:none;border-radius:50%;padding:0;
  background:rgba(45,0,93,.15);
  color:#2d005d;
  font-size:.75rem;line-height:1;
  vertical-align:middle;
  cursor:pointer;font-family:inherit;
  transition:background .2s ease,color .2s ease;
  flex-shrink:0;
}
.eax-cur-badge-rm:hover{
  background:#ff304c;color:#fff;
}

/* Results count */
.eax-cur-count{
  margin:1.5rem 0;color:#6b7280;font-size:.95rem;
}
.eax-cur-count strong{color:#2d005d}

/* Course grid */
.eax-cur-grid{
  display:grid;grid-template-columns:1fr;gap:1.5rem;
}
@media(min-width:768px){.eax-cur-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.eax-cur-grid{grid-template-columns:repeat(3,1fr)}}

.eax-cur-card{
  background:#fff;border:1px solid var(--eax-border,#e5e7eb);
  border-radius:1rem;overflow:hidden;
  display:flex;flex-direction:column;height:100%;
  transition:all .3s ease;cursor:pointer;
  text-decoration:none;color:inherit;
}
.eax-cur-card:hover{
  transform:translateY(-.5rem);
  box-shadow:0 25px 50px -12px rgba(44,22,84,.25);
  color:inherit;
}

.eax-cur-card-header{
  position:relative;height:10rem;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.eax-cur-card-header::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--card-from,#2d005d),var(--card-to,#ff304c));
}
.eax-cur-card-header::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.2),transparent 60%);
}
.eax-cur-card-header i{
  position:relative;z-index:1;color:#fff;
  font-size:3.5rem;opacity:.95;
  transition:transform .5s ease;
}
.eax-cur-card:hover .eax-cur-card-header i{transform:scale(1.15) rotate(-5deg)}
.eax-cur-card-badges{
  position:absolute;top:.85rem;left:.85rem;right:.85rem;
  display:flex;justify-content:space-between;align-items:flex-start;z-index:2;
}
.eax-cur-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.3rem .65rem;border-radius:9999px;
  font-size:.7rem;font-weight:700;letter-spacing:.02em;
}
.eax-cur-badge-area{
  background:rgba(255,255,255,.95);color:#2d005d;
  backdrop-filter:blur(4px);
}
.eax-cur-badge-sale{
  background:#ff304c;color:#fff;
  box-shadow:0 4px 10px -2px rgba(255,48,76,.5);
  animation:eax-pulse 2s infinite;
}
@keyframes eax-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

.eax-cur-card-body{
  padding:1.25rem 1.25rem 0;display:flex;flex-direction:column;gap:.75rem;flex:1;
}
.eax-cur-card-meta{
  display:flex;align-items:center;gap:.65rem;font-size:.825rem;color:#6b7280;
  flex-wrap:wrap;
}
.eax-cur-card-meta-item{display:inline-flex;align-items:center;gap:.4rem}
.eax-cur-card-meta-item .eax-mini-icon{
  width:1.5rem;height:1.5rem;border-radius:.35rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(45,0,93,.1);color:#2d005d;font-size:.75rem;
}
.eax-cur-card-meta-item.workload .eax-mini-icon{background:rgba(255,48,76,.1);color:#ff304c}
.eax-cur-card-meta-item .eax-meta-sep{color:#d1d5db;margin:0 .15rem}
.eax-cur-card h3{
  font-size:1.1rem;font-weight:700;line-height:1.3;
  margin:0;color:var(--eax-fg,#2c1654);
}
.eax-cur-card-desc{
  font-size:.875rem;color:#6b7280;line-height:1.6;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.eax-cur-card-price{
  margin-top:auto;padding:1rem 1.25rem;
  background:linear-gradient(180deg,transparent,rgba(45,0,93,.03));
  border-top:1px dashed var(--eax-border,#e5e7eb);
  display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem;
}
.eax-cur-card-price-info{display:flex;flex-direction:column;gap:.1rem;line-height:1.2}
.eax-cur-card-price-info .eax-from{font-size:.7rem;color:#9ca3af;text-decoration:line-through}
.eax-cur-card-price-info .eax-installment{font-size:.7rem;color:#6b7280;font-weight:500}
.eax-cur-card-price-info .eax-price{
  font-size:1.35rem;font-weight:800;color:#2d005d;line-height:1;
}
.eax-cur-card-price-info .eax-price small{font-size:.65rem;font-weight:600;color:#6b7280;display:block;margin-top:.15rem}

.eax-cur-card-footer{padding:0 1.25rem 1.25rem;display:flex;gap:.5rem}
.eax-cur-card .eax-cur-card-cta{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.75rem 1rem;border-radius:9999px;
  background:#2d005d;color:#fff;font-weight:600;font-size:.875rem;
  text-decoration:none;transition:all .3s ease;
}
.eax-cur-card:hover .eax-cur-card-cta{background:#3b0772;transform:scale(1.02)}
.eax-cur-card-cta i{transition:transform .3s ease}
.eax-cur-card:hover .eax-cur-card-cta i{transform:translateX(.25rem)}

/* Empty state */
.eax-cur-empty{
  text-align:center;padding:4rem 1rem;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
}
.eax-cur-empty-icon{
  width:4rem;height:4rem;border-radius:50%;
  background:#f3f4f6;color:#9ca3af;
  display:flex;align-items:center;justify-content:center;
  font-size:1.75rem;
}
.eax-cur-empty h3{font-size:1.25rem;font-weight:700;color:#2d005d;margin:0}
.eax-cur-empty p{color:#6b7280;margin:0 0 1rem}

/* CTA bottom */
.eax-cur-cta{
  background:#2d005d;color:#fff;padding:3.5rem 0;text-align:center;
}
@media(min-width:768px){.eax-cur-cta{padding:5rem 0}}
.eax-cur-cta-icon{
  display:inline-flex;width:4rem;height:4rem;border-radius:50%;
  background:rgba(255,255,255,.2);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;
  font-size:1.75rem;margin-bottom:1rem;color:#fff;
}
.eax-cur-cta h2{
  font-size:1.85rem;font-weight:800;margin:0 0 1rem;line-height:1.2;text-wrap:balance;color:#fff;
}
@media(min-width:768px){.eax-cur-cta h2{font-size:2.5rem}}
.eax-cur-cta p{
  font-size:1rem;max-width:36rem;margin:0 auto 1.75rem;opacity:.95;line-height:1.65;
}
@media(min-width:768px){.eax-cur-cta p{font-size:1.15rem}}
.eax-cur-cta-actions{display:flex;flex-direction:column;gap:.75rem;justify-content:center;align-items:center}
@media(min-width:640px){.eax-cur-cta-actions{flex-direction:row}}
.eax-cur-cta .eax-btn-outline{border-color:#fff;color:#fff;background:transparent}
.eax-cur-cta .eax-btn-outline:hover{background:rgba(255,255,255,.15);color:#fff}

/* =========================================================
   Pagination — reescrita alinhada ao design system eax-
   ========================================================= */

/* Indicador de página na contagem (ex.: "— Página 2 de 5") */
.eax-cur-count-page{
  color:var(--eax-muted-fg,#6b7280);
  font-weight:500;
  margin-left:.25rem;
}

/* Container da paginação */
.eax-cur-pagination{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  margin:2.75rem 0 .5rem;
}

/* Botões "Anterior" / "Próximo" — estilo pílula, herda identidade de .eax-btn */
.eax-cur-page-nav{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.65rem 1.35rem;
  border-radius:9999px;
  background:#fff;
  color:#2d005d;
  border:2px solid #2d005d;
  font-weight:700;
  font-size:.875rem;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease,transform .2s ease;
  user-select:none;
  white-space:nowrap;
}
.eax-cur-page-nav:hover{
  background:#2d005d;
  color:#fff;
  box-shadow:var(--eax-shadow,0 10px 30px rgba(44,22,84,.10));
  transform:scale(1.04);
}
.eax-cur-page-nav i{
  font-size:.8rem;
  /* sem transição em i individual — o pai já transiciona */
}
.eax-cur-page-nav.is-disabled{
  color:#9ca3af;
  background:#f9fafb;
  border-color:var(--eax-border,#e5e7eb);
  cursor:not-allowed;
  opacity:.6;
  pointer-events:none;
  transform:none;
  box-shadow:none;
}

/* Lista de números de página */
.eax-cur-page-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.35rem;
  list-style:none;
  margin:0;
  padding:0;
}

/* Número de página individual */
.eax-cur-page-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.5rem;
  height:2.5rem;
  padding:0 .65rem;
  border-radius:9999px;
  background:#fff;
  color:#2d005d;
  border:1.5px solid var(--eax-border,#e5e7eb);
  font-weight:600;
  font-size:.925rem;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease;
}
.eax-cur-page-num:hover{
  background:#f3eeff;
  border-color:#c4a9f5;
  color:#2d005d;
  transform:translateY(-1px);
  box-shadow:var(--eax-shadow-sm,0 1px 3px rgba(44,22,84,.08));
}

/* Página ativa — gradient primário como identity do design system */
.eax-cur-page-num.is-active{
  background:linear-gradient(135deg,#2d005d 0%,#ff304c 100%);
  color:#fff;
  border-color:transparent;
  box-shadow:0 6px 18px rgba(45,0,93,.28);
  cursor:default;
  pointer-events:none;
}
.eax-cur-page-num.is-active:hover{
  transform:none;
}

/* Ellipsis */
.eax-cur-page-ellipsis{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.75rem;
  height:2.5rem;
  color:#9ca3af;
  font-weight:700;
  font-size:1rem;
  user-select:none;
  letter-spacing:.05em;
}

/* Responsivo: esconde o rótulo de texto nos botões nav em telas muito pequenas */
@media(max-width:480px){
  .eax-cur-page-nav-label{ display:none }
  .eax-cur-page-nav{ min-width:2.5rem; height:2.5rem; padding:0; justify-content:center }
  /* Números ficam levemente menores */
  .eax-cur-page-num{ min-width:2.2rem; height:2.2rem; font-size:.825rem }
}

/* prefers-reduced-motion — honrar preferência do usuário */
@media(prefers-reduced-motion:reduce){
  .eax-cur-page-nav,
  .eax-cur-page-num{ transition:none!important; transform:none!important }
}