// VARIABLES
$bgColor: #f2f2f2;
$logoColor: #26547a;
$textLogoColor: #586167;
$whiteColor: #f2f2f2;
$whiteGreyColor: #e2e2e2;
$darkLightColor: #303538;
$linkedin: #267AA8;
$facebook: #4867AA;


// MSFORM OFFER
#msform {
	width: 85%;
	margin: 0 auto;
	text-align: center;
	position: relative;
	@media (max-width:500px) {
		width: 100%;
		
	}

    // Radio buttons
    label.classic {
        display: flex;
        justify-content: center;
        cursor: pointer;
        font-weight: 500;
        position: relative;
        overflow: hidden;
        margin-bottom: 0.5em;
        /* Accessible outline */
        /* Remove comment to use */ 
        /*
            &:focus-within {
                    outline: .125em solid $logoColor;
            }
        */
        input.msform-radio {
            position: absolute;
            left: -9999px;
            &:checked + span {
                background-color: mix(#fff, $logoColor, 84%);
                &:before {
                    box-shadow: inset 0 0 0 0.4375em $logoColor;
                }
            }
        }
        span {
            display: flex;
            align-items: center;
            padding: 0.375em 0.75em 0.375em 0.375em;
            border-radius: 99em;
            transition: 0.25s ease;
            background-color: #26547a11;

            &:hover {
                background-color: mix(#fff, $logoColor, 84%);
            }
            &:before {
                display: flex;
                flex-shrink: 0;
                content: "";
                background-color: #fff;
                width: 1.5em;
                height: 1.5em;
                border-radius: 50%;
                margin-right: 0.375em;
                transition: 0.25s ease;
                box-shadow: inset 0 0 0 0.125em $logoColor;
            }
        }
    }


    // Radio buttons for page count field
    $number-of-options: 5;
    #page-number-slider {
		display: flex;
		flex-direction: row;
		align-content: stretch;
		position: relative;
		width: 100%;
		height: 50px;
		user-select: none;
        margin-bottom: 20px;
		&::before {
			content: " ";
			position: absolute;
			height: 2px;
			width: 100%;
			width: calc(100% * (#{$number-of-options - 1} / #{$number-of-options}));
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: $logoColor;
		}
		input, label {
			box-sizing: border-box;
			flex: 1;
			user-select: none;
			cursor: pointer;
		}
		label {
			display: inline-block;
			position: relative;
			width: 20%;
			height: 100%;
			user-select: none;
            margin: 0;
			&::before {
				content: attr(data-page-number);
				position: absolute;
				left: 50%;
				padding-top: 10px;
				transform: translate(-50%, 45px);
				font-size: 0.9rem;
				letter-spacing: 0.4px;
				font-weight: 400;
				white-space: nowrap;
				opacity: 0.85;
				transition: all 0.15s ease-in-out;
			}
			&::after {
				content: " ";
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 30px;
				height: 30px;
				border: 2px solid $logoColor;
				background: #fff;
				border-radius: 50%;
				pointer-events: none;
				user-select: none;
				z-index: 1;
				cursor: pointer;
				transition: all 0.15s ease-in-out;
			}
			&:hover::after {
				transform: translate(-50%, -50%) scale(1.25);
			}
		}
		input {
			display: none;
			&:checked {
				+ label::before {
					font-weight: 800;
					opacity: 1;
				}
				+ label::after {
					border-width: 4px;
					transform: translate(-50%, -50%) scale(0.75);
				}
				~ #page-number-pos {
					opacity: 1;
				}
				@for $i from 1 through $number-of-options {
					&:nth-child(#{$i * 2 - 1}) ~ #page-number-pos {
						left: #{($i * 20%) - 10%};
					}
				}
			}
		}
		#page-number-pos {
			display: block;
			position: absolute;
			top: 50%;
			width: 12px;
			height: 12px;
			background: $logoColor;
			border-radius: 50%;
			transition: all 0.15s ease-in-out;
			transform: translate(-50%, -50%);
			border: 2px solid #fff;
			opacity: 0;
			z-index: 2;
            margin-bottom: 20px;
		}
	}
	&:valid {
		#page-number-slider {
			input {
				+ label::before {
					transform: translate(-50%, 45px) scale(0.9);
					transition: all 0.15s linear;
				}
				&:checked + label::before {
					transform: translate(-50%, 45px) scale(1.1);
					transition: all 0.15s linear;
				}
			}
		}
	}
	& + button {
		display: block;
		position: relative;
		margin: 56px auto 0;
		padding: 10px 20px;
		appearance: none;
		transition: all 0.15s ease-in-out;
		font-family: inherit;
		font-size: 1.5rem;
		font-weight: 600;
		background: #fff;
		border: 2px solid $logoColor;
		border-radius: 8px;
		outline: 0;
		user-select: none;
		cursor: pointer;
		&:hover {
			// transform: scale(1.1);
			background: $logoColor;
			color: #fff;
			&:active {
				transform: scale(0.9);
			}
		}
		&:focus {
			background: $logoColor;
			border-color: $logoColor;
			color: #fff;
			pointer-events: none;
			&::before {
				animation: spin 1s linear infinite;
			}
		}
		&::before {
			display: inline-block;
			width: 0;
			opacity: 0;
			content: "\f3f4";
			font-family: "Font Awesome 5 Pro";
			font-weight: 900;
			margin-right: 0;
			transform: rotate(0deg);
		}
	}
	&:invalid + button {
		pointer-events: none;
		opacity: 0.25;
	}
    // end radio btn page count field
}
@keyframes spin {
	from {
		transform: rotate(0deg);
		width: 24px;
		opacity: 1;
		margin-right: 12px;
	}
	to {
		transform: rotate(360deg);
		width: 24px;
		opacity: 1;
		margin-right: 12px;
	}
}
#msform fieldset {
	background-color: #f2f2f2;
	border: 0 none;
	border-radius: 20px;
	-webkit-box-shadow: 0px 0px 15px -10px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 15px -10px rgba(0,0,0,0.75);
	padding: 20px 30px;
	box-sizing: border-box;
	width: 100%;
    margin: 0 auto;
	
	/*stacking fieldsets above each other*/
	position: relative;

    p{
        font-size: 0.8rem;
    }

    .form-group{
        margin: 0.5em 0;
    }
}

