/* =========================================================
   11. TUOTESUODATIN
   VG PRODUCT FILTER
   Sivusta avautuva tuotesuodatin
 ========================================================= */


/* =========================================================
   11.1 SUODATTIMEN AVAUSPAINIKE – YHTEISET ASETUKSET
   ========================================================= */

.vg-filter-open-wrapper {
    z-index: 9997;
}

.vg-filter-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font: inherit;
    border: 0;
    background: #f5f5f5;
    cursor: pointer;
    box-sizing: border-box;
/* Älä anna teeman määrätä ylimääräistä korkeutta */
        height: auto;
        min-height: 0;
/* Ikonin ja tekstin välinen etäisyys */
        gap: 8px;
}

.vg-filter-open-icon {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
/* Estää mahdolliset teeman img-marginaalit */
        margin: 0;
}

.vg-filter-open-label {
    display: inline-block;
}


/* =========================================================
   11.1.1 DESKTOP
   Vasemmassa reunassa mukana kulkeva lippa
   ========================================================= */

@media (min-width: 768px) {

    .vg-filter-open-wrapper {
        position: fixed;
        left: 0;
        top: 40%;
        transform: translateY(-50%);
        z-index: 9997;
    }

    .vg-filter-open {
        width: 110px;
        padding: 16px 10px;
        flex-direction: column;
        border: none;
        border-radius: 0 6px 6px 0;
        background: #b1b9c1;
				color: white;
			  font-weight: normal;
        box-shadow: 0 4px 4px rgba(0,0,0,.15);
        text-align: center;
        line-height: 1.2;
    }

}


/* =========================================================
   11.1.2 MOBIILI
   Nappi on ensin normaalisti sisällössä.
   JS lisää .is-mobile-sticky-luokan, kun nappi vierii yläreunaan.
   ========================================================= */

@media (max-width: 767px) {

    .vg-filter-open-wrapper {
        position: relative;
        width: 100%;
        z-index: 9997;
        background: #fff;
    }

    .vg-filter-open {
        width: calc(100% - 60px);
        margin: 20px auto 0;
        min-height: 48px;
        padding: 10px 16px;
        flex-direction: row;
        justify-content: center;
        text-align: center;
        background: #b1b9c1;
				color: white;
			  font-weight: normal;
        border-radius: 10px;
    }

    /* Kun nappi on vieritetty ohi, se kiinnitetään ruudun yläreunaan */
    .vg-filter-open-wrapper.is-mobile-sticky .vg-filter-open {
    position: fixed;

    top: 20px;
    left: 20px;
    right: 20px;

    width: auto;
    margin: 0;

    z-index: 9997;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    }
}


/* ---------------------------------------------------------
   11.2 Taustan tummentava overlay paneelin takana
   --------------------------------------------------------- */

.vg-filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 9998;
}


/* ---------------------------------------------------------
   11.3 Varsinainen sivusta aukeava suodatinpaneeli
   --------------------------------------------------------- */

.vg-filter-panel {
    position: fixed;
    top: 0;
    left: 0;

    width: 320px;
    max-width: 90vw;
    height: 100vh;

    background: #fff;

    transform: translateX(-100%);
    transition: transform 0.25s ease;

    z-index: 9999;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;
}

/*Piilota tyhjät p-tagit*/
.vg-filter-panel > p:empty,
.vg-product-filter > p:empty {
    display: none;
    margin: 0;
    padding: 0;
}


/* ---------------------------------------------------------
   11.4 Kun suodatin on auki:
      - overlay näkyviin
      - paneeli liukuu sisään
   --------------------------------------------------------- */

.vg-filter-ui.is-open .vg-filter-overlay {
    opacity: 1;
    visibility: visible;
}

.vg-filter-ui.is-open .vg-filter-panel {
    transform: translateX(0);
}


/* ---------------------------------------------------------
   11.5 Paneelin yläosa:
      otsikko + sulkemisnappi
   --------------------------------------------------------- */

.vg-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex: 0 0 auto;

    padding: 18px 20px 10px;

    border-bottom: 1px solid #ddd;
}


/* ---------------------------------------------------------
   11.6 Paneelin otsikko "Rajaa tuotteita"
   --------------------------------------------------------- */

.vg-filter-heading {
    font-size: 20px;
    font-weight: 500;
	  margin: 0;
    line-height: 1.2;
}


