/* =========================================================
   CPCERT AUTH MODAL (PRO + SUAVE + RESPONSIVO + SEM CONFLITO)
   Prefixo: cpct-auth-
   ========================================================= */

#cpct-auth-modal.cpct-auth-modal{
  display:none !important;
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
}

#cpct-auth-modal.cpct-auth-modal.is-open{ display:block !important; }

#cpct-auth-modal *{
  box-sizing: border-box !important;
}

/* backdrop mais suave */
#cpct-auth-modal .cpct-auth-backdrop{
  position:absolute !important;
  inset:0 !important;
  background: rgba(17, 24, 39, .55) !important; /* cinza/azulado */
  backdrop-filter: blur(10px) !important;
}

/* dialog */
#cpct-auth-modal .cpct-auth-dialog{
  position:relative !important;
  width: min(560px, 92vw) !important;
  margin: 9vh auto !important;
  background:#ffffff !important;
  border-radius: 16px !important;              /* menos “bolacha” */
  padding: 22px 22px 18px !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,.25),
    0 2px 0 rgba(255,255,255,.6) inset !important;
  overflow:hidden !important;
}

/* close (X limpo, sem fundo) */
#cpct-auth-modal .cpct-auth-x{
  position:absolute !important;
  top:2px !important;
  right:7px !important;
  width:auto !important;
  height:auto !important;
  padding: 6px !important;
  border:0 !important;
  background: transparent !important;   /* REMOVE fundo */
  color:#0f172a !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor:pointer !important;
}

#cpct-auth-modal .cpct-auth-x:hover{
  color:#000 !important;
  opacity: .75 !important;
}


/* header centralizado */
#cpct-auth-modal .cpct-auth-head{
  text-align:center !important;
  margin: 6px 6px 14px !important;
}

#cpct-auth-modal .cpct-auth-title{
  margin:0 !important;
  font-size: 20px !important;
  font-weight: 400 !important;                 /* menos pesado */
  letter-spacing: -0.2px !important;
  color:#0f172a !important;
}

#cpct-auth-modal .cpct-auth-sub{
  margin:8px 0 0 !important;
  font-size: 13px !important;
  color:#64748b !important;
  font-weight: 500 !important;
}

/* tabs mais “chip” */
/* tabs – flat, pouca curva, profissional */
#cpct-auth-modal .cpct-auth-tabs{
  display:flex !important;
  gap:0 !important;
  padding: 0 !important;
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;   /* pouca curva */
  overflow:hidden !important;
  margin: 12px 0 18px !important;
}

#cpct-auth-modal .cpct-auth-tab{
  flex:1 !important;
  border:0 !important;
  padding: 11px 12px !important;
  cursor:pointer !important;
  background: transparent !important;
  font-size: 13px !important;
  color:#64748b !important;
  border-right: 1px solid #e5e7eb !important;
  transition: background .12s ease, color .12s ease !important;
}

#cpct-auth-modal .cpct-auth-tab:last-child{
  border-right:0 !important;
}

#cpct-auth-modal .cpct-auth-tab.is-active{
  background:#ffffff !important;
  color:#0f172a !important;
  box-shadow: inset 0 -2px 0 #0f172a !important; /* detalhe elegante */
}

/* panels */
#cpct-auth-modal .cpct-auth-panel{ display:none !important; }
#cpct-auth-modal .cpct-auth-panel.is-active{ display:block !important; }

/* campos */
#cpct-auth-modal .cpct-auth-field{
  margin-bottom: 14px !important;
}

#cpct-auth-modal .cpct-auth-label{
  display:block !important;
  font-size: 13px !important;
  color:#0f172a !important;
  margin:0 0 6px !important;
}

/* inputs: sem estourar, padding mais elegante */
#cpct-auth-modal .cpct-auth-input{
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1.2em;
}

#cpct-auth-modal .cpct-auth-input:focus{
  border-color:#94a3b8 !important;
  box-shadow: 0 0 0 4px rgba(148,163,184,.25) !important;
}


