/*
 Theme Name:     SA Ez Child
 Description:    SA Ez Child Theme
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */
/*
 Theme Name:     SA Ez Child
 Description:    SA Ez Child Theme
 Template:       Divi
 Version:        1.0.3
*/
 
 
/* Theme customization starts here
------------------------------------------------------- */
/* ======================= Globals =======================*/
 :root {
	 --primary-color: #09A5E2;
	 --secondary-color: #EF4B24;
	 --tertiary-color: #fff;
	 --font-family-primary:'Sommet Rounded';
	 --loading-spinner-image-path:  url(https://club24micro.wpenginepowered.com/wp-content/uploads/2025/12/club24-spinner.png);
	 --main-pricing-font-size: 64px;
}
/* ======================= Hidden elements =======================*/

div .loading_box .loading_icon {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	margin: auto;
	border: none;
	content: url(https://club24micro.wpenginepowered.com/wp-content/uploads/2025/12/club24-spinner.png);
	animation: spin 2.5s linear infinite;
	width: 100px;
	height: 100px;
	z-index: 999 !important;
}
/* Menu navigation / header items */

#regForm {
	
	.plan_names,
	.plan-items,
	.plan-feature {
		width: 300px !important;
		height: 300px !important;
		background: #fff !important;
	}
	
	.plan_names {
		max-width: 300px !important;
		margin: 64px 16px !important;
	}
	
	.plans_data_wrapper {
    	margin-bottom: 0px;
	}
}

.plan-feature {
	
	border: 2px solid #000;
	border-radius: 8px;
	
	> *:not(.plan-title):not([abcname="Enrollment Fee"]) {
		display: none;
	}
	
	[abcname="Enrollment Fee"] {
		position: absolute;
		top: 200px;
		left: 0;
		right: 0;
	}
	
	[abcname="Enrollment Fee"] > div:not([abcname="subTotal"]) {
		display: none;
	}
	
	[abcname="subTotal"] {
		
		font-family: "SommetRounded-Light", sans-serif;
		
		> *{
			font-size: 20px !important;
			font-family: "SommetRounded-Light", sans-serif;
		}
		
		&::before {
			content: "WEEKLY";
			position: absolute;
			top: -63px;
			left: 0;
			right: 0;
			font-size: 18px;
		}
		
		&::after {
			content: " Enrollment Fee";
			font-size: 20px !important;
		}
	}
	
	.plan-title {
		position: absolute;
		top: -31px;
		left: 9px;
		padding: 8px 8px 0 8px;
		border-radius: 8px 8px 0 0;
		
		h3 {
			font-size: 14px !important;
			font-weight: 400 !important;
			color: #fff !important;
			font-family: "SommetRounded-Light", sans-serif;
		}
	}
	&:has([sweti_planname~="1M"])::after {
		content: "No Commitment";
        position: absolute;
        top: 176px;
        left: 0;
        right: 0px;
        font-size: 20px;
		font-family: "SommetRounded-Light", sans-serif;
    }
	&:has([sweti_planname~="6M"])::after {
		content: "6-Month Commitment";
        position: absolute;
        top: 176px;
        left: 0;
        right: 0px;
        font-size: 20px;
		font-family: "SommetRounded-Light", sans-serif;
    }
	&::after {
		content: "6-Month Commitment";
        position: absolute;
        top: 176px;
        left: 0;
        right: 0px;
        font-size: 20px;
		font-family: "SommetRounded-Light", sans-serif;
    }
	
	.sabasiccontainer {
		display: block !important;
		position: absolute;
		top: 54px;
		left: 0;
		right: 0;
		font-family: "SommetRounded-Black", Sans-serif;
		font-size: 80px;
	}
}

/* CUSTOM PLAN APPEARANCE */

.plan-feature:has([sweti_planname*="BASE"]) {
	border: 2px solid #09A4E3;
	
	.plan-title {
		background: #09A4E3;
	}
}

.plan-feature:has([sweti_planname*="BASE PLUS"]) {
	border: 2px solid #C4D600;
	
	.plan-title {
		background: #C4D600;
	}
}

.plan-feature:has([sweti_planname*="ORANGE"]) {
	border: 2px solid #EF4B24;
	
	.plan-title {
		background: #EF4B24;
	}
	
	&::before {
		content: "24/7/365 ACCESS";
        color: #EF4B24;
        position: absolute;
        top: 250px;
        left: 0;
        right: 0;
        font-weight: 700;
        font-size: 20px;
		font-family: "SommetRounded-Black", sans-serif;
	}
	
	.sabasiccontainer::before {
		content: "OUR BEST VALUE";
		font-size: 20px;
        position: absolute;
        top: -29px;
        left: 0;
        right: 0;
		color: #EF4B24;
	}
}

#regForm .select_button {
    margin-left: 50px;
    margin-right: 50px;
    border: var(--dark-grey-color);
    border-style: solid;
    border-width: 3px;
    text-align: center;
    border-radius: 8px;
    margin-top: 8px;
}

/* Steps 3 Onwards */

#regForm #step3,
#regForm #step4,
#regForm #step {
	.plan-feature {
		display: none;
	}
}

.col_list.custom_col_list.annual_fee {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    font-size: 8px !important;
}

.col_list.custom_col_list.annual_fee *,
.annual_fee_label,
.sidebarFeeContainer {
	font-size: 12px !important;
}

.sidebarFeeContainer,
.annual_fee_label {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

#regForm .annual_fee_label {
	display: none !important;
}

/* Header Navigation */

.join-now-btn {
	background: #8B0000;
	font-size: 20px !important;
	margin-left: 16px !important;
}

@media (min-width: 981px) {
    .et_pb_row {
        padding: 2% 0;
		position: relative;
        z-index: 0 !important;
		background-color: none;
    }
}

.plans_data_wrapper {
	margin-bottom: 120px;	
}

/* .loading_box {
	position: sticky !important;
} */

#regForm .plan_heading_h3 {
	display: none;
}

.sweti_join_now .plan-items .select_button input[type="radio"] {
	height: 375px !important;
}

button#prevBtn2 {
    display: none !important;
}

#regForm #step3 .plan-items,
#regForm #step4 .plan-items,
#regForm #step5 .plan-items
 {
	height: 320px;
}

#regForm #step5 .plan-feature {
	display: none;
}

body #regForm.sweti_join_now .aside-inner .plan-items .plan_data .custom_col_list span, body .sweti_join_now .col_list.custom_col_list label {
    font-size: 18px !important;
}

#regForm label.error {
	padding: 0;
}