/* =========================================================
   QUOTATION TOOL - COMMON CSS
   Shared styles for all quotation tools
========================================================= */


/* =========================================================
   POPUP OVERLAY
========================================================= */

.service-general-popup-overlay {

    position: fixed;

    inset: 0;

    display: none;

    justify-content: center;
    align-items: center;

    background: rgba(0,0,0,.70);

    z-index: 999999;

    padding:20px;

    box-sizing:border-box;

}


.service-general-popup-overlay.is-open {

    display:flex;

}




/* =========================================================
   POPUP CONTAINER
========================================================= */


.service-general-popup-container {

    position:relative;

    width:min(1000px,95vw);

    height:96vh;

    max-height:96vh;


    display:flex;

    flex-direction:column;


    overflow:hidden;


    background:#f1efef;


    border-radius:14px;


    box-shadow:
        0 20px 60px rgba(0,0,0,.30);


    box-sizing:border-box;

}




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


.service-general-popup-header {


    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;


    padding:20px 24px;


    border-bottom:
        1px solid #e5e5e5;


}



.service-general-popup-header-text {

    flex:1;

}




.service-general-popup-title {


    margin:0;


    font-size:1.8rem;


    color:#04034e;


}



.service-general-popup-description {


    margin:8px 0 0 0;


    font-size:1rem;


    font-weight:400;


    color:#6c757d;


    line-height:1.5;


}





/* =========================================================
   CLOSE BUTTON
========================================================= */


.service-general-popup-close {


    display:flex;


    justify-content:center;

    align-items:center;


    flex-shrink:0;


    width:42px;

    height:42px;


    border:none;

    border-radius:50%;


    background:transparent;


    color:#ff0019;


    font-size:26px;


    cursor:pointer;


    transition:
        all .25s ease;


}



.service-general-popup-close:hover {


    transform:rotate(90deg);


}



.service-general-popup-close i {


    pointer-events:none;


}




/* =========================================================
   POPUP BODY
========================================================= */


.service-general-popup-body {


    flex:1 1 auto;


    min-height:0;


    overflow-y:auto;

    overflow-x:hidden;


    padding:24px;


    box-sizing:border-box;


}





/* =========================================================
   FORM TITLE
========================================================= */


.service-general-form-popup-title {


    width:100%;


    margin:
        0 0 20px 0;


    font-size:1.35rem;


    font-weight:600;


    color:#04034e;


}

/* =========================================================
   COMMON CLIENT / CONTACT SECTIONS
========================================================= */


.service-general-client {

    width:100%;

    margin-bottom:30px;

}



.service-general-client-fields {

    display:grid;


    grid-template-columns:
        repeat(3, minmax(0,1fr));


    gap:20px;


    width:100%;


}





/* =========================================================
   COMMON FIELD
========================================================= */


.service-general-field {


    display:flex;


    flex-direction:column;


    width:100%;


    min-width:0;


}



.service-general-field label {


    display:block;


    margin-bottom:8px;


    font-weight:600;


}





/* =========================================================
   COMMON INPUT
========================================================= */


.service-general-input {


    width:100%;


    box-sizing:border-box;


    padding:12px 14px;


    border:

        1px solid #ccc;


    border-radius:6px;


    background:#ffffff !important;


    font-family:inherit;


    font-size:15px;


    line-height:1.4;


    outline:none;


    transition:


        border-color .2s ease,


        box-shadow .2s ease;


}




.service-general-input:hover,
.service-general-input:focus {

    background: #ffffff !important;

    border-color:#888;


    box-shadow:

        0 0 0 3px rgba(0,0,0,.08);


}




.service-general-input::placeholder {


    color:#999;


}





/* =========================================================
   INPUT VALIDATION ERROR
========================================================= */


.service-general-input-error {


    border-color:#ff0019;


    box-shadow:


        0 0 0 3px rgba(255,0,25,.25);


}





/* =========================================================
   TEXTAREA SUPPORT
========================================================= */


