/*   contract.css (часть 1)
   Основные стили (не конфликтуют с сайтом)
   ====================================================== */

/* Только для счета */
.contract,
.contract *{
    box-sizing:border-box;
}

/* ------------------------------ */

.contract{
    width:210mm;
    max-width:100%;
    min-height:297mm;
    margin:100px auto 40px;
    background:#fff;
    border:1px solid #d8d8d8;
    border-radius:8px;
    box-shadow:0 5px 25px rgba(0,0,0,.08);
    padding:12mm;
    color:#222;
    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;
    visibility:visible;
}

/* ------------------------------ */

.contract .contract-header{
    margin-bottom:15px;
    page-break-after:avoid;
}

.contract .contract-header h1{
    margin:0 0 12px;
    text-align:center;
    font-size:24px;
    font-weight:700;
    color:#111;
    text-transform:uppercase;
    letter-spacing:.5px;
}

/* ------------------------------ */

.contract .contract-meta{
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-bottom:10px;
}

.contract .field{
    flex:1;
}

.contract .field label{
    display:block;
    margin-bottom:4px;
    font-weight:bold;
    font-size:12px;
}

.contract .field input{
    width:100%;
}

/* ------------------------------ */

.contract input{
    width:100%;
    height:28px;
    padding:4px 6px;
    border:1px solid #999;
    outline:none;
    background:#fff;
    font-size:13px;
    transition:.2s;
}

.contract input:focus{
    border-color:#1565c0;
}

/* ------------------------------ */

.contract table{
    width:100%;
    border-collapse:collapse;
}

/* ------------------------------ */

.contract .details{
    margin-bottom:12px;
}

.contract .details th{
    padding:7px;
    border:1px solid #555;
    background:#f2f2f2;
    text-align:left;
    font-size:13px;
}

.contract .details td{
    border:1px solid #777;
    padding:3px 6px;
    height:30px;
}

.contract .details td:first-child{
    width:140px;
    background:#fafafa;
    font-weight:bold;
}

/* ------------------------------ */

.contract .items{
    margin-top:10px;
}

.contract .items thead th{
    padding:7px;
    border:1px solid #555;
    background:#2f5ea7;
    color:#fff;
    text-align:center;
    font-size:13px;
}

.contract .items tbody td{
    border:1px solid #777;
    padding:2px;
    height:30px;
}

.contract .items input{
    border:none;
    height:24px;
    padding:3px 5px;
    background:transparent;
}

.contract .items input:focus{
    background:#eef6ff;
}

/* Выравнивание */

.contract .items td:nth-child(1){
    text-align:center;
}

.contract .items td:nth-child(4),

.contract .items td:nth-child(5),

.contract .items td:nth-child(6){

    text-align:right;

}

/* ------------------------------ */

.contract .remove-row{
    width:24px;
    height:24px;
    border:none;
    border-radius:4px;
    background:#d32f2f;
    color:#fff;
    cursor:pointer;
    transition:.2s;
}

.contract .remove-row:hover{
    background:#b71c1c;
}




/* ======================================================
   contract.css (часть 2)
   Кнопки, итоги, подпись, печать A4
   ====================================================== */

/* ------------------------------ */
/* Кнопки */

.contract .contract-actions{

    margin:12px 0;

}

.contract .contract-actions button,

.contract .buttons button{

    display:inline-block;
    padding:8px 16px;
    border:none;
    border-radius:4px;
    background:#1565c0;
    color:#fff;
    font-size:13px;
    cursor:pointer;
    transition:.2s;
}

.contract .contract-actions button:hover,

.contract .buttons button:hover{
    background:#0d47a1;
}

.contract .buttons{
    margin-top:20px;
    text-align:center;
}

.contract .buttons button{
    margin:0 6px;
}

/* ------------------------------ */
/* Итоги */

.contract .totals{
    display:flex;
    justify-content:flex-end;
    margin-top:15px;
}

.contract .totals td:first-child{
    width:90px;
    white-space:nowrap;
}

.contract .totals td{
    border:1px solid #777;
    padding:6px;
    height:30px;
}

.contract .totals td:first-child{
    width:140px;
    background:#fafafa;
    font-weight:bold;
}

.contract .totals input{
    border:none;
    text-align:right;
    background:transparent;
    font-weight:bold;
}