/* link inferior */
#cpct-auth-modal .cpct-auth-link{
  width:100% !important;
  margin-top: 10px !important;
  border:0 !important;
  background: transparent !important;
  cursor:pointer !important;
  font-size: 13px !important;
  color:#0f172a !important;
  text-decoration: none !important;
}
#cpct-auth-modal .cpct-auth-link:hover{
  color: #d93025 !important;
}

/* erro */
#cpct-auth-modal .cpct-auth-error{
  margin: 10px 0 14px !important;
  padding: 12px 12px !important;
  border-radius: 12px !important;
  background: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
  color:#9f1239 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* =========================================================
   MOBILE FULL SCREEN
   ========================================================= */
@media (max-width: 640px){
  #cpct-auth-modal .cpct-auth-dialog{
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 18px 16px 16px !important;
    box-shadow: none !important;
  }

  #cpct-auth-modal .cpct-auth-head{
    margin-top: 24px !important;
  }

  #cpct-auth-modal .cpct-auth-title{
    font-size: 18px !important;
  }
}

#cpct-auth-modal .cpct-auth-divider{
  display:flex !important;
  align-items:center !important;
  gap: 12px !important;
  margin: 16px 0 12px !important;
  color:#64748b !important;
  font-size: 12px !important;
}
#cpct-auth-modal .cpct-auth-divider::before,
#cpct-auth-modal .cpct-auth-divider::after{
  content:"" !important;
  flex:1 !important;
  height:1px !important;
  background:#e5e7eb !important;
}
#cpct-auth-modal .cpct-auth-divider span{
  white-space:nowrap !important;
}


/* =========================================================
   SOCIAL
   ========================================================= */
#cpct-auth-modal .cpct-auth-social-icons{
  display:flex !important;
  justify-content:center !important;
  gap: 12px !important;
  margin: 12px 0 6px !important;
}

#cpct-auth-modal .cpct-auth-social-icons button{
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  transition: background .12s ease, border-color .12s ease, transform .06s ease !important;
}

#cpct-auth-modal .cpct-auth-social-icons button:hover{
  background:#f8fafc !important;
  border-color:#cbd5e1 !important;
}

#cpct-auth-modal .cpct-auth-social-icons button:active{
  transform: translateY(1px) !important;
}

#cpct-auth-modal .cpct-auth-social-icons img{
  width: 18px !important;
  height: 18px !important;
  opacity: .9 !important;
}

#cpct-auth-modal .cpct-auth-social-icons img{
  width: 18px !important;
  height: 18px !important;
  opacity: .85 !important;
  filter: grayscale(1) brightness(.35) !important; /* cinza escuro suave */
}
#cpct-auth-modal .cpct-auth-social-icons button:hover img{
  opacity: 1 !important;
  filter: grayscale(1) brightness(.25) !important;
}

/* =========================
   SOCIAL - TÍTULO BONITO
   ========================= */
#cpct-auth-modal .cpct-auth-social{
  margin: 14px 0 6px !important;
  text-align: center !important;
}

#cpct-auth-modal .cpct-auth-social-title{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap: 12px !important;
  margin: 10px 0 12px !important;
  color:#64748b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
}

#cpct-auth-modal .cpct-auth-social-title::before,
#cpct-auth-modal .cpct-auth-social-title::after{
  content:"" !important;
  flex:1 !important;
  height:1px !important;
  background:#e5e7eb !important;
}

/* mantém seus botões como estão, só centraliza com espaçamento elegante */
#cpct-auth-modal .cpct-auth-social-icons{
  display:flex !important;
  justify-content:center !important;
  gap: 12px !important;
}


/* ====== HINTS / STEPS ====== */
#cpct-auth-modal .cpct-auth-hint{
  display:block !important;
  margin-top: 6px !important;
  font-size: 12px !important;
  color:#64748b !important;
  line-height: 1.35 !important;
}

#cpct-auth-modal .cpct-auth-step{ display:none !important; }
#cpct-auth-modal .cpct-auth-step.is-active{ display:block !important; }

