/* ===================== ALUGAR SERVIDOR ===================== */

:root{
  --demo-green:#00c853;
  --demo-border:rgba(255,255,255,.12);
}

.alugar-servidor-main{
  padding:var(--container-gap);
}

.demo-slider{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:var(--container-gap);
  overflow:hidden;

  background:rgba(0,45,0,.72);
  border:1px solid var(--demo-border);
  border-radius:var(--radius);
  box-shadow:5px 5px 25px rgba(0,0,0,1);
}

/* TOPO ARRUMADO */
.demo-header{
  width:100%;
  margin:0 0 var(--container-gap);
  padding:var(--container-gap);
  border-radius:var(--radius);

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:var(--container-gap);

  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 0 14px rgba(0,0,0,.65);
  text-align:center;
}

.demo-title{
  width:100%;
  max-width:1100px;
  margin:30px 30px 0;
  padding:20px;

  color:#fff;
  font-size:clamp(24px,3.2vw,38px);
  font-weight:900;
  letter-spacing:.8px;
  line-height:1.18;
  text-transform:uppercase;
  text-align:center;

  text-shadow:0 0 18px rgba(0,200,83,.25);
}

.demo-title .fs-icon,
.demo-title img.fs-icon{
  height:34px;
  width:auto;
  display:inline-block;
  vertical-align:middle;
  margin:0 4px;
  position:relative;
  top:-3px;
}

.demo-subtitle{
  max-width:720px;
  margin:0 auto;

  color:rgba(255,255,255,.95);
  font-size:16px;
  font-weight:700;
  line-height:1.65;
  text-align:center;

  text-shadow:0 0 6px rgba(0,0,0,.6);
}

/* BADGES */
.demo-badges{
  width:100%;
  max-width:850px;
  margin:0 auto;

  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px 12px;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:8px 14px;
  border-radius:999px;

  background:rgba(0,60,0,.75);
  border:1px solid rgba(255,255,255,.15);

  box-shadow:
    inset 0 0 8px rgba(0,0,0,.6),
    0 4px 10px rgba(0,0,0,.6);

  color:#fff;
  font-size:14px;
  font-weight:800;
  white-space:nowrap;

  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.badge i{
  color:#00ff88;
  text-shadow:0 0 6px rgba(0,255,136,.6);
}

.badge:hover{
  transform:translateY(-2px);
  filter:saturate(1.08);
  box-shadow:
    inset 0 0 8px rgba(0,0,0,.6),
    0 8px 18px rgba(0,0,0,.85);
}

.badge--highlight{
  background:linear-gradient(to right, rgba(0,120,0,.95), rgba(0,180,0,.95));
  border-color:rgba(0,255,120,.65);
  box-shadow:
    inset 0 0 10px rgba(0,0,0,.6),
    0 0 14px rgba(0,255,120,.45);
}

/* SWIPER */
.swiper{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  aspect-ratio:16 / 9;
  min-height:360px;
  max-height:680px;

  border-radius:var(--radius);
  overflow:hidden;

  background:rgba(0,44,0,.85);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 0 20px rgba(0,0,0,.8);
}

.swiper-wrapper,
.swiper-slide{
  height:100%;
}

.swiper-slide a{
  display:block;
  width:100%;
  height:100%;
}

.swiper-slide img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  cursor:zoom-in;
  filter:saturate(1.02) contrast(1.02);
}

.swiper-button-next,
.swiper-button-prev{
  width:45px;
  height:80px;

  background:rgba(0,60,0,.75) !important;

  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;

  color:#25d366;
  text-shadow:0 0 12px rgba(37,211,102,.55);

  box-shadow:
    inset 0 0 8px rgba(0,0,0,.55),
    0 4px 10px rgba(0,0,0,.45);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background-color .25s ease,
    color .25s ease;
}

.swiper-button-next::after,
.swiper-button-prev::after{
  font-size:32px;
  font-weight:900;
  transition:transform .25s ease;
}

/* Hover */
.swiper-button-next:hover,
.swiper-button-prev:hover{
  transform:scale(1.12);

  background:rgba(0,90,0,.95) !important;

  color:#30f07a;

  text-shadow:0 0 20px rgba(37,211,102,.95);

  box-shadow:
    inset 0 0 12px rgba(0,0,0,.45),
    0 0 20px rgba(37,211,102,.35),
    0 8px 20px rgba(0,0,0,.55);
}

