/* ---- scoped jen pro #login ---- */
/* Tabs underline bar */
#login .tabs { position: relative; }
#login .tabs .bar{
    position:absolute; bottom:-2px; left:0;
    width:50%; height:2px; border-radius:9999px;
    background:linear-gradient(90deg, rgb(245 158 11), rgb(252 211 77));
    transform:translateX(0%); transition:transform .28s ease;
}
/* Přesun underline doprava pro "vedoucí" */
#role-vedouci:checked ~ .tabs .bar{ transform:translateX(100%); }

/* Aktivní label */
#role-rodic:checked   ~ .tabs label[for="role-rodic"],
#role-vedouci:checked ~ .tabs label[for="role-vedouci"]{
    color:#0f172a; /* slate-900 */
}

/* Form panes – swap (slide + fade + scale) */
#login .forms > form{
    display:none; opacity:0; transform:translateX(14px) scale(.985);
    transition:opacity .28s ease, transform .28s ease;
}
#role-rodic:checked   ~ .forms .pane-rodic{   display:block; opacity:1; transform:none; }
#role-vedouci:checked ~ .forms .pane-vedouci{ display:block; opacity:1; transform:none; }

/* pocit směru: neaktivní panel mírně proti směru */
#role-rodic:checked   ~ .forms .pane-vedouci{ transform:translateX(-14px) scale(.985); }
#role-vedouci:checked ~ .forms .pane-rodic{   transform:translateX(14px)  scale(.985); }

/* Krátký pulse CTA po přepnutí */
@keyframes btnPulse{ 0%{filter:brightness(1.06)} 100%{filter:brightness(1)} }
#role-rodic:checked   ~ .forms .pane-rodic  .cta,
#role-vedouci:checked ~ .forms .pane-vedouci .cta{ animation:btnPulse .28s ease-out; }

     /* scoped jen pro #faq */
 #faq details {
     border: 1px solid rgb(226 232 240); /* slate-200 */
     border-radius: 0.75rem; /* xl */
     background: white;
     padding: 0.75rem 1rem;
     transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
 }
#faq details:hover { border-color: rgb(252 211 77); }           /* amber-300 */
#faq details[open] {
    background: rgb(255 251 235);                                 /* amber-50 */
    border-color: rgb(245 158 11);                                 /* amber-500 */
    animation: faqFlash .3s ease;
    box-shadow: 0 0 0 3px rgba(245,158,11,.15);                    /* jemný ring */
}
@keyframes faqFlash {
    from { box-shadow: 0 0 0 0 rgba(245,158,11,.0); }
    to   { box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
}
#faq summary {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; list-style: none; outline: none;
    font-weight: 600; color: rgb(15 23 42);                        /* slate-900 */
}
#faq summary::-webkit-details-marker { display: none; }
#faq .answer { color: rgb(71 85 105); line-height: 1.6; }        /* slate-600 */
#faq .chev { width: 20px; height: 20px; transition: transform .2s ease; opacity: .9; }
#faq details[open] .chev { transform: rotate(180deg); }