/* ==========================================
   RETRO CONTACT PAGE
   Terminal window + static CRT lines borrowed from the login
   page (retro-admin.css), scoped to .contact-terminal so they
   don't leak into the rest of the site. No moving scan line or
   flicker here on purpose - it was too dizzying on a long form.
   ========================================== */

.contact-terminal {
  position: relative;
  overflow: hidden;
  background: var(--terminal-dark);
  border: 2px solid var(--terminal-green);
  border-radius: 8px;
  box-shadow:
    0 0 20px rgba(0, 255, 65, 0.3),
    inset 0 0 20px rgba(0, 255, 65, 0.1);
  font-family: var(--retro-mono-font);
  font-size: 14px;
  line-height: 1.4;
  color: var(--terminal-green);
  margin-bottom: 2rem;
}

/* Window chrome */
.contact-window-header {
  display: flex;
  align-items: center;
  background: var(--terminal-gray);
  padding: 8px 15px;
  border-bottom: 1px solid var(--terminal-green);
}

.contact-window-buttons {
  display: flex;
  gap: 5px;
}

.contact-window-buttons span {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot-close { background: var(--terminal-red); }
.dot-minimize { background: var(--terminal-amber); }
.dot-maximize { background: var(--terminal-green); }

.contact-window-title {
  margin-left: 15px;
  color: var(--terminal-green);
}

.contact-content {
  padding: 20px;
}

/* Terminal lines */
.contact-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 5px;
}

.contact-prompt {
  color: var(--terminal-amber);
  margin-right: 8px;
}

.contact-command {
  color: var(--terminal-blue);
  font-weight: bold;
}

.contact-output {
  color: var(--terminal-green);
}

/* Panels */
.contact-status {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid var(--terminal-green);
  background: rgba(0, 255, 65, 0.05);
}

.contact-section,
.contact-success {
  padding: 20px;
  border: 1px solid var(--terminal-blue);
  background: rgba(0, 153, 255, 0.05);
}

/* Form */
.contact-field {
  margin-bottom: 20px;
}

.contact-label {
  display: block;
  margin-bottom: 5px;
}

.contact-input-line {
  display: flex;
  align-items: flex-start;
}

.contact-input-prompt {
  color: var(--terminal-amber);
  margin-right: 8px;
  padding-top: 8px;
}

.contact-terminal .retro-input {
  flex: 1;
  width: 100%;
  background: var(--terminal-bg) !important;
  border: 1px solid var(--terminal-green) !important;
  border-radius: 0 !important;
  color: var(--terminal-green) !important;
  font-family: var(--retro-mono-font) !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  outline: none !important;
  box-shadow: none !important;
  resize: vertical;
  transition: all 0.3s ease;
}

.contact-terminal .retro-input:focus {
  border-color: var(--terminal-amber) !important;
  box-shadow: 0 0 10px rgba(255, 176, 0, 0.5) !important;
  background: rgba(255, 176, 0, 0.1) !important;
}

/* Honeypot: kept off-screen rather than display:none, which some bots skip */
.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Errors */
.contact-errors {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid var(--terminal-magenta);
  background: rgba(255, 85, 255, 0.1);
}

.contact-field-error {
  margin-top: 5px;
}

.contact-error-prompt {
  color: var(--terminal-magenta);
  font-weight: bold;
  margin-right: 8px;
}

.contact-error-text {
  color: var(--terminal-magenta);
}

/* Submit */
.contact-submit {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--terminal-green);
}

.contact-submit-btn {
  display: inline-block;
  background: var(--terminal-green);
  border: 2px solid var(--terminal-green);
  border-radius: 0;
  color: var(--terminal-bg);
  font-family: var(--retro-mono-font);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 20px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 255, 65, 0.3);
  transition: all 0.3s ease;
}

.contact-submit-btn:hover {
  background: var(--terminal-amber);
  border-color: var(--terminal-amber);
  color: var(--terminal-bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(255, 176, 0, 0.4);
}

.contact-submit-btn:active {
  transform: translateY(0);
}

/* Static CRT lines (the login page's, minus the animation) */
.contact-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 65, 0.03) 2px,
    rgba(0, 255, 65, 0.03) 4px
  );
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 576px) {
  .contact-content,
  .contact-section,
  .contact-success {
    padding: 12px;
  }

  .contact-submit-btn {
    width: 100%;
    text-align: center;
  }
}