/*
 Theme Name:     SA Ez Child
 Description:    SA Ez Child Theme
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */
/* ======================= Globals =======================*/
 :root {
	 --primary-color: #000;
	 --secondary-color: #fbe7c2;
	 --tertiary-color: #fff;
	 --font-family-primary:'Glacial Indifference';
	 --loading-spinner-image-path:  url();
	 --main-pricing-font-size: 64px;
}
/* ======================= Hidden elements =======================*/

#regForm {
	.plan-feature {
		height: 460px;
    	width: 345px;
    	margin: 0 auto;
		background: radial-gradient(circle, rgba(207, 177, 151, 0) 0%, rgb(251 231 194 / 38%) 130%) !important;
  		background-size: auto, cover, auto !important;
		margin: 8px 0;
	}
	
	.plan-feature::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url('/wp-content/uploads/2025/09/noise_dense_transparent.png') repeat;
		filter: blur(1px);
		opacity: 1;
		pointer-events: none;
	}
	
	.plan-header {
		background: none;
	}
	
	.filter_buttons .active>button {
		color: #000 !important;
	}

	.plan-items .select_button label {
		background: #fff !important;
	}
	
	.plan_names,
	.plan_names > .plan-items {
		width: 345px !important;
/* 		height: 460px !important; */
		max-width: 345px !important;
/* 		max-height: 460px !important; */
		flex: unset !important; 
        max-width: unset !important;
	}
	
	.plan_names {
		flex: unset !important;
        max-width: unset !important;
/* 		margin-bottom: 100px !important; */
	}
	
	@media (max-width: 375px) {
		.plan_names {
			scale: .8;
			margin-bottom: 0px !important;
		}
	}
}

.plan-feature {
	position: relative;
	
	> p > img {
		display: none;
	}
	
	> .plan-title,
	> [abcname="First Payment  or PIF Dues"] {
		display: none;
	}
	
	> [abcname="First Visit"] {
		
		
		> [abcname="name"],
		> [abcname="subTotal"],
		> [abcname="tax"],
		> [abcname="total"] > .sabasic_cent {
			display: none;
		}
		
		> [abcname="total"] {
			display: flex !important;
        	color: #fff;
	        position: absolute;
    	    top: 115px;
        	left: 54px;
			
			> .sabasic_dollarsign { display: none; }
			
			> .sabasic_dollar { font-size: 110px; color: #fbe7c2; }
			> .sabasic_dollar::before {
				content: '$';
				font-size: 40px;
				position: absolute;
				top: -30px;
				left: -20px;
			}
		}
	}
	
	> .sabasiccontainer {
		display: flex;
        flex-direction: column;
        gap: 8px;
        font-size: 18px;
        font-weight: 300;
        background: none;
        position: absolute;
        inset: 182px -16px;
        min-height: unset;
		height: fit-content;
        opacity: .9;
	}
	
	> .sabasiccontainer::before {
		content: "NO CONTRACT";
		font-size: 24px;
		position: absolute;
		color: #fff;
		top: -18px;
		left: 0;
		right: 0;
		animation: garageSwipe 6s infinite;
	}
	
	&:has([sweti_planname*="0down"]) > .sabasiccontainer::after {
		content: "$0 Enrollment";
		position: absolute;
		color: #fff;
		font-weight: 600;
		font-size: 40px;
		white-space: nowrap;
		left: 0;
		right: 0;
		top: -61px;
		line-height: 100%;
		animation: garageSwipe 6s infinite;
	}
	
	&:not(:has([sweti_planname*="PV"]))::after {
		content: "Bi-Weekly";
		font-size: 28px;
		position: absolute;
		top: 34px;
		left: 175px;
		color: #fbe7c2;
	}

	&:has([sweti_planname*="CC"]) > .plan-header::after {
		content: "Pay By Card";
        color: #fff;
        font-size: 13px;
        font-weight: 500;
        position: absolute;
        top: 54px;
        left: 189px;
        white-space: pre;
	}
	
	&:has([sweti_planname*="ACH"]) > .plan-header::after {
		content: "Pay By Checking";
        color: #fff;
        font-size: 13px;
        font-weight: 500;
        position: absolute;
        top: 58px;
        left: 178px;
        white-space: pre;
		animation: blurFade 6s infinite;
	}
	
	&:has([sweti_planname*="ACH"]) > .plan-header::before {
		content: "Discount Included!";
        color: #fff;
        font-size: 15px;
        font-weight: 900;
        position: absolute;
        top: 75px;
        left: 165px;
        white-space: pre;
		animation: blurFade 6s infinite;
	}
	
	/* DAY PASS */
	&:has([sweti_planname*="Day Pass"])::after {
		content: "Per Visit";
        font-size: 28px;
        position: absolute;
        top: 88px;
        left: 184px;
        color: #fbe7c2;
	}
	
	&:has([sweti_planname*="Day Pass"]) > .plan-title {
		display: block;
		position: absolute;
		top: 32px; left: 0; right: 0;
		animation: garageSwipe 6s infinite;
		
		> h3 {
			font-size: 48px;
            color: #ffffff;
            font-weight: 500;
		}
	}
	
	&:has([sweti_planname*="Day Pass"]) > .plan-header,
	&:has([sweti_planname*="Day Pass"]) > .sabasiccontainer::before,
	&:has([sweti_planname*="Day Pass"]) > .sweticlubfee{ display: none; }
	
	[abcname="First Bi-Weekly Dues"] {
    	display: none;
	}
	
}

#regForm .sabasiclogocontainer { display: flex; align-items: flex-start; flex-wrap: unset; gap: 12px;
	
	> img.sabasiclogo {
		content: url(/wp-content/uploads/2025/09/checkbox-icon.png);
		height: 20px;
    	margin: 0;
	}
}
 
