/* TÔPERTO - PUBLICO CONSUMIDOR PADRAO IFOOD - v11e
   Usar apenas em: cidade.html, loja.html, pedido.html, obrigado.html
*/

:root{
  --tp-public-bg:#f5f5f5;
  --tp-public-card:#ffffff;
  --tp-public-card-soft:#fafafa;
  --tp-public-text:#1f2933;
  --tp-public-muted:#667085;
  --tp-public-border:#e5e7eb;
  --tp-public-accent:#ea1d2c;
  --tp-public-green:#16a34a;
  --tp-public-shadow:0 8px 28px rgba(15,23,42,.08);
}

html,
body{
  margin:0;
  min-height:100%;
  background:var(--tp-public-bg) !important;
  color:var(--tp-public-text) !important;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body,
main,
section,
article,
div,
p,
span,
label,
small,
strong,
h1,
h2,
h3,
h4,
h5,
h6{
  color:inherit;
}

body{
  background:
    linear-gradient(180deg, #ffffff 0, #f7f7f7 240px, #f5f5f5 100%) !important;
}

a{
  color:inherit;
}

header,
.topbar,
.appbar,
.hero,
.cidade-hero,
.loja-hero,
.vitrine-hero{
  background:#ffffff !important;
  color:var(--tp-public-text) !important;
  border-bottom:1px solid var(--tp-public-border);
}

main,
.container,
.page,
.wrapper{
  background:transparent !important;
}

.card,
.panel,
.box,
.loja-card,
.store-card,
.restaurant-card,
.produto-card,
.product-card,
.categoria-card,
.category-card,
.pedido-card,
.order-card,
.cart-card,
.modal-content,
.drawer,
.sheet{
  background:var(--tp-public-card) !important;
  color:var(--tp-public-text) !important;
  border:1px solid var(--tp-public-border) !important;
  box-shadow:var(--tp-public-shadow);
}

h1,
h2,
h3,
h4{
  color:#111827 !important;
}

p,
small,
.muted,
.subtitle,
.description,
.descricao,
.endereco,
.address,
.hint{
  color:var(--tp-public-muted) !important;
}

input,
select,
textarea{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid #d0d5dd !important;
  border-radius:14px !important;
  box-shadow:none !important;
}

input::placeholder,
textarea::placeholder{
  color:#98a2b3 !important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--tp-public-accent) !important;
  box-shadow:0 0 0 4px rgba(234,29,44,.10) !important;
  outline:none !important;
}

button,
.btn,
.button,
[role="button"],
[type="button"],
[type="submit"]{
  border-radius:14px;
}

.btn-primary,
.button-primary,
.cta,
.checkout,
.finalizar,
#btnFinalizar,
#btnEnviarPedido,
button[type="submit"]{
  background:var(--tp-public-accent) !important;
  color:#ffffff !important;
  border:0 !important;
  font-weight:800;
}

.btn-secondary,
.button-secondary{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid var(--tp-public-border) !important;
}

.badge,
.pill,
.tag,
.status{
  background:#f2f4f7 !important;
  color:#344054 !important;
  border:1px solid #eaecf0 !important;
}

.status.aberto,
.aberto,
.open{
  background:#ecfdf3 !important;
  color:#067647 !important;
  border-color:#abefc6 !important;
}

.status.fechado,
.fechado,
.closed{
  background:#fef3f2 !important;
  color:#b42318 !important;
  border-color:#fecdca !important;
}

.categorias,
.categories,
.category-bar,
.tabs{
  background:#ffffff !important;
  border:1px solid var(--tp-public-border) !important;
  box-shadow:0 6px 20px rgba(15,23,42,.06);
}

.categorias button,
.categories button,
.category-bar button,
.tabs button{
  background:#ffffff !important;
  color:#344054 !important;
  border:1px solid #eaecf0 !important;
}

.categorias button.active,
.categories button.active,
.category-bar button.active,
.tabs button.active,
.categoria-ativa,
.active{
  background:#fff1f3 !important;
  color:var(--tp-public-accent) !important;
  border-color:#fecdd3 !important;
}

.loja-card img,
.store-card img,
.restaurant-card img,
.produto-card img,
.product-card img{
  background:#f2f4f7;
}

.cart,
.carrinho,
.cart-footer,
.checkout-bar,
.bottom-bar{
  background:#ffffff !important;
  color:#111827 !important;
  border-top:1px solid var(--tp-public-border) !important;
  box-shadow:0 -10px 30px rgba(15,23,42,.10);
}

.modal,
.overlay{
  background:rgba(15,23,42,.42) !important;
}

hr{
  border:0;
  border-top:1px solid var(--tp-public-border);
}

@media (max-width:760px){
  body{
    background:#f5f5f5 !important;
  }

  .card,
  .panel,
  .box,
  .loja-card,
  .store-card,
  .restaurant-card,
  .produto-card,
  .product-card{
    border-radius:18px;
  }
}