.contract .grand td{
    background:#eef6ff;
    font-size:14px;
    font-weight:700;
}

/* ------------------------------ */
/* Подпись */

.contract .signature{
    margin-top:35px;
    page-break-inside:avoid;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:30px;
    font-size:13px;
}

.contract .signature div{
    min-width:250px;
}

/* ------------------------------ */
/* Компактный режим */

.contract .details td,
.contract .items td{
    height:28px;
}

.contract .items input,

.contract .details input{
    height:22px;
    font-size:12px;
}

.contract .items th{
    padding:6px;
}

.contract .details th{
    padding:6px;
}

/* ------------------------------ */
/* Мобильные */

@media (max-width:900px){

    .contract{
        width:100%;
        min-height:auto;
        margin:30px auto;
        padding:20px;
    }

    .contract .contract-meta{
        flex-direction:column;
        gap:10px;
    }

    .contract .totals{
        justify-content:stretch;
    }

    .contract .totals table{
        width:100%;
    }

    .contract .signature{
        flex-direction:column;
        gap:20px;
    }

    .contract .items{
        display:block;
        overflow-x:auto;
    }
}

/* ------------------------------ */
/* Печать */

@page{
    size:A4;
    margin:10mm;
}

@media print{

    html,
    body{
        background:#fff;
        margin:0;
        padding:0;
    }

    body *{
        visibility:hidden;
    }

    .contract,
    .contract *{
        visibility:visible;
    }

    .contract{
        position:relative;
        width:100%;
        max-width:100%;
        margin:0;
        padding:12mm;
        min-height:277mm;
        border:none;
        border-radius:0;
        box-shadow:none;
        display:flex;
        flex-direction:column;
        background:#fff;
    }

    .contract .contract-header{
        page-break-after:avoid;
    }

    .contract table{
        page-break-inside:auto;
    }

    .contract tr{
        page-break-inside:avoid;
    }

    .contract thead{
        display:table-header-group;
    }

    .contract tfoot{
        display:table-footer-group;
    }

    .contract .signature{
        margin-top:auto;
        page-break-inside:avoid;
    }

    .contract .buttons,
    .contract .contract-actions,
    .contract .remove-row{
        display:none !important;
    }

    .contract input{
        border:none;
        background:transparent;
        padding:0;
        height:auto;
        color:#000;
    }

    
/* Таблица услуг */
#itemsTable{
    width:100%;
    table-layout:fixed;      /* не дает колонкам сжиматься */
    border-collapse:collapse;
}

#itemsTable th,
#itemsTable td{
    border:1px solid #000;
    padding:3px;
    vertical-align:middle;
}

#itemsTable input{
    width:100%;
    box-sizing:border-box;
    border:none;
    background:transparent;
    padding:0;
    margin:0;
}

/* Фиксированные ширины колонок */
#itemsTable th:nth-child(1),
#itemsTable td:nth-child(1){ width:40px; }

#itemsTable th:nth-child(2),
#itemsTable td:nth-child(2){ width:auto; }

#itemsTable th:nth-child(3),
#itemsTable td:nth-child(3){ width:55px; }

#itemsTable th:nth-child(4),
#itemsTable td:nth-child(4){ width:70px; }

#itemsTable th:nth-child(5),
#itemsTable td:nth-child(5){ width:90px; }

#itemsTable th:nth-child(6),
#itemsTable td:nth-child(6){ width:100px; }

#itemsTable th:nth-child(7),
#itemsTable td:nth-child(7){ width:30px; }


    
}


/* ===== Розділи договору ===== */

/*.contract .contract-section{
    margin:24px 0;
    padding-top:10px;
    border-top:1px solid #d9d9d9;
}*/

.contract .contract-section:first-of-type{
    border-top:none;
    padding-top:0;
}

.contract .contract-section h3{
    margin:0 0 12px;
    font-size:18px;
    font-weight:700;
    color:#111;
}

.contract .contract-section p{
    margin:0 0 10px;
    line-height:1.2;
    text-align:justify;
}

.contract .contract-section strong{
    font-weight:700;
}

.total-text{
    margin-top:8px;
    font-size:14px;
    line-height:1.5;
}

.total-text strong{
    display:inline-block;
    min-width:180px;
}