/*
Theme Name: Epoint Child
Description: Child Theme for Epoint Wordpress Theme
Author: zozothemes
Version: 1.0
Template: epoint
Tags: two-columns, three-columns, left-sidebar, right-sidebar, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, post-formats, sticky-post, theme-options
Text Domain: epoint
*/ 
*{
  outline: none;
  box-shadow: none; /* optional: remove subtle default shadow too */
}

#product-3d-canvas-wrap {
  position: relative;
  aspect-ratio: 16 / 9;  /* force 16:9 shape */
  width: 100%;           /* take full width of container */
  max-height: 100vh;     /* don’t exceed viewport height */
  overflow: hidden;
}

#product-3d-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Loading overlay */
#product-3d-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(132,132,132,0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;

  opacity: 1;               /* visible by default */
  transition: opacity 1.5s ease; /* fade out smoothly */
}

#product-3d-loading-text {
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;          /* space between text and bar */
  text-align: center;
  text-shadow: 0 0 5px rgba(0,0,0,0.7); /* stand out on any background */
}

#product-3d-loading-bar-container {
  width: 60%;
  height: 12px;
  background: rgba(255,255,255,0.2);
  border-radius: 6px;
  overflow: hidden;
}

#product-3d-loading-bar {
  width: 0%;
  height: 100%;
  background: #0BA2ED;
  transition: width 0.3s;
}


#product-3d-loading-text {
  color: #ffffff;          /* make it clearly visible */
  font-size: 24px;         /* large text */
  font-weight: bold;
  margin-bottom: 20px;     /* space between text and bar */
  text-align: center;
  text-shadow: 0 0 5px rgba(0,0,0,0.7); /* make text stand out more */
}

/* UI overlay */
#product-3d-ui {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(30, 30, 30, 0.8);
  border-radius: 0 0 8px 0;
  color: #fff;
  font-size: 13px !important;
  max-width: 150px;
  min-width: 150px;
  z-index: 20;
  transition: transform 0.3s ease;
  transform: translateX(-150px);
  max-height: 100%;       /* restrict to the canvas height */
  overflow-y: auto;       /* enable vertical scrolling */
  scrollbar-width: thin;  /* optional: slimmer scrollbar (Firefox) */
  -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
}


#product-3d-ui.visible {
  transform: translateX(0); /* slide into view */
}

/* Tab buttons */
#product-3d-ui .tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 6px;
}

#product-3d-ui .tabs button {
  flex: 1;
  padding: 4px;
  background: #444;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 12px;
}

#product-3d-ui .tabs button.active {
  background: rgba(30, 30, 30, 0);
  font-weight: bold;
}

/* ---- PAGE-BASED ROUNDING ---- */

#product-3d-ui { --tab-radius: 8px; }
#product-3d-ui .tabs button {
  border-radius: 0;
  transition: border-radius 0ms ease;
}

/* Page 1 active → 2nd button bottom-left */
#product-3d-ui.page-1-active .tabs button:nth-child(2) {
  border-bottom-left-radius: var(--tab-radius);
}

/* Page 2 active → 1st bottom-right + 3rd bottom-left */
#product-3d-ui.page-2-active .tabs button:nth-child(1) {
  border-bottom-right-radius: var(--tab-radius);
}
#product-3d-ui.page-2-active .tabs button:nth-child(3) {
  border-bottom-left-radius: var(--tab-radius);
}

/* Page 3 active → 2nd bottom-right + 4th bottom-left */
#product-3d-ui.page-3-active .tabs button:nth-child(2) {
  border-bottom-right-radius: var(--tab-radius);
}
#product-3d-ui.page-3-active .tabs button:nth-child(4) {
  border-bottom-left-radius: var(--tab-radius);
}

/* Page 4 active → 3rd bottom-right */
#product-3d-ui.page-4-active .tabs button:nth-child(3) {
  border-bottom-right-radius: var(--tab-radius);
}


/* Pages */
#product-3d-ui .page {
  display: none;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
#product-3d-ui .page.active {
  display: block;
}

.product-3d-viewer-tab-title{
  font-size: 20px;
  color: #ffffff;
  text-align: center;
}