.swiper-button-next:hover::after,
.swiper-button-prev:hover::after{
  transform:scale(1.15);
}

/* Clique */
.swiper-button-next:active,
.swiper-button-prev:active{
  transform:scale(.95);

  box-shadow:
    inset 0 0 20px rgba(0,0,0,.8),
    0 0 10px rgba(37,211,102,.25);
}

.swiper-button-next:active::after,
.swiper-button-prev:active::after{
  transform:scale(.9);
}

.swiper-button-next::after,
.swiper-button-prev::after{
  font-size:28px;
  font-weight:900;
}

.swiper-pagination-bullet{
  background:rgba(0,200,83,.5) !important;
  opacity:.75;
}

.swiper-pagination-bullet-active{
  background:rgba(0,255,100,.95) !important;
  opacity:1;
  box-shadow:0 0 10px rgba(0,255,100,.6);
}

/* ACTION PANEL */
.demo-action-panel{
  width:100%;
  max-width:1200px;
  margin:var(--container-gap) auto 0;
  padding:var(--container-gap);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--container-gap);

  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  box-shadow:inset 0 0 14px rgba(0,0,0,.50);
}

.demo-hint{
  margin:0;

  color:rgba(255,255,255,.92);
  font-size:14px;
  text-align:center;
}

.demo-hint kbd{
  padding:2px 6px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
  border-radius:6px;
  font-weight:800;
}

/* CTA */
.demo-cta{
  display:flex;
  justify-content:center;
  margin-top:18px;
}

.demo-action-panel .discord-button,
.demo-cta .discord-button{
  position:static;
  inset:auto;
  isolation:auto;

  width:100%;
  min-width:0;
  max-width:100%;
  min-height:56px;
  padding:15px 22px;
  border-radius:var(--radius);

  display:flex;
  align-items:center;
  justify-content:center;

  background:linear-gradient(135deg, #25d366, #128c7e);
  color:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,.35);
}

.demo-action-panel .discord-button:hover,
.demo-cta .discord-button:hover{
  background:linear-gradient(135deg, #1ebe5d, #0f796d);
}

/* LIGHTBOX */
.lightbox-overlay{
  position:fixed;
  inset:0;
  z-index:99999;

  display:none;
  align-items:center;
  justify-content:center;

  padding:18px;
  background:rgba(0,0,0,.85);
}

.lightbox-overlay.active{
  display:flex;
  animation:demoFadeIn .18s ease;
}

@keyframes demoFadeIn{
  from{opacity:0}
  to{opacity:1}
}

.lightbox-content{
  width:100%;
  max-width:min(1100px,94vw);
}

.lightbox-img{
  width:100%;
  height:auto;
  max-height:84vh;
  object-fit:contain;
  border-radius:14px;
  cursor:zoom-out;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
}

.lightbox-caption{
  margin-top:10px;
  color:rgba(255,255,255,.92);
  text-align:center;
  font-weight:800;
}

/* MOBILE */
@media (max-width:768px){
  .alugar-servidor-main{
    padding:var(--container-gap);
  }

  .demo-slider{
    padding:var(--container-gap);
    border-radius:var(--radius);
  }

  .demo-header{
    padding:var(--container-gap);
    border-radius:var(--radius);
    gap:var(--container-gap);
  }

  .demo-title{
    font-size:22px;
    line-height:1.2;
    padding:20px;
  }

  .demo-title .fs-icon,
  .demo-title img.fs-icon{
    height:24px;
    top:-2px;
  }

  .demo-subtitle{
    font-size:14px;
  }

  .badge{
    font-size:13px;
    padding:7px 12px;
  }

  .swiper-button-next::after,
  .swiper-button-prev::after{
    font-size:22px;
  }

  .swiper{
    aspect-ratio:4 / 3;
    min-height:260px;
    max-height:520px;
  }

  .demo-action-panel .discord-button,
  .demo-cta .discord-button{
    width:100%;
    min-width:0;
    font-size:16px;
  }
}