#msform-start-field{
    text-align: center;
    background-image: var(--offerFormStartBg) !important;
    *{
        color: #f2f2f2;
    }
    .action-button{
        background-color: var(--offerFormStartBtnBg) !important;
        display: block;
        width: 50% !important;
        margin: 20px auto 0 !important;
    }
}

/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
	display: none;
}
#msform-offer-field{
    height: auto;
    transition: 0.2s all;
}

/*buttons*/
#msform .action-button {
	width: 6rem;
	background: $logoColor;
	font-weight: bold;
	color: #ffffff;
	border: 0 none;
	border-radius: 3px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 30px 5px 10px;
    transition: all 0.3s;
}
#msform .action-button:hover, #msform .action-button:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px $logoColor;
}

#msform-sim, #msform-submit, #msform-offer-send{
	background: rgb(67, 136, 49) !important;
}
#msform-sim:hover, #msform-submit:hover, #msform-offer-send:hover{
	box-shadow: 0 0 0 2px white, 0 0 0 3px rgb(67, 136, 49) !important;
}
/*headings*/
.fs-title {
	font-size: 0.9rem;
	text-transform: uppercase;
	color: #2C3E50;
	margin-bottom: 10px;
}
.fs-subtitle {
	font-weight: bold;
	font-size: 1rem;
	color: #666;
	margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
    visibility: hidden;
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
    transition: 0.2s all;
}
#progressbar li {
	list-style-type: none;
	color: white;
	text-transform: uppercase;
	font-size: 0.6rem;
	width: calc(100% / 10);
	float: left;
	position: relative;

    @media (min-width:1850px) {
        font-size: 1rem;
    }
}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 0.7rem;
	color: #333;
	background: white;
	border-radius: 3px;
	margin: 0 auto 5px auto;

    @media (min-width:1850px) {
        width: 2rem;
	    line-height: 2rem;
    }
}
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1; /*put it behind the numbers*/
    @media (min-width:1850px) {
        height: 10px;
	    top: 27px;
    }
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: $logoColor;
	color: white;
}

/* END MULTISTEP FORM  --------------------------------------------------------------------------------------- END MULTISTEP FORM  */

// radio buttons style press
    // label.classic {
    //     display: inline-grid;
    //     margin: 0 0.2em;
    //     width: 45%;
    //     text-align: center;
    //     -webkit-tap-highlight-color: transparent;
    // }

    // input.msform-radio {
    //     padding: 15px;
    //     border-radius: 3px;
    //     margin-bottom: 10px;
    //     width: 80%;
    //     margin: 10px auto;
    //     color: $logoColor;
    //     font-size: 0.85rem;
    // }

    // input.msform-radio {
    //     border-radius: 5px;
    //     box-shadow:
    //         0.15em 0.15em 1em #acbee6 inset,
    //         -0.15em -0.15em 1em #cccdd1 inset,
    //         0.15em 0.15em 0.45em #c1c2c5, 
    //         -0.15em -0.15em 0.45em #fff;
    //     cursor: pointer;
    //     margin-bottom: 0.5em;
    //     height: 1em;
    //     transition: all 0.1s ease-in-out;
    //     -webkit-appearance: none;
    //     -moz-appearance: none;
    //     appearance: none;
    //     border : none;

    //     &:checked {
    //         box-shadow:
    //             -0.15em -0.15em 0.45em #f3f4f8 inset,
    //             0.15em 0.15em 0.45em #c1c2c5 inset,
    //             0 0 0 #c1c2c5, 
    //             0 0 0 #fff;
    //     }
    //     &:checked + span {
    //         opacity: 1;
    //     }
    //     &:focus {
    //         outline: transparent;
    //     }
    //     + span {
    //         opacity: 0.65;
    //         transition: opacity 0.1s ease-in-out;
    //     }
    // }