/**
 * /obrobki/assets/style.css
 * Style formularza obróbek blacharskich
 */

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

body{

    background:#f5f6f8;

    color:#222;

    font-size:14px;

    line-height:1.4;

}

/* ===================================================== */
/* NAGŁÓWKI */
/* ===================================================== */

h1,h2,h3,h4,h5,h6{

    font-weight:600;

}

/* ===================================================== */
/* KARTY */
/* ===================================================== */

.card{

    border:none;

    border-radius:8px;

    overflow:hidden;

    box-shadow:
        0 2px 10px rgba(0,0,0,.06);

}

.card-header{

    font-size:15px;

    padding:14px 20px;

}

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

.flashing-card{

    cursor:pointer;

    transition:
        all .2s ease-in-out;

    border:2px solid transparent;

    height:100%;

}

.flashing-card:hover{

    transform:translateY(-2px);

    box-shadow:
        0 6px 20px rgba(0,0,0,.15);

}

.flashing-card.active{

    border-color:#007bff;

    box-shadow:
        0 0 0 3px rgba(0,123,255,.2);

}

/* ===================================================== */
/* MINIATURY */
/* ===================================================== */

.flashing-thumb{

    width:100%;

    height:180px;

    object-fit:contain;

    background:#fff;

    padding:10px;

}

.order-thumb{

    width:90px;

    height:70px;

    object-fit:contain;

    background:#fff;

    padding:5px;

}

/* ===================================================== */
/* PRZYCISK PODGLĄDU */
/* ===================================================== */

.preview-btn{

    position:absolute;

    top:10px;

    right:10px;

    z-index:10;

    border-radius:50%;

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
        0 2px 8px rgba(0,0,0,.2);

}

.preview-btn:hover{

    transform:scale(1.05);

}

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

#imageModal .modal-content{

    border:none;

    border-radius:10px;

}

#imageModal .modal-body{

    background:#f8f9fa;

}

#modalImage{

    max-height:80vh;

    object-fit:contain;

}

/* ===================================================== */
/* FORMULARZ */
/* ===================================================== */

.form-control{

    border-radius:6px;

    min-height:42px;

}

.form-control:focus{

    box-shadow:
        0 0 0 3px rgba(0,123,255,.15);

}

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

label{

    font-weight:600;

    margin-bottom:6px;

}

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

.btn{

    border-radius:6px;

}

.btn-lg{

    min-width:260px;

}

/* ===================================================== */
/* TABELA */
/* ===================================================== */

.table{

    background:#fff;

}

.table td{

    vertical-align:middle;

}

.table thead th{

    white-space:nowrap;

}

/* ===================================================== */
/* PAGINATION */
/* ===================================================== */

.pagination{

    margin-top:20px;

}

.page-link{

    color:#007bff;

}

.page-item.active .page-link{

    background:#007bff;

    border-color:#007bff;

}

/* ===================================================== */
/* ALERT */
/* ===================================================== */

.alert{

    border:none;

    border-radius:8px;

}

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

#configCard{

    animation:fadeIn .25s ease-in-out;

}

/* ===================================================== */
/* ANIMATIONS */
/* ===================================================== */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:991px){

    .flashing-thumb{

        height:160px;

    }

}

@media(max-width:767px){

    body{

        font-size:13px;

    }

    h1{

        font-size:24px;

    }

    .card-header{

        font-size:14px;

    }

    .flashing-thumb{

        height:140px;

    }

    .order-thumb{

        width:70px;

        height:55px;

    }

    .preview-btn{

        width:32px;

        height:32px;

    }

}

@media(max-width:575px){

    .container-fluid{

        padding-left:10px;

        padding-right:10px;

    }

    .btn-lg{

        width:100%;

    }

    .table{

        font-size:12px;

    }

}