/* Kumppaniasento, sivustotarkastus, referenssit, tuotekortit ja opastettu kierros.
   Osa 5/5 Kipinä-widgetin tyyleistä; partials/footer.php lataa osat numerojärjestyksessä,
   koska myöhempi osa voi ohittaa aiemman. */

/* ── Kumppaniasento ─────────────────────────────────────────────────────
   Kun Kipinä johdattaa sivustolla, widget siirtyy sivun viereen: desktopissa oikean reunan
   paneeli, kapealla näytöllä alalakana kahdella korkeudella. Tummennus poistuu ja klikkaukset
   menevät sivulle läpi, joten kävijä voi lukea ja käyttää sivua keskustelun jatkuessa. */
.kip-overlay.kip-open.kip-companion {
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}
.kip-overlay.kip-companion .kip-modal {
  pointer-events: auto;
}

/* Kahva: näkyy vain lakanassa, piilotetaan JS:llä muualla. */
.kip-grab {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.kip-grab span {
  width: 38px; height: 4px; border-radius: 999px; background: #d5dbec;
}
.kip-grab:focus-visible span { background: #f58024; }


@media (min-width: 900px) {
  .kip-overlay.kip-companion {
    align-items: stretch;
    justify-content: flex-end;
    padding: 16px;
  }
  .kip-overlay.kip-companion .kip-modal {
    width: 380px;
    max-width: 380px;
    max-height: none;
  }
  /* Sivu kavennetaan paneelin tieltä. Ilman tätä täysleveä osio jää paneelin alle.
     Keskitetty sisältö asettuu jäljelle jäävään tilaan itsestään. */
  body.kip-companion-open { padding-right: 412px; }
  /* Kahva kuuluu vain lakanaan. */
  .kip-grab { display: none; }
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  body { transition: padding-right 0.3s cubic-bezier(0.22,1,0.36,1); }
}

@media (max-width: 899px) {
  .kip-overlay.kip-companion {
    align-items: flex-end;
    padding: 0;
  }
  .kip-overlay.kip-companion .kip-modal {
    width: 100%;
    max-width: none;
    border-radius: 18px 18px 0 0;
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), height 0.3s cubic-bezier(0.22,1,0.36,1);
  }
  .kip-overlay.kip-companion.kip-sheet-peek .kip-modal { height: 34vh; max-height: 34vh; }
  .kip-overlay.kip-companion.kip-sheet-up   .kip-modal { height: 60vh; max-height: 60vh; }
  /* Lakanassa otsikkopalkki on matalampi: tila kuuluu viesteille. */
  .kip-overlay.kip-companion .kip-header { padding-top: 8px; padding-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .kip-overlay.kip-companion .kip-modal { transition: none; }
}

/* ── Sivustotarkastus ────────────────────────────────────────────────
   Rivit tilapisteillä; palvelin järjestää punaiset ensin. Kapealla näytöllä arvo omalle riville. */
.kip-sc-rows { list-style: none; margin: 0; padding: 0; }
.kip-sc-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid #f0f2f8; font-size: 13px; }
.kip-sc-row:first-child { border-top: 0; }
.kip-sc-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: #c9cfe0; position: relative; top: -1px; }
.kip-sc-row--green .kip-sc-dot { background: #1f8a4c; }
.kip-sc-row--yellow .kip-sc-dot { background: #f58024; }
.kip-sc-row--red .kip-sc-dot { background: #e64644; box-shadow: 0 0 0 3px rgba(230,70,68,0.15); }
.kip-sc-label { flex: 0 0 34%; font-weight: 700; color: #1a2452; }
.kip-sc-value { flex: 1; min-width: 0; color: #374151; overflow-wrap: anywhere; }
.kip-sc-row--red .kip-sc-value { color: #b3261e; font-weight: 600; }
.kip-sc-error { font-size: 13px; color: #b3261e; line-height: 1.45; }
.kip-sc-geo {
  display: inline-block; margin-top: 12px; padding: 8px 14px; border-radius: 999px;
  background: linear-gradient(90deg, #fcb549, #e64644); color: #fff; font-weight: 700; font-size: 13px; text-decoration: none;
}
.kip-sc-geo:hover, .kip-sc-geo:focus-visible { filter: brightness(1.05); }
@media (max-width: 480px) {
  .kip-sc-row { flex-wrap: wrap; }
  .kip-sc-label { flex: 1 1 auto; }
  .kip-sc-value { flex: 1 1 100%; padding-left: 19px; }
}

/* Referenssit: nimi ja yhden rivin kuvaus, osoitteellinen rivi on linkki asiakkaan
   sivustolle. Nimi kantaa rivin, kuvaus on himmeämpi, jotta kolme riviä luetaan silmäillen. */
.kip-ref-list { list-style: none; margin: 0; padding: 0; }
.kip-ref-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid #f0f2f8; }
.kip-ref-row:first-child { border-top: 0; padding-top: 2px; }
.kip-ref-row:last-child { padding-bottom: 2px; }
.kip-ref-name { font-size: 14px; font-weight: 700; color: #1a2452; letter-spacing: -0.01em; overflow-wrap: break-word; }
.kip-ref-desc { font-size: 12.5px; color: #6b7280; line-height: 1.45; overflow-wrap: break-word; hyphens: auto; }
/* Linkki on inline, ei flex-rivi: pitka nimi rivittyy kapealla ruudulla ja ikoni seuraa
   viimeista sanaa sen sijaan etta jaisi yksin rivin oikeaan reunaan. */
.kip-ref-link { text-decoration: none; border-radius: 6px; }
/* Nimi on sama tummansininen kuin muu kortti: punainen luettiin varoitukseksi. */
.kip-ref-link .kip-ref-name { color: #1a2452; text-decoration: underline; text-decoration-color: rgba(26,36,82,0.28); text-underline-offset: 3px; }
.kip-ref-link:hover .kip-ref-name, .kip-ref-link:focus-visible .kip-ref-name { text-decoration-color: currentColor; }
/* display on pakko sanoa: sivustolla on yleissaanto svg { display: block }, joka pudottaisi
   ikonin omalle rivilleen heti kun nimi rivittyy kapealla ruudulla. */
.kip-ref-icon { display: inline-block; width: 13px; height: 13px; margin-left: 5px; vertical-align: -1px; color: #1a2452; opacity: 0.6; }
.kip-ref-link:hover .kip-ref-icon, .kip-ref-link:focus-visible .kip-ref-icon { opacity: 1; }
/* Kortin päätös: linkki kaikkiin referensseihin, jotta lista ei lopu kuin seinään. */
/* Rivi pikkukuvalla: kuva vasemmalla, nimi ja kuvaus oikealla. Kuvan koko on varattu etukäteen. */
.kip-ref-row--media { flex-direction: row; align-items: center; gap: 12px; }
.kip-ref-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.kip-ref-thumb { flex: 0 0 84px; width: 84px; height: 56px; border-radius: 8px; overflow: hidden; background: #eef1f9; border: 1px solid #e5e9f4; }
.kip-ref-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.4s ease; }
.kip-ref-thumb:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .kip-ref-thumb img { transition: none; }
  .kip-ref-thumb:hover img { transform: none; }
}
.kip-ref-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0f2f8; width: 100%; font-size: 13px; font-weight: 700; color: #1a2452; text-decoration: none; }
.kip-ref-more svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.2s ease; }
.kip-ref-more:hover span, .kip-ref-more:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
.kip-ref-more:hover svg, .kip-ref-more:focus-visible svg { transform: translateX(3px); }

/* Tuotekortti: yksi laatta per tuote, kuva vasemmalla, nimi ja hinta keskellä, nuoli oikealla.
   Laatat ovat saman levyisiä kuin muut kortit (sama sisennys kuin .kip-card) eivätkä vieritä
   vaakaan: teksti rivittyy (min-width: 0) ja kuvalle on varattu kiinteä koko. */
.kip-prod-list {
  list-style: none; padding: 0; margin: 6px 4px 2px 46px;
  display: flex; flex-direction: column; gap: 8px;
  animation: kipFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) forwards;
  font-family: 'Figtree',system-ui,sans-serif; color: #1a2452;
}
.kip-prod-tile {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border: 1.5px solid #e5e9f4; border-radius: 14px;
  box-shadow: 0 8px 22px -14px rgba(9,14,36,0.22);
  color: inherit; text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
a.kip-prod-tile:hover, a.kip-prod-tile:focus-visible { border-color: #1a2452; transform: translateY(-1px); }
a.kip-prod-tile:focus-visible { outline: 2px solid #1a2452; outline-offset: 2px; }
.kip-prod-thumb { flex: 0 0 84px; width: 84px; height: 63px; border-radius: 10px; overflow: hidden; background: #1b2130; }
.kip-prod-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kip-prod-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.kip-prod-name { font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em; overflow-wrap: break-word; }
.kip-prod-desc {
  font-size: 12px; color: #6b7280; line-height: 1.4; overflow-wrap: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.kip-prod-price { font-size: 14px; font-weight: 800; color: #166534; }
.kip-prod-vat { margin-left: 5px; font-size: 11px; font-weight: 600; color: #6b7280; white-space: nowrap; }
.kip-prod-go { flex: 0 0 auto; display: inline-flex; color: #9ca3af; transition: transform 0.2s ease, color 0.2s ease; }
.kip-prod-go svg { display: block; width: 18px; height: 18px; }
a.kip-prod-tile:hover .kip-prod-go, a.kip-prod-tile:focus-visible .kip-prod-go { color: #1a2452; transform: translateX(2px); }
@media (max-width: 480px) {
  .kip-prod-list { margin-right: 0; }
  .kip-prod-tile { gap: 10px; }
  .kip-prod-thumb { flex-basis: 72px; width: 72px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .kip-prod-list { animation: none; }
  .kip-prod-tile, .kip-prod-go { transition: none; }
  a.kip-prod-tile:hover, a.kip-prod-tile:focus-visible, a.kip-prod-tile:hover .kip-prod-go, a.kip-prod-tile:focus-visible .kip-prod-go { transform: none; }
}


/* ─── Opastettu kierros ───────────────────────────────────
   Ohjausrivi on osa keskustelua, joten se noudattaa chip-rivien sisennystä. Napit ovat
   oikeita painikkeita näkyvällä tekstillä: kierrosta pitää voida ajaa näppäimistöllä. */
.kip-tour-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-left: 44px; padding-right: 10px; margin-top: 10px;
  animation: kipFadeUp 0.25s ease forwards;
}
.kip-tour-step {
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 700; color: #9ca3af;
  letter-spacing: 0.02em; margin-right: auto;
}
.kip-tour-btn {
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 8px 15px; border-radius: 20px; border: 1.5px solid transparent;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
}
.kip-tour-btn--main { background: #1a2452; border-color: #1a2452; color: #fff; }
.kip-tour-btn--main:hover { background: #e64644; border-color: #e64644; transform: translateY(-1px); }
.kip-tour-btn--ghost { background: #f4f6fb; border-color: #e1e5f0; color: #1a2452; }
.kip-tour-btn--ghost:hover { background: #fff; border-color: #f58024; color: #e64644; }
.kip-tour-btn[disabled] { opacity: 0.45; cursor: default; transform: none; }
.kip-tour-btn[disabled]:hover { background: #f4f6fb; border-color: #e1e5f0; color: #1a2452; }

/* Askeleen kohta pysyy merkittynä koko askeleen ajan. Pulssi (.kip-pulsing) kertoo siirtymän,
   tämä kertoo missä ollaan, kunnes kierros etenee tai päättyy. */
.kip-tour-spot {
  outline: 2px solid rgba(245, 128, 36, 0.75);
  outline-offset: 6px;
  border-radius: 16px;
  scroll-margin-top: 100px;
}
/* Kierroksen otsikko ensimmäisessä kuplassa: kertoo mihin kävijä lähti mukaan. */
.kip-tour-title {
  display: block;
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #9ca3af; margin-bottom: 5px;
}
/* Kumppanipaneeli vie oikean reunan, joten vieritetty kohta jätetään sen viereen. Sama luku
   kuin asentomoduulin paneelin leveydessä (assets/js/kipina-widget-layout.js). */
body.kip-companion-open .kip-pulsing,
body.kip-companion-open .kip-tour-spot { scroll-margin-right: 420px; }
@media (prefers-reduced-motion: reduce) {
  .kip-tour-controls { animation: none; }
  .kip-tour-btn:hover { transform: none; }
}