/*Price Calculator tool */

.fusion-column-wrapper:has(> #pricecal) {
padding:0}

#pricecal {
padding-bottom: 80px;
position: relative;
text-align: center;
scroll-margin-top:65px;
background:url("/wp-content/uploads/2026/02/Hero_SubsequentPages.webp") no-repeat;
background-size:cover} 

#pricecal.no-bg {
background: none }

#pricecal .hidden {
display: none !important }

#pricecal .lp-btn {
border: 0;
cursor: pointer }

#pricecal .intro-header  {
position:relative;
padding:20px 10px;
display: flex;
flex-wrap:wrap;
justify-content:center;
background:url("/wp-content/uploads/2026/02/Hero_IntroPage.webp") no-repeat;
background-size:cover;
align-items:center}

#pricecal .intro-header * {
position:relative;
z-index:3}

#pricecal .intro-header p {
width:1000px;
text-align: center;    
color: #fff;
max-width:100%}

#pricecal .intro-header .lp-btn {
margin: 0 10%}

#pricecal .lp-btn.btn-wte.btn-tr-bk:hover::after {
height: 100%;
bottom: 0;
right: 0}

#pricecal .ppc-intro-wrap {
display: flex; 
padding: 20px;
justify-content:space-between;
align-items: center;
flex-wrap:wrap}

#pricecal .ppc-intro-img {
display:none;}

#pricecal .ppc-intro-img img{
width:100%;
display: block}

#pricecal .ppc-intro h2, #pricecal .ppc-intro-steps h2 {
color: #322;
font-size: 38px;
font-weight: 700}

#pricecal .ppc-intro-steps {
padding: 20px;
text-align:center;
background: #F5F5F5}

#pricecal .ppc-intro-steps h3, #pricecal .ppc-intro.disclaimer h3 {
font-weight: bold;
font-size: 26px;}

#pricecal .step-wrap {
display: flex; 
justify-content:center;
flex-wrap:wrap}

#pricecal .step-wrap >div{
width: calc(50% - 10px);
padding: 0 10px;
margin:20px 5px}

#pricecal .step-wrap img{
display: block;
width:100px;
margin: auto;
}
@media(min-width:768px) {
#pricecal .intro-header  {
padding:80px 40px;
background-position: 0 60%; }    
    
#pricecal .ppc-intro-img {
display:block;    
width:40%}

#pricecal .ppc-intro {
text-align:left;    
width:calc(60% - 40px)}

#pricecal .ppc-intro-wrap, #pricecal .ppc-intro-steps {
padding: 40px 60px}

#pricecal .step-wrap >div{
width: calc(25% - 10px);
padding: 0 20px}
}

#pricecal h1 { 
color: #fff;
margin-top: 0;
font-size:30px}

#pricecal h2 { 
color: #fff}

#pricecal .pricecal-wrap h1.margin-top { 
margin-top: 40px}


#pricecal p.pricecal-intro {
font-size: 16px;
color:#fff;
line-height: normal;
margin-bottom: 40px;}

#pricecal .pricecal-bg  {
aspect-ratio:1/1.2;
position: absolute}

#pricecal .pricecal-bg .wizard-step-content {
height:100%}

@media (min-width:1024px) {
#pricecal h1 { 
font-size:45px}    

#pricecal p.pricecal-intro {
font-size: 20px;
line-height: 140%}
    
#pricecal .pricecal-bg {
aspect-ratio:16/8}

#pricecal.saved-estimate .pricecal-bg {
aspect-ratio:16/6}
}

@media (min-width:1200px) {
#pricecal .pricecal-bg  {
aspect-ratio:16/6.5}
#pricecal.saved-estimate .pricecal-bg {
aspect-ratio:16/5}
}

#pricecal .pricecal-bg img{
width:100%;
height:100%;
object-fit:cover;
display:block}

#pricecal .pricecal-wrap {
width: 1140px;
max-width: 90%;
padding-bottom: 50px;
margin:auto;
position:relative;
text-align: center;
z-index: 9999;}

@media (min-width: 1023px) {
#pricecal .pricecal-wrap {
max-width: calc(100% - 400px);
max-width: 86% }
}

#pricecal .pricecal-steps {
display:flex;
margin:30px 0 0;
padding: 0;
list-style: none;
width: 1100px;
max-width:100%;
justify-content:center;}

#pricecal .pricecal-steps li{
position:relative;
text-align:Center;
width:calc(100% / 6)}

