/* =========================
   🎫 TICKET FORM (FINAL)
========================= */

.ticket-form {
  width: 100%;
  max-width: 520px;
  margin-top: 40px;
  padding: 24px;

  display: flex;
  flex-direction: column;
  gap: 14px;

  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  border-radius: 16px;

  overflow: visible; /* 🔥 fixes dropdown cut */
}

/* inputs */
.ticket-form input,
.ticket-form textarea,
.ticket-form select {
  width: 100%;
  box-sizing: border-box;

  padding: 14px;
  font-size: 15px;

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

  background: rgba(255,255,255,0.08);
  color: white;

  outline: none;
}

/* textarea */
.ticket-form textarea {
  min-height: 120px;
  resize: none;
}

/* button */
.ticket-form .btn {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  border-radius: 10px;
}

/* fix dropdown layering */
.ticket-form select {
  position: relative;
  z-index: 10;
}

/* =========================
   📦 TICKET CARD (if used)
========================= */
.ticket-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 12px;
  margin: 15px auto;
  max-width: 600px;
  color: white;
}

.ticket-card h3 {
  margin: 0 0 10px;
}

.ticket-meta {
  font-size: 13px;
  opacity: 0.7;
}

/* =========================
   🧠 GLOBAL FIXES
========================= */

/* prevent iOS zoom */
input, textarea, select, button {
  font-size: 16px;
}

/* allow dropdown to escape */
main,
.main-content {
  overflow: visible;
}

/* =========================
   📱 MOBILE FIX
========================= */
@media (max-width: 768px) {

  .ticket-form {
    max-width: 100%;
    padding: 16px;
    margin-top: 20px;
    gap: 12px;
  }

  .ticket-form input,
  .ticket-form select {
    padding: 12px;
    font-size: 14px;
    border-radius: 8px;
  }

  .ticket-form textarea {
    padding: 12px;
    font-size: 14px;
    border-radius: 8px;
    min-height: 90px;
  }

  .ticket-form .btn {
    padding: 12px;
    font-size: 15px;
  }
}

/* =========================
   ✨ OPTIONAL POLISH
========================= */

/* subtle focus glow */
.ticket-form input:focus,
.ticket-form textarea:focus,
.ticket-form select:focus {
  border-color: rgba(255,255,255,0.4);
  box-shadow: 0 0 8px rgba(255,255,255,0.1);
}