/* =========================================================
   MELFAM HOME ESSENTIALS
   SHARED APPLICATION STYLES
   ========================================================= */


/* ---------------------------------------------------------
   RESET
   --------------------------------------------------------- */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        #f3f6f2;

    color:
        #10231a;
}


button,
input,
select,
textarea {
    font: inherit;
}


button {
    cursor: pointer;
}


img {
    max-width: 100%;
}


/* ---------------------------------------------------------
   ROOT VARIABLES
   --------------------------------------------------------- */

:root {

    --melfam-green-dark:
        #0e5636;

    --melfam-green:
        #16834f;

    --melfam-green-light:
        #e8f5ed;

    --melfam-green-soft:
        #f2faf5;

    --melfam-gold:
        #d7a92e;

    --melfam-blue-light:
        #eaf4ff;

    --melfam-yellow-light:
        #fff6d9;

    --melfam-purple-light:
        #f2edff;

    --melfam-red:
        #c9342c;

    --melfam-red-light:
        #fff0ef;

    --melfam-text:
        #10231a;

    --melfam-text-soft:
        #637268;

    --melfam-border:
        #d7e0da;

    --melfam-white:
        #ffffff;

    --melfam-background:
        #f3f6f2;

    --melfam-shadow:
        0 8px 28px rgba(
            25,
            53,
            38,
            0.10
        );

}


/* ---------------------------------------------------------
   LANGUAGE SWITCHER
   --------------------------------------------------------- */

.language-switcher {

    position: fixed;

    top: 18px;
    right: 18px;

    z-index: 1000;

    display: flex;

    gap: 5px;

    padding: 5px;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    border:
        1px solid
        var(--melfam-border);

    border-radius: 14px;

    box-shadow:
        0 5px 18px
        rgba(
            0,
            0,
            0,
            0.08
        );

}


.language-button {

    min-width: 92px;

    padding:
        10px
        16px;

    border:
        none;

    border-radius:
        10px;

    background:
        transparent;

    color:
        var(--melfam-text);

    font-weight: 700;

    font-size: 16px;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;

}


.language-button:hover {

    background:
        #eef3ef;

}


.language-button.active {

    background:
        var(--melfam-green-dark);

    color:
        white;

}


/* ---------------------------------------------------------
   MAIN SHOPPING APPLICATION
   --------------------------------------------------------- */

.shopping-app {

    width:
        min(
            100%,
            820px
        );

    min-height:
        100vh;

    margin:
        0 auto;

    background:
        var(--melfam-white);

    box-shadow:
        var(--melfam-shadow);

    overflow:
        hidden;

}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.shopping-header {

    min-height:
        145px;

    padding:
        28px
        34px;

    display:
        flex;

    align-items:
        center;

    background:
        var(--melfam-green-dark);

    color:
        white;

}


.brand-area {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

}


.shopping-logo {

    width:
        92px;

    height:
        92px;

    object-fit:
        contain;

}


.brand-area h1 {

    font-size:
        38px;

    line-height:
        1;

    letter-spacing:
        0.5px;

    margin-bottom:
        9px;

}


.brand-area p {

    font-size:
        19px;

    opacity:
        0.95;

}


/* ---------------------------------------------------------
   SCREENS
   --------------------------------------------------------- */

.shopping-screen {

    display:
        none;

    min-height:
        650px;

    padding:
        42px
        30px
        32px;

}


.shopping-screen.active {

    display:
        block;

}


.screen-heading {

    margin-bottom:
        25px;

    text-align:
        center;

}


.screen-heading h2 {

    margin-bottom:
        9px;

    font-size:
        34px;

    line-height:
        1.2;

}


.screen-heading p {

    color:
        var(--melfam-text-soft);

    font-size:
        19px;

    line-height:
        1.5;

}


/* ---------------------------------------------------------
   SCREEN TOOLBAR
   --------------------------------------------------------- */

