/*=====================================================
  GET QUOTE PAGE
  PROJECT QUOTE REQUEST FORM
======================================================*/

.quote-request-section{

    background:#f5f7fa;

    padding:70px 0;

}

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

.quote-card{

    max-width:920px;

    margin:auto;

    background:#ffffff;

    border-radius:18px;

    border:1px solid #e6e9ee;

    box-shadow:0 15px 45px rgba(0,0,0,.06);

    padding:45px;

}

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

.quote-header{

    text-align:center;

    margin-bottom:40px;

}

.quote-header h1{

    font-size:34px;

    font-weight:700;

    color:#1d2939;

    margin-bottom:12px;

}

.quote-header p{

    max-width:680px;

    margin:auto;

    color:#667085;

    line-height:1.8;

    font-size:15px;

}

/*=====================================================
FORM SECTION
======================================================*/

.form-section{

    margin-bottom:40px;

}

.form-section:last-child{

    margin-bottom:0;

}

.form-section h3{

    font-size:20px;

    font-weight:700;

    color:#198754;

    margin-bottom:20px;

    padding-bottom:10px;

    border-bottom:1px solid #ececec;

}

/*=====================================================
GRID
======================================================*/

.form-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

/*=====================================================
FORM GROUP
======================================================*/

.form-group{

    display:flex;

    flex-direction:column;

}

.full-width{

    margin-top:22px;

}

/*=====================================================
LABEL
======================================================*/

.form-group label{

    font-size:14px;

    font-weight:600;

    color:#344054;

    margin-bottom:8px;

}

.form-group span{

    color:#dc3545;

}

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

.form-group input,

.form-group select,

.form-group textarea{

    width:100%;

    border:1px solid #d0d5dd;

    border-radius:10px;

    background:#ffffff;

    font-size:14px;

    color:#1d2939;

    padding:12px 15px;

    outline:none;

    transition:.30s;

    font-family:inherit;

}

/*=====================================================
INPUT HEIGHT
======================================================*/

.form-group input{

    height:46px;

}

.form-group select{

    height:46px;

    cursor:pointer;

}

.form-group textarea{

    resize:vertical;

    min-height:160px;

}

/*=====================================================
PLACEHOLDER
======================================================*/

.form-group input::placeholder,

.form-group textarea::placeholder{

    color:#98a2b3;

}

/*=====================================================
FOCUS
======================================================*/

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

    border-color:#198754;

    box-shadow:0 0 0 4px rgba(25,135,84,.10);

}


/*=====================================================
  COMMON UPLOAD SYSTEM
  Plant Layout / Supporting Documents / Project Images / Project Video
======================================================*/

/* Common outer upload card.
   Both current classes remain supported during HTML migration. */
.upload-card,
.gb-upload-card{

    position:relative;
    box-sizing:border-box;

    background:#ffffff;

    border:2px dashed #dbe5dd;

    border-radius:18px;

    padding:30px 22px;

    text-align:center;

    cursor:pointer;

    transition:all .30s ease;

    overflow:hidden;

}

.upload-card:hover,
.gb-upload-card:hover{

    background:#f3fff7;

    border-color:#198754;

    box-shadow:0 10px 25px rgba(25,135,84,.10);

    transform:translateY(-3px);

}

.upload-card input,
.gb-upload-card input{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    opacity:0;

    cursor:pointer;

    z-index:1;

}

/* Upload prompt area */
.upload-icon,
.gb-upload-card .upload-icon{

    width:50px;
    height:50px;

    margin:0 auto 16px;

    display:flex;

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

    background:#eef9f1;

    border-radius:16px;

    font-size:36px;

    transition:transform .30s ease;

}

.upload-card:hover .upload-icon,
.gb-upload-card:hover .upload-icon{

    transform:scale(1.08);

}

.upload-card h4,
.gb-upload-card h4{

    font-size:19px;

    font-weight:700;

    margin:0 0 6px;

    color:#1d2939;

}

.upload-card p,
.gb-upload-card p{

    margin:0 0 6px;

    font-size:14px;

    color:#667085;

    line-height:22px;

}

.upload-card small,
.gb-upload-card small{

    display:inline-block;

    margin-top:10px;

    padding:6px 12px;

    border-radius:30px;

    background:#eef9f1;

    color:#198754;

    font-weight:600;

    font-size:12px;

}

/* Upload action/prompt */
.gb-upload-action{

    margin-top:18px;

    display:flex;

    flex-direction:column;

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

    gap:10px;

}

