/* ===== ENTRY DETAILS MODAL ===== */
.enter-details-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: none;              /* hidden by default */
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)),
              url("/images/newbackground.jpg") center/cover no-repeat,
              radial-gradient(circle at left top, #13294b 0%, transparent 50%),
              radial-gradient(circle at right bottom, #1a2a40 0%, #000000 100%);
  background-attachment: fixed;
  background-size: cover;
  background-blend-mode: overlay;
  backdrop-filter: blur(4px);
  z-index: 999999;
}

/* ===== ENTRY DETAILS BOX ===== */
.enter-details {
  background: #111;
  padding: 40px;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;           /* narrower modal box */
  min-height: 400px;
  box-shadow: 
    0 0 30px rgba(255, 0, 0, 0.9),
    0 0 40px rgba(0, 0, 255, 0.8),
    0 0 50px rgba(200, 0, 255, 0.8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;       /* stretch children full width */
  justify-content: flex-start;
  position: relative;
}

/* ===== LOGO ===== */
.modal-logo {
  display: block;
  max-width: 250px;
  margin: 0 auto 30px;
  filter: drop-shadow(0 0 15px rgba(255,255,255,1));
  animation: logoFadeIn 1s ease forwards;
}

@keyframes logoFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ===== FORM INPUTS ===== */
.details-form input[type="text"],
.details-form input[type="email"],
.details-form input[type="tel"] {
  width: 90%;                /* narrower than full width */
  max-width: 400px;           /* cap the size */
  padding: 8px;               /* smaller padding */
  margin: 10px auto;          /* center with spacing */
  border-radius: 6px;
  border: 1px solid #444;
  font-size: 0.95rem;         /* slightly smaller text */
  box-sizing: border-box;
}

/* ===== FORM ACTIONS ===== */
.form-actions {
  margin-top: 20px;
  text-align: center;
}


/* ===== SUBMIT BUTTON ===== */
form.details-form .submit-btn {
  width: auto !important;
  display: inline-block !important;
  font-size: 1.3rem !important;
  font-weight: bold;
  color: #fff !important;
  background: #ff6600 !important;
  border: none !important;
  border-radius: 6px;
  cursor: pointer;
  padding: 12px 24px;
  box-shadow: 0 0 15px rgba(255,102,0,0.8) !important;
  transition: transform 0.2s ease;
  animation: neonPulse 2s infinite;
}
form.details-form .submit-btn:hover {
  transform: scale(1.05);
}
@keyframes neonPulse {
  0%   { box-shadow: 0 0 10px #ff6600; }
  50%  { box-shadow: 0 0 20px #ff6600, 0 0 30px #ff3300; }
  100% { box-shadow: 0 0 10px #ff6600; }
}

/* ===== SUCCESS MESSAGE ===== */
.success-message {
  background: rgba(0,150,0,0.85);
  color: #fff;
  padding: 20px;
  border-radius: 6px;
  margin: 20px auto;
  text-align: center;
  max-width: 600px;
  box-shadow: 0 0 12px rgba(0,255,0,0.7);
  font-size: 1rem;
  transition: opacity 1s ease, transform 1s ease;
}

.fade-out {
  opacity: 0;
  transform: translateY(-20px);
}

/* ===== ERROR MESSAGE ===== */
.error-message {
  background: rgba(255,0,0,0.1);
  border: 2px solid red;
  color: #ff3333;
  padding: 15px;
  margin: 10px auto 20px;
  text-align: center;
  font-weight: bold;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(255,0,0,0.6);
}

/* ===== HEADINGS WITH GLOW ===== */
.enter-details h1,
.enter-details h2 {
  font-size: 2.4rem;
  margin-bottom: 20px;
  text-shadow: 
    0 0 12px rgba(255, 0, 0, 0.9),
    0 0 24px rgba(0, 0, 255, 0.9),
    0 0 36px rgba(200, 0, 255, 0.9);
}

/* ===== LABELS ===== */
.enter-details label {
  display: block;
  margin: 12px 0 6px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
}

/* ===== MOBILE ADJUSTMENTS ===== */
@media only screen and (max-width: 600px) {
  .enter-details {
    width: 95%;
    max-width: 300px;
    padding: 8px;
    font-size: 0.85rem;
  }

  .enter-details h1 {
    font-size: 1.2rem !important;
    margin-bottom: 6px;
    line-height: 1.2;
    font-weight: bold;
  }

  .details-form {
    gap: 6px;
    width: 95%;
  }

  .details-form input[type="text"],
  .details-form input[type="email"],
  .details-form input[type="tel"] {
    width: 95%;
    font-size: 0.9rem;
    padding: 6px;
  }

  .submit-btn {
    width: auto; /* shrink to word size */
    font-size: 0.9rem;
    padding: 8px 16px;
    margin-top: 6px;
  }

  .success-message,
  .error-message {
    font-size: 0.8rem;
    padding: 6px;
    margin: 6px auto;
    max-width: 95%;
  }
}
/* ===== MODAL STATE CLASSES ===== */
.enter-details-modal.active {
  display: flex; /* show modal when active */
}

.enter-details-modal.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Optional: prevent background scroll when modal is open */
body.modal-open {
  overflow: hidden;
}