/* ===========================================
   EuEstudoDireito — main.css (global)
   - Mobile-first
   - Responsividade total
   - Superfícies modernas (MD-like)
   =========================================== */

:root{
  --max: 1180px;

  --bg: #070b14;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.55);

  --surface: rgba(255,255,255,.06);
  --surface2: rgba(255,255,255,.09);
  --border: rgba(255,255,255,.10);

  --brand1: #7c3aed;
  --brand2: #06b6d4;
  --brand3: #22c55e;

  --danger: #ef4444;

  --r-xl: 22px;
  --r-lg: 18px;
  --r-md: 14px;

  --shadow: 0 24px 80px rgba(0,0,0,.45);
  --shadow2: 0 12px 30px rgba(0,0,0,.35);

  --ring: 0 0 0 3px rgba(6,182,212,.24);
  --tap: 44px;
}

[data-theme="light"]{
  --bg: #f6f7fb;
  --text: rgba(12,18,32,.92);
  --muted: rgba(12,18,32,.70);
  --muted2: rgba(12,18,32,.55);

  --surface: rgba(12,18,32,.04);
  --surface2: rgba(12,18,32,.06);
  --border: rgba(12,18,32,.10);

  --shadow: 0 18px 60px rgba(12,18,32,.12);
  --shadow2: 0 10px 26px rgba(12,18,32,.10);

  --ring: 0 0 0 3px rgba(124,58,237,.18);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

img, svg, video, canvas{ max-width: 100%; height: auto; }
p, h1, h2, h3, h4{ overflow-wrap: anywhere; }

.container{
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}
@media (max-width: 420px){
  .container{ width: calc(100% - 24px); }
}

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: .92em;
  padding: .15em .45em;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--border);
}

/* ===== Background (MD-like) ===== */
.bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.bg__grid{
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(600px 400px at 40% 10%, black, transparent 70%);
}
[data-theme="light"] .bg__grid{
  opacity: .10;
  background-image:
    linear-gradient(to right, rgba(12,18,32,.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(12,18,32,.14) 1px, transparent 1px);
}

.bg__orb{
  position: absolute;
  filter: blur(54px);
  opacity: .55;
  transform: translate3d(0,0,0);
}

.bg__orb--a{
  width: 540px; height: 540px;
  left: -220px; top: -140px;
  background: rgba(124,58,237,.55);
  border-radius: 50%;
}
.bg__orb--b{
  width: 620px; height: 620px;
  right: -260px; top: 40px;
  background: rgba(6,182,212,.38);
  border-radius: 48%;
}
.bg__orb--c{
  width: 560px; height: 560px;
  left: 35%; bottom: -260px;
  background: rgba(34,197,94,.22);
  border-radius: 50%;
}

/* ===== Topbar ===== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(0,0,0,.50), rgba(0,0,0,.08));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
[data-theme="light"] .topbar{
  background: linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.62));
  border-bottom: 1px solid rgba(12,18,32,.10);
}

.topbar__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.brand__mark{
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(124,58,237,.40), rgba(6,182,212,.26));
  border: 1px solid var(--border);
  box-shadow: var(--shadow2);
  flex: 0 0 auto;
}
.brand__mark i{ font-size: 18px; }

.brand__text{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
.brand__text strong{
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand__text small{
  color: var(--muted);
  font-weight: 600;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand--mini .brand__mark{
  width: 38px; height: 38px;
  border-radius: 16px;
}

/* Desktop nav */
.nav{
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav__link{
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  padding: 10px 10px;
  border-radius: 12px;
  transition: background .2s ease, color .2s ease;
}
.nav__link:hover{
  color: var(--text);
  background: rgba(255,255,255,.06);
}
[data-theme="light"] .nav__link:hover{
  background: rgba(12,18,32,.05);
}

/* Actions + Buttons */
.topbar__actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.btn{
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  padding: 10px 14px;
  border-radius: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  user-select: none;
  transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  min-height: var(--tap);
}

.btn i{ font-size: 16px; opacity: .95; }
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0) scale(.99); }
.btn:focus{ outline: none; box-shadow: var(--ring); }

