/* 
Theme Name: Novobeing
Description: Therapeutic VR for Calm, Comfort, and Resilience.
Author: STAR WEB Team
Author URI: https://starwebllc.com
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */



/* VR glass slider Wrapper */
    :root {
      --primary-purple: #483d8b;
      --text-dark: #1a1a2e;
      --text-light: #6e6e80;
      --bg-btn: #f5f6fa;
      --bg-btn-active: #f0f0ff;
      --border-active: #9d96e8;
    }


    .main-container {
	  overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
		padding-bottom: 20px;
    }

    /* ----------------------------------- */
    /* VR WRAPPER                          */
    /* ----------------------------------- */
    .vr-section-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      position: relative;
      margin-bottom: 20px;
    }

    /* Arrows */
    .nav-arrow {
      background: #d3d3d3;
      border: none;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      font-size: 24px;
      color: var(--primary-purple)!important;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
      z-index: 10;
      margin: 0 20px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }
	.nav-arrow:hover {
		background: #3226B5;
		transform: scale(1.05);
	}
	.nav-arrow:focus {
		background: #3226B5;
		color:white!important;
	}
	.nav-arrow:hover i{
		color: white;
	}

    /* ----------------------------------- */
    /* FRAME ASSEMBLY (The VR Goggles)     */
    /* ----------------------------------- */
    .frame-assembly {
      position: relative;
      width: 800px;
      height: 400px;
      /* Precise Clip Path */
      clip-path: polygon( 49.733% 0.121%,49.733% 0.121%,54.726% 0.226%,59.447% 0.546%,63.897% 1.091%,68.079% 1.869%,71.994% 2.889%,75.644% 4.161%,79.03% 5.693%,82.155% 7.494%,85.02% 9.574%,87.626% 11.941%,87.626% 11.941%,88.832% 13.235%,89.975% 14.603%,91.053% 16.048%,92.069% 17.57%,93.021% 19.171%,93.91% 20.851%,94.736% 22.612%,95.5% 24.455%,96.201% 26.38%,96.84% 28.39%,96.84% 28.39%,97.418% 30.486%,97.934% 32.669%,98.388% 34.939%,98.782% 37.299%,99.114% 39.749%,99.385% 42.291%,99.596% 44.926%,99.747% 47.655%,99.837% 50.478%,99.867% 53.398%,99.867% 53.398%,99.705% 59.962%,99.236% 66.023%,98.479% 71.583%,97.458% 76.643%,96.194% 81.202%,94.708% 85.261%,93.022% 88.822%,91.158% 91.884%,89.137% 94.448%,86.982% 96.516%,86.982% 96.516%,84.712% 98.087%,82.349% 99.163%,79.916% 99.743%,77.433% 99.828%,74.922% 99.418%,72.405% 98.513%,69.903% 97.113%,67.439% 95.22%,65.033% 92.833%,62.707% 89.952%,62.707% 89.952%,61.088% 87.869%,59.5% 86.095%,57.943% 84.614%,56.418% 83.413%,54.924% 82.476%,53.464% 81.788%,52.038% 81.335%,50.646% 81.1%,49.289% 81.071%,47.968% 81.231%,47.968% 81.231%,46.684% 81.566%,45.437% 82.06%,44.229% 82.699%,43.059% 83.467%,41.929% 84.349%,40.839% 85.331%,39.79% 86.398%,38.782% 87.533%,37.816% 88.723%,36.893% 89.952%,36.893% 89.952%,34.6% 92.802%,32.225% 95.16%,29.79% 97.025%,27.316% 98.398%,24.825% 99.279%,22.339% 99.668%,19.878% 99.564%,17.466% 98.969%,15.122% 97.881%,12.869% 96.301%,12.869% 96.301%,10.73% 94.231%,8.723% 91.667%,6.871% 88.611%,5.196% 85.062%,3.719% 81.019%,2.462% 76.483%,1.447% 71.453%,0.694% 65.929%,0.227% 59.911%,0.067% 53.398%,0.067% 53.398%,0.17% 48.241%,0.482% 43.343%,1.012% 38.704%,1.766% 34.327%,2.749% 30.21%,3.969% 26.355%,5.433% 22.762%,7.147% 19.431%,9.118% 16.363%,11.352% 13.559%,11.352% 13.559%,13.858% 11.016%,16.643% 8.737%,19.712% 6.724%,23.073% 4.977%,26.731% 3.496%,30.695% 2.283%,34.97% 1.339%,39.564% 0.663%,44.483% 0.257%,49.733% 0.121% );
      overflow: hidden;
      background: #000;
      filter: drop-shadow(0 20px 30px rgba(0,0,0,0.2));
    }

    .slider-for, .slider-for .slide, .slider-for .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* ----------------------------------- */
    /* THUMBNAILS (THE FIX)                */
    /* ----------------------------------- */
    
    .thumb-container {
      width: 400px;
      height: 140px; /* Explicit height to contain the movement */
      position: absolute;
      bottom: -60px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
      /* Ensure container itself is transparent */
      background: transparent !important;
      pointer-events: none; /* Let clicks pass through empty areas */
    }

    /* NUCLEAR OPTION: 
      Force every single generated slick div to be transparent 
    */
    .thumb-container .slider-nav,
    .thumb-container .slick-list,
    .thumb-container .slick-track,
    .thumb-container .slick-slide,
    .thumb-container .slick-slide > div {
      background: transparent !important;
      background-color: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }

    /* Restore pointer events for the actual buttons */
    .slider-nav {
      pointer-events: auto;
      height: 100%;
    }

    /* The actual slide item wrapper */
    .slider-nav .thumb {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end; /* Align items to bottom */
      height: 140px; /* Match container height */
      padding-bottom: 20px; /* Base alignment */
      cursor: pointer;
      background: transparent !important;
      outline: none;
      transition: all 0.3s ease;
    }

    .slider-nav .thumb img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      opacity: 0.7;
      border: 2px solid transparent;
      transition: all 0.3s ease;
      /* Ensure image doesn't bring a background */
      background: transparent;
    }

    /* ACTIVE STATE: Move the content UP via Transform, not margin */
    .slider-nav .slick-center .thumb {
      transform: translateY(-25px); /* Pops the whole thumb div up */
    }

    .slider-nav .slick-center img {
      width: 75px; 
      height: 75px;
      opacity: 1;
      border: 3px solid #fff;
      box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    }
    
    /* The Indicator Line */
    .slider-nav .slick-center .thumb::after {
      content: '';
      display: block;
      width: 40px;
      height: 4px;
      background: #9d96e8;
      margin-top: 15px;
      border-radius: 4px;
    }

    /* ----------------------------------- */
    /* META & BUTTONS                      */
    /* ----------------------------------- */
    .slide-meta { text-align: center; margin-bottom: 25px; margin-top: 50px; }
    .slide-meta-title { font-size: 22px; font-weight: 700; color: var(--primary-purple); margin-bottom: 5px; }
    .slide-meta-desc { font-size: 15px; color: var(--text-light); }

    .slider-buttons-wrapper { 
		width:100%; 
	}
    .slider-buttons .btn-slide { padding: 0 10px; outline: none; }
    .slider-buttons button {
      background: var(--bg-btn);
      border: 1px solid transparent;
      color: var(--primary-purple);
      padding: 14px 20px;
      border-radius: 50px;
      cursor: pointer;
      font-weight: 600;
      width: 100%;
	  white-space: normal;
      transition: 0.3s;
    }
    .slider-buttons .slick-current button {
      background: var(--bg-btn-active);
      border-color: var(--border-active);
      color: var(--primary-purple);
      box-shadow: 0 0 0 1px var(--border-active);
    }
    .slick-prev, .slick-next { display: none !important; }

