/* === XPRESSTENDERS SUPPORT PAGE === */
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: linear-gradient(135deg, #0a0f13 0%, #091821 100%);
  color: #fff;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

main.wrap {
  max-width: 800px;
  margin: 60px auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 0 40px rgba(30,217,232,0.2);
}

h1 {
  font-size: 28px;
  margin-bottom: 15px;
  color: #1ed9e8;
}

p, label {
  font-size: 15px;
  line-height: 1.6;
  color: #dfe9f2;
}

form.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

form.card input,
form.card textarea,
form.card select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  outline: none;
}

form.card input:focus,
form.card textarea:focus,
form.card select:focus {
  border-color: #1ed9e8;
  box-shadow: 0 0 8px rgba(30,217,232,0.4);
}

button[type=submit],
button {
  background: linear-gradient(90deg,#1a73d8,#1ed9e8);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background: linear-gradient(90deg,#1ed9e8,#1a73d8);
}

.alert.error {
  background: rgba(255,50,50,0.15);
  color: #ffaaaa;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 15px;
}

footer {
  text-align: center;
  color: #aaa;
  font-size: 14px;
  margin-top: 40px;
}

/* =====================================
   SUPPORT PAGE REFINED STYLING
   ===================================== */

body.support-page {
  background: linear-gradient(135deg, #0b1014 0%, #091821 100%);
  color: #fff;
  overflow-x: hidden;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Wrapper */
.support-wrapper {
  max-width: 800px;
  margin: 60px auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  padding: 35px 25px;
  border-radius: 16px;
  box-shadow: 0 0 40px rgba(30, 217, 232, 0.18);
  box-sizing: border-box;
}

/* Header */
.support-wrapper h1 {
  font-size: 28px;
  color: #1ed9e8;
  text-align: center;
  margin-bottom: 6px;
}
.support-wrapper p {
  text-align: center;
  color: #dfe9f2;
  font-size: 15px;
  margin-bottom: 24px;
}

/* Inputs, selects, textarea */
.support-wrapper input,
.support-wrapper textarea,
.support-wrapper select {
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 14px;
  box-sizing: border-box;
}

.support-wrapper input:focus,
.support-wrapper textarea:focus,
.support-wrapper select:focus {
  border-color: #1ed9e8;
  box-shadow: 0 0 8px rgba(30,217,232,0.4);
  outline: none;
}

/* Dropdown fix – make text visible */
.support-wrapper select {
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  appearance: none;
}
.support-wrapper select option {
  background-color: #0b1014;
  color: #fff;
}

/* Textarea height control */
.support-wrapper textarea {
  min-height: 120px;
  resize: vertical;
}

/* Labels */
.support-wrapper label {
  display: block;
  font-weight: 500;
  margin-bottom: 10px;
  color: #bcd0da;
}

/* Grid layout for side-by-side fields */
.support-wrapper .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Collapse to single column on small screens */
@media (max-width: 768px) {
  .support-wrapper .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Buttons */
.support-wrapper button,
.support-wrapper input[type=submit] {
  background: linear-gradient(90deg, #1a73d8, #1ed9e8);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 9999px;
  cursor: pointer;
  transition: 0.3s;
}
.support-wrapper button:hover,
.support-wrapper input[type=submit]:hover {
  opacity: 0.9;
}

/* File input */
.support-wrapper input[type=file] {
  border: 1px dashed rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.05);
  cursor: pointer;
}

/* Footer */
.support-wrapper footer {
  text-align: center;
  color: #aaa;
  font-size: 14px;
  margin-top: 40px;
}

/* Prevent form overflow */
.support-wrapper form {
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}