/* ========================================
   CORVETTE VIN DECODER – MODERN & DEDICATED
   Only for https://corvettec3decoder.com/vin/
   Mobile-first, responsive, fast, clean
   ======================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #f4f6f9; /* Pöytäkoneen tausta */
  color: #333;
  line-height: 1.6;
  font-size: 17px;
  padding: 0;
  margin: 0;
  overflow-x: hidden; 
}

/* ========================================
   GLOBAL HEADER (VANHAT TYYLIT – Poistettu/Korjattu myöhemmin)
   ======================================== */
header {
  position: static; 
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

/* ========================================
   RESPONSIVE HEADER - STICKY-HEADER (KORJATTU)
   ======================================== */
.sticky-header {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); 
  color: #fff;
  padding: 16px 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  position: static;
  top: 0;
  z-index: 1000;
  border-bottom: 3px solid #f39c12;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 15px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;
}

.logo img {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  border: 3px solid rgba(255,255,255,0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* KORJATTU: h1 → .page-title */
.header-text .page-title {
  font-size: 2rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  color: white;
  line-height: 1.2;
}

.header-text .page-title .highlight {
  color: #f39c12;
  font-weight: 900;
}

.header-text .tagline {
  font-size: 1rem;
  margin: 4px 0 0;
  opacity: 0.95;
  font-weight: 500;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.articles-section {
  margin: 60px 0;
  padding: 0 20px;
}

.articles-header {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.articles-hero-img {
  width: 360px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.articles-intro {
  flex: 1;
  min-width: 300px;
}

.articles-intro h2 {
  font-size: 2.2rem;
  margin-bottom: 16px;
  color: #222;
}

.articles-intro p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #444;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
}

.article-category-card {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border-left: 5px solid #0066cc;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-category-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.article-category-card h3 {
  font-size: 1.4rem;
  margin-bottom: 16px;
  color: #0066cc;
  font-weight: 600;
}

.article-category-card ul {
  list-style: none;
  padding: 0;
}

.article-category-card li {
  margin: 10px 0;
  font-size: 1rem;
}

.article-category-card a {
  color: #222;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.article-category-card a:hover {
  color: #0066cc;
}

.highlight-card {
  border-left-color: #e74c3c;
  background: linear-gradient(135deg, #fff8f8, #fff);
}

.highlight-card h3 {
  color: #333333;
}
/* =========================================
   A11Y: Piilottaa elementin visuaalisesti, mutta pitää sen ruudunlukijoille
   ========================================= */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px; /* Vältä margin-romahdus */
    overflow: hidden;
    clip: rect(0, 0, 0, 0); /* Vanha tekniikka */
    clip-path: inset(50%); /* Moderni tekniikka */
    white-space: nowrap;
    border: 0;
}
/* ========================================= */
/* FOOTER: Kontrastikorjaukset ja Inline-tyylien siirto */
/* ========================================= */

/* UUSI/MUOKATTU: Korvaa vanhan inline-tyylin ja asettaa kontrastiturvallisen värin */
.footer-info-text {
    margin: 16px 0;
    font-size: 0.9rem;
    color: #eeeeee !important; /* Vaalea harmaa teksti tummaa taustaa vasten */
    line-height: 1.6;
}

/* UUSI: Lisätty luokka toiselle riville (korvaa inline-tyylin) */
.footer-links-row {
    margin: 12px 0;
}

/* UUSI: Pakota kaikki linkit (paitsi punainen, jolla on inline-tyyli) valkoisiksi */
footer a {
    color: #ffffff !important; /* Paras kontrasti tummaa taustaa vasten */
    text-decoration: underline;
    /* Varmista, ettei tämä yliaja punaisen linkin inline-tyyliä */
}

/* Varmista tekijänoikeus-tekstin kontrasti */
.copyright {
    color: #ffffff !important;
    font-size: 0.9rem;
}

/* Lisää ilmavan välin jokaisen kappaleen <p> jälkeen #c3-article sisällä – ilman <br>-tageja */
#c3-article p {
    margin-bottom: 1.2em;        /* säädä tätä lukua makusi mukaan: 1.2em – 1.8em on yleensä hyvä */
}

/* Jos haluat vielä vähän enemmän ilmaa kuvatekstien jälkeen */
#c3-article figcaption {
    margin-top: 0.5em;
    margin-bottom: 0.8em;
}

/* Ja otsikoiden väliin */
#c3-article h2 {
    margin-top: 1.2em;
    margin-bottom: 0.8em;
}


/* Mobile */
@media (max-width: 768px) {
  .articles-header {
    flex-direction: column;
    text-align: center;
  }
  .articles-hero-img {
    width: 100%;
    max-width: 360px;
  }
}
/* FULL WIDTH ARTICLES SECTION */
.articles-section-full {
  margin: 60px 0;
  padding: 0;
  overflow: hidden;
}

.articles-header {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 50px;
  flex-wrap: wrap;
  padding: 0 20px;
}

.articles-hero-img {
  width: 360px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.articles-intro {
  flex: 1;
  min-width: 300px;
}

.articles-intro h2 {
  font-size: 2.2rem;
  margin-bottom: 16px;
  color: #222;
}

.articles-intro p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #444;
}

.articles-grid-full {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding: 0 20px;
}

/* FULL WIDTH CARD – DESKTOP ONLY */
.article-full-width-card {
  background: linear-gradient(135deg, #f8fbff, #ffffff);
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  border-left: 6px solid #0066cc;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-full-width-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.article-full-width-card h3 {
  font-size: 1.6rem;
  margin-bottom: 20px;
  color: #0066cc;
  font-weight: 600;
}

.years-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.years-list li {
  margin: 0;
}

.years-list a {
  display: block;
  padding: 12px 16px;
  background: #fff;
  border-radius: 8px;
  text-decoration: none;
  color: #222;
  font-weight: 500;
  text-align: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.years-list a:hover {
  background: #0066cc;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,102,204,0.3);
}

/* RESPONSIVE: Mobile */
@media (max-width: 1023px) {
  .years-list {
    grid-template-columns: 1fr;
  }
  .years-list a {
    text-align: left;
  }
}

/* Desktop: Full Width + Grid */
@media (min-width: 1024px) {
  .articles-section-full {
    padding: 0;
  }
  .articles-header,
  .articles-grid-full {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
  }
  .article-full-width-card {
    grid-column: 1 / -1;
  }
}

/* Reuse existing card styles */
.article-category-card,
.highlight-card {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border-left: 5px solid #0066cc;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-category-card:hover,
.highlight-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.highlight-card {
  border-left-color: #e74c3c;
}

.highlight-card h3 {
  color: #333333;
}
/* YEARS-KORTTI: KOKO RUUDUN LEVEYS + NAPPI-GRID */
.years-full-width {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #f8fbff, #ffffff);
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  border-left: 6px solid #0066cc;
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.years-full-width:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.years-full-width h3 {
  margin: 0 0 24px 0;
  font-size: 1.7rem;
  color: #0066cc;
  font-weight: 600;
}

/* 4 SARAKETTA – NAPPI TÄYTTÄÄ KOKO SOLUN */
.years-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.year-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  background: #ffffff;
  color: #222;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  text-align: center;
  border-radius: 10px;
  border: 1px solid #e0e6f0;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  height: 100%;
  min-height: 56px;
}

.year-btn:hover {
  background: #0066cc;
  color: white;
  border-color: #0066cc;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,102,204,0.3);
}

/* MOBIILI: 1 SARAKE */
@media (max-width: 1023px) {
  .years-grid {
    grid-template-columns: 1fr;
  }
  .year-btn {
    justify-content: flex-start;
    padding: 14px 18px;
  }
}

/* GRIDIN PÄÄKONTTI – SALLII FULL-WIDTH */
.articles-grid-full {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  padding: 0 20px;
}

@media (min-width: 1024px) {
  .articles-grid-full {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
  }
  /* Varmistetaan, että muut kortit eivät veny */
  .article-category-card,
  .highlight-card {
    grid-column: auto;
  }
}


/* ========================================= */
/* KORJAUS: VAIN YEARS LEVEÄ, MUUT NORMAALIT */
/* ========================================= */

/* PÄÄGRID: 3 SARAKETTA DESKTOPILLA */
.articles-grid-full {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 korttia rinnakkain */
  gap: 30px;
  padding: 0 20px;
  max-width: 1400px;
  margin: 0 auto;
}

/* YEARS-KORTTI: KOKO LEVEYS */
.years-full-width {
  grid-column: 1 / -1; /* TÄYTTÄÄ KAIKKI SARAKKEET */
  background: linear-gradient(135deg, #f8fbff, #ffffff);
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  border-left: 6px solid #0066cc;
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.years-full-width:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.years-full-width h3 {
  margin: 0 0 24px 0;
  font-size: 1.7rem;
  color: #0066cc;
  font-weight: 600;
}

/* VUOSINAPIT: 4 SARAKETTA */
.years-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.year-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  background: #ffffff;
  color: #222;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  text-align: center;
  border-radius: 10px;
  border: 1px solid #e0e6f0;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  min-height: 56px;
}

.year-btn:hover {
  background: #0066cc;
  color: white;
  border-color: #0066cc;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,102,204,0.3);
}
/* ========================================= */
/* KORJAUS: Otsikon .all-gen värin asettaminen valkoiseksi */
/* ========================================= */
h2.all-gen {
    color: #ffffff !important; 
    /* Varmista, että otsikko on riittävän suuri */
    /* font-size: 2.5rem; */ 
}

/* MUUT KORTIT: NORMAALIT (VANHAT TYYLIT) */
.article-category-card,
.highlight-card {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border-left: 5px solid #0066cc;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-category-card:hover,
.highlight-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.highlight-card {
  border-left-color: #e74c3c;
}

.highlight-card h3 {
  color: #333333;
}
.minimal-logo {
  max-width: 50%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}




/* MOBIILI: VÄHINTÄÄN 70% LEVEYS */
@media (max-width: 768px) {
  .minimal-logo {
    max-width: 100%;
    width: 75%; /* Isompi kuin 50% */
    min-width: 70%; /* Varmistaa vähintään 70% */
    display: block;
   margin: 24px auto 0 auto; /* YLÄMARGINAALI 24px + keskitys */
	
  }
}

/* MOBIILI: 1 SARAKE KAIKILLE */
@media (max-width: 1023px) {
  .articles-grid-full {
    grid-template-columns: 1fr;
    padding: 0 15px;
  }
  .years-grid {
    grid-template-columns: 1fr;
  }
  .year-btn {
    justify-content: flex-start;
    padding: 14px 18px;
  }
}

/* === C1–C8 NAVIGATION === */
.gen-nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  background: transparent; 
  padding: 0;
  margin: 0;
  gap: 6px;
}

.gen-link {
  flex: 0 0 auto;
  background: #c0392b;
  color: #fff;
  padding: 8px 14px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  margin-left: 0;
}

.gen-link:hover {
  background: #0A1F3D;
  color: #fff;
  border-color: #f39c12;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.gen-link:active {
  background: #0A1F3D;
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

/* ========================================
   RESPONSIVE LOHKOT
   ======================================== */

@media (max-width: 992px) {
  .header-container {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  .logo {
    justify-content: center;
    gap: 10px;
    width: 100%;
  }
  .gen-nav {
    justify-content: center;
    margin-top: 5px;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
  }
}

@media (max-width: 768px) {
  /* KORJAUS 4: Poista body-tausta mobiilissa */
  body {
      background: #fff; 
  }
  
  .sticky-header {
    padding: 12px 15px;
  }
  .logo img {
    width: 60px;
    height: 60px;
  }
  .header-text .page-title {
    font-size: 2.2rem;
  }
  .header-text .tagline {
    font-size: 0.8rem;
  }
  
  .gen-nav {
    justify-content: space-between; 
    gap: 4px; 
    overflow-x: hidden;
  }
  .gen-link {
    flex: 1 1 0;
    min-width: 0; 
    padding: 7px 4px; 
    font-size: 0.8rem;
  }

  /* KORJAUS 1: Yleiset Mobiilisäädöt */
  main {
    padding: 0; 
    margin: 0;
  }

  article {
    padding: 15px 10px; 
    border-radius: 0; 
    box-shadow: none; 
    margin-bottom: 20px;
  }
}

@media (max-width: 400px) {
  .sticky-header {
    padding: 8px 10px;
  }
  
  .logo {
    gap: 8px;
  }

  .logo img {
    width: 60px;
    height: 60px;
    border: 2px solid rgba(255,255,255,0.3);
  }
  
  .header-text .page-title {
    font-size: 2.2rem;
    line-height: 1.1;
  }

  .header-text .tagline {
    font-size: 0.65rem;
  }
  
  .gen-nav {
    gap: 2px;
    margin-top: 4px;
  }

  .gen-link {
    padding: 5px 2px;
    font-size: 0.65rem;
  }
  
  .social-links img {
      width: 28px !important; 
      height: 28px !important; 
  }
}

@media (min-width: 769px) {
  .sticky-header {
    position: static !important; 
    top: 0;
    z-index: 1000;
  }
}

/* ========================================
   MUUT TYYLIT
   ======================================== */

main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px; 
}

article {
  background: #fff;
  border-radius: 16px; 
  padding: 25px; 
  box-shadow: 0 4px 20px rgba(0,0,0,0.08); 
  margin-bottom: 30px;
}

.intro-section {
  text-align: center;
  margin-bottom: 40px;
  padding: 0 10px;
}

.intro-section h1 {
  font-size: 2.1rem;
  color: #2c3e50;
  margin-bottom: 16px;
  font-weight: 700;
}

.intro-section p {
  font-size: 1.1rem;
  color: #555;
  max-width: 800px;
  margin: 0 auto 20px;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 30px 0;
  padding: 0 10px;
}

.benefit-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  border-left: 4px solid #e74c3c;
}

.benefit-card strong {
  color: #2c3e50;
  display: block;
  margin-bottom: 6px;
  font-size: 1.05rem;
}

.source-note {
  text-align: right;
  font-size: 0.85rem;
  color: #333333;
  margin-top: 15px;
}

.source-note a {
  color: #c0392b;
  text-decoration: none;
}

.source-note a:hover {
  text-decoration: underline;
}

.hero-image-section { 
  padding: 20px 0;
  text-align: center;
}

.hero-image {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.generation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin: 40px 0;
}

.gen-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.gen-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.gen-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-bottom: 1px solid #eee;
}

.gen-content {
  padding: 18px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.gen-content h2 {
  font-size: 1.3rem;
  color: #2c3e50;
  margin: 0 0 8px;
  font-weight: 600;
}

.gen-content p {
  font-size: 0.95rem;
  color: #666;
  margin: 0 0 16px;
  line-height: 1.4;
}

.cta-section {
  text-align: center;
  padding: 40px 20px;
  background: linear-gradient(135deg, #2c3e50, #34495e);
  color: #fff;
  border-radius: 16px;
  margin: 40px 0;
}

.cta-section h2 {
  font-size: 1.8rem;
  margin-bottom: 16px;
}

.cta-section p {
  font-size: 1.1rem;
  margin-bottom: 24px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}

.cta-btn {
  background: #c0392b !important;
  color: #ffffff !important;
  padding: 12px 8px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s;
}

.cta-btn:hover {
  background: #c0392b;
  transform: scale(1.05);
}

.trust {
  margin-top: 20px;
  font-size: 0.95rem;
}

.trust a {
  color: #fff;
  text-decoration: underline;
}

footer {
  text-align: center;
  padding: 30px 20px;
  background: #2c3e50;
  color: #bdc3c7;
  font-size: 0.9rem;
}

footer a {
  color: #e74c3c;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 20px 0;
}

.social-links img {
  width: 32px !important;
  height: 32px !important;
  max-width: 100%; 
  display: block; 
  filter: none !important;
  fill: #fff !important;
  stroke: #fff !important;
  transition: transform 0.2s ease;
}

.social-links img * {
  fill: #fff !important;
  stroke: #fff !important;
}

.social-links img:hover {
  transform: scale(1.15);
}

.copyright {
  margin-top: 16px;
  font-size: 0.85rem;
}

/* ========================================
   VIN DECODER TOOL
   ======================================== */
.decoder-section {
  margin: 0;
  padding: 30px 25px;
  background: #f0f2f5;
  border-radius: 12px;
  text-align: center;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.05); 
  margin-bottom: 30px;
}

.decoder-section h2 {
  font-size: 1.5rem;
  color: #2c3e50;
  margin-bottom: 20px;
}

#vinForm {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 500px;
  margin: 0 auto;
}

#vinInput {
  padding: 12px 16px;
  font-size: 1.1rem;
  width: 100%; 
  max-width: 350px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  flex-grow: 1;
  min-width: 150px;
}

#vinInput:focus {
  outline: none;
  border-color: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);
}

.start-btn {
  padding: 12px 24px;
  background-color: #c0392b !important;
  color: #ffffff !important;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.start-btn:hover {
  background: #c0392b;
  transform: translateY(-1px);
}

.result-box {
  margin-top: 20px;
  padding: 16px;
  background: #fff;
  border: 2px solid #e74c3c;
  border-radius: 10px;
  min-height: 80px;
  font-family: 'Courier New', monospace;
  font-size: 1.05rem;
  line-height: 1.6;
}

.vin-result p {
  margin: 8px 0;
  padding: 0;
}

.vin-result strong {
  color: #2c3e50;
}

.error {
  color: #e74c3c;
  font-weight: 600;
  text-align: center;
  padding: 12px;
  background: #fdf2f2;
  border-radius: 8px;
}

/* KORJAUS: Vahvistetaan taulukon kehykset VIN-dekooderin ulostulossa */
.decoder-output table {
  border-collapse: collapse;
  border: 1px solid #999 !important; 
  width: 100%;
}

.decoder-output table th,
.decoder-output table td {
  border: 1px solid #ccc !important;
  padding: 8px 12px;
  text-align: left;
}

.decoder-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  border: 1px solid #999 !important; 
}

