/*
  APLIKACIJOS PRIEDAI prie prototipo CSS.

  Prototipo `medotd.css` NELIECIAMAS — jis yra kopija is dizainas/prototipas-v3.html,
  ir bet koks jo redagavimas panaikintu galimybe palyginti su originalu.
  Cia tik tai, ko prototipe nera, nes prototipas neturi veikiancios aplikacijos:
  validacijos klaidos, tikra prisijungimo forma landing viduje ir mobilus
  navigacijos dublis.
*/

.klaidos{
  background:#fdecec;border:1px solid #d64545;color:#a32020;
  border-radius:10px;padding:11px 14px;margin:0 auto 16px;max-width:420px;
  font-size:13.5px;text-align:left;
}
.klaidos ul{margin:0;padding-left:18px}

/* Tikra forma landing centre — vietoj prototipo CTA poros. */
.auth-forma{max-width:420px;margin:0 auto}
.auth-forma .fld{margin-bottom:13px;text-align:left}
.auth-forma .btn{width:100%}
.auth-forma .apacia{margin-top:14px;font-size:13.5px;color:var(--mut)}

/* Registracijos forma platesne: prototipe laukai eina poromis. */
.auth-forma.plati{max-width:560px}

/*
  MOBILUS NAVIGACIJOS DUBLIS.
  Prototipo @media slepia `.mainnav`, o virsutines navigacijos punktu kaires
  meniu neturi — telefone jie taptu nepasiekiami. Todel tie patys punktai su
  tais paciais marsrutais rodomi kaires juostoje TIK siaurame ekrane.
*/
.tik-mobilus{display:none}
@media (max-width:1080px){
  .tik-mobilus{display:block}
}

/*
  ROLES kaip radio laukai (prototipe — <button> su JS).
  Forma privalo veikti be JS, todel busena ateina is :checked, o ne is klases.
*/
.roles .role input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.roles .role:has(input:checked){border-color:var(--green);background:var(--green-t);color:var(--green-d)}
.roles .role:has(input:checked) .ic{color:var(--green)}
.roles .role:focus-within{outline:2px solid var(--blue);outline-offset:2px}

/* Papildomi laukai pagal role — prototipo „Additional" bloko atitikmuo. */
.papildomai{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:14px}
.papildomai-antraste{font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mut2);margin-bottom:9px}
.pastaba{font-size:12.5px;color:var(--mut)}

/* Vidiniame karkase mygtukas-nuoroda turi atrodyti kaip mygtukas. */
.btn-profile{margin-top:12px}
.card.menu a.on{background:var(--green-t);color:var(--green-d)}

/*
  Mygtukai-nuorodos sonineje juostoje. Prototipo `.btn` neturi paddingo —
  jis ten nurodomas prie kiekvieno panaudojimo; cia surenkam i viena vieta.
*/
.card.member .btn,
.card.profile .btn-profile,
form .btn-out{padding:11px 14px;width:100%}

/*
  LAUKAI, KURIU PROTOTIPE NERA.
  Prototipas stilizuoja tik `.fld input` ir `.fld select` — jame nera nei
  textarea, nei failo lauko, nei isjungto lauko, nes prototipas neturi
  veikiancios profilio formos. Cia jie pritaikomi prie TOS PACIOS lauku kalbos
  (tie patys kraštai, spinduliai, sriftas), o ne piesiami is naujo.
*/
.fld textarea{
  width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;
  font:inherit;font-size:14.5px;background:#fff;color:var(--ink);resize:vertical;min-height:88px;
}
.fld input[type=file]{
  width:100%;height:auto;padding:10px 13px;background:#fff;
  border:1.5px dashed var(--line);border-radius:10px;font-size:13.5px;color:var(--mut);
}
.fld input[disabled]{background:var(--bg);color:var(--mut);cursor:not-allowed}
.fld input:focus,.fld textarea:focus,.fld select:focus{
  outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-t);
}
.fld .pastaba{margin-top:5px}

