/* ==========================================================================
   MYY LIIKKEILLE -OHJELMAN TYYLIT
   ==========================================================================
   Ladataan styles.css:n jälkeen vain liikkeille.html-sivulla. Tokenit ja
   yhteiset komponentit (napit, kortit, lomakkeet) tulevat styles.css:stä;
   täällä on vain se mikä on tämän ohjelman omaa. */

/* AutoJoppari-osio on vihreä, markkinapaikka oranssi. Samat roolit (luettava
   sävy, hover, pinta, täyte) – vain arvot vaihtuvat, joten jokainen nappi,
   linkki ja merkintä seuraa osiota ilman omia sääntöjä. `data-osio` tulee
   sovellus.js:stä. Kontrastit: #1b7f4c vaalealla 4,81:1, #4ade80 tummalla
   10,9:1, CTA:n valkoinen teksti 4,02:1 (oranssilla 3,07:1). */
body[data-osio="liikkeille"] {
  --korostus:        light-dark(#1b7f4c, #4ade80);
  --korostus-toinen: light-dark(#146238, #86efac);
  --korostus-pinta:  light-dark(#ecf8f0, rgba(74, 222, 128, .16));
  --cta: #1e9150;
  --cta-hover: light-dark(#177a42, #2bb069);
}


/* ==========================================================================
   PYYNTÖKORTIT JA PYYNNÖN SIVU
   ==========================================================================
   Myyntipyyntö ei ole ilmoitus: kortti näyttää tarjouskilpailun tilanteen
   pyyntihinnan sijaan, ja pyynnön sivulla tarjouslaatikko korvaa
   myyjälaatikon. Kortit lainaavat autokortin luokat, jotta ruudukko näyttää
   samalta kuin hakutuloksissa. */

/* --- Merkinnät ---------------------------------------------------------- */
.merkkilappu--pyynto-avoin { background: var(--onnistui-pinta); color: var(--onnistui); }
.merkkilappu--pyynto-paattynyt { background: var(--varoitus-pinta); color: var(--varoitus); }
.merkkilappu--pyynto-hyvaksytty { background: var(--onnistui-pinta); color: var(--onnistui); }
.merkkilappu--pyynto-ei-tarjouksia,
.merkkilappu--pyynto-peruttu { background: var(--pinta-himmea); color: var(--teksti-himmea); }
.merkkilappu--voimassa { background: var(--onnistui-pinta); color: var(--onnistui); }
.merkkilappu--jatkoaika { background: var(--varoitus-pinta); color: var(--varoitus); }

/* --- Pyyntökortti ------------------------------------------------------- */
.pyyntokortti__tarjous { display: grid; gap: 1px; margin-top: var(--vali-2); }
.pyyntokortti__otsikko {
  font-size: var(--koko-xs);
  color: var(--teksti-himmea);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pyyntokortti__maara { font-size: var(--koko-s); color: var(--teksti-himmea); }
.pyyntokortti .autokortti__alarivi .aikalaskuri { font-size: inherit; }
.pyyntotila {
  margin-top: var(--vali-2);
  font-size: var(--koko-s);
  font-weight: var(--paino-puolilihava);
  color: var(--teksti-pehmea);
}
.pyyntotila--johdat, .pyyntotila--voitto { color: var(--onnistui); }
.pyyntotila--ohitettu { color: var(--virhe); }
.pyyntotila--uusi { color: var(--korostus); }

/* --- Tarjouslaatikko ---------------------------------------------------- */
.tarjouslaatikko {
  padding: var(--vali-5);
  background: var(--pinta);
  border: 1px solid var(--korostus);
  border-radius: var(--r-l);
  box-shadow: var(--varjo-1);
}
.tarjouslaatikko__ylarivi {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--vali-3); flex-wrap: wrap;
  margin-bottom: var(--vali-3);
}
.tarjouslaatikko__otsikko { margin: 0; font-size: var(--koko-s); color: var(--teksti-himmea); }
.tarjouslaatikko__summa {
  margin: 0;
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-hinta);
  font-weight: var(--paino-lihava);
  line-height: 1.1;
  color: var(--hinta);
}
.tarjouslaatikko__meta { margin: var(--vali-1) 0 0; font-size: var(--koko-s); color: var(--teksti-himmea); }
.tarjouslaatikko__oma {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--vali-2);
  margin: var(--vali-4) 0 0;
  padding: var(--vali-2) var(--vali-3);
  border-radius: var(--r-m);
  font-size: var(--koko-s);
  font-weight: var(--paino-puolilihava);
  background: var(--pinta-himmea);
  color: var(--teksti-pehmea);
}
.tarjouslaatikko__oma--johdat, .tarjouslaatikko__oma--voitto { background: var(--onnistui-pinta); color: var(--onnistui); }
.tarjouslaatikko__oma--ohitettu { background: var(--virhe-pinta); color: var(--virhe); }
.tarjouslaatikko__oma--uusi { background: var(--korostus-pinta); color: var(--korostus); }
.tarjouslaatikko__ohje { margin: var(--vali-4) 0 0; font-size: var(--koko-s); color: var(--teksti-himmea); }
.tarjouslaatikko__lomake { margin-top: var(--vali-4); }
.tarjouslaatikko__napit { display: flex; flex-wrap: wrap; gap: var(--vali-2); margin-top: var(--vali-3); }
.tarjouslaatikko__napit .nappi { flex: 1 1 140px; justify-content: center; }
.tarjouslaatikko .huomiolaatikko { margin: var(--vali-4) 0 0; }

/* --- Tarjousrivit myyjälle ---------------------------------------------- */
.tarjousrivit { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--vali-3); }
.tarjousrivi {
  padding: var(--vali-3);
  border: 1px solid var(--reuna);
  border-radius: var(--r-m);
  background: var(--pinta-himmea);
  font-size: var(--koko-s);
}
.tarjousrivi--uusi { border-color: var(--korostus); background: var(--korostus-pinta); }
.tarjousrivi--hyvaksytty { border-color: var(--onnistui); }
.tarjousrivi__ylarivi {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--vali-2); flex-wrap: wrap;
}
.tarjousrivi__summa {
  font-weight: var(--paino-lihava);
  font-size: var(--koko-l);
  font-variant-numeric: tabular-nums;
  color: var(--hinta);
}
.tarjousrivi__meta { color: var(--teksti-himmea); font-size: var(--koko-xs); }
.tarjousrivi__viesti { margin: var(--vali-2) 0 0; white-space: pre-wrap; }
.tarjousrivi__vastatarjous {
  margin: var(--vali-2) 0 0;
  padding: var(--vali-2);
  border-radius: var(--r-s);
  background: var(--vastatarjous-pinta);
  color: var(--vastatarjous);
}
.tarjousrivi__napit { display: flex; flex-wrap: wrap; gap: var(--vali-2); margin-top: var(--vali-3); }

