/* Az offcanvas (mobil hamburger) menü kinézetének pixel-pontos igazítása */
/* a nyitólap (manufacturer / Helix Ultimate) offcanvas menüjéhez: fehér */
/* panel, jobbról nyílik, 300px széles, vastag/tiszta lista-tipó, vékony */
/* elválasztóvonalak a menüpontok közt, kerek "bezár" fül a panel bal */
/* szélén. A vp_smart offcanvas motorja (jQuery mmenu) technikailag */
/* egészen más, mint a manufacturer sablon saját, kézzel írt csúsztatott */
/* panelje (lásd templates/manufacturer/scss/offcanvas.scss), de a */
/* végeredmény CSS-sel vizuálisan megegyeztethető, JS-csere nélkül. */
/* A position="right"/zposition="front" kényszerítése a layouts/default/ */
/* menu/offcanvas.php-ban történik (data-position/data-zposition attribok), */
/* mert ezt a JS init-kor olvassa ki - CSS-ből nem befolyásolható. */

/* --- Panel: méret és alap szín (ID-szelektor, hogy a mmenu saját, --- */
/* futásidőben hozzáadott .mm-menu{width:80%} szabályát felülírja) --- */
#vpf-offcanvas {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    background-color: #ffffff;
    box-shadow: -10px 0 30px rgba(0, 0, 0, .12);
}

@media (max-width: 360px) {
    #vpf-offcanvas {
        width: 86vw;
        min-width: 240px;
        max-width: 300px;
    }
}

/* A ténylegesen görgethető réteg (.mm-panel) átlátszó: a fenti, nem */
/* görgethető #vpf-offcanvas fehér háttere/vízjele látszik át mögötte, */
/* és görgetéskor nem mozog együtt a listával. Egyszintű menünél a */
/* .mm-panel és a .mm-list UGYANAZ az elem (nincs külön csomagoló div), */
/* ezért a padding-ot lentebb, a .mm-list szabályban állítjuk be - itt */
/* csak a hátteret nullázzuk, hogy ne írja felül. */
#vpf-offcanvas .mm-panel {
    background: transparent;
}

/* Fejléc-sáv (mmenu "Menu" cím + beépített x gomb) elrejtése - ez a JS */
/* header-add="false" miatt (layouts/default/blocks/offcanvas.php) már */
/* nem is jön létre, ez csak védőháló, ha valamiért mégis mm-hasheader */
/* classt kapna az elem. A helyes osztálynév .mm-header (NEM .mm-navbar - */
/* az utóbbi nem is létezik ebben a jQuery mmenu verzióban, ezért a */
/* korábbi próbálkozás nem tüntette el a sávot). A manufacturer */
/* offcanvasnak nincs ilyen sávja, csak a lista + a saját bezáró gomb. */
#vpf-offcanvas .mm-header {
    display: none !important;
}
#vpf-offcanvas.mm-hasheader .mm-panel {
    padding-top: 30px !important;
}

/* Az "offcanvas" Joomla-modulpozícióba töltött modul (ha van ilyen) a */
/* mmenu-ben automatikusan lábléc ("mm-footer") lesz, és UGYANAZT a */
/* menüfát jeleníti meg még egyszer, stílusozatlan Bootstrap nav-pills */
/* listaként (innen a duplázottnak tűnő, piros/kék "második lista" a */
/* panel alján). A manufacturer offcanvasnak nincs ilyen második blokkja, */
/* ezért ez itt is elrejtve - a fő listán (fent) kívül semmi más nem */
/* jelenik meg a panelben. */
#vpf-offcanvas .mm-footer {
    display: none !important;
}
#vpf-offcanvas.mm-hasfooter > .mm-panel:after {
    display: none !important;
    content: none !important;
}

/* Sötétítő overlay (mmenu "blocker") - a manufacturer .offcanvas-overlay */
/* rgba(0,0,0,.5)-ével azonos erősségű, méretkorláttól függetlenül. */
#mm-blocker {
    background-color: rgba(0, 0, 0, .5) !important;
    opacity: 1 !important;
}

/* --- Lista: elválasztóvonalak, tipó (manufacturer offcanvas.scss --- */
/* .offcanvas-inner .sp-module ul>li szabályai alapján, byte-pontosan) --- */
/* A 30px a manufacturer .offcanvas-inner{padding:30px}-ét tükrözi - lásd */
/* a fenti megjegyzést arról, hogy ez az elem egyszerre .mm-panel is. */
#vpf-offcanvas .mm-list {
    padding: 30px;
}
#vpf-offcanvas .mm-list:after {
    display: none;
}
#vpf-offcanvas .mm-list > li {
    border: 0;
}
#vpf-offcanvas .mm-list > li:after {
    display: none;
}
#vpf-offcanvas .mm-list > li:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
#vpf-offcanvas .mm-list > li > a:not(.mm-subopen):not(.mm-subclose),
#vpf-offcanvas .mm-list > li > span {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 36px;
    letter-spacing: -0.3px;
    color: #252525 !important;
    background: transparent;
    padding: 10px 0;
    margin: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
#vpf-offcanvas .mm-list > li:last-child > a,
#vpf-offcanvas .mm-list > li:last-child > span {
    padding-bottom: 0;
}
#vpf-offcanvas .mm-list > li.mm-selected > a:not(.mm-subopen),
#vpf-offcanvas .mm-list > li.mm-selected > span {
    background: transparent;
}

/* Aktív/aktuális menüpont - ugyanaz a márka-gradiens szöveg-kiemelés, */
/* mint a fejléc dekstop menüjében (header-match.css). */
#vpf-offcanvas .mm-list > li.active > a,
#vpf-offcanvas .mm-list > li.active > span,
#vpf-offcanvas .mm-list > li.current > a,
#vpf-offcanvas .mm-list > li.current > span {
    background: linear-gradient(135deg, #fde402, #ec673c, #b24a95, #3e7bbe) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* Almenü-nyitó nyíl (ha van gyerekmenü) - visszafogott, világos elválasztó */
#vpf-offcanvas .mm-list a.mm-subopen:before {
    border-left-color: rgba(0, 0, 0, .1);
}
#vpf-offcanvas .mm-list a.mm-subopen:after,
#vpf-offcanvas .mm-list a.mm-subclose:before {
    border-color: rgba(0, 0, 0, .4);
}
#vpf-offcanvas .mm-list a.mm-subclose {
    background: rgba(0, 0, 0, .04);
    color: #252525;
}

/* --- Bezáró gomb: kerek "fül" a panel BAL szélén (mivel a panel a --- */
/* jobb oldalon nyílik, a manufacturer .close-offcanvas jobb-lekerekített */
/* fülének tükrözött változata: lekerekítve a tartalom felé néző oldalon). */
#vpf-offcanvas .btn-offcanvas-close {
    box-sizing: border-box !important;
    position: absolute !important;
    top: 15px !important;
    left: -26px !important;
    right: auto !important;
    bottom: auto !important;
    width: 52px !important;
    height: 36px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 36px !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    background: #ffffff !important;
    color: #000000 !important;
    border: 0 !important;
    border-radius: 20px 0 0 20px !important;
    box-shadow: -4px 2px 10px rgba(0, 0, 0, .12) !important;
    z-index: 10 !important;
    opacity: 1 !important;
}
#vpf-offcanvas .btn-offcanvas-close:hover,
#vpf-offcanvas .btn-offcanvas-close:focus,
#vpf-offcanvas .btn-offcanvas-close:active {
    color: #000000;
    background: #ffffff;
    outline: 0;
}