/* Contact Hero */
.contact-hero {
  position: relative;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, var(--color-bg-dark), var(--color-secondary-dark));
  overflow: hidden;
}

.contact-hero .container {
  position: relative;
  z-index: 2;
}

.contact-hero h1 {
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 2px;
  animation: fadeInUp 1s ease;
}

.contact-hero p {
  font-size: 1.2rem;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
  animation: fadeInUp 1s ease 0.2s forwards;
  opacity: 0;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://unity.com/_next/image?url=https%3A%2F%2Fcdn.bfldr.com%2FS5BC9Y64%2Fat%2Ft6njmjtxjqcxwgw4htv8c7gf%2FBole_Games__Cash_Frenzy.png%3Fauto%3Dwebp&w=3840&q=75');
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  z-index: 1;
}

/* Contact Section */
.contact-section {
  padding: var(--spacing-xxl) 0;
  background: var(--color-bg-main);
}

.contact-container {
  display: flex;
  gap: var(--spacing-xl);
}

.contact-info {
  flex: 1;
  background: var(--color-bg-light);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

.contact-info h2 {
  margin-bottom: var(--spacing-lg);
}

.info-item {
  display: flex;
  margin-bottom: var(--spacing-lg);
  align-items: flex-start;
}

.info-icon {
  width: 40px;
  height: 40px;
  margin-right: var(--spacing-md);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.email-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239d4edd"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
}

.hours-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239d4edd"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>');
}

.info-content h3 {
  font-size: 1.2rem;
  margin-bottom: var(--spacing-xs);
}

.info-content p {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs);
}

.social-links {
  margin-top: var(--spacing-xl);
}

.social-links h3 {
  font-size: 1.2rem;
  margin-bottom: var(--spacing-md);
}

.social-icons {
  display: flex;
  gap: var(--spacing-md);
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
  position: relative;
}

.social-icon:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.social-icon:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(157, 78, 221, 0.3);
}

.social-icon:hover:before {
  opacity: 1;
}

.twitter:before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239d4edd"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/></svg>');
}

.facebook:before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239d4edd"><path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m13 2h-2.5A3.5 3.5 0 0 0 12 8.5V11h-2v3h2v7h3v-7h3v-3h-3V9a1 1 0 0 1 1-1h2V5z"/></svg>');
}

.instagram:before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239d4edd"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z"/></svg>');
}

.discord:before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239d4edd"><path d="M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z"/></svg>');
}

.contact-form-container {
  flex: 1;
}

.contact-form {
  background: var(--color-bg-light);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

.contact-form h2 {
  margin-bottom: var(--spacing-lg);
}

.form-group {
  margin-bottom: var(--spacing-md);
  position: relative;
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-dark);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-main);
  font-size: 1rem;
  transition: all var(--transition-normal);
  position: relative;
  z-index: 2;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(157, 78, 221, 0.2);
}

.form-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  z-index: 1;
  pointer-events: none;
}

.form-group input:focus ~ .form-glow,
.form-group textarea:focus ~ .form-glow {
  opacity: 0.2;
}

.checkbox-group {
  display: flex;
  align-items: flex-start;
}

.checkbox-group input {
  width: auto;
  margin-right: var(--spacing-sm);
  margin-top: 5px;
}

.checkbox-group label {
  margin-bottom: 0;
  font-size: 0.9rem;
}

.submit-btn {
  width: 100%;
  background: linear-gradient(45deg, var(--color-primary-dark), var(--color-primary));
  color: var(--color-text-primary);
  font-size: 1.1rem;
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.submit-btn:hover {
  background: linear-gradient(45deg, var(--color-primary), var(--color-primary-light));
}

/* FAQ Section */
.faq-section {
  padding: var(--spacing-xxl) 0;
  background: var(--color-bg-light);
}

.faq-section h2 {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  margin-bottom: var(--spacing-md);
  background: var(--color-bg-main);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.faq-question {
  padding: var(--spacing-md);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background var(--transition-fast);
}

.faq-question:hover {
  background: rgba(157, 78, 221, 0.1);
}

.faq-question h3 {
  margin: 0;
  font-size: 1.2rem;
}

.faq-icon {
  width: 20px;
  height: 20px;
  position: relative;
}

.faq-icon:before,
.faq-icon:after {
  content: '';
  position: absolute;
  background-color: var(--color-primary);
  transition: transform var(--transition-normal);
}

.faq-icon:before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.faq-icon:after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.faq-item.active .faq-icon:after {
  transform: translateX(-50%) rotate(90deg);
}

.faq-answer {
  padding: 0 var(--spacing-md);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal), padding var(--transition-normal);
}

.faq-item.active .faq-answer {
  max-height: 300px;
  padding: 0 var(--spacing-md) var(--spacing-md);
}

.faq-answer p {
  color: var(--color-text-secondary);
}

/* Responsive */
@media (max-width: 992px) {
  .contact-hero h1 {
    font-size: 2.5rem;
  }
  
  .contact-container {
    flex-direction: column;
  }
  
  .contact-info,
  .contact-form-container {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .contact-hero h1 {
    font-size: 2rem;
  }
  
  .contact-hero p {
    font-size: 1rem;
  }
  
  .faq-question h3 {
    font-size: 1.1rem;
  }
}

@media (max-width: 576px) {
  .contact-hero {
    height: 250px;
  }
  
  .contact-hero h1 {
    font-size: 1.8rem;
  }
  
  .contact-form,
  .contact-info {
    padding: var(--spacing-md);
  }
}