/*
  Stylesheet for the Underground Racing remote tuning page
  Colors and effects create a dark, high‑contrast vibe with red accents
*/
/*
  Import the custom RacingEngine font for the site logo.  The user should
  ensure RacingEngine-Regular.otf is placed in the same directory as
  index.html and style.css.  We define a font-face and then reference it
  for the logo element below.
*/
@font-face {
  font-family: 'RacingEngine';
  src: url('RacingEngine-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --color-bg: #0d0d0d;
  --color-card: #141414;
  --color-accent: #e10600;
  --color-text-primary: #ffffff;
  /* slightly brighter secondary text for better contrast */
  --color-text-secondary: #a6a6a6;
  --color-border: rgba(225, 6, 0, 0.35);
  --font-heading: 'Orbitron', sans-serif;
  --font-body: 'Montserrat', sans-serif;
  /* darker variant of the accent color for subtle highlights */
  --color-accent-dark: #7a0000;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-text-primary);
  line-height: 1.6;
  position: relative;
  /* Prevent horizontal scrollbars on small screens */
  overflow-x: hidden;
}

/* Smoke overlay positioned at the top of the hero section.  The image lives in the project as smoke.png. */
.smoke-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40vh;
  background-image: url('smoke.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  opacity: 0.45;
  filter: blur(2px);
  pointer-events: none;
  /* Place between the radial and linear gradients */
  z-index: -2;
  mix-blend-mode: screen;
}

/* Generic section styling: gives each section its own card‑like container with padding and subtle shadow */
.section-block .container {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 3rem 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* Ensure headers within section cards sit flush to the top and are centred */
.section-block .section-title {
  margin-top: 0;
}

header.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  padding: 0 1.5rem;
}

header.hero h1 {
  font-family: var(--font-heading);
  /* Make the primary page title ("Remote Tuning Services") smaller and white to
     let the BMF Tuned logo stand out more. Adjust the clamp values to
     reduce the max size on large screens. */
  font-size: 1.0rem;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 1rem 0;
}

header.hero p {
  max-width: 800px;
  color: var(--color-text-secondary);
  font-size: 1.1rem;
  margin: 0;
}

/* radial and linear gradient overlay to add depth */
header.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(225, 6, 0, 0.25), transparent 70%);
  /* Place below smoke overlay and linear gradient */
  z-index: -4;
}

header.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
      120deg,
      rgba(225, 6, 0, 0.04) 0%,
      rgba(225, 6, 0, 0.08) 50%,
      rgba(225, 6, 0, 0.04) 100%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.4) 100%);
  /* Slightly above smoke overlay for subtle blending */
  z-index: -1;
}

/* moving speed lines */
.speed-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.speed-lines span {
  position: absolute;
  top: -100%;
  width: 2px;
  height: 200%;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
  animation: move-lines 12s linear infinite;
  opacity: 0.4;
}

.speed-lines span:nth-child(1) {
  left: 10%;
  animation-duration: 13s;
  animation-delay: -1s;
  opacity: 0.35;
}
.speed-lines span:nth-child(2) {
  left: 25%;
  animation-duration: 10s;
  animation-delay: -3s;
  opacity: 0.5;
}
.speed-lines span:nth-child(3) {
  left: 40%;
  animation-duration: 14s;
  animation-delay: -5s;
  opacity: 0.3;
}
.speed-lines span:nth-child(4) {
  left: 55%;
  animation-duration: 11s;
  animation-delay: -2s;
  opacity: 0.45;
}
.speed-lines span:nth-child(5) {
  left: 70%;
  animation-duration: 13s;
  animation-delay: -4s;
  opacity: 0.4;
}
.speed-lines span:nth-child(6) {
  left: 85%;
  animation-duration: 12s;
  animation-delay: -6s;
  opacity: 0.5;
}
.speed-lines span:nth-child(7) {
  left: 5%;
  animation-duration: 15s;
  animation-delay: -7s;
  opacity: 0.25;
}
.speed-lines span:nth-child(8) {
  left: 35%;
  animation-duration: 9s;
  animation-delay: -8s;
  opacity: 0.35;
}
.speed-lines span:nth-child(9) {
  left: 60%;
  animation-duration: 16s;
  animation-delay: -9s;
  opacity: 0.28;
}
.speed-lines span:nth-child(10) {
  left: 90%;
  animation-duration: 10s;
  animation-delay: -5s;
  opacity: 0.5;
}

