/* ========================================================================
   GENERAL.CSS - Utilitários e Componentes Gerais
   ======================================================================== */

/* NOTA: O @import da fonte Lato e estilos de body foram movidos para base.css */

/* --- Grid System (Utilitário de Layout) --- */
.grid {
    display: grid;
    grid-gap: 16px;
    width: 100%;
}

.grid.grid-1 {
    grid-template-columns: repeat(1, 1fr);
}

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

.grid.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid.grid-minmax {
    grid-template-columns: repeat(auto-fit, minmax(400px, 400px));
}

.grid.grid-photos-affiliate {
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
}

/* --- Container Components --- */
.content-master {
    width: 100%;
    padding: 24px;
}

.box-default {
    border: 1px solid #ccc;
    background-color: #fff;
}

.border {
    border: 1px solid #ccc;
}

.box-title {
    width: 100%;
    background-color: #f8f9fa;
    padding: 1.75rem 2.5rem;
    color: #6c757d;
    font-size: 16px;
    font-weight: bold;
    border: 0.0625rem solid rgba(17, 24, 39, 0.125);
}

.box-title i {
    margin-right: 8px;
}

/* --- Title Components --- */
.title-info-order,
.title-legend {
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
    padding-top: 10px;
    padding-left: 12px;
    padding-bottom: 12px;
    font-weight: bold;
}

.title-legend {
    padding-left: 0;
    font-size: 16px;
    padding-top: 24px;
}

.iten-order-title {
    width: 100%;
    background-color: #dd4b39;
    padding: 6px 10px;
    color: #fff;
    font-size: 14px;
    height: 30px;
    border: 1px solid #dd4b39;
}

/* --- Info Order Component --- */
.info-order {
    text-align: left;
    border: 1px solid #ccc;
    position: relative;
    background-color: #fff;
}

.box-content {
    padding: 0 10px 10px 10px;
}

/* --- Utility Classes (Spacing) --- */
.pad-10 {
    padding: 10px !important;
}

.pad-20 {
    padding: 20px !important;
}

.pad-40 {
    padding: 40px !important;
}

.mag-b-10 {
    margin-bottom: 10px;
}

.no-marg-top {
    margin-top: 0;
}

.no-grid-gap {
    grid-gap: initial;
}

/* --- Responsive Grid --- */
@media screen and (max-width: 1245px) {
    .grid.grid-1,
    .grid.grid-2,
    .grid.grid-3 {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (max-width: 474px) {
    .box-title {
        width: 100%;
        left: 0;
    }
}