.sweticlubfee { 
	position: absolute; 
	bottom: 22px; 
	left: 0; right: 0; 
	padding: 0 20px;
	font-size: 12px;
	letter-spacing: 1px;
	
	* { color: #fff; }

	> [sweticlubfeename="Annual Membership Fee"] {
		> [sweticlubfeename="preTaxAmount"] { display: none; }
	}
}

[sweticlubfeename="feeAmount"] { line-height: 100%;
	> .sabasic_dollarsign, > .sabasic_cent { display: inline; gap: 5px;}
	> .sabasic_dollarsign::before { 
		content: "An annual maintenance fee of ";
        color: #fff;
        white-space: normal;
	}
	> .sabasic_cent::after { 
		content: " will be billed on the 3rd billing cycle. 30 day cancellation notice required.";
        color: #fff;
        white-space: normal; 
	}
}

.plan-header {
	position: absolute;	
	
	> .sabasic_Monthly_Rate {
		display: flex !important;
        color: #fff;
        position: absolute;
        top: 65px;
        left: 38px;
	}
	
	> .sabasic_Monthly_Rate > .sabasic_dollar { font-size: 110px; color: #fbe7c2; }
	
	> .sabasic_Monthly_Rate > .sabasic_dollar::before {
		content: '$';
        font-size: 40px;
        position: absolute;
        top: -30px;
        left: -20px;
	}
	
	> .sabasic_Monthly_Rate > .sabasic_cent { display: none !important; }
	
	> .sabasic_Monthly_Rate > .sabasic_dollarsign,
	> .sabasic_Monthly_Rate_Pretax,
	> .swetiScheduleAmount,
	> .swetiSchedulePreTaxAmount,
	> .Enrollment_Fee { display: none !important; }
}

@keyframes blurFade {
  0% { opacity: 0; filter: blur(6px); }
  10% { opacity: 1; filter: blur(0); }
  95% { opacity: 1; filter: blur(0); }
  96% { opacity: 0; filter: blur(6px); }
  100% { opacity: 0; filter: blur(6px); }
}

@keyframes garageSwipe {
  0% {
    clip-path: inset(0% 0% 100% 0%); /* fully hidden (top clipped) */
  }
  20% {
    clip-path: inset(0% 0% 0% 0%);   /* fully visible (swiped down) */
  }
  95% {
    clip-path: inset(0% 0% 0% 0%);   /* stay fully visible */
  }
  96% {
    clip-path: inset(0% 0% 100% 0%); /* hard cut back to hidden */
  }
  100% {
    clip-path: inset(0% 0% 100% 0%); /* wait until next cycle */
  }
}

#step3,
#step4,
#step5 {
	.plan-feature,
	div#planDescription {
		display: none;
	}
}

div #regForm .aside-inner .plan-items .plan_description,
#regForm div#plan_data_one{
    background: none;
}