/* =====================================================
   GOLDEN PHOENIX – RECRUITMENT (ENTERPRISE 2026)
   - kompakt, zentriert, Rollen-Sektionen
   - Hover Klassenfarben
   - SweetAlert2 GP Theme
===================================================== */

/* ================= WRAPPER ================= */
.gp-recruitment{
  width:100%;
  padding:42px 18px 56px;
  display:flex;
  justify-content:center;
  box-sizing:border-box;
}

/* ================= MAIN CONTAINER ================= */
.gp-recruit-card{
  width:100%;
  max-width:1100px;
  padding:30px 30px 28px;
  border-radius:28px;

  background: linear-gradient(135deg, rgba(18,18,22,.90), rgba(26,26,32,.78));
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);

  box-shadow: 0 30px 90px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;
}

/* ================= TITLE ================= */
.gp-recruit-card h2{
  text-align:center;
  font-size:30px;
  font-weight:900;
  color:#f5c542;
  margin:0 0 22px;
  letter-spacing:.04em;
  text-shadow: 0 0 12px rgba(245,197,66,.35), 0 2px 10px rgba(0,0,0,.9);
}

/* ================= ROLE SECTIONS ================= */
.gp-role{
  padding:14px 14px 16px;
  border-radius:20px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  margin:14px 0;
}

.gp-role-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
}

.gp-role-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#f5c542;
}

.gp-role-title:after{
  content:"";
  flex:1;
  height:1px;
  background: linear-gradient(to right, rgba(245,197,66,.55), transparent);
  opacity:.9;
}

/* Role accent colors */
.gp-role-tank .gp-role-title{ color:#60a5fa; }
.gp-role-tank .gp-role-title:after{ background:linear-gradient(to right, rgba(96,165,250,.7), transparent); }

.gp-role-heal .gp-role-title{ color:#34d399; }
.gp-role-heal .gp-role-title:after{ background:linear-gradient(to right, rgba(52,211,153,.7), transparent); }

.gp-role-dps .gp-role-title{ color:#f59e0b; }
.gp-role-dps .gp-role-title:after{ background:linear-gradient(to right, rgba(245,158,11,.7), transparent); }

/* ================= SLOT (count once) ================= */
.gp-slot{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:10px 10px 12px;
  border-radius:16px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.05);
  margin:10px 0;
}

.gp-slot-count{
  flex:0 0 auto;
  min-width:44px;
  height:32px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#111;
  background: linear-gradient(135deg, rgba(245,197,66,.95), rgba(234,179,8,.95));
  box-shadow: 0 10px 30px rgba(245,197,66,.18);
  margin-top:4px;
}

/* ================= GRID ================= */
.gp-rec-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-start;
}

/* ================= CARD ================= */
.gp-rec-card{
  position:relative;
  width:150px;
  min-height:138px;
  border-radius:18px;

  background: linear-gradient(135deg, rgba(22,22,26,.92), rgba(30,30,36,.86));
  border: 2px solid rgba(255,255,255,.08);

  box-shadow: 0 18px 50px rgba(0,0,0,.70), inset 0 1px 0 rgba(255,255,255,.05);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;

  text-decoration:none;
  color:#e5e7eb;

  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  cursor:pointer;
}

.gp-rec-card:after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}

.gp-rec-card:hover{
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 28px 70px rgba(0,0,0,.92);
}
.gp-rec-card:hover:after{ opacity:1; }

/* ICON */
.gp-icon img{
  width:44px;
  height:44px;
  object-fit:contain;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.8));
  transition: transform .22s ease;
}
.gp-rec-card:hover .gp-icon img{ transform: scale(1.10); }

/* TEXT */
.gp-rec-class{
  font-size:14px;
  font-weight:900;
  text-align:center;
}
.gp-rec-spec{
  font-size:12px;
  opacity:.78;
}

/* ODER separator */
.gp-rec-or{
  align-self:center;
  font-weight:900;
  letter-spacing:.08em;
  color: rgba(255,255,255,.55);
  padding:0 4px;
}

