/* ============================================================
   12-kupongit.css - Kuponkikortti ja lompakko
   ============================================================
   Kortti on lipuke, ei laatikko: rei'itetty keskiviiva jakaa sen kantaosaan ja
   irrotettavaan osaan. Muoto ei ole koriste - se on sama viiva josta kuponki
   repeää lunastettaessa, ja tuttu fyysinen muoto kertoo myyjälle heti mistä on
   kyse ilman perehdytystä.

   Värit tulevat baarilta muuttujina (--kuponki-paavari, --kuponki-korostus).
   Tekstiväri lasketaan JS-puolella taustan luminanssista, koska baari saa
   valita minkä tahansa värin eikä kiinteä tekstiväri toimisi molemmilla. */

.kuponki-kortti {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 2px solid #2B2B2B;
  background: linear-gradient(160deg,
              var(--kuponki-paavari) 0%,
              color-mix(in srgb, var(--kuponki-paavari) 82%, #000) 100%);
  color: var(--kuponki-teksti);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  margin-bottom: 12px;
  isolation: isolate;
}

/* Baarin logo hyvin haaleana taustakuviona. Kortti on baarin, ei liigan -
   mutta logo ei saa kilpailla tekstin kanssa luettavuudesta. */
.kuponki-vesileima {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  /* Oletusarvot ovat tassa, EIVAT tietokannassa. Jos baari ei mukauta
     vesileimaa, kuponki nayttaa aina talta - myos jos oletusta myohemmin
     hienosaadetaan. Mukautetut arvot tulevat kortin inline-muuttujista. */
  background-position: var(--kuponki-vl-pos, right -18% center);
  background-size: var(--kuponki-vl-koko, 62%) auto;
  opacity: var(--kuponki-vl-alpha, 0.10);
  pointer-events: none;
  z-index: 0;
}

.kuponki-ylaosa,
.kuponki-alaosa {
  position: relative;
  z-index: 1;
}

.kuponki-ylaosa {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px 11px 15px;
}

.kuponki-ikoni {
  font-size: 24px;
  line-height: 1;
  flex: 0 0 auto;
}

.kuponki-otsikkolohko { min-width: 0; }

.kuponki-otsikko {
  font-family: 'Oswald', sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.kuponki-venue {
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0.85;
  margin-top: 2px;
}

/* Rei'itys: pyöreät lovet reunoissa + katkoviiva välissä. Tämä on se kohta
   josta kortti repeää - repäisyanimaatio leikkaa juuri tästä. */
.kuponki-reititys {
  position: relative;
  height: 16px;
  z-index: 1;
}
.kuponki-reititys::before,
.kuponki-reititys::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  /* Lovi on REIKA kortissa, ei ympyra sen paalla. Siksi siina ei ole omaa
     ulkoviivaa - tumma reunus sai lovet nayttamaan irrallisilta napeilta.
     Vari on sen taustan vari joka reiasta paistaa lapi: sivulla kerma,
     modaalissa valkoinen (--kuponki-lovi asetetaan .modal-card:lle). */
  background: var(--kuponki-lovi, #F5F1E8);
  transform: translateY(-50%);
}
.kuponki-reititys::before { left: -10px; }
.kuponki-reititys::after  { right: -10px; }

/* Katkoviiva lovien välissä. Oma elementtinsä olisi ylimääräistä HTML:ää,
   joten se piirretään taustakuviona itse rei'itysriville. */
.kuponki-reititys {
  background-image: repeating-linear-gradient(
    to right,
    color-mix(in srgb, var(--kuponki-teksti) 45%, transparent) 0 6px,
    transparent 6px 12px);
  background-size: 100% 2px;
  background-position: center;
  background-repeat: no-repeat;
}

.kuponki-alaosa {
  padding: 10px 15px 14px 15px;
  font-size: 11.5px;
  line-height: 1.45;
}

.kuponki-voimassa { font-weight: 700; }

.kuponki-aikarajat {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--kuponki-korostus);
  color: #F5F1E8;
  font-family: 'Oswald', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.kuponki-laskuri { margin-top: 9px; }
.kuponki-laskuri-teksti {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-bottom: 3px;
}
.kuponki-laskuri-palkki {
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--kuponki-teksti) 22%, transparent);
  overflow: hidden;
}
.kuponki-laskuri-palkki span {
  display: block;
  height: 100%;
  background: var(--kuponki-korostus);
  transition: width 0.4s ease;
}

.kuponki-ehdot {
  margin-top: 8px;
  opacity: 0.9;
  font-size: 10.5px;
}

.kuponki-merkinnat,
.kuponki-keskeytys {
  margin-top: 6px;
  font-size: 9.5px;
  opacity: 0.72;
}

.kuponki-koodi {
  margin-top: 9px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px dashed color-mix(in srgb, var(--kuponki-teksti) 45%, transparent);
  display: inline-block;
}

/* Tilaleimat: käytetty ja vanhentunut kuponki jäävät näkyviin lompakkoon,
   joten niiden on erotuttava aktiivisista yhdellä silmäyksellä. */
.kuponki-leima {
  position: absolute;
  top: 12px;
  right: -34px;
  z-index: 2;
  transform: rotate(34deg);
  padding: 4px 38px;
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #F5F1E8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.kuponki-leima-kaytetty { background: #1f5043; }
.kuponki-leima-vanha    { background: #7f1d1d; }
.kuponki-leima-tauko    { background: #78350f; }

/* Käytetty ja vanhentunut himmennetään: ne ovat historiaa, eivät toimintaa. */
.kuponki-tila-kaytetty,
.kuponki-tila-vanhentunut { filter: saturate(0.45) brightness(0.9); }

.kuponki-napit {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  padding: 0 15px 14px 15px;
}
.kuponki-napit button {
  flex: 1;
  font-family: 'Oswald', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1.5px solid #2B2B2B;
  background: #F5F1E8;
  color: #2B2B2B;
  cursor: pointer;
}
.kuponki-napit button:disabled { opacity: 0.55; cursor: default; }
.kuponki-napit button.kuponki-nappi-ensisijainen {
  background: var(--kuponki-korostus);
  color: #F5F1E8;
}

/* Esikatselu venue dashboardissa: kortti ei ole toiminnallinen, joten se
   näytetään hieman kavennettuna jottei se väitä olevansa oikea kuponki. */
.kuponki-muoto-esikatselu { max-width: 340px; }

/* ============================================================
   VENUE DASHBOARD: kuponkien hallinta
   ============================================================ */

/* Vastuuhuomautus on lomakkeen yläpuolella eikä alaviitteenä: se koskee sitä
   mitä lomakkeeseen kirjoitetaan, joten se on luettava ennen kirjoittamista. */
.kuponki-vastuuhuomautus {
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-left: 4px solid #d97706;
  border-radius: 8px;
  padding: 11px 13px;
  margin-bottom: 16px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #78350f;
}
.kuponki-vastuuhuomautus strong { display: block; margin-bottom: 5px; font-size: 12px; }
.kuponki-vastuuhuomautus p { margin: 0 0 6px 0; }
.kuponki-vastuuhuomautus p:last-child { margin-bottom: 0; }

.kuponki-label {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #2B2B2B;
  margin: 12px 0 4px 0;
}

.kuponki-vihje {
  font-size: 10.5px;
  line-height: 1.45;
  color: #5f5f5f;
  margin-top: 4px;
  font-style: italic;
}

.kuponki-vpv-rivi,
.kuponki-tapparivi,
.kuponki-varirivi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11.5px;
}
.kuponki-tapparivi { flex-direction: column; gap: 6px; }
.kuponki-vpv-rivi label,
.kuponki-tapparivi label,
.kuponki-varirivi label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.kuponki-kellorivi {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kuponki-kellorivi input { flex: 1; margin: 0; }

.kuponki-ikonikentta { width: 60px; text-align: center; }

.kuponki-esikatselu-otsikko,
.kuponki-osion-otsikko {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #2B2B2B;
  margin: 18px 0 8px 0;
  padding-top: 12px;
  border-top: 1px dashed #2B2B2B;
}

.kuponki-lomakenapit {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* Kampanjarivi: tila ja luvut yhdellä silmäyksellä. Käyttöaste on baarille
   kiinnostavampi kuin kerätyt tai käytetyt yksinään - sata kerättyä ja kaksi
   käytettyä kertoo että tarjous ei vetänyt paikalle. */
.kuponki-hallinta-rivi {
  border: 1.5px solid #2B2B2B;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 9px;
  background: #ffffff;
}
.kuponki-hallinta-ylarivi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.kuponki-hallinta-otsikko {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #2B2B2B;
}
.kuponki-hallinta-tila {
  flex: 0 0 auto;
  font-family: 'Oswald', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 5px;
  color: #F5F1E8;
}
.tila-aktiivinen { background: #1f5043; }
.tila-tauolla    { background: #78350f; }
.tila-paattynyt  { background: #57534e; }

.kuponki-hallinta-luvut {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: #4b4b4b;
  margin-bottom: 8px;
}
.kuponki-hallinta-luvut strong { color: #1f5043; font-size: 12.5px; }

.kuponki-hallinta-napit { display: flex; gap: 6px; flex-wrap: wrap; }
.kuponki-hallinta-napit button {
  font-family: 'Oswald', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 6px 11px;
  border-radius: 6px;
  border: 1.5px solid #2B2B2B;
  background: #F5F1E8;
  color: #2B2B2B;
  cursor: pointer;
}
.kuponki-hallinta-napit button:hover { background: #e8e2d5; }

/* Lunastusloki: koodi ensin, koska sen perusteella tarkastus tehdään. */
.kuponki-loki-rivi {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 10px;
  border-bottom: 1px solid #e8e2d5;
  font-size: 11px;
}
.kuponki-loki-koodi {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  color: #1f5043;
  flex: 0 0 auto;
}
.kuponki-loki-otsikko { flex: 1; min-width: 0; color: #2B2B2B; }
.kuponki-loki-aika,
.kuponki-loki-etaisyys { color: #5f5f5f; font-size: 10.5px; flex: 0 0 auto; }

.kuponki-tyhja {
  padding: 14px 10px;
  text-align: center;
  font-size: 11.5px;
  font-style: italic;
  color: #5f5f5f;
}

/* ============================================================
   LOMPAKKO
   ============================================================ */

.lompakko-valilehdet {
  display: flex;
  border-bottom: 2px solid #2B2B2B;
  background: #2B2B2B;
}
.lompakko-valilehti {
  flex: 1;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 6px;
  border: none;
  background: transparent;
  color: #a8a29e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.lompakko-valilehti.aktiivinen {
  background: #F5F1E8;
  color: #2B2B2B;
}
.lompakko-luku {
  font-size: 10px;
  min-width: 17px;
  padding: 1px 4px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.18);
}
.lompakko-valilehti.aktiivinen .lompakko-luku {
  background: #2c705f;
  color: #F5F1E8;
}

.venue-kupongit-otsikko,
.lompakko-kuponki { margin-top: 12px; }
.venue-kupongit-otsikko {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #2B2B2B;
  margin-bottom: 8px;
}

.lahjoitus-lista { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.lahjoitus-kaveri {
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid #2B2B2B;
  background: #F5F1E8;
  font-family: 'Oswald', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #2B2B2B;
  cursor: pointer;
}
.lahjoitus-kaveri:hover { background: #e8e2d5; }

/* ============================================================
   REPÄISY
   ============================================================
   Kortti piirretään kahdesti päällekkäin ja leikataan clip-pathilla ylä- ja
   alapuoliskoksi rei'ityksen kohdalta. Palat erkanevat ja jäävät hitaaseen
   jatkuvaan liikkeeseen.

   Liike EI ole koriste. Se on ainoa osa lunastusta jota kuvakaappaus ei
   toista, ja siksi juuri se on se mitä myyjä katsoo. */

.repaisy-kortti { max-width: 380px; background: #F5F1E8; }

.repaisy-kuitti {
  text-align: center;
  padding: 12px;
  border: 2px dashed #1f5043;
  border-radius: 10px;
  background: #ffffff;
  margin-bottom: 12px;
}
.repaisy-kuitti-otsikko {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #1f5043;
}
.repaisy-kuitti-paikka {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #2B2B2B;
  margin-top: 3px;
}
.repaisy-kuitti-aika { font-size: 12px; color: #4b4b4b; margin-top: 3px; }

/* Sekunnit sykkivät: pysähtynyt kello paljastaisi kuvakaappauksen. */
.repaisy-sekunnit {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  animation: repaisySyke 1s ease-in-out infinite;
}
@keyframes repaisySyke {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.repaisy-kuitti-koodi {
  margin-top: 7px;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #1f5043;
}
.repaisy-kuitti-vihje { font-size: 10.5px; color: #5f5f5f; margin-top: 6px; font-style: italic; }
.repaisy-sulje { width: 100%; }

/* Liikkeen vähennys: käyttäjä joka on pyytänyt vähemmän animaatiota saa
   staattisen revityn tilan. Kuponki on silti selvästi revitty. */
@media (prefers-reduced-motion: reduce) {
  }

/* Voimassaolon virheilmoitus kentän alapuolella. Näkyy heti kun päivämäärä on
   virheellinen; tyhjästä kentästä huomautetaan vasta tallennettaessa. */
.kuponki-virhe {
  margin-top: 5px;
  padding: 7px 10px;
  border-radius: 6px;
  background: #fee2e2;
  border-left: 3px solid #b91c1c;
  color: #7f1d1d;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
}

/* Kampanjan nimi on painike (avaa esikatselun), mutta sen on näytettävä
   otsikolta eikä napilta - muuten rivi näyttää täydeltä painikkeita. */
button.kuponki-hallinta-otsikko {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
button.kuponki-hallinta-otsikko:hover { color: #1f5043; }

.kuponki-nappi-varoitus {
  background: #7f1d1d !important;
  color: #F5F1E8 !important;
  border-color: #450a0a !important;
}

.kuponki-jaadytysvaroitus {
  margin: 0 0 7px 0;
  padding: 5px 9px;
  border-radius: 6px;
  background: #e0f2fe;
  border-left: 3px solid #0369a1;
  font-size: 10.5px;
  font-weight: 600;
  color: #075985;
}

.kuponki-jaadytysvalinta {
  padding: 9px 11px;
  border-radius: 8px;
  background: #fef3c7;
  border: 1px solid #fde68a;
}
.kuponki-jaadytysvalinta label {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #78350f;
  cursor: pointer;
}
.kuponki-jaadytysvalinta .kuponki-vihje { color: #78350f; opacity: 0.85; }

/* Lomakemodaali on pitkä, joten se saa vierittyä eikä pakota koko sivua. */
.kuponki-lomake-kortti { max-width: 420px; max-height: 88vh; overflow-y: auto; }

/* ============================================================
   KORJAUKSET 19.8.2026
   ============================================================ */

/* Kuponkimodaalit alapalkkien yläpuolelle ja ikkunan sisään.
   Mitattu: kortti ulottui ikkunan ulkopuolelle (alareuna 341 px, ikkuna 339 px),
   jolloin sen alaosa jäi kiinteiden palkkien taakse. Korkeus lasketaan nyt
   palkit huomioiden, ja z-index nostetaan niiden yli varmuuden vuoksi. */
#kuponkiLomakeModal,
#kuponkiEsikatseluModal,
#kampanjaVahvistusModal,
#etaisyysOhitusModal,
#lunastusVahvistusModal,
#repaisyModal,
#lahjoitusModal {
  z-index: 2000;
}

.kuponki-lomake-kortti,
#kuponkiEsikatseluModal .modal-card,
#kampanjaVahvistusModal .modal-card {
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  /* Estää vierityksen karkaamisen taustalle kun kortin pää tulee vastaan. */
  overscroll-behavior: contain;
}

/* Taustan vieritys lukitaan modaalin ajaksi. Tämä on varsinainen korjaus
   siihen että modaali "rullautui palkkien alle": kun tausta ei liiku,
   modaali ei voi joutua väärään kohtaan suhteessa kiinteisiin palkkeihin. */
body.kuponki-modaali-auki {
  overflow: hidden;
}

/* Kupongin otsikko keskitettynä. Ikoni oli aiemmin rivin alussa ja työnsi
   otsikon sivuun, jolloin se ei ollut kortin keskellä vaan ikonin oikealla. */
.kuponki-ylaosa {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
}
.kuponki-otsikkolohko { width: 100%; text-align: center; }
.kuponki-otsikko { text-align: center; }
.kuponki-venue { text-align: center; }

/* Ravintolaprofiilin kupongit sivuttain vieritettävänä karusellina, samalla
   periaatteella kuin "Hanaliiga suosittelee". Allekkain kolme kuponkia
   venyttäisi profiilimodaalin turhan pitkäksi. */
.venue-kupongit-karuselli {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 8px 2px;
  -webkit-overflow-scrolling: touch;
}
.venue-kuponki-dia {
  flex: 0 0 82%;
  max-width: 300px;
  scroll-snap-align: center;
}
.venue-kuponki-dia .kuponki-kortti { margin-bottom: 0; }

.venue-kupongit-otsikko {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.venue-kupongit-maara {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #5f5f5f;
}

/* Lunastuspalaute: lyhyt sykäys ja kortti harmaaksi. Ilman näkyvää palautetta
   ainoa merkki onnistumisesta olisi ohimenevä ilmoitus, ja pelaaja painaisi
   uudelleen varmuuden vuoksi. */
@keyframes kuponkiLunastusSykays {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.04); box-shadow: 0 8px 24px rgba(31, 80, 67, 0.45); }
  100% { transform: scale(1); }
}
.kuponki-lunastettu-nyt {
  animation: kuponkiLunastusSykays 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Lunastettu kuponki himmenee: se on jo lompakossa, eikä sitä tarvitse
   painaa uudelleen. */
.kuponki-kortti:has(.kuponki-napit button:disabled),
.kuponki-tila-lunastettu {
  filter: saturate(0.4) brightness(0.92);
}

/* ============================================================
   KÄYTETTY-LEIMA (korvaa aiemman repäisyanimaation)
   ============================================================
   Revitty kortti oli vaikea lukea ja myyjälle näytettävä kuitti jäi palojen
   alle. Nyt kortti näkyy kokonaisena ja sen päälle iskeytyy leima, kuten
   paperikuponkiin lyötäisiin. Kuitti on kortin ALAPUOLELLA, ei päällä. */

.leima-kehys {
  position: relative;
  margin-bottom: 16px;
}

.kaytetty-leima {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  pointer-events: none;
  /* Alkutila: kaukana, iso ja läpinäkyvä - kuin leima olisi vielä ilmassa. */
  transform: translate(-50%, -50%) rotate(-16deg) scale(3.2);
  opacity: 0;
}

.kaytetty-leima span {
  display: block;
  padding: 8px 22px;
  font-family: 'Oswald', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #b91c1c;
  border: 4px solid #b91c1c;
  border-radius: 8px;
  /* Vaalea sumea reunus pitää leiman luettavana MILLÄ TAHANSA baarin värillä.
     Ilman sitä punainen leima katoaisi punaiselle kupongille. */
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 2px rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 6px 18px rgba(0, 0, 0, 0.4);
  background: rgba(255, 255, 255, 0.14);
}

.leima-kaynnissa .kaytetty-leima {
  animation: leimaIsku 0.5s cubic-bezier(0.16, 1.2, 0.3, 1) forwards;
}

@keyframes leimaIsku {
  0%   { transform: translate(-50%, -50%) rotate(-16deg) scale(3.2); opacity: 0; }
  55%  { transform: translate(-50%, -50%) rotate(-13deg) scale(0.92); opacity: 1; }
  70%  { transform: translate(-50%, -50%) rotate(-13deg) scale(1.06); }
  100% { transform: translate(-50%, -50%) rotate(-13deg) scale(1); opacity: 1; }
}

/* Kortti nytkähtää iskun kohdalla - ilman sitä leima näyttää liimatulta
   tarralta eikä lyödyltä. */
.leima-kaynnissa .kuponki-kortti {
  animation: leimaTarahdys 0.5s cubic-bezier(0.16, 1.2, 0.3, 1);
}
@keyframes leimaTarahdys {
  0%, 50% { transform: translateY(0); }
  58%     { transform: translateY(4px) scale(0.985); }
  72%     { transform: translateY(-2px); }
  100%    { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .leima-kaynnissa .kaytetty-leima {
    animation: none;
    transform: translate(-50%, -50%) rotate(-13deg) scale(1);
    opacity: 1;
  }
  .leima-kaynnissa .kuponki-kortti { animation: none; }
}

/* ============================================================
   KARUSELLIN NUOLET
   ============================================================
   Nuolet ovat LISÄ, eivät korvaaja: sormella vetäminen toimii edelleen.
   Työpöydällä ei ole kosketusta, joten ilman nuolia kuponkien selaaminen
   vaatisi vaakavierityksen jota moni ei löydä. */

.venue-kupongit-kehys { position: relative; }

.kuponki-nuoli {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid #2B2B2B;
  background: #F5F1E8;
  color: #2B2B2B;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 2px 0;
}
.kuponki-nuoli-vasen  { left: -6px; }
.kuponki-nuoli-oikea  { right: -6px; }
.kuponki-nuoli:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
.kuponki-nuoli:hover:not(:disabled) { background: #e8e2d5; }

/* Vierityspalkki piiloon: nuolet ja veto riittävät, ja palkki söi tilaa
   kortin alta pienellä ruudulla. */
.venue-kupongit-karuselli { scrollbar-width: none; }
.venue-kupongit-karuselli::-webkit-scrollbar { display: none; }

/* Kaverin nimi ja avatar lahjoituslistassa */
.lahjoitus-kaveri {
  display: flex;
  align-items: center;
  gap: 9px;
}
.lahjoitus-kaveri-nimi { flex: 1; min-width: 0; text-align: left; }
.lahjoitus-kaveri:disabled { opacity: 0.5; cursor: default; }

/* Ylläpidon testityökalu lompakossa. Erottuu selvästi omaksi lohkokseen,
   jottei sitä sekoita pelaajan omaan sisältöön. */
.lompakko-admin-tyokalu {
  margin-bottom: 14px;
  padding: 11px 13px;
  border-radius: 10px;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  border-left: 4px solid #0369a1;
}
.lompakko-admin-otsikko {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #075985;
  margin-bottom: 3px;
}
.lompakko-admin-tyokalu .kuponki-vihje { color: #075985; opacity: 0.9; }
.lompakko-admin-rivi { margin: 8px 0 6px 0; }
.lompakko-admin-rivi input { margin: 0; }
.lompakko-admin-napit { display: flex; gap: 8px; }
.lompakko-admin-napit button { flex: 1; margin: 0; }

/* Leimanäkymässä kortin oma kulmanauha piilotetaan: kaksi "käytetty"-merkintää
   samassa kortissa on toistoa, ja nauha kilpaili leiman kanssa huomiosta.
   Leima on se jonka myyjä katsoo. */
.kuponki-muoto-leima .kuponki-leima { display: none; }

/* Riittävä väli leiman ja kuitin väliin. Mitattu: leima ulottuu kortin
   alapuolelle (kierretty laatikko vie enemmän tilaa kuin miltä näyttää), ja
   16 px:n välillä se osui kuittiin 29 px:n verran. */
.leima-kehys { margin-bottom: 54px; }

/* Hieman pienempi leima: kortin tekstin on erotuttava leiman altakin, jotta
   myyjä näkee mitä kupongilla saa. */
.kaytetty-leima span {
  font-size: 21px;
  padding: 6px 18px;
  letter-spacing: 2.5px;
  border-width: 3px;
}

/* Lomakemodaalin otsikkorivi sulkuristillä. Pitkässä lomakkeessa
   sulkemisnappi on alhaalla vierityksen päässä, joten ristin on oltava myös
   ylhäällä - muuten poistuminen vaatii koko lomakkeen selaamisen läpi. */
.kuponki-lomake-otsikkorivi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: sticky;
  top: 0;
  background: #ffffff;
  /* Otsikkorivin YLAPUOLELLE jai modaalin 20 px:n pehmuste, jossa vieritettava
     sisalto vilkkui esiin. Negatiivinen ylamarginaali EI korjaa sita: sticky
     laskee kiinnityskohdan marginaalilaatikosta, joten -20 px marginaali ja
     +20 px kiinnityskohta kumoavat toisensa. Mitattu selaimessa 19.8.2026:
     rako pysyi 20 px:na ja kaksi riviä nakyi siina yha.
     Ainoa toimiva ratkaisu on poistaa ylapehmuste itse VIERITYSLAATIKOLTA
     (.kuponki-lomake-kortti alla) ja antaa otsikkorivin tuottaa se itse.
     Sivumarginaalit levittavat rivin reunasta reunaan, jotta se peittaa
     alleen vierivan sisallon koko leveydelta. Mitattu jalkeen: rako 0 px. */
  margin: 0 -20px 8px -20px;
  padding: 18px 20px 8px 20px;
  z-index: 3;
}
/* Kuuluu yhteen ylla olevan saannon kanssa - ala poista toista ilman toista. */
.kuponki-lomake-kortti { padding-top: 0; }
.kuponki-lomake-sulje {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #2B2B2B;
  background: #F5F1E8;
  color: #2B2B2B;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.kuponki-lomake-sulje:hover { background: #e8e2d5; }

/* Neljä välilehteä mahtuu kapeallekin ruudulle vain pienemmällä tekstillä. */
.lompakko-valilehti { font-size: 10px; padding: 9px 4px; gap: 4px; }
.lompakko-luku { font-size: 9px; min-width: 15px; }

/* Lähetetyt-lista. Tämä ei ole kuponkikortti vaan tapahtumaloki: mitä
   lähetettiin, kenelle ja milloin. Kortti olisi harhaanjohtava, koska kuponki
   ei ole enää pelaajan omassa lompakossa. */
.lahetetty-rivi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  margin-bottom: 8px;
  border: 1.5px solid #2B2B2B;
  border-radius: 10px;
  background: #ffffff;
}
.lahetetty-avatar { flex: 0 0 auto; }
.lahetetty-tiedot { flex: 1; min-width: 0; }
.lahetetty-otsikko {
  font-family: 'Oswald', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #2B2B2B;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lahetetty-saaja { font-size: 11px; color: #4b4b4b; margin-top: 2px; }
.lahetetty-venue { font-size: 10px; color: #5f5f5f; margin-top: 1px; }
.lahetetty-oikea { flex: 0 0 auto; text-align: right; }
.lahetetty-aika  { font-family: 'Oswald', sans-serif; font-size: 11.5px; font-weight: 700; color: #1f5043; }
.lahetetty-kello { font-size: 10px; color: #5f5f5f; }
.lahetetty-koodi { font-family: 'Oswald', sans-serif; font-size: 9.5px; letter-spacing: 0.8px; color: #7f7f7f; margin-top: 2px; }

/* Jo täyteen ladattu kuponki ravintolaprofiilissa: himmennetty ja siirretty
   listan perälle. Ei piiloteta kokonaan - pelaajan on hyvä nähdä mitä hänellä
   jo on, muuten hän etsii kuponkia jota luulee menettäneensä. */
.venue-kuponki-kaytetty { opacity: 0.62; }
.venue-kuponki-kaytetty .kuponki-kortti { filter: saturate(0.35) brightness(0.94); }

/* Lähettäjämerkintä lahjaksi saadun kupongin oikeassa yläkulmassa.
   Sijoitettu kortin sisään absoluuttisesti, jottei se työnnä otsikkoa
   sivuun - otsikko on juuri keskitetty ja sen halutaan pysyvän keskellä. */
.kuponki-lahettaja {
  position: absolute;
  top: 7px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px 3px 5px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.24);
  max-width: 62%;
}
.kuponki-lahettaja-teksti {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}
.kuponki-lahettaja-nimi {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Avatar merkinnän sisällä on pieni, joten sen omat mitat on pakotettava. */
.kuponki-lahettaja .avatar-container,
.kuponki-lahettaja img { width: 18px !important; height: 18px !important; flex: 0 0 auto; }

/* Syötteen ilmoituskortti vastaanotetusta kupongista */
.kuponki-notif-rivi { display: flex; align-items: center; gap: 10px; }
.kuponki-notif-teksti { flex: 1; min-width: 0; font-size: 12.5px; color: #2B2B2B; line-height: 1.4; }
.kuponki-notif-otsikko {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #6e3719;
  margin-top: 2px;
}
.kuponki-notif-venue { font-size: 11px; color: #5f5f5f; }

/* ---------- Lomakkeen lisaasetukset ja pystyesikatselu ---------- */
/* Lisaasetukset ovat oletuksena kiinni, jotta tavallinen kupongin teko on
   kuusi kenttaa eika kahdeksantoista. Nappi kertoo tilansa nuolella. */
.kuponki-lisaasetukset-nappi {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 10px 0 0 0;
  padding: 8px 10px;
  background: rgba(31, 80, 67, 0.06);
  border: 1px dashed rgba(31, 80, 67, 0.35);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1f5043;
  cursor: pointer;
  text-align: left;
}
.kuponki-lisaasetukset-nappi:hover { background: rgba(31, 80, 67, 0.12); }
.kuponki-lisaasetukset-nuoli { transition: transform 0.2s ease; }
.kuponki-lisaasetukset-nappi[aria-expanded="true"] .kuponki-lisaasetukset-nuoli {
  transform: rotate(90deg);
}
.kuponki-lisaasetukset {
  padding: 10px;
  margin-top: 6px;
  border: 1px solid rgba(31, 80, 67, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
}
.kuponki-liuku {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #4a4a4a;
}
.kuponki-liuku > span:first-child { flex: 0 0 92px; }
.kuponki-liuku input[type="range"] { flex: 1; min-width: 0; }
.kuponki-liuku-arvo {
  flex: 0 0 42px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #1f5043;
  font-weight: 600;
}

/* Pystyesikatselu kaytaa TASMALLEEN samoja luokkia kuin paikat-sivun
   karuselli, jotta leveys ja mittasuhteet ovat samat. Erillinen kopio
   naiden arvoista ajautuisi ennen pitkaa erilleen oikeasta nakymasta. */
.kuponki-esikatselu-pysty {
  overflow: visible;
  justify-content: center;
  padding-bottom: 0;
}
.kuponki-esikatselu-pysty .venue-kuponki-dia { flex: 0 0 280px; }

/* Lisaasetusten sisaotsikot erottavat vesileiman ja tekstin varin toisistaan.
   Ilman niita lohko on pelkka lista saatimia ilman ryhmittelya. */
.kuponki-lisaasetukset-otsikko {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1f5043;
  margin: 12px 0 6px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(31, 80, 67, 0.15);
}
.kuponki-lisaasetukset-otsikko:first-child { margin-top: 0; }

.kuponki-vesileimakuva-rivi {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.kuponki-vesileimakuva-tila {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #4a4a4a;
}

/* Tiedostonappi on <label>, koska piilotettua tiedostokenttaa ei voi tyylitella
   suoraan. Nappi ja label kayttavat samaa luokkaa, jotta ne nayttavat samalta. */
.kuponki-tiedostonappi {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid rgba(31, 80, 67, 0.35);
  border-radius: 6px;
  background: rgba(31, 80, 67, 0.08);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #1f5043;
  cursor: pointer;
  white-space: nowrap;
}
.kuponki-tiedostonappi:hover { background: rgba(31, 80, 67, 0.16); }
.kuponki-tiedostonappi-poista {
  border-color: rgba(153, 27, 27, 0.35);
  background: rgba(153, 27, 27, 0.08);
  color: #991b1b;
}
.kuponki-tiedostonappi-poista:hover { background: rgba(153, 27, 27, 0.16); }

/* Modaalit ovat valkoisia, joten kupongin lovista paistaa valkoinen - ei
   sivun kermanvari. Muuttuja periytyy kaikkiin modaalin sisalla oleviin
   kortteihin, joten yksi rivi riittaa kaikille kolmelle esiintymalle. */
.modal-card { --kuponki-lovi: #ffffff; }

/* Vaaka/pysty-valitsin lisaasetuksissa. */
.kuponki-suuntavalitsin {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.kuponki-suuntavalitsin button {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid rgba(31, 80, 67, 0.35);
  border-radius: 6px;
  background: rgba(31, 80, 67, 0.06);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #1f5043;
  cursor: pointer;
}
.kuponki-suuntavalitsin button[aria-selected="true"] {
  background: #1f5043;
  border-color: #1f5043;
  color: #F5F1E8;
}

/* Esikatselun nappi ei ole toiminnallinen, mutta sen EI pida nayttaa
   disabloidulta: se on juuri se kirkas "Lunasta kuponki" -nappi jonka
   pelaaja nakee. Disabled-tila sai esikatselun nayttamaan jo lunastetulta. */
.kuponki-napit button.kuponki-nappi-esikatselu {
  pointer-events: none;
  opacity: 1;
}