#pricecal .pricecal-steps li::before{
filter:Saturate(0);
position: absolute;
height: 15px;    
width:15px;
top: 3px;
margin: auto;
left: 0;
right: 0;
display: block;    
content:"";
border-radius:100%;
background: #fff;
z-index:9;
border:3px solid #FFB71A}

#pricecal .pricecal-steps li.active::before, #pricecal .pricecal-steps li.completed::before   {
filter:saturate(1);}

#pricecal .pricecal-steps li.active::before {
height: 30px;
width: 30px;
top: -5px;
border-width: 5px}

#pricecal .pricecal-steps li.completed::before {
background-color: #FFB71A;
border-color: #fff}

#pricecal .pricecal-steps li:not(:last-child)::after{
display:block;    
position: absolute;    
width:100%;
content:"";
height:3px;
border-top:2px solid #DEDEDE;
border-bottom:2px solid #DEDEDE;
background:#DEDEDE;
left: 50%;
top: 10px}

#pricecal .pricecal-steps li.completed::after{ 
background: url(/wp-content/uploads/2026/01/mob-steps.webp) repeat-x;
background-size: auto 100%}

#pricecal .pricecal-steps span {
display: none;
padding: 36px 0 6px 0; 
transition:.3s;
position: relative;
z-index: 99;
font-weight:700;
font-size: 12px;
color:#999}

#pricecal .pricecal-steps li.active span  {
display: inline-block;    
color:#fff}

#pricecal .pricecal-cols { 
margin-bottom:80px;}

#pricecal .pricecal-cols img { 
display:block;
cursor: pointer;
object-fit:cover;
width: 100%}

#pricecal #accessory-options  { 
align-items:flex-start}

#pricecal #accessory-options >div { 
aspect-ratio:1/1}

#pricecal #accessory-options img { 
width: 100%;    
height:100%;
aspect-ratio: initial}

.pricecal-wrap .option-card {
border: 8px solid #fff;
position:relative;
cursor: pointer }

.pricecal-wrap .option-card {
transition: .3s }

.pricecal-wrap .option-card:hover, .pricecal-wrap .option-card.selected {
border-color: #FFB71B}

#size-options .option-card {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;}

#pricecal .pricecal-cols.cols2 > div { 
width:350px;
max-width:100%;
margin: 10px auto;}

#pricecal .pricecal-cols.cols3 > div { 
margin-bottom:20px}

@media (min-width:640px) {

#pricecal .pricecal-steps span {
font-size: 16px}
    
#pricecal .pricecal-cols { 
justify-content: center;
display:flex}

#pricecal .pricecal-cols.cols2 > div { 
margin:20px;    
max-width: calc(50% - 20px)}

#pricecal .pricecal-cols.cols3 {
justify-content: space-between;
flex-wrap:wrap;
display: flex}

#pricecal .pricecal-cols.cols3> div {
flex-direction:row;
width:calc(33.33% - 10px)}

}

#pricecal .option-grid .option-card.selected {
opacity:1}

#pricecal .option-grid:has(.option-card.selected) .option-card:not(.selected) {
opacity:.5}

@media (min-width:1024px) {

#pricecal .pricecal-cols.cols3 > div { 
width: 31%;}

#pricecal #accessory-options >div { 
width:calc(25% - 10px);}
}

@media (min-width:1200px) {
#pricecal .pricecal-cols.cols3 > div { 
flex-direction:column;}    
}

#pricecal .pricecal-bg .pricecal-nav {
left: 0;
right: 0;
z-index: 4;
position: absolute}

#pricecal a.navigation-btn {
cursor: pointer;
display: inline-block;
padding: 0 10px 0 60px;
margin-top: 20px;
min-width: 130px;
font-size: 20px;
color:#000;
height:50px;
line-height:50px;
outline: 1px solid #000;
position: relative;
background: #fff}

@media (max-width: 480px) {
#pricecal a.navigation-btn {
min-width: inherit;
font-size: 18px }
}

#pricecal .slick-prev, #pricecal .slick-next {
top: 40% }

#pricecal a.navigation-btn::after, #pricecal .slick-prev::before, #pricecal .slick-next::before{
height: 50px;
width: 50px;
left:0;
transition: .3s;
display: inline-block;
content:"";
position:absolute;
background: #FFB71A url(/wp-content/themes/Avada-Child-Theme/btn-arrow.webp) no-repeat;
transform:rotate(180deg);
background-size: 50% auto;
background-position: center}

#pricecal .slick-prev:before, #pricecal .slick-next:before{
background-color: #000 }

#pricecal a.navigation-btn:last-child{
padding: 0 60px 0 10px; }

