/*
  Rajakuitu Oy — asiointiavustajan tyylit.
  Kaikki luokat "rkc-" -etuliitteellä (Rajakuitu Chat/Chatbot-korvike),
  jotta tämä ei voi koskaan törmätä Kadence-teeman, muiden lisäosien
  tai esim. saatavuuskartta-widgetin (rk-*) tyylien kanssa, jos ne
  ovat samalla sivulla.

  Ei Google Fontsia (sama tietosuojaperiaate kuin muualla projektissa)
  — käytetään järjestelmäfontteja.
*/

.rkc-widget{
  --rkc-primary:#123A5C;
  --rkc-primary-light:#1E5C8C;
  --rkc-accent:#0E8C82;
  --rkc-bg:#F5F8FA;
  --rkc-surface:#FFFFFF;
  --rkc-surface-alt:#EEF3F6;
  --rkc-ink:#152431;
  --rkc-ink-muted:#3F5364;
  --rkc-border:#C9D4DC;
  --rkc-focus:#0B5FFF;
  --rkc-danger:#B3261E;
  --rkc-danger-bg:#FBE6E4;
  --rkc-success:#1E7A4C;
  --rkc-success-bg:#E3F3EA;
  --rkc-radius:10px;
  --rkc-shadow:0 8px 32px rgba(18,58,92,0.22);

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.rkc-widget *{box-sizing:border-box;}

/* ---------- Demo-sivun kehys (ei osa oikeaa widgettiä) ---------- */
.rkc-demo-page{
  max-width:640px; margin:60px auto; padding:0 20px;
  font-family: system-ui, sans-serif; color:#152431;
}

/* ---------- Avausnappi ---------- */
.rkc-trigger{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9998;
  display:flex; align-items:center; gap:8px;
  background:var(--rkc-primary);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:14px 20px;
  font-size:15px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  box-shadow:var(--rkc-shadow);
}
.rkc-trigger:hover{background:var(--rkc-primary-light);}
.rkc-trigger__icon{font-size:18px;}

/* ---------- Ylivalotus + dialogi ---------- */
.rkc-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(15,25,35,0.45);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.rkc-overlay[hidden]{display:none;}

.rkc-dialog{
  background:var(--rkc-surface);
  border-radius:var(--rkc-radius);
  box-shadow:var(--rkc-shadow);
  width:100%;
  max-width:420px;
  max-height:min(640px, 88vh);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.rkc-dialog__header{
  background:var(--rkc-primary);
  color:#fff;
  padding:16px 44px 16px 20px;
  position:relative;
  flex-shrink:0;
}
.rkc-dialog__eyebrow{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:#9FD2E8; font-weight:700; margin:0 0 4px;
}
.rkc-dialog__title{font-size:17px; font-weight:800; margin:0; color:#fff;}

.rkc-close{
  position:absolute; top:14px; right:14px;
  background:rgba(255,255,255,0.15);
  border:none; color:#fff; width:30px; height:30px; border-radius:50%;
  cursor:pointer; font-size:15px; line-height:1;
}
.rkc-close:hover{background:rgba(255,255,255,0.28);}

.rkc-dialog__body{
  padding:18px 20px 20px;
  overflow-y:auto;
  flex:1;
}

/* Näppäimistöfokus näkyvä kaikkialla (WCAG 2.1 AA 2.4.7) */
.rkc-widget button:focus-visible,
.rkc-widget input:focus-visible,
.rkc-widget select:focus-visible,
.rkc-widget textarea:focus-visible,
.rkc-widget a:focus-visible{
  outline:3px solid var(--rkc-focus);
  outline-offset:2px;
}

/* ---------- Valikkonapit ---------- */
.rkc-menu{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.rkc-menu__btn{
  width:100%;
  text-align:left;
  background:var(--rkc-surface-alt);
  border:1px solid var(--rkc-border);
  color:var(--rkc-ink);
  padding:12px 14px;
  border-radius:8px;
  font-size:14.5px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
}
.rkc-menu__btn:hover{background:#E3EDF2;}

.rkc-back{
  background:none; border:none; color:var(--rkc-primary);
  font-family:inherit; font-size:13.5px; font-weight:700;
  cursor:pointer; padding:0; margin-bottom:12px;
  display:flex; align-items:center; gap:4px;
}
.rkc-back:hover{text-decoration:underline;}

/* ---------- Infosisältö ---------- */
.rkc-info p{font-size:14.5px; line-height:1.55; color:var(--rkc-ink); margin:0 0 12px;}
.rkc-info a{color:var(--rkc-primary); font-weight:600;}
.rkc-info__link-btn{
  display:inline-block;
  background:var(--rkc-primary);
  color:#fff !important;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  padding:9px 14px;
  border-radius:6px;
  margin-top:4px;
}
.rkc-info__link-btn:hover{background:var(--rkc-primary-light);}

/* ---------- Lomakkeet ---------- */
.rkc-field{margin-bottom:14px;}
.rkc-field label{
  display:block; font-size:13px; font-weight:600; color:var(--rkc-ink);
  margin-bottom:4px;
}
.rkc-field .rkc-optional{font-weight:400; color:var(--rkc-ink-muted);}
.rkc-field input, .rkc-field select, .rkc-field textarea{
  width:100%;
  font-family:inherit;
  font-size:14.5px;
  padding:9px 10px;
  border:1px solid var(--rkc-border);
  border-radius:6px;
  background:var(--rkc-surface);
  color:var(--rkc-ink);
}
.rkc-field textarea{resize:vertical; min-height:70px;}
.rkc-field-error{
  font-size:12.5px; color:var(--rkc-danger); margin-top:4px; display:none;
}
.rkc-field.has-error input,
.rkc-field.has-error select,
.rkc-field.has-error textarea{
  border-color:var(--rkc-danger);
}
.rkc-field.has-error .rkc-field-error{display:block;}

/* Honeypot-kenttä: piilotettu näkyvästi mutta löytyy DOMista botteja
   varten. display:none jättäisi sen osan ruudunlukijaohjelmista pois
   (mikä on tässä tarkoituskin), mutta ks. avustaja.js — kenttää ei
   koskaan pakoteta täytettäväksi eikä sen puuttumisesta rangaista
   näppäimistö-/ruudunlukijakäyttäjää, koska he eivät koskaan näe tai
   täytä sitä bottien tapaan. */
.rkc-honeypot{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

.rkc-submit-row{display:flex; justify-content:flex-end; margin-top:6px;}
.rkc-submit-btn{
  background:var(--rkc-primary);
  color:#fff;
  border:none;
  font-family:inherit;
  font-size:14.5px;
  font-weight:700;
  padding:10px 18px;
  border-radius:6px;
  cursor:pointer;
}
.rkc-submit-btn:hover{background:var(--rkc-primary-light);}
.rkc-submit-btn:disabled{opacity:.6; cursor:wait;}

.rkc-form-error{
  background:var(--rkc-danger-bg);
  color:#6B211B;
  border:1px solid #E3A8A1;
  border-radius:6px;
  padding:10px 12px;
  font-size:13.5px;
  margin-bottom:14px;
}

/* ---------- Kiitos-näkymä ---------- */
.rkc-success{
  text-align:center;
  padding:12px 0 4px;
}
.rkc-success__icon{
  font-size:36px; margin-bottom:10px; display:block;
}
.rkc-success h3{font-size:16px; color:var(--rkc-primary); margin:0 0 8px;}
.rkc-success p{font-size:14px; color:var(--rkc-ink-muted); margin:0 0 16px;}

@media (max-width:480px){
  .rkc-overlay{padding:0; align-items:flex-end;}
  .rkc-dialog{max-width:100%; max-height:92vh; border-radius:14px 14px 0 0;}
  .rkc-trigger{right:14px; bottom:14px; padding:12px 16px; font-size:14px;}
}