/* =========================
   Accordion Section ttt
========================= */
.accordion-section {
	padding: 48px 0px;
}

.accordion-tabs {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-bottom: 20px;
}

.tab-btn {
	padding: 12px 10px;
	border: none;
	background: #cfa25e;
	color: #fff;
	cursor: pointer;
	font-weight: 700;
	font-size: 26px;
	border-radius: 8px;
}

.tab-btn.active {
	background: #a97c36;
}

.accordion-item {
	display: none;
	background: #fff;
	padding: 30px;
	border-radius: 6px;
}

.accordion-item.active {
	display: block;
}

.accordion-content h3 {
	margin-top: 0;
}

.accordionbtn-innerwrap {
	background: #CDA569;
	padding: 8px;
	border-radius: 8px;
}

.right-result {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1020;
}

/* =========================
   Calculator Layout
========================= */
.calculator-grid {
	display: flex;
	justify-content: space-between;
	gap: 40px;
}

.card {
	background: white;
	padding: 25px;
	border-radius: 6px;
	margin-bottom: 20px;
}

.form-group {
	margin-bottom: 25px;
}

label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
}

input[type="number"] {
	width: 100%;
	padding: 8px;
}


/* =========================
   Result Card
========================= */
.result-card {
	background: #efe1cf;
	padding: 30px;
	border-radius: 8px;
}

.big-number {
	font-size: 38px;
	font-weight: bold;
	margin: 10px 0;
}

.result-card hr {
	margin: 20px 0;
	border: none;
	border-top: 1px dashed #b1843f;
}


/* =========================
   Dimension Slider Fields
========================= */
.dimension-field {
	margin-bottom: 30px;
}

.dimension-field label {
	font-weight: 600;
	margin-bottom: 10px;
}

.input-wrapper {
	display: flex;
	align-items: center;
	background: #f3f4f6;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #e5e7eb;
}

.dimension-input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 18px 20px;
	font-size: 22px;
	font-weight: 500;
	outline: none;
}

.unit-select {
	border-left: 1px solid #e5e7eb;
}

.unit-select select {
	border: none;
	background: transparent;
	padding: 18px 20px;
	font-size: 18px;
	outline: none;
	cursor: pointer;
}

/* Range Track */
.dimension-range {
	width: 100%;
	margin-top: 18px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: 10px;
	border-radius: 10px;
	background: #e5e7eb;
	outline: none;
	transition: background 0.2s ease;
}

/* Range Thumb */
.dimension-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	border: 4px solid #c79a55;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.dimension-range::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	border: 4px solid #c79a55;
	cursor: pointer;
}


/* =========================
   Toggle Switch
========================= */

.toggle-switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
}

.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: 0.4s;
	border-radius: 24px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: 0.4s;
	border-radius: 50%;
}


.toggle-switch input:checked+.slider {
	background-color: #BC965E;
}

.toggle-switch input:checked+.slider:before {
	transform: translateX(19px);
}


/*Window And Doors*/

.question-block:last-child {
	margin-bottom: 0;
}

.question-label {
	display: block;
	font-weight: 500;
	font-size: 14px;
	color: #333333;
	margin-bottom: 10px;
}

.required-star {
	color: #e53e3e;
	margin-left: 2px;
}

.input-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.stepper-input-wrapper {
	display: flex;
	align-items: center;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	overflow: hidden;
	background-color: #fff;
}

.stepper-btn {
	background-color: transparent;
	border: none;
	width: 44px;
	height: 44px;
	font-size: 20px;
	color: #6b7280;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s;
}

.stepper-btn:hover {
	background-color: #f3f4f6;
}

.stepper-btn:active {
	background-color: #e5e7eb;
}

.stepper-field {
	border: none;
	border-left: 1px solid #e5e7eb;
	border-right: 1px solid #e5e7eb;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: #1f2937;
	width: 100%;
	height: 44px;
	padding: 0;
	margin: 0;
	/*-moz-appearance: textfield;*/
}

.stepper-field::-webkit-outer-spin-button,
.stepper-field::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.stepper-field:focus {
	outline: none;
	background-color: #f9fafb;
}

/* Checkmark Icon Styling */
.checkmark-icon {
	color: #22c55e;
	/* Green color */
	width: 24px;
	height: 24px;
}

.custom-row {
	display: flex;
}

.pt-4 {
	padding-top: 24px;
}

/*End Here*/

.right-result h3 {
	color: #23242A;
	font-size: 26px;
	font-weight: bold;
	line-height: 36px;
}

.align-items-center{
  align-items: center;
}

.between-border {
    padding-left: 16px;
    margin-left: 16px;
    border-left: 2px solid #D9D9D9;
}
.g-4{
  gap: 24px;
}

.flex-wrap {
    flex-wrap: wrap;
}

.ps-3{
	padding-left: 16px;
}

.top-border {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 2px dashed #CDA569;
}

.calculator-info{
    margin-top: 24px;
    font-size: 16px;
    line-height: 26px;
    color: #6B7280;
    font-weight: 400;
}

.left-border {
    padding-left: 24px;
    margin-left: 24px;
    border-left: 2px solid #D9D9D9;
}

.pt-3{
	padding-top: 16px;
}
.pb-3{
	padding-bottom: 16px;
}

.other-result table{
  border: 1px solid #D8D8D8; 
}

.other-result table {
  border-collapse: collapse; 
  border-radius: 8px;
}

.other-result table tr * {
    padding: 8px;
}

.other-result table tr:nth-child(odd) {
    background: #F9FAFB;
}