.screen-toolbar {

    display:
        grid;

    grid-template-columns:
        62px
        1fr
        62px;

    gap:
        15px;

    align-items:
        center;

    margin-bottom:
        28px;

}


.screen-toolbar > div {

    text-align:
        center;

}


.screen-toolbar h2 {

    font-size:
        30px;

    margin-bottom:
        5px;

}


.screen-toolbar p {

    color:
        var(--melfam-text-soft);

    font-size:
        16px;

}


/* ---------------------------------------------------------
   BACK BUTTON
   --------------------------------------------------------- */

.back-button {

    width:
        58px;

    height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--melfam-border);

    border-radius:
        16px;

    background:
        white;

    color:
        var(--melfam-text);

    font-size:
        29px;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.back-button:hover {

    background:
        #f4f7f5;

}


.back-button:active {

    transform:
        scale(0.96);

}


/* ---------------------------------------------------------
   VOICE BUTTONS
   --------------------------------------------------------- */

.voice-button {

    width:
        100%;

    min-height:
        65px;

    margin-bottom:
        28px;

    border:
        none;

    border-radius:
        16px;

    background:
        var(--melfam-green-light);

    color:
        var(--melfam-green-dark);

    font-size:
        20px;

    font-weight:
        700;

}


.voice-button:hover {

    background:
        #d9efdf;

}


.small-voice-button {

    width:
        58px;

    height:
        58px;

    border:
        1px solid
        var(--melfam-border);

    border-radius:
        16px;

    background:
        white;

    font-size:
        25px;

}


.small-voice-button:hover {

    background:
        var(--melfam-green-light);

}


/* ---------------------------------------------------------
   SECTION GRID
   --------------------------------------------------------- */

.section-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        14px;

    margin-bottom:
        30px;

}


.section-card {

    min-height:
        155px;

    padding:
        18px
        12px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border:
        2px solid
        transparent;

    border-radius:
        20px;

    background:
        #f7faf8;

    text-align:
        center;

    transition:
        border 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.section-card:hover {

    border-color:
        var(--melfam-green);

    background:
        var(--melfam-green-soft);

    box-shadow:
        0 5px 16px
        rgba(
            14,
            86,
            54,
            0.08
        );

}


.section-card:active {

    transform:
        scale(0.97);

}


.section-icon {

    font-size:
        46px;

    line-height:
        1;

}


.section-card strong {

    font-size:
        18px;

    color:
        var(--melfam-text);

}


.section-card span {

    font-size:
        14px;

    color:
        var(--melfam-text-soft);

}


/* ---------------------------------------------------------
   PRODUCT GRID
   --------------------------------------------------------- */

.product-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            1fr
        );

    gap:
        16px;

}


.product-card {

    position:
        relative;

    min-height:
        270px;

    padding:
        14px;

    border:
        2px solid
        var(--melfam-border);

    border-radius:
        20px;

    background:
        white;

    overflow:
        hidden;

    transition:
        border 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.product-card:hover {

    border-color:
        var(--melfam-green);

    box-shadow:
        0 6px 20px
        rgba(
            14,
            86,
            54,
            0.09
        );

}


.product-card:active {

    transform:
        scale(0.98);

}


.product-card.selected {

    border-color:
        var(--melfam-green);

    background:
        var(--melfam-green-light);

}


.product-image-container {

    width:
        100%;

    height:
        160px;

    margin-bottom:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    background:
        #f6f8f6;

    overflow:
        hidden;

}


.product-image {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

}


.product-placeholder {

    font-size:
        65px;

}


.product-name {

    display:
        block;

    min-height:
        44px;

    margin-bottom:
        8px;

    color:
        var(--melfam-text);

    font-size:
        18px;

    font-weight:
        700;

    line-height:
        1.25;

}


.product-price {

    color:
        var(--melfam-green-dark);

    font-size:
        18px;

    font-weight:
        700;

}


.selected-check {

    position:
        absolute;

    top:
        10px;

    right:
        10px;

    width:
        35px;

    height:
        35px;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--melfam-green);

    color:
        white;

    font-size:
        20px;

    font-weight:
        bold;

}


