/* Dynamic responsive styles that adjust to current screen size */
.swal-responsive {
  transition: all 0.3s ease;
}

/* Mobile-first SweetAlert styles */
.swal2-popup {
  margin: 0.5rem !important;
  max-height: 95vh !important;
  overflow: hidden !important;
}

.swal2-html-container {
  padding: 0 !important;
  margin: 0 !important;
}

.swal2-html-container iframe {
  border-radius: 8px;
}

/* Navigation responsive styles */
.nav-container {
  transition: all 0.3s ease;
}

.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 40;
}

.mobile-nav-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 400px;
  height: 100vh;
  background: #000;
  transition: right 0.3s ease;
  z-index: 50;
  overflow-y: auto;
}

.mobile-nav-panel.open {
  right: 0;
}

/* Responsive breakpoints */
@media (max-width: 480px) {
  .nav-logo { height: 2.5rem; }
  .nav-title { font-size: 1rem; }
  .mobile-nav-panel { width: 90%; }
}

@media (min-width: 481px) and (max-width: 768px) {
  .nav-logo { height: 3rem; }
  .nav-title { font-size: 1.25rem; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .nav-logo { height: 3.5rem; }
  .nav-title { font-size: 1.5rem; }
}

@media (min-width: 1025px) {
  .nav-logo { height: 5rem; }
  .nav-title { font-size: 1.875rem; }
}

.swal2-popup.custom-popup {
    background: linear-gradient(135deg, #000 0%, #111 50%, #FFD700 100%);
    color: #FFD700;
    border: 2px solid #FFD700;
    border-radius: 12px;
    padding: 20px;
    max-width: 450px;
    width: 90%;
  }
    .swal2-title {
      color: #FFD700 !important;
      font-weight: bold;
      font-size: 1.3rem;
    }
    .swal2-input {
      border: 1px solid #FFD700 !important;
      background: #111 !important;
      color: #FFD700 !important;
      font-size: 14px;
      padding: 8px;
      width: 100% !important;      /* fit inside */
      max-width: 100% !important;  /* prevent overflow */
      box-sizing: border-box;      /* padding stays inside */
      margin: 5px 0;               /* spacing between inputs */
    }
    .swal2-confirm {
      background-color: #FFD700 !important;
      color: #000 !important;
      font-weight: bold !important;
      padding: 10px 18px;
      font-size: 14px;
    }
    .swal2-cancel {
      background-color: #333 !important;
      color: #FFD700 !important;
      border: 1px solid #FFD700 !important;
      padding: 10px 18px;
      font-size: 14px;
    }
    .swal2-image {
      max-width: 200px !important;
      height: auto !important;
      margin-bottom: 15px !important;
    }
    label {
      color: #FFD700;
      font-size: 13px;
      display: block;
      margin-top: 6px;
      margin-bottom: 2px;
      text-align: left;
    }