.service-general-textarea {


    width:100%;


    min-height:120px;


    resize:vertical;


    box-sizing:border-box;


    padding:12px 14px;


    border:1px solid #ccc;


    border-radius:6px;


    background:#fff;


    font-family:inherit;


    font-size:15px;


}




.service-general-textarea:focus {


    outline:none;


    border-color:#888;


    box-shadow:


        0 0 0 3px rgba(0,0,0,.08);


}

/* =========================================================
   POPUP FOOTER
========================================================= */


.service-general-popup-footer {


    display:flex;


    justify-content:flex-end;


    align-items:center;


    gap:12px;


    padding:20px 24px;


    border-top:

        1px solid #e5e7eb;


    background:#ffffff;


    box-sizing:border-box;


}





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


.service-general-button {


    display:inline-flex;


    justify-content:center;


    align-items:center;


    min-width:160px;


    height:46px;


    padding:0 22px;


    border-radius:10px;


    border:none;


    font-size:.95rem;


    font-weight:600;


    cursor:pointer;


    transition:all .25s ease;


    text-decoration:none;


    white-space:nowrap;


    box-sizing:border-box;


}



.service-general-button:focus {


    outline:none;


    box-shadow:


        0 0 0 4px rgba(13,110,253,.15);


}




.service-general-button-primary {


    background:#135f84;


    color:#ffffff;


    box-shadow:


        0 8px 18px rgba(13,110,253,.25);


}




.service-general-button-secondary {


    background:#135f84;


    color:#ffffff;


    box-shadow:


        0 8px 18px rgba(13,110,253,.25);


}




.service-general-button-primary:hover,
.service-general-button-secondary:hover {


    transform:translateY(-2px);


}





/* =========================================================
   RESPONSIVE
========================================================= */


@media(max-width:1200px){


    .service-general-popup-container {


        width:min(950px,94vw);


    }


}





@media(max-width:992px){


    .service-general-popup-overlay {


        padding:15px;


    }


    .service-general-popup-container {


        width:95vw;


        height:94vh;


        max-height:94vh;


    }



    .service-general-popup-header {


        padding:18px 20px;


    }



    .service-general-popup-title {


        font-size:1.6rem;


    }



    .service-general-popup-body {


        padding:20px;


    }



    .service-general-client-fields {


        grid-template-columns:


            repeat(2,minmax(0,1fr));


        gap:18px;


    }


}




@media(max-width:768px){


    .service-general-popup-overlay {


        padding:10px;


    }



    .service-general-popup-container {


        width:100%;


        height:96vh;


        max-height:96vh;


        border-radius:10px;


    }



    .service-general-popup-header {


        padding:15px 18px;


        gap:12px;


    }



    .service-general-popup-title {


        font-size:1.4rem;


    }



    .service-general-popup-description {


        font-size:.9rem;


    }



    .service-general-popup-close {


        width:38px;


        height:38px;


        font-size:23px;


    }



    .service-general-popup-body {


        padding:18px;


    }



    .service-general-client-fields {


        grid-template-columns:1fr;


        gap:16px;


    }



    .service-general-popup-footer {


        padding:15px 18px;


    }



    .service-general-button {


        min-width:140px;


    }


}




@media(max-width:576px){


    .service-general-popup-overlay {


        padding:0;


    }



    .service-general-popup-container {


        width:100%;


        height:100vh;


        max-height:100vh;


        border-radius:0;


    }



    .service-general-popup-header {


        padding:14px 15px;


    }



    .service-general-popup-title {


        font-size:1.25rem;


    }



    .service-general-popup-description {


        font-size:.85rem;


        line-height:1.4;


    }



    .service-general-popup-body {


        padding:15px;


    }



    .service-general-popup-footer {


        flex-direction:column-reverse;


        align-items:stretch;


        gap:10px;


        padding:14px 15px;


    }



    .service-general-button {


        width:100%;


        min-width:0;


    }


}