* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --orange: #ff4b1f;
    --orange-dark: #e83e15;
    --text: #17191c;
    --muted: #737980;
    --border: #e7e9ec;
    --background: #f7f7f8;
}

body {
    font-family: "Inter", sans-serif;
    background: var(--background);
    color: var(--text);
    padding-bottom: 100px;
}


/* =========================
   TOPO
========================= */

.topbar {
    height: 72px;

    background: white;

    border-bottom: 1px solid var(--border);

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

    padding: 0 6%;

    position: relative;
}

.restaurant {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    align-items: center;
    justify-content: center;
}

.restaurant img {
    width: 230px;
    height: 65px;
    object-fit: contain;
}

.store-status {
    position: absolute;
    right: 6%;

    display: flex;
    align-items: center;
    gap: 7px;

    background: #eefaf2;
    color: #21864b;

    padding: 8px 13px;

    border-radius: 20px;

    font-size: 12px;
    font-weight: 600;
}

.store-status span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #27a65c;
}


/* =========================
   TEMPOS DE ENTREGA / RETIRADA
========================= */

.delivery-times-bar {

    width: calc(100% - 40px);

    max-width: 1500px;

    margin: 18px auto 0;

    display: flex;

    flex-wrap: wrap;

    gap: 16px;

}

.delivery-time-item {

    flex: 1 1 260px;

    display: flex;

    align-items: center;

    gap: 16px;

    background: white;

    border: 1px solid var(--border);

    border-radius: 16px;

    padding: 18px 22px;

    box-shadow: 0 4px 14px rgba(20, 20, 22, .04);

}

.delivery-time-item > i {

    color: var(--orange);

    font-size: 30px;

    width: 40px;

    text-align: center;

}

.delivery-time-item > div {

    display: flex;

    flex-direction: column;

}

.delivery-time-item span {

    font-size: 13px;

    color: var(--muted);

    font-weight: 600;

}

.delivery-time-item strong {

    font-size: 30px;

    font-weight: 800;

    letter-spacing: -.5px;

    color: var(--text);

    line-height: 1.2;

}


/* =========================
   HERO
========================= */

.hero {

    width: calc(100% - 40px);

    max-width: 1500px;

    min-height: 390px;

    margin: 25px auto 20px;

    position: relative;

    overflow: hidden;

    border-radius: 18px;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            90deg,
            #1d0803 0%,
            #42170b 35%,
            #a43d17 72%,
            #e45b20 100%
        );

}


/* CONTEÚDO */

.hero-content {

    width: 62%;

    padding: 50px 50px 50px 55px;

    position: relative;

    z-index: 2;

    color: white;

}


.hero-label {

    display: inline-block;

    color: #ff5a28;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .5px;

    margin-bottom: 15px;

}


.hero-content h1 {

    font-size: clamp(34px, 4vw, 58px);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.5px;

    margin: 0 0 16px;

}


.hero-content p {

    font-size: 17px;

    line-height: 1.5;

    color: #eeeeee;

    max-width: 620px;

}


/* =========================
   BENEFÍCIOS
========================= */

.hero-benefits {

    display: flex;

    align-items: center;

    gap: 30px;

    margin-top: 35px;

}


.benefit {

    display: flex;

    align-items: center;

    gap: 12px;

}


.benefit + .benefit {

    border-left: 1px solid rgba(255,255,255,.25);

    padding-left: 30px;

}


.benefit > i {

    color: #ff5425;

    font-size: 27px;

}


.benefit strong {

    display: block;

    font-size: 14px;

    margin-bottom: 4px;

}


.benefit span {

    display: block;

    color: #cfcfcf;

    font-size: 12px;

}


/* =========================
   PIZZA DO BANNER
========================= */

.hero-pizza {

    position: absolute;

    right: -40px;

    bottom: -100px;

    width: 58%;

    height: 125%;

    z-index: 1;

}


.hero-pizza img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center;

    transform: rotate(-5deg);

    filter: drop-shadow(
        -10px 15px 25px rgba(0,0,0,.35)
    );

}


