*/
overflow:hidden;
}
/* barvni trak na vrhu kartice prek h3 (brez dodajanja markupa) */
.main .aktivnost > h3, .main .zeleno > h3, .main .zaprto > h3{
border-top:8px solid var(--cyan); margin:0; padding:12px 14px 2px; font-size:1.25em;
}
/* varstvo = rumeni trak (data-varstvo ostane skozi vsa stanja) */
.main [data-varstvo="1"] > h3{ border-top-color:var(--yellow); }
.main .prijavatext{ margin-left:0; padding:2px 14px 12px; }
.main .kratekopis{ font-size:0.9em; color:var(--ink-soft); }
.datum{ color:var(--cyan-dark); }
/* izbrano = zeleno, polno/nezdružljivo = rdeče (pointer-events:none ostane iz osnove) */
.main .zeleno{ background:#eef8e1 !important; }
.main .zaprto{ background:#fde3ef !important; opacity:0.9; }
/* večji checkbox = boljši tap target na telefonu */
.main .aktivnost input[type=checkbox], .main .zeleno input[type=checkbox]{
width:22px; height:22px; accent-color:var(--green); vertical-align:-4px; margin-right:4px;
}
/* ---------- polja obrazca ---------- */
input{ font-family:"Nunito"; border:2px solid #cfdde6; border-radius:10px; padding:9px 11px; }
input:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyan-soft); }
input:required{ background:#ffc7c7; } /* svetlo rdeča = obvezno polje (kot pravi navodilo) */
/* ---------- razporeditev polj: label + polje navpično centrirano ----------
#obrazec > ul:first-of-type = prva
v obrazcu (polja); druga so izjave. */
#obrazec > ul:first-of-type{
display:grid; grid-template-columns:45% 1fr;
column-gap:14px; row-gap:10px; align-items:center;
padding:0; margin:14px 0;
}
#obrazec > ul:first-of-type .kaj{ float:none; width:auto; text-align:right; padding-right:0; }
#obrazec > ul:first-of-type .input{ margin:0; }
#obrazec > ul:first-of-type .input input{ width:100%; max-width:360px; box-sizing:border-box; }
#obrazec > ul:first-of-type .obvescanje{ grid-column:1 / -1; } /* checkboxi čez obe koloni */
@media (max-width:600px){
#obrazec > ul:first-of-type{ grid-template-columns:1fr; row-gap:4px; }
#obrazec > ul:first-of-type .kaj{ text-align:left; padding-top:6px; }
}
/* ---------- gumb za oddajo (ima inline slog → !important) ---------- */
input[type=submit][name="prijavnica"]{
font-family:"Baloo 2" !important; font-weight:700 !important; font-size:1.15em; color:#fff !important;
background:var(--pink) !important; border:2px solid var(--pink-dark) !important;
border-radius:14px !important; box-shadow:4px 4px 0 var(--pink-dark);
padding:14px 22px !important; cursor:pointer;
}
input[type=submit][name="prijavnica"]:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--pink-dark); }
/* ---------- "NI VEČ PROSTIH MEST" naj sledi znamki ---------- */
.ni-aktivna{ color:var(--pink-dark); }
/* ---------- termin kot EN panel (naslov + vsi dogodki v skupnem okvirju) ----------
Markup že ovije vsak termin v z
in karticami znotraj. Tu iz tega naredimo en obrobljen panel:
cyan glava na vrhu, dogodki kot vrstice znotraj (brez lastnih okvirjev). */
.main .poc-obdobje{
border:2px solid var(--ink); border-radius:14px; box-shadow:4px 4px 0 var(--ink);
overflow:hidden; margin:22px 0;
}
.main .poc-obdobje .obdobje{ /* naslov termina = glava panela, čez vrh */
margin:0; border:0; border-radius:0; box-shadow:none; padding:10px 16px;
}
.main .poc-obdobje .aktivnost,
.main .poc-obdobje .zeleno,
.main .poc-obdobje .zaprto{ /* dogodki = vrstice, ločene z odmaknjeno cyan črto */
border:0; border-radius:0; box-shadow:none; margin:0; position:relative;
}
.main .poc-obdobje .aktivnost::after,
.main .poc-obdobje .zeleno::after,
.main .poc-obdobje .zaprto::after{
content:''; position:absolute; left:16px; right:16px; bottom:0; height:2px; background:var(--cyan);
}
.main .poc-obdobje > div:last-child::after{ display:none; } /* zadnji brez črte */
.main .poc-obdobje .aktivnost > h3,
.main .poc-obdobje .zeleno > h3,
.main .poc-obdobje .zaprto > h3{ border-top:0; padding-top:12px; } /* trak na kartici znotraj ni potreben */
/* ---------- navpični ritem + poravnava ikon/številk znotraj kartice ----------
Meta vrstica (datum, ura, cena/brezplačno): ikone in besedilo navpično
centrirano, enakomeren razmik vrstic. Kontaktna vrstica (.kratekopis) ostane. */
.main .prijavatext > p:not(.kratekopis){ margin:0; padding-top:6px; line-height:1.7; }
.main .prijavatext > p:not(.kratekopis) i,
.main .prijavatext > p:not(.kratekopis) strong,
.main .prijavatext > p:not(.kratekopis) .datum{ vertical-align:middle; }
.main .prijavatext p.kratekopis{ margin:0; padding-top:8px; line-height:1.45; }
/* ---------- izmenjava barv terminov (cyan / magenta) ----------
.poc-c = cyan (privzeto, že nastavljeno). .poc-m = magenta panel. */
.main .poc-obdobje.poc-m .obdobje{ background:var(--pink); }
.main .poc-obdobje.poc-m .aktivnost::after,
.main .poc-obdobje.poc-m .zeleno::after,
.main .poc-obdobje.poc-m .zaprto::after{ background:var(--pink); }