#pricecal .pricecal-nav {
position: relative;
z-index: 999}

#pricecal .pricecal-nav.top-margin {
margin-top: 60px }
  
#pricecal .pricecal-nav a {
position:absolute; }

#pricecal .pricecal-nav a:first-child{
left: 10px}

#pricecal .pricecal-nav a:last-child{
right: 10px}

#pricecal a.navigation-btn:last-child::after, #pricecal .slick-next:before{
transform:none;
right:0;
left:initial}

#pricecal .main-slider .slick-arrow {
filter: invert(1) }

#pricecal .main-slider .slick-prev {
left:-50px}

#pricecal .main-slider .slick-next {
right: -50px}

#pricecal .main-slider {
margin: 20px 20px 0 20px}

#pricecal .slick-slide:not(.slick-active) .main-image::after{
position:absolute;
top:0;
bottom:10px;
left:0;
right:0;    
display:block;
content:"";    
opacity:.45;
z-index:999999;
background:#101820;}

#pricecal .slick-slide:not(.slick-active) img {
padding:0;}

#pricecal .slick-slide img {
cursor:pointer;
display:block;
height:100%;   
object-fit:cover}

#pricecal .main-slider img {
padding:10px;
background:#fff}

#pricecal .nav-slider .slick-slide.slick-current img {
border: 6px solid #000}

#pricecal .nav-slider .slick-prev, #pricecal .nav-slider .slick-next {
top: 35% }

#pricecal .nav-slider .slick-slide {
margin: 0 5px }

#pricecal .slick-dots  {
display:flex;   
justify-content: center;
bottom: -50px}

#pricecal .slick-dots button {
border-radius:100%;
background:#fff;    
transition:.3s;
border:2px solid #9BA5B0;}

#pricecal .slick-dots .slick-active button, #pricecal .slick-dots  button:hover {
background:#9BA5B0;    
border:2px solid #9BA5B0;}

#pricecal .slick-dots button::before {
display: none;}

#pricecal a.navigation-btn.disabled {
background-color: #d1d1d1;
cursor: default; }

#pricecal .disclaimer-wrap  {
width:1000px;
max-width:100%;    
padding: 10px;
margin:90px auto 0;}

#pricecal .disclaimer * {
text-align: center;
font-size: 14px;
color: white }

/* Model sliders */
.pricecal-wrap #model-options  .slide-content {
position: relative; }

#pricecal .slide-content .model-name {
aspect-ratio: initial !important;
position: absolute;
z-index: 9999;
left: 0;
background: rgba(0,0,0,0.7);
width: 100%;
color: #fff;
font-weight: bold;
height: 35px;
padding-left: 5px;
bottom: 0}

#pricecal .slide-content .model-name span {
display:none;
font-weight:normal}

@media (min-width:1024px) {
#pricecal .slide-content .model-name span {
display:inline-block}

#pricecal .pricecal-nav a:first-child{
left: 50px}

#pricecal .pricecal-nav a:last-child{
right: 50px}
}

#pricecal .images-wrapper {
display:flex;
position:relative;
flex-wrap:wrap}

#pricecal .images-wrapper .main-image {
aspect-ratio:4/3;
position:relative;
width:100%}

#pricecal .images-wrapper .main-image img {
object-fit:cover;
transition:.4s;
cursor:default;
height:100%;
width:100%;
display:block;
padding-bottom: 10px;
position:absolute;
top:0;
bottom:0; }

#pricecal .images-wrapper .gallery-images {
justify-content: flex-end;
position:relative;
display:none}

#pricecal .images-wrapper.showing .gallery-images {
display: flex }
  
#pricecal .images-wrapper .gallery-images img {
aspect-ratio:1/1;
height: auto; 
width:25%;
object-fit:cover;
display:block}

.pricecal-wrap #model-options .main-slider .slide-content .images-wrapper .model-name {
display: none}

.pricecal-wrap #model-options .main-slider .slick-current .slide-content .images-wrapper .model-name {
display: block;
position: absolute;
bottom: -5px;
left: 10px;
color: #fff;
background: #000;
width:auto;
text-align: left;
padding: 5px 10px;
font-size: 15px !important;
line-height: 23px !important;}

@media (max-width:1023px) {
#pricecal .images-wrapper .main-image img {
padding-bottom:0}

#pricecal .images-wrapper .gallery-images {   
width: 100%;    
background:#fff}

.pricecal-wrap #model-options .main-slider .slick-current .slide-content .images-wrapper.more-info .model-name {
display: none }
}

