/* CSS Document */

/*
|--------------------------------------------------------------------------
| CONSTRUCTION CALCULATORS CSS
|--------------------------------------------------------------------------
|
| Phase 1:
| - Paint Estimator
|
|--------------------------------------------------------------------------
*/


/* ==========================================
   MODAL CONTAINER
========================================== */

.calculator-modal {

    border-radius: 12px;

    overflow: hidden;

    border: none;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.20);

}



/* ==========================================
   HEADER
========================================== */


.calculator-header {

    background-color: #218b97;  /* #218b97  #087e8b */

    color: white;

    padding: .75rem 1rem;

}


.calculator-header .modal-title {

    font-size: 1.35rem;

    font-weight: 700;

}



/* ==========================================
   SECTION TITLES
========================================== */


.calculator-section-title {

    font-size: .9rem;

    font-weight: 700;

    color: #1f4e79;

    border-bottom:

    2px solid #e6e6e6;

    padding-bottom: .45rem;

    margin-bottom: .5rem;

}



/* ==========================================
   FORM ELEMENTS
========================================== */

.calculator-modal label.form-label {

    font-weight: 600;

    color: #444;

    font-size: .85rem;

    margin-bottom: .25rem;

}



.calculator-modal input.form-control,
.calculator-modal select.form-select {

    height: 32px !important;

    min-height: 32px !important;

    padding: 2px 8px !important;

    font-size: .85rem !important;

    line-height: 1.2 !important;

    border-radius: 5px !important;

}


.calculator-modal input.form-control:focus,
.calculator-modal select.form-select:focus {

    border-color:#2d7bbf;

    box-shadow:
    0 0 0 .15rem rgba(45,123,191,.15);

}


/* ==========================================
   BUTTONS
========================================== */

.calculator-modal button.btn {

    height: 34px !important;

    min-height: 34px !important;

    padding: 3px 12px !important;

    font-size: .85rem !important;

    line-height: 1 !important;

    border-radius: 6px;

}



.calculator-modal .btn-primary {

    background-color:#1f4e79;

    border-color:#B1A528;

}


.calculator-modal .btn-primary:hover {

    background-color:#163b5c;

}


/* ==========================================
   RESULTS CARD
========================================== */


.calculator-results {

    background:

    #f7f9fb;


    border-left:

    5px solid #1f4e79;


    border-radius: 12px;


    padding: 1.25rem;


    min-height: 80px;


}



.calculator-results h5 {

    color: #1f4e79;

    font-weight: 700;

}



/* ==========================================
   RESULT ROWS
========================================== */


.calculator-result-line {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:.45rem 0;

    color:#444;

}



.calculator-result-line strong {

    color:#1f4e79;

}



.calculator-result-line.total {

    font-size:1.15rem;

    padding-top:.75rem;

}



/* ==========================================
   CHECKBOX
========================================== */


.calculator-modal .form-check-input {

    width: 1.2rem;

    height: 1.2rem;

}



.calculator-modal .form-check-label {

    margin-left:.35rem;

    font-weight:600;

}



/* ==========================================
   MOBILE
========================================== */


@media(max-width:576px){


    .calculator-modal {

        margin: .5rem;

    }


    .calculator-header {

        padding:1rem;

    }


    .calculator-result-line {

        flex-direction:column;

        align-items:flex-start;

        gap:.2rem;

    }


}

/* ==========================================
   MOBILE MODAL SCROLLING
========================================== */


@media (max-width:576px) {


    #paintCalculatorModal .modal-dialog {

        margin: .5rem;

        max-height: calc(100vh - 1rem);

    }


    #paintCalculatorModal .modal-content {

        max-height: calc(100vh - 1rem);

    }


    #paintCalculatorModal .modal-body {

        overflow-y: auto;

    }
	
	#paintCalculatorModal .modal-header {

    position: sticky;

    top: 0;

    z-index: 10;

}

	
	
	

}


/* ==========================================
   DESKTOP COMPACT CALCULATOR MODAL
========================================== */

@media (min-width: 577px) {


    #paintCalculatorModal .modal-dialog {

        max-width: 600px;

    }


    #paintCalculatorModal .modal-body {

        padding: .75rem 1rem;

    }


    #paintCalculatorModal .row {

        --bs-gutter-y: .5rem;

    }


    #paintCalculatorModal .calculator-section-title {

        margin-bottom: .25rem;

        padding-bottom: .25rem;

    }


    #paintCalculatorModal .form-label {

        margin-bottom: .25rem;

        font-size: .85rem;

    }


    #paintCalculatorModal .form-control,
    #paintCalculatorModal .form-select {

        min-height: 32px;

        height: 32px;

        padding: .15rem .5rem;

        font-size: .85rem;

    }


    #paintCalculatorModal .btn {

        min-height: 34px;

        padding: .25rem .75rem;

        font-size: .85rem;

    }


    #paintCalculatorModal .calculator-results {

        padding: .75rem;

        margin-top: .75rem !important;

    }


}

/* ==========================================
   DESKTOP MODAL HEIGHT CONTROL
========================================== */

@media (min-width: 577px) {

    #paintCalculatorModal .modal-dialog {

        max-height: 80vh;

    }


    #paintCalculatorModal .modal-content {

        max-height: 80vh;

    }


    #paintCalculatorModal .modal-body {

        overflow-y: auto;

    }

}


.room-header{

    background:#f7f9fb;

    border-radius:8px;

}


.room-header:hover{

    background:#eef4f8;

}


.room-card{

    overflow:hidden;

}


/* ==========================================
   SQUARE FOOTAGE MODAL SIZE
========================================== */


#squareFootageModal .modal-dialog {

    max-height:85vh;

}


#squareFootageModal .modal-content {

    max-height:85vh;

}


#squareFootageModal .modal-body {

    overflow-y:auto;

}

/* ==========================================
   SQUARE FOOTAGE MODAL WIDTH
========================================== */

#squareFootageModal .calculator-dialog {

    max-width: 630px;

}


/* ==========================================
   CUBIC FEET MODAL SIZE
========================================== */


#cubicFeetModal .modal-dialog {

    max-height:85vh;

}



#cubicFeetModal .modal-content {

    max-height:85vh;

}



#cubicFeetModal .modal-body {

    overflow-y:auto;

}



/* ==========================================
   CUBIC FEET MODAL WIDTH
========================================== */


#cubicFeetModal .calculator-dialog {

    max-width:630px;

}