/* public.css - Customização do site público */

html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    background: #f8fafb;
    font-family: 'Segoe UI', Arial, sans-serif;
    padding-top: 95px;
    margin: 0;
}

header {
    border-bottom: 1px solid #eee;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    min-width: 0;
    max-width: 100vw;
    z-index: 1000;
    margin-bottom: 0;
    background: #ffc107;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.container, .row {
    box-sizing: border-box;
    min-width: 0;
    max-width: 90%;

}

.row-finalizar {
    box-sizing: border-box;
    width: 100%;         /* Usa todo o espaço do container */
    max-width: 90vw;     /* Limita a 90% da largura da tela */
    display: flex;
    gap: 20px;           /* Espaço entre as divs filhas */
    justify-content: space-between; /* Distribui o espaço entre as divs */
    align-items: stretch; /* Faz as divs ficarem com a mesma altura */
    flex-wrap: wrap;     /* Permite quebrar linha em telas pequenas */
    padding: 10px 0;
}
.row-finalizar > * {
    flex: 1 1 200px;    /* Cresce e diminui, largura mínima 200px */
    min-width: 150px;
    max-width: 100%;
}


h4, .card-title {
    color: #2d3748;
}

.btn-success, .btn-success:focus {
    background: #37b24d;
    border-color: #37b24d;
}
.btn-success:hover {
    background: #2f9e44;
    border-color: #2f9e44;
}

.btn-outline-primary {
    border-color: #1976d2;
    color: #1976d2;
}
.btn-outline-primary:hover {
    background: #1976d2;
    color: #fff;
}

/* Aviso Carrinho Fechado */
.carrinho-fechado-alert {
    background: #ffeaea;
    border-left: 8px solid #e03232;
    color: #b32020;
    border-radius: 10px;
    padding: 20px 16px;
    font-size: 1.2em;
    margin-bottom: 20px;
    box-shadow: 0 2px 16px #fad6d6;
}

/* Badge do carrinho */
.badge.bg-danger {
    font-size: 1em;
    min-width: 22px;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Card grid responsivo */
.row.g-3, .row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-right: 0;
    margin-left: 0;
}

.card {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
}

@media (min-width: 576px) {
    .col-md-6 {
        flex: 0 0 48%;
        max-width: 48%;
    }
}
@media (min-width: 992px) {
    .col-lg-4 {
        flex: 0 0 31.5%;
        max-width: 31.5%;
    }
}

@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .card-title { font-size: 1.1rem; }
    .row.g-3, .row { gap: 0.7rem; }
    header { height: 62px; padding-left: 4vw; padding-right: 4vw; }
    body { padding-top: 70px; }
    .card { margin-bottom: 0.8rem; }
}

@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
}

/* Produtos fora de estoque */
.produto-esgotado {
    opacity: 0.6;
    pointer-events: none;
}

#alerta-tempo {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    box-sizing: border-box;
    margin: 0 auto;
	
}

@media (max-width: 768px) {
    #alerta-tempo {
        font-size: 1em !important;
        padding: 12px 5px !important;
        width: 100%;
        max-width: 100%;
    }
}

/* Menu de categorias em scroll horizontal no mobile */
.nav-pills.flex-nowrap {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: thin;
}
.nav-pills .nav-link {
    white-space: nowrap;
}
@media (max-width: 768px) {
    .row.g-3, .row {
        justify-content: center !important;
    }
    .card {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .card .card-title,
    .card .btn,
    .card .fw-bold,
    .card .text-muted,
    .card .card-body {
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }
    .card-img-top {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 480px) {
    .card .btn {
        width: 90%;
    }
}

@media (max-width: 768px) {
    header {
        height: 110px !important;    /* ou o valor que preferir */
        min-height: 110px !important;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    body {
        padding-top: 125px !important;  /* aumenta também o padding-top do body */
    }
}