/***** Common Styles */

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form {
    display: grid; grid-template-columns: repeat(2, 1fr); justify-items: start; gap:  clamp(0rem, -2.0833rem + 4.3403vw, 3.125rem); /*50px - 0px*/}


/***** Left Side Block Styles */

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container { 
    padding: clamp(0.625rem, -0.625rem + 2.6042vw, 2.5rem); /*40px - 10px / To Tablet Screen*/ 
    padding-left: 0; padding-right: clamp(1.875rem, 1.0966rem + 4.2945vw, 6.25rem); /*100px - 30px*/ }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container {
    width: 100%; max-width: 100%; text-align: left; display: flex; justify-content: space-between;
    flex-wrap: wrap; align-items: flex-start; align-content: start; }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div {
    width: 100%; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div:not(:last-child) { 
    margin-bottom: clamp(1.5625rem, 1.2845rem + 1.5337vw, 3.125rem); /*50px - 25px*/ }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div h3 {
    font-family: var(--wdtFontTypo_Alt); font-size: clamp(1.25rem, 1.2055rem + 0.2454vw, 1.5rem); /*24px - 20px*/ 
    font-weight: var(--wdtFontWeight_Alt); line-height: var(--wdtLineHeight_Alt); 
    text-transform: capitalize; color: var(--wdtHeadAltColor); margin: 0; 
    margin-bottom: clamp(0.875rem, 0.786rem + 0.4908vw, 1.375rem); /*22px - 14px*/ }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div .wdt-options-wrapper .wdt-option-item {
    display: flex; align-items: center; justify-content: flex-start; }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div .wdt-options-wrapper .wdt-option-item:not(:last-child) {
    margin-bottom: clamp(0.875rem, 0.8083rem + 0.3681vw, 1.25rem); /*20px - 14px*/ }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div .wdt-options-wrapper .wdt-option-item input {
    cursor: pointer; -webkit-appearance: none; appearance: none; width: 16px; height: 16px; padding: 0; 
    border: 3px solid var(--wdtBorderColor); -webkit-border-radius: var(--wdtRadius_Part); 
    border-radius: var(--wdtRadius_Part); margin: 0 10px 0 0; }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div .wdt-options-wrapper .wdt-option-item input:checked {
    border-color: var(--wdtPrimaryColor); }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div .wdt-options-wrapper .wdt-option-item .wdt-option-label {
    font-family: var(--wdtFontTypo_Base); font-size: clamp(1rem, 0.9778rem + 0.1227vw, 1.125rem); /*18px - 16px*/ 
    font-weight: var(--wdtFontWeight_Base); line-height: var(--wdtLineHeight_Alt); text-transform: capitalize; 
    color: var(--wdtBodyTxtColor); transition: var(--wdt-Ad-Transition); }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div .wdt-options-wrapper .wdt-option-item input:checked + .wdt-option-label { color: var(--wdtPrimaryColor); }


.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container  .select2-selection.select2-selection--single { border: 1px solid rgba(var(--wdtHeadAltColorRgb),0.45) !important; }

/* Alter Blocks Styles */

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div.roof-types { 
    width: 100%; max-width: 100%; }
.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div.material-types > .wdt-select-wrapper,
.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div.roof-types > .wdt-select-wrapper { 
    width: 100%; max-width: 100%; display: block; }
.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div.material-types > .wdt-select-wrapper .select2-container,
.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div.roof-types > .wdt-select-wrapper .select2-container { 
    width: 100% !important; max-width: 100%; display: block; }
.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div.material-types > .wdt-select-wrapper .wdt-select-help-text:last-child,
.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div.roof-types > .wdt-select-wrapper .wdt-select-help-text:last-child { 
    margin: 10px 0 0; }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div.material-types { 
    width: 100%; max-width: 100%; }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div.building-types .wdt-options-wrapper {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; margin: -8px -15px; }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div.building-types .wdt-options-wrapper .wdt-option-item { 
    margin: 8px 15px; }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div.building-types .wdt-options-wrapper .wdt-option-item:not(:last-child) {
    margin-bottom: 8px; }



/* Progrss Bar Block */

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-roofing-range-progress .wdt-roofing-range-label-group {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px; 
    font-family: var(--wdtFontTypo_Alt); font-size: clamp(1.5rem, 1.4333rem + 0.3681vw, 1.875rem); /*30px - 24px*/ 
    font-weight: var(--wdtFontWeight_Alt); line-height: var(--wdtLineHeight_Alt); 
    text-transform: capitalize; color: var(--wdtHeadAltColor); margin-bottom: 25px; }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-roofing-range-progress .wdt-roofing-range-label-group .selected-range-value #selected-value {
    margin-right: 6px; font-family: var(--wdtFontTypo_Base); }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-roofing-range-progress input[type="range"] {
    cursor: e-resize; height: 3px; padding: 0; border: none !important; 
    -webkit-border-radius: var(--wdtRadius_2X); border-radius: var(--wdtRadius_2X); }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-roofing-range-progress input[type="range"]::-webkit-slider-thumb {
    width: 12px; height: 12px; -webkit-appearance: none; appearance: none; background: var(--wdtPrimaryColor); 
    -webkit-box-shadow: 0 0 0 5px rgba(var(--wdtPrimaryColorRgb), 0.2); box-shadow: 0 0 0 5px rgba(var(--wdtPrimaryColorRgb), 0.2); -webkit-border-radius: var(--wdtRadius_Full); border-radius: var(--wdtRadius_Full); }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-roofing-range-progress .range-values {
    width: 100%; max-width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; 
    font-family: var(--wdtFontTypo_Base); font-size: var(--wdtFontSize_Base); font-weight: var(--wdtFontWeight_Alt); 
    text-transform: capitalize; color: var(--wdtBodyTxtColor); margin-top: 18px; 
    margin-bottom: clamp(0.625rem, 0.536rem + 0.4908vw, 1.125rem); /*18px - 10px*/ }