.product-card.selected
.selected-check {

    display:
        flex;

}


/* ---------------------------------------------------------
   MAIN ACTION BUTTON
   --------------------------------------------------------- */

.main-action-button,
.done-button {

    width:
        100%;

    min-height:
        72px;

    padding:
        15px
        20px;

    border:
        none;

    border-radius:
        18px;

    background:
        var(--melfam-green);

    color:
        white;

    font-size:
        22px;

    font-weight:
        700;

    box-shadow:
        0 5px 14px
        rgba(
            22,
            131,
            79,
            0.16
        );

}


.main-action-button:hover,
.done-button:hover {

    background:
        var(--melfam-green-dark);

}


.list-count {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        34px;

    height:
        34px;

    margin-left:
        8px;

    padding:
        0
        8px;

    border-radius:
        20px;

    background:
        white;

    color:
        var(--melfam-green-dark);

}


/* ---------------------------------------------------------
   SHOPPING LIST
   --------------------------------------------------------- */

.shopping-list-items {

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;

    margin-bottom:
        25px;

}


.shopping-list-item {

    display:
        grid;

    grid-template-columns:
        75px
        1fr
        auto;

    gap:
        14px;

    align-items:
        center;

    padding:
        13px;

    border:
        1px solid
        var(--melfam-border);

    border-radius:
        16px;

    background:
        white;

}


.list-item-image {

    width:
        75px;

    height:
        75px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        #f5f7f5;

    overflow:
        hidden;

}


.list-item-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

}


.list-item-info strong {

    display:
        block;

    margin-bottom:
        5px;

    font-size:
        17px;

}


.list-item-info span {

    color:
        var(--melfam-text-soft);

}


/* ---------------------------------------------------------
   QUANTITY CONTROL
   --------------------------------------------------------- */

.quantity-control {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.quantity-button {

    width:
        40px;

    height:
        40px;

    border:
        none;

    border-radius:
        10px;

    background:
        var(--melfam-green-light);

    color:
        var(--melfam-green-dark);

    font-size:
        22px;

    font-weight:
        bold;

}


.quantity-button:hover {

    background:
        #d8eddf;

}


.quantity-value {

    min-width:
        28px;

    text-align:
        center;

    font-size:
        18px;

    font-weight:
        700;

}


/* ---------------------------------------------------------
   LIST SUMMARY
   --------------------------------------------------------- */

.list-summary {

    margin:
        20px
        0;

    padding:
        20px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    border-radius:
        16px;

    background:
        var(--melfam-green-soft);

}


.list-summary div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

}


.list-summary span {

    color:
        var(--melfam-text-soft);

    font-size:
        14px;

}


.list-summary strong {

    color:
        var(--melfam-green-dark);

    font-size:
        22px;

}


/* ---------------------------------------------------------
   FINISHED SCREEN
   --------------------------------------------------------- */

#finishedScreen {

    text-align:
        center;

}


.finished-icon {

    width:
        95px;

    height:
        95px;

    margin:
        20px
        auto
        25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--melfam-green);

    color:
        white;

    font-size:
        48px;

    font-weight:
        bold;

}


#finishedScreen h2 {

    margin-bottom:
        10px;

    font-size:
        34px;

}


#finishedScreen > p {

    margin-bottom:
        30px;

    color:
        var(--melfam-text-soft);

    font-size:
        18px;

}


.finished-actions {

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;

    margin-bottom:
        25px;

}


.whatsapp-button,
.image-button,
.viewer-button,
.secondary-action-button {

    width:
        100%;

    min-height:
        65px;

    padding:
        14px
        20px;

    border-radius:
        16px;

    font-size:
        19px;

    font-weight:
        700;

}


.whatsapp-button {

    border:
        none;

    background:
        #1f9b58;

    color:
        white;

}


