/* Cyberpunk Contact Us – CyberCityGamePL */
/* Hero Banner */
.contact-hero {
  position: relative;
  min-height: 360px;
  background: none;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  background: linear-gradient(115deg, #40e0ff44 10%, #18141d 80% 100%),
    url('../images/neon-alleyway-vending-machines-cyberpunk-art-6896.webp') center/cover no-repeat;
  filter: brightness(0.65) blur(2px);
}
.contact-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 5rem 0 4rem 0;
}
.contact-hero h1 {
  font-size: var(--font-size-3xl);
  letter-spacing: 0.08em;
}
.contact-hero-desc {
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: var(--font-size-lg);
  color: var(--color-primary-accent);
  text-shadow: 0 0 8px #10ffd688;
  font-family: var(--font-family-mono);
}
/* Main Contact Area */
.contact-main-grid {
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-8);
  margin-bottom: var(--space-12);
}
@media (max-width: 1000px) {
  .contact-main-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}
.contact-form-section, .contact-info-section {
  min-width: 0;
}
.contact-form-section .h2, .contact-info-section .h2 {
  margin-bottom: var(--space-4);
}
/* Contact Form */
.contact-form label {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.2em;
  display: inline-block;
  text-shadow: 0 0 6px #10ffd6cc;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  box-shadow: 0 0 8px 2px #40e0ffaa inset;
  border: 1.5px solid var(--color-primary-accent);
  margin-bottom: var(--space-3);
  background: #231c2b99;
  color: var(--color-primary);
  transition: border-color .25s, box-shadow .25s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 12px 3px #10ffd6bb, 0 0 32px 2px #40e0ffaa;
}
.contact-form input[type="file"] {
  padding: 0.7em 0.8em;
  background: none;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.contact-form .button {
  margin-top: var(--space-4);
  min-width: 180px;
}
.contact-success-msg {
  margin-top: var(--space-3);
  color: var(--color-success);
  text-shadow: 0 0 6px #30ff73cc, 0 0 12px #18141d;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.contact-error-msg {
  margin-top: var(--space-3);
  color: var(--color-danger);
  text-shadow: 0 0 8px #ff184388, 0 0 10px #1a0c10;
  font-weight: 700;
}
/* Info Block */
.city-grid-map {
  margin-bottom: var(--space-2);
  max-width: 270px;
}
.contact-details {
  font-style: normal;
  color: var(--color-gray-100);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-base);
}
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  color: var(--color-primary-accent);
  margin: .2em 0;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-base);
}
.contact-icons {
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.contact-icons a {
  font-size: 1.7rem;
  border-radius: 50%;
  padding: .2em .35em;
  transition: background 0.17s, color 0.17s;
  background: #101524;
  box-shadow: 0 0 10px 2px #10ffd699;
  line-height: 1;
}
.contact-icons a:hover, .contact-icons a:focus-visible {
  background: #231c2bcc;
  color: var(--color-primary);
  box-shadow: 0 0 12px 5px #40e0ffaa;
}
/* FAQ Accordion */
.faq-accordion {
  margin-top: var(--space-4);
}
.faq-item {
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg,#22222c 70%,#40e0ff18 100%);
  box-shadow: 0 0 12px #40e0ff44;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  color: var(--color-primary-accent);
  font-size: var(--font-size-base);
  font-weight: 700;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border: none;
  outline: none;
  border-bottom: 1.5px solid #40e0ff33;
  transition: background 0.15s;
  box-shadow: none;
}
.faq-question[aria-expanded="true"] {
  background: #18141d;
  color: var(--color-primary);
  box-shadow: 0 2px 12px #10ffd644;
}
.faq-answer {
  padding: var(--space-3) var(--space-4);
  background: #18141d;
  color: var(--color-text);
  font-size: var(--font-size-base);
  border-top: 1.5px solid #40e0ff33;
  animation: faqFadeIn .59s;
}
@keyframes faqFadeIn {
  from { opacity:0; transform: translateY(-22px); }
  to   { opacity:1; transform: none; }
}
.contact-faq-links {
  gap: var(--space-4);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
/* COMMUNITY */
.contact-community-section {
  margin: var(--space-8) auto var(--space-12) auto;
  text-align: center;
}
.community-icons, .newsletter-row {
  gap: var(--space-4);
  margin: var(--space-4) 0 0 0;
  flex-wrap: wrap;
}
.community-btn {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  background: linear-gradient(90deg,var(--color-primary-accent) 50%,#231c2b 100%);
  border-radius: 30px;
  color: #010308 !important;
  font-size: var(--font-size-base);
  padding: 0.7em 1.7em;
  font-weight: bold;
  box-shadow: 0 0 10px 2px #40e0ffaa;
  letter-spacing: 0.01em;
  transition: background 0.13s, color 0.13s;
  margin-bottom: var(--space-2);
  position: relative;
}
.community-btn:hover,.community-btn:focus-visible {
  background: linear-gradient(90deg,var(--color-primary) 40%, var(--color-primary-accent) 100%);
  color: var(--color-bg-alt) !important;
  box-shadow: 0 0 16px 6px #10ffd666;
}
/* Newsletter */
.newsletter-form {
  margin: var(--space-4) auto 0 auto;
  max-width: 470px;
  text-align: left;
}
.newsletter-row input[type="email"] {
  max-width: 240px;
  margin-bottom: 0;
}
.newsletter-row {
  gap: var(--space-2);
}
.newsletter-success-msg {
  margin-top: var(--space-2);
  color: var(--color-success);
  font-weight: 700;
}
.newsletter-error-msg {
  margin-top: var(--space-2);
  color: var(--color-danger);
  font-weight: 700;
}
/* Glitch (Bug Reporting) Section */
.contact-glitch-section {
  margin-top: var(--space-12);
  margin-bottom: var(--space-12);
  background: linear-gradient(115deg, #101524ee 60%, #40e0ff0d 100%);
  box-shadow: 0 6px 22px #40e0ff44, var(--shadow);
  padding: var(--space-8) var(--space-8) var(--space-4) var(--space-8);
}
.contact-glitch-flex {
  gap: var(--space-8);
  align-items: center;
}
.glitch-art {
  flex: 0 0 230px;
  max-width: 260px;
  margin-right: var(--space-6);
}
.glitch-content h2 {
  margin-bottom: var(--space-3);
}
.glitch-content ul {
  margin: var(--space-3) 0 0 1.5em;
  color: var(--color-primary-accent);
}
@media (max-width: 900px) {
  .contact-glitch-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .glitch-art {
    margin: 0 auto var(--space-4) auto;
  }
  .contact-glitch-section {
    padding: var(--space-4) var(--space-3);
  }
}
/* TEAM GRID */
.contact-team-section {
  margin-bottom: var(--space-12);
}
.team-grid-avatars {
  grid-template-columns: repeat(3,1fr);
  gap: var(--space-6);
  margin-top: var(--space-6);
}
@media (max-width: 1100px) {
  .team-grid-avatars {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px) {
  .team-grid-avatars {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}
.team-card {
  text-align: center;
  min-width: 0;
  background: linear-gradient(120deg,#231c2b 70%, #223442 100%);
  box-shadow: 0 0 24px 4px #40e0ff44, var(--shadow);
  padding: var(--space-6) var(--space-3) var(--space-4) var(--space-3);
}
.team-avatar {
  margin: 0 auto var(--space-4) auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, #18141d 70%, #40e0ff33 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px 3px #10ffd6cc;
  overflow: hidden;
}
.team-avatar img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px #40e0ffaa);
}
.team-role {
  display: block;
  color: var(--color-primary-accent);
  font-size: var(--font-size-sm);
  margin-top: .3em;
  margin-bottom: .7em;
  letter-spacing: 0.01em;
}
.team-bio {
  font-size: var(--font-size-base);
  color: var(--color-gray-100);
  margin-top: var(--space-2);
}
.team-info a {
  color: var(--color-primary-accent);
  font-size: var(--font-size-sm);
  display: inline-block;
  margin-bottom: 0.6em;
}
/* Neon Iconography (inline SVG via icon classes) */
.icon-mail::before { content: "\2709"; }
.icon-phone::before { content: "\260E"; }
.icon-discord::before { content: "\f392"; font-family: 'Font Awesome 5 Brands', Arial, sans-serif; }
.icon-facebook::before { content: "\f09a"; font-family: 'Font Awesome 5 Brands', Arial, sans-serif; }
.icon-twitter::before { content: "\f099"; font-family: 'Font Awesome 5 Brands', Arial, sans-serif; }
.icon-forum::before { content: "\1F5E8"; }
.icon-mail,.icon-phone,.icon-discord,.icon-facebook,.icon-twitter,.icon-forum {
  display: inline-block;
  margin-right: .35em;
  color: var(--color-primary-accent);
  font-size: 1.22em;
}
/* Utility Tweaks */
@media (max-width: 700px) {
  .contact-hero-content { padding: 3rem 0 2rem 0; }
  .city-grid-map { max-width: 100%; }
  .contact-team-section { margin-bottom: var(--space-8); }
}
.card {
  overflow: visible;
}