/* =========================
   CATEGORIAS
========================= */

.categories {

    width: calc(100% - 40px);

    max-width: 1500px;

    margin: 0 auto 35px;

    display: flex;

    align-items: center;

    gap: 12px;

    overflow-x: auto;

    padding: 5px 5px 10px;

}


.category {

    min-width: 130px;

    height: 52px;

    padding: 0 22px;

    border: 1px solid #e2e4e7;

    background: white;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    white-space: nowrap;

    font-family: inherit;

    font-size: 13px;

    font-weight: 500;

    color: #60666d;

    cursor: pointer;

    transition: .2s;

}


.category:hover {

    border-color: #ff5425;

    color: #ff5425;

}


.category.active {

    background: #ff4b1f;

    border-color: #ff4b1f;

    color: white;

    font-weight: 700;

    box-shadow:
        0 5px 15px rgba(255,75,31,.18);

}


.category-icon {

    font-size: 18px;

}


/* =========================
   DESKTOP GRANDE
========================= */

@media (min-width: 1600px) {

    .hero {

        min-height: 440px;

    }

    .hero-content {

        padding-left: 70px;

    }

}


/* =========================
   TABLET
========================= */

@media (max-width: 900px) {

    .hero {

        min-height: 330px;

    }

    .hero-content {

        width: 70%;

        padding: 35px;

    }

    .hero-content h1 {

        font-size: 35px;

    }

    .hero-pizza {

        width: 55%;

        right: -100px;

    }

    .hero-benefits {

        gap: 15px;

    }

    .benefit + .benefit {

        padding-left: 15px;

    }

}


/* =========================
   CELULAR
========================= */

@media (max-width: 600px) {

    .hero {

        width: calc(100% - 20px);

        min-height: 440px;

        margin-top: 15px;

        align-items: flex-start;

    }

    .hero-content {

        width: 100%;

        padding: 30px 25px;

    }

    .hero-content h1 {

        font-size: 29px;

    }

    .hero-content p {

        font-size: 13px;

    }

    .hero-benefits {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

        margin-top: 25px;

    }

    .benefit + .benefit {

        border-left: 0;

        padding-left: 0;

    }

    .hero-pizza {

        width: 90%;

        height: 55%;

        right: -70px;

        bottom: -50px;

    }

    .categories {

        width: calc(100% - 20px);

    }

    .category {

        min-width: 115px;

        height: 48px;

    }

}


/* =========================
   CATEGORIAS
========================= */

.categories {
    max-width: 1200px;

    margin: 0 auto 25px;

    display: flex;

    gap: 8px;

    overflow-x: auto;

    padding-bottom: 5px;
}

.category {
    border: 1px solid var(--border);

    background: white;

    padding: 11px 18px;

    border-radius: 25px;

    white-space: nowrap;

    font-family: inherit;

    font-size: 12px;

    cursor: pointer;

    color: #5e646a;
}

.category.active {
    background: var(--orange);

    border-color: var(--orange);

    color: white;

    font-weight: 600;
}


/* =========================
   MENU
========================= */

.menu {
    max-width: 1200px;

    margin: auto;
}

.section-title {
    margin-bottom: 18px;
}

.section-title h2 {
    font-size: 23px;
}

.section-title p {
    color: var(--muted);

    font-size: 12px;

    margin-top: 4px;
}


/* =========================
   PRODUTOS
========================= */

.products {
    display: grid;

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

    gap: 15px;
}

.product {
    background: white;

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 12px;

    display: flex;

    gap: 15px;

    transition: .2s;
}

.product:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 25px rgba(0,0,0,.06);
}

.product-image {
    width: 150px;
    height: 125px;

    flex-shrink: 0;

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

    overflow: hidden;

    border-radius: 10px;

    background: #f8f8f8;
}

.product-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}

.product-info {
    flex: 1;

    display: flex;
    flex-direction: column;
}

.product-info h3 {
    font-size: 15px;
}

.product-info p {
    color: var(--muted);

    font-size: 11px;

    line-height: 1.5;

    margin-top: 7px;
}

