/*
 *  Service Plan
 *
 */
.service-plan {
	padding-left: 0;
	padding-right: 0;
}

        #section-plans-intro {
            background-color: #333333;
            color: #FFFFFF;
        }


		/* Plan Top Header */
		#section-plans-intro .plan-top-header {
			padding: 15px 0;
		}
		
			#section-plans-intro .section-sub-title,
			#section-plans-intro .section-sub-title > a {
				margin: 0;
				color: #fff;
				font-size: 20px;
				line-height: 1;
			}
			
			@media (min-width: 768px) {
				#section-plans-intro .plan-top-header {
					padding: 25px 0;
				}
				
				#section-plans-intro .section-sub-title,
				#section-plans-intro .section-sub-title > a {
					font-size: 28px;
				}
			}



		/* Plan Header */
        #section-plans-intro .plan-header {
            padding: 25px 0;
            background-color: var(--service-plan-color-1);
			color: #fff;
        }

            #section-plans-intro .section-title {
				margin: 0 0 0 -2px;
				font-size: calc(1.75rem + 3.3vw);
				font-weight: 400;
            }
			
            #section-plans-intro .section-title b {
                display: block;
				/* margin-right: 5px; */
            }


			@media (min-width: 768px) {
				#section-plans-intro .plan-header {
					padding: 50px 0;
				}

				#section-plans-intro .section-title b {
					display: inline;
				}
			}


			@media (min-width: 1200px) {
				#section-plans-intro .section-title {
					margin-left: -4px;
					font-size: 4rem;
				}
			}


		/* Plan Logo */
        .plan-logo-wrapper {
            position: absolute;
            display: flex;
            flex-direction: column;
            text-align: center;
            padding-right: 15px;
            right: 0;
			bottom: -115px;
			width: 135px;
        }

			@media (min-width: 768px) {
				.plan-logo-wrapper {
					bottom: -155px;
					width: 162px;
				}
			}

			.plan-logo {
				padding: 15px 18px;
				border-radius: 50%;
				border: 8px solid var(--service-plan-color-1, #babfc3);
				background-color: #333;
				width: 100%;
				height: auto;
			}
			.plan-stars {
				margin-top: 15px !important;
			}


		/* Plan Intro Text */
        .plan-intro-text {
			margin-top: 110px;
			font-size: 20px;
			line-height: 30px;
        }

			@media (min-width: 768px) {
			   .plan-intro-text {
					margin-top: 35px;
				}
			}

			@media (min-width: 992px) {
			   .plan-intro-text {
					font-size: 28px;
					line-height: 35px;
				}
			}



		/* Plan Tabs */

        .plan-tabs-wrapper {
            margin-top: 50px;
        }

        .plan-tabs-image {
            position: relative;
            z-index: 1;
            width: 70%;
			margin: 0 auto 30px;
        }

            .plan-tabs-image img {
				max-height: 353px;
                width: 100%;
            }

        #section-plans-intro .tabs-header {
            list-style: none;
            margin: 0;
			padding-left: 0;
        }

            #section-plans-intro .tabs-header li {
                display: inline-block;
                padding: 5px 15px;
                border-radius: 16px 16px 0 0;
                font-weight: bold;
                font-size: 24px;
                cursor: pointer;
            }

        .tab-homeowner {
            margin-right: 15px;
        }

        .tabs-homeowner .tab-homeowner,
        .tabs-landlord .tab-landlord {
            background: var(--service-plan-color-2, #ffffff);
            color: var(--service-plan-color-1, #babfc3);
        }

        .tabs-homeowner .tab-landlord,
        .tabs-landlord .tab-homeowner {
            background: var(--service-plan-color-1, #babfc3);
        }

		#section-plans-intro .tab-content .plan-info {
			background: var(--service-plan-color-2, #ffffff);
			border-radius: 0 16px 0 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			color: #333333;


			padding: 25px 15px 20px;
			flex-wrap: wrap;
		}


            .tab-content .plan-info .plan-price {
                text-align: right;
                font-size: 28px;
				line-height: 35px;
            }

            .tab-content .plan-info .price {
                display: block;
                font-size: 64px;
                line-height: 0.7;
            }

            .tab-content .plan-info .plan-apply {
                margin: 15px 0;
            }

        #section-plans-intro .tab-content ul.plan-all-include {
            margin: 0 0 0 30px;
            padding: 10px 0;
			font-size: 20px;
			line-height: 1;
        }
		
			#section-plans-intro .tab-content ul.plan-all-include > li {
				min-height: 22px;
				background-size: 18px;
				background-position: left 1px;
				padding-left: 28px;
				margin: 5px 0;
			}

			#section-plans-intro .tab-content .acw-button,
			#section-plans-intro .tab-content .btn {
				padding-right: 110px;
				width: auto;
			}

        .tab-content .plan-features {
			flex-direction: column;
            background: var(--service-plan-color-1, #babfc3);
            border-radius: 0 0 16px 16px;
            display: flex;
            padding: 20px 30px;
            justify-content: space-between;
            font-size: 16px;
            font-weight: 600;
            position: relative;
            text-align: left;
        }

        .tab-content .plan-features .icon-feature {
            display: inline-block;
            margin: 15px 10px 0 0;
            width: 37px;
            height: 37px;
			text-align: center;
        }
		
		.tab-content .plan-features .icon-feature > img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}

        .tab-content .feature-inactive {
            opacity: 0.3;
			color: #333;
        }

        #section-plans-intro .extra-promotion {
            text-align: center;
            font-size: 24px;
            line-height: 1;
            margin: 30px 0;
        }

            #section-plans-intro .extra-promotion a {
                color: var(--service-plan-color-1, #babfc3);
                font-weight: 700;
				
				display: block;
				margin: 5px 0;
            }

                #section-plans-intro .extra-promotion a:hover,
                #section-plans-intro .tabs-homeowner .tab-landlord:hover,
                #section-plans-intro .tabs-landlord .tab-homeowner:hover {
                    opacity: 0.8;
                    text-decoration: none;
                }

        .tabs-homeowner .landlord-price,
        .tabs-landlord .homeowner-price {
            display: none;
        }


		@media (min-width: 768px) {
            .tab-content .plan-features {
                flex-direction: row;
                padding: 45px 15px;
                text-align: center;
            }
            .tab-content .plan-features .icon-feature {
                margin: 0 auto 15px;
                display: block;
            }
			
			.plan-tabs-wrapper {
				margin-top: 75px;
			}

            .plan-tabs-image {
                width: 100%;
                margin: 0;
            }


            #section-plans-intro .tabs-header li {
                padding: 8px 45px;
                font-size: 30px;
            }


			#section-plans-intro .extra-promotion {
				text-align: right;
				margin: 30px 15px 30px 0;
			}
			#section-plans-intro .extra-promotion a {
				display: inline;
				margin: 0;
			}
		}
		
		@media (min-width: 1200px) {
            .tab-content .plan-info {
                justify-content: space-between;
            }
			
			#section-plans-intro .tab-content .plan-info {
				padding: 25px 30px 20px;
				
				justify-content: space-between;
				
			}


            #section-plans-intro .tab-content ul.plan-all-include {
                padding: 0;
				font-size: 22px;
            }

            .tab-content .plan-features {
                padding: 40px 30px;
            }
			
		}

        






        #section-includes {
            padding: 60px 0;
        }

        .toggle-header {
            position: relative;
            background-color: #EBEDED;
            padding: 25px 15px 17px 110px;
            border-radius: 16px;
            color: var(--service-plan-color-1, #babfc3);
            font-size: 28px;
            line-height: 35px;
            min-height: 80px;
            cursor: pointer;
        }

            .toggle-header span {
                position: absolute;
                top: 17px;
                left: 17px;
            }

            .toggle-header a {
                color: inherit;
                text-decoration: none;
            }

        .toggle-body {
            display: none;
            padding: 0 15px 0 110px;
        }

            .toggle-body h3 {
                color: var(--service-plan-color-1, #babfc3);
                font-weight: 500;
                margin-top: 30px;
                margin-bottom: 10px;
            }

        #section-includes .toggle-body ul {
            margin: 0;
        }

        .toggle-body ul li {
            font-size: 18px;
        }

        .plus-close {
            transition: transform 1s;
        }

        .includes-toggle.open .plus-close {
            transform: rotate(45deg);
        }


        @media (max-width: 767px) {
            .toggle-header {
                padding: 15px 15px 17px 80px;
            }
            .toggle-body {
                padding: 0 15px 0 15px;
            }
            .toggle-body ul li {
                font-size: 16px;
                margin-bottom: 10px;
                line-height: 18px;
            }
        }




        #section-apply-now {
            padding-bottom: 90px;
        }

        #section-apply-now h2 {
            font-size: 60px;
            font-weight: 400;
            color: #333;
            position: relative;
            padding-bottom: 16px;
        }

        #section-apply-now h2:after {
            content: '';
            position: absolute;
            background: #333333 0% 0% no-repeat padding-box;
            border-radius: 20px;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 8px;
        }

        #section-apply-now {
            font-size: 20px;
        }

        #getaddress_input {
            /* width: 120px !important; */
            /* margin-right: 7px; */
            /* text-align: center; */
			display: inline-block;
			
			border-bottom: 1px solid #B2BCC1;
			border-radius: 0;
			height: 28px;
			/* padding: 10px; */
        }

        #getaddress_dropdown {
            margin-top: 27px;
        }


        @media (max-width: 991px) {
            .form_fields span {
                margin: 0;
            }
        }

		#getaddress_error_message {
			color: #dc3232;
		}


/*
 *
 * POSTCODE LOOKUP
 *
 */
		#postcode_lookup {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
		}

			#getaddress_input {
				text-transform: uppercase;
				font-size: 16px;
			}

		#getaddress_button {
			margin-top: 20px;
		}
		
        #getaddress_dropdown {
            margin-top: 30px;
			flex-grow: 1;
			flex-basis: 100%;
        }


        @media (max-width: 991px) {
            .form_fields span {
                margin: 0;
            }
        }

		#getaddress_error_message {
			color: #dc3232;
		}


/* Gutenberg Editor Classes */

.acf-block-preview::after,
.acf-block-preview::before {
    content: '';
    display: block;
    clear: both;
}

.acf-block-preview .toggle-body h3 {
    color: var(--service-plan-color-1, #babfc3);
}

/* Fix the problem when bold elements does not have space arround */
.acf-block-preview #section-plans-intro .section-title b {
	margin-right: 10px;
}

.block-editor-block-list__layout.is-root-container .toggle-body h3 {
	font-weight: 500;
	margin-top: 30px;
	margin-bottom: 10px;
}