#product-3d-mini-ui {
  transition: transform 0.3s ease;
  transform: translateX(50px);
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;
  background: rgba(30, 30, 30, 0.8);
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 5px;
  padding-left: 5px;
  border-radius: 8px;
  color: #000;
  font-size: 14px;
  z-index: 20;
  width: 40px;
  outline: none;
  box-shadow: none; /* optional: remove subtle default shadow too */
}

#product-3d-mini-ui a img {
  width: 60%; /* scale icons to 70% of their original size */
  filter: brightness(0.7); /* make icon brighter on hover */
  transition: filter 0.3s ease; /* smooth hover effect */
  cursor: pointer;
  outline: none;
  box-shadow: none; /* optional: remove subtle default shadow too */
}

#product-3d-mini-ui a img:hover {
  filter: brightness(1.2); /* make icon brighter on hover */
  cursor: pointer;
}


.product-3d-mini-btn {
  display: block !important;
  position: relative;
  outline: none;
  box-shadow: none; /* optional: remove subtle default shadow too */
}

.tooltip-text {
  transform-origin: right center;; /* grow from the left side */
  transform: scaleX(0); /* start collapsed */
  visibility: hidden;
  width: 110px;
  background-color: rgba(30, 30, 30, 0.8);
  color: #fff;
  text-align: center;
  border-radius: 5px 0px 0px 5px;
  padding: 0px 14px;
  position: absolute;
  bottom: -4px; /* adjust based on button size */
  right: 35px;
  font-size: 12px;
  z-index: 19;
  overflow: hidden;
  transition: transform 0.1s ease;
  max-width: 0; /* start collapsed */
}

.product-3d-mini-btn:hover .tooltip-text {
  transform: scaleX(1); /* grow to full width */
  visibility: visible;
  max-width: 200px; /* adjust to accommodate your longest tooltip */
}

#product-3d-mod-menu{
  transition: transform 0.3s ease;
  transform: translateY(-50px);
  position: absolute !important;
  top: 13px !important;
  right: 7px !important;
  color: #ffffff;
  border: 3px solid rgba(255, 255, 255, 0);
  font-size: 14px;
  z-index: 20;
  width: 280px;
  outline: none;
  box-shadow: none; /* optional: remove subtle default shadow too */
}

.product-3d-mod-btn{
  text-decoration: none;
  cursor: pointer;
  margin-left: 10px;
  color: white;
  background: rgba(30, 30, 30, 0.8);
  padding: 10px;
  border-radius: 8px;

}

.product-3d-mod-btn:hover{
  color: #0A84FF;
  border-bottom: 3px solid #0A84FF;
}

#product-3d-ui label {
  display: block;
}

#product-3d-ui input,
#product-3d-ui select,
#product-3d-ui button {
  width: 100%;
  cursor: pointer;
  outline: none;
  box-shadow: none; /* optional: remove subtle default shadow too */
}

#product-3d-mini-ui button {
  width: 100%;
  cursor: pointer;
  outline: none;
  box-shadow: none; /* optional: remove subtle default shadow too */
}

.product-3d-ui-options-holder{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-3d-ui-options-divider{
  border-top: 1px solid grey;
  width: 100%;
  margin-top:4px;
  margin-bottom: 4px;
}

.product-3d-rotation-button{
  border-radius: 100px;
  width: 17px;
  background-color: #777777;
  border: 0px solid grey;
  color: white;
  height: 17px;
  text-decoration: none;
  text-align: center;
  font-size: 14px;
  line-height: 17px;
  margin-left: 7px;
  outline: none;
  box-shadow: none; /* optional: remove subtle default shadow too */
}

.product-3d-rotation-button:hover{
  background-color: #0A84FF;
  color: white !important;
  cursor: pointer;
}

/* Ultra-compact, flex-ready iOS toggle */
.ios-toggle {
  position: relative;      /* container for knob & track */
  width: 38px;             /* total width */
  height: 26px;            /* total height */
  display: flex;           /* contain track & knob */
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;          /* prevent shrinking in flex containers */
}

.ios-toggle__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;      /* cover full toggle */
  height: 21px;     /* cover full toggle */
  margin-top: 2px;
  padding: 0;
  opacity: 0;       /* hide it visually */
  cursor: pointer;
  z-index: 3;       /* on top of everything */
}