#cpct-auth-modal .cpct-auth-otp-top{
  margin: 4px 0 14px !important;
  text-align:center !important;
}
#cpct-auth-modal .cpct-auth-otp-title{
  font-size: 15px !important;
  font-weight: 600 !important;
  color:#0f172a !important;
}
#cpct-auth-modal .cpct-auth-otp-sub{
  margin-top: 6px !important;
  font-size: 13px !important;
  color:#64748b !important;
}

#cpct-auth-modal .cpct-auth-otp-box{
  margin: 12px 0 12px !important;
}

#cpct-auth-modal .cpct-auth-otp-input{
  display:block !important;
  width: 100% !important;
  height: 52px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-size: 20px !important;
  letter-spacing: 6px !important;
  text-align: center !important;
}

#cpct-auth-modal .cpct-auth-otp-input:focus{
  border-color:#94a3b8 !important;
  box-shadow: 0 0 0 4px rgba(148,163,184,.25) !important;
}

#cpct-auth-modal .cpct-auth-otp-actions{
  margin-top: 10px !important;
}

/* Done */
#cpct-auth-modal .cpct-auth-done{
  text-align:center !important;
  padding: 10px 2px 2px !important;
}
#cpct-auth-modal .cpct-auth-done-title{
  font-size: 18px !important;
  font-weight: 700 !important;
  color:#0f172a !important;
}
#cpct-auth-modal .cpct-auth-done-sub{
  margin-top: 6px !important;
  font-size: 13px !important;
  color:#64748b !important;
}

/* Botão largo exclusivo do modal de auth */
#cpct-auth-modal .cpct-auth-btn-wide{
  width: 33% !important;
  min-width: 220px;          /* evita ficar pequeno em telas grandes */
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

#cpct-auth-modal .cpct-auth-tabs{ margin: 14px 0 10px !important; }
#cpct-auth-modal .cpct-auth-panel{ margin-top: 8px !important; }



/* =========================
   LOADING (botões do modal)
   ========================= */
#cpct-auth-modal .cpct-auth-btn.is-loading{
  position: relative !important;
  opacity: .85 !important;
  pointer-events: none !important;
  filter: saturate(.9) !important;
}

#cpct-auth-modal .cpct-auth-btn .cpct-btn-spinner{
  display:none !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid rgba(255,255,255,.45) !important;
  border-top-color: rgba(255,255,255,1) !important;
  border-radius: 50% !important;
  animation: cpctSpin .7s linear infinite !important;
  vertical-align: middle !important;
  margin-right: 10px !important;
}

#cpct-auth-modal .cpct-auth-btn.is-loading .cpct-btn-spinner{
  display:inline-block !important;
}

@keyframes cpctSpin{
  to { transform: rotate(360deg); }
}

/* /entrar = página normal (sem overlay/backdrop) */
.cpct-auth-page #cpct-auth-modal{
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  padding: 0 !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  display: block !important;
}

.cpct-auth-page #cpct-auth-modal .cpct-auth-backdrop{
  display: none !important;
}

.cpct-auth-page #cpct-auth-modal [data-cpct-auth-close]{
  display: none !important;
}

.cpct-auth-page #cpct-auth-modal .cpct-auth-dialog{
  position: relative !important;
  margin: 40px auto !important;
  transform: none !important;
}


/* /cadastre-se e /entrar = página normal (sem overlay/backdrop) */
.cpct-auth-page #cpct-auth-modal{
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  padding: 0 !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  display: block !important;
}

.cpct-auth-page #cpct-auth-modal .cpct-auth-backdrop{
  display: none !important;
}

.cpct-auth-page #cpct-auth-modal [data-cpct-auth-close]{
  display: none !important;
}

.cpct-auth-page #cpct-auth-modal .cpct-auth-dialog{
  position: relative !important;
  margin: 40px auto !important;
  transform: none !important;
}

/* Inverter ordem das abas por página */
.cpct-auth-tabs[data-tabs-order="login-first"]{
  flex-direction: row-reverse;
}