/* ---------------------------------------------------------
   11.7 Sulkemisnappi (X)
   --------------------------------------------------------- */

.vg-filter-close {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    border: 0;
    background: transparent;

    color: #000;

    cursor: pointer;
}

.vg-filter-close-icon {
    display: block;
    width: 20px;
    height: 20px;
}


/* ---------------------------------------------------------
   11.8 Koko lomake paneelin sisällä
   --------------------------------------------------------- */

.vg-product-filter {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;

    margin: 0;
    padding: 0;
}

/* ---------------------------------------------------------
   11.9 Suodatinryhmien sisältöalue
      Tämä osa saa scrollata tarvittaessa
   --------------------------------------------------------- */

.vg-filter-groups {
    overflow-y: auto;
    padding: 0 20px;
}

@media (max-width: 767px) {

    .vg-filter-groups {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

}

/* ---------------------------------------------------------
   11.10 Yksittäinen suodatinryhmä
       Esim. Väri / Valaisintyyppi / Valonlähde
   --------------------------------------------------------- */

.vg-filter-group {
    border-bottom: 1px solid #ddd;
}


/* ---------------------------------------------------------
   11.11 Ryhmän avauspainike
       Esim. "Väri   v"
   --------------------------------------------------------- */

.vg-filter-group-toggle {
    width: 100%;

    padding: 14px 0px 14px 0;

    border: 0;
    background: transparent;

    display: flex;
    align-items: center;
    justify-content: space-between;

    font: inherit;
    text-align: left;
    color: #000;
    cursor: pointer;
}

.vg-filter-group-toggle > span:first-child {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}


/* ---------------------------------------------------------
   11.12 Ryhmän nuoli / chevron
   --------------------------------------------------------- */
.vg-filter-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    transform: translateY(1px);
}

.vg-filter-chevron svg {
    display: block;
    width: 20px;
    height: 20px;
    transform-origin: center;
    transition: transform 0.2s ease;
}


/* ---------------------------------------------------------
   11.13 Kun ryhmä on auki, nuoli kääntyy
   --------------------------------------------------------- */

.vg-filter-group.is-open .vg-filter-chevron svg {
    transform: rotate(180deg);
}


/* ---------------------------------------------------------
   11.14 Ryhmän checkbox-lista
       Oletuksena piilossa
   --------------------------------------------------------- */

.vg-filter-options {
    display: none;

    padding: 0 0 10px;
}


/* ---------------------------------------------------------
   11.15 Avoimen ryhmän checkbox-lista näkyviin
   --------------------------------------------------------- */

.vg-filter-group.is-open .vg-filter-options {
    display: block;
}


/* ---------------------------------------------------------
   11.16 Yksittäinen checkbox-rivi
       Esim. [ ] Musta

       Tärkeä:
       display:flex pitää checkboxin ja tekstin samalla rivillä
   --------------------------------------------------------- */

.vg-filter-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 1px 0;
    margin: 0;
    cursor: pointer;
}


/* ---------------------------------------------------------
   11.17 Checkbox itse
       Estää teemaa venyttämästä checkboxia oudosti
   --------------------------------------------------------- */

.vg-filter-option input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
}


/* ---------------------------------------------------------
   11.18 Checkboxin vieressä oleva teksti
       Esim. "Musta"
   --------------------------------------------------------- */

.vg-filter-option > span {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}


/* ---------------------------------------------------------
   11.19 Paneelin alaosa
       "Näytä tulokset" + "Tyhjennä suodattimet"
   --------------------------------------------------------- */

.vg-filter-footer {
    margin-top: auto;
    padding: 16px 20px 24px;
    background: #fff;
	margin-bottom: 0;
}

@media (max-width: 767px) {

    .vg-filter-footer {
		flex: 0 0 auto;
        position: relative;
        z-index: 2;

        padding: 16px 20px calc(80px + env(safe-area-inset-bottom));
    }

}


/* ---------------------------------------------------------
   11.20 "Näytä tulokset" -painike
   --------------------------------------------------------- */

.vg-filter-apply {
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
	background-color: #b1b9c1;
	color: white;
	font-family: inherit;
}


/* ---------------------------------------------------------
   11.21 "Tyhjennä suodattimet" -painike
   --------------------------------------------------------- */

