/***** Common Styles */

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form {
    display: grid; grid-template-columns: repeat(2, 1fr); justify-items: start; }


/***** 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; 
    flex-wrap: wrap; align-items: center; align-content: center; }

.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_Alt); 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(--wdtHeadAltColor); }


/* Alter Blocks Styles */

.wdt-sc-roofing-wrapper .wdt-sc-roofing-form .wdt-sc-calc-container > div.roof-types { 
    width: 50%; max-width: 50%; padding-right: 20px; }

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

.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; }

.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_Zero); border-radius: var(--wdtRadius_Zero); }

.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_Alt); 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://proofer.wpengine.com/wp-content/uploads/2025/08/Section-Overlay-Image.jpg);
    background-position: center center; background-repeat: no-repeat;
    background-size: cover; -webkit-clip-path: polygon(85% 0, 100% 15%, 100% 100%, 0 100%, 0 0); 
    clip-path: polygon(85% 0, 100% 15%, 100% 100%, 0 100%, 0 0); 
    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; }

.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(--wdtPrimaryColor); 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 > 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.5); 
    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_Alt); 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(0.875rem, 0.8083rem + 0.3681vw, 1.25rem); /*20px - 14px*/ }

.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.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 .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_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; }

.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 {
    background-color: var(--wdtAccentTxtColor); color: var(--wdtHeadAltColor); 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(--wdtSecondaryColor); }

.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-Livi-Transition); 
    transition: var(--wdt-Livi-Transition); 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:hover .wdt-button-text {
    -webkit-transform: translateX(0); transform: translateX(0); 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 .wdt-button-text::after {
    content: '\e800'; font-family: "common-right-arrow"; font-size: calc(100% + 15%); 
    -webkit-transform: translateX(4px); transform: translateX(4px); transform-origin: center;
    backface-visibility: hidden; isolation: isolate; will-change: transform; -webkit-transition: var(--wdt-Livi-Transition); 
    transition: var(--wdt-Livi-Transition); opacity: 0; margin-left: 8px; }

.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; }
}