/* Informacinė žinutė (pvz. „nuoroda išsiųsta"). Prototipe atitikmens nėra. */
.zinute{
  background:var(--green-t);border:1px solid var(--green);color:var(--green-d);
  border-radius:10px;padding:11px 14px;margin-bottom:14px;font-size:13.5px;text-align:left;
}

/* Profilio antraštė vidiniame karkase — ta pati `.profile-top` kalba. */
.card .profile-top h3{font-size:17px}
.zenkliukas{
  display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;
  background:var(--blue-t);color:var(--blue-d);font-size:11.5px;font-weight:700;
}

/*
  AVATARO SUBMENIU (Manto nurodymas 2026-09-10).
  Prototipe avataras yra tik zenklas be meniu, todel visa tai — nauja, bet
  ta pacia kalba: .card krastai, spinduliai ir seselis.
*/
.avataro-meniu{position:relative;margin-left:4px}
.avataro-meniu .avatar{border:0;cursor:pointer;font-family:inherit;width:38px;height:38px;font-size:13px;
  background:linear-gradient(135deg,#39536b,#22384c)}
.avataro-meniu .avatar:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* Atidaryta busena matoma ir akimis, ne vien `aria-expanded`. */
.avataro-meniu .avatar[aria-expanded="true"]{box-shadow:0 0 0 3px var(--blue-t)}

.avataro-meniu .submeniu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:212px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:6px;text-align:left;
}
.submeniu-vardas{padding:9px 11px 10px;border-bottom:1px solid var(--line2);margin-bottom:6px}
.submeniu-vardas b{display:block;font-size:14px}
.submeniu-vardas span{font-size:12.5px;color:var(--mut)}
.submeniu-veiksmas{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font:inherit;font-size:14px;color:var(--ink);padding:10px 11px;border-radius:9px;
}
.submeniu-veiksmas:hover,.submeniu-veiksmas:focus-visible{background:var(--bg);outline:0}

/* Telefone submeniu neturi isstumti puslapio i sona. */
@media (max-width:520px){
  .avataro-meniu .submeniu{right:0;min-width:min(212px,calc(100vw - 32px))}
}

/*
  VIESAS PUSLAPIS: EMBLEMOS VIETOJE — TIKRA FORMA (Manto patikslinimas 2026-09-10).

  Emblema pasalinta, jos vieta atiteko formai. Aplinkines sesios korteles,
  features ir trust juosta lieka nepakitusios.
*/

/*
  VIESAS PUSLAPIS — TARPAI IR PROPORCIJOS (Manto kryptis 2026-09-10).

  Manto nurodymas buvo aiskus ir apie tai, ko NEDARYTI: „ne suspausk forma vien
  kad isliktu absoliucios korteliu pozicijos". Todel plotis parenkamas is grid'o,
  o ne is to, kiek vietos atsitiktinai liko tarp prototipo korteliu:

    hero plotis      1100 px
    forma            520 px (registracija 560 px)
    tarpas iki kortelu (1100 - 520)/2 - 236 + 16 = 60 px   (registracijai 50 px)

  Abu virsija prasytus 48 px. Korteles LIEKA visos sesios ir savo vietose —
  praplatinom lauka, ne susiaurinom forma.
*/

/* Antraste: 40 px desktop, 30 px ties 375. Gradientas lieka. */
.landing h1.landing-sveiki{
  font-size:30px;line-height:1.15;font-weight:700;color:#22303d;
}

/* Formos lizdas emblemos vietoje. */
.hero-centras{position:relative;z-index:2;width:min(440px,100%);margin:0 auto}
.hero-centras .auth-forma,
.hero-centras .auth-forma.plati{max-width:100%}
.hero-centras .welcome{margin-top:0}

/* VIENA kortele visam centrui — ne kiekvienam vaikui atskirai. */
.viesa-kortele{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);padding:24px;text-align:left;
}
.viesa-kortele .welcome{margin-top:0;margin-bottom:24px;text-align:center}
.viesa-kortele .welcome h2{font-size:22px}
.viesa-kortele .welcome p{margin-top:6px}
/* Lauku tarpai — 20 px; prototipo .fld duoda 13 px, cia formos kontekstas. */
.viesa-kortele .fld{margin-bottom:20px}
.viesa-kortele .f2{gap:20px}
.viesa-kortele .roles{margin-bottom:20px}
.viesa-kortele .auth{margin:0 auto;max-width:100%}
.viesa-kortele .apacia{margin-top:20px}