.decoder-table th,
.decoder-table td {
  text-align: left;
  padding: 8px 12px;
  border: 1px solid #ccc !important; 
}

/* ========================================
   TAULUKOT & VIERITYS
   ======================================== */

.table-wrapper {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

.table-wrapper::-webkit-scrollbar {
  height: 8px;
}
.table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.table-wrapper::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #999; 
  background: #fff;
  font-size: 0.9rem;
  table-layout: auto;
}

.table-wrapper th,
.table-wrapper td {
  padding: 8px 6px;
  text-align: center;
  border: 1px solid #ccc;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
  font-size: 0.85rem;
}

.table-wrapper th {
  background: #2c3e50;
  color: #fff;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 2;
}

.table-wrapper tr:hover {
  background: #f8f9fa;
}

.table-wrapper table tbody tr td {
    color: #333 !important; 
    background-color: #ffffff; 
}
.vin-breakdown-table tbody td {
    color: #333 !important; 
    background-color: #f8f8f8; 
    border: 1px solid #ddd;
}
.table-wrapper table thead th {
    color: #ffffff !important; 
    background-color: #2c3e50 !important; 
}

@media (max-width: 600px) {
  .table-wrapper table {
    width: 100%;
    font-size: 0.8rem;
    table-layout: auto;
  }

  /* KORJAUS 5: Lisää padding soluihin mobiilissa - Varmistettu !important:lla */
  .table-wrapper th,
  .table-wrapper td {
    padding: 8px 6px !important; /* Lisätty !important */
    font-size: 0.85rem !important; /* Lisätty !important */
  }
}

/* ========================================
   VIN LOCATIONS – CARD GRID
   ======================================== */
.vin-locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.location-card {
  background: #ffffff;
  border: 1.5px solid #e1e8ed;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.location-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, #e74c3c, #c0392b);
  border-radius: 14px 0 0 14px;
}

.location-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
  border-color: #e74c3c;
}

.year-badge {
  background: #2c3e50;
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 7px 14px;
  border-radius: 10px;
  align-self: flex-start;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.location-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #2d3436;
}

.location-card p strong {
  color: #e74c3c;
  font-weight: 600;
}

@media (max-width: 480px) {
  .vin-locations-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .location-card {
    padding: 18px;
  }
  .year-badge {
    font-size: 0.82rem;
    padding: 6px 12px;
  }
  .location-card p {
    font-size: 0.95rem;
  }
}

/* ========================================
   AUTHOR BOX – MODERN STYLE
   ======================================== */