.image-button {

    border:
        1px solid
        #bfd5f0;

    background:
        var(--melfam-blue-light);

    color:
        #184d7b;

}


.viewer-button {

    border:
        1px solid
        #e2d39c;

    background:
        var(--melfam-yellow-light);

    color:
        #604c0f;

}


.secondary-action-button {

    border:
        1px solid
        var(--melfam-border);

    background:
        white;

    color:
        var(--melfam-text);

}


/* ---------------------------------------------------------
   LOADING / EMPTY / ERROR STATES
   --------------------------------------------------------- */

.loading-message,
.empty-message,
.error-message {

    grid-column:
        1 / -1;

    padding:
        35px
        20px;

    border-radius:
        15px;

    text-align:
        center;

    font-size:
        17px;

}


.loading-message {

    color:
        var(--melfam-text-soft);

    background:
        #f6f8f6;

}


.empty-message {

    color:
        var(--melfam-text-soft);

    background:
        #f6f8f6;

}


.error-message {

    color:
        var(--melfam-red);

    background:
        var(--melfam-red-light);

    border:
        1px solid
        #ffc8c4;

}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.shopping-footer {

    padding:
        25px
        20px
        35px;

    text-align:
        center;

    color:
        var(--melfam-text-soft);

    font-size:
        13px;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (
    max-width: 900px
) {

    .language-switcher {

        position:
            relative;

        top:
            auto;

        right:
            auto;

        width:
            fit-content;

        margin:
            10px
            auto;

    }


    .shopping-app {

        width:
            100%;

        box-shadow:
            none;

    }

}


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

@media (
    max-width: 600px
) {

    body {

        background:
            white;

    }


    .language-switcher {

        width:
            calc(
                100% - 24px
            );

        justify-content:
            center;

        margin:
            8px
            12px;

    }


    .language-button {

        flex:
            1;

        min-width:
            0;

    }


    .shopping-header {

        min-height:
            110px;

        padding:
            18px
            20px;

    }


    .shopping-logo {

        width:
            68px;

        height:
            68px;

    }


    .brand-area {

        gap:
            14px;

    }


    .brand-area h1 {

        font-size:
            27px;

    }


    .brand-area p {

        font-size:
            15px;

    }


    .shopping-screen {

        min-height:
            580px;

        padding:
            28px
            18px;

    }


    .screen-heading h2 {

        font-size:
            28px;

    }


    .screen-heading p {

        font-size:
            16px;

    }


    .section-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

        gap:
            10px;

    }


    .section-card {

        min-height:
            135px;

        border-radius:
            17px;

    }


    .section-icon {

        font-size:
            40px;

    }


    .section-card strong {

        font-size:
            16px;

    }


    .product-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

        gap:
            10px;

    }


    .product-card {

        min-height:
            230px;

        padding:
            10px;

        border-radius:
            16px;

    }


    .product-image-container {

        height:
            130px;

    }


    .product-name {

        font-size:
            15px;

    }


    .product-price {

        font-size:
            16px;

    }


    .screen-toolbar {

        grid-template-columns:
            52px
            1fr
            52px;

        gap:
            8px;

    }


    .screen-toolbar h2 {

        font-size:
            23px;

    }


    .screen-toolbar p {

        font-size:
            13px;

    }


    .back-button,
    .small-voice-button {

        width:
            50px;

        height:
            50px;

    }


    .shopping-list-item {

        grid-template-columns:
            60px
            1fr;

    }


    .list-item-image {

        width:
            60px;

        height:
            60px;

    }


    .quantity-control {

        grid-column:
            1 / -1;

        justify-content:
            flex-end;

    }


    .list-summary {

        flex-direction:
            column;

    }


    .main-action-button,
    .done-button {

        min-height:
            65px;

        font-size:
            19px;

    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (
    max-width: 380px
) {

    .section-grid,
    .product-grid {

        grid-template-columns:
            1fr;

    }


    .product-image-container {

        height:
            180px;

    }

}