/* ==================================================================
   Kiddos Membership

   Elv: a bővítmény NEM ír felül tipográfiát. Betűméret, sormagasság,
   betűköz és félkövérség a témára tartozik – ha valamit ki kell emelni,
   az a markupban <strong>, nem itt egy font-weight.

   Itt csak az van, ami nélkül az elrendezés összeesne: rácsok, térközök,
   keretek, színek, és a kártyák konténer-alapú átrendezése.

   SZÍNEK
   Amire van a theme.json-ban értelmes preset, az onnan jön:
   primary, white, violet-light, text-primary, text-muted.

   A vesszős második érték tartalék: ha a bővítmény olyan oldalon fut,
   ahol a téma globális stílusai nem töltődnek be, a gomb enélkül
   háttér nélkül maradna – fehér szöveg fehéren, láthatatlanul.

   Az árnyékok is onnan jönnek: --wp--preset--shadow--md.

   Ami hexben maradt, arra nincs jó pár a palettában: a jelvények sötét
   szövegszínei, az értesítő doboz, a nagyon halvány
   felületek (#f8f5ff, #fcfaff) és a gomb hover-árnyalata.
   ================================================================== */

/* ------------------------------------------------------------------
   Másodlagos szövegek

   Az egyetlen betűméret az egész fájlban, és az sem saját érték: a téma
   theme.json-jából jövő "small" preset. Egy helyen, felsorolva – így
   látszik is, hogy pontosan mi számít apró betűnek.

   Ha a téma nem definiálná a preset-et, a szabály egyszerűen nem
   érvényesül, és a szöveg alapméretű marad – nem törik el semmi.
   ------------------------------------------------------------------ */

.kiddos-membership-hint,
.kiddos-account__subtitle,
.kiddos-account__muted,
.kiddos-badge,
.kiddos-meter__label,
.kiddos-stat__label,
.kiddos-stat__unit,
.kiddos-row__meta,
.kiddos-row__stat-label,
.kiddos-stat__caption,
.kiddos-card__meta,
.kiddos-side-card__meta,
.kiddos-hero__meta {
    font-size: var(--wp--preset--font-size--small);
}

/* ------------------------------------------------------------------
   Űrlapok
   ------------------------------------------------------------------ */

.kiddos-membership-form {
    display: grid;
    gap: 1rem;
}

.kiddos-membership-form label {
    display: grid;
    gap: .4rem;
}

/* A jelölőnégyzet a szöveg mellé, nem fölé. */
.kiddos-membership-check {
    grid-template-columns: auto 1fr;
    align-items: start;
}

/* ------------------------------------------------------------------
   Gombok
   ------------------------------------------------------------------ */

