.elementor-10578 .elementor-element.elementor-element-383acc06{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0%;--padding-bottom:0%;--padding-left:2%;--padding-right:2%;}.elementor-10578 .elementor-element.elementor-element-1069c3a0{width:var( --container-widget-width, 75% );max-width:75%;--container-widget-width:75%;--container-widget-flex-grow:0;}.elementor-10578 .elementor-element.elementor-element-1069c3a0 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-10578 .elementor-element.elementor-element-1069c3a0.elementor-element{--align-self:flex-end;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}body:not(.rtl) .elementor-10578 .elementor-element.elementor-element-55d20af8{left:50%;}body.rtl .elementor-10578 .elementor-element.elementor-element-55d20af8{right:50%;}.elementor-10578 .elementor-element.elementor-element-55d20af8{top:47%;z-index:9;}.elementor-10578 .elementor-element.elementor-element-55d20af8 img{width:70%;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-10578 .elementor-element.elementor-element-383acc06{--content-width:1440px;}}@media(max-width:1024px){.elementor-10578 .elementor-element.elementor-element-383acc06{--min-height:85dvh;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-10578 .elementor-element.elementor-element-1069c3a0{width:100%;max-width:100%;}body:not(.rtl) .elementor-10578 .elementor-element.elementor-element-55d20af8{left:31%;}body.rtl .elementor-10578 .elementor-element.elementor-element-55d20af8{right:31%;}.elementor-10578 .elementor-element.elementor-element-55d20af8{top:34%;}.elementor-10578 .elementor-element.elementor-element-55d20af8 img{width:50%;}}@media(max-width:767px){.elementor-10578 .elementor-element.elementor-element-383acc06{--padding-top:0%;--padding-bottom:0%;--padding-left:1%;--padding-right:0%;}body:not(.rtl) .elementor-10578 .elementor-element.elementor-element-55d20af8{left:34%;}body.rtl .elementor-10578 .elementor-element.elementor-element-55d20af8{right:34%;}.elementor-10578 .elementor-element.elementor-element-55d20af8{top:30vw;}.elementor-10578 .elementor-element.elementor-element-55d20af8 img{width:30px;}}/* Start custom CSS for html, class: .elementor-element-1069c3a0 */*,
*:before,
*:after { box-sizing: border-box; }

#container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* SVG 100% szélesség */
#product-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Fal/overlay stílus */
.wall-shape {
  fill: #D69579;
  opacity: 0.65;
  stroke: #D69579;
  stroke-width: 1.5;
}

/* (ajánlott) a tooltip ne fogja a klikket: */
.elementor-10578 .elementor-element.elementor-element-1069c3a0 .sill-color .tooltiptext { pointer-events: none; }


/* Választó panelek */
.elementor-10578 .elementor-element.elementor-element-1069c3a0 section{
  position: fixed;
  bottom: 60px;
  left: 2em;
  width: 25%;
  z-index: 9;
}

.colors {
  display: flex;
  gap: 10px 0;
  flex-wrap: wrap;
}

#sillColorSwitch, #wallColorSwitch { width: 100%; }

.elementor-10578 .elementor-element.elementor-element-1069c3a0 h2{
  width: 100%;
  font-family: "Jost", Sans-Serif;
  letter-spacing: -0.5px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.4rem;
}

.sill-colors {
  display: flex;
  gap: 10px 0;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Szín elemek */
.color {
  height: 36px;
  width: 36px;
  margin-left: 0.5em;
  border-radius: 0;
  border: none;
  cursor: pointer;
  box-shadow: rgba(0,0,0,.4) 0 2px 4px,
              rgba(0,0,0,.3) 0 7px 13px -3px,
              rgba(0,0,0,.2) 0 -3px 0 inset !important;
}

.sill-color {
  position: relative;
  height: 45px;
  min-width: 30%;
  margin-left: 0.5em;
  border-radius: 0;
  border: none;
  cursor: pointer;
  background-size: 150% !important;
  background-repeat: no-repeat !important;
  box-shadow: rgba(0,0,0,.4) 0 2px 4px,
              rgba(0,0,0,.3) 0 7px 13px -3px,
              rgba(0,0,0,.2) 0 -3px 0 inset !important;
}

/* Tooltip ne fogja meg a kattintást */
.sill-color .tooltiptext { pointer-events: none; }

.sill-color .tooltiptext{
  visibility: hidden;
  width: fit-content;
  background-color: #1D9E78;
  color: #fff;
  text-align: center;
  border-radius: 0;
  padding: 5px 5px 7px;
  font-family: "Poppins", Sans-Serif;
  font-size: 14px;
  position: absolute;
  z-index: 1;
  margin-top: -35px;
  box-shadow: rgba(0,0,0,.4) 0 2px 4px,
              rgba(0,0,0,.3) 0 7px 13px -3px,
              rgba(0,0,0,.2) 0 -3px 0 inset !important;
}
.sill-color:hover .tooltiptext{ visibility: visible; }

.elementor-10578 .elementor-element.elementor-element-1069c3a0 .colors img, .elementor-10578 .elementor-element.elementor-element-1069c3a0 .sill-colors img{ display: none; }

/* Tablet */
@media screen and (max-width: 1024px){
  .elementor-10578 .elementor-element.elementor-element-1069c3a0 section{
    position: fixed;
    bottom: 2em;
    left: 2em;
    width: 95%;
    z-index: 9;
    display: flex;
    gap: 25px;
  }
  .sill-color{ height: 35px; min-width: 20%; }
  .colors{ width: 50%; }
  .sill-colors{ width: 50%; }
  .elementor-10578 .elementor-element.elementor-element-1069c3a0 h2{ margin: 5px 0; }
}

/* Mobil */
@media screen and (max-width: 767px), (max-height: 767px){
  .elementor-10578 .elementor-element.elementor-element-1069c3a0 section{
    position: fixed;
    bottom: 1.5em;
    left: 2%;
    width: 80%;
    z-index: 9;
    display: flex !important;
    gap: 20px;
    flex-wrap: nowrap;
    flex-direction: column;
  }
  .sill-color{ height: 35px; min-width: 20%; }
  .color{ width: 20%; }

  .color, .sill-color{
    visibility: hidden;
    height: 0;
    opacity: 0;
    transition: all .25s ease-in-out;
  }
  .color.open, .sill-color.open{
    visibility: visible;
    height: 35px;
    opacity: 1;
    transition: all .25s ease-in-out;
  }

  .sill-colors, .colors{
    width: 100%;
    justify-content: flex-start;
    row-gap: 10px;
    column-gap: 0;
  }

  .elementor-10578 .elementor-element.elementor-element-1069c3a0 #sillColorSwitch, .elementor-10578 .elementor-element.elementor-element-1069c3a0 #wallColorSwitch{
    padding: 10px;
    background-color: #1D9E78;
    color: white;
    box-shadow: rgba(0,0,0,.4) 0 2px 4px,
                rgba(0,0,0,.3) 0 7px 13px -3px,
                rgba(0,0,0,.2) 0 -3px 0 inset !important;
    display: flex;
  }
  .elementor-10578 .elementor-element.elementor-element-1069c3a0 #sillColorSwitch:hover, .elementor-10578 .elementor-element.elementor-element-1069c3a0 #wallColorSwitch:hover{
    background-color: #D2123C;
  }
  .elementor-10578 .elementor-element.elementor-element-1069c3a0 h2{ font-size: 18px; font-weight: 500; }
  .elementor-10578 .elementor-element.elementor-element-1069c3a0 .colors img, .elementor-10578 .elementor-element.elementor-element-1069c3a0 .sill-colors img{
    display: block;
    width: 25px;
    -webkit-filter: invert(100%);
    filter: invert(100%);
  }
}

/* Alacsony kijelző */
@media screen and (max-height: 767px){
  .elementor-10578 .elementor-element.elementor-element-1069c3a0 section{ width: 35%; }
}/* End custom CSS */