/* =========================
   Add Server Modal (GameTracker theme)
   DOAR pentru modal (overlay + card + inputs + close)
   NU include stil pentru buton (submit)
   ========================= */

#addServerModal.addServerModalClass{
  position: fixed;
  inset: 0;
  z-index: 9999;

  /* ascuns by default */
  display: none;

  /* overlay */
  background: rgba(10, 12, 18, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* centrare */
  align-items: center;
  justify-content: center;

  /* padding pt mobile */
  padding: 24px;
}

/* opțional: dacă vrei să-l deschizi cu o clasă în JS:
   addServerModal.style.display = "flex"; sau adaugi .is-open */
#addServerModal.addServerModalClass.is-open{
  display: flex;
}

/* Card-ul modal */
#addServerModal .modal-content{
  width: min(520px, 100%);
  position: relative;

  /* glass / dark */
  background: linear-gradient(180deg, rgba(25, 30, 46, .78) 0%, rgba(14, 16, 24, .86) 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow:
    0 28px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(120,140,255,.06) inset;

  border-radius: 18px;
  padding: 22px 22px 18px;
  color: rgba(255,255,255,.92);

  transform: translateY(10px) scale(.985);
  opacity: 0;
  animation: gtModalIn .18s ease-out forwards;
}

@keyframes gtModalIn{
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Accent line (subtil, ca în temă) */
#addServerModal .modal-content::before{
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120,140,255,.55), transparent);
  opacity: .9;
}

/* Close */
#addServerModal .modal-content .close{
  position: absolute;
  top: 12px;
  right: 12px;

  width: 38px;
  height: 38px;
  border-radius: 12px;

  display: grid;
  place-items: center;

  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);

  cursor: pointer;
  user-select: none;

  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}

#addServerModal .modal-content .close:hover{
  background: rgba(120,140,255,.12);
  border-color: rgba(120,140,255,.22);
  color: rgba(255,255,255,.95);
  transform: translateY(-1px);
}

#addServerModal .modal-content .close:active{
  transform: translateY(0);
}

/* Titlu / text */
#addServerModal .modal-content h3{
  margin: 2px 44px 6px 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .2px;
}

#addServerModal .modal-content p{
  margin: 0 0 14px;
  color: rgba(255,255,255,.68);
  font-size: 13px;
}

/* Form layout (funcționează fie cu .form-group, fie cu label+input direct) */
#addServerModal .modal-content form{
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

#addServerModal .modal-content .form-group{
  display: grid;
  gap: 8px;
}

#addServerModal .modal-content label{
  font-size: 12px;
  color: rgba(255,255,255,.7);
  letter-spacing: .2px;
}

/* Inputs + Select */
#addServerModal .modal-content input[type="text"],
#addServerModal .modal-content input[type="number"],
#addServerModal .modal-content input[type="email"],
#addServerModal .modal-content select,
#addServerModal .modal-content textarea{
  width: 100%;
  border-radius: 14px;
  padding: 12px 12px;

  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.92);

  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

#addServerModal .modal-content textarea{
  min-height: 92px;
  resize: vertical;
}

#addServerModal .modal-content input::placeholder{
  color: rgba(255,255,255,.38);
}

#addServerModal .modal-content select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding-right: 42px;

  /* săgeată custom */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%),
    linear-gradient(135deg, rgba(255,255,255,.6) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%,
    100% 0;
  background-size:
    6px 6px,
    6px 6px,
    2.6em 2.6em;
  background-repeat: no-repeat;
}

#addServerModal .modal-content input:focus,
#addServerModal .modal-content select:focus,
#addServerModal .modal-content textarea:focus{
  background: rgba(0,0,0,.22);
  border-color: rgba(120,140,255,.45);
  box-shadow: 0 0 0 4px rgba(120,140,255,.14);
}

/* Mesaj de eroare/ajutor dacă vrei să pui <small> */
#addServerModal .modal-content small{
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

/* Responsive fine-tune */
@media (max-width: 520px){
  #addServerModal .modal-content{
    padding: 18px 16px 16px;
    border-radius: 16px;
  }

  #addServerModal .modal-content h3{
    font-size: 18px;
  }
}