.product-bottom {
    margin-top: auto;

    padding-top: 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.product-bottom strong {
    font-size: 12px;

    color: var(--orange);
}

.add-product,
.add-product-agua {
    width: 34px;
    height: 34px;

    border: 0;

    background: var(--orange);

    color: white;

    border-radius: 8px;

    cursor: pointer;

    transition: .2s;
}

.add-product:hover,
.add-product-agua:hover {
    background: var(--orange-dark);

    transform: scale(1.05);
}


/* =========================
   ITEM ESGOTADO / INDISPONÍVEL
========================= */

.product.esgotado {
    opacity: .5;

    filter: grayscale(.6);
}

.product.esgotado .add-product,
.product.esgotado .add-product-agua {
    background: #b8bcc2 !important;

    cursor: not-allowed;
}

/* =========================
   MODAL ÁGUA (com/sem gás)
========================= */

.agua-modal-box .border-options {
    margin-top: 10px;
}

.esgotado-badge {
    display: inline-block;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .4px;

    background: #ffe1de;
    color: #c1372a;

    padding: 2px 8px;
    border-radius: 20px;

    margin-top: 6px;
    width: fit-content;
}

.border-option.esgotado,
.size-option.esgotado {
    opacity: .45;

    cursor: not-allowed;

    pointer-events: none;
}


/* =========================
   CARRINHO FIXO
========================= */

.cart-button {
    position: fixed;

    bottom: 20px;
    left: 50%;

    transform: translateX(-50%);

    min-width: 330px;

    height: 62px;

    background: var(--orange);

    color: white;

    border: 0;

    border-radius: 12px;

    box-shadow:
        0 10px 30px rgba(255,75,31,.3);

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 0 18px;

    cursor: pointer;

    z-index: 50;

    text-align: left;
}

.cart-icon {
    position: relative;

    font-size: 21px;
}

.cart-icon span {
    position: absolute;

    top: -10px;
    right: -10px;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: white;

    color: var(--orange);

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

    font-size: 9px;
    font-weight: 700;
}

.cart-button div:nth-child(2) {
    flex: 1;
}

.cart-button strong {
    display: block;

    font-size: 12px;
}

.cart-button span {
    display: block;

    font-size: 10px;

    margin-top: 3px;

    opacity: .9;
}


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

.cart-modal {
    position: fixed;

    inset: 0;

    z-index: 999;
    
    display: none;
}

.cart-modal.show {
    display: block;
}

.cart-overlay {
    position: absolute;

    inset: 0;

    background: rgba(0,0,0,.55);

    backdrop-filter: blur(3px);
}

.cart-box {
    position: absolute;

    top: 0;
    right: 0;

    height: 100%;

    width: 430px;

    max-width: 100%;

    background: white;

    display: flex;

    flex-direction: column;

    box-shadow:
        -10px 0 40px rgba(0,0,0,.15);
}


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

.cart-header {
    padding: 25px;

    border-bottom: 1px solid var(--border);

    display: flex;

    justify-content: space-between;
}

.cart-header span {
    color: var(--muted);

    font-size: 11px;
}

.cart-header h2 {
    margin-top: 4px;

    font-size: 21px;
}

#close-cart {
    width: 34px;
    height: 34px;

    border: 0;

    background: #f3f4f5;

    border-radius: 50%;

    cursor: pointer;
}


/* =========================
   ITEMS
========================= */

.cart-items {
    flex: 1;

    overflow-y: auto;

    padding: 20px;
}

.empty-cart {
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: var(--muted);
}

.empty-cart i {
    font-size: 35px;

    margin-bottom: 15px;

    color: #d4d7da;
}

.empty-cart strong {
    color: var(--text);

    font-size: 14px;
}

.empty-cart span {
    font-size: 11px;

    margin-top: 5px;
}


/* =========================
   CART FOOTER
========================= */

.cart-footer {
    border-top: 1px solid var(--border);

    padding: 20px;
}