@media (min-width:1024px) {
#pricecal .images-wrapper .main-image {
aspect-ratio:16/10;
width:100%;
display:flex}

#pricecal .images-wrapper .gallery-images  {
width: 12%;
position: absolute;
right: 20px;
top:0;
z-index: 99999;
padding-bottom: 10px;
flex-direction: column;
height: calc(100% - 10px);}

#pricecal .images-wrapper .gallery-images img {
padding:2px;
height: 25%;
width:auto}

.pricecal-wrap #model-options .main-slider .slick-current .slide-content .images-wrapper .model-name {
font-size: 22px !important;
width: calc(100% - 20px)}
}

@media (min-width:1200px) {
#pricecal .images-wrapper .main-image {
aspect-ratio:16/8}
}

#pricecal .gallery-images::after {
background: url(/wp-content/uploads/2026/02/EstimatorIcon-ToggleOn.svg) #FFB71A;
background-size: auto;
background-size: contain;
width: 35px;
aspect-ratio: 1/1;
max-width: 40%;
display: block;
content: "";
position: absolute;
bottom: 12px;
right: 2px;
cursor: pointer}

#pricecal .more-info .gallery-images::after {
background: url(/wp-content/uploads/2026/02/EstimatorIcon-ToggleOff.svg) #FFB71A}

#pricecal .images-wrapper.main-image {
opacity:0;
position: absolute;
transition:.5s;
top: 0px;
z-index:-4;
width: 100%}

#pricecal .images-wrapper.main-image.showing{
/*transition:.1s;*/
opacity:1;
z-index:99999}
 
#pricecal .images-wrapper.more-info .main-image .desc {
background:#fff;
align-content: center;
padding: 10px 8% 10px 10px;}

#pricecal .images-wrapper.more-info .main-image .desc h2{
color:#222;
font-size: 24px;
margin: 0;
font-weight: normal;
letter-spacing: -.4px}

#pricecal .images-wrapper.more-info .main-image .desc h3{
margin: 0;
font-weight: bold;
line-height: normal;}
  
#pricecal .images-wrapper.more-info .main-image .desc p{
line-height: normal;}

#pricecal .images-wrapper.more-info .main-image .desc a.lp-btn {
position: relative;
z-index:99999 }

@media (max-width: 580px) {
#pricecal .images-wrapper.more-info .main-image .desc p{
display:none;}

#pricecal .images-wrapper.more-info .main-image .desc a.lp-btn {
max-width: none;
min-width: 0;
margin-top: 10px}
}


@media (max-width:480px) {
#pricecal .gallery-images::after {
width: 20px}
}

 
@media (min-width:1024px) and (max-width: 1280px) {

#pricecal .images-wrapper.more-info .main-image .desc a.lp-btn {
max-width: none;
min-width: 0;
margin-top: 10px}
}  

#pricecal .summary-content {
background: #fff;
border: 10px solid #fff;
margin-bottom: 80px; }

#pricecal .results-wrapper {
display: flex;
flex-wrap:wrap;}

#pricecal .results-wrapper + .results-wrapper {
margin-top: 40px }

#pricecal .results-wrapper .estimate-data {
text-align: center;
padding: 20px;
font-size: 18px}

#pricecal .results-wrapper .estimate-data ul{
padding: 0}

#pricecal .results-wrapper .estimate-data >div:not(:last-child) {
border-bottom: 1px solid #ccc}

#pricecal .results-wrapper img{
display: block;
aspect-ratio:16/7;
margin-bottom:30px;
object-fit: cover}

#pricecal .results-wrapper h2{
color: #222;
text-align: center}

#pricecal .results-wrapper >h2{
display: block;
color: #fff;
background: rgba(0,0,0,.8);
width: 100%;
text-align: left;
padding: 5px 10px;
margin:0;
font-size: 22px}

#pricecal .results-wrapper >h2 span{
font-weight:normal;}

#pricecal .results-wrapper ul li{
list-style:none;    
border-top: 1px solid #ccc;
padding: 10px;}

#pricecal .results-wrapper ul li:last-child{
border-bottom: 1px solid #ccc}


#pricecal .results-wrapper ul li strong{
padding-left: 10px;}

@media (max-width:1023px){
#pricecal .images-wrapper.more-info .main-image {
background:#fff;}    

#pricecal .images-wrapper.more-info .main-image img {
width: 70%;
height: auto;
top: initial;
transform: translateY(48%);
z-index: 999}

#pricecal .images-wrapper.more-info .main-image .desc {
padding:20px}    

#pricecal .gallery-images::after {
bottom: 10px;
right: 10px}    