.ios-toggle__track {
  width: 100%;
  height: 70%;
  background: #777777;
  border-radius: 13px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.ios-toggle__knob {
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  position: absolute;
  top: 6px;
  left: 3px;
  transition: transform 0.2s ease;
  z-index: 1;              /* below input for click */
  pointer-events: none; /* knob ignores mouse events */
}

/* Checked state */
.ios-toggle__input:checked + .ios-toggle__track .ios-toggle__knob {
  transform: translateX(18px); /* track width - knob width */
}

/* Track color on checked */
.ios-toggle__input:checked + .ios-toggle__track {
  background: #0A84FF;
}


.ios-toggle__input:disabled + .ios-toggle__track {
  background: #d7d7db;
  cursor: not-allowed;
}


/* Swipe hint gesture */
#gesture-hint {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 4rem;        /* adjust size */
  height: 4rem;
  pointer-events: none;
  display: none;      /* hidden until triggered */
  outline: none;
  box-shadow: none; /* optional: remove subtle default shadow too */
}

.hand-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.3));
  transform-origin: center center;
  outline: none;
  box-shadow: none; /* optional: remove subtle default shadow too */
}

.trail {
  transform-origin: center center;
  outline: none;
  box-shadow: none; /* optional: remove subtle default shadow too */
}

@keyframes gestureSequence {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
  10%  { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }

  25%  { transform: translate(calc(-50% - 100px), -50%) rotate(-15deg); }
  40%  { transform: translate(-50%, -50%) rotate(0deg); }

  60%  { transform: translate(calc(-50% + 100px), -50%) rotate(15deg); }
  75%  { transform: translate(-50%, -50%) rotate(0deg); }

  90%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
}

#gesture-hint-text {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  display: none;      /* hidden until triggered */
  outline: none;
  box-shadow: none; /* optional: remove subtle default shadow too */
}

@keyframes textFadeSequence {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

/* HDR LOADING */
#hdr-loading{
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: rgba(30, 30, 30, 0.8);
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
  padding-left: 5px;
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  z-index: 20;
}

#rotateXInput, #rotateYInput, #rotateZInput{
  background: transparent;       /* no background */
  border: none;                  /* remove border */
  color: white;                  /* text color */
  outline: none;                 /* remove focus outline */
  width: 50px;                   /* keep original width */
  text-align: center;             /* center the number */
  font-size: 14px;                /* optional: adjust font size */
  font-weight: bold;              /* optional: make text stand out */
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* termek oldal wp meta eltuntetese (admin, datum, kommentek jelzo) */

.site-content article .entry-meta-wrapper .entry-meta{
display: none;
}

/* 3d nezegeto es termek mini panel egy vonalba helyezese */

.single-product-image-wrapper{
  width: 70%;
  display: block;
  height: 0vh !important;
}

#content div.product div.summary, .woocommerce-page div.product div.summary{
  width: 25% !important;
}

#content div.product .woocommerce-tabs, .woocommerce-page div.product .woocommerce-tabs{
  margin-top: 45%;
}

/* ----vonalba helyezes mobilon---- */
@media only screen and (max-width: 768px) {
  .single-product-image-wrapper{
    width: 100%;
    display: block;
  }

  #content div.product div.summary, .woocommerce-page div.product div.summary{
    width: 100% !important;
    margin-top: 60%;
  }

  #content div.product .woocommerce-tabs, .woocommerce-page div.product .woocommerce-tabs{
    margin-top: 0%;
  }
}

#product-3d-app {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+/Edge */
  user-select: none;         /* Standard */
}

#product-3d-canvas-wrap.fullscreen-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 9999;
  background: #000;
}

#block-16{
  margin-bottom: 15px !important;
}

#wpfSliderRange span{
  border-radius: 100px !important;
  margin-top: -1px !important;
}

#wpfMinPrice{
  width: 60px !important;
}

.wpfFilterButton.wpfButton{
  width: calc(100% - 10px) !important;
}

.wpfFilterButton.wpfButton:hover{
  background-color: #0BA2ED !important;
  color: white !important;
}

.portfolio-tabs.default-filter .smart-sub-menu.portfolio-sub-filter > li > a.active{
  background: #0ba2ed !important;
}

.portfolio-tabs.default-filter .smart-sub-menu.portfolio-sub-filter > li > a:hover{
  background: #0ba2ed !important;
}