.custom-box {
  background: linear-gradient(to bottom right, #f8f9fa, #e9ecef);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 20px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  border-left: 4px solid #e74c3c;
  transition: box-shadow 0.3s ease;
}

.custom-box:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.float-image {
  flex-shrink: 0;
}

.float-image img {
  border-radius: 50%;
  border: 3px solid #e74c3c;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  width: 70px;
  height: 70px;
  object-fit: cover;
}

.custom-box p {
  margin: 0;
  font-size: 1rem;
  color: #333;
  line-height: 1.5;
}

.custom-box a {
  color: #e74c3c;
  text-decoration: none;
  font-weight: 600;
}

.custom-box a:hover {
  text-decoration: underline;
}

/* Mobiilioptimoitu */
@media (max-width: 768px) {
  .custom-box {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .float-image img {
    width: 60px;
    height: 60px;
  }
  
  .custom-box p {
    font-size: 0.95rem;
  }
}

.minimal-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 20px auto;
  padding: 0; 
  max-width: 800px;
  flex-wrap: wrap;
  background: transparent; 
}

.minimal-car {
  width: 100%;
  max-width: 240px;
  height: auto;
  transition: transform 0.3s ease;
  border: none; 
  box-shadow: none; 
}

.minimal-car:hover {
  transform: translateY(-4px);
}

.minimal-text {
  text-align: left;
  flex: 1;
  min-width: 260px;
}

.minimal-text h1 {
  font-size: 2.1rem; 
  margin: 0 0 6px;
  font-weight: 800;
  color: #2c3e50;
}

.minimal-text p {
  font-size: 1rem;
  margin: 0;
  color: #555;
  font-weight: 500;
}

/* Mobiili – pino päällekkäin */
@media (max-width: 640px) {
  .minimal-hero {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .minimal-text {
    text-align: center;
  }
  .minimal-text h1 {
    font-size: 1.6rem;
  }
}

/* C3*/


.decoder-wrapper {
  display: flex;
  gap: 20px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  flex-wrap: wrap;
  max-width: 100%; 
}

/* =========================================
   DECODER FLEXBOX SÄÄTÖ: PÖYTÄKONE (PÄIVITETTY)
   ========================================= */

/* Aseta inputs-alueelle tiukka, kiinteä koko (300px) */
.decoder-inputs {
    /* flex: 0 0 300px on jo erittäin hyvä (Älä kasva, älä kutistu, perusleveys 300px) */
    flex: 0 0 300px; 
    max-width: 300px;
    
    /* 💥 KORJAUS 1: Nostetaan kerrosta, jotta Inputs on Outputin päällä */
    position: relative; /* Tarvitaan z-indexin toimimiseen */
    z-index: 10; 
}

/* Aseta output-alueelle joustavat säännöt, jotta se täyttää jäljelle jäävän tilan */
.decoder-output {
    /* flex: 1 (Täytä jäljelle jäävä tila), min-width: 0 (Estä katoaminen) */
    flex: 1; 
    min-width: 0; 
    
    /* Laske kerrosta, jotta Inputs tulee sen päälle */
    z-index: 1; 
}

/* Varmista, että pääsäiliö käyttää Flexboxia ja sillä on rako */
.decoder-wrapper {
   .decoder-wrapper {
    display: flex;
    flex-wrap: nowrap;
    
    /* 💥 KORJAUS 1: Lisää harmaa tausta tähän */
    background: #f0f0f0; /* Käytä jotain vaaleanharmaata */
    border: 1px solid #ddd; /* Kevyt reunus */
    border-radius: 8px; /* Pyöristys kulmiin */
    padding: 20px; /* Sisäinen tila sisällön ympärille */
    
    /* Lisää rako inputsin ja outputin väliin */
    gap: 20px; 
    
    /* Poista mahdollisesti ristiriitaiset leveyssäännöt täältä */
    /* width: auto; max-width: 1200px; tms. */
}
}

.decoder-table th {
  text-align: left;
  padding: 8px 0;
  font-weight: normal;
  font-size: 16px;
}

.c3-input {
  font-family: monospace;
  font-size: 16px;
  padding: 4px;
  border: 1px solid #999;
}

.decode-btn {
  background: #d43f3a;
  color: white;
  border: none;
  padding: 6px 12px;
  font-weight: bold;
  cursor: pointer;
  margin-left: 8px;
}

.show-btn {
  background: #337ab7;
  color: white;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
}

.help-btn {
  background: #ccc;
  color: #000;
  border: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  margin-left: 5px;
}

/* ========================================
   Mobiilikohtainen VIN-dekooderi (PÄIVITETTY)
   ======================================== */
@media (max-width: 1000px) {
  
  /* KORJAUS 3: Säädetään ulompaa dekooderialuetta */
  .decoder-section {
      padding: 0; 
      border-radius: 0; 
      box-shadow: none; 
      background: transparent; 
      margin-bottom: 10px; 
  }
  
  /* Muuta dekooderin pääkontti pinoavaksi */
  .decoder-wrapper {
    flex-direction: column;
    padding: 10px; 
    gap: 15px;
    border: none; 
    box-shadow: none; 
    background: transparent; 
  }

  /* Pakota syötteet ja tulokset käyttämään koko leveys */
  .decoder-inputs,
  .decoder-output {
    min-width: 100%; 
    max-width: 100%;
    flex: none;
    padding: 10px;
  }
  
  /* Varmista, että tulosalueen sisätausta on valkoinen */
  .decoder-output {
      background: #fff; 
      padding: 10px;
  }
  
  /* ALKUPERÄINEN AGGRESSIIVINEN SÄÄNTÖ */
  .c3-input { 
    width: 100% !important; 
    margin: 4px 0; 
  }
  
  .decode-btn,
  .show-btn {
      width: 100%; 
      margin-top: 10px;
      margin-left: 0;
  }
  
  .decoder-output {
    max-height: none; 
  }

  /* 🛠️ LOPULLINEN CSS-KORJAUS: Mobiili Pinotus */
    
  /* Muuta pääryhmät pystysuuntaisiksi Flexbox-säiliöiksi */
  .input-group,
  .trim-tag-grid,
  .trim-tag-row,
  .decoder-row {
      display: flex;
      flex-direction: column; /* 💥 PAKOTA PINOUTUMINEN */
      width: 100%;
      gap: 5px; /* Lisää pieni väli elementtien väliin */
      margin-bottom: 5px; 
  }
  
  /* Poista Trim tag -osion erikoiskäsittely, jotta se pinoutuu normaalisti */
  .decoder-trim-tag-late {
      flex-direction: column;
      align-items: stretch; 
  }
  
  /* 💥 Varmista, että napit, select ja input-kentät käyttävät 100% leveyden */
  .c3-input,
  .year-select,
  .decode-btn,
  .show-btn {
      /* Ohita aiemmat 90px !important -pakotukset */
      width: 100% !important; 
      max-width: none !important; 
      flex: 1 1 100% !important; 
      
      /* Estää paddingia ja marginia aiheuttamasta ylivuotoa */
      box-sizing: border-box;
      margin-left: 0 !important; 
      margin-right: 0 !important;
  }
  
  /* Estä decoder-tablea ja sen sisältöä venyttämästä */
  .decoder-table {
      display: block; /* Poista taulukon oletus Flexbox-käyttäytyminen */
      width: 100%;
  }
  
  /* Varmista, että inputs- ja output-laatikot ovat 100% leveitä (jo olemassa) */
  .decoder-inputs,
  .decoder-output {
      width: 100% !important;
      max-width: 100% !important;
      flex: none;
  }
}


/* =========================================
   TRIM TAG LAYOUT (KORJAUS KOON YHTENÄISYYTEEN)
   ======================================== */

.trim-tag-row {
    display: flex;
    gap: 10px; /* Syötekenttien välinen etäisyys vaakasuunnassa */
    width: 100%;
    
    /* Varmistetaan rivien välinen etäisyys */
    margin-bottom: 15px; 
}

.trim-tag-row input {
    /* Pakotetaan inputsit jakamaan tila tasaisesti (puolet leveydestä) */
    flex: 1 1 50%; 
    
    /* Nollataan input-kenttien oma pystysuuntainen marginaali. */
    margin-bottom: 0 !important;
    
    /* box-sizing varmistaa, että padding ei kasvata input-kenttää liian suureksi */
    box-sizing: border-box;
}

/* =========================================
   *** LOPULLINEN KORJAUS MYINPUT8-KENTÄLLE ***
   Ohitetaan 100% leveys pakottamalla kiinteä, pieni koko.
   ======================================== */
#myInput8.c3-input, #myInput6.c3-input, #myInput7.c3-input{
    /* Määritellään kiinteä leveys (esim. 110 pikseliä), joka riittää 3 merkille + paddingille. */
    width: 90px !important; 
    
    /* Flexboxin ohitus: Älä kasva, älä kutistu, pakota 110px perusleveydeksi. */
    flex: 0 0 90px !important; 
    
    /* Varmuuden vuoksi maksimileveys */
    max-width: 90px !important; 
}

#vuosi.year-select {
    /* Määritellään kiinteä leveys (esim. 110 pikseliä). */
    width: 90px !important; 
    
    /* Varmuuden vuoksi, estetään Flexboxia/ulkoista tyyliä venyttämästä. */
    max-width: 90px !important; 
    flex: 0 0 90px !important; 
}

/* TÄRKEÄ: Määrittele luokka, joka ympäröi kentän ja napin. 
   Oletan tässä, että käytät luokkaa esim. '.decode-input-group'. */

.decode-input-group {
    display: flex;
    align-items: center; /* Kohdistaa elementit pystysuunnassa keskelle */
    gap: 10px; /* Väli kentän ja napin välillä */
    margin-bottom: 15px; /* Sama riviväli kuin muillakin kentillä */
}

/* Jos kenttä vie liian ison osan: */
.decode-input-group .c3-input,
.decode-input-group .year-select {
    flex-grow: 1; /* Salli kentän kasvaa, mutta jätä tilaa napille */
}
/* Lisää nämä säännöt tiedoston loppuun, tai siihen osioon missä muut dekooderi-tyylit ovat. */

/* =========================================
   DECODER RIVIT: Yleinen asettelu (kenttä + nappi)
   ========================================= */
.decoder-row {
    display: flex;
    align-items: center; /* Kohdista kentät ja napit pystysuunnassa */
    gap: 8px;
    width: 100%;
    margin-bottom: 15px; /* Yleinen riviväli */
}

/* Annetaan syötekentän (input/select) viedä suurin osa tilasta */
.decoder-row .c3-input,
.decoder-row .year-select {
    flex-grow: 1; /* Kasva ja vie tilaa */
    flex-shrink: 1;
}

/* =========================================
   NAPIT: Siirrä kaikki napit oikeaan reunaan
   ========================================= */
.decoder-row .decode-btn,
.decoder-row .show-btn {
    flex-shrink: 0; /* Estä napin kutistuminen */
    width: auto !important; /* Estä 100% leveyden perintä */
    
    /* 💥 TÄRKEÄ: SIIRTO OIKAASEEN REUNAAN */
    margin-left: auto; 
}

/* =========================================
   ERIKOISKORJAUS: Trim tag 1981 late-1982 (kahden rivin syöte)
   ========================================= */
.decoder-trim-tag-late {
    /* Vain tämä rivi on monimutkaisempi, koska siinä on kaksi input-kenttää päällekkäin.
       Tehdään siitä Flexbox-säiliö, mutta pinoamalla sisällön (kentät) ylös ja napin oikealle. */
    display: flex;
    align-items: flex-start; /* Kohdista ylös */
}

.decoder-trim-tag-late .c3-input {
    /* Jos et voi poistaa <br>-elementtiä HTML:stä, nämä kaksi kenttää asettuvat silti allekkain. */
    width: 100% !important; 
    margin-bottom: 5px; /* Pieni väli kenttien väliin */
}