.cart-total {
    display: flex;

    justify-content: space-between;

    margin-bottom: 15px;
}

.cart-total span {
    font-size: 13px;

    color: var(--muted);
}

.cart-total strong {
    font-size: 18px;

    color: var(--orange);
}

.checkout {
    width: 100%;

    height: 48px;

    border: 0;

    background: var(--orange);

    color: white;

    border-radius: 8px;

    font-family: inherit;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;
}


/* =========================
   RESPONSIVO
========================= */

@media (max-width: 800px) {

    .topbar {
        padding: 0 15px;
    }

    .hero {
        margin: 15px;

        padding: 25px;

        min-height: 210px;
    }

    .hero-content h1 {
        font-size: 25px;
    }

    .categories,
    .menu {
        margin-left: 15px;
        margin-right: 15px;
    }

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

}


@media (max-width: 500px) {

    .restaurant img {
        width: 140px;
    }

    .hero {
        min-height: 190px;

        padding: 22px;
    }

    .hero-content h1 {
        font-size: 22px;
    }

    .product-image {
        width: 90px;
        height: 90px;

        font-size: 38px;
    }

    .product-info h3 {
        font-size: 13px;
    }

    .product-info p {
        font-size: 10px;
    }

    .cart-button {
        min-width: calc(100% - 30px);
    }

}
/* =====================================
   CONFIGURADOR DE PIZZA
===================================== */

.pizza-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;
}

.pizza-modal.show {
    display: block;
}

.pizza-overlay {
    position: absolute;

    inset: 0;

    background: rgba(0,0,0,.55);

    backdrop-filter: blur(3px);
}


.pizza-modal-box {
    position: absolute;

    width: 520px;

    max-width: calc(100% - 25px);

    max-height: 90vh;

    overflow-y: auto;

    background: white;

    border-radius: 16px;

    padding: 28px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    box-shadow:
        0 20px 60px rgba(0,0,0,.25);
}


.pizza-close {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 34px;
    height: 34px;

    border: 0;

    border-radius: 50%;

    background: #f2f3f4;

    cursor: pointer;

    color: #555;
}


/* HEADER */

.pizza-modal-header {
    padding-right: 40px;

    margin-bottom: 25px;
}

.pizza-modal-header span {
    color: var(--orange);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .8px;
}

.pizza-modal-header h2 {
    font-size: 23px;

    margin-top: 5px;
}

.pizza-modal-header p {
    color: #777;

    font-size: 11px;

    margin-top: 5px;
}


/* SECTIONS */

.pizza-section {
    margin-bottom: 22px;
}

.pizza-section h3 {
    font-size: 12px;

    margin-bottom: 10px;
}


/* TAMANHO */

.size-options {
    display: grid;

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

    gap: 8px;
}

.size-option {
    background: white;

    border: 1px solid #e0e2e5;

    border-radius: 9px;

    padding: 12px;

    cursor: pointer;

    text-align: left;

    font-family: inherit;
}

.size-option strong {
    display: block;

    font-size: 12px;
}

.size-option span {
    display: block;

    color: #777;

    font-size: 10px;

    margin-top: 4px;
}

.size-option.active {
    border-color: var(--orange);

    background: #fff5f1;

    color: var(--orange);
}


/* TIPO */

.type-options {
    display: grid;

    grid-template-columns:
        1fr 1fr 1fr;

    gap: 8px;
}

.type-option {
    display: flex;

    align-items: center;

    gap: 12px;

    text-align: left;

    padding: 13px;

    background: white;

    border: 1px solid #e0e2e5;

    border-radius: 9px;

    cursor: pointer;

    font-family: inherit;
}

.type-option i {
    color: var(--orange);

    font-size: 20px;
}

.type-option strong {
    display: block;

    font-size: 11px;
}

.type-option span {
    display: block;

    color: #777;

    font-size: 9px;

    margin-top: 3px;
}

.type-option.active {
    border-color: var(--orange);

    background: #fff5f1;
}


/* SELECT */