.grid-layout .post h2.entry-title{
  height: 60px !important;
}

/* By default: all posts shrunk */
.margin-top-20 {
  transition: all 0.3s ease;
  transform: scale(0.99);
  opacity: 0.8;
}

/* On hover: the one you hover "pops" */
.margin-top-20:hover {
  transform: scale(1);
  opacity: 1;
  z-index: 2;
  transition: all 0.3s ease;
}



.grid-posts .posts-content-container {
transition: all 0.3s ease;
border-radius: 0px 0px 5px 5px;
  padding-left: 10px !important;
  padding-right: 10px !important;
  padding-bottom: 10px !important;
  background-color: #f0f0f0;
}

.margin-top-20:hover > .grid-posts .posts-content-container {

transition: all 0.3s ease;
}



.entry-thumbnail a img{
  border-radius: 5px 5px 0px 0px !important;
}


#footer-widgets-2, #footer-widgets-3, #footer-widgets-4{
  border-left: 1px solid #777777;
  height: 130px !important;
}

.vc_images_carousel .vc_carousel-inner{
  width: 99.99% !important;
}

.footer-company-info{
  font-size: 12px !important;
  margin-top: -8px !important;
  margin-bottom: -8px !important;
}

.main-section #footer{
  z-index: 10 !important;
}










/* All cards are slightly shrunk by default */
.wpsf-product {
  margin-top: 20px;
  transition: all 0.3s ease;
  transform: scale(0.99) !important;
  opacity: 0.8; /* optional: a little dimmer */
}

/* Hovered card returns to normal size (or bigger if you want) */
.wpsf-product:hover {
  transform: scale(1) !important;
  opacity: 1;
  z-index: 2;
}




/* Ensure all product image containers have a fixed height */
.sp-wps-product-image-area {
  width: 100%;
  height: 250px; /* Adjust this value to your preferred height */
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Make images fill the container proportionally */
.sp-wps-product-image-area img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures consistent fill without stretching */
  object-position: center; /* Keeps the image centered */
  display: block;
}

/* Optional: Make sure anchor tags don't affect layout */
.sp-wps-product-image-area a {
  display: block;
  width: 100%;
  height: 100%;
}


@media only screen and (max-width: 769px) {

/* Ensure all product image containers have a fixed height */
.sp-wps-product-image-area {
  width: ;
  height: ; /* Adjust this value to your preferred height */
  overflow: ;
  position: ;
  display: ;
  justify-content: ;
  align-items: ;
}

}

#wps-slider-section img.wpsf-product-img{
  border-radius: 5px 5px 0px 0px;
}

#wps-slider-section #sp-woo-product-slider-5295.sp-wps-custom-template .wpsf-product .sp-wps-product-details{
  background-color: #e7e7e7;
  border-radius: 0px 0px 5px 5px;
}

#wps-slider-section #sp-woo-product-slider-5295 .wpsf-cart-button a:not(.sp-wqvpro-view-button):not(.sp-wqv-view-button){
  border-radius: 5px;
}

#wps-slider-section #sp-woo-product-slider-5295 .wpsf-product-title a{
  color: #121212;
  font-size: 18px;
}

#wps-slider-section #sp-woo-product-slider-5295 .wpsf-product-title a:hover{
  color: #0ba2ed;
}

/* MAIN PAGE SLIDER BG */