.our_review_sec .elementor-swiper-button {
    display: none !important;
}

.plan-box {
    border: 2px solid #d4d4ff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 15px;
    position: relative;
    background: #fff;
} 
.plan-box.active {
    border-color: #5b47ff;
}

.plan-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.plan-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
	    color: #000000;
}

.price {
    margin-left: 18px;
    font-size: 20px;
    font-weight: 600;
}

.price del {
    font-size: 14px;
    color: #999;
    margin-left: 6px;
}

.radio-circle {
    width: 22px;
    height: 22px;
    border: 3px solid #5b47ff;
    border-radius: 50%;
    display: inline-block;
}

.radio-circle.active {
	   width: 16px;
    height: 16px;
    background: #3226B5;
    border: 1px solid black;
    outline: 2px solid #3226b5;
    outline-offset: 5px;
}
.plan-features {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    font-size: 11px;    line-height: 13px;
    align-items: center;
}
.plan-features > div {
    display: flex;
    align-items: center;
}
.plan-features i {
    margin-right: 8px;
    color: #333;
}
.save-tag {
	position: absolute;
	right: 0px;
	top: -2px;
	background: #3226B5;
	color: #fff;
	padding: 4px 12px;
	font-size: 12px;
	border-radius: 0px 12px 0px 12px;
}

.warranty-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #3226B5;
    font-size: 16px;
  }

  .warranty-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
  }

  .warranty-title {
    font-weight: 600;
    font-size: 17px;
  }

  .warranty-sub {
    font-size: 13px;
    margin-top: 3px;
    color: #3226B5;
  }

  .price-area {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 18px;
    color: #3A31FF;
  }

  .icon {
    width: 22px;
    height: 22px;
  }