.btn--primary{
  background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(6,182,212,.90));
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 55px rgba(124,58,237,.22);
}
.btn--soft{
  background: rgba(255,255,255,.08);
}
[data-theme="light"] .btn--soft{
  background: rgba(12,18,32,.05);
}
.btn--ghost{
  background: rgba(255,255,255,.03);
}
[data-theme="light"] .btn--ghost{
  background: rgba(255,255,255,.60);
}
.btn--icon{
  width: var(--tap);
  padding: 10px;
}
.btn--lg{
  padding: 12px 16px;
  border-radius: 18px;
}

.w-100{ width: 100%; }
.muted{ color: var(--muted); }

/* Mobile helpers */
.w-sm-100{ width: auto; }
@media (max-width: 640px){
  .w-sm-100{ width: 100%; }
  .nav--desktop{ display: none; }
  .navbtn{ display: inline-flex; }

  /* Logo: no mobile mostra só ícone */
  .brand__text{ display: none !important; }
}
@media (min-width: 641px){
  .navbtn{ display: none; }
  .brand__text{ display: flex !important; }
}

/* ===== Mobile nav ===== */
.navmobile{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
}
[data-theme="light"] .navmobile{
  background: rgba(255,255,255,.70);
  border-top: 1px solid rgba(12,18,32,.10);
}
.navmobile__inner{
  padding: 12px 0 14px;
  display: grid;
  gap: 10px;
}
.navmobile__link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  min-height: var(--tap);
}
[data-theme="light"] .navmobile__link{
  background: rgba(12,18,32,.04);
}
.navmobile__link span{ font-weight: 800; }
.navmobile__divider{
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 6px 0;
}
[data-theme="light"] .navmobile__divider{
  background: rgba(12,18,32,.10);
}

/* Strong hidden */
.hidden{ display: none !important; }

/* ===== Hero ===== */
.hero{ padding: 26px 0 10px; }
.hero__wrap{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 980px){
  .hero__wrap{ grid-template-columns: 1fr; }
}

.chip{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 800;
  max-width: 100%;
}

.hero__title{
  margin: 14px 0 10px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
}
.grad{
  background: linear-gradient(90deg, var(--brand1), var(--brand2), var(--brand3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__subtitle{
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.65;
  font-size: clamp(1.02rem, 1.2vw, 1.10rem);
  max-width: 70ch;
}

.hero__cta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0 16px;
}

.kpis{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 980px){
  .kpis{ grid-template-columns: 1fr; }
}
.kpi{
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  min-height: 68px;
}
[data-theme="light"] .kpi{ background: rgba(255,255,255,.80); }
.kpi i{
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(124,58,237,.20), rgba(6,182,212,.14));
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.kpi strong{ display:block; font-weight: 900; }
.kpi span{ display:block; color: var(--muted); margin-top: 2px; }

/* ===== Showcase Card ===== */
.showcard{
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow);
  overflow: hidden;
}
[data-theme="light"] .showcard{ background: rgba(255,255,255,.90); }

.showcard__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 10px;
}
.showcard__title{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}
.badge{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-weight: 900;
  font-size: .88rem;
}

.showcard__body{ padding: 8px 14px 14px; }
.pillrow{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  font-weight: 900;
  color: var(--muted);
  font-size: .92rem;
}
.pill i{ font-size: 14px; }
.pill--a{ background: rgba(124,58,237,.12); border-color: rgba(124,58,237,.22); }
.pill--b{ background: rgba(6,182,212,.12); border-color: rgba(6,182,212,.22); }
.pill--c{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.22); }
.pill--d{ background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.22); }
.pill--e{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.22); }