body.page-id-443 .zozo-revslider-section {
  background: linear-gradient(to bottom, #bfbfbf, #ababab) !important;
}

/* Shop mobile product image resize error correction */

@media only screen and (max-width: 769px) {
  .product-image{
    width: 100% !important;
  }
  .sidebar{
    padding-bottom: 0px !important;
    margin-bottom: -90px !important;
  }
}


/*
.header-section .cart-count{
  top: 20px !important;
}


.woo-cart-contents{
  margin-top: -1px !important;
}
*/

/* Hide the original image inside the loader */
.pageloader .zozo-custom-loader .custom-loader-img {
    display: none;
}

/* Loading bar container inside the existing loader */
.pageloader .custom-loading-bar {
    width: 400px;
    height: 5px;
    background: #ddd;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin: 0 auto; /* center horizontally */
}

@media only screen and (max-width: 768px) {
    .pageloader .custom-loading-bar {
        width: 250px;
    }
}

/* The sliding bar itself */
.pageloader .custom-loading-bar .loading-bar {
    height: 100%;
    width: 50%;
    background: linear-gradient(to right, transparent 0%, #3d9bff 25%, #2b90fd 50%, #3d9bff 75%, transparent 100%);
    position: absolute;
    left: -50%;
    animation: slide 1.5s linear infinite;
}

@keyframes slide {
    0% { left: -50%; }
    100% { left: 100%; }
}


 .custom_footer-social-vertical {
    display: flex;
    flex-direction: column;
    height: 110px;
    justify-content: center !important;
  }
      /*footer social links*/
  .custom_social-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 16px;
    transition: transform 0.3s, color 0.3s;
  }

  .custom_social-link i {
    width: 40px;      /* fixed width for alignment */
    text-align: center;
    font-size: 24px;  /* icon size */
    margin-right: 8px;
  }

  .custom_social-link:hover {

    color: #ffd; /* subtle hover color */
  }




.pageloader .zozo-custom-loader .custom-loader-img{
  width: 300px !important;
}




html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Hide featured image only on single blog posts */
body.single-post .post-featured-image.only-image {
    display: none !important;
}

.product-category-title{
  display: none;
}

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images{
  width: 100% !important;
}

.woo-sort-ordering > li{
  text-indent: 2.5px !important;
}

.zozo-woo-count-container ul{
  display: none !important;
}

.footer-widgets .widget{
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

/* ✅ Only when 3D model viewer is active */
@media only screen and (max-width: 768px) {
  .has-3d-model .woocommerce #content div.product div.images,
  .has-3d-model .woocommerce #content div.product div.summary,
  .has-3d-model .woocommerce div.product div.images,
  .has-3d-model .woocommerce div.product div.summary,
  .has-3d-model .woocommerce-page #content div.product div.images,
  .has-3d-model .woocommerce-page #content div.product div.summary,
  .has-3d-model .woocommerce-page div.product div.images,
  .has-3d-model .woocommerce-page div.product div.summary {
    float: none !important;
  }

  .has-3d-model #content div.product div.summary,
  .has-3d-model .woocommerce-page div.product div.summary {
    margin-top: 60% !important;
  }
}

/* ✅ Only when normal image gallery is active */
@media only screen and (max-width: 768px) {
  .has-image-gallery .woocommerce #content div.product div.images,
  .has-image-gallery .woocommerce #content div.product div.summary,
  .has-image-gallery .woocommerce div.product div.images,
  .has-image-gallery .woocommerce div.product div.summary,
  .has-image-gallery .woocommerce-page #content div.product div.images,
  .has-image-gallery .woocommerce-page #content div.product div.summary,
  .has-image-gallery .woocommerce-page div.product div.images,
  .has-image-gallery .woocommerce-page div.product div.summary {
    float: left !important;
  }

  .has-image-gallery #content div.product div.summary,
  .has-image-gallery .woocommerce-page div.product div.summary {
    margin-top: 0% !important;
  }
}

@media only screen and (max-width: 768px) {
  #SR7_13_1 .custom.sr7-arrows{
    width: 25px !important;
  }
}

span.wpcf7-not-valid-tip{
  position: absolute !important;
  top: -20px !important;
  z-index: -1 !important;
}

.tlp-header-menu-current-lang a span span{
  display: none !important;
}

.tlp-header-menu-other-lang a span span{
  display: inline-block !important;
}

.dropdown-menu{
  margin-left: -45px !important;
}

@media (max-width: 768px) {
  .custom_footer-social-vertical{
    gap:10px !important;
  }

  #single-sidebar-container .zozo-row {
    display: flex;
    flex-direction: column;
  }

  /* Target the two main columns */
  #single-sidebar-container #primary {
    order: 2;
  }

  #single-sidebar-container #sidebar {
    order: 1;
  }
}

.cky-revisit-bottom-left{
  display: none !important;
}

/* Initial state — hidden and below the viewport */
.cky-consent-container .cky-consent-bar {
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
  animation: slideInFromBottom 0.6s ease-out 3s forwards; /* 3s delay */
}

/* Keyframes for sliding up and fading in */
@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}