/* ZuuzEatsWell Interaktivní nástroje — obalovací styly */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600;700&display=swap');

/* ── Outer wrapper ───────────────────────────────────────────── */
/* overflow-x only — NEVER clip overflow-y                       */
.zuuzeats-tool-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* ── Root containers ────────────────────────────────────────── */
.zuuzeats-bmi-root,
.zuuzeats-kalorie-root,
.zuuzeats-cesta-root,
.zuuzeats-skore-root {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* ── box-sizing reset ────────────────────────────────────────── */
.zuuzeats-bmi-root *,
.zuuzeats-bmi-root *::before,
.zuuzeats-bmi-root *::after,
.zuuzeats-kalorie-root *,
.zuuzeats-kalorie-root *::before,
.zuuzeats-kalorie-root *::after,
.zuuzeats-cesta-root *,
.zuuzeats-cesta-root *::before,
.zuuzeats-cesta-root *::after {
    box-sizing: border-box;
}

/* ── Images scale down ──────────────────────────────────────── */
.zuuzeats-bmi-root img,
.zuuzeats-kalorie-root img,
.zuuzeats-cesta-root img {
    max-width: 100%;
    height: auto;
}

/* ── Loading placeholder ────────────────────────────────────── */
.zuuzeats-bmi-root:empty::after,
.zuuzeats-kalorie-root:empty::after,
.zuuzeats-cesta-root:empty::after {
    content: 'Načítám…';
    display: block;
    text-align: center;
    padding: 60px 20px;
    color: #9CA3AF;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
}

/* ── Range slider ───────────────────────────────────────────── */
.zew-range {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 99px;
    outline: none;
    cursor: pointer;
    touch-action: pan-x;
    display: block;
    width: 100%;
}
.zew-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #0E5A3A;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    cursor: pointer;
}
.zew-range::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #0E5A3A;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    cursor: pointer;
}