.gb-upload-cloud{

    width:56px;
    height:56px;

    display:flex;

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

    border-radius:50%;

    background:#eef9f1;

    font-size:26px;

    transition:all .30s ease;

}

.gb-upload-cloud img{

    width:50px;
    height:50px;

    object-fit:contain;

    transition:transform .30s ease;

}

.upload-card:hover .gb-upload-cloud,
.gb-upload-card:hover .gb-upload-cloud{

    background:#198754;

    color:#ffffff;

    transform:scale(1.08);

}

.gb-upload-title{

    font-size:14px;
    font-weight:600;
    color:#475467;

}

.gb-upload-or{

    font-size:12px;
    font-weight:700;
    color:#98a2b3;
    letter-spacing:1px;

}

.gb-upload-btn{

    display:inline-flex;

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

    min-width:140px;
    height:42px;

    padding:0 18px;

    border-radius:10px;

    background:#198754;
    color:#ffffff;

    font-size:14px;
    font-weight:600;

    box-shadow:0 8px 20px rgba(25,135,84,.18);

    transition:all .30s ease;

}

.gb-upload-card:hover .gb-upload-btn,
.upload-card:hover .gb-upload-btn{

    background:#157347;

    transform:translateY(-2px);

}

/*=====================================================
  COMMON FILE STATUS
======================================================*/

.quote-file-info{

    margin-top:15px;

    min-height:22px;

    font-size:13px;

    color:#344054;

    font-weight:500;

    word-break:break-word;

    line-height:1.5;

}

.quote-file-info:empty{

    display:none;

}

.quote-progress-row{

    display:flex;

    align-items:center;

    gap:10px;

}

.quote-upload-progress{

    width:100%;

    height:7px;

    margin-top:12px;

    background:#e9ecef;

    border-radius:50px;

    overflow:hidden;

    display:none;

}

.quote-upload-progress-fill{

    width:0%;

    height:100%;

    background:linear-gradient(90deg,#198754,#20c997);

    border-radius:50px;

    transition:width .25s ease;

}

.quote-upload-progress-text{

    margin-top:7px;

    font-size:12px;

    color:#198754;

    font-weight:600;

    text-align:center;

    display:none;

}

.quote-upload-message{

    margin-top:10px;

    min-height:18px;

    font-size:13px;

    line-height:1.5;

}

.quote-upload-success{

    color:#198754;

    font-weight:600;

}

.quote-upload-error{

    color:#dc3545;

    font-weight:600;

}

.quote-upload-warning{

    color:#f59e0b;

    font-weight:600;

}

/*=====================================================
  ONE COMMON FILE CARD
======================================================*/

.quote-file-card{

    display:grid;

    grid-template-columns:42px minmax(0,1fr) auto 34px;

    align-items:center;

    gap:10px;

    width:100%;

    box-sizing:border-box;

    padding:10px 12px;

    margin:10px 0 0;

    background:#ffffff;

    border:1px solid #dfe7e3;

    border-radius:12px;

    box-shadow:0 4px 10px rgba(0,0,0,.05);

    text-align:left;

}

.quote-file-card:first-child{

    margin-top:0;

}

.quote-file-icon{

    width:40px;
    height:40px;

    display:flex;

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

    flex-shrink:0;

    border-radius:10px;

    background:#eef9f1;

    font-size:22px;

    overflow:hidden;

}

.quote-file-icon img{

    width:26px;
    height:26px;

    max-width:100%;
    max-height:100%;

    object-fit:contain;

    display:block;

}

.quote-file-name{

    min-width:0;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    font-size:14px;

    font-weight:600;

    color:#1f2937;

}

.quote-file-size{

    white-space:nowrap;

    font-size:12px;

    font-weight:600;

    color:#6b7280;

    padding:0 6px;

}

.quote-file-remove{

    width:30px;
    height:30px;

    margin:0;

    padding:0;

    border:none;

    border-radius:8px;

    background:#fff5f5;

    color:#dc3545;

    cursor:pointer;

    display:flex;

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

    flex-shrink:0;

    font-size:16px;

    line-height:1;

    transition:all .25s ease;

    position:relative;

    z-index:20;

    pointer-events:auto;

}

.quote-file-remove:hover{

    background:#dc3545;

    color:#ffffff;

}

/* Add More buttons use one visual system */
#project_images_add_more,
#support_documents_add_more{

    position:relative;

    z-index:5;

    pointer-events:auto;

    margin-top:10px;

}