.mini{
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  padding: 12px;
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
[data-theme="light"] .mini{ background: rgba(12,18,32,.03); }
.mini__row{
  display: flex;
  align-items: center;
  gap: 10px;
}
.mini__dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(124,58,237,.9);
  box-shadow: 0 0 0 4px rgba(124,58,237,.18);
}
.mini__dot--alt{ background: rgba(6,182,212,.9); box-shadow: 0 0 0 4px rgba(6,182,212,.18); }
.mini__dot--ok{ background: rgba(34,197,94,.9); box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
.mini__line{
  height: 12px;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
}
[data-theme="light"] .mini__line{
  background: linear-gradient(90deg, rgba(12,18,32,.10), rgba(12,18,32,.03));
  border: 1px solid rgba(12,18,32,.10);
}

.search{ margin-top: 4px; }
.label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  color: var(--muted);
  margin-bottom: 8px;
}
.field{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 10px 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
}
[data-theme="light"] .field{ background: rgba(12,18,32,.04); }

.field input{
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  min-height: 24px;
}
.field input::placeholder{ color: var(--muted2); }
.hint{ display:block; margin-top: 10px; color: var(--muted2); line-height: 1.5; }

.showcard__foot{
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  gap: 10px;
}
[data-theme="light"] .showcard__foot{
  border-top: 1px solid rgba(12,18,32,.10);
}
@media (max-width: 640px){
  .showcard__foot{ flex-direction: column; }
}

/* ===== Sections ===== */
.section{ padding: 28px 0 10px; }
.section__head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 14px;
}
.section__title{
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  letter-spacing: -0.02em;
}
.section__desc{
  margin: 0;
  color: var(--muted);
  max-width: 70ch;
  line-height: 1.6;
}
@media (max-width: 860px){
  .section__head{ flex-direction: column; align-items: flex-start; }
}

/* Cards grid */
.cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 1060px){ .cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .cards{ grid-template-columns: 1fr; } }

.card{
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 230px;
}
[data-theme="light"] .card{ background: rgba(255,255,255,.90); }

.card__icon{
  width: 54px; height: 54px;
  border-radius: 18px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(124,58,237,.20), rgba(6,182,212,.14));
  border: 1px solid var(--border);
}
.card__icon i{ font-size: 20px; }
.card__title{ margin: 0; font-weight: 1000; letter-spacing: -0.01em; }
.card__text{ margin: 0; color: var(--muted); line-height: 1.65; flex: 1; }

.card--accent{
  background: linear-gradient(180deg, rgba(124,58,237,.16), rgba(6,182,212,.10));
}
[data-theme="light"] .card--accent{
  background: linear-gradient(180deg, rgba(124,58,237,.10), rgba(6,182,212,.08));
}

/* Steps */
.steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 980px){ .steps{ grid-template-columns: 1fr; } }

.step{
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  padding: 16px;
  box-shadow: var(--shadow2);
  display: flex;
  gap: 12px;
}
[data-theme="light"] .step{ background: rgba(255,255,255,.90); }
.step__num{
  width: 44px; height: 44px;
  border-radius: 16px;
  display: grid; place-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  font-weight: 1000;
}
.step__body h3{ margin: 0 0 6px; letter-spacing: -0.01em; }
.step__body p{ margin: 0; color: var(--muted); line-height: 1.6; }

/* FAQ */
.faq{
  display: grid;
  gap: 10px;
}
.faq__item{
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
  overflow: hidden;
}
[data-theme="light"] .faq__item{ background: rgba(255,255,255,.90); }

.faq__sum{
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  font-weight: 950;
  min-height: var(--tap);
}
.faq__sum::-webkit-details-marker{ display:none; }
.faq__sum i{ opacity: .85; }
.faq__ans{
  padding: 0 16px 14px;
  color: var(--muted);
  line-height: 1.65;
}

/* Footer */
.footer{
  padding: 28px 0 38px;
}
.footer__inner{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 16px;
}
[data-theme="light"] .footer__inner{ border-top: 1px solid rgba(12,18,32,.10); }