@keyframes move-lines {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

main {
  padding: 4rem 1.5rem;
}

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

.section-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--color-accent);
  margin: 0 0 2rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

.packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.package-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  /* Allow cards with longer descriptions to expand vertically */
  overflow: visible;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.package-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(225, 6, 0, 0.3);
}

.package-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text-primary);
  margin-bottom: 0.75rem;
}

.package-price {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

.package-desc {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.info p {
  color: var(--color-text-secondary);
  font-size: 1rem;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
/* Logo styling */
.logo {
  /* Use the custom RacingEngine font for the logo with a fallback to the
     default heading font if the custom font fails to load. */
  font-family: 'RacingEngine', var(--font-heading);
  /* Reduce the size of the logo to make it less dominant at the top. */
  font-size: 2.0rem;
  font-weight: 700;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
  position: relative;
}
.logo span {
  color: var(--color-accent);
}
.logo::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(to right, var(--color-accent), var(--color-accent-dark));
}

/* Requirements and payment sections (separate) */
.requirements-section,
.payments-section {
  color: var(--color-text-secondary);
  text-align: center;
}
.requirements-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 800px;
  text-align: left;
}
.requirements-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.4;
}
.requirements-list li::before {
  content: '\25B6';
  color: var(--color-accent);
  position: absolute;
  left: 0;
  top: 0.15rem;
}

/* Links inside the requirements list should use the accent color */
.requirements-list a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
}
.requirements-list a:hover {
  text-decoration: underline;
}

.payments {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  justify-content: center;
}

.method {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--color-text-primary);
}

.method i {
  font-size: 1.5rem;
  color: var(--color-accent);
}

/* Inline SVG icons in payment methods */
.method svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--color-accent);
  flex-shrink: 0;
}

/* Label for each payment method */
.method-label {
  font-family: var(--font-heading);
  color: var(--color-accent);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Utility class to hide elements */
.hidden {
  display: none;
}

/* Make Apple Pay method clickable to reveal the number */
#appleMethod {
  cursor: pointer;
}

.note {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.note a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
}

footer {
  background: var(--color-card);
  padding: 2rem 1.5rem;
  text-align: center;
  border-top: 1px solid var(--color-border);
}

footer p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Call to action button */
.btn-cta {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.8rem 2rem;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
  color: var(--color-text-primary);
  font-family: var(--font-heading);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(225, 6, 0, 0.35);
}

/* Process list styling */
.process-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem auto;
  max-width: 800px;
}
.process-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.8rem;
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.process-list li::before {
  content: '\25B6';
  color: var(--color-accent);
  position: absolute;
  left: 0;
  top: 0.25rem;
}

/* Social section styling */
.social-text {
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2rem auto;
  font-size: 1rem;
}
.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.social-links a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.social-links a svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--color-accent);
  flex-shrink: 0;
}
.social-links a:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(225, 6, 0, 0.3);
}

/* Form styling for requirements section */
.info-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
}
.form-row {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.form-row label {
  font-size: 0.9rem;
  color: var(--color-text-primary);
  margin-bottom: 0.3rem;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="file"] {
  width: 100%;
  padding: 0.6rem 1rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  color: var(--color-text-primary);
  font-size: 0.95rem;
}
.form-row input[type="text"]::placeholder,
.form-row input[type="email"]::placeholder {
  color: #6f6f6f;
}
.form-row input[type="text"]:focus,
.form-row input[type="email"]:focus,
.form-row input[type="file"]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(225, 6, 0, 0.3);
}
.form-row small {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  margin-top: 0.3rem;
}

/* Note shown above the Send button to explain file uploads come later */
.info-note {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
  max-width: 600px;
  margin: 0.5rem auto 0.5rem;
  text-align: center;
}

/* Send button styling */
.btn-send {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.8rem 2rem;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
  border: none;
  color: var(--color-text-primary);
  font-family: var(--font-heading);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-send:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(225, 6, 0, 0.35);
}

@media (max-width: 600px) {
  .packages {
    gap: 1.5rem;
  }
  .package-card {
    padding: 1.5rem 1rem;
  }
  .section-title {
    font-size: 1.5rem;
  }
  .requirements h3 {
    font-size: 1.25rem;
  }

  /* On very small screens, stack package cards into a single column and reduce padding */
  .packages {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .section-block .container {
    padding: 2rem 1rem;
  }
}