#pricecal .results-wrapper .estimate-data {
width:100%;}    

#pricecal .results-wrapper > * {
order:2}

#pricecal .results-wrapper img {
margin:0;
order:0}

#pricecal .results-wrapper h2 {
order:0}

}


@media (min-width:800px) and (max-width:1023px){
#pricecal .images-wrapper .main-image {
aspect-ratio: 16/8}
}

@media (min-width:1024px){
#pricecal .results-wrapper img{
aspect-ratio:16/13;
margin:0;    
width: 50%}

#pricecal .results-wrapper .estimate-data {
margin: 0 10px;
width: calc(50% - 20px);}

#pricecal .images-wrapper.more-info .main-image > div {
width: 60%;
padding: 10px 15% 10px 10px;
position: static}

#pricecal .images-wrapper.more-info .main-image > img {
position: static;
object-fit:contain;
width: 40%}

#pricecal .images-wrapper .gallery-images {
width: 16%}
}
@media (min-width:1200px){
#pricecal .images-wrapper.more-info .main-image > div {
padding: 10px 8% 10px 10px;    
width: 55%}

#pricecal .images-wrapper.more-info .main-image > img {
width: 45%}

#pricecal .images-wrapper .gallery-images {
width: 12%}
}

#pricecal .results-wrapper .price-estimate-wrap{
width: 100%;
margin-top: 80px}

#pricecal .results-wrapper .price-range {
display: flex;
position: relative;
font-size: 16px;
margin-bottom: 10px;}   

@media(min-width:1024px) {
#pricecal .results-wrapper .price-range {
font-size: 20px}       
}

#pricecal .results-wrapper .price-range div{
position:absolute;
width: auto;
height: 50px;
bottom: 0;
display: flex;
justify-content: center;
align-items: flex-end;
margin-bottom: 10px }  

#pricecal .results-wrapper .price-range div p {
margin:0;
font-size: 13px;
position: absolute;
left: -25px }

#pricecal .results-wrapper .price-range.al-right div p {
left: -20px }

#pricecal .results-wrapper .price-range.al-left div p {
left: -35px }

@media(min-width: 480px) {
#pricecal .results-wrapper .price-range div p {
font-size: 18px}
#pricecal .results-wrapper .price-range.al-left div p {
left: -30px }
}

#pricecal .results-wrapper .price-range div:not(.price-band)::after{
position:absolute;
content:"";
width: 24px;
height:24px;
top: 60px;
left:-6px;
z-index:9;
border:4px solid #FFB71A;
border-radius:100%;
display:block;
background: #fff}

#pricecal .results-wrapper .price-range div.price-band {
display: block;
position: absolute;
height: 10px;
background: url(/wp-content/uploads/2026/01/mob-steps.webp) repeat-x;
background-size: auto 100%;
bottom: -30px;
z-index: 8;}

#pricecal .results-wrapper .price-estimate {
display: flex;    
position:relative;
justify-content:space-between;
font-weight: bold;
width: 100%;
color:#9BA5B0;
font-size: 16px}    

#pricecal .results-wrapper .price-estimate::after { 
position:absolute;
content:"";
width: 100%;
left:0;
height:10px;
background: #9BA5B0;}

#pricecal .results-wrapper .price-estimate span{ 
padding-top: 30px;    
position:relative}

#pricecal .results-wrapper .price-estimate span::after{ 
position:absolute;
content:"";
width: 24px;
height:24px;
top: -8px;
border-radius:100%;
display:block;
background: #9BA5B0;}

#pricecal .results-wrapper .price-estimate span:first-child::after{ 
left:-5px}

#pricecal .results-wrapper .price-estimate span:last-child::after{ 
right:-2px}

#pricecal #email-estimate {
border:0}

#pricecal #user-data-form {
width: 850px;
margin: 0 auto 30px;
max-width: 100%;}

#pricecal #user-data-form input{
height:40px;    
line-height: 40px;
margin-bottom:20px;
padding: 0 15px;
width:100%;}

#pricecal #user-data-form input::placeholder {
color: #666 }

#pricecal #form-errors {
color:#fff;
margin-bottom:30px}

#pricecal #form-errors strong {
color:inherit}

#pricecal #user-data-form > div {
margin-bottom:10px }


@media (min-width:768px) {
#pricecal #user-data-form .cols-2 {
display:flex;    
justify-content:space-between}

#pricecal #user-data-form .cols-2 div {
width:calc(50% - 10px)}
}

#pricecal .pricecal-bg:has(.next[style*="display: none;"]) .pricecal-nav{
position: static;
}