/* ================= CLASS HOVER COLORS ================= */
.gp-rec-card[data-class="paladin"]{ border-color:#f472b6; }
.gp-rec-card[data-class="paladin"]:after{ background: radial-gradient(circle, rgba(244,114,182,.55), transparent 70%); }

.gp-rec-card[data-class="warrior"]{ border-color:#8b5a2b; }
.gp-rec-card[data-class="warrior"]:after{ background: radial-gradient(circle, rgba(139,90,43,.55), transparent 70%); }

.gp-rec-card[data-class="warlock"]{ border-color:#a855f7; }
.gp-rec-card[data-class="warlock"]:after{ background: radial-gradient(circle, rgba(168,85,247,.55), transparent 70%); }

.gp-rec-card[data-class="shaman"]{ border-color:#3b82f6; }
.gp-rec-card[data-class="shaman"]:after{ background: radial-gradient(circle, rgba(59,130,246,.55), transparent 70%); }

.gp-rec-card[data-class="mage"]{ border-color:#38bdf8; }
.gp-rec-card[data-class="mage"]:after{ background: radial-gradient(circle, rgba(56,189,248,.55), transparent 70%); }

.gp-rec-card[data-class="hunter"]{ border-color:#22c55e; }
.gp-rec-card[data-class="hunter"]:after{ background: radial-gradient(circle, rgba(34,197,94,.55), transparent 70%); }

.gp-rec-card[data-class="rogue"]{ border-color:#eab308; }
.gp-rec-card[data-class="rogue"]:after{ background: radial-gradient(circle, rgba(234,179,8,.55), transparent 70%); }

.gp-rec-card[data-class="druid"]{ border-color:#fb923c; }
.gp-rec-card[data-class="druid"]:after{ background: radial-gradient(circle, rgba(251,146,60,.55), transparent 70%); }

.gp-rec-card[data-class="priest"]{ border-color:#e5e7eb; }
.gp-rec-card[data-class="priest"]:after{ background: radial-gradient(circle, rgba(229,231,235,.55), transparent 70%); }

/* ================= RESPONSIVE ================= */
@media (max-width: 900px){
  .gp-recruit-card{ padding:22px 18px 20px; border-radius:22px; }
  .gp-slot{ flex-direction:column; align-items:stretch; }
  .gp-slot-count{ align-self:flex-start; }
  .gp-rec-card{ width:148px; }
}
@media (max-width: 520px){
  .gp-rec-card{ width:100%; min-height:120px; }
  .gp-rec-grid{ gap:10px; }
}

/* =====================================================
   SWEETALERT2 – GOLDEN PHOENIX THEME
===================================================== */
.gp-swal-popup.swal2-popup{
  background: linear-gradient(135deg, rgba(18,18,22,.96), rgba(26,26,32,.92)) !important;
  border-radius:22px !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.05);
  color:#e5e7eb !important;
  border:1px solid rgba(255,255,255,.08);
}
.gp-swal-title.swal2-title{
  color:#f5c542 !important;
  font-weight:900 !important;
  letter-spacing:.06em;
}

.gp-swal-confirm.swal2-confirm{
  background: linear-gradient(135deg,#f5c542,#eab308) !important;
  color:#111 !important;
  font-weight:900 !important;
  border-radius:12px !important;
  padding:10px 22px !important;
}
.gp-swal-cancel.swal2-cancel{
  background: rgba(255,255,255,.12) !important;
  color:#fff !important;
  border-radius:12px !important;
  padding:10px 18px !important;
}

.gp-swal-head{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  margin:6px 0 14px;
}
.gp-swal-badge{
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
}
.gp-swal-badge-tank{ color:#60a5fa; border-color: rgba(96,165,250,.35); }
.gp-swal-badge-heal{ color:#34d399; border-color: rgba(52,211,153,.35); }
.gp-swal-badge-dps{  color:#f59e0b; border-color: rgba(245,158,11,.35); }

.gp-swal-class{
  display:flex;
  align-items:center;
  gap:12px;
}
.gp-swal-icon{
  width:42px; height:42px;
  filter: drop-shadow(0 0 14px rgba(245,197,66,.35));
}
.gp-swal-class-name{
  font-weight:900;
  letter-spacing:.12em;
  color:#f5c542;
  font-size:14px;
}
.gp-swal-class-sub{ opacity:.85; font-size:12px; }

.gp-swal-form{
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:left;
}
.gp-swal-form label{
  margin-top:6px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(245,197,66,.92);
}
.gp-swal-form input,
.gp-swal-form select,
.gp-swal-form textarea{
  width:100%;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  color:#fff;
  padding:10px 12px;
  font-size:14px;
}
.gp-swal-form textarea{ resize:vertical; min-height:120px; }

.gp-swal-form input:focus,
.gp-swal-form select:focus,
.gp-swal-form textarea:focus{
  outline:none;
  border-color:#f5c542;
  box-shadow: 0 0 0 1px rgba(245,197,66,.55);
}

.gp-hp{ display:none !important; }
.swal2-validation-message{
  background: rgba(0,0,0,.45) !important;
  color:#fca5a5 !important;
  border-radius:12px !important;
}