.footer__note{ margin: 12px 0 0; color: var(--muted); line-height: 1.65; max-width: 70ch; }
.footer__actions{
  display: flex;
  gap: 10px;
}
@media (max-width: 760px){
  .footer__inner{ flex-direction: column; }
  .footer__actions{ width: 100%; flex-direction: column; }
}

/* ===== Toast ===== */
.toast{
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  width: min(720px, calc(100% - 22px));
}
.toast.show{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-2px);
}
.toast__inner{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow2);
}
[data-theme="light"] .toast__inner{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(12,18,32,.14);
}
.toast__close{
  margin-left: auto;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: .9;
  min-height: var(--tap);
  min-width: var(--tap);
  display: grid;
  place-items: center;
}

/* ===== Cadastro (Signup) ===== */
.signup{
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 12px;
  align-items: start;
}
@media (max-width: 980px){
  .signup{ grid-template-columns: 1fr; }
}

.panel{
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
  overflow: hidden;
}
[data-theme="light"] .panel{ background: rgba(255,255,255,.90); }

.panel__head{
  padding: 14px 14px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.panel__title{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 1000;
}
.panel__body{
  padding: 12px 14px 14px;
}
.panel__foot{
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
[data-theme="light"] .panel__foot{ border-top: 1px solid rgba(12,18,32,.10); }
@media (max-width: 640px){
  .panel__foot{ flex-direction: column; align-items: stretch; }
}

.divider{
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 14px 0;
}
[data-theme="light"] .divider{
  background: rgba(12,18,32,.10);
}

.addrhead{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
@media (max-width: 640px){
  .addrhead{ flex-direction: column; align-items: flex-start; }
}

.formgrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 760px){
  .formgrid{ grid-template-columns: 1fr; }
}
.formgrid--addr{
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px){
  .formgrid--addr{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .formgrid--addr{ grid-template-columns: 1fr; }
}

.f{ min-width: 0; }
.flabel{
  display:block;
  font-weight: 900;
  color: var(--muted);
  margin: 0 0 6px;
}
.fctrl{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  min-height: var(--tap);
}
[data-theme="light"] .fctrl{
  background: rgba(12,18,32,.04);
}
.fctrl i{ opacity: .85; }
.fctrl input, .fctrl select{
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  min-height: 24px;
  min-width: 0;
}
.fctrl select{ cursor: pointer; }
.fhelp{
  display:block;
  margin-top: 6px;
  color: var(--muted2);
  min-height: 18px;
}

.summary{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  padding: 10px 12px;
  flex: 1;
  min-width: 0;
}
[data-theme="light"] .summary{ background: rgba(12,18,32,.03); }
.summary strong{ display:block; font-weight: 1000; }
.summary span{ display:block; color: var(--muted); margin-top: 2px; }

/* Plans */
.panel--plans .panel__body{ padding-top: 10px; }
.planlist{ display:grid; gap: 10px; }
.plan{
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  padding: 14px;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
[data-theme="light"] .plan{ background: rgba(12,18,32,.03); }
.plan:hover{ transform: translateY(-1px); }
.plan input{ position:absolute; opacity:0; pointer-events:none; }
.plan__top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items:flex-start;
}
.plan__name strong{ font-weight: 1100; }
.plan__name span{ display:block; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.plan__price{ text-align: right; }
.plan__price strong{ font-weight: 1100; }
.plan__price span{ display:block; color: var(--muted2); margin-top: 2px; }

.plan__tags{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-weight: 900;
  font-size: .9rem;
}
[data-theme="light"] .tag{ background: rgba(12,18,32,.04); }

.plan--featured{
  background: linear-gradient(180deg, rgba(124,58,237,.14), rgba(6,182,212,.10));
}
[data-theme="light"] .plan--featured{
  background: linear-gradient(180deg, rgba(124,58,237,.10), rgba(6,182,212,.08));
}

/* ===== Destaque do plano selecionado ===== */
.plan{
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

/* estado selecionado (index.js já aplica .is-selected no label.plan) */
.plan.is-selected{
  border-color: rgba(99, 102, 241, .55);              /* indigo */
  box-shadow:
    0 0 0 3px rgba(99, 102, 241, .18),
    0 10px 28px rgba(2, 6, 23, .12);
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(99,102,241,.10), rgba(99,102,241,.04));
}

/* opcional: reforça o “featured” quando selecionado */
.plan.plan--featured.is-selected{
  border-color: rgba(99, 102, 241, .70);
  box-shadow:
    0 0 0 3px rgba(99, 102, 241, .22),
    0 14px 34px rgba(2, 6, 23, .16);
}

/* “chip” visual no canto (sem alterar markup) */
/* .plan.is-selected::after{
  content: "Selecionado";
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(99, 102, 241, .16);
  border: 1px solid rgba(99, 102, 241, .30);
} */

/* botão do plano quando selecionado */
.plan.is-selected .planbtn{
  background: rgba(99, 102, 241, .14);
  border-color: rgba(99, 102, 241, .35);
  font-weight: 700;
}

.mt{ margin-top: 12px; }

.btn[disabled]{
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}

/* Estado de erro nos campos */
.fctrl.is-error{
  border-color: rgba(239,68,68,.55) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.16);
}
.fhelp.is-error{
  color: rgba(239,68,68,.9) !important;
  font-weight: 800;
}

/* ===== Select custom (tema do site) ===== */
.cselect{ position: relative; }

.cselect__btn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  min-height: var(--tap);
  cursor: pointer;
}
[data-theme="light"] .cselect__btn{
  background: rgba(12,18,32,.04);
}

.cselect__left{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cselect__value{
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cselect__chev{ opacity: .85; }

.cselect__btn:focus{
  outline: none;
  box-shadow: var(--ring);
}

.cselect__menu{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;

  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(10,12,22,.88);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow2);
  padding: 6px;
}
[data-theme="light"] .cselect__menu{
  background: rgba(255,255,255,.95);
}

.cselect__opt{
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 11px 10px;
  border-radius: 14px;
  font-weight: 800;
  text-align: left;
  min-height: var(--tap);
  transition: background .15s ease, transform .08s ease;
}
.cselect__opt:hover{
  background: rgba(255,255,255,.06);
}
[data-theme="light"] .cselect__opt:hover{
  background: rgba(12,18,32,.06);
}
.cselect__opt:active{ transform: scale(.99); }

.cselect__opt.is-selected{
  background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(6,182,212,.12));
  border: 1px solid rgba(255,255,255,.10);
}
[data-theme="light"] .cselect__opt.is-selected{
  border-color: rgba(12,18,32,.12);
}

/* Para não estourar no mobile */
@media (max-width: 640px){
  .cselect__menu{ max-height: 260px; overflow: auto; }
}

/* ===== Modal pagamento (tema EuEstudoDireito) ===== */
.dlg.hidden{ display:none; }
.dlg{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.dlg__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}
.dlg__card{
  position:relative;
  width:min(520px, 92vw);
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(10,12,22,.88);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
[data-theme="light"] .dlg__card{
  background: rgba(255,255,255,.92);
}

.dlg__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px;
  padding:16px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.dlg__title{
  display:flex; gap:10px; align-items:flex-start;
}
.dlg__title i{
  font-size: 20px;
  margin-top: 2px;
  opacity:.95;
}
.dlg__title strong{
  display:block;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.dlg__title small{
  display:block;
  color: var(--muted);
  margin-top:2px;
}

.dlg__x{
  border:0;
  background: transparent;
  color: var(--text);
  opacity:.8;
  padding:8px 10px;
  border-radius: 12px;
  cursor:pointer;
}
.dlg__x:hover{ background: rgba(255,255,255,.06); }
[data-theme="light"] .dlg__x:hover{ background: rgba(12,18,32,.06); }

.dlg__body{ padding:14px 16px 6px; }
.dlg__p{
  margin:0 0 12px;
  color: var(--text);
  line-height: 1.35;
}
.dlg__count{
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(124,58,237,.16), rgba(6,182,212,.10));
  font-weight: 900;
}

.dlg__hint{
  display:flex; align-items:center; gap:8px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-size: 13px;
}
[data-theme="light"] .dlg__hint{
  background: rgba(12,18,32,.04);
}

.dlg__foot{
  display:flex; gap:10px; justify-content:flex-end;
  padding: 12px 16px 16px;
}
@media (max-width: 640px){
  .dlg__foot{ flex-direction: column; }
}

/* Senha com botão "olho" sem quebrar altura do input */
.fctrl--pw { position: relative; }
.fctrl--pw input { padding-right: 46px; } /* espaço pro botão */

.pwbtn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 36px;            /* mantém proporção "md" */
  width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  opacity: .9;
}

.pwbtn:hover { opacity: 1; }

/* ===== Scrollbar padrão (tema EuEstudoDireito) =====
   - aplica no sistema todo
   - fino, moderno, respeita light/dark
   - Chrome/Edge/Safari (webkit) + Firefox
*/

/* Firefox */
*{
  scrollbar-width: thin; /* auto | thin | none */
  scrollbar-color: rgba(99,102,241,.55) rgba(15,23,42,.08);
}

/* Webkit (Chrome/Edge/Safari) */
::-webkit-scrollbar{
  width: 10px;    /* vertical */
  height: 10px;   /* horizontal */
}

::-webkit-scrollbar-track{
  background: rgba(15,23,42,.06);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(99,102,241,.65), rgba(56,189,248,.55));
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.65); /* “respiro” no track */
}