/* --- Yhteystiedot hyväksynnän jälkeen ----------------------------------- */
.yhteyskortti { display: grid; gap: 2px; margin-top: var(--vali-3); font-size: var(--koko-s); }
.yhteyskortti strong { font-size: var(--koko-m); }

/* --- Pyyntölomakkeen yhteenveto ----------------------------------------- */
.yhteenveto { margin-top: var(--vali-5); }
.yhteenveto h4 { margin: 0 0 var(--vali-2); font-size: var(--koko-m); }
.tietolista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--vali-2) var(--vali-4);
  margin: 0;
}
.tietolista div { display: grid; gap: 1px; }
.tietolista dt { font-size: var(--koko-xs); color: var(--teksti-himmea); }
.tietolista dd { margin: 0; font-weight: var(--paino-puolilihava); }
.kuvaruudukko--pieni { display: flex; flex-wrap: wrap; gap: var(--vali-2); margin-top: var(--vali-3); }
.kuvaruudukko--pieni img { width: 120px; height: 80px; object-fit: cover; border-radius: var(--r-s); }
.hinta-arvio {
  margin-top: var(--vali-5);
  padding: var(--vali-4);
  border-radius: var(--r-m);
  background: var(--korostus-pinta);
}
.hinta-arvio h4 {
  margin: 0 0 var(--vali-1);
  font-size: var(--koko-xs);
  color: var(--korostus);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hinta-arvio__luku {
  margin: 0;
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-xl);
  font-weight: var(--paino-lihava);
}
.hinta-arvio p { margin: var(--vali-1) 0 0; }

/* --- Liikkeen selaussivun suodattimet ----------------------------------- */
.selaa-suodattimet {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--vali-3);
  margin-bottom: var(--vali-5);
}
@media (max-width: 760px) {
  .selaa-suodattimet { grid-template-columns: 1fr 1fr; }
}

/* --- Näin se toimii -askelkortit ---------------------------------------- */
/* Kolme korttia: numerolippu viistolla kulmalla, otsikko, teksti ja kuvitus
   kortin alaosassa. Kuva työntyy pohjaan, joten tekstien pituus ei siirrä
   kuvia eri korkeuksille. */
.askelkortit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vali-5);
  margin-top: var(--vali-6);
}
.askelkortti {
  display: flex; flex-direction: column;
  padding: var(--vali-8) var(--vali-6) var(--vali-6);
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: var(--r-l);
}
.askelkortti__numero {
  align-self: flex-start;
  padding: 6px 28px 6px 16px;
  margin-bottom: var(--vali-5);
  background: var(--korostus);
  color: #fff;
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-xl);
  font-weight: var(--paino-lihava);
  line-height: 1.1;
  border-radius: var(--r-m);
  clip-path: polygon(0 0, 78% 0, 100% 100%, 0 100%);
}
.askelkortti h3 { margin: 0 0 var(--vali-2); font-size: var(--koko-xl); }
.askelkortti p { margin: 0; color: var(--teksti-pehmea); }
.askelkortti__kuva {
  width: 100%;
  max-height: 320px;
  margin-top: auto;
  padding-top: var(--vali-6);
  object-fit: contain;
}
@media (max-width: 900px) {
  .askelkortit { grid-template-columns: 1fr; }
}