.vg-filter-clear {
    display: block;

    width: 100%;

    margin-top: 10px;

    border: 0;
    background: transparent;
	color: #000;
    cursor: pointer;

    text-decoration: underline;
}


/* ---------------------------------------------------------
   11.22 Kun suodatinpaneeli on auki,
       estetään taustasivun scrollaus
   --------------------------------------------------------- */

body.vg-filter-opened {
    overflow: hidden;
}


/* ---------------------------------------------------------
   11.23 MOBIILI
       Paneeli täyttää koko ruudun leveyden
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .vg-filter-panel {
        width: 100vw;
        max-width: 100vw;
        overflow: hidden;
        /* VANHA height: 100dvh;*/
        max-height: 100dvh;

	}
}
	
/* iPad / tablet */
@media (min-width: 768px) and (max-width: 1180px) {

    .vg-filter-panel {
        height: 100vh;
        max-height: 100vh;

        height: 100svh;
        max-height: 100svh;
    }

}

/* ---------------------------------------------------------
   12.1 Lataus overlay
   --------------------------------------------------------- */
.vg-filter-loading-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 1);
    opacity: 0;
    visibility: hidden;
    z-index: 10000;
    transition: opacity 0.15s ease;
}

.vg-filter-ui.is-loading .vg-filter-loading-overlay {
    opacity: 1;
    visibility: visible;
}

.vg-filter-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    font-size: 16px;
    text-align: center;
}

.vg-filter-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #ddd;
    border-top-color: #666;
    border-radius: 50%;
    animation: vg-filter-spin 0.8s linear infinite;
}

@keyframes vg-filter-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------------------------------------------------------
   12.2 "Latauslamppu"
   --------------------------------------------------------- */
.vg-filter-loading-lamp {
    display: block;
    width: 100px;
    height: 100px;
}

.vg-filter-loading-lamp .vg-lamp-body,
.vg-filter-loading-lamp .vg-lamp-ray {
    fill: none;
    stroke: #000;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Hohdeviivat oletuksena himmeinä */
.vg-filter-loading-lamp .vg-lamp-ray {
    opacity: 0;
    animation: vg-lamp-ray-blink 1.8s linear infinite;
}

/* Viiveet niin, että ne syttyvät yksi kerrallaan */
.vg-filter-loading-lamp .ray-1 { animation-delay: 0s; }
.vg-filter-loading-lamp .ray-2 { animation-delay: 0.2s; }
.vg-filter-loading-lamp .ray-3 { animation-delay: 0.4s; }
.vg-filter-loading-lamp .ray-4 { animation-delay: 0.6s; }
.vg-filter-loading-lamp .ray-5 { animation-delay: 0.8s; }
.vg-filter-loading-lamp .ray-6 { animation-delay: 1.0s; }
.vg-filter-loading-lamp .ray-7 { animation-delay: 1.2s; }
.vg-filter-loading-lamp .ray-8 { animation-delay: 1.4s; }
.vg-filter-loading-lamp .ray-9 { animation-delay: 1.6s; }

@keyframes vg-lamp-ray-blink {
    0% {
        opacity: 1;
        stroke-width: 0.6;
    }
    8% {
        opacity: 1;
        stroke-width: 2.2;
    }
    16% {
        opacity: 1;
        stroke-width: 0.6;
    }
    100% {
        opacity: 1;
        stroke-width: 0.6;
    }
}

.vg-filter-loading-overlay p:empty,
.vg-filter-loading-content p:empty {
    display: none;
    margin: 0;
    padding: 0;
}

/*Debug lamppuun

.vg-filter-loading-lamp .vg-lamp-ray {
    display: block !important;
    opacity: 1 !important;
    stroke: red !important;
    stroke-width: 3 !important;
    animation: none !important;
}*/



/* DEBUG-VÄRIT 

.vg-filter-panel {
    background: rgba(255, 0, 0, 0.9) !important;
}

.vg-filter-header {
    background: rgba(255, 165, 0.9) !important;
}

.vg-product-filter {
    background: rgba(255, 255, 0, 0.9) !important;
}

.vg-filter-groups {
    background: rgba(0, 128, 255, 0.9) !important;
}

.vg-filter-footer {
    background: rgba(0, 200, 100, 0.9) !important;
}

.vg-filter-apply {
    background: rgba(180, 0, 255, 0.9) !important;
}

.vg-filter-clear {
    background: rgba(255, 0, 180, 0.9) !important;
}*/