::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(99,102,241,.85), rgba(56,189,248,.75));
}

::-webkit-scrollbar-corner{
  background: transparent;
}

/* ===== Variantes por tema (se você usa .dark no <html> ou <body>) ===== */
.dark *{
  scrollbar-color: rgba(99,102,241,.65) rgba(255,255,255,.08);
}

.dark ::-webkit-scrollbar-track{
  background: rgba(255,255,255,.08);
}

.dark ::-webkit-scrollbar-thumb{
  border: 2px solid rgba(15,23,42,.55);
}

/* ===== Opcional: scrollbars ainda mais finos em áreas específicas ===== */
/* exemplo: editor Froala e cards/painéis */
.fr-wrapper, .panel__body, .card, .container{
  scrollbar-width: thin;
}

/* ===== Froala Fullscreen: corrigir transparência + z-index ===== */
html.fr-fullscreen, body.fr-fullscreen{
  background: #0b1220 !important; /* ou #fff se quiser fullscreen claro */
}

/* container fullscreen do Froala */
.fr-box.fr-fullscreen{
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
}

/* wrapper/editor no fullscreen com fundo sólido */
.fr-box.fr-fullscreen .fr-wrapper,
.fr-box.fr-fullscreen .fr-element{
  background: #ffffff !important;   /* área do texto */
}