.kiddos-membership-button,
.kiddos-membership-form button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 48px; /* kényelmes érintőfelület */
    padding: .8rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--wp--preset--color--primary, #7444e4);
    color: var(--wp--preset--color--white, #fff);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.kiddos-membership-button:hover,
.kiddos-membership-form button:hover {
    background: #5b34c4;
    color: var(--wp--preset--color--white, #fff);
}

.kiddos-membership-button[disabled],
.kiddos-membership-form button[disabled] {
    opacity: .65;
    cursor: wait;
}

.kiddos-membership-button--ghost {
    background: transparent;
    border: 2px solid var(--wp--preset--color--primary, #7444e4);
    color: var(--wp--preset--color--primary, #7444e4);
}

/* ------------------------------------------------------------------
   Értesítés-doboz
   ------------------------------------------------------------------ */

.kiddos-membership-notice {
    margin: 1rem auto;
    padding: 1rem;
    border-radius: .8rem;
    background: #fff2cf;
    color: #563d00;
}

/* ------------------------------------------------------------------
   Vásárlás gomb ([kiddos_membership])

   Alapból csak a gomb jelenik meg, hogy a szerkesztőben megépített
   árszekció alá illeszthető legyen. Se háttér, se keret, se saját margó –
   a blokk-szerkesztő térközei érvényesülnek.
   ------------------------------------------------------------------ */

.kiddos-membership-buy--left {
    text-align: left;
}

.kiddos-membership-buy--center {
    text-align: center;
}

.kiddos-membership-buy--right {
    text-align: right;
}

/* Másodlagos információ – halványabb, de nem kisebb. */
.kiddos-membership-hint {
    margin: .6rem 0 0;
    opacity: .8;
}

.kiddos-membership-active {
    margin: 0;
    display: grid;
    gap: .25rem;
}

.kiddos-membership-plans {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #4a2673;
}

.kiddos-membership-plans__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.kiddos-membership-plan { position: relative; display: grid; align-content: start; gap: .75rem; padding: 1.5rem; border: 2px solid #eadfff; border-radius: 1.25rem; background: #fff; }
.kiddos-membership-plan--recommended { border-color: #f59e0b; background: linear-gradient(145deg, #fffaf0, #fff3d8); }
.kiddos-membership-plan__badge { position: absolute; top: -.75rem; right: 1rem; padding: .35rem .75rem; border-radius: 999px; background: #f59e0b; color: #4a2600; font-size: .8rem; font-weight: 800; }
.kiddos-membership-plan h3 { margin: 0; }
.kiddos-membership-plan__price { display: flex; align-items: baseline; gap: .4rem; margin: 0; }
.kiddos-membership-plan__price strong { color: #7444e4; font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1; }
.kiddos-membership-plan .kiddos-membership-button { width: 100%; margin-top: auto; }
.kiddos-membership-plan:not(.kiddos-membership-plan--recommended) .kiddos-membership-button {
    background: #fff;
    border: 2px solid #7444e4;
    color: #7444e4;
}
.kiddos-membership-plan:not(.kiddos-membership-plan--recommended) .kiddos-membership-button:hover {
    background: #f4f0ff;
    border-color: #5b34c4;
    color: #5b34c4;
}
.kiddos-membership-plans--active { display: flex; justify-content: space-between; gap: 1rem; }

@media (max-width: 680px) {
    .kiddos-membership-plans__grid { grid-template-columns: 1fr; }
    .kiddos-membership-plans--active { display: grid; }
}

/* ------------------------------------------------------------------
   Köszönőoldal
   ------------------------------------------------------------------ */

.kiddos-thankyou__meta {
    margin: .5rem 0 1rem;
}

.kiddos-thankyou__steps {
    margin: 0 0 1.5rem;
    padding-left: 1.2rem;
    display: grid;
    gap: .5rem;
}

.kiddos-thankyou .kiddos-membership-form {
    margin-top: 1rem;
}

/* ------------------------------------------------------------------
   Fiók-dashboard
   ------------------------------------------------------------------ */

.kiddos-account {
    display: grid;
    gap: 1.5rem;

    /* A csempesor a dashboard szélességéhez igazodik, nem a képernyőéhez. */
    container-type: inline-size;
    container-name: kiddos-account;
}

/* Egyetlen gyerek se feszíthesse szélesebbre a blokkot a rendelkezésre álló helynél. */
.kiddos-account > * {
    min-width: 0;
}

.kiddos-account .kiddos-icon {
    flex: none;
}

/*
 * Az Icons API-ból (wp_get_icon) érkező saját ikonoknak.
 *
 * A sanitizáló nem tesz fill="currentColor"-t a külső <svg>-re, ezért az
 * ilyen ikon alapból feketén jelenne meg a szövegszín helyett. A bővítmény
 * beépített ikonjai viszont vonalasak (fill="none", stroke="currentColor"),
 * rájuk ez a szabály elrontaná a rajzot – ezért kell a külön osztály.
 */
.kiddos-icon--filled {
    fill: currentColor;
}

/* Fejléc */

.kiddos-account__head {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
    justify-content: space-between;
}

.kiddos-account__title {
    margin: 0;
}

.kiddos-account__subtitle {
    margin: .35rem 0 0;
    color: var(--wp--preset--color--text-muted, #9ca3af);
}

/* Állapotjelvény */

.kiddos-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    white-space: nowrap;
}

.kiddos-badge .kiddos-icon {
    width: 18px;
    height: 18px;
}

/*
 * Jelvényszínek:
 *   zöld   = ingyenes fiók (rendben van, csak nem fizetős)
 *   narancs = prémium tag (kiemelt szint)
 *   rózsa  = lejár / lejárt (van teendő)
 *
 * A háttér a theme.json palettájából jön, a szövegszín sötét árnyalat
 * ugyanabból a családból, hogy a kontraszt biztosan meglegyen.
 */

.kiddos-badge--free {
    background: var(--wp--preset--color--mint, #d6f4eb);
    color: #065f46;
}

.kiddos-badge--active {
    background: var(--wp--preset--color--orange-light, #fed7aa);
    color: #7c2d12;
}

.kiddos-badge--soon {
    background: var(--wp--preset--color--rose-light, #fda4af);
    color: #7f1d1d;
}

/* Mérőcsík: a hozzáférés hátralévő része */

.kiddos-meter {
    margin-top: .75rem;
}

.kiddos-meter__track {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: var(--wp--preset--color--violet-light, #ede9fe);
    overflow: hidden;
}

.kiddos-meter__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--wp--preset--color--primary, #7444e4);
}

.kiddos-side-card--soon .kiddos-meter__track {
    background: var(--wp--preset--color--border-color, #fecdd3);
}

.kiddos-side-card--soon .kiddos-meter__fill {
    background: #e11d48;
}

.kiddos-meter__label {
    margin: .45rem 0 0;
    color: var(--wp--preset--color--text-muted, #9ca3af);
}

/* Szakaszok */

.kiddos-account__section {
    display: grid;
    gap: .9rem;
}

.kiddos-account__heading {
    margin: 0;
}

.kiddos-account__muted {
    margin: 0;
    color: var(--wp--preset--color--text-muted, #9ca3af);
}

/* ------------------------------------------------------------------
   Accordion

   A bővítmény ÖSSZES összecsukható paneljének közös alapja. Natív
   <details>, nincs hozzá JavaScript. A markupot egyetlen PHP-metódus
   állítja elő, így a megjelenés is egy helyen szabályozható.
   ------------------------------------------------------------------ */

.kiddos-accordion__toggle {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .9rem;
    border-radius: .9rem;
    cursor: pointer;
    /* A böngésző saját nyílhegye helyett a bal oldali ikon vezet. */
    list-style: none;
}

.kiddos-accordion__toggle::-webkit-details-marker {
    display: none;
}

.kiddos-accordion__toggle:hover,
.kiddos-accordion[open] > .kiddos-accordion__toggle {
    background: var(--wp--preset--color--violet-light, #ede9fe);
}

.kiddos-accordion__body {
    margin: .5rem 0 .75rem;
    padding: 1rem;
    border-radius: 1rem;
    background: var(--wp--preset--color--white, #fff);
    box-shadow: var(--wp--preset--shadow--md, 0 16px 40px -4px rgba(124, 58, 237, .18));
}

.kiddos-accordion__body > :first-child {
    margin-top: 0;
}

.kiddos-accordion__body > :last-child {
    margin-bottom: 0;
}

.kiddos-accordion__body .kiddos-membership-hint {
    margin-top: -.5rem;
}

/* A menü kártyáján belül a panel halvány felületet kap, nem újabb fehér lapot. */
.kiddos-accordion--menu > .kiddos-accordion__body {
    background: var(--wp--preset--color--violet-light, #ede9fe);
    box-shadow: none;
}

/* Kártyán belül a panel a kártya felületén ül, nem kap saját árnyékot. */
.kiddos-accordion--card > .kiddos-accordion__toggle {
    padding-left: 0;
    padding-right: 0;
}

.kiddos-accordion--card > .kiddos-accordion__toggle:hover,
.kiddos-accordion--card[open] > .kiddos-accordion__toggle {
    background: transparent;
    text-decoration: underline;
}

/* ------------------------------------------------------------------
   Kétoszlopos elrendezés

   Konténer-lekérdezés, nem képernyőszélesség: a téma tartalomsávja
   bármilyen széles lehet, a dashboard ahhoz igazodik.
   ------------------------------------------------------------------ */

.kiddos-account__grid {
    display: grid;
    gap: 1.5rem;
}

.kiddos-account__main,
.kiddos-account__side {
    display: grid;
    gap: 1.5rem;
    align-content: start;
    min-width: 0;
}

@container kiddos-account (min-width: 900px) {
    .kiddos-account__grid {
        grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    }
}

/* ------------------------------------------------------------------
   "Folytasd, ahol abbahagytad" kiemelt kártya
   ------------------------------------------------------------------ */

.kiddos-hero {
    display: grid;
    gap: 1.25rem;
    align-items: center;
    padding: 1.5rem;
    border-radius: 1.5rem;
    background: var(--wp--preset--color--violet-light, #ede9fe);    box-shadow: var(--wp--preset--shadow--md, 0 16px 40px -4px rgba(124, 58, 237, .18));
}

@container kiddos-account (min-width: 620px) {
    .kiddos-hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
    }
}

.kiddos-hero__title {
    margin: 0 0 1rem;
}

.kiddos-hero__game {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.25rem;
}

.kiddos-hero__name,
.kiddos-hero__meta {
    margin: 0;
}

.kiddos-hero__meta {
    color: var(--wp--preset--color--text-muted, #9ca3af);
}

.kiddos-hero__icon {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: .9rem;
    /* Beleférjen egészben – nem vágunk és nem nyújtunk. */
    object-fit: contain;
}

.kiddos-hero__icon--empty {
    display: grid;
    place-items: center;
    background: var(--wp--preset--color--white, #fff);
    color: var(--wp--preset--color--primary, #7444e4);
}

.kiddos-hero__art img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1.15rem;
}

.kiddos-hero--empty .kiddos-hero__art {
    display: grid;
    place-items: center;
    color: var(--wp--preset--color--primary, #7444e4);
}

/* ------------------------------------------------------------------
   Legutóbbi játékok – sorok
   ------------------------------------------------------------------ */

.kiddos-rows {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kiddos-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .5rem 1rem;
    align-items: center;
    padding: 1rem 1.15rem;
    border: 1px solid var(--wp--preset--color--violet-light, #ede9fe);
    border-radius: 1.15rem;
    background: var(--wp--preset--color--white, #fff);    box-shadow: var(--wp--preset--shadow--md, 0 16px 40px -4px rgba(124, 58, 237, .18));
}

/* Szélesebb helyen a számok egy sorba kerülnek a névvel. */
@container kiddos-account (min-width: 640px) {
    .kiddos-row {
        grid-template-columns: auto minmax(0, 1fr) repeat(2, auto) auto;
    }
}

.kiddos-row__thumb {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: .9rem;
    object-fit: contain;
}

.kiddos-row__thumb--empty {
    display: grid;
    place-items: center;
    background: var(--wp--preset--color--violet-light, #ede9fe);
    color: var(--wp--preset--color--primary, #7444e4);
}

.kiddos-row__main {
    min-width: 0;
}

.kiddos-row__name,
.kiddos-row__meta {
    margin: 0;
}

.kiddos-row__name a {
    text-decoration: none;
}

.kiddos-row__name a:hover {
    text-decoration: underline;
}

.kiddos-row__meta {
    color: var(--wp--preset--color--text-muted, #9ca3af);
}

.kiddos-row__stat {
    display: grid;
    gap: .1rem;
    white-space: nowrap;
}

.kiddos-row__stat-label {
    color: var(--wp--preset--color--text-muted, #9ca3af);
}


.kiddos-row__play {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem 1.1rem;
    border-radius: 999px;
    background: var(--wp--preset--color--primary, #7444e4);
    color: var(--wp--preset--color--white, #fff);
    text-decoration: none;
    white-space: nowrap;
}

.kiddos-row__play:hover {
    background: #5b34c4;
    color: var(--wp--preset--color--white, #fff);
}

/* ------------------------------------------------------------------
   Ajánlott játékok – kártyák
   ------------------------------------------------------------------ */

.kiddos-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kiddos-card {
    border: 1px solid var(--wp--preset--color--violet-light, #ede9fe);
    border-radius: 1.15rem;
    overflow: hidden;
    background: var(--wp--preset--color--white, #fff);    box-shadow: var(--wp--preset--shadow--md, 0 16px 40px -4px rgba(124, 58, 237, .18));
}

.kiddos-card__link {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: .75rem;
    text-decoration: none;
    color: inherit;
}

/*
 * Fix képmagasság: így a kártyák szövege egy vonalban indul, és a sor
 * rendezett marad. A "contain" miatt a kép nem vágódik és nem nyúlik –
 * eltérő arányú képnél inkább marad üres hely kétoldalt.
 */
.kiddos-card__image {
    display: block;
    width: 100%;
    height: 90px;
    object-fit: contain;
}

.kiddos-card__image--empty {
    display: grid;
    place-items: center;
    background: var(--wp--preset--color--violet-light, #ede9fe);
    color: var(--wp--preset--color--primary, #7444e4);
}

.kiddos-card__body {
    display: grid;
    gap: .25rem;
    align-content: start;
    padding: 0 1.15rem 1.15rem;
}

.kiddos-card__meta {
    color: var(--wp--preset--color--text-muted, #9ca3af);
}

.kiddos-card__link:hover .kiddos-card__title {
    text-decoration: underline;
}

/* ------------------------------------------------------------------
   Oldalsáv – kártyák és menü
   ------------------------------------------------------------------ */

.kiddos-side-card {
    display: grid;
    gap: .75rem;
    align-content: start;
    padding: 1.25rem;
    border-radius: 1.25rem;
    background: var(--wp--preset--color--violet-light, #ede9fe);    box-shadow: var(--wp--preset--shadow--md, 0 16px 40px -4px rgba(124, 58, 237, .18));
}

.kiddos-side-card p {
    margin: 0;
}

.kiddos-side-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.kiddos-side-card__title {
    margin: 0;
}

/*
 * A prémium kártya kiemelt: élénk narancs átmenet fehér szöveggel.
 *
 * A világos narancs (#f97316) csak a felső sarokban ül – a szöveg a sötétebb
 * részen fut, ahol a fehér 5:1 fölötti kontrasztot kap. Végig világos
 * naranccsal a fehér betű olvashatatlan lenne (2,3:1).
 */
.kiddos-side-card--upsell,
.kiddos-side-card--premium {
    background: linear-gradient(160deg, #f97316 0%, #c2410c 55%, #9a3412 100%);
    color: #fff;
}

.kiddos-side-card--upsell a,
.kiddos-side-card--premium a,
.kiddos-side-card--upsell .kiddos-side-card__meta,
.kiddos-side-card--premium .kiddos-side-card__meta,
.kiddos-side-card--upsell .kiddos-meter__label,
.kiddos-side-card--premium .kiddos-meter__label {
    color: #fff;
}

/* A lila gomb elveszne a narancson: fehér gomb, narancs felirattal. */
.kiddos-side-card--upsell .kiddos-membership-button,
.kiddos-side-card--premium .kiddos-membership-button {
    background: #fff;
    color: #9a3412;
}

.kiddos-side-card--upsell .kiddos-membership-button:hover,
.kiddos-side-card--premium .kiddos-membership-button:hover {
    background: var(--wp--preset--color--orange-light, #fed7aa);
    color: #7c2d12;
}

/* A mérőcsík is a kártya színvilágát követi. */
.kiddos-side-card--premium .kiddos-meter__track {
    background: rgba(255, 255, 255, .35);
}

.kiddos-side-card--premium .kiddos-meter__fill {
    background: #fff;
}

.kiddos-side-card--soon {
    background: var(--wp--preset--color--bg-rose, #fdf2f8);
}

.kiddos-side-card--contact {
    background: var(--wp--preset--color--sky-light, #bae6fd);
}

.kiddos-side-card--invite {
    background: #f4f0ff;
}

.kiddos-invite-form {
    margin-top: 14px;
}

.kiddos-side-card__meta {
    color: var(--wp--preset--color--text-muted, #9ca3af);
}

.kiddos-sidemenu {
    display: grid;
    gap: .25rem;
    padding: .75rem;
    border-radius: 1.25rem;
    background: var(--wp--preset--color--white, #fff);
    box-shadow: var(--wp--preset--shadow--md, 0 16px 40px -4px rgba(124, 58, 237, .18));
}

.kiddos-sidemenu a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .9rem;
    border-radius: .9rem;
    text-decoration: none;
    color: inherit;
}

.kiddos-sidemenu a:hover {
    background: var(--wp--preset--color--violet-light, #ede9fe);
}

.kiddos-sidemenu__danger {
    color: #b91c1c;
}

/* Csak képernyőolvasónak – ha a téma nem definiálná. */
.kiddos-account .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Statisztika-csempék */

/*
 * Tartalék elrendezés konténer-lekérdezés nélküli böngészőkre. A 210px-es alsó
 * határ szándékos: a csempe min-content szélessége ~205px ("Összpontszám"
 * egyetlen, nem tördelhető szó). Ennél kisebb határnál a sávok kitágulnának,
 * és az egész dashboardot szélesebbre feszítenék.
 */
.kiddos-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 1 / 2 / 4 oszlop – hármas sose, mert abból 3+1-es, féloldalas sor lenne. */
@container kiddos-account (min-width: 460px) {
    .kiddos-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container kiddos-account (min-width: 900px) {
    .kiddos-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Szűk helyen kompakt csempe: az ikon a szám fölé kerül. */
@container kiddos-account (max-width: 459px) {
    .kiddos-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem;
    }

    .kiddos-stat {
        grid-template-columns: 1fr;
        gap: .3rem;
        padding: .9rem;
    }

    .kiddos-stat__icon {
        grid-row: auto;
        justify-self: start;
        width: 34px;
        height: 34px;
    }

    .kiddos-stat__label {
        margin-top: 0;
    }
}

.kiddos-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 .85rem;
    align-items: center;
    padding: 1rem 1.1rem;
    border: 1px solid var(--wp--preset--color--violet-light, #ede9fe);
    border-radius: 1.15rem;
    background: var(--wp--preset--color--white, #fff);
    box-shadow: var(--wp--preset--shadow--md, 0 16px 40px -4px rgba(124, 58, 237, .18));
    transition: transform .18s ease;
}

.kiddos-stat:hover {
    transform: translateY(-2px);
}

.kiddos-stat__icon {
    grid-row: 1 / span 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: .9rem;
    background: var(--wp--preset--color--violet-light, #ede9fe);
    color: var(--wp--preset--color--primary, #7444e4);
}

.kiddos-stat__value {
    align-self: end;
}

.kiddos-stat__unit {
    margin-left: .25rem;
    color: var(--wp--preset--color--text-muted, #9ca3af);
}

.kiddos-stat__label {
    align-self: start;
    margin-top: .15rem;
    color: var(--wp--preset--color--text-muted, #9ca3af);
}

/* Bátorító mondat a csempe alján – az értéktől függ, mit mond. */
.kiddos-stat__caption {
    grid-column: 2;
    color: var(--wp--preset--color--text-muted, #9ca3af);
}

/*
 * A csempék ikonszíne szakaszonként más, hogy a négy szám egy pillantással
 * megkülönböztethető legyen. A háttér a paletta halvány árnyalata.
 */

.kiddos-stat__icon--gold {
    background: var(--wp--preset--color--orange-light, #fed7aa);
    color: #7c2d12;
}

.kiddos-stat__icon--violet {
    background: var(--wp--preset--color--violet-light, #ede9fe);
    color: var(--wp--preset--color--primary, #7444e4);
}

.kiddos-stat__icon--rose {
    background: var(--wp--preset--color--rose-light, #fda4af);
    color: #7f1d1d;
}

.kiddos-stat__icon--mint {
    background: var(--wp--preset--color--mint, #d6f4eb);
    color: #065f46;
}

/* Billentyűzetes fókusz látszódjon. */
.kiddos-account a:focus-visible,
.kiddos-account button:focus-visible {
    outline: 3px solid var(--wp--preset--color--primary, #7444e4);
    outline-offset: 2px;
}



@media (prefers-reduced-motion: reduce) {
    .kiddos-stat {
        transition: none;
    }

    .kiddos-stat:hover {
        transform: none;
    }
}
.kiddos-avatar-editor {
  margin-bottom: 24px;
}

.kiddos-accordion--avatar > .kiddos-accordion__toggle {
  border: 1px solid var(--kiddos-border, #e7e2ef);
  background: var(--kiddos-card, #fff);
  font-weight: 700;
}

.kiddos-accordion--avatar[open] > .kiddos-accordion__toggle {
  border-radius: .9rem;
}

.kiddos-accordion--avatar > .kiddos-accordion__body {
  margin-top: .5rem;
}

.kiddos-sidemenu .kiddos-avatar-editor {
  margin: 0;
}

.kiddos-sidemenu .kiddos-accordion--avatar > .kiddos-accordion__toggle {
  position: relative;
  flex-direction: column;
  justify-content: center;
  gap: .35rem;
  border: 0;
  border-radius: .9rem;
  background: transparent;
  font-weight: inherit;
  text-align: left;
}

.kiddos-sidemenu .kiddos-avatar-editor__menu-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  align-self: stretch;
}

.kiddos-sidemenu .kiddos-avatar-editor__preview {
  flex-basis: 96px;
  width: 96px;
  max-width: 96px;
}

.kiddos-avatar-editor__preview {
  flex: 0 0 64px;
  width: 64px;
  max-width: 64px;
  background: transparent;
}

.kiddos-avatar-editor canvas {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
  border-radius: 0;
}

.kiddos-avatar-control {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.kiddos-avatar-control legend {
  margin-bottom: 8px;
  font-weight: 700;
}

.kiddos-avatar-control select {
  width: 100%;
  margin-bottom: 10px;
}

.kiddos-avatar-shapes {
  display: grid;
  grid-template-columns: repeat(6, 64px);
  gap: 6px;
  justify-content: start;
  margin-bottom: 8px;
}

.kiddos-avatar-shapes label {
  position: relative;
  cursor: pointer;
}

.kiddos-avatar-shapes input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.kiddos-avatar-shapes label > span {
  display: grid;
  place-items: center;
  min-height: 54px;
  border: 2px solid #ddd5e8;
  border-radius: 10px;
  background: #faf8fd;
  color: #56328a;
}

.kiddos-avatar-shapes svg {
  display: block;
  width: 44px;
  height: 44px;
  fill: currentColor;
}

.kiddos-avatar-shapes__none {
  font-size: 13px;
  font-weight: 700;
}

.kiddos-avatar-shapes--accessories {
  grid-template-columns: repeat(5, 64px);
}

.kiddos-avatar-shapes input:checked + span {
  border-color: #6b3fa0;
  box-shadow: 0 0 0 2px #6b3fa0;
}

.kiddos-avatar-shapes input:focus-visible + span {
  outline: 3px solid #111;
  outline-offset: 3px;
}

.kiddos-avatar-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.kiddos-avatar-colors label {
  position: relative;
  cursor: pointer;
}

.kiddos-avatar-colors input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.kiddos-avatar-colors span {
  display: block;
  width: 26px;
  height: 26px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--avatar-color);
  box-shadow: 0 0 0 1px #c9c2d4;
}

.kiddos-avatar-colors input:checked + span {
  box-shadow: 0 0 0 3px #6b3fa0;
}

.kiddos-avatar-colors input:focus-visible + span {
  outline: 3px solid #111;
  outline-offset: 3px;
}

.kiddos-avatar-editor--error .kiddos-avatar-editor__preview {
  opacity: 0.45;
}

@media (max-width: 640px) {
  .kiddos-avatar-shapes {
    grid-template-columns: repeat(3, 64px);
  }

  .kiddos-avatar-shapes--accessories {
    grid-template-columns: repeat(3, 64px);
  }
}

/* ------------------------------------------------------------------
   Felhasználó-gomb ([kiddos_user_button])

   Fejlécbe, menübe tehető pirula: mentett avatár + becenév, a Fiókom
   oldalra visz. A profilkép beágyazott SVG, ezért nincs se villanás,
   se külön kérés.

   A méretet egyetlen változó adja: --kiddos-user-button-size (az avatár
   átmérője). A shortcode size="…" attribútuma ezt írja be; minden más
   ebből számolódik.
   ------------------------------------------------------------------ */

.kiddos-user-button-wrap {
  display: flex;
}

.kiddos-user-button {
  --kiddos-user-button-size: 32px;

  display: inline-flex;
  gap: calc(var(--kiddos-user-button-size) * 0.28);
  align-items: center;
  max-width: 100%;
  padding: calc(var(--kiddos-user-button-size) * 0.13);
  padding-right: calc(var(--kiddos-user-button-size) * 0.5);
  color: var(--wp--preset--color--primary, #7444e4);
  text-decoration: none;
  background: var(--wp--preset--color--white, #fff);
  border-radius: 999px;
  box-shadow: var(--wp--preset--shadow--md, 0 4px 14px rgba(52, 36, 93, 0.12));
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.kiddos-user-button:hover,
.kiddos-user-button:focus-visible {
  color: var(--wp--preset--color--primary, #7444e4);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(52, 36, 93, 0.18);
}

.kiddos-user-button__avatar {
  position: relative;
  flex: 0 0 auto;
  width: var(--kiddos-user-button-size);
  height: var(--kiddos-user-button-size);
}

.kiddos-user-button__portrait {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
 
}

/* A fejre vágást a viewBox végzi (Kiddos_Membership_Avatar::VIEWBOX_HEAD),
   itt már csak kitöltjük vele a kört. */
.kiddos-user-button__image {
  display: block;
  width: 100%;
  height: 100%;
}

.kiddos-user-button__initial {
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--primary, #7444e4);
}

/* Korona az avatár sarkában – csak Prémium tagnál kerül ki. A szín
   megegyezik a Fiókom oldali „Prémium tag” jelvényével. */
.kiddos-user-button__badge {
  position: absolute;
  right: -8px;
  top: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--kiddos-user-button-size) * 0.5);
  height: calc(var(--kiddos-user-button-size) * 0.5);
  color: #7c2d12;
  background: var(--wp--preset--color--orange-light, #fed7aa);
  border: 2px solid var(--wp--preset--color--white, #fff);
  border-radius: 50%;
}

.kiddos-user-button__badge .kiddos-icon {
  width: calc(var(--kiddos-user-button-size) * 0.28);
  height: calc(var(--kiddos-user-button-size) * 0.28);
}

.kiddos-user-button__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kiddos-user-button__name {
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .kiddos-user-button {
    transition: none;
  }

  .kiddos-user-button:hover,
  .kiddos-user-button:focus-visible {
    transform: none;
  }
}