/* Kääritään input-kentät erilliseen säiliöön, jotta nappi pysyy oikealla */
/* KOSKA HTML-muutosta ei tehty, tehdään sääntö, joka kohdistaa napin oikealle */
.decoder-trim-tag-late .decode-btn {
    align-self: flex-end; /* Kohdista nappi alareunaan (toisen inputin tasalle) */
    margin-left: auto; /* Pakota oikeaan reunaan */
}

/* === Trim tag kenttien korkeuskorjaus mobiilissa === */
@media (max-width: 600px) {
  #vuosi.year-select,
  #myInput6.c3-input,
  #myInput7.c3-input,
  #myInput8.c3-input {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    line-height: 1.2 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 16px !important;
    box-sizing: border-box;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
  }
}

.decoder-table {
  border-collapse: collapse;
  border: 1px solid #999 !important;
  width: 100%;
  background-color: #fff;
}

.decoder-table th,
.decoder-table td {
  border: 1px solid #ccc !important;
  padding: 8px 12px;
  text-align: left;
  background-color: #e0e9f0; /* sama siniharmaa kuin tuotantotaulukossa */
  border-top: 6px solid #f1f8fe; /* vaalea varjostus yläreunaan */
  border-right: 1px solid #cbd2d8; /* kevyt oikean reunan korostus */
  font-size: 0.95rem;
  color: #2c3e50;
}

.decoder-table td, th {
  background-color: #e0e9f0;
}
.decoder-table th {
  /* color: #ffffff !important;       Valkoinen teksti */
  font-weight: 700 !important;     /* Boldattu */
  font-size: 0.95rem;              /* Hieman isompi ja selkeämpi */
  letter-spacing: 0.3px;           /* Pieni väli parantaa luettavuutta */
  background-color: #2c3e50;       /* Tumma tausta */

}


