/* -----------------------------------------------------------------------
   Asiakkaan tarjoussivu

   Sama visuaalinen kieli kuin tilauswidgetissä ja aloituskyselyssä.
   Tämä sivu on kuitenkin luettava ennen kaikkea: asiakas lukee sen
   läpi ja tekee päätöksen, joten leipäteksti on isompaa ja väljempää
   kuin lomakkeissa.
   ----------------------------------------------------------------------- */

.sivu {
  /* ⚠ VÄRISLUGIT: pohja ja pohja-2 ovat TAUSTAVÄREJÄ, teksti on tekstin
     väri. Tämä meni kerran väärin widgetissä — kaikki teksti piirtyi
     lähes mustana. Tarkista slugi, älä arvaa nimestä. */
  --tj-paneeli: #0C130E;
  --tj-kortti:  #18271B;
  --tj-kortti2: #20321F;
  --tj-raja:    #3A4C36;
  --tj-teksti:  var(--wp--preset--color--teksti, #F2F5F0);
  --tj-teksti2: var(--wp--preset--color--pehmea, #B9C4B7);
  --tj-himmea:  var(--wp--preset--color--himmea, #8E9C8C);
  --tj-lime:    var(--wp--preset--color--vihrea, #8BD03C);
  --tj-lime-v:  var(--wp--preset--color--vihrea-v, #A3E355);
  --tj-kelta:   var(--wp--preset--color--keltainen, #FBD00F);
  --tj-tumma:   #08120A;
}

.tj { max-width: 760px; }
.tj *, .tj *::before, .tj *::after { box-sizing: border-box; }

/*
 * ⚠ NOLLAUS NOLLATARKKUUDELLA. :where() ei kasvata tarkkuutta lainkaan,
 * joten jokainen komponenttisääntö voittaa sen. Widgetissä sama nollaus
 * kirjoitettiin ensin muodossa .bn-widget button, ja se voitti kolmesti
 * sen mitä sen ei pitänyt.
 */
:where(.tj) :where(button, input, textarea) { color: inherit; font: inherit; }
:where(.tj) :where(button) { cursor: pointer; }

/* ---------- yläosa ---------- */

.tj-yla { margin-bottom: clamp(26px, 3.4vw, 38px); }

.tj-tunnus {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tj-himmea); margin: 0 0 10px;
}

.tj h1 { margin: 0 0 14px; }

.tj-voimassa {
  margin: 0; font-size: 1rem; color: var(--tj-teksti2);
}
.tj-voimassa strong { color: var(--tj-lime-v); }

/* ---------- saate ---------- */

.tj-saate {
  margin-bottom: clamp(26px, 3.4vw, 36px);
  font-size: clamp(16px, 1.4vw, 17.5px); line-height: 1.65;
  color: var(--tj-teksti2); max-width: 62ch;
}
.tj-saate p { margin: 0 0 14px; }
.tj-saate p:last-child { margin-bottom: 0; }

/* ---------- rivit ---------- */

.tj-rivit {
  border: 1px solid var(--tj-raja); border-radius: 12px; overflow: hidden;
  margin-bottom: clamp(26px, 3.4vw, 36px);
}

.tj-rivi {
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; padding: 15px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: var(--tj-teksti2);
}
.tj-rivi:last-child { border-bottom: 0; }

.tj-rivi .tj-h {
  font-family: var(--wp--preset--font-family--mono, monospace);
  color: var(--tj-lime-v); white-space: nowrap;
}

.tj-rivi.tj-summa {
  background: rgba(255, 255, 255, .035);
  color: var(--tj-teksti); font-weight: 700; font-size: 1.08rem;
}

.tj-rivi.tj-alv {
  font-size: .85rem; color: var(--tj-himmea);
}

/* ---------- lupaukset ---------- */

.tj-lupaukset {
  list-style: none; margin: 0 0 clamp(30px, 4vw, 44px); padding: 0;
  display: grid; gap: 12px;
}
.tj-lupaukset li {
  position: relative; padding-left: 34px;
  font-size: .97rem; line-height: 1.58; color: var(--tj-teksti2);
}
.tj-lupaukset li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; display: grid; place-items: center;
  background: var(--tj-lime); color: var(--tj-tumma);
  border-radius: 6px; font-size: 12px; font-weight: 700;
}
.tj-lupaukset b { color: var(--tj-teksti); font-weight: 600; }

/* ---------- hyväksyntälomake ---------- */

.tj-lomake {
  padding: clamp(22px, 3vw, 32px);
  background: var(--tj-paneeli);
  border: 2px solid var(--tj-lime);
  border-radius: 14px;
}
.tj-lomake h2 { margin: 0 0 10px; font-size: clamp(20px, 2.2vw, 26px); }

.tj-apu {
  margin: 0 0 20px; font-size: .9rem; line-height: 1.58;
  color: var(--tj-himmea); max-width: 58ch;
}
.tj-apu a { color: var(--tj-lime-v); }
.tj-lomake > .tj-apu:last-of-type { margin: 18px 0 0; }

.tj-kentta { margin-bottom: 16px; }
.tj-kentta label {
  display: block; margin-bottom: 7px;
  font-size: .93rem; font-weight: 600; color: var(--tj-teksti);
}
.tj-kentta input {
  width: 100%; padding: 13px 15px;
  background: var(--tj-kortti); border: 2px solid var(--tj-raja);
  border-radius: 10px; color: var(--tj-teksti); font-size: 1rem;
}
.tj-kentta input:focus { outline: none; border-color: var(--tj-lime); }

.tj-ruksi {
  display: flex; gap: 13px; align-items: flex-start;
  margin: 14px 0; font-size: .95rem; line-height: 1.5;
  color: var(--tj-teksti2); cursor: pointer;
}
.tj-ruksi input {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: var(--tj-lime);
}
.tj-ruksi a { color: var(--tj-lime-v); }

/*
 * ⚠ NAPPI ASETTAA OMAN TAUSTANSA JA VÄRINSÄ. Nollaus ei tee sitä,
 * koska silloin se veisi ne kaikilta napeilta. Ilman tätä selain
 * piirtää oman vaalean nappityylinsä tummalle pohjalle.
 */
.tj-nappi {
  display: inline-block; width: 100%; margin-top: 20px;
  padding: 17px 30px; border: 0; border-radius: 11px;
  background: var(--tj-lime); color: var(--tj-tumma);
  font-size: 1.05rem; font-weight: 700; text-align: center; text-decoration: none;
}
.tj-nappi:hover { background: var(--tj-lime-v); color: var(--tj-tumma); }

.tj-nappi-linkki { width: auto; padding: 14px 28px; }

/* ---------- hyväksytty ja tyhjä ---------- */

.tj-valmis, .tj-tyhja {
  max-width: 620px; padding: clamp(24px, 3vw, 32px);
  background: var(--tj-paneeli); border: 1px solid var(--tj-raja);
  border-radius: 14px;
}
.tj-valmis { border-color: var(--tj-lime); border-width: 2px; }

.tj-valmis h2, .tj-tyhja h2 { margin: 0 0 14px; font-size: clamp(20px, 2.2vw, 26px); }
.tj-valmis p, .tj-tyhja p {
  margin: 0 0 14px; line-height: 1.62; color: var(--tj-teksti2);
}
.tj-valmis p:last-child, .tj-tyhja p:last-child { margin-bottom: 0; }
.tj-valmis a:not(.tj-nappi), .tj-tyhja a { color: var(--tj-lime-v); }

.tj :focus-visible { outline: 2px solid var(--tj-lime); outline-offset: 3px; }