.product_info .elementor-icon-list-item{
	padding: 4px 7px;
	background: #F8F9FF;
border: 0.86px solid #BEBAEC;
	border-radius: 6.91px;
}

.pms-form, #pms_login {
    padding: 50px;
    max-width: 100%;

}
.product_info .elementor-icon-list-item{
	padding: 4px 7px;
	background: #F8F9FF;
border: 0.86px solid #BEBAEC;
	border-radius: 6.91px;
}

.pms-form, #pms_login {
    padding: 50px;
    max-width: 100%;

}

.pms-form ul.pms-form-fields-wrapper, .pms-form .pms-field-section {
    display: flex;

}
.pms-account-section-wrapper {
	width:100%;
}
.pms-subscription-plan label {
    display: flex;
    width: 100%;
}
.pms-form, #pms_login {
max-width:100%!important
}
.pms-form-fields-wrapper::before{
	display:none!important;
}
.pms-subscription-plan label{

	 display: flex!important;
}
.pms-subscription-plan {
    margin-top: 20px;
}


@media(max-width: 767px){
	h2.elementor-heading-title{
		font-size: 25px !important; 
		line-height: 35px !important;
	}
	.product_info .elementor-icon-list-items.elementor-inline-items{
		gap:30px;
		display:flex;
	}
	.slider-for, .slider-for .slide, .slider-for .slide img {

    height: 250px;

}

}
/* Video slide wrapper + overlay play button */
.slide {
  position: relative; /* important for overlay positioning */
}

.slide video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.video-play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 5;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.video-play-btn:hover {
	background: #3226B5;
}
.video-play-btn i {
  font-size: 26px;
  color: #fff;
}

/* Hide play button while playing */
.slide.is-playing .video-play-btn {
  opacity: 0;
  pointer-events: none;
}
.main-swiper .slide-inner img {
    object-fit: contain!important;
    object-position: right!important;
}
#pms_login .login-extra {
    margin-top: 50px;
}
#pms_login .login-extra a {
   color:black;
}
#pms_edit-profile-form ul.pms-form-fields-wrapper{
    display: flex!important;
    flex-wrap: wrap;
    align-items: flex-end;
}
#pms_edit-profile-form .pms-field{
	width:45%;
}

#pms_register-form .pms-account-section-wrapper input{
    padding: 0.55rem 1rem!important;
}

#pms_register-form  .pms-form label{
    margin-bottom: 11px!important;
    margin-top: 23px!important;
}


#pms_register-form #pms-paygates-wrapper h3{
display:none;

}
#pms_register-form .pms-warranty-option {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 10px !important;
    padding: 15px 20px !important;
}

/* WooCommerce My Account styling (Elementor widget) */
.woocommerce-account .woocommerce-MyAccount-navigation,
.elementor-widget-woocommerce-account .woocommerce-MyAccount-navigation,
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation {
    background: #ffffff;
    border: 1px solid #e9e7ff;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(26, 26, 46, 0.08);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
    margin: 0 0 8px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
    margin-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
    display: block;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #e3e0ff;
    background: #f6f5ff;
    color: #1a1a2e;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation a:focus {
    background: #3226b5;
    color: #ffffff;
    border-color: #3226b5;
    box-shadow: 0 8px 20px rgba(50, 38, 181, 0.22);
}

.woocommerce-account .woocommerce-MyAccount-content,
.elementor-widget-woocommerce-account .woocommerce-MyAccount-content,
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content {
    background: #ffffff;
    border: 1px solid #e9e7ff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(26, 26, 46, 0.08);
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content h4 {
    color: #3226b5;
}

.woocommerce-account .woocommerce-MyAccount-content a {
    color: #3226b5;
}

.woocommerce-account .woocommerce-MyAccount-content a:hover,
.woocommerce-account .woocommerce-MyAccount-content a:focus {
    color: #1f158a;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account .woocommerce-MyAccount-content input.button,
.woocommerce-account .woocommerce-MyAccount-content a.button {
    background: #3226b5;
    border: 0;
    color: #ffffff;
    border-radius: 12px;
    padding: 10px 18px;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-account .woocommerce-MyAccount-content button.button:hover,
.woocommerce-account .woocommerce-MyAccount-content input.button:hover,
.woocommerce-account .woocommerce-MyAccount-content a.button:hover {
    background: #1f158a;
    box-shadow: 0 8px 18px rgba(50, 38, 181, 0.2);
    transform: translateY(-1px);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eceaff;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
    background: #f6f5ff;
    color: #1a1a2e;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
    border-left: 4px solid #3226b5;
}

@media (max-width: 900px) {
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 18px;
        border-radius: 14px;
    }
}