.decoder-table {
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.input-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.trim-tag-grid {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-group .decode-btn {
  flex-shrink: 0;
  align-self: flex-end;
  margin-left: auto;
  white-space: nowrap;
}

.decoder-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background-color: #fff;
  border: 2px solid #000000; /* Musta ulkoreuna */
  border-radius: 8px;
  overflow: hidden;
}

.decoder-table th,
.decoder-table td {
  background-color: #e0e9f0;
  padding: 8px 12px;
  font-size: 0.95rem;
  color: #2c3e50;
  border: 1px solid #000000; /* Mustat solureunat */
  box-shadow: inset 0 6px 0 #f1f8fe;
}

.decode-btn {
  background-color: #b9cedd;
  border: 2px solid #000000 !important; /* Musta reunus */
  border-radius: 4px;
  padding: 6px 12px;
  color: #000000;
  font: normal bold 13px/1 "Calibri", sans-serif;
  text-align: center;
  display: inline-block;
  box-shadow: none;
  appearance: none;
  cursor: pointer;
}
@media only screen and (max-width: 767px) {
  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  .decoder-table {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    border-spacing: 0;
  }

  .decoder-table th,
  .decoder-table td {
    padding: 6px 8px;
    font-size: 0.9rem;
    word-break: break-word;
  }

  .decode-btn {
    width: 100%;
    margin: 8px 0 0 0;
    display: block;
    box-sizing: border-box;
  }

  .input-wrapper,
  .decoder-section {
    padding: 0;
    margin: 0 auto;
    max-width: 100%;
  }
}
/* Target mobile (adjust breakpoint if needed, e.g., match your 767px or 1000px) */
@media only screen and (max-width: 767px) {
  /* Reset global containers to zero space */
  body, main, article, .decoder-section, .decoder-wrapper, .decoder-inputs, .decoder-output {
    margin: 0 !important;  /* Remove all margins */
    padding: 0 !important; /* Remove all paddings */
    max-width: 100% !important; /* Force full width */
    width: 100% !important; /* Ensure no shrinking */
    box-sizing: border-box !important; /* Include borders in width calc */
    background: transparent !important; /* No background causing visual space */
    border: none !important; /* Remove any borders adding space */
    box-shadow: none !important; /* No shadows creating illusion of margins */
  }

  /* Specifically for the table */
  .decoder-table {
    width: 100% !important; /* Full screen width */
    max-width: 100% !important;
    margin: 0 !important; /* Remove auto-centering and any margins */
    padding: 0 !important;
    border-spacing: 0 !important; /* Already set, but reinforce */
    border-collapse: collapse !important; /* Ensure no gaps */
    box-sizing: border-box !important;
  }

  /* Reduce internal cell padding if it feels "shrunk" (optional: set to 0 for ultra-compact) */
  .decoder-table th,
  .decoder-table td {
    padding: 4px 6px !important; /* Smaller than current 6px 8px; or set to 0px */
    margin: 0 !important;
    border: 1px solid #ccc !important; /* Keep borders, but they won't add extra space */
  }

  /* Ensure flex gaps don't add space */
  .decoder-wrapper,
  .input-group,
  .trim-tag-grid,
  .trim-tag-row,
  .decoder-row {
    gap: 5px !important; /* Reduce or set to 0px if no vertical space wanted */
  }

  /* Buttons and inputs: Force full width without extra space */
  .c3-input,
  .year-select,
  .decode-btn,
  .show-btn {
    width: 100% !important;
    margin: 0 0 5px 0 !important; /* Only bottom margin for separation; remove if unwanted */
    padding: 6px !important; /* Consistent small padding */
  }

  /* Override any other potential space-adding rules */
  .table-wrapper {  /* If this wraps the table */
    overflow-x: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
}

/* Optional: For even smaller screens (e.g., <400px) */
@media (max-width: 400px) {
  .decoder-table th,
  .decoder-table td {
    padding: 2px 4px !important; /* Even tighter */
    font-size: 0.8rem !important; /* Smaller text to fit */
  }
}

@media only screen and (max-width: 767px) {
  /* --- PAKOTETAAN DECODE- JA SHOW-NAPIT TÄYTEEN LEVEYTEEN --- */
  .decode-btn,
  .show-btn {
    width: 100% !important;           /* Täysi leveys */
    max-width: 100% !important;
    margin: 8px 0 0 0 !important;     /* Vain ylä- ja alamarginaali */
    padding: 10px 16px !important;    /* Isompi klikkialue */
    font-size: 1rem !important;       /* Selkeä fontti */
    font-weight: 600 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    display: block !important;        /* Varmistaa täyden leveyden */
    border-radius: 6px !important;    /* Kauniit kulmat */
  }

  /* --- POISTETAAN NAPPI INPUTIN VIERESTÄ, JOTTA SE EI PAKOTA LEVEYSRAJAA --- */
  .decoder-row,
  .input-group,
  .trim-tag-row,
  .decoder-trim-tag-late {
    flex-direction: column !important;   /* Pino: kenttä + nappi allekkain */
    align-items: stretch !important;     /* Venytä kaikki lapsielementit */
    gap: 6px !important;
  }

  /* --- INPUT-KENTÄT JA SELECTIT TÄYTEEN LEVEYTEEN (jo olemassa, mutta varmistetaan) --- */
  .c3-input,
  .year-select {
    width: 100% !important;
    margin: 0 0 6px 0 !important;
    padding: 8px !important;
    font-size: 1rem !important;
  }

  /* --- ERITYISTAPAU: Trim tag -rivi (1968–1981) --- */
  .trim-tag-row {
    display: flex !important;
    flex-direction: row !important;      /* Pidä vaakarivi, mutta inputit venyvät */
    gap: 6px !important;
  }

  .trim-tag-row .c3-input,
  .trim-tag-row .year-select {
    flex: 1 !important;                  /* Jaa tila tasan */
    min-width: 0 !important;             /* Estä ylivuoto */
  }

  /* --- LATE 1981-1982 TRIM TAG: kaksi inputia + nappi --- */
  .decoder-trim-tag-late .c3-input {
    margin-bottom: 6px !important;
  }

  .decoder-trim-tag-late .decode-btn {
    margin-top: 8px !important;
  }
}

/* ========================================= */
/* PÖYTÄKONE: Ensimmäisen sarakkeen leveyden pakotus (VIN-TAULUKKO) */
/* LISÄÄ TÄMÄ RIVILLE, JOKA ON MYÖHEMMIN KUIN OHITETTAVA SÄÄNTÖ (esim. Rivi 2000) */
/* ========================================= */
.decoder-table.result-displayed td:first-child {
    /* Vahvistettu leveys ja 'nowrap' joka sai sen aiemmin toimimaan */
    width: 80px !important; 
    min-width: 80px !important;
    max-width: 80px !important;
    white-space: nowrap !important;
}																		 
/* === TRIM TAG 1968–1981 MOBIILIKORJAUS === */
@media only screen and (max-width: 767px) {
  .input-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .trim-tag-grid { display: flex !important; flex-direction: column !important; gap: 6px !important; }
  .trim-tag-row { display: flex !important; gap: 6px !important; }
  .trim-tag-row .c3-input, .trim-tag-row .year-select { flex: 1 !important; min-width: 0 !important; }
  .input-group .decode-btn {
    width: 100% !important;
    padding: 10px 16px !important;
    margin: 8px 0 0 0 !important;
    font-weight: 600 !important;
    display: block !important;
  }
}

@media only screen and (max-width: 767px) {
  /* --- TRIM TAG 1981 LATE–1982: DECODE-NAPPI TÄYTEEN LEVEYTEEN --- */
  .decoder-trim-tag-late {
    display: flex !important;
    flex-direction: column !important;   /* Pino: inputit + nappi allekkain */
    gap: 8px !important;
    width: 100% !important;
  }

  .decoder-trim-tag-late .c3-input {
    width: 100% !important;
    margin-bottom: 6px !important;
  }

  /* TÄRKEIN: Tämä nappi (onclick="getInputValue7()") */
  .decoder-trim-tag-late .decode-btn {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 0 0 !important;
    padding: 10px 16px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    display: block !important;
    box-sizing: border-box !important;
  }
}

/* ========================================
   MOBIILI: NAV-LINKIT 2 RIVILLE (EI MUUTA HEADERIA)
   ======================================== */
@media (max-width: 768px) {
  .gen-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 10px !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  .gen-link {
    flex: 1 1 calc(33.333% - 10px) !important; /* 3 per rivi → 2 riviä */
    min-width: 90px !important;
    text-align: center !important;
    font-size: 0.85rem !important;
    padding: 9px 6px !important;
    box-sizing: border-box !important;
  }

  /* Jos haluat tarkalleen 4 + 3 jaolla */
  .gen-link:nth-child(-n+4) {
    order: 1;
  }
  .gen-link:nth-child(n+5) {
    order: 2;
  }
}

@media (max-width: 480px) {
  .gen-link {
    font-size: 0.8rem !important;
    padding: 8px 5px !important;
    min-width: 80px !important;
  }
}

.gen-link.active {
  background: #0A1F3D;
  color: #fff;
  border-color: #f39c12;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transform: translateY(-1px);
}
/* ========================================
   LOGO: TÄYDELLINEN NELIÖ, EI VÄÄRISTYMÄÄ
   ======================================== */
.logo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo-container {
  width: 60px;
  height: 60px;
  background: white;
  border-radius: 12px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* TÄRKEIN: säilyttää mittasuhteet */
  display: block;
}

/* MOBIILI: pienempi logo */
@media (max-width: 768px) {
  .logo-container {
    width: 60px;
    height: 60px;
    padding: 5px;
  }
}

@media (max-width: 480px) {
  .logo-container {
    width: 60px;
    height: 60px;
    padding: 4px;
  }
}

/* ============================================= */
/* KUVA + KUVATEKSTI – MOBIILI TÄYDELLINEN, DESKTOP ILMAVAMPI */
/* ============================================= */

.img-figure {
  margin: 2rem auto;
  text-align: center;
  box-sizing: border-box;
}

/* MOBIILI & PIENET NÄYTÖT (nykyinen täydellinen) */
@media (max-width: 768px) {
  .img-figure {
    padding: 0 1rem;                    /* 16px reunat – säilytetään */
    max-width: 100%;
  }
}

/* TABLETTI & DESKTOP – ENEMMÄN ILMAVUUTTA */
@media (min-width: 769px) {
  .img-figure {
    padding: 0 2rem;                    /* 32px reunat */
    max-width: 900px;                   /* Maks. 900px leveä kuva */
  }
}

/* ISO DESKTOP – VIELÄ ENEMMÄN ILMAA */
@media (min-width: 1200px) {
  .img-figure {
    padding: 0 3rem;                    /* 48px reunat */
    max-width: 860px;                   /* Optimaalinen lukuleveys */
  }
}

/* KUVA & KUVATEKSTI */
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  object-fit: contain;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.img-responsive:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.img-caption {
  margin-top: 0.75rem;
  font-size: 0.925rem;
  color: #444;
  font-style: italic;
  line-height: 1.5;
  padding: 0 0.5rem;
  max-width: 100%;
}

@media (max-width: 768px) {
  .img-caption {
    font-size: 0.875rem;
  }
}

/* ============================================= */
/* GENEERINEN INFO-LISTA – KORVAA UL SISÄLTÖPARIEN KANSSA */
/* ============================================= */

.info-list {
  margin: 1.25rem 0 1.5rem 1.5rem;     /* Ylä/ala + sisennys */
  padding-left: 0.5rem;
  line-height: 1.7;
  color: #333;
  list-style-type: disc;
}

.info-list li {
  margin-bottom: 0.65rem;
  padding-left: 0.25rem;
}

.info-list strong {
  color: #111;
  font-weight: 600;
}

/* MOBIILI – PIENEMPI SISENNYS */
@media (max-width: 768px) {
  .info-list {
    margin: 1rem 0 1.25rem 1.25rem;
    font-size: 0.95rem;
  }
  .info-list li {
    margin-bottom: 0.5rem;
  }
}

/* ===============================================
   VIN DECODER – FINAL FIX (only decoder rules)
   =============================================== */
   
/* Two-column desktop layout */
.decoder-wrapper {
  display: grid;
  grid-template-columns: minmax(430px, 480px) 1fr;
  gap: 20px;
  width: 100%;
  align-items: start;
  box-sizing: border-box;
}

/* Left column – input panel */
.decoder-inputs {
  min-width: 430px;
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  position: relative;
  z-index: 3;
}


/* Right column – output panel */
.decoder-output {
  width: 100%;
  min-width: 0;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #ccc;
  padding: 12px;
  overflow-x: auto;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* Inputs */
.c3-input,
.year-select {
  width: 100%;
  padding: 8px;
  border: 1px solid #999;
  border-radius: 6px;
  font-size: 1rem;
  box-sizing: border-box;
}

/* Buttons */
.decode-btn,
.show-btn,
.start-btn {
  width: 100%;
  padding: 10px 16px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  background: #e74c3c;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* Output table */
.decoder-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 10px;
}

.decoder-table th,
.decoder-table td {
  padding: 8px 12px;
  border: 1px solid #ccc;
  word-break: break-word;
  background: #e0e9f0;
  font-size: 0.95rem;
  color: #2c3e50;
}

/* Mobile: stack inputs and outputs */
@media (max-width: 768px) {
  .decoder-wrapper {
    grid-template-columns: 1fr;
  }

  .decoder-inputs,
  .decoder-output {
    max-width: 100%;
  }
}

/* =========================================
   LOPULLINEN MOBIILIKORJAUS: ULKOSÄILIÖT
   ========================================= */

@media (max-width: 768px) {
    /* **TÄRKEÄ:** Kohdista ulompaan flexbox-säiliöön, joka pitää molemmat sarakkeet. */
    .decoder-section {
        /* Nollaa flexbox-asetukset mobiilia varten */
        flex-direction: column !important;
        align-items: center !important; 
        
        /* Estä kiinteän leveyden aiheuttama ylivuoto */
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        
        /* Varmista, että padding on kohtuullinen */
        padding: 10px 10px !important;
    }
	
	
	
}

/* =========================================
   LOPULLINEN MOBIILIKORJAUS: INPUT-ALUE
   ========================================= */

@media (max-width: 768px) {
    /* **TÄRKEÄ:** Kohdista input-paneeliin, jolla on kiinteä min-width */
    .decoder-inputs {
        /* POISTA KIINTEÄ MIN-WIDTH, joka pakottaa leveän näkymän */
        min-width: 0 !important; 
        
        /* Pakota leveys 100 % */
        width: 100% !important;
        max-width: 100% !important;
        
        /* Nollaa marginaalit/padding, jotka voisivat aiheuttaa ylivuodon */
        margin: 0 !important;
        padding: 0 10px !important;
    }
}

/* =========================================
   LOPULLINEN KOSMINEN KORJAUS: VALKOINEN SUIKALE
   ========================================= */

@media (max-width: 768px) {
    /* 1. BODY: Pakota koko sivu käyttämään koko näytön leveyttä ja piilota ylivuoto */
    body {
        margin: 0 !important;
        padding: 0 !important;
        /* KÄYTÄ width: 100vw! TÄRKEÄ: Varmistaa, että leveys on täsmälleen 100% viewportista */
        width: 100vw !important; 
        /* TÄRKEÄ: Estää vaakaskrollauspalkin koko sivulle */
        overflow-x: hidden !important; 
        min-width: 0 !important;
    }

    /* 2. PÄÄSISÄLTÖ: Elementti, joka on suoraan body-elementin alla (esim. .main-content) */
    .main-content, .page-container, .content-wrapper, .decoder-wrapper { 
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* 3. DECODER-OSIOT: Varmista, että ne eivät sisällä ylivuotavaa paddingia/marginaalia */
    .decoder-section {
        /* Poista kaikki reunatyhjiöt, jotka voivat aiheuttaa valkoisen suikaleen */
        padding-left: 0 !important; 
        padding-right: 0 !important;
        margin-left: 0 !important; 
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* 4. INPUT/OUTPUT - ALUEET: Lisää tarvittaessa hieman tilaa sisältöön sisälle */
    .decoder-inputs, 
    .decoder-output {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

.decoder-output {
  padding: 0 !important;
  border-radius: 0 !important;
}

.decoder-table {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.decoder-output {
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  max-width: none !important;
}

.decoder-table {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
}

/* Säilytä padding, mutta anna taulukon venyä yli (visuaalinen full-bleed) */
.decoder-output {
  position: relative;
  background: transparent; /* sulauttaa taustan */
}

.decoder-output .decoder-table {
  margin-left: -12px;   /* vastaa .decoder-output nykyistä paddingia */
  margin-right: -12px;  /* sama oikealle */
  width: calc(100% + 24px);
}

/*testi*/
/* 1) Piilota viimesarake, jos se on oikeasti tyhjä (ei tekstiä eikä sisältöä) */
.table-wrapper table thead tr th:last-child:empty,
.table-wrapper table tbody tr td:last-child:empty,
.table-wrapper table tfoot tr td:last-child:empty {
  display: none !important;
}

/* 2) Jos selaimesi “täyttää” tyhjän solun &nbsp;-merkillä (joillain generaattoreilla käy):
      purista täysin kiinni, vaikka ei olisikaan täysin :empty 
.table-wrapper table thead tr th:last-child,
.table-wrapper table tbody tr td:last-child,
.table-wrapper table tfoot tr td:last-child {
  /* Käytä vain, jos 1) ei riitä 
  max-width: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
*/
/* Vain engine-taulukkoon (lisää taulukolle id tai luokka, esim. #engine-table) */
#engine-table thead tr th:last-child:empty,
#engine-table tbody tr td:last-child:empty {
  display: none !important;
}

/* Äärimmäinen hätä—purista viimeinen sarake nollaan leveys ilman :empty-tarkistusta */
#engine-table thead tr > *:last-child,
#engine-table tbody tr > *:last-child {
  max-width: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* =========================================
   LOPULLINEN KORJAUS: DESKTOP/TABLETTI-NÄKYMÄN PALAUTUS
   > 768px näytöillä, estää mobiilisääntöjen vuodon
   ========================================= */

/* Palauta input-alueen taulukon oletusarvot työpöydällä */
.decoder-inputs table {
    /* TÄRKEÄ: Palautus, antaa taulukon jakaa sarakkeet sisällön mukaan */
    table-layout: auto !important; 
    /* Taulukon leveys: vain tarvittava sisältö, ei pakota 100% leveyttä */
    width: auto !important;
}

/* Palauta input-taulukon otsikon (TH) oletusarvot työpöydällä */
.decoder-inputs table th {
    /* Poista kaikki pakotetut leveyden rajoitukset, jotka on asetettu mobiilissa */
    max-width: none !important;
    width: auto !important;
    /* Estää otsikon rivittymisen työpöydällä, jotta se pysyy yhdellä rivillä */
    white-space: nowrap !important; 
    /* Varmista, että mahdolliset aggressiiviset katkaisut poistetaan */
    word-break: normal !important; 
    overflow-wrap: normal !important;
}

/* Lisäturva Input-alueelle: Palauttaa sen kiinteän asettelun, jos se on muutettu */
.decoder-inputs {
    /* Oletettu työpöytäasettelu */
    min-width: 430px !important;
    max-width: 480px !important;
}

/* =========================================
   KORJAUS 1: DECODE-NAPIN MAKSIMILEVEYS
   ========================================= */
.decode-btn {
    /* Jos width: 100% on asetettu, rajoita sitä hieman työpöydällä */
    width: 100%; /* Salli 100% mobiilissa, mutta rajoitetaan sitä input-alueella */
    max-width: 100%;
}

/* Keskitytään trim tag -osion nappiin, joka on Input-alueen sisällä */
.decoder-inputs .decode-btn {
    /* Varmista, että nappi on samaa kokoa kuin muut Input-kentät */
    width: 100% !important; 
    /* Jos tämä ei riitä, kokeile antaa sille tietty maksimileveys työpöydällä */
    /* HUOM: Tämä saattaa vaatia tarkan elementtirakenteen tuntemista */
}

/* Jos ongelma on yleinen isossa napissa, aseta maksimileveys: */
/*
@media (min-width: 769px) {
    .decode-btn {
        max-width: 200px; 
    }
}
*/

.decoder-trim-tag-late {
    display: flex;
    align-items: flex-start;
}

/* =========================================
   KORJAUS 2: YLEINEN DECODE-NAPIN MAKSIMILEVEYS TYÖPÖYDÄLLÄ
   ========================================= */

/* Sääntö koskee vain työpöytänäkymää (> 768px), jotta mobiili pysyy hyvänä */
@media (min-width: 769px) {
    /* Kohdista yleisesti Input-alueen nappeihin */
    .decoder-inputs .decode-btn,
    .decoder-inputs .show-btn {
        /* Rajoita napin maksimileveyttä, jotta se ei karkaa liian suureksi */
        max-width: 200px; /* Kokeile 200px:ä, tai säädä tarpeen mukaan */
        width: 100%; /* Salli 100% aina, mutta maksimi rajoittaa sen */
    }
}

/* =========================================
   LOPULLINEN KORJAUS: DECODE-NAPIN KUTISTUS TYÖPÖYDÄLLÄ
   ========================================= */

@media (min-width: 769px) {
    /* 1. Määritä pieni maksimileveys VAIN Decode-napeille */
    .decoder-inputs .decode-btn {
        /* Kokeillaan aluksi 150px. Jos se on liian suuri/pieni, säädä arvoa. */
        max-width: 90px !important; 
        /* Varmista, että sen leveys perustuu 100% sen säiliöön */
        width: 100% !important; 
    }
    
    /* 2. Varmista, että Show-napit palaavat luonnolliseen kokoonsa (sisällön mukaan) */
    .decoder-inputs .show-btn {
        width: auto !important; 
        max-width: none !important; 
    }
}
/* =========================================
   LOPULLINEN KORJAUS: TRIM TAG 1981 KAIKKI SAMALLE RIVILLE (TYÖPÖYTÄ)
   - Palauttaa row-suunnan, korjaa leveyden ja pienentää tilaa.
   ========================================= */

@media (min-width: 769px) {
    /* 1. SAMALLE RIVILLE: Palauta Flexbox row-suuntaan */
    .decoder-trim-tag-late {
        display: flex !important; 
        flex-direction: row !important; /* TÄRKEÄ: Aseta elementit vierekkäin */
        align-items: center !important; /* Kohdista keskelle pystysuunnassa */
        gap: 10px !important; /* Pienennä tilaa elementtien välillä (kokeile 10px tai 8px) */
        width: 100% !important;
        max-width: none !important;
    }

    /* 2. INPUT-KENTÄT: Rajoita leveyttä, mutta salli Flexbox-ominaisuudet */
    .decoder-trim-tag-late .c3-input {
        /* Aseta maksimileveys, joka pitää kentät kapeina (esim. 300px) */
        max-width: 300px !important; 
        width: 100% !important; 
        
        /* TÄRKEÄ: Aseta input-kenttien Flex-kasvatus- ja kutistusarvot */
        flex-grow: 1;    /* Salli kentän kasvaa, mutta max-width rajoittaa */
        flex-shrink: 1;  /* Salli kentän kutistua tarvittaessa */
        flex-basis: auto; /* Elementin oletuskoko */
        
        margin: 0 !important; /* Nollaa pystysuuntainen marginaali */
    }

    /* 3. DECODE-NAPIN LEVEYS (Vahvistus) */
    .decoder-trim-tag-late .decode-btn {
        max-width: 150px !important; 
        width: auto !important;
        flex-shrink: 0; /* Estä napin kutistuminen */
        margin-top: 0 !important;
        margin-left: 0 !important; 
    }
}

/* HOT-FIX: Poista ylimääräinen tila VIN-input/output -alueilta kaikkialla */
.decoder-section,
.decoder-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.decoder-inputs,
.decoder-output {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Taulukko täyteen leveyteen ilman ylimääräisiä marginaaleja */
.decoder-output .decoder-table,
.decoder-output .table-wrapper,
.decoder-output .table-wrapper table {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-spacing: 0 !important;
  border-collapse: collapse !important;
  box-sizing: border-box !important;
}


/* =========================================
   LOPULLINEN MOBIILIKORJAUS: ULKOSÄILIÖT
   ========================================= */

@media (max-width: 768px) {
    /* **TÄRKEÄ:** Kohdista ulompaan flexbox-säiliöön, joka pitää molemmat sarakkeet. */
    .decoder-section {
        /* Nollaa flexbox-asetukset mobiilia varten */
        flex-direction: column !important;
        align-items: center !important; 
        
        /* Estä kiinteän leveyden aiheuttama ylivuoto */
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        
        /* Varmista, että padding on kohtuullinen */
        padding: 10px 10px !important;
    }
}

/* =========================================
   LOPULLINEN MOBIILIKORJAUS: INPUT-ALUE
   ========================================= */

@media (max-width: 768px) {
    /* **TÄRKEÄ:** Kohdista input-paneeliin, jolla on kiinteä min-width */
    .decoder-inputs {
        /* POISTA KIINTEÄ MIN-WIDTH, joka pakottaa leveän näkymän */
        min-width: 0 !important; 
        
        /* Pakota leveys 100 % */
        width: 100% !important;
        max-width: 100% !important;
        
        /* Nollaa marginaalit/padding, jotka voisivat aiheuttaa ylivuodon */
        margin: 0 !important;
        padding: 0 10px !important;
    }
}

/* =========================================
   LOPULLINEN MOBIILIKORJAUS: OUTPUT-TAULUKKO
   ========================================= */

@media (max-width: 768px) {
    /* Output-alue: Salli skrollaus vain tässä lohkossa, jos sisältö on liian leveää */
    #decoder-output {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important; /* Antaa skrollauspalkin VAIN taulukon alueelle */
        padding: 10px !important;
    }

    /* Taulukko: Varmista, että se ei ylitä ulosmittaansa */
    #decoder-output table {
        table-layout: auto !important; /* Anna taulukon itse päättää leveys, mutta vain sisällä */
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Taulukon solut: Pakota pitkät tekstit katkeamaan */
    #decoder-output table td, 
    #decoder-output table th {
        word-break: break-all !important;
        overflow-wrap: break-word !important; 
        /* Estä liikaa paddingia pienissä soluissa */
        padding: 8px 4px !important; 
    }
}

/* =========================================
   KORJAUS: INPUT TAULUKON (TH) LEVEYS MOBIILISSA
   - Rajoittaa otsikon tilaa ja pakottaa rivityksen
   ========================================= */

@media (max-width: 768px) {
    /* 1. Kohdista input-alueen taulukkoon, jos siellä on taulukko */
    .decoder-inputs table {
        width: 100% !important;
        /* Varmista, että sarakkeet jakavat tilan */
        table-layout: fixed !important; 
        max-width: 100% !important;
    }

    /* 2. Kohdista itse taulukon otsikkoon (TH) */
    .decoder-inputs table th {
        /* Aseta maksimileveys hyvin kapeaksi (esim. 120px) */
        max-width: 120px !important; 
        width: 30% !important;        /* Anna suhteellinen osuus taulukosta */
        
        /* TÄRKEÄ: Pakota pitkät otsikot rivittymään, jotta ne mahtuvat 120px sisään */
        white-space: normal !important; 
        word-break: break-word !important;
        
        /* Vähennä paddingia entisestään */
        padding: 8px 4px !important; 
    }

    /* 3. Kohdista taulukon data-soluihin (TD) */
    .decoder-inputs table td {
        /* Varmista, että Input-kentät mahtuvat loppuosaan */
        width: 70% !important;
    }
}

.decoder-table {
    /* Lisää tyhjää tilaa jokaisen taulukon alapuolelle */
    margin-bottom: 20px; /* Voit säätää arvoa tarpeen mukaan */
    /* Joskus taulukot eivät näytä reunoja, tämä auttaa usein */
    width: 100%; 
}

/* === Alkuperäinen Decoder-nappi === */
.decode-btn {
  background-color: #b9cedd;
  border: 2px solid #000000 !important;
  border-radius: 4px;
  padding: 6px 12px;
  color: #000000;
  font: normal bold 13px/1 "Calibri", sans-serif;
  text-align: center;
  display: inline-block;
  box-shadow: none;
  appearance: none;
  cursor: pointer;
}

/* === Alkuperäinen Show-nappi === */
.show-btn {
  background-color: #337ab7;
  border: 2px solid #000000 !important;
  border-radius: 4px;
  padding: 6px 12px;
  color: #ffffff;
  font: normal bold 13px/1 "Calibri", sans-serif;
  text-align: center;
  display: inline-block;
  box-shadow: none;
  appearance: none;
  cursor: pointer;
}

.decoder-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

.decoder-table td {
    width: auto;      /* estää kolmannen sarakkeen muodostuslogiikan */
    padding: 4px 8px;
}
.decoder-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    table-layout: fixed;        /* pakottaa sarakkeet täyttämään koko leveyden */
}

.decoder-table td {
    width: 50%;                /* kaksi saraketta, jakautuu tasan */
    padding: 6px 10px;
    word-break: break-word;    /* ei venytä layoutia pitkillä teksteillä */
}

.decoder-table td:first-child {
  /*  width: 80px; */
    white-space: nowrap;
}

.decoder-table td:last-child {
    width: auto;
}
.decoder-table {
    width: 100%;
}

.decoder-table td:last-child {
    width: 100%;
}


@media (max-width: 768px) {
  /* VIN-taulukko: estä rivitys, mutta salli skrollaus */
  .decoder-output .decoder-table:first-of-type {
    overflow-x: auto;
    display: block;
  }

  .decoder-output .decoder-table:first-of-type td {
    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  /* Toinen taulukko: salli rivitys */
  #decoder-table-2 {
    display: table;
    width: 100%;
  }

  #decoder-table-2 td {
    white-space: normal !important;
    word-break: break-word !important;
  }
}


@media (min-width: 769px) {
  button.decode-btn[onclick="getInputValue7();"] {
    min-width: 88px !important;
    height: 30px !important;
    padding: 4px 10px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    box-sizing: border-box;
  }
}

@media (min-width: 769px) {
  .decoder-row input.c3-input, .decoder-row .decode-btn, .decoder-row .show-btn,select.year-select  {
    margin-top: 16px !important;
  }
}

@media (min-width: 769px) {
    /* ... muut tietokonesäännöt ... */

    /* Täsmäkorjaus myInput8-kentän korkeuden säätämiseksi */
    #myInput8 {
        /* Nollaa korkeutta kasvattava sisäinen tila */
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        
        /* Aseta kiinteä korkeus, jos padding ei riitä (varmuuden vuoksi) */
        height: 35px !important; 
        
        /* Estää Input-kentän ympärillä olevaa tilaa venymästä */
        line-height: normal !important; 
        
        /* Säilytä aiemmat leveyssäännöt */
        max-width: 250px !important; 
        width: auto !important;
    }
.trim-tag-row #myInput8 {
    transform: translateY(17px) !important; /* kokeile 2–6px */
}
}

@media (max-width: 600px) {
	.trim-tag-row #myInput8 {
    transform: translateY(17px) !important; /* kokeile 2–6px */
}
	.trim-tag-row #vuosi {
    transform: translateY(17px) !important; /* kokeile 2–6px */
}


  .decoder-row input.c3-input,
  .decoder-row .decode-btn,
  .decoder-row .show-btn,
  .decoder-row select.year-select {
    margin-top: 16px !important;
  }
}