/*
  HERO AUKSTIS PRISITAIKO (ne fiksuotas 430, ne persidengimai).

  Sesios korteles anksciau buvo prikaltos prie pikseliniu `top` reiksmiu, todel
  auksciau uz 430 px isaugusiame hero jos butu susispietusios virsuje. Dabar ju
  vieta — PROCENTAIS nuo hero aukscio: prie 430 px jos atsistoja tiksliai ten,
  kur prototipe (6% = 26 px, 37% = 159 px, 68% = 292 px), o formai augant
  issidesto tolygiai.
*/
@media (min-width:981px){
  .landing h1.landing-sveiki{font-size:40px}

  /* Formos kortele desktop'e erdvesne (Manto kryptis: 32 px). */
  .viesa-kortele{padding:32px}

  /* Platesnis laukas, kad forma gautu vietos, o korteles liktu savo vietose. */
  .landing-inner{max-width:1160px}
  .hero{max-width:1100px;align-items:stretch;padding:26px 0;margin-top:56px}
  /*
    PLOTIS grazintas i ankstesni (Manto korekcija): prisijungimui 440, registracijai
    500. Platesnis laukas ir tarpai LIEKA — erdve aplink forma ateina is hero 1100
    px, ne is pacios formos platinimo.
  */
  .hero-centras{width:440px;align-self:center}
  .hero-centras.platus{width:500px}

  .hc1{top:6%}  .hc2{top:37%}   .hc3{top:68%}
  .hc4{top:8%}  .hc5{top:38.6%} .hc6{top:69.3%}
}

/* Siauriame ekrane prototipas jau padaro `.hero` stulpeliu — forma tampa pirma. */
@media (max-width:980px){
  .hero-centras{width:100%;order:-1}
  .hero{margin-top:48px}
}

/* Telefone kortele siauresne; `.f2` prototipas jau paverčia vienu stulpeliu. */
@media (max-width:520px){
  .viesa-kortele{padding:24px 20px}
}

/*
  TRUST JUOSTA (Manto korekcija 2026-09-10).

  Prototipe ji buvo `flex` su `gap:38px` ir `max-width:170px` — punktai gaudavo
  skirtinga ploti, o tekstas luzo kur pakliuvo. Dabar: PENKI VIENODO plocio
  stulpeliai, lygus aukstis ir kiekvieno tekstas po dvi eilutes (eilutes ateina
  is atskiru vertimo raktu, ne is atsitiktinio luzimo).

  Tai atskira apatine juosta, ne sesios hero korteles.
*/
.trust{
  display:grid;grid-template-columns:repeat(5,1fr);gap:20px;
  justify-content:stretch;align-items:stretch;
}
.trust .trust-punktas{
  display:flex;align-items:flex-start;gap:10px;
  max-width:none;text-align:left;font-size:12.5px;color:#40505f;
}
.trust .trust-punktas .ic{flex:none;margin-top:1px;color:var(--green)}
/* Dvi eilutes — ir tada, kai antroji trumpa: aukstis lieka vienodas. */
.trust-tekstas{display:flex;flex-direction:column;line-height:1.35;min-height:calc(2 * 1.35em)}

/* Telefone — vienas stulpelis; dvi eilutes islieka, nes jos yra zymejime. */
@media (max-width:760px){
  .trust{grid-template-columns:1fr 1fr;gap:16px}
}
@media (max-width:420px){
  .trust{grid-template-columns:1fr}
}