/* --- AutoJoppari-aloitus ------------------------------------------- */
/* Koko leveyden vihreä aloitus: otsikko, pikalomake (rekisterinumero ja
   kilometrit vievät pyyntölomakkeelle) ja kuvitus. Sisältöalueen ylätäyte
   kumotaan negatiivisella marginaalilla ja leveys venytetään näkymän reunoihin.
   Värit ovat kiinteät, koska pinta on
   sama molemmissa teemoissa. */
.lkhero {
  position: relative;
  margin: calc(-1 * var(--vali-10)) calc(50% - 50vw) var(--vali-10);
  padding: var(--vali-12) var(--vali-6);
  background: linear-gradient(135deg, #0f4d2c 0%, #1e9150 60%, #2bb069 100%);
  color: #fff;
  overflow: hidden;
}
.lkhero__sisalto {
  position: relative; z-index: 1;
  max-width: var(--leveys-max);
  margin: 0 auto;
  text-align: center;
}
.lkhero__otsikko {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  color: #fff;
}
.lkhero__kuvaus {
  margin: var(--vali-3) 0 var(--vali-8);
  font-size: var(--koko-l);
  color: rgba(255, 255, 255, .85);
}
.lkhero__rivi {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: var(--vali-10);
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
}
.lkhero__lomake { display: grid; gap: var(--vali-3); }
.lkhero__kentta {
  display: flex; align-items: center;
  min-height: 56px;
  background: #fff;
  border-radius: var(--r-m);
  overflow: hidden;
  color: #1c1917;
}
.lkhero__kentta:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
.lkhero__kentta input {
  flex: 1; min-width: 0; height: 56px;
  border: 0; background: transparent; box-shadow: none;
  text-align: center;
  font-size: var(--koko-m);
  font-weight: var(--paino-puolilihava);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1c1917;
}
.lkhero__kentta input::placeholder { color: #a8a29e; text-transform: uppercase; }
.lkhero__kentta input:focus { outline: none; }
.lkhero__kilpi {
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  width: 44px;
  background: #1e9150;
  color: #fff;
  font-size: var(--koko-xs);
  font-weight: var(--paino-lihava);
  letter-spacing: .04em;
}
.lkhero__ikoni { display: flex; padding-left: var(--vali-4); color: #1c1917; }
.lkhero__yksikko { padding-right: var(--vali-4); font-weight: var(--paino-puolilihava); }
.lkhero__nappi {
  display: flex; align-items: center; justify-content: center; gap: var(--vali-2);
  min-height: 56px;
  padding: 0 var(--vali-5);
  border: 0;
  border-radius: var(--r-m);
  background: #4ade80;
  color: #0b3d22;
  font: inherit;
  font-size: var(--koko-m);
  font-weight: var(--paino-lihava);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--nopea);
}
.lkhero__nappi:hover { background: #86efac; color: #0b3d22; text-decoration: none; }
.lkhero__nappi--reunus { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }
.lkhero__nappi--reunus:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.lkhero__napit { display: grid; gap: var(--vali-3); }
.lkhero__luottamus {
  display: flex; flex-wrap: wrap; gap: var(--vali-2) var(--vali-5);
  margin: var(--vali-4) 0 0; padding: 0; list-style: none;
  font-size: var(--koko-s);
  font-weight: var(--paino-puolilihava);
  color: rgba(255, 255, 255, .9);
}
.lkhero__luottamus li { display: flex; align-items: center; gap: var(--vali-2); }
.lkhero__luottamus li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4ade80;
}
.lkhero__kuva { width: 100%; max-height: 360px; object-fit: contain; justify-self: center; }
@media (max-width: 900px) {
  .lkhero { padding-top: var(--vali-10); }
  .lkhero__rivi { grid-template-columns: 1fr; gap: var(--vali-6); }
  .lkhero__kuva { max-height: 240px; order: -1; }
}

/* Osion kehotenauha samalla vihreällä liukuvärillä kuin aloitus. */
.etunauha--liikkeille {
  background: linear-gradient(135deg, #0f4d2c 0%, #1e9150 60%, #2bb069 100%);
  border-color: transparent;
  color: #fff;
}
.etunauha--liikkeille h2 { color: #fff; }
.etunauha--liikkeille p { color: rgba(255, 255, 255, .85); }
.etunauha--liikkeille .etunauha__silma { color: #86efac; }
.etunauha--liikkeille .lkhero__nappi { display: inline-flex; flex: none; }