@media (max-width: 768px) {
    /* ... muut mobiilisäännöt ... */

    /* UUSI KORJAUS: Lisää tilaa section-elementin ympärille */
    #c3-vin-basics {
        /* Lisää ulkoinen tila (marginaali) section-lohkon ylä- ja alapuolelle */
        margin: 20px 0 !important; 
        
        /* Lisää sisäinen tila (padding) sivuille, jotta sisältö ei kosketa reunoja */
        padding: 0 15px !important; 
    }

    /* Varmista, että sectionin sisällä oleva teksti on myös ilmava */
    #c3-vin-basics p,
    #c3-vin-basics ul,
    #c3-vin-basics h2,
    #c3-vin-basics table {
        /* Lisää hieman tilaa jokaisen elementin väliin */
        margin-bottom: 15px !important; 
    }
}

@media (max-width: 768px) {
    /* ... (edelliset mobiilisäännöt) ... */

    /* UUSI KORJAUS: Lisää tilaa section-elementin ympärille */
    #c3-vin-basics, 
    #manual-c3-vin-decoding {
        /* Lisää ulkoinen tila (marginaali) section-lohkon ylä- ja alapuolelle */
        margin: 20px 0 !important; 
        
        /* Lisää sisäinen tila (padding) sivuille, jotta sisältö ei kosketa reunoja */
        padding: 0 15px !important; 
    }

    /* Lisää pystysuuntainen marginaali kaikille sisällöille molemmissa sectioissa */
    #c3-vin-basics p, #manual-c3-vin-decoding p,
    #c3-vin-basics ul, #manual-c3-vin-decoding ul,
    #c3-vin-basics h2, #manual-c3-vin-decoding h2,
    #c3-vin-basics table, #manual-c3-vin-decoding table {
        /* Lisää hieman tilaa jokaisen elementin väliin */
        margin-bottom: 15px !important; 
    }
}