/* toolbar/painéis no fullscreen */
.fr-box.fr-fullscreen .fr-toolbar,
.fr-box.fr-fullscreen .fr-popup,
.fr-box.fr-fullscreen .fr-modal{
  z-index: 1000000 !important;
}

/* se o seu tema aplica blur/transparência global, neutraliza dentro do fullscreen */
.fr-box.fr-fullscreen,
.fr-box.fr-fullscreen *{
  backdrop-filter: none !important;
  filter: none !important;
}

/* opcional: se o “bg/orbs” do seu layout estiver por cima */
.bg, .bg__grid, .bg__orb{
  z-index: 0 !important;
}

/* ===== Froala fullscreen -> modal grande (90% da tela) ===== */
.fr-box.fr-fullscreen{
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: 92vw !important;
  height: 92vh !important;

  max-width: none !important;     /* mata limites antigos */
  max-height: none !important;

  z-index: 999999 !important;
  background: #fff !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* alguns builds colocam limite no wrapper/iframe interno */
.fr-box.fr-fullscreen .fr-wrapper{
  width: 100% !important;
  height: calc(92vh - 116px) !important; /* toolbar dupla + second toolbar */
  max-height: none !important;
  overflow: auto !important;
  background: #fff !important;
}

/* garante editor ocupa tudo */
.fr-box.fr-fullscreen .fr-element{
  min-height: calc(92vh - 140px) !important;
  background: #fff !important;
}

/* backdrop do fullscreen */
html.fr-fullscreen, body.fr-fullscreen{
  background: rgba(11, 18, 32, .70) !important;
}
body.fr-fullscreen .bg{ display:none !important; }

/* por segurança, remove qualquer max-width no container pai */
body.fr-fullscreen .container,
body.fr-fullscreen main,
body.fr-fullscreen .cards,
body.fr-fullscreen .card{
  max-width: none !important;
}
/* martelo: qualquer coisa dentro do fullscreen não pode limitar largura */
body.fr-fullscreen .fr-box.fr-fullscreen,
body.fr-fullscreen .fr-box.fr-fullscreen *{
  max-width: none !important;
}
/* ===== Froala fullscreen -> modal 90% largura (forçando acima do inline) ===== */
body.fr-fullscreen .fr-box.fr-fullscreen,
body.fr-fullscreen .fr-box.fr-fullscreen[style],
body.fr-fullscreen .fr-box.fr-basic.fr-fullscreen,
body.fr-fullscreen .fr-box.fr-basic.fr-fullscreen[style]{
  width: 90vw !important;
  max-width: none !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-50%) !important;
}
/* garante que a topbar não cresça (use a altura que você já tem; aqui exemplo 64px) */
.topbar{
  height: 64px;
}
.topbar__inner{
  height: 64px;
  display:flex;
  align-items:center;
}

