/* ===== LPX — Tema escuro translúcido SÓ PARA MODAIS ===== */
.modal-backdrop.show{
  background: radial-gradient(1200px 600px at 50% 40%, rgba(0,180,255,.18), transparent 60%),
              rgba(4,8,12,.78);
  opacity: 1 !important;
}

/* Escopo: estiliza apenas modais */
.modal .modal-content{
  background: rgba(16,22,32,.72);
  border: 1px solid rgba(0,209,255,.22);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  color: #e7eefb;
  overflow: hidden;
}
@supports (backdrop-filter: blur(10px)){
  .modal .modal-content{ backdrop-filter: blur(10px) saturate(120%); }
}

.modal .modal-header,
.modal .modal-footer{ background: transparent; border:0; }
.modal .modal-title{ font-weight: 700; letter-spacing:.2px; color:#e7eefb; }

/* Botão fechar compatível com bootstrap e “close” legado */
.modal .btn-close,
.modal .close{
  position: relative;
  background: none !important;
  border: 0;
  box-shadow: none !important;
  opacity: .8;
  filter: invert(1) grayscale(100%);
}
.modal .btn-close:hover,
.modal .close:hover{ opacity: 1; }

/* Campos */
.modal .form-control,
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="number"]{
  background: rgba(8,12,18,.55);
  border: 1px solid rgba(255,255,255,.08);
  color: #e7eefb;
  border-radius: 12px;
}
.modal .form-control::placeholder{ color:#90a0b5; }
.modal .form-control:focus{
  background: rgba(10,16,24,.7);
  border-color: rgba(0,209,255,.45);
  box-shadow: 0 0 0 3px rgba(0,209,255,.15);
  color:#e7eefb;
}

/* Botões dentro do modal */
.modal .btn{ border-radius:12px; border:1px solid rgba(255,255,255,.08); }
.modal .btn-primary{
  background: linear-gradient(135deg, #3bb4ff, #6d7bff);
  border-color: transparent;
  color: #0b1020; font-weight:700;
}
.modal .btn-primary:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.modal .btn-secondary,
.modal .btn-outline-secondary{
  background: rgba(255,255,255,.06);
  color: #e7eefb; border-color: rgba(255,255,255,.12);
}
.modal .btn-secondary:hover,
.modal .btn-outline-secondary:hover{ background: rgba(255,255,255,.1); }

/* Cards de tiers dentro do modal (se existirem) */
.modal .donate-tier, .modal .lpx-card, .modal .price-box{
  background: rgba(8,12,18,.55);
  border: 1px solid rgba(0,209,255,.15);
  border-radius: 14px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.modal .donate-tier:hover, .modal .lpx-card:hover, .modal .price-box:hover{
  transform: translateY(-2px);
  border-color: rgba(0,209,255,.45);
  box-shadow: 0 10px 30px rgba(0,209,255,.12);
}

/* Barra de status (dentro do modal) */
.modal .lpx-status{
  display:none;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(8,12,18,.55);
  border: 1px solid rgba(0,209,255,.25);
  color: #e7eefb;
}
.modal .lpx-status.is-sending{
  border-color: rgba(0,209,255,.35);
}
.modal .lpx-status.is-ok{
  border-color: rgba(34,211,168,.5);
  background: rgba(34,211,168,.12);
  color: #d3ffee;
}
.modal .lpx-status.is-error{
  border-color: rgba(255,95,109,.5);
  background: rgba(255,95,109,.12);
  color: #ffd2d7;
}

/* Pills Pix/PayPal (se houver) */
.modal .nav-pills .nav-link{
  color:#a9b6c7; background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08); border-radius:999px; margin-right:8px;
}
.modal .nav-pills .nav-link.active{
  color:#08111b; background: linear-gradient(135deg,#3bb4ff,#6d7bff); border-color:transparent;
}

/* Modal Ranking LPX */
.modal-dialog.modal-ranking {
    max-width: 90% !important;
    width: 90% !important;
    margin: auto;
}

.modal-content.modal-ranking-content {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
}

.modal-body.modal-ranking-body {
    height: 80vh;
    padding: 0;
}

/* ===========================================================
   LPX — MODAL FUTURISTA COMPLETO (NEON, GLOW, BLUR, ANIMAÇÃO)
   =========================================================== */

/* ---- Animação de entrada ---- */
@keyframes lpx-modal-pop {
    0%   { transform: translateY(40px) scale(0.92); opacity: 0; }
    60%  { transform: translateY(0) scale(1.02); opacity: 1; }
    100% { transform: translateY(0) scale(1); }
}

/* ---- Fundo (backdrop) com efeito de energia ---- */
.modal-backdrop.show {
    background: radial-gradient(1200px 600px at 50% 40%, rgba(0,180,255,.20), transparent 60%),
                rgba(0,0,0,0.85);
    backdrop-filter: blur(6px);
    opacity: 1 !important;
}

/* ---- Estrutura principal do modal ---- */
.modal-dialog.modal-ranking {
    max-width: 95% !important;
    width: 95% !important;
    margin: auto;
    animation: lpx-modal-pop .35s ease-out;
}

.modal-content.modal-ranking-content {
    position: relative;
    background: rgba(10,14,22,0.65);
    border-radius: 18px;
    border: 1px solid rgba(0,209,255,0.40);
    box-shadow:
        0 0 18px rgba(0,209,255,0.18),
        0 0 55px rgba(0,209,255,0.10),
        inset 0 0 25px rgba(0,209,255,0.08);
    overflow: hidden;
    backdrop-filter: blur(12px) saturate(140%);
}

/* ---- Borda neon dinâmica ---- */
.modal-content.modal-ranking-content::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, rgba(0,200,255,.85), rgba(255,120,40,.75));
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: .25;
}

/* ---- Cabeçalho ---- */
.modal-header {
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(to bottom, rgba(0,209,255,.10), transparent);
}

.modal-title {
    color: #e9f7ff;
    font-weight: 800;
    text-shadow: 0 0 6px rgba(0,209,255,.60);
    letter-spacing: .4px;
}

/* ---- Botão fechar ---- */
.modal .close,
.modal .btn-close {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12) !important;
    transition: .15s ease;
}

.modal .close:hover,
.modal .btn-close:hover {
    background: rgba(0,209,255,.25);
    border-color: rgba(0,209,255,.45) !important;
    box-shadow: 0 0 12px rgba(0,209,255,.40);
}

/* ---- Corpo ---- */
.modal-body.modal-ranking-body {
    height: 82vh;
    padding: 0;
    background: rgba(4,8,14,.2);
}

/* ---- Scroll bonito ---- */
.modal-ranking-body iframe::-webkit-scrollbar {
    width: 10px;
}
.modal-ranking-body iframe::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3bb4ff, #6d7bff);
    border-radius: 10px;
}
.modal-ranking-body iframe::-webkit-scrollbar-track {
    background: rgba(255,255,255,.05);
}

/* ---- Sombras internas ---- */
.modal-ranking-body iframe {
    box-shadow: inset 0 0 30px rgba(0,0,0,.45),
                inset 0 0 60px rgba(0,209,255,.05);
}

/* ---- Glow suave quando o mouse passa na área ---- */
.modal-content.modal-ranking-content:hover {
    box-shadow:
        0 0 25px rgba(0,209,255,0.22),
        0 0 70px rgba(0,209,255,0.12);
}