/* Hingega kodu — Liveni veebidisain (kandiline, lame, must nupp, punane aktsent) */
@font-face { font-family: "Freigeist"; src: url("fonts/Freigeist-Bold.otf") format("opentype"); font-weight: 700; }

:root {
  --c-black:#000; --c-white:#fff;
  --c-red:#FF3D60; --c-suveohtu:#EDF4FF; --c-panel:#F6FAFF;
  --c-border:#EAEEF3; --c-placeholder:#9398A4; --c-disabled:#F2F2F3;
  --font-display:"Freigeist","Montserrat",sans-serif;
  --font-body:"Roboto","Helvetica Neue",Arial,sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--c-suveohtu); color:#000; font-family:var(--font-body); font-size:16px; line-height:32px; }
h1,h2,h3 { font-family:var(--font-display); font-weight:700; margin:0 0 16px; }
h1 { font-size:40px; line-height:56px; letter-spacing:1px; }
h2 { font-size:24px; line-height:40px; }

.pais { padding:24px 0 0; }
.pais-sisu { max-width:911px; margin:0 auto; padding:0 24px; display:flex; align-items:baseline; gap:16px; }
.logo { height:28px; }
.logo-tekst { font-family:var(--font-display); font-size:24px; }
.pais-alam { font-size:14px; line-height:20px; color:#000; }

main { max-width:911px; margin:0 auto; padding:24px 24px 64px; }
.ekraan { display:none; }
.ekraan.aktiivne { display:block; }

.kaart { background:#fff; border:1px solid var(--c-border); padding:40px; margin-top:16px; }
.kaart.intro { text-align:left; }
.suur { font-family:var(--font-body); font-weight:300; font-size:20px; line-height:36px; margin:0 0 16px; }
.vaike { font-size:14px; line-height:20px; color:#000; margin:0 0 24px; }

.btn { display:inline-flex; align-items:center; justify-content:center; border-radius:0;
  font-family:var(--font-body); font-weight:700; font-size:16px; line-height:24px;
  letter-spacing:.5px; white-space:nowrap; padding:12px 40px; cursor:pointer;
  background:#000; color:#fff; border:1px solid #000; box-shadow:none; }
.btn:hover { border-width:2px; }
.btn--outline { background:transparent; color:#000; }
.btn:disabled { opacity:.32; background:var(--c-disabled); color:#000; cursor:default; }

.nav { display:flex; justify-content:space-between; gap:16px; margin-top:24px; }

.edenemine { height:4px; background:#fff; border:1px solid var(--c-border); }
.edenemine-riba { height:100%; background:var(--c-red); width:0%; transition:width .2s ease; }

.osa-silt { font-size:13px; line-height:16px; letter-spacing:1px; text-transform:uppercase; color:var(--c-placeholder); margin-bottom:8px; font-weight:600; }
.kysimus-tekst { margin-bottom:8px; }
.abitekst { font-size:14px; line-height:22px; color:var(--c-placeholder); margin:0 0 20px; }

/* Valikukaardid — ainus 8px raadiusega element; valitud = punane ääris */
.valikud { display:flex; flex-direction:column; gap:12px; }
.valik { border:1px solid var(--c-border); border-radius:8px; background:#fff; padding:14px 18px;
  cursor:pointer; line-height:26px; display:flex; gap:12px; align-items:flex-start; }
.valik:hover { border-color:#000; }
.valik.valitud { border:2px solid var(--c-red); padding:13px 17px; }
.valik .taht { font-weight:700; font-family:var(--font-body); flex:0 0 auto; }

/* Pildivalikud + placeholderid */
.pildivalikud { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pildivalik { border:1px solid var(--c-border); border-radius:8px; background:#fff; cursor:pointer; overflow:hidden; }
.pildivalik.valitud { border:2px solid var(--c-red); }
.pilt-placeholder { aspect-ratio:4/3; background:var(--c-panel); border-bottom:1px dashed var(--c-placeholder);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:16px;
  color:var(--c-placeholder); font-size:13px; line-height:20px; }
.pildivalik .allkiri { padding:12px 16px; line-height:24px; }
.pildivalik .allkiri b { display:block; }
.pildivalik .allkiri span { font-size:14px; line-height:22px; }

/* Sõnapilv (Q9) */
.sonad { display:flex; flex-wrap:wrap; gap:12px; }
.sona { border:1px solid var(--c-border); border-radius:0; background:#fff; padding:6px 18px; cursor:pointer; line-height:24px; }
.sona:hover { border-color:#000; }
.sona.valitud { border:2px solid var(--c-red); padding:5px 17px; }

/* Vormiväljad */
label.silt { display:block; font-size:14px; line-height:16px; margin:16px 0 6px; }
.input { width:100%; background:#fff; border:1px solid var(--c-border); border-radius:0;
  padding:10px 16px; font-family:var(--font-body); font-size:14px; line-height:28px; color:#000; }
.input::placeholder { color:var(--c-placeholder); }
.input:focus { border:2px solid var(--c-red); outline:none; padding:9px 15px; }

.mark { display:flex; gap:8px; align-items:flex-start; margin-top:16px; cursor:pointer; font-size:14px; line-height:22px; }
.mark input { width:24px; height:24px; accent-color:#000; border-radius:0; flex:0 0 auto; }

.viga { color:var(--c-red); font-size:12px; line-height:16px; margin-top:8px; display:none; }
.viga.nahtav { display:block; }

.jalus { max-width:911px; margin:0 auto; padding:0 24px 40px; font-size:14px; color:#000; }

@media (max-width:640px) {
  h1 { font-size:32px; line-height:44px; }
  .kaart { padding:24px; }
  .pildivalikud { grid-template-columns:1fr; }
  .nav { flex-direction:row; }
  .btn { padding:12px 24px; }
}