/*
  MOBILUS IsDESTYMAS (Manto korekcija 2026-09-10).

  Reikalavimas: telefone tikra forma turi stoveti IS KARTO po „Sveiki atvyke"
  antraste ir paantraste — PRIES Learn/Connect blokus.

  Kliutis: forma (`.hero-centras`) gyvena `.hero` viduje, o `.hero` yra PO
  `.features`. Perkelti ja zymejime reikstu antra formos vieta arba dubliuota
  sablona — abu netinka.

  Sprendimas be zymejimo keitimo: `.hero{display:contents}` panaikina PATI hero
  deze, o jo vaikai tampa tiesioginiais `.landing-inner` elementais. Tada eile
  sutvarkoma `order` reiksmemis. Desktop (>=981px) sito NELIECIA is viso.
*/
@media (max-width:980px){
  .landing-inner{display:flex;flex-direction:column;gap:0}

  .hero{display:contents}
  /* Zemelapis yra dekoracija, pozicionuota absoliuciai — be `.hero` dezes jis
     neturetu i ka remtis, todel telefone jo nerodom. */
  .hero-map{display:none}

  .landing-sveiki   { order:1 }
  .tagline          { order:2; margin-bottom:26px }
  .hero-centras     { order:3; width:100%; margin-bottom:34px }
  .features         { order:4; margin:0 0 26px }
  .hero-cards       { order:5; margin-bottom:8px }
  .trust            { order:6 }
  .kalbos           { order:7 }
}

/*
  TRUST JUOSTA TELEFONE — DU vienodo plocio stulpeliai (buvo vienas ties 420px).
  Penki punktai: du, du ir vienas; visi to paties plocio ir sulygiuoti.
*/
@media (max-width:420px){
  .trust{grid-template-columns:1fr 1fr;gap:14px 12px}
  .trust .trust-punktas{font-size:12px;gap:8px}
}

/*
  D4 APATINE JUOSTA — tik ≤980 px (ten prototipas daro viena stulpeli ir slepia .mainnav).
  Kaire juosta telefone dingsta: jos veikiantys punktai gyvena „Daugiau" lape. Darbalaukis nekeiciamas.
*/
.apatine-juosta,.daugiau-lapas:not([open]){display:none}
@media (max-width:980px){
  .grid>.col:first-child{display:none}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .apatine-juosta{
    display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px #16304712;
    padding:4px max(4px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));
  }
  .aj-it{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:52px;
    padding:4px 2px;border:0;border-top:2px solid transparent;background:none;color:#5b6b79;
    font:inherit;font-size:11px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;
  }
  .aj-it span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .aj-it .ic{width:22px;height:22px}
  .aj-it[aria-current=page],.aj-it.on{color:var(--green);border-top-color:var(--green)}
  .aj-kurti{color:var(--green-d)}
  .aj-kurti-ic{display:grid;place-items:center;width:30px;height:26px;border-radius:8px;background:var(--green);color:#fff}
  .aj-kurti-ic .ic{width:18px;height:18px}
  .aj-it:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:8px}
  .daugiau-lapas{
    margin:auto 0 0;width:100%;max-width:100%;max-height:85dvh;border:0;border-radius:18px 18px 0 0;padding:0;
    background:#fff;box-shadow:0 -10px 40px #0f233540;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .daugiau-lapas::backdrop{background:#0f233566}
  .dl-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 8px}
  .dl-head h2{font-size:17px}
  .dl-close{width:40px;height:40px;border:0;border-radius:50%;background:#edf3f7;color:#35586e;font-size:22px;cursor:pointer}
  .daugiau-lapas ul{list-style:none;padding:4px 10px 14px}
  .daugiau-lapas a{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 10px;border-radius:10px;color:var(--ink);font-size:15px;text-decoration:none}
  .daugiau-lapas a .ic{width:20px;height:20px;color:#5b6b79}
  .daugiau-lapas a[aria-current=page]{background:var(--green-t);color:var(--green-d)}
  .daugiau-lapas :is(a,button):focus-visible{outline:2px solid var(--blue);outline-offset:2px}
}