/* ── Root containers as container contexts ───────────────────── */
/* Enables @container queries as a fallback for JS-based mob detection */
.zuuzeats-bmi-root,
.zuuzeats-kalorie-root,
.zuuzeats-cesta-root {
    container-type: inline-size;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE OVERRIDES — three-layer defence:
   1. @media max-width: 600px   (viewport-based, with viewport meta)
   2. @media max-device-width   (device-based, without viewport meta)
   3. @container max-width      (container-based, most reliable)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px), (max-device-width: 599px) {

    /* Page-level horizontal scroll prevention */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* All direct children of root divs must not overflow */
    .zuuzeats-bmi-root > *,
    .zuuzeats-kalorie-root > *,
    .zuuzeats-cesta-root > * {
        max-width: 100vw !important;
    }

    /* Number inputs — shrink to fit, prevent iOS zoom */
    .zuuzeats-cesta-root input[type="number"],
    .zuuzeats-bmi-root input[type="number"] {
        font-size: 22px !important;
        width: 56px !important;
        min-width: 0 !important;
    }

    /* Kcal game number input — prevent iOS zoom */
    .zuuzeats-kalorie-root input[type="number"] {
        font-size: max(16px, 1em) !important;
    }

    /* Bigger touch targets on sliders */
    .zew-range { height: 8px; }
    .zew-range::-webkit-slider-thumb { width: 34px; height: 34px; }
    .zew-range::-moz-range-thumb { width: 34px; height: 34px; }

    /* Buttons must not overflow */
    .zuuzeats-cesta-root button,
    .zuuzeats-kalorie-root button,
    .zuuzeats-bmi-root button {
        min-width: 0;
    }

    /* IntensityPicker — wraps on small screens */
    .zuuzeats-cesta-root [style*="flexWrap: wrap"],
    .zuuzeats-cesta-root [style*="flex-wrap: wrap"] {
        gap: 4px !important;
    }

    /* FieldSlider number inputs — prevent iOS zoom, allow shrink */
    .zuuzeats-cesta-root input[type="number"] {
        font-size: 22px !important;
        width: 56px !important;
        min-width: 0 !important;
    }

    /* TimeframePicker buttons — shrink text if needed */
    .zuuzeats-cesta-root [style*="borderRadius: 99"] {
        min-width: 0;
    }

    /* Kalorie intro items — don't overflow on tiny screens */
    .zuuzeats-kalorie-root [style*="width: 84"] {
        max-width: 80px !important;
    }

    /* ── Grid overrides (backup if JS mobile detection fails) ── */

    /* 2-column explicit grids → single column */
    .zuuzeats-bmi-root [style*="grid-template-columns: 1fr 1fr"],
    .zuuzeats-kalorie-root [style*="grid-template-columns: 1fr 1fr"],
    .zuuzeats-cesta-root [style*="grid-template-columns: 1fr 1fr"],
    .zuuzeats-bmi-root [style*="grid-template-columns: 1.3fr 1fr"],
    .zuuzeats-kalorie-root [style*="grid-template-columns: 1.3fr 1fr"],
    .zuuzeats-cesta-root [style*="grid-template-columns: 1.3fr 1fr"],
    .zuuzeats-cesta-root [style*="grid-template-columns: 1.55fr 1fr"],
    .zuuzeats-kalorie-root [style*="grid-template-columns: 220px 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Kcal game image container: never taller than 220px */
    .zuuzeats-kalorie-root [style*="aspect-ratio: 1"],
    .zuuzeats-kalorie-root [style*="aspectRatio"] {
        max-height: 220px !important;
    }

    /* 3–5 column repeat() grids → 2 columns */
    .zuuzeats-bmi-root [style*="grid-template-columns: repeat(3"],
    .zuuzeats-bmi-root [style*="grid-template-columns: repeat(4"],
    .zuuzeats-bmi-root [style*="grid-template-columns: repeat(5"],
    .zuuzeats-kalorie-root [style*="grid-template-columns: repeat(3"],
    .zuuzeats-kalorie-root [style*="grid-template-columns: repeat(4"],
    .zuuzeats-kalorie-root [style*="grid-template-columns: repeat(5"],
    .zuuzeats-cesta-root [style*="grid-template-columns: repeat(3"],
    .zuuzeats-cesta-root [style*="grid-template-columns: repeat(4"],
    .zuuzeats-cesta-root [style*="grid-template-columns: repeat(5"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Cesta: "Dnes vs." figure pair → single column (each figure needs full width) */
    .zuuzeats-cesta-root [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Explicit 2-col grid (1fr 1fr) in bmi/kalorie stays 2 columns — intentional */
    /* Cesta 1fr 1fr handled above */

    /* Cesta: ensure milestone cards never go below 2 columns on mobile */
    /* (JS sets repeat(2,1fr) when mob=true; CSS repeat(4→2) when mob=false) */
    .zuuzeats-cesta-root [style*="grid-template-columns: repeat(2"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Grid items: allow shrinking */
    .zuuzeats-bmi-root [style*="grid-template-columns"] > *,
    .zuuzeats-kalorie-root [style*="grid-template-columns"] > *,
    .zuuzeats-cesta-root [style*="grid-template-columns"] > * {
        min-width: 0;
        overflow-wrap: break-word;
    }

    /* SVGs: scale down */
    .zuuzeats-bmi-root svg,
    .zuuzeats-cesta-root svg,
    .zuuzeats-kalorie-root svg {
        max-width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CONTAINER QUERIES — fire based on the plugin container width,
   independent of viewport. Most reliable fallback when JS and
   media queries both fail (e.g. theme without viewport meta).
   ═══════════════════════════════════════════════════════════════ */
@container (max-width: 599px) {

    /* Grids: collapse to single/double column */
    .zuuzeats-cesta-root [style*="grid-template-columns: 1.55fr 1fr"],
    .zuuzeats-cesta-root [style*="grid-template-columns: 1.3fr 1fr"],
    .zuuzeats-cesta-root [style*="grid-template-columns: 1fr 1fr"],
    .zuuzeats-kalorie-root [style*="grid-template-columns: 1fr 1fr"],
    .zuuzeats-bmi-root [style*="grid-template-columns: 1.3fr 1fr"],
    .zuuzeats-bmi-root [style*="grid-template-columns: 1fr 1fr"],
    .zuuzeats-kalorie-root [style*="grid-template-columns: 220px 1fr"] {
        grid-template-columns: 1fr !important;
    }

    .zuuzeats-bmi-root [style*="grid-template-columns: repeat(3"],
    .zuuzeats-bmi-root [style*="grid-template-columns: repeat(4"],
    .zuuzeats-kalorie-root [style*="grid-template-columns: repeat(3"],
    .zuuzeats-kalorie-root [style*="grid-template-columns: repeat(4"],
    .zuuzeats-cesta-root [style*="grid-template-columns: repeat(3"],
    .zuuzeats-cesta-root [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .zuuzeats-cesta-root [style*="grid-template-columns: repeat(2"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Number inputs: prevent iOS zoom */
    .zuuzeats-cesta-root input[type="number"],
    .zuuzeats-bmi-root input[type="number"] {
        font-size: 22px !important;
        width: 56px !important;
        min-width: 0 !important;
    }
    .zuuzeats-kalorie-root input[type="number"] {
        font-size: max(16px, 1em) !important;
    }

    /* Sliders */
    .zew-range { height: 8px; }
    .zew-range::-webkit-slider-thumb { width: 34px; height: 34px; }
    .zew-range::-moz-range-thumb { width: 34px; height: 34px; }

    /* SVGs */
    .zuuzeats-bmi-root svg,
    .zuuzeats-cesta-root svg,
    .zuuzeats-kalorie-root svg {
        max-width: 100% !important;
    }

    /* Image containers */
    .zuuzeats-kalorie-root [style*="aspect-ratio: 1"],
    .zuuzeats-kalorie-root [style*="aspectRatio"] {
        max-height: 220px !important;
    }
}