/***** Right Side Block Styles */

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result { 
    position: relative; overflow: hidden; width: 100%; max-width: 100%; backface-visibility: hidden; will-change: transform;
    background-image: url(https://horti.wpengine.com/wp-content/uploads/2025/12/section-bg-1.jpg);
    background-position: center center; background-repeat: no-repeat;
    background-size: cover; padding: clamp(1.5625rem, 1.2845rem + 1.5337vw, 3.125rem); /*50px - 25px*/ display: flex; 
    flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; border-radius: var(--wdtRadius_3X) var(--wdtRadius_1X); }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result::before {
    content: ''; pointer-events: none; position: absolute; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; 
    background-color: var(--wdtSecondaryColor); opacity: 0.95; z-index: -1; margin: auto; }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result > div { width: 100%; max-width: 100%; }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result div,
.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result h2,
.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result span { color: var(--wdtAccentTxtColor); }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result div.cost-description { max-width: 400px; }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result > h2 {
    font-family: var(--wdtFontTypo_Alt); font-size: clamp(1.5rem, 1.4333rem + 0.3681vw, 1.875rem); /*30px - 24px*/ 
    font-weight: var(--wdtFontWeight_Alt); line-height: var(--wdtLineHeight_Alt); 
    text-transform: capitalize; margin: 0; margin-bottom: clamp(0.875rem, 0.786rem + 0.4908vw, 1.375rem); /*22px - 14px*/ }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result .total-cost-item {
    display: flex; flex-direction: column; align-items: flex-start; }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result > div:not(:last-child) {
    border-bottom: 1px solid rgba(var(--wdtAccentTxtColorRgb), 0.2); 
    padding-bottom: clamp(1.5625rem, 1.3957rem + 0.9202vw, 2.5rem); /*40px - 25px*/ 
    margin-bottom: clamp(1.5625rem, 1.3957rem + 0.9202vw, 2.5rem); /*40px - 25px*/ }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result .total-cost-item .cost-label {
    font-family: var(--wdtFontTypo_Alt); font-size: clamp(1.25rem, 1.2055rem + 0.2454vw, 1.5rem); /*24px - 20px*/ 
    font-weight: var(--wdtFontWeight_Alt); line-height: var(--wdtLineHeight_Alt); 
    text-transform: capitalize; margin-bottom: clamp(0.625rem, 0.5805rem + 0.2454vw, 0.875rem); /*14px - 10px*/ }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result .total-cost-item #total-cost {
    font-family: var(--wdtFontTypo_Base); font-size: clamp(2.1875rem, 1.7983rem + 2.1472vw, 4.375rem); /*70px - 35px*/ 
    font-weight: var(--wdtFontWeight_Alt); line-height: var(--wdtLineHeight_Alt); 
    text-transform: capitalize; margin-bottom: clamp(0.3125rem, 0.2569rem + 0.3067vw, 0.625rem); /*10px - 5px*/ }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result .cost-results div:not(:last-child) {
    margin-bottom: clamp(1.25rem, 0.8342rem + 0.8673vw, 1.875rem); /*20px - 30px*/ }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result .cost-results div.cost-item {
    width: 100%; max-width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; 
    justify-content: space-between; gap: 8px 40px; }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result .cost-results div.cost-item .cost-label {
    font-family: var(--wdtFontTypo_Alt); font-size: clamp(1.625rem, 1.5417rem + 0.2778vw, 1.875rem); /*26px - 30px*/ 
    font-weight: var(--wdtFontWeight_Alt); line-height: var(--wdtLineHeight_Alt); text-transform: capitalize;
    display: flex; gap: 20px; align-items: baseline; justify-content: space-between; width: 100%; margin-bottom: 10px; }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result .cost-results div.cost-item #labour-cost,