.gb-docs-add-more-btn,
.gb-images-add-more-btn{

    display:inline-flex;

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

    min-height:38px;

    padding:8px 14px;

    border:1px solid #198754;

    border-radius:9px;

    background:#ffffff;

    color:#198754;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:all .25s ease;

}

.gb-docs-add-more-btn:hover,
.gb-images-add-more-btn:hover{

    background:#198754;

    color:#ffffff;

}

/* Prevent the transparent file input from intercepting file-card controls */
.quote-file-info,
.quote-upload-progress,
.quote-upload-progress-text,
.quote-upload-message,
#project_images_add_more,
#support_documents_add_more{

    position:relative;

    z-index:5;

    pointer-events:auto;

}

/* Video uses the same common upload card */
.video-card{

    border-color:#dbe5dd;

}

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

@media (max-width:768px){

    .upload-card,
    .gb-upload-card{

        border-radius:16px;

        padding:24px 18px;

    }

    .upload-icon,
    .gb-upload-card .upload-icon{

        width:50px;
        height:50px;

        font-size:30px;

    }

    .upload-card h4,
    .gb-upload-card h4{

        font-size:17px;

    }

    .quote-file-card{

        grid-template-columns:38px minmax(0,1fr) auto 32px;

        gap:8px;

        padding:9px 10px;

    }

    .quote-file-icon{

        width:36px;
        height:36px;

    }

    .quote-file-icon img{

        width:24px;
        height:24px;

    }

    .quote-file-remove{

        width:28px;
        height:28px;

    }

}

@media (max-width:480px){

    .quote-file-card{

        grid-template-columns:36px minmax(0,1fr) auto 30px;

        gap:7px;

    }

    .quote-file-name{

        font-size:13px;

    }

    .quote-file-size{

        font-size:11px;

        padding:0 3px;

    }

}

/*=====================================================
DECLARATION
======================================================*/


.declaration-box{

    background:#f8fafc;

    border:1px solid #e4e7ec;

    border-radius:12px;

    padding:20px;

}

.checkbox-label{

    display:flex;

    align-items:flex-start;

    gap:12px;

    cursor:pointer;

}

.checkbox-label input{

    width:18px;

    height:18px;

    margin-top:3px;

    accent-color:#198754;

    flex-shrink:0;

}

.checkbox-label span{

    font-size:14px;

    color:#475467;

    line-height:1.8;

}

/*=====================================================
SUBMIT BUTTON
======================================================*/

.submit-area{

    margin-top:35px;

    text-align:center;

}

.quote-submit-btn{

    min-width:240px;

    height:52px;

    border:none;

    border-radius:10px;

    background:#198754;

    color:#ffffff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.30s;

    letter-spacing:.3px;

}

.quote-submit-btn:hover{

    background:#157347;

    transform:translateY(-2px);

    box-shadow:0 12px 24px rgba(25,135,84,.20);

}

.quote-submit-btn:active{

    transform:translateY(0);

}

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

@media (max-width:991px){

    .quote-card{
        padding:35px;
    }

    .form-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .upload-grid{
        grid-template-columns:1fr 1fr;
    }

}

@media (max-width:768px){

    .quote-request-section{
        padding:50px 0;
    }

    .quote-card{
        padding:28px;
        border-radius:16px;
    }

    .quote-header{
        margin-bottom:30px;
    }

    .quote-header h1{
        font-size:28px;
    }

    .quote-header p{
        font-size:14px;
        line-height:1.7;
    }

    .form-section{
        margin-bottom:30px;
    }

    .form-section h3{
        font-size:18px;
    }

    .upload-grid{
        grid-template-columns:1fr;
    }

    .quote-submit-btn{
        width:100%;
    }

}

@media (max-width:480px){

    .quote-card{
        padding:22px 18px;
    }

    .quote-header h1{
        font-size:24px;
    }

    .form-group input,
    .form-group select{
        height:44px;
        font-size:13px;
    }

    .form-group textarea{
        font-size:13px;
        min-height:140px;
    }

    .checkbox-label{
        gap:10px;
    }

    .checkbox-label span{
        font-size:13px;
    }

    .quote-submit-btn{
        height:48px;
        font-size:15px;
    }

}

@media (min-width:1400px){

    .quote-card{
        max-width:980px;
    }

}

/* =====================================================
   COMMON UPLOAD GRID
   Plant Layout + Supporting Documents
   + Project Images + Project Video
   ===================================================== */

.upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    width: 100%;
    box-sizing: border-box;
	 align-items: start;
}

@media (max-width: 768px) {
    .upload-grid {
        grid-template-columns: 1fr;
    }
}