/* FOODTRUTH_RESPONSIVE_V1
   Responsive layout for all FoodTruth languages.
   LTR: English, Hindi, Chinese
   RTL: Urdu, Arabic, Persian
*/

/* ---------------------------------------------------------
   GLOBAL SAFETY
--------------------------------------------------------- */

html,
body {
    max-width:100%;
    overflow-x:hidden;
}

body * {
    box-sizing:border-box;
}

#nice-foodtruth-live-runtime,
#nice-foodtruth-live-runtime * {
    box-sizing:border-box;
}

#nice-foodtruth-live-runtime {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:visible;
}


/* ---------------------------------------------------------
   UPLOAD AREA
--------------------------------------------------------- */

#nice-foodtruth-live-runtime .nice-ft-upload-card {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
}

#nice-foodtruth-live-runtime .nice-ft-uploader {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden;
}

#nice-foodtruth-live-runtime .nice-ft-uploader img,
#nice-foodtruth-live-runtime .nice-ft-preview-image {
    display:block;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:580px;
    object-fit:contain;
}

#nice-foodtruth-live-runtime .nice-ft-actions,
#nice-foodtruth-live-runtime .nice-ft-analyze {
    width:100%;
    max-width:100%;
}


/* ---------------------------------------------------------
   LANGUAGE BAR
--------------------------------------------------------- */

#nice-foodtruth-live-runtime .nice-ft-language-bar {
    width:100%;
    max-width:100%;
    min-width:0;
}

#nice-foodtruth-live-runtime .nice-ft-language-select-wrap {
    min-width:0 !important;
    max-width:100%;
}

#nice-foodtruth-live-runtime .nice-ft-language-select {
    max-width:100%;
}


/* ---------------------------------------------------------
   RESULT ROOT
--------------------------------------------------------- */

#nice-foodtruth-live-runtime .nice-ft-result,
#nice-foodtruth-live-runtime .nice-ft-result-body,
#nice-foodtruth-live-runtime .nice-ft-result-hero {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
}

#nice-foodtruth-live-runtime .nice-ft-result {
    overflow:hidden;
}


/* ---------------------------------------------------------
   RESULT HERO
--------------------------------------------------------- */

#nice-foodtruth-live-runtime .nice-ft-result-hero {
    display:grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(150px, auto) !important;

    align-items:center;
    gap:24px;
}

#nice-foodtruth-live-runtime .nice-ft-result-hero > * {
    min-width:0;
}

#nice-foodtruth-live-runtime .nice-ft-result-hero h2,
#nice-foodtruth-live-runtime .nice-ft-description,
#nice-foodtruth-live-runtime .nice-ft-confidence {
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:normal;
}


/* ---------------------------------------------------------
   NUTRITION OVERVIEW
--------------------------------------------------------- */

#nice-foodtruth-live-runtime .nice-ft-overview-grid {
    display:grid !important;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(145px, 1fr)
        ) !important;

    width:100%;
    max-width:100%;
    min-width:0;
    gap:14px;
}

#nice-foodtruth-live-runtime .nice-ft-stat {
    min-width:0 !important;
    max-width:100%;
}

#nice-foodtruth-live-runtime .nice-ft-stat strong,
#nice-foodtruth-live-runtime .nice-ft-stat small,
#nice-foodtruth-live-runtime .nice-ft-stat span {
    max-width:100%;
    overflow-wrap:anywhere;
}


/* ---------------------------------------------------------
   TOP DETAIL CARDS
--------------------------------------------------------- */

#nice-foodtruth-live-runtime .nice-ft-top-details {
    display:grid !important;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        ) !important;

    width:100%;
    min-width:0;
    gap:14px;
}

#nice-foodtruth-live-runtime .nice-ft-detail-card {
    min-width:0 !important;
    max-width:100%;
}

#nice-foodtruth-live-runtime .nice-ft-detail-card strong {
    overflow-wrap:anywhere;
}


/* ---------------------------------------------------------
   TWO-COLUMN RESULT PANELS
--------------------------------------------------------- */

#nice-foodtruth-live-runtime .nice-ft-two-column {
    display:grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    width:100%;
    max-width:100%;
    min-width:0;
    gap:16px;
}

#nice-foodtruth-live-runtime .nice-ft-panel {
    width:100%;
    min-width:0 !important;
    max-width:100%;
}

#nice-foodtruth-live-runtime .nice-ft-panel *,
#nice-foodtruth-live-runtime .nice-ft-health-note,
#nice-foodtruth-live-runtime .nice-ft-safe-note,
#nice-foodtruth-live-runtime .nice-ft-source-text {
    max-width:100%;
    overflow-wrap:anywhere;
}


/* ---------------------------------------------------------
   COMPONENTS / CHIPS
--------------------------------------------------------- */

#nice-foodtruth-live-runtime .nice-ft-component,
#nice-foodtruth-live-runtime .nice-ft-component-main {
    min-width:0;
    max-width:100%;
}

