/* ========== INDEX CARDÁPIO - Web App Responsivo ========== */
:root {
  --index-pad-x: 16px;
  --index-pad-y: 16px;
}
@media (min-width: 375px) {
  :root { --index-pad-x: 18px; }
}
@media (min-width: 560px) {
  :root { --index-pad-x: 20px; --index-pad-y: 20px; }
}
@media (min-width: 768px) {
  :root { --index-pad-x: 24px; --index-pad-y: 24px; }
}
@media (min-width: 960px) {
  :root { --index-pad-x: 30px; --index-pad-y: 28px; }
}
@media (min-width: 1248px) {
  :root { --index-pad-x: 40px; }
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
body.scroll-smooth { scroll-behavior: smooth; }
.index-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: #f7f7f7;
  padding-top: env(safe-area-inset-top, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  overflow-x: hidden;
}

/* ----- Header fixo iFood ----- */
.index-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}
.index-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px var(--index-pad-x);
  padding-top: calc(10px + env(safe-area-inset-top, 0));
  max-width: 1366px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .index-header__inner {
    gap: 12px;
    padding: 12px var(--index-pad-x);
  }
}
.index-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.index-header__logo svg { height: 28px; width: auto; }
.index-header__logo .icon-marmita--logo-ifood-plain path { fill: #ea1d2c; }
@media (min-width: 768px) { .index-header__logo svg { height: 32px; } }

/* Endereço de entrega */
.index-header__address {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  min-height: 44px;
  background: #f7f7f7;
  border: 1px solid #eee;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem;
  color: #3e3e3e;
  text-align: left;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.index-header__address:hover {
  background: #f0f0f0;
  border-color: #e0e0e0;
}
.index-header__address:active {
  background: #ebebeb;
}
@media (max-width: 374px) {
  .index-header__address-text { font-size: 0.75rem; }
  .index-header__address-text strong { font-size: 0.8125rem; }
}
@media (min-width: 560px) {
  .index-header__address { padding: 10px 14px; }
}
@media (min-width: 768px) {
  .index-header__address { max-width: 320px; padding: 10px 16px; font-size: 0.875rem; }
}
.index-header__address-icon { flex-shrink: 0; color: #ea1d2c; display: flex; }
.index-header__address-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.index-header__address-text strong { font-weight: 600; }
.index-header__address-chevron { flex-shrink: 0; color: #a6a6a6; margin-left: auto; }

/* Actions */
.index-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.index-header__admin {
  font-size: 0.8125rem;
  color: #717171;
  text-decoration: none;
  padding: 8px;
  border-radius: 6px;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.index-header__admin:hover { color: #ea1d2c; background: #f7f7f7; }
.index-header__admin:active { background: #eee; }
@media (max-width: 359px) {
  .index-header__admin { padding: 6px; font-size: 0.75rem; }
}
.index-header__cart.header-cart {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  min-height: 44px;
  background: #ea1d2c;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.8125rem;
  transition: background .2s, color .2s;
}
.index-header__cart.header-cart:hover { background: #c41835; color: #fff; }
.index-header__cart.header-cart:active { background: #b31525; }
@media (min-width: 560px) {
  .index-header__cart.header-cart { padding: 10px 14px; font-size: 0.875rem; gap: 8px; }
}
.header-cart__icon { display: flex; flex-shrink: 0; }
.header-cart__cost { font-weight: 600; }
.header-cart__items { font-size: 0.75rem; opacity: .95; }
@media (min-width: 560px) {
  .header-cart__items { font-size: 0.8125rem; }
}

/* ----- Banner com logo sobreposto (estilo iFood) ----- */
.index-banner {
  position: relative;
  width: 100%;
  background: #e0e0e0;
}
.index-banner__image {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 42%;
  overflow: hidden;
}
@media (min-width: 768px) { .index-banner__image { padding-bottom: 32%; } }
.index-banner__image--placeholder { background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%); }
.index-banner__image--placeholder img { opacity: 0; }
.index-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.index-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 50%);
  pointer-events: none;
}

/* Merchant card sobreposto ao banner */
.index-banner__merchant {
  position: relative;
  margin-top: -48px;
  margin-left: max(var(--index-pad-x), env(safe-area-inset-left, 0));
  margin-right: max(var(--index-pad-x), env(safe-area-inset-right, 0));
  padding: 16px var(--index-pad-x);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
@media (min-width: 768px) {
  .index-banner__merchant { margin-top: -56px; padding: 20px var(--index-pad-x); }
}
.index-banner__logo {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f2f2f2;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
@media (min-width: 768px) {
  .index-banner__logo { width: 88px; height: 88px; }
}
.index-banner__info { flex: 1; min-width: 0; }
.index-banner__title {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
@media (min-width: 768px) { .index-banner__title { font-size: 1.75rem; margin-bottom: 12px; } }
.index-banner__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.index-banner__row--badges { margin-bottom: 8px; }
.index-banner__row--rating { margin-bottom: 6px; }
.index-banner__badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: opacity 0.2s;
}
.index-banner__badge--open {
  background: rgba(40, 167, 69, 0.14);
  color: #28a745;
}
.index-banner__badge--closed {
  background: rgba(234, 29, 44, 0.12);
  color: #ea1d2c;
}
.index-banner__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #525252;
  background: #f0f0f0;
  transition: background 0.2s, color 0.2s;
}
.index-banner__tag--free { background: rgba(40, 167, 69, 0.12); color: #28a745; }
.index-banner__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1a1a1a;
}
.index-banner__star { flex-shrink: 0; color: #ffc107; }
.index-banner__avaliacoes {
  font-size: 0.8125rem;
  color: #717171;
  font-weight: 400;
}
.index-banner__detail {
  margin: 0;
  font-size: 0.8125rem;
  color: #717171;
  line-height: 1.5;
}

/* ----- Busca no cardápio ----- */
.index-search {
  padding: var(--index-pad-y) calc(var(--index-pad-x) + env(safe-area-inset-right, 0)) 0 calc(var(--index-pad-x) + env(safe-area-inset-left, 0));
  background: #fff;
}
.index-search__wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f7f7f7;
  border: 1px solid #eee;
  border-radius: 10px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.index-search__wrap:focus-within {
  border-color: #ea1d2c;
  box-shadow: 0 0 0 2px rgba(234, 29, 44, 0.12);
  background: #fff;
}
.index-search__icon {
  flex-shrink: 0;
  color: #a6a6a6;
  transition: color .2s;
}
.index-search__wrap:focus-within .index-search__icon {
  color: #ea1d2c;
}
.index-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 0.9375rem;
  font-family: inherit;
  color: #3e3e3e;
}
.index-search__input::placeholder { color: #a6a6a6; }
.index-search__input:focus { outline: none; }

/* ----- Main / container ----- */
.index-main {
  padding-bottom: 24px;
  overflow-x: hidden;
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
}
@media (max-width: 959px) {
  .index-main { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0)); }
}
/* Extra espaço quando a barra Ver sacola está visível */
body.has-cart-bar.index-page .index-main {
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0));
}
@media (min-width: 560px) {
  body.has-cart-bar.index-page .index-main {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0));
  }
}
.restaurant-container {
  display: block;
  overflow-x: hidden;
  max-width: 100vw;
}
@media (min-width: 960px) {
  .restaurant-container {
    display: flex;
    padding: 0;
    max-width: 1366px;
    margin: 0 auto;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }
}
.restaurant-container .restaurant-column {
  flex-basis: 100%;
  width: 100%;
  max-width: 100%;
  background: #f7f7f7;
}
.restaurant-menu-group[data-test-id="menu-group-admin"],
.restaurant-menu-group[data-categoria] {
  scroll-margin-top: calc(70px + env(safe-area-inset-top));
}
@media (min-width: 1248px) {
  .restaurant-container .restaurant-column { padding-bottom: 40px; }
}

/* Promoções / Destaques */
.restaurant-promotions {
  background: #fff;
  padding: var(--index-pad-y) 0 20px;
  margin-top: 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.restaurant-promotions__wrap {
  position: relative;
  padding: 0 48px;
}
@media (max-width: 559px) {
  .restaurant-promotions__wrap { padding: 0 44px; }
}
@media (max-width: 374px) {
  .restaurant-promotions__wrap { padding: 0 40px; }
}
.restaurant-promotions .swiper {
  overflow: hidden;
  position: relative;
  min-height: 360px;
}
.restaurant-promotions .swiper-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 16px;
  padding: 0 4px 16px;
  -webkit-overflow-scrolling: touch;
  min-height: 360px;
}
.restaurant-promotions .swiper-wrapper::-webkit-scrollbar { display: none; }
.restaurant-promotions .swiper-slide {
  flex-shrink: 0;
  width: 225px;
}
@media (min-width: 375px) {
  .restaurant-promotions .swiper-slide { width: 260px; }
}
@media (min-width: 560px) {
  .restaurant-promotions .swiper-slide { width: 400px; }
}
.restaurant-promotions .swiper-button-prev,
.restaurant-promotions .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  color: #3e3e3e;
  transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
}
.restaurant-promotions .swiper-button-prev { left: 8px; }
.restaurant-promotions .swiper-button-next { right: 8px; }
.restaurant-promotions .swiper-button-prev:hover,
.restaurant-promotions .swiper-button-next:hover {
  background: #fff;
  color: #ea1d2c;
  border-color: #ea1d2c;
  box-shadow: 0 2px 16px rgba(234, 29, 44, 0.15);
}
.restaurant-promotions .swiper-button-prev:active,
.restaurant-promotions .swiper-button-next:active {
  background: #f7f7f7;
}
.restaurant-promotions .swiper-button-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.restaurant-promotions .swiper-button-prev svg,
.restaurant-promotions .swiper-button-next svg { flex-shrink: 0; }
.restaurant-promotions .swiper-button-prev::after,
.restaurant-promotions .swiper-button-next::after { content: none !important; }

/* ----- Navegação categorias ----- */
.index-categories {
  position: sticky;
  top: calc(57px + env(safe-area-inset-top, 0));
  z-index: 100;
  background: #fff;
  padding: 12px 0;
  margin-top: 16px;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.index-categories__wrap {
  position: relative;
  padding: 0 40px;
}
@media (max-width: 374px) {
  .index-categories__wrap { padding: 0 36px; }
}
.index-categories__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.index-categories__scroll::-webkit-scrollbar { display: none; }
.index-categories__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  color: #3e3e3e;
  transition: color .2s, border-color .2s, background .2s;
}
.index-categories__btn:hover { color: #ea1d2c; border-color: #ea1d2c; }
.index-categories__btn:active { background: #f7f7f7; }
.index-categories__btn--prev { left: 6px; }
.index-categories__btn--next { right: 6px; }
.index-categories__btn--disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
@media (max-width: 559px) {
  .index-categories__wrap { padding: 0 36px; }
  .index-categories__btn { width: 32px; height: 32px; }
}
.index-categories__list {
  display: flex;
  gap: 8px;
  padding: 0 8px;
  min-width: min-content;
}
.index-categories__link {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #717171;
  background: #f7f7f7;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.index-categories__link:hover { color: #ea1d2c; background: #fff0f0; }
.index-categories__link:active { background: #eee; }
.index-categories__link--active { color: #fff; background: #ea1d2c; }
.index-categories__link--active:hover { background: #c41835; }
.index-search__empty { padding: 24px 20px; margin: 0; font-size: 0.9375rem; color: #717171; text-align: center; }
.dish-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.dish-card:hover {
  border-color: #ea1d2c !important;
  box-shadow: 0 2px 12px rgba(234,29,44,.12) !important;
}
.dish-card:active {
  transform: scale(0.99);
}
.dish-card__na-sacola {
  background: #28a745;
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
}
/* Horizontal (categorias): preço e badge na mesma linha no rodapé */
.dish-card--horizontal .dish-card__info {
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr auto;
  align-items: end;
}
.dish-card--horizontal .dish-card__info-top {
  grid-column: 1 / -1;
}
.dish-card--horizontal .dish-card__price {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
}
.dish-card--horizontal .dish-card__na-sacola {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  margin-left: 8px;
}
/* Vertical (destaques): badge após o preço, alinhado à base */
.dish-card--vertical .dish-card__na-sacola {
  margin-top: 6px;
}

/* ----- Footer ----- */
.index-footer {
  margin-top: 32px;
  padding: var(--index-pad-y) var(--index-pad-x);
  padding-left: calc(var(--index-pad-x) + env(safe-area-inset-left, 0));
  padding-right: calc(var(--index-pad-x) + env(safe-area-inset-right, 0));
  padding-bottom: calc(var(--index-pad-y) + env(safe-area-inset-bottom, 0));
  background: #fff;
  border-top: 1px solid #eee;
  text-align: center;
}
.index-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
  margin-bottom: 12px;
}
@media (min-width: 560px) {
  .index-footer__nav { gap: 12px 24px; }
}
.index-footer__nav a {
  color: #717171;
  text-decoration: none;
  font-size: 0.875rem;
  transition: color .2s;
}
.index-footer__nav a:hover {
  color: #ea1d2c;
  text-decoration: underline;
}
.index-footer__copy {
  margin: 0;
  font-size: 0.8125rem;
  color: #a6a6a6;
}

/* ----- Breakpoints extra para telas pequenas ----- */
@media (max-width: 359px) {
  .index-banner__title { font-size: 1.25rem; }
  .index-banner__logo { width: 64px; height: 64px; }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .index-banner__image { padding-bottom: 28%; }
  .index-banner__merchant { margin-top: -36px; }
}

/* Garantir touch targets mínimos */
@media (pointer: coarse) {
  .index-header__address,
  .index-header__cart,
  .swiper-button-prev,
  .swiper-button-next,
  .index-categories__link {
    min-height: 44px;
    min-width: 44px;
  }
  .index-header__cart { min-width: auto; }
}