@media (max-width: 768px) {
    /* ... (muut mobiilisäännöt) ... */

    /* UUSI KORJAUS: Lisää padding ja margin puuttuviin osiin */
    #c3-vin-basics, 
    #manual-c3-vin-decoding, 
    #c3-vin-location, /* LISÄTTY VIN-LOCATION */
    .article-section { /* LISÄTTY YLEINEN LUOKKA TAI TAGI LOPPUOSAN TEKSTEILLE */
        /* Lisää ulkoinen tila (marginaali) lohkon ylä- ja alapuolelle */
        margin: 20px 0 !important; 
        
        /* Lisää sisäinen tila (padding) sivuille, jotta sisältö ei kosketa reunoja */
        padding: 0 15px !important; 
    }

    /* Lisää pystysuuntainen marginaali kaikkiin sisältöihin (teksti, taulukot, jne.) */
    #c3-vin-basics p, #manual-c3-vin-decoding p, #c3-vin-location p,
    #c3-vin-basics ul, #manual-c3-vin-decoding ul, #c3-vin-location ul,
    #c3-vin-basics h2, #manual-c3-vin-decoding h2, #c3-vin-location h2,
    #c3-vin-basics table, #manual-c3-vin-decoding table, #c3-vin-location table,
    .article-section p, .article-section ul, .article-section h2 {
        /* Lisää hieman tilaa jokaisen elementin väliin */
        margin-bottom: 15px !important; 
    }
}

@media (max-width: 768px) {
    /* ... (muut mobiilisäännöt) ... */

    /* UUSI KORJAUS: Lisää padding ja margin kaikkiin section-elementteihin */
    
	#c3-vin-basics, 
    #manual-c3-vin-decoding, 
    #c3-vin-location,
    #c3-trim-tag-decoder, /* LISÄTTY TRIM TAG DECODER */
    /* Jos muut loppuosan tekstit eivät ole section-tageissa, käytä .main-content:iä tai bodya, 
       mutta tämä sääntö kohdistuu kaikkiin sectioihin ja main-sisältöön: */
    main > section, /* Kohdista kaikkiin mainin sisällä oleviin section-tageihin */
    main > p, /* Kohdista kaikkiin mainin sisällä oleviin suoriin kappaleisiin */
    main > h2 {  /* Kohdista kaikkiin mainin sisällä oleviin suoriin otsikoihin */
        
        /* Lisää ulkoinen tila (marginaali) lohkon ylä- ja alapuolelle */
        margin: 20px 0 !important; 
        
        /* Lisää sisäinen tila (padding) sivuille, jotta sisältö ei kosketa reunoja */
        padding: 0 15px !important; 
    }

    /* Lisää pystysuuntainen marginaali kaikkiin sisällöihin (teksti, taulukot, jne.) */
    #c3-vin-basics p, #manual-c3-vin-decoding p, #c3-vin-location p, #c3-trim-tag-decoder p,
    #c3-vin-basics ul, #manual-c3-vin-decoding ul, #c3-vin-location ul, #c3-trim-tag-decoder ul,
    #c3-vin-basics h2, #manual-c3-vin-decoding h2, #c3-vin-location h2, #c3-trim-tag-decoder h2,
    #c3-vin-basics table, #manual-c3-vin-decoding table, #c3-vin-location table, #c3-trim-tag-decoder table,
    /* Kohdista myös mainin suoraan sisältöön: */
    main > p, main > ul, main > h2 {
        /* Lisää hieman tilaa jokaisen elementin väliin */
        margin-bottom: 15px !important; 
    }
}

