/* Jo vuokranneiden asiakaspalvelunumeron painike ja ikkuna (src/tenant-phone.mjs, public/vuokralaisnumero.js).
   Värit sivuston tokeneista (public/klik-tokens.css), joten ikkuna seuraa kumpaakin teemaa. */
.vln-open {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 14px;
  border: 2px solid var(--klik-primary, #0033cc); border-radius: 10px; background: var(--klik-surface, #fff);
  color: var(--klik-primary, #0033cc); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.3; text-align: left; cursor: pointer;
}
.vln-open[hidden] { display: none; }
.vln-open:hover { background: var(--klik-primary, #0033cc); color: var(--klik-on-primary, #fff); }
.vln-open:focus-visible, .vln-dialog :focus-visible { outline: 3px solid var(--klik-focus, #ffbf47); outline-offset: 2px; }

.vln-dialog {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0;
  border-radius: var(--klik-radius-lg, 16px); background: var(--klik-surface, #fff); color: var(--klik-text, #10204a);
  box-shadow: var(--klik-shadow-lg, 0 20px 50px rgb(0 0 0 / .25)); overflow-y: auto; overscroll-behavior: contain;
}
.vln-dialog::backdrop { background: rgb(0 31 122 / .5); }
html:has(.vln-dialog[open]), html:has(.vln-dialog[open]) body { overflow: hidden; }
.vln-inner { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px 20px 22px; }
.vln-inner h2 { margin: 0; padding-right: 44px; font-size: 21px; line-height: 1.25; color: var(--klik-ink, #001f7a); }
.vln-inner h2:focus { outline: none; }
.vln-close {
  position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 2px solid var(--klik-line, #d6dcef); border-radius: 999px;
  background: var(--klik-surface, #fff); color: var(--klik-ink, #001f7a); font-size: 24px; line-height: 1; cursor: pointer;
}
.vln-close:hover { border-color: var(--klik-primary, #0033cc); color: var(--klik-primary, #0033cc); }
.vln-lead, .vln-note, .vln-hint { margin: 0; line-height: 1.5; }
.vln-lead { font-size: 15.5px; }
.vln-note, .vln-hint { color: var(--klik-muted, #4b5878); font-size: 13.5px; }
.vln-note a { color: inherit; }
[data-vln-form] { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.vln-field { display: flex; flex-direction: column; gap: 6px; }
.vln-field label { font-weight: 700; font-size: 15px; }
.vln-field input {
  width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px; border: 2px solid var(--klik-field-border, #8d97b5);
  border-radius: 10px; background: #fff; color: #10204a; font: inherit; font-size: 16px;
}
.vln-field input[aria-invalid="true"] { border-color: var(--klik-error, #b42318); }
.vln-field-error { margin: 0; color: var(--klik-error, #b42318); font-size: 14px; font-weight: 600; }
.vln-error {
  margin: 0; padding: 10px 12px; border: 1px solid var(--klik-error-line, #f4c3bd); border-radius: 10px;
  background: var(--klik-error-bg, #fdecea); color: var(--klik-error-ink, #5c1610); font-size: 14.5px; line-height: 1.45;
}
.vln-submit {
  min-height: 48px; padding: 12px 18px; border: 0; border-radius: 999px; background: var(--klik-primary, #0033cc);
  color: var(--klik-on-primary, #fff); font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
}
.vln-submit:hover { background: var(--klik-primary-hover, #002299); }
.vln-submit[disabled] { opacity: .7; cursor: progress; }
.vln-phone {
  display: block; padding: 14px 16px; border-radius: 12px; background: var(--klik-surface-alt, #f1f4fd);
  color: var(--klik-primary, #0033cc); font-size: 28px; font-weight: 800; letter-spacing: .01em; text-align: center; text-decoration: none;
}
.vln-phone:hover { text-decoration: underline; }
.vln-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.vln-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vln-dialog [hidden] { display: none !important; }
@media (max-width: 420px) {
  .vln-inner { padding: 20px 16px 18px; }
  .vln-phone { font-size: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  .vln-dialog[open] { animation: vln-in .15s ease-out; }
  @keyframes vln-in { from { opacity: 0; transform: translateY(8px); } }
}