.other-result table tr td {
    text-align: right;
}

.other-result table tr td:after {
    content: "lbs";
    margin-left: 8px;
    font-size: 16px;
    color: #4A5565 !important;
    font-weight: 400;
}

.other-result table tr td.dtape:after {
    content: "rolls";
    margin-left: 8px;
    font-size: 16px;
    color: #4A5565 !important;
    font-weight: 400;
}


div#SQFTresult tr th:first-child,
div#SQFTresult tr td:first-child,
div#SQFTresultdrywall tr td:first-child,
div#SQFTresultdrywall td:first-child  {
    text-align: left;
}

div#SQFTresult tr th:not(:first-child),
div#SQFTresult tr td:not(:first-child),
div#SQFTresultdrywall tr th:not(:first-child),
div#SQFTresultdrywall tr td:not(:first-child) {
    text-align: right;
}

div#SQFTresult tr th,
div#SQFTresultdrywall tr th{
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    color: #23242A;
}

div#SQFTresult tr td,
div#SQFTresultdrywall tr td{
    padding: 7px;
}

input#sqft,
input#sqftdrywall{
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    outline: none !important;
    box-shadow: 0px 1px 0.5px 0.05px #1D293D05;
    color: #6B7280;
    font-size: 14px;
    padding: 14px 12px;
}
.p-3{
	padding: 16px;
}
/* =========================
   Responsive
========================= */
/* --- Title --- */
        .main-title {
            font-size: 20px;
            font-weight: 700;
            color: #1a1a1a;
            margin: 0 0 25px 0;
            text-align: left;
        }

        /* --- Selection Grid --- */
        .space-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        /* --- Selection Cards --- */
        .space-card {
            position: relative; /* Important for absolute positioning of the checkbox */
            border: 2px solid transparent;
            border-radius: 12px;
            padding: 4px; /* Small padding so the border doesn't touch the image */
            cursor: pointer;
            transition: all 0.2s ease;
            background: #fff;
        }

        /* --- Card Image Area --- */
        .card-image {
            position: relative; 
            width: 100%;
            border-radius: 8px;
            background-size: cover;
            background-position: center;
            text-align: center;
            overflow: visible;
        }

        .card-image svg {
            width: 40px;
            height: 40px;
            color: #9ca3af;
        }

        .checkbox-overlay {
            position: absolute;
            bottom: 12px;
            left: 50%;
            width: 100%;
            max-width: 22px;
            height: 22px;
            background-color: #ffffff;
            border: 2px solid #d1d5db;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            z-index: 10;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        /* The Check Icon (Hidden by default) */
        .check-icon {
            display: none;
            color: white;
            width: 14px;
            height: 14px;
        }

        /* Show Check Icon when selected */
        .space-card.selected .check-icon {
            display: block;
        }

        /* --- Card Label --- */
        .card-label {
            font-size: 13px;
            font-weight: 600;
            color: #374151;
            text-align: center;
            margin: 8px 0 4px 0;
        }

        /* --- Dropdown Section --- */
        .form-group label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 8px;
        }

        .form-group label span { color: #e53e3e; }

        .select-wrapper {
            position: relative;
            width: 100%;
        }

        .custom-select {
            width: 100%;
            padding: 12px 16px;
            font-size: 15px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            background-color: #fff;
            -webkit-appearance: none;
               -moz-appearance: none;
                    appearance: none;
            cursor: pointer;
            color: #1f2937;
            font-family: inherit;
        }

        .custom-select:focus {
            outline: none;
            border-color: #2563eb;
        }

        .select-arrow {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: #6b7280;
        }



.calculator-cta{
    padding: 32px;
    background: #000;
    text-align: center;
    color: #fff;
}

.calculator-cta h3{
    color: #fff;
    margin-bottom: 16px;
    font-size: 34px;
    font-weight: bold;
}

.calculator-cta p:nth-child(2){
    margin-bottom: 24px;
}

.calculator-cta p:last-child a{
    color: #fff;
    font-size: 16px;
    display: inline-block;
    padding: 16px 24px;
    background-color: #CDA569;
}

.calculator-cta p:last-child {
    margin-bottom: 0px;
}

.mt-4 {
    margin-top: 24px;
}

/* =========================
   Responsive
========================= */
@media (max-width: 981px) {
	.accordion-section {
		padding: 24px 0px;
	}

	.tab-btn {
		font-size: 16px;
	}

	.right-result {
		padding: 16px;
	}

	.mainresult {
		color: #23242A;
		font-size: 72px;
		line-height: 80px;
		font-weight: bold;
	}

	.accordion-item{
		padding: 16px;
	}

	.card{
		padding: 0px;
	}
	.col-half{
		width: 100%;
	}
	.flex-lg-wrap{
		flex-wrap: wrap;
	}
	.calculator-grid{
		display: block;
	}
	
	.ps-3{
		padding-left: 0px;
	}
	
	.p-lg-3{
		padding: 16px;
	}

	.calculator-cta{
		padding: 24px;
	}

	.calculator-cta h3{
		font-size: 28px;
	}

	.calculator-cta p:nth-child(2){
		margin-bottom: 16px;
	}

	.calculator-cta p:last-child a{
		padding: 16px 24px;
	}

	.mt-4 {
		margin-top: 16px;
	}
}

@media(min-width: 981px) {
	.col-half {
		width: 50%;
	}

	.right-result {
		padding: 32px;
	}

	.mainresult {
		color: #23242A;
		font-size: 72px;
		line-height: 80px;
		font-weight: bold;
	}


}