.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result .cost-results div.cost-item #material-cost {
    font-family: var(--wdtFontTypo_Base); font-size: clamp(1.25rem, 1.2055rem + 0.2454vw, 1.5rem); /*24px - 20px*/ 
    font-weight: var(--wdtFontWeight_Alt); line-height: var(--wdtLineHeight_Alt); text-transform: capitalize; }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result > div.wdt-roofing-btn-wrapper {
    width: 100%; max-width: fit-content; }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result > div.wdt-roofing-btn-wrapper a.wdt-roofing-calculate-btn {
    color: var(--wdtAccentTxtColor); margin: 0; }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result > div.wdt-roofing-btn-wrapper a.wdt-roofing-calculate-btn:hover {
    background-color: var(--wdtAccentTxtColor); color: var(--wdtHeadAltColor);}

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result > div.wdt-roofing-btn-wrapper a.wdt-roofing-calculate-btn .wdt-button-text {
    display: inline-flex; align-items: center; -webkit-transform: translateX(12px); transform: translateX(12px); transform-origin: center;
    backface-visibility: hidden; isolation: isolate; will-change: transform; -webkit-transition: var(--wdt-Ad-Transition); 
    transition: var(--wdt-Ad-Transition); color: var(--wdtAccentTxtColor); }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result > div.wdt-roofing-btn-wrapper a.wdt-roofing-calculate-btn:hover .wdt-button-text {
    -webkit-transform: translateX(0); transform: translateX(0); color: var(--wdtHeadAltColor); }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result > div.wdt-roofing-btn-wrapper a.wdt-roofing-calculate-btn .wdt-button-text::after {
    content: '';-webkit-transform: translateX(4px); transform: translateX(4px); transform-origin: center;
    backface-visibility: hidden; isolation: isolate; will-change: transform; -webkit-transition: var(--wdt-Ad-Transition); 
    transition: var(--wdt-Ad-Transition); opacity: 0; margin-left: 8px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100;' xml:space='preserve'%3E%3Cpath d='M98.4,49.5c-54-41.2-77.1-3.4-77.1-3.4l49.9,3.4C49.6,49.3,12,49,4.4,50.6c-5.9,1.2-1.4,5.2,2.5,4.3 c3.7-0.9,8.6-1.4,14.2-1.7C73,92.6,98.4,49.5,98.4,49.5z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100;' xml:space='preserve'%3E%3Cpath d='M98.4,49.5c-54-41.2-77.1-3.4-77.1-3.4l49.9,3.4C49.6,49.3,12,49,4.4,50.6c-5.9,1.2-1.4,5.2,2.5,4.3 c3.7-0.9,8.6-1.4,14.2-1.7C73,92.6,98.4,49.5,98.4,49.5z'%3E%3C/path%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 100%;
    background: currentColor;
    width: 24px;
    height: 20px; }

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-roofing-result > div.wdt-roofing-btn-wrapper a.wdt-roofing-calculate-btn:hover .wdt-button-text::after {
    -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; }


/*--------------------------------------------------------------
	Responsive
--------------------------------------------------------------*/

@media only screen and (max-width: 767px) {
    .wdt-sc-roofing-wrapper .wdt-sc-roofing-form { grid-template-columns: repeat(1, 1fr); }
    .wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container {
        padding: 0; padding-left: 0; padding-right: 0; padding-bottom: 40px; }
}

@media only screen and (max-width: 480px) {
    .wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container { padding-bottom: 30px; }
}