/* ============================================================
   MARKETPLACC – MOBIL FEJLÉC
   mobile-main.css

   Kizárólag mobil nézethez.
   ============================================================ */


/* ============================================================
   EREDETI SHOPTET FEJLÉC AZONNALI ELREJTÉSE
   ============================================================ */

@media
(max-width: 768px),
(orientation: landscape) and
(max-width: 1024px) and
(max-height: 600px) {

    #header {
        display: none !important;
    }

}


/* ============================================================
   MOBIL ÉS FEKVŐ MOBIL
   ============================================================ */

@media
(max-width: 768px),
(orientation: landscape) and
(max-width: 1024px) and
(max-height: 600px) {


    /* ========================================================
       FELSŐ INFORMÁCIÓS SÁV
       ======================================================== */

    #mp-mobile-trust-bar {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;

        min-height: 32px !important;

        padding: 5px 10px !important;

        box-sizing: border-box !important;

        background: #f7f7f7 !important;

        color: #222222 !important;

        font-size: 13px !important;

        font-weight: 600 !important;

        line-height: 1.2 !important;

        text-align: center !important;

        white-space: nowrap !important;

    }


    #mp-mobile-trust-bar
    .mp-mobile-trust-star {

        display: inline-block !important;

        margin-right: 6px !important;

        color: #d6a93a !important;

        font-size: 17px !important;

        line-height: 1 !important;

    }


    #mp-mobile-trust-bar
    .mp-mobile-trust-text {

        display: inline-block !important;

        text-align: center !important;

    }


    /* ========================================================
       FŐ MOBIL FEJLÉC
       ======================================================== */

    #mp-mobile-main-header {

        position: relative !important;

        z-index: 9990 !important;

        width: 100% !important;

        margin-bottom: 0 !important;

        padding-bottom: 0 !important;

        background: #ffffff !important;

        box-sizing: border-box !important;

        box-shadow:
            0 1px 4px
            rgba(0,0,0,.08) !important;

    }


    #mp-mobile-main-header
    .mp-mobile-header-inner {

        display: flex !important;

        align-items: center !important;

        width: 100% !important;

        min-height: 66px !important;

        padding: 4px 7px !important;

        box-sizing: border-box !important;

        background: #ffffff !important;

    }


    /* ========================================================
       KATEGÓRIA GOMB
       ======================================================== */

    .mp-mobile-category-button {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        flex: 0 0 42px !important;

        width: 42px !important;

        min-width: 42px !important;

        height: 46px !important;

        margin: 0 !important;

        padding: 0 !important;

        border: 0 !important;

        border-radius: 0 !important;

        background: #ffffff !important;

        color: #222222 !important;

        box-shadow: none !important;

        cursor: pointer !important;

        -webkit-tap-highlight-color: transparent !important;

    }


    .mp-mobile-hamburger {

        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        gap: 5px !important;

        width: 25px !important;

        height: 25px !important;

    }


    .mp-mobile-hamburger i {

        display: block !important;

        width: 25px !important;

        height: 2.5px !important;

        border-radius: 2px !important;

        background: #222222 !important;

    }


    /* ========================================================
       LOGÓ
       ======================================================== */

    .mp-mobile-logo {

        display: flex !important;

        align-items: center !important;

        justify-content: flex-start !important;

        flex: 1 1 auto !important;

        min-width: 0 !important;

        height: 58px !important;

        margin: 0 3px !important;

        padding: 0 !important;

        text-decoration: none !important;

    }


    .mp-mobile-logo img {

        display: block !important;

        width: 150px !important;

        max-width: 100% !important;

        height: 58px !important;

        object-fit: contain !important;

        object-position: left center !important;

    }


    /* ========================================================
       JOBB OLDALI GOMBOK
       ======================================================== */

    .mp-mobile-header-actions {

        display: flex !important;

        align-items: center !important;

        justify-content: flex-end !important;

        flex: 0 0 auto !important;

        height: 46px !important;

        margin: 0 !important;

        padding: 0 !important;

    }


        .mp-mobile-search-button,
    .mp-mobile-account-button,
    .mp-mobile-favorite-button,
    .mp-mobile-cart-button {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        flex: 0 0 40px !important;

        width: 40px !important;

        min-width: 40px !important;

        height: 46px !important;

        margin: 0 !important;

        padding: 0 !important;

        border: 0 !important;

        border-radius: 0 !important;

        background: transparent !important;

        box-shadow: none !important;

        text-decoration: none !important;

        cursor: pointer !important;

        -webkit-tap-highlight-color: transparent !important;

    }


    /* ========================================================
       KERESŐ IKON
       ======================================================== */

    .mp-mobile-search-icon {

        position: relative !important;

        display: block !important;

        width: 20px !important;

        height: 20px !important;

        border: 2px solid #222222 !important;

        border-radius: 50% !important;

        box-sizing: border-box !important;

    }


    .mp-mobile-search-icon::after {

        content: '' !important;

        position: absolute !important;

        right: -6px !important;

        bottom: -4px !important;

        width: 9px !important;

        height: 2px !important;

        border-radius: 2px !important;

        background: #222222 !important;

        transform: rotate(45deg) !important;

        transform-origin: center !important;

    }

    /* ========================================================
       FIÓKOM IKON
       ======================================================== */

    .mp-mobile-account-icon {

        position: relative !important;

        display: block !important;

        width: 44px !important;

        height: 44px !important;

        border-radius: 50% !important;

        background: #e9e9e9 !important;

        box-sizing: border-box !important;

    }


    .mp-mobile-account-icon::before {

        content: '' !important;

        position: absolute !important;

        left: 50% !important;

        top: 10px !important;

        width: 9px !important;

        height: 9px !important;

        margin-left: -4.5px !important;

        border-radius: 50% !important;

        background: #073b78 !important;

    }


    .mp-mobile-account-icon::after {

        content: '' !important;

        position: absolute !important;

        left: 50% !important;

        bottom: 9px !important;

        width: 20px !important;

        height: 10px !important;

        margin-left: -10px !important;

        border-radius: 10px 10px 7px 7px !important;

        background: #073b78 !important;

    }


    /* ========================================================
       KEDVENCEK
       ======================================================== */

    .mp-mobile-favorite-button {

        color: #e53935 !important;

        font-size: 27px !important;

        line-height: 1 !important;

        font-weight: 400 !important;

    }


    /* ========================================================
       KOSÁR
       ======================================================== */

        .mp-mobile-cart-button {

        position: relative !important;

    }


    .mp-mobile-cart-icon {

        display: block !important;

        font-size: 24px !important;

        line-height: 1 !important;

    }


    .mp-mobile-cart-count {

        position: absolute !important;

        top: 4px !important;

        right: 2px !important;

        display: none;

        align-items: center !important;

        justify-content: center !important;

        min-width: 17px !important;

        height: 17px !important;

        padding: 0 4px !important;

        box-sizing: border-box !important;

        border-radius: 50% !important;

        background: #d71920 !important;

        color: #ffffff !important;

        font-size: 10px !important;

        font-weight: 700 !important;

        line-height: 17px !important;

        text-align: center !important;

        z-index: 5 !important;

    }


    /* ========================================================
       INFORMÁCIÓS SÁV
       ======================================================== */

    #mp-mobile-utility-bar {

        display: flex !important;

        align-items: stretch !important;

        justify-content: space-between !important;

        width: 100% !important;

        min-height: 38px !important;

        height: 38px !important;

        margin: 0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        background: #d71920 !important;

        overflow: hidden !important;

    }


    .mp-mobile-utility-item {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        flex: 1 1 25% !important;

        width: 25% !important;

        min-width: 0 !important;

        height: 38px !important;

        margin: 0 !important;

        padding: 0 3px !important;

        box-sizing: border-box !important;

        color: #ffffff !important;

        font-size: 11px !important;

        font-weight: 600 !important;

        line-height: 1 !important;

        text-align: center !important;

        text-decoration: none !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

    }


    .mp-mobile-utility-item:not(:last-child) {

        border-right:
            1px solid
            rgba(255,255,255,.35) !important;

    }


    /* ========================================================
       SHOPTET TARTALOM – FEJLÉC UTÁNI ÜRES SÁV ELTÁVOLÍTÁSA
       ======================================================== */

    .overall-wrapper #content {

        margin-top: -40px !important;

        padding-top: 0 !important;

    }


    /* ========================================================
       KATEGÓRIA PANEL
       ======================================================== */

    #mp-mobile-category-panel {

        position: absolute !important;

        z-index: 10000 !important;

        display: block !important;

        width: max-content !important;

        max-width: calc(100vw - 20px) !important;

        max-height: calc(100vh - 120px) !important;

        overflow-y: auto !important;

        overflow-x: hidden !important;

        padding: 8px 0 !important;

        box-sizing: border-box !important;

        background: #ffffff !important;

        border:
            1px solid
            #e5e5e5 !important;

        border-radius:
            0 0 10px 10px !important;

        box-shadow:
            0 10px 30px
            rgba(0,0,0,.16) !important;

        opacity: 0 !important;

        visibility: hidden !important;

        transform:
            translateY(-5px) !important;

        transition:
            opacity .18s ease,
            transform .18s ease,
            visibility .18s ease !important;

    }


    #mp-mobile-category-panel
    .mp-mobile-category-list {

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        width: max-content !important;

        min-width: 230px !important;

        max-width: calc(100vw - 20px) !important;

    }


    #mp-mobile-category-panel
    .mp-mobile-category-link {

        display: block !important;

        width: max-content !important;

        min-width: 100% !important;

        box-sizing: border-box !important;

        padding:
            9px 16px !important;

        color: #222222 !important;

        font-size: 14px !important;

        font-weight: 500 !important;

        line-height: 1.25 !important;

        text-decoration: none !important;

        white-space: nowrap !important;

    }


    #mp-mobile-category-panel
    .mp-mobile-category-link:hover {

        background: #f5f5f5 !important;

    }


    #mp-mobile-category-panel.mp-mobile-category-open {

        opacity: 1 !important;

        visibility: visible !important;

        transform:
            translateY(0) !important;

    }


    /* ========================================================
       FEKVŐ MOBIL NÉZET
       ======================================================== */

    @media
    (orientation: landscape) and
    (max-width: 1024px) and
    (max-height: 600px) {


        #mp-mobile-trust-bar {

            min-height: 30px !important;

            height: 30px !important;

            padding:
                3px 10px !important;

            font-size: 12px !important;

        }


        #mp-mobile-trust-bar
        .mp-mobile-trust-star {

            font-size: 16px !important;

            margin-right: 5px !important;

        }


        #mp-mobile-main-header
        .mp-mobile-header-inner {

            min-height: 58px !important;

            height: 58px !important;

            padding:
                2px 8px !important;

        }


        .mp-mobile-category-button {

            height: 42px !important;

        }


        .mp-mobile-hamburger {

            width: 23px !important;

            height: 23px !important;

        }


        .mp-mobile-hamburger i {

            width: 23px !important;

        }


        .mp-mobile-logo {

            height: 52px !important;

        }


        .mp-mobile-logo img {

            width: 150px !important;

            height: 52px !important;

        }


        .mp-mobile-header-actions {

            height: 42px !important;

        }


                .mp-mobile-search-button,
        .mp-mobile-account-button,
        .mp-mobile-favorite-button,
        .mp-mobile-cart-button {

            flex-basis: 38px !important;

            width: 38px !important;

            min-width: 38px !important;

            height: 42px !important;

        }


        .mp-mobile-search-icon {

            width: 19px !important;

            height: 19px !important;

        }


        .mp-mobile-favorite-button {

            font-size: 25px !important;

        }


        .mp-mobile-cart-icon {

            font-size: 22px !important;

        }


        #mp-mobile-utility-bar {

            min-height: 36px !important;

            height: 36px !important;

        }


        .mp-mobile-utility-item {

            height: 36px !important;

            font-size: 11px !important;

        }


        #mp-mobile-category-panel {

            max-height:
                calc(100vh - 95px) !important;

        }

    }


    /* ========================================================
       KISEBB MOBILOK
       ======================================================== */

    @media (max-width: 380px) {


        .mp-mobile-logo img {

            width: 135px !important;

            height: 54px !important;

        }


        .mp-mobile-category-button {

            flex-basis: 38px !important;

            width: 38px !important;

            min-width: 38px !important;

        }


                .mp-mobile-search-button,
        .mp-mobile-account-button,
        .mp-mobile-favorite-button,
        .mp-mobile-cart-button {

            flex-basis: 36px !important;

            width: 36px !important;

            min-width: 36px !important;

        }


        .mp-mobile-utility-item {

            font-size: 10px !important;

        }


        #mp-mobile-trust-bar {

            font-size: 12px !important;

        }

    }

}

/* ========================================================
   BEJELENTKEZÉS – FEHÉR HÁTTÉR
   ======================================================== */

#mp-mobile-main-header a[href="/bejelentkezes/"] {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

#mp-mobile-main-header a[href="/bejelentkezes/"] * {
    background: transparent !important;
}