/* =========================================================
   ZIAJA PRODUCT INFO
========================================================= */

.ziaja-product-info {
    --zpi-green: #1A5B1E;
    --zpi-title: #182730;
    --zpi-table-bg: #EEF1F3;
    --zpi-table-head: #BCC6D2;

    width: 100%;

    color: var(--zpi-title);
}

.ziaja-product-info *,
.ziaja-product-info *::before,
.ziaja-product-info *::after {
    box-sizing: border-box;
}


/* =========================================================
   ROWS
========================================================= */

.ziaja-product-info__rows {
    display: grid;

    gap: 18px;
}


.ziaja-product-info__row {
    display: grid;

    grid-template-columns:
        130px
        minmax(0, 1fr);

    gap: 20px;

    align-items: start;

    font-size: 14px;
    line-height: 1.42;
}


.ziaja-product-info__row[hidden] {
    display: none !important;
}


.ziaja-product-info__label {
    color: var(--zpi-title);

    font-weight: 400;
}


.ziaja-product-info__value {
    min-width: 0;

    color: var(--zpi-title);
}


.ziaja-product-info__category {
    color: var(--zpi-green);
}


/* =========================================================
   INGREDIENT PREVIEW
   MAX 2 LINES
========================================================= */

.ziaja-product-info__ingredients-preview {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    line-clamp: 2;
}


/* =========================================================
   INGREDIENT LINK
========================================================= */

.ziaja-product-info__ingredients-link {
    display: inline-flex !important;
    align-items: center;

    margin: 6px 0 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;
    color: var(--zpi-green) !important;

    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;

    box-shadow: none !important;

    cursor: pointer;
}


.ziaja-product-info__ingredients-link:hover {
    color: #124817 !important;

    text-decoration: underline;
}


/* =========================================================
   VIEW ALL
========================================================= */

.ziaja-product-info__toggle {
    display: flex !important;

    align-items: center;
    justify-content: center;

    gap: 7px;

    width: fit-content;

    margin: 15px auto 0 !important;
    padding: 5px !important;

    border: 0 !important;

    background: transparent !important;
    color: #111 !important;

    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;

    box-shadow: none !important;

    cursor: pointer;
}


.ziaja-product-info__toggle svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform .3s ease;
}


.ziaja-product-info__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}


/* =========================================================
   MODAL LOCK
========================================================= */

html.ziaja-ingredient-open,
body.ziaja-ingredient-open {
    overflow: hidden;
}


/* =========================================================
   MODAL
========================================================= */

.ziaja-ingredients-modal {
    position: fixed;
    inset: 0;

    z-index: 999999;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 26px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.ziaja-ingredients-modal.is-open {
    opacity: 1;
    visibility: visible;
}


.ziaja-ingredients-modal__backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(
            24,
            39,
            48,
            .52
        );
}


/* =========================================================
   DIALOG
========================================================= */

.ziaja-ingredients-modal__dialog {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;

    width: min(800px, 100%);
    max-height: calc(100vh - 52px);

    border-radius: 14px;

    background: #fff;

    overflow: hidden;

    transform:
        translateY(12px)
        scale(.985);

    transition: transform .28s ease;
}


.ziaja-ingredients-modal.is-open
.ziaja-ingredients-modal__dialog {
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   MODAL HEADER
========================================================= */

.ziaja-ingredients-modal__header {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 62px;

    padding: 12px 60px;

    border-bottom:
        1px solid #E6E9E7;
}


.ziaja-ingredients-modal__title {
    margin: 0 !important;
    padding: 0 !important;

    color: #182730;

    font-size: 20px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;

    text-align: center;
}


/* =========================================================
   CLOSE
========================================================= */

.ziaja-ingredients-modal__close {
    position: absolute;

    top: 50%;
    right: 17px;

    display: grid !important;

    place-items: center;

    width: 38px;
    height: 38px;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;
    color: #182730 !important;

    box-shadow: none !important;

    cursor: pointer;

    transform: translateY(-50%);
}


.ziaja-ingredients-modal__close svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}


/* =========================================================
   MODAL BODY
========================================================= */

.ziaja-ingredients-modal__body {
    padding: 13px 15px 14px;

    overflow-y: auto;

    overscroll-behavior: contain;
}


/* =========================================================
   INGREDIENT TABLE
   NO "HÀM LƯỢNG" COLUMN
========================================================= */

.ziaja-ingredients-table {
    width: 100%;

    background: var(--zpi-table-bg);
}


.ziaja-ingredients-table__head {
    padding: 9px 10px;

    background: var(--zpi-table-head);

    color: #15233E;

    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
}


.ziaja-ingredients-table__row {
    min-height: 36px;

    padding: 8px 10px;

    border-top: 2px solid #fff;

    color: #15233E;

    font-size: 14px;
    line-height: 1.35;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .ziaja-product-info__row {
        grid-template-columns:
            105px
            minmax(0, 1fr);

        gap: 12px;

        font-size: 13px;
    }


    .ziaja-product-info__ingredients-link {
        font-size: 13px !important;
    }


    .ziaja-ingredients-modal {
        padding: 14px;
    }


    .ziaja-ingredients-modal__dialog {
        max-height:
            calc(100vh - 28px);

        border-radius: 10px;
    }


    .ziaja-ingredients-modal__header {
        justify-content: flex-start;

        min-height: 56px;

        padding:
            10px 50px
            10px 15px;
    }


    .ziaja-ingredients-modal__title {
        font-size: 17px !important;

        text-align: left;
    }


    .ziaja-ingredients-modal__close {
        right: 9px;
    }


    .ziaja-ingredients-modal__body {
        padding: 10px;
    }


    .ziaja-ingredients-table__head,
    .ziaja-ingredients-table__row {
        font-size: 13px;
    }
}