@media (max-width: 768px) {
    /* ... muut mobiilisäännöt ... */

    /* UUSI KORJAUS: Lisää padding ja margin kaikkiin section-elementteihin */
	#c3-artilce,
    #c3-vin-basics, 
    #manual-c3-vin-decoding, 
    #c3-vin-location,
    #c3-trim-tag-decoder,
    #c3-engine-code-decoder,    /* LISÄTTY ENGINE CODE DECODER */
    #c3-quadrajet-decoder,      /* LISÄTTY QUADRAJET DECODER */
    main > section, /* Kohdistaa kaikkiin muihin section-elementteihin mainin sisällä */
    main > p, /* Kohdistaa suoraan mainin sisällä oleviin kappaleisiin */
    main > h2 {  /* Kohdistaa suoraan mainin sisällä oleviin otsikoihin */
        
        /* Lisää ulkoinen tila (marginaali) lohkon ylä- ja alapuolelle */
        margin: 20px 0 !important; 
        
        /* Lisää sisäinen tila (padding) sivuille, jotta sisältö ei kosketa reunoja */
        padding: 0 15px !important; 
    }

@media (max-width: 768px) {
    /* ... muut mobiilisäännöt ... */

    /* LOPULLINEN KORJAUS: Lisää padding ja margin kaikkiin section-elementteihin, mukaan lukien #comment */
    #c3-article,
	#c3-vin-basics, 
    #manual-c3-vin-decoding, 
    #c3-vin-location,
    #c3-trim-tag-decoder,
    #c3-engine-code-decoder, 
    #c3-quadrajet-decoder,
    #comment, /* LISÄTTY COMMENT SECTION */
    main > section, 
    main > p, 
    main > h2 {  
        
        /* Lisää ulkoinen tila (marginaali) lohkon ylä- ja alapuolelle */
        margin: 20px 0 !important; 
        
        /* Lisää sisäinen tila (padding) sivuille, jotta sisältö ei kosketa reunoja */
        padding: 0 15px !important; 
    }

    /* Lisää pystysuuntainen marginaali kaikkiin sisällöihin (teksti, taulukot, jne.) */
    #c3-article p, #c3-article ul, #c3-article h2, #c3-article table,
	#c3-vin-basics p, #manual-c3-vin-decoding p, #c3-vin-location p, #c3-trim-tag-decoder p, #c3-engine-code-decoder p, #c3-quadrajet-decoder p, #comment p,
    #c3-vin-basics ul, #manual-c3-vin-decoding ul, #c3-vin-location ul, #c3-trim-tag-decoder ul, #c3-engine-code-decoder ul, #c3-quadrajet-decoder ul, #comment ul,
    #c3-vin-basics h2, #manual-c3-vin-decoding h2, #c3-vin-location h2, #c3-trim-tag-decoder h2, #c3-engine-code-decoder h2, #c3-quadrajet-decoder h2, #comment h2,
    #c3-vin-basics table, #manual-c3-vin-decoding table, #c3-vin-location table, #c3-trim-tag-decoder table, #c3-engine-code-decoder table, #c3-quadrajet-decoder table, #comment table,
    main > p, main > ul, main > h2 { 
        /* Lisää hieman tilaa jokaisen elementin väliin */
        margin-bottom: 15px !important; 
    }
}



@media (max-width: 768px) {
    /* ... (muut mobiilisäännöt) ... */

    /* TÄSMÄKORJAUS: Pakota 3. ja 4. sarake näkyviin mobiilissa */
    .vin-breakdown-table th:nth-child(3),
    .vin-breakdown-table td:nth-child(3),
    .vin-breakdown-table th:nth-child(4),
    .vin-breakdown-table td:nth-child(4) {
        display: table-cell !important; /* Pakota näkymään */
        width: auto !important;
        min-width: 80px !important; 
    }
    
    /* Varmista, että koko taulukko mahtuu ja selaus on mahdollista */
    .table-wrapper {
        overflow-x: auto;
    }

    /* ... (muut mobiilisäännöt) ... */
}

/* KORJAUS: Salli vin-breakdown-table näyttää kaikki sarakkeet */
.vin-breakdown-table th:last-child,
.vin-breakdown-table td:last-child {
    display: table-cell !important;
    width: auto !important;
    max-width: none !important;
    padding: 8px 12px !important;
    border: 1px solid #ddd !important;
    overflow: visible !important;
}
@media (max-width: 600px) {
  .vin-breakdown-table td {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }
}


@media (max-width: 600px) {
  .vin-breakdown-table td:nth-child(2) {
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
}

/* =========================================
   YHTEYSLOMAKKEEN TYYLIT (CONTACT PAGE)
   ========================================= */

/* Koko sivun säilö ja keskitys */
.contact-page-wrapper {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Yleinen osio, antaa taustavärin */
.contact-section {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.section-title {
    color: #34495e; /* Vastaa headerin väriä */
    font-size: 2.2rem;
    margin-bottom: 15px;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 10px;
}

.intro-text {
    margin-bottom: 30px;
    color: #555;
    font-size: 1.1rem;
}

.form-title {
    color: #2c3e50;
    font-size: 1.5rem;
    margin-top: 25px;
    margin-bottom: 20px;
}

/* Sähköposti-kuvan ympäröivä info */
.email-info {
    text-align: center;
    margin-bottom: 30px;
}

.email-info p {
    margin-bottom: 10px;
}

.or-separator {
    font-weight: bold;
    font-style: italic;
    color: #999;
    margin: 15px 0 !important;
}

/* Itse lomake */
.feedback-form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Tilaa kenttien välille */
}

.form-group {
    width: 100%;
}

/* Yleinen tyyli kaikille input- ja textarea-kentille */
.form-input, .form-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-input:focus, .form-textarea:focus {
    border-color: #3498db; /* Aktiivinen korostusväri */
    outline: none;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

.form-textarea {
    resize: vertical; /* Salli pystysuuntainen koon muutos */
    min-height: 150px;
}

/* Captcha-kentän asettelu */
.captcha-group {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: bold;
}

.captcha-input {
    width: 80px; /* Kiinteä leveys vastauskentälle */
    text-align: center;
}

/* Lähetysnappi (historybt-luokan tyylien päivitys) */
.submit-btn.historybt {
    /* Perii olemassa olevan historybt-tyylin, mutta lisää modernia ilmettä */
    background-color: #3498db; 
    color: white !important;
    border: none !important;
    padding: 12px 25px;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.submit-btn.historybt:hover {
    background-color: #2980b9;
}

/* ——— VIN DECODER HELP MESSAGE ——— */
.decoder-help-message {
  margin: 24px auto;
  padding: 16px 20px;
  max-width: 800px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
  background-color: #f8f9fa;
  border-left: 4px solid #0066cc;
  border-radius: 0 6px 6px 0;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.decoder-help-message strong {
  color: #222;
  font-weight: 600;
}

.decoder-help-message a {
  color: #0066cc;
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.2s ease;
}

.decoder-help-message a:hover {
  color: #004a99;
  text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .decoder-help-message {
    margin: 20px 12px;
    padding: 14px 16px;
    font-size: 0.9rem;
    border-left-width: 3px;
  }
}

/* =========================================
   MOBIILIKORJAUKSET (Varmistaa mukautumisen)
   ========================================= */
@media (max-width: 768px) {
    .contact-page-wrapper {
        margin: 20px auto;
        padding: 0;
    }

    .contact-section {
        padding: 20px 15px; /* Pienempi padding pienissä näytöissä */
        border-radius: 0;
        box-shadow: none;
    }
    
    .section-title {
        font-size: 1.8rem;
    }

    .captcha-group {
        flex-direction: column; /* Pienissä näytöissä allekkain */
        align-items: flex-start;
    }
    
    .captcha-label {
        margin-bottom: -10px;
    }
}

/* Etsi tämä CSS-lohko tiedostosta cssvvin1.css (muiden yleisten tyylien joukosta) */
.form-textarea {
    resize: vertical; /* Salli pystysuuntainen koon muutos */
    
    /* VAHVISTETTU KORJAUS: min-height suuremmaksi */
    min-height: 250px !important; 
    
    /* Varmistetaan, ettei joku kiinteä pieni height-arvo ohita tätä */
    height: auto !important; 
    
    /* Muut tarvittavat tyylit, jotka olivat jo aiemmin listalla: */
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

/* MOBIILI: TEKSTI EI KATKEA */
.articles-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
  padding: 0 16px;
  text-align: center;
}

.articles-hero-img {
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
  margin-top: 16px;
}

.articles-intro {
  width: 100%;
  max-width: 100%;
}

.articles-intro h2 {
  font-size: 1.8rem;
  margin-bottom: 16px;
  line-height: 1.3;
}

.articles-intro p {
  font-size: 1rem;
  line-height: 1.7;
  color: #444;
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* MOBIILI: KUVA JA TEKSTI PINOTTU PÄÄLLEKKÄIN */
@media (max-width: 768px) {
  .articles-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .articles-hero-img {
    order: -1; /* KUVA ENNEN TEKSTIÄ */
    width: 85%;
    max-width: 320px;
    margin: 0 auto 20px auto;
  }
  
  .articles-intro h2 {
    font-size: 1.6rem;
  }
  
  .articles-intro p {
    font-size: 0.98rem;
  }
}

/* DESKTOP: SIVUTTAIN */
@media (min-width: 769px) {
  .articles-header {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 40px;
  }
  
  .articles-hero-img {
    width: 360px;
    flex-shrink: 0;
  }
  
  .articles-intro {
    flex: 1;
  }
}

/* ========================================= */
/* SOCIAL MEDIA + NEWSLETTER KORTIT */
/* ========================================= */

.main3 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* YHTEINEN KORTTITYYLI */
.social-card,
.newsletter-card {
  background: #ffffff;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid #e6eef7;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.social-card:hover,
.newsletter-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}

/* OTSIKOT */
.social-card h2,
.newsletter-card h3 {
  margin: 0 0 20px 0;
  font-weight: 600;
  color: #222;
}

.social-card h2 {
  font-size: 1.5rem;
}

.newsletter-card h3 {
  font-size: 1.25rem;
  color: #0066cc;
}

/* SOSIAALINEN GRID */
.social-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  justify-items: center;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: #f8f9fc;
  border-radius: 16px;
  transition: all 0.3s ease;
  overflow: hidden;
}

.social-link:hover {
  background: #0066cc;
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
}

.social-link img {
  width: 48px;
  height: 48px;
  filter: brightness(0) saturate(100%);
  transition: filter 0.3s ease;
}

.social-link:hover img {
  filter: brightness(0) saturate(100%) invert(1);
}

/* NEWSLETTER */
.newsletter-embed {
  display: flex;
  justify-content: center;
}

.newsletter-embed iframe {
  max-width: 100%;
  border-radius: 8px;
}

/* MOBIILI */
@media (max-width: 768px) {
  .main3 {
    padding: 24px 16px;
    gap: 20px;
  }

  .social-card,
  .newsletter-card {
    padding: 24px;
  }

  .social-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .social-link {
    width: 70px;
    height: 70px;
  }

  .social-link img {
    width: 40px;
    height: 40px;
  }

  .social-card h2 {
    font-size: 1.35rem;
  }

  .newsletter-card h3 {
    font-size: 1.15rem;
  }
}

/* ========================================= */
/* SOCIAL + NEWSLETTER: KOMPAKTI & KESKITETTY */
/* ========================================= */

.main3 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 20px;
  max-width: 600px;        /* EI VENY ENÄÄ */
  margin: 0 auto;          /* KESKITETTY */
  width: 100%;
}

/* KORTIT: KOMPAKTI LEVEYS */
.social-card,
.newsletter-card {
  background: #ffffff;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid #e6eef7;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

/* SOSIAALINEN GRID: 4 SARAKETTA, KOMPAKTI */
.social-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  justify-items: center;
  max-width: 360px;
  margin: 0 auto;
}

.social-link {
  width: 72px;
  height: 72px;
  background: #f8f9fc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.social-link:hover {
  background: #0066cc;
  transform: scale(1.12);
  box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
}

.social-link img {
  width: 40px;
  height: 40px;
  filter: brightness(0) saturate(100%);
  transition: filter 0.3s ease;
}

.social-link:hover img {
  filter: brightness(0) saturate(100%) invert(1);
}

/* NEWSLETTER: KOMPAKTI */
.newsletter-embed iframe {
  max-width: 100%;
  width: 100%;
  border-radius: 8px;
}

/* MOBIILI: JO TOIMII – PIENENNÄ VIELÄ */
@media (max-width: 768px) {
  .main3 {
    padding: 32px 16px;
    max-width: 100%;
  }

  .social-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 240px;
  }

  .social-link {
    width: 64px;
    height: 64px;
  }

  .social-link img {
    width: 36px;
    height: 36px;
  }
}
/* ========================================= */
/* NEWSLETTER + FRIENDS – KOMPAKTIT KORTIT */
/* ========================================= */

/* ULOMPI KEHYS – PAKOTTAA LEVEYDEN */
.social-newsletter-wrapper {
  width: 100%;
  max-width: 560px;
  margin: 60px auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* NEWSLETTER CARD */
.newsletter-card {
  background: #ffffff;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid #e6eef7;
  text-align: center;
  transition: all 0.3s ease;
  margin-bottom: 24px;
}

.newsletter-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}

.newsletter-card h3 {
  margin: 0 0 16px 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #0066cc;
}

.newsletter-embed iframe {
  width: 100% !important;
  max-width: 100%;
  border-radius: 8px;
}

/* FRIENDS CARD */
.friends-card {
  background: #ffffff;
  padding: 32px 28px;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid #e6eef7;
  text-align: center;
  transition: all 0.3s ease;
}

.friends-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}

.friends-card h2 {
  margin: 0 0 24px 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #222;
}

/* MOBIILI: ESTÄ KIRJAINRIVITYS + PAREMPI SARKALEVEYS */
@media (max-width: 768px) {
    .decoder-table {
        table-layout: auto; /* Automaattinen sarakeleveys */
        font-size: 0.85rem; /* Pienempi fontti mahtuu paremmin */
    }
    
    .decoder-table td {
        word-break: normal; /* Poista break-all – rivitys sanoittain */
        overflow-wrap: break-word; /* Katkaise vain pitkät sanat */
        padding: 10px 6px; /* Hieman enemmän tilaa */
        white-space: normal; /* Sallii rivinvaihdot */
    }
    
    .decoder-table .first-col {
        min-width: 50px; /* Ensimmäinen sarake ei kutistu liikaa */
    }
}

/* --- MOBIILI: ESTÄ KIRJAIMEN KATKEAMINEN + SALLI SANA-RIVITYS --- */
@media (max-width: 768px) {
    .decoder-table td {
        word-break: normal !important;        /* EI ENÄÄ kirjain kerrallaan */
        overflow-wrap: anywhere;              /* Hyvä kompromissi: pitkäkin sana katkeaa tarvittaessa */
        hyphens: auto;                        /* Automaattiset tavutusviivat (toimii suomessa hyvin) */
        white-space: normal !important;       /* Sallii rivinvaihdot */
        padding: 10px 8px !important;         /* Hieman enemmän tilaa */
    }

    /* Erityisesti "Month", "Day", "Year" -sarakkeet eivät kutistu liikaa */
    .decoder-table td:first-child,
    .decoder-table td:nth-child(2) {
        min-width: 70px !important;
        font-weight: 600;
    }
}