/* =====================================================================
   Kunskapsstjärnan – knapparna på menykorten (info, uppläsning, flagga)
   css/ks-cardicons.css   (laddas av php/footer.php, tillsammans med
   js/ks-cardicons.js som byter ℹ och 🔊 mot SVG-ikoner)

   Knapparna ritas av menysidorna som <span class="icon"> i .kr-icons.
   Skriptet ger dem klassen .ks-ki, så den här stilen gäller bara de
   uppgraderade knapparna – en sida utan skriptet ser ut som förut.
   Glasknapp: ljus kant, mjuk reflex uppifrån och skugga, så att den syns
   på alla kortfärger (guld, blå, lila, röd, magenta, turkos).
   ===================================================================== */
.kr-card .kr-icons .icon.ks-ki {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 0;
    line-height: 0;
    background:
        radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,.42) 0%, rgba(255,255,255,.10) 48%, rgba(0,0,0,.16) 100%),
        rgba(15, 18, 40, .34);
    border: 1.5px solid rgba(255,255,255,.55);
    box-shadow:
        0 6px 14px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.55),
        inset 0 -4px 8px rgba(0,0,0,.18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.kr-card .kr-icons .icon.ks-ki:hover {
    transform: translateY(-2px) scale(1.07);
    background-color: rgba(255,255,255,.14);
    box-shadow:
        0 10px 20px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.7),
        inset 0 -4px 8px rgba(0,0,0,.14);
}
.kr-card .kr-icons .icon.ks-ki:active { transform: scale(.94); }
.kr-card .kr-icons .icon.ks-ki svg {
    width: 24px;
    height: 24px;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.45));
}
.kr-card .kr-icons .icon.ks-ki-info svg { width: 22px; height: 22px; }
.kr-card .kr-icons .icon.ks-ki-flagga .flag-icon {
    width: 24px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,.45);
}

/* Uppläsning pågår: ljudvågorna pulserar, knappen lyser lite */
.kr-card .kr-icons .icon.ks-ki-talar {
    background-color: rgba(255,255,255,.22);
    box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 6px 14px rgba(0,0,0,.32);
}
.ks-ki-talar .ks-vag1 { animation: ksKiVag .9s ease-in-out infinite; }
.ks-ki-talar .ks-vag2 { animation: ksKiVag .9s ease-in-out .3s infinite; }
@keyframes ksKiVag { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* Barnkorten i popupen är mindre */
#popupChildrenContainer .kr-card .kr-icons .icon.ks-ki { width: 36px; height: 36px; }
#popupChildrenContainer .kr-card .kr-icons .icon.ks-ki svg { width: 19px; height: 19px; }
#popupChildrenContainer .kr-card .kr-icons .icon.ks-ki-flagga .flag-icon { width: 18px; }
@media (max-width: 640px) {
    .kr-card .kr-icons .icon.ks-ki { width: 40px; height: 40px; }
    .kr-card .kr-icons .icon.ks-ki svg { width: 21px; height: 21px; }
    #popupChildrenContainer .kr-card .kr-icons .icon.ks-ki { width: 32px; height: 32px; }
    #popupChildrenContainer .kr-card .kr-icons .icon.ks-ki svg { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .kr-card .kr-icons .icon.ks-ki { transition: none; }
    .ks-ki-talar .ks-vag1, .ks-ki-talar .ks-vag2 { animation: none; opacity: 1; }
}