#nice-foodtruth-live-runtime .nice-ft-component-main {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

#nice-foodtruth-live-runtime .nice-ft-chips {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

#nice-foodtruth-live-runtime .nice-ft-chip {
    max-width:100%;
    white-space:normal !important;
    overflow-wrap:anywhere;
}


/* ---------------------------------------------------------
   SAVE / DISCARD
--------------------------------------------------------- */

#nice-foodtruth-live-runtime .nice-ft-save-row {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    width:100%;
}

#nice-foodtruth-live-runtime .nice-ft-save-row button {
    min-width:0;
    max-width:100%;
}


/* ---------------------------------------------------------
   FDA TABLE
--------------------------------------------------------- */

#nice-foodtruth-live-runtime .nice-ft-fda {
    width:100%;
    max-width:100%;
    min-width:0;
}

#nice-foodtruth-live-runtime .nice-ft-table-wrap {
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
}

#nice-foodtruth-live-runtime .nice-ft-table {
    width:100%;
    min-width:680px;
    border-collapse:collapse;
}

#nice-foodtruth-live-runtime .nice-ft-table th,
#nice-foodtruth-live-runtime .nice-ft-table td {
    white-space:normal;
    overflow-wrap:anywhere;
}


/* ---------------------------------------------------------
   RTL SUPPORT
--------------------------------------------------------- */

#nice-foodtruth-live-runtime[dir="rtl"] {
    direction:rtl;
    text-align:right;
}

#nice-foodtruth-live-runtime[dir="rtl"]
.nice-ft-result-hero,

#nice-foodtruth-live-runtime[dir="rtl"]
.nice-ft-result-body,

#nice-foodtruth-live-runtime[dir="rtl"]
.nice-ft-panel,

#nice-foodtruth-live-runtime[dir="rtl"]
.nice-ft-stat,

#nice-foodtruth-live-runtime[dir="rtl"]
.nice-ft-detail-card {

    text-align:right;
}

#nice-foodtruth-live-runtime[dir="rtl"]
.nice-ft-table {

    direction:rtl;
}

#nice-foodtruth-live-runtime[dir="rtl"]
.nice-ft-table-wrap {

    direction:rtl;
}


/* ---------------------------------------------------------
   LAPTOP / SMALL DESKTOP
--------------------------------------------------------- */

@media (max-width:1200px) {

    #nice-foodtruth-live-runtime
    .nice-ft-overview-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-result-body {

        padding-left:22px !important;
        padding-right:22px !important;
    }
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width:900px) {

    body:has(#nice-foodtruth-live-runtime) {
        overflow-x:hidden;
    }

    body:has(#nice-foodtruth-live-runtime)
    main {

        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    /*
     * Allow containers around FoodTruth to shrink.
     * This prevents the right-side result from pushing
     * beyond the viewport.
     */
    body:has(#nice-foodtruth-live-runtime)
    :is(
        main,
        section,
        article,
        div
    ):has(> #nice-foodtruth-live-runtime) {

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-result-hero {

        grid-template-columns:
            1fr !important;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-confidence {

        width:100%;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-overview-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-two-column {

        grid-template-columns:
            1fr !important;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-top-details {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width:640px) {

    body:has(#nice-foodtruth-live-runtime) {
        overflow-x:hidden !important;
    }

    #nice-foodtruth-live-runtime {
        width:100vw !important;
        max-width:100% !important;
        margin:0 !important;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-upload-card,

    #nice-foodtruth-live-runtime
    .nice-ft-result {

        border-radius:18px !important;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-result-body {

        padding:
            16px !important;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-result-hero {

        padding:
            20px 16px !important;

        gap:14px;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-result-hero h2 {

        font-size:
            clamp(
                26px,
                8vw,
                38px
            ) !important;

        line-height:1.12;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-overview-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:10px;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-top-details {

        grid-template-columns:
            1fr !important;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-stat {

        padding:
            14px 12px !important;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-stat strong {

        font-size:
            clamp(
                22px,
                7vw,
                30px
            ) !important;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-language-bar {

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-language-select-wrap {

        width:100% !important;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-save-row {

        flex-direction:column;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-save-row button {

        width:100%;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-table {

        min-width:620px;
        font-size:13px;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-fda-header h3 {

        font-size:
            20px !important;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-uploader img,

    #nice-foodtruth-live-runtime
    .nice-ft-preview-image {

        max-height:
            420px;
    }
}


/* ---------------------------------------------------------
   VERY SMALL MOBILE
--------------------------------------------------------- */

@media (max-width:420px) {

    #nice-foodtruth-live-runtime
    .nice-ft-overview-grid {

        grid-template-columns:
            1fr !important;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-result-body {

        padding:
            12px !important;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-result-hero {

        padding:
            18px 13px !important;
    }

    #nice-foodtruth-live-runtime
    .nice-ft-panel {

        padding:
            14px !important;
    }
}