.pizza-section select {
    width: 100%;

    height: 45px;

    border: 1px solid #dfe1e4;

    border-radius: 8px;

    padding: 0 12px;

    background: white;

    font-family: inherit;

    font-size: 12px;

    outline: none;

    cursor: pointer;
}

.pizza-section select:focus {
    border-color: var(--orange);
}


/* ESCONDER SEGUNDO SABOR */

.flavor-two-section {
    display: none;
}

.flavor-two-section.show {
    display: block;
}


/* RESUMO */

.pizza-summary {
    margin-top: 25px;

    padding: 15px;

    border-radius: 9px;

    background: #f7f8f9;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.pizza-summary span {
    display: block;

    color: #777;

    font-size: 9px;
}

.pizza-summary-name {
    display: block;

    font-size: 12px;

    margin-top: 4px;
}

#pizza-price {
    color: var(--orange);

    font-size: 17px;
}


/* BOTÃO */

.add-pizza-cart {
    width: 100%;

    height: 48px;

    margin-top: 12px;

    border: 0;

    border-radius: 8px;

    background: var(--orange);

    color: white;

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;
}

.add-pizza-cart:hover {
    background: var(--orange-dark);
}


/* CELULAR */

@media (max-width: 600px) {

    .pizza-modal-box {
        padding: 22px;

        max-height: 94vh;
    }

    .size-options {
        grid-template-columns: 1fr;
    }

    .type-options {
        grid-template-columns: 1fr;
    }

}
/* =====================================
   BORDA RECHEADA
===================================== */

.border-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.border-option {
    width: 100%;

    min-height: 58px;

    padding: 11px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: white;

    border: 1px solid #e0e2e5;

    border-radius: 9px;

    font-family: inherit;

    text-align: left;

    cursor: pointer;

    transition: .2s;
}


.border-option:hover {
    border-color: var(--orange);

    background: #fffaf8;
}


.border-option.active {
    border-color: var(--orange);

    background: #fff5f1;

    box-shadow: 0 0 0 1px var(--orange);
}


.border-info strong {
    display: block;

    font-size: 12px;

    color: #202326;
}


.border-option.active .border-info strong {
    color: var(--orange);
}


.border-info span {
    display: block;

    margin-top: 4px;

    color: #777;

    font-size: 9px;
}


.border-price {
    color: var(--orange);

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;
}

/* =====================================
   LOJA FECHADA (OVERLAY)
===================================== */

.loja-fechada-card {
    background: #fff;
    border-radius: 20px;

    max-width: 380px;
    width: 100%;

    padding: 40px 32px;

    text-align: center;

    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.loja-fechada-card i {
    font-size: 40px;
    color: var(--orange);

    margin-bottom: 16px;
}

.loja-fechada-card h2 {
    font-size: 20px;
    color: var(--text);

    margin-bottom: 10px;
}

.loja-fechada-card p {
    font-size: 14px;
    color: var(--muted);

    line-height: 1.5;
}


/* =====================================
   POPUP BEBIDAS NO CHECKOUT
===================================== */

.bebidas-popup-box {
    text-align: center;

    padding: 36px 28px;
}

.bebidas-popup-icon {
    font-size: 42px;

    color: var(--orange);

    margin-bottom: 14px;
}

.bebidas-popup-box h3 {
    font-size: 20px;

    margin-bottom: 10px;

    color: #222;
}

.bebidas-popup-box p {
    font-size: 14px;

    color: #666;

    line-height: 1.5;

    margin-bottom: 24px;
}

.bebidas-popup-actions {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.bebidas-popup-add {
    width: 100%;

    height: 48px;

    border: 0;

    background: var(--orange);

    color: white;

    border-radius: 8px;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;
}

.bebidas-popup-add:hover {
    filter: brightness(0.95);
}

.bebidas-popup-skip {
    width: 100%;

    height: 44px;

    border: 1px solid #ddd;

    background: white;

    color: #555;

    border-radius: 8px;

    font-family: inherit;

    font-size: 13px;

    cursor: pointer;
}

.bebidas-popup-skip:hover {
    background: #f7f7f7;
}