/*
  -50 % kupongin tilat.

  Sivulla on kaksi hintaa yhtä aikaa HTML:ssä: normaalihinta 996 € ja
  kupongilla saatava 498 €. CSS valitsee kumpi näkyy sen mukaan onko
  body:llä luokka .kuponki-lunastettu (js/kuponki.js asettaa sen palvelimen
  vastauksen perusteella).

  Miksi molemmat ovat HTML:ssä eikä tekstiä vaihdeta JS:llä: ilman JS:ää
  sivulla lukee silloin normaalihinta. Se on oikea oletus — sivu ei lupaa
  alennusta jota se ei samassa tilassa osaa lunastaa, eikä hakukone indeksoi
  hintaa jota kävijä ei näe.

  ── MIKSI !important ───────────────────────────────────────────────────────
  Tilanvaihto leikkaa kolmen tiedoston läpi (style.css, tarjous.css,
  hinta-osio.css) ja koskee elementtejä joilla on jo oma display-arvo
  (.btn = inline-block, .kk-sisus = flex, .hintakortti-cta = flex).
  Ilman !importantia jokainen niistä pitäisi kumota erikseen oikeassa
  lähdejärjestyksessä, ja yksikin unohdus jättäisi molemmat hinnat näkyviin
  päällekkäin — eli sivu näyttäisi kahta eri hintaa samaan aikaan. Yksi
  keskitetty poikkeus on tässä pienempi paha kuin viisi hajautettua.
*/

.kuponki-alennettu {
  display: none !important;
}

body.kuponki-lunastettu .kuponki-normaali {
  display: none !important;
}

body.kuponki-lunastettu .kuponki-alennettu {
  display: revert !important;
}

/* Elementit joilla on oma author-display: revert palauttaisi ne selaimen
   oletukseen (block/inline) ja rikkoisi asettelun. */
body.kuponki-lunastettu .btn.kuponki-alennettu {
  display: inline-block !important;
}

body.kuponki-lunastettu .hintakortti-cta.kuponki-alennettu {
  display: flex !important;
}

body.kuponki-lunastettu .kk-sisus.kuponki-alennettu {
  display: flex !important;
}

/* Alapalkin kuponkimerkki on inline-flex, jotta ikoni ja teksti pysyvät
   samalla rivillä hinnan alla. */
body.kuponki-lunastettu .sticky-cta-kuponki.kuponki-alennettu {
  display: inline-flex !important;
}

/* Lunastettu ja jo vedospyynnöllä vahvistettu: kello pois, koska paikka ei
   enää raukea. Jäljelle jää pelkkä "Kuponki lunastettu". */
body.kuponki-vahvistettu .kuponki-kello {
  display: none !important;
}

/* Heron hintarivi: yliviivattu normaalihinta on <s>, jonka selaimen oletus
   on inline — revert riittää eikä tarvitse omaa sääntöä. Luvut ovat
   spaneja saman <b>:n sisällä, joten niidenkin revert on inline. */

/* -------------------- Lunastusnappi -------------------- */

.kuponki-nappi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.kuponki-nappi svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Napin oma latausesto: kaksoisklikkaus ei saa varata kahta paikkaa. */
.kuponki-nappi[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Puhelimessa .btn:n 28px sivupehmusteet + kuponki-ikoni veivät tekstin
   kahdelle riville molemmissa korteissa. Teksti on tärkeämpi kuin pehmuste
   ja ikoni: alle 380px ikoni jää pois kokonaan. */
@media (max-width: 460px) {
  .kuponki-nappi {
    padding-inline: 14px;
    gap: 8px;
  }
}

@media (max-width: 379px) {
  .kuponki-nappi svg {
    display: none;
  }
}

.kuponki-ehto {
  margin: 8px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-2);
  text-wrap: pretty;
}

/* Hinta-osio on tumma, joten sen ehtoteksti tarvitsee oman värinsä. */
.hinta-osio .kuponki-ehto {
  color: var(--text-2);
}

/* Kampanja loppuunmyyty: lunastusnappi pois, jotta sivu ei tarjoa
   toimintoa joka ei voi onnistua. Normaalihinta jää voimaan ja
   vedospyyntö on yhä auki muualla sivulla. */
body.kuponki-loppu .kuponki-nappi {
  display: none !important;
}

/* Ruudunlukijan tila-alue: luokanvaihto ei kuulu mitenkään, joten
   lunastus ilmoitetaan tekstinä. Ei näy visuaalisesti. */
.kuponki-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}