/* marca/brand */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

/* “slot” do logo: ocupa a altura do menu, então não aumenta */
.brand__logoWrap{
  height: 70px;              /* <= controla a altura útil do logo dentro do menu */
  width: 100px;               /* <= deixa o logo “maior” na largura */
  display:flex;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;           /* <= impede de aumentar a topbar */
}

/* logo cresce, mas respeita a altura do slot */
.brand__logo{
  height: 100%;
  width: 100%;
  object-fit: contain;
  display:block;
}

/* mobile: mantém menu baixo e logo ainda grande proporcionalmente */
@media (max-width: 720px){
  .topbar,
  .topbar__inner{
    height: 56px;
  }
  .brand__logoWrap{
    height: 44px;
    width: 78px;
  }
}

/* =========================
   Select2 — padrão global EED
   (dropdown bonito + responsivo)
========================= */
.select2-container{ width:100% !important; }
.select2-container .select2-selection--single{
  height: 46px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: rgba(255,255,255,.35) !important;
  display:flex !important;
  align-items:center !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: 46px !important;
  padding-left: 44px !important; /* espaço pra ícone dentro do input */
  padding-right: 34px !important;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  font-size: 14px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 46px !important;
  right: 10px !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear{
  margin-right: 34px !important;
}

.select2-dropdown{
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.18) !important;
}
.select2-results__option{
  padding: 10px 12px !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
  background: rgba(99,102,241,.16) !important;
  color: inherit !important;
}
.select2-search--dropdown{
  padding: 10px !important;
}
.select2-search--dropdown .select2-search__field{
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  padding: 10px 12px !important;
  outline: none !important;
}

/* mobile: dropdown não estoura */
@media (max-width:720px){
  .select2-dropdown{ max-width: calc(100vw - 18px) !important; }
}

/* =========================================================
   EED / QAP - TABELAS RESPONSIVAS PADRÃO (DataTables)
   Colocar no main.css
========================================================= */

.table-card {
  width: 100%;
  min-width: 0;
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 10px;
}

.table-toolbar__note {
  font-size: 13px;
  color: var(--muted);
}

.table-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.table-filter {
  min-width: 0;
}

.table-filter label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.table-filter .fctrl {
  min-height: 44px;
}

.table-actions-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.table-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
}

[data-theme="light"] .table-shell {
  border: 1px solid rgba(12, 18, 32, .10);
  background: rgba(255, 255, 255, .56);
}

/* tabela base */
.app-table {
  width: 100% !important;
  min-width: 900px;
  border-collapse: collapse !important;
}

table.dataTable.app-table {
  width: 100% !important;
  margin: 0 !important;
  table-layout: fixed;
  border-collapse: collapse !important;
}

table.dataTable.app-table thead th,
table.dataTable.app-table tbody td {
  padding: 8px 10px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  vertical-align: middle;
}

table.dataTable.app-table thead th {
  font-weight: 800;
  color: var(--text);
  border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
  background: rgba(255, 255, 255, .04);
  white-space: nowrap;
}

[data-theme="light"] table.dataTable.app-table thead th {
  border-bottom: 1px solid rgba(12, 18, 32, .10) !important;
  background: rgba(12, 18, 32, .03);
}

table.dataTable.app-table tbody td {
  color: var(--text);
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  word-break: break-word;
}

[data-theme="light"] table.dataTable.app-table tbody td {
  border-bottom: 1px solid rgba(12, 18, 32, .08) !important;
}

table.dataTable.app-table tbody tr:hover {
  background: rgba(255, 255, 255, .04);
}

[data-theme="light"] table.dataTable.app-table tbody tr:hover {
  background: rgba(12, 18, 32, .04);
}

/* wrapper do DataTables */
.dataTables_wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  display: none !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  padding: 10px 12px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  color: var(--text) !important;
  background: transparent !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  border-color: rgba(99, 102, 241, .25) !important;
  background: rgba(99, 102, 241, .14) !important;
  color: var(--text) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-color: rgba(99, 102, 241, .18) !important;
  background: rgba(99, 102, 241, .10) !important;
  color: var(--text) !important;
}

/* células utilitárias */
.app-table__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.app-table__main b {
  font-size: 12px;
  line-height: 1.2;
}

.app-table__sub {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.app-table__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: var(--text);
}

[data-theme="light"] .app-table__badge {
  border: 1px solid rgba(12, 18, 32, .10);
  background: rgba(12, 18, 32, .04);
}

.app-table__actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}

.app-table__actions .btn {
  padding: 7px 9px !important;
  min-height: 34px !important;
  font-size: 11px !important;
}

.app-table__actions .btn span {
  font-size: 11px !important;
}

/* responsivo */
@media (max-width: 980px) {
  .table-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .table-filters {
    grid-template-columns: 1fr;
  }

  .app-table {
    min-width: 780px;
  }

  table.dataTable.app-table thead th,
  table.dataTable.app-table tbody td {
    padding: 7px 8px !important;
    font-size: 11px !important;
  }

  .app-table__actions .btn span {
    display: none;
  }

  .app-table__actions .btn {
    min-width: 36px;
    justify-content: center;
  }
}

/* =========================================================
   Controle de colunas visíveis - DataTable simples
========================================================= */

.table-columns {
  position: relative;
}

.table-columns__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,16,28,.98);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  z-index: 80;
}

[data-theme="light"] .table-columns__menu {
  border: 1px solid rgba(12,18,32,.12);
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
}

.table-columns__menu.hidden {
  display: none !important;
}

.table-columns__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.table-columns__item:hover {
  background: rgba(255,255,255,.06);
}

[data-theme="light"] .table-columns__item:hover {
  background: rgba(12,18,32,.06);
}

.table-columns__item input {
  accent-color: #6366f1;
}