/* ================================================================
   menu.css — Menu grid, cards, guided ordering, page layout
   ================================================================ */

/* ---- Page Layout ---- */
.page-wrap { width: min(1120px, 100%); padding: 35px 30px 60px; margin: 0 auto; }
.page-title { display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; }
.page-title p:not(.eyebrow) { margin: 9px 0 0; color: var(--muted); font-size: 11px; }
.page-title-actions { display: flex; gap: 8px; align-items: center; }
.guided-order-button { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; padding: 0 14px; color: white; background: var(--accent); border-radius: 12px; font-size: 9px; font-weight: 900; }
.guided-order-button:hover { background: var(--accent-dark); }
.guided-order-button svg { width: 15px; }
.voice-order-button { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; padding: 0 14px; color: white; background: var(--ink); border-radius: 12px; font-size: 9px; font-weight: 900; }
.voice-order-button svg { width: 15px; color: #ff8b68; }

/* ---- Category Tabs ---- */
.category-tabs { display: flex; gap: 7px; margin: 28px 0 20px; overflow-x: auto; scrollbar-width: none; }
.category-tabs button { min-height: 37px; flex: 0 0 auto; padding: 0 14px; color: #747168; background: #ebe7dd; border-radius: 99px; font-size: 9px; font-weight: 900; }
.category-tabs button.active { color: white; background: var(--accent); }

/* ---- Menu Grid ---- */
.menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.menu-layout-switch { display: flex; gap: 6px; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.menu-layout-switch::-webkit-scrollbar { display: none; }
.menu-layout-switch button { min-height: 34px; flex: 0 0 auto; padding: 0 12px; color: #747168; background: #ebe7dd; border-radius: 99px; font-size: 8px; font-weight: 900; }
.menu-layout-switch button.active { color: white; background: var(--ink); }
.menu-card { position: relative; display: flex; min-height: 220px; flex-direction: column; padding: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 9px 26px rgba(54, 44, 30, .045); animation: rise .3s ease both; }
.menu-card-body { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.menu-grid.layout-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.menu-grid.layout-compact .menu-card { min-height: 160px; padding: 11px; border-radius: 14px; }
.menu-grid.layout-compact .menu-card-art { height: 72px; margin-bottom: 9px; border-radius: 10px; font-size: 30px; }
.menu-grid.layout-compact .menu-card h3 { font-size: 10px; }
.menu-grid.layout-compact .menu-card p { min-height: 24px; margin: 4px 0 8px; font-size: 7px; -webkit-line-clamp: 2; }
.menu-grid.layout-compact .menu-card-foot { justify-content: flex-end; }
.menu-grid.layout-compact .menu-card-foot.no-price { position: absolute; top: 68px; right: 15px; z-index: 2; margin: 0; }
.menu-grid.layout-compact .add-button { min-width: 28px; width: 28px; height: 28px; padding: 0; border-radius: 50%; font-size: 16px; }
.menu-grid.layout-compact .add-button-label { display: none; }
.menu-grid.layout-list { grid-template-columns: 1fr; gap: 8px; }
.menu-grid.layout-list .menu-card { min-height: 0; flex-direction: row; align-items: stretch; gap: 12px; padding: 10px; border-radius: 14px; }
.menu-grid.layout-list .menu-card-art { width: 92px; height: auto; min-height: 92px; flex: 0 0 92px; margin: 0; border-radius: 12px; font-size: 28px; }
.menu-grid.layout-list .menu-card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0 14px; align-content: center; }
.menu-grid.layout-list .menu-card h3, .menu-grid.layout-list .menu-card p { grid-column: 1; }
.menu-grid.layout-list .menu-card h3 { font-size: 12px; }
.menu-grid.layout-list .menu-card p { min-height: 0; margin: 4px 0 8px; -webkit-line-clamp: 3; }
.menu-grid.layout-list .menu-card-foot { grid-column: 2; grid-row: 1 / 3; align-self: center; flex-direction: column; gap: 8px; margin: 0; }
.menu-grid.layout-list .add-button { min-width: 92px; }
.menu-grid.layout-list .sold-label { top: 14px; left: 14px; }
.menu-grid.layout-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.menu-grid.layout-hero .menu-card { min-height: 280px; padding: 0; border-radius: 20px; }
.menu-grid.layout-hero .menu-card-art { height: 150px; margin: 0; border-radius: 20px 20px 0 0; font-size: 48px; }
.menu-grid.layout-hero .menu-card-body { padding: 14px 16px 16px; }
.menu-grid.layout-hero .menu-card h3 { font-size: 14px; }
.menu-grid.layout-hero .menu-card p { min-height: 0; margin-bottom: 12px; font-size: 9px; -webkit-line-clamp: 3; }
.menu-grid.layout-hero .menu-card-foot { gap: 14px; }
.menu-grid.layout-hero .add-button { min-height: 38px; flex: 1; justify-content: space-between; padding: 0 14px; background: var(--ink); border-radius: 11px; }
.menu-grid.layout-hero .sold-label { top: 14px; left: 14px; }
.menu-grid.layout-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.menu-grid.layout-strip .menu-card { width: min(240px, 72vw); min-height: 250px; flex: 0 0 auto; scroll-snap-align: start; }
.menu-grid.layout-strip .menu-card-art { height: 110px; }
.menu-grid.layout-strip .menu-card-foot { display: block; }
.menu-grid.layout-strip .menu-card-price { margin-bottom: 8px; }
.menu-grid.layout-strip .add-button { width: 100%; color: var(--accent-dark); background: var(--accent-soft); border: 1px solid #f1c8b9; }
.menu-card.sold-out { filter: grayscale(1); opacity: .55; }
.menu-card-art { position: relative; display: grid; height: 98px; place-items: center; overflow: hidden; margin-bottom: 13px; color: rgba(255,255,255,.9); background: radial-gradient(circle at 35% 25%, #ffa27d, #ef5a2f 58%, #9e3218); border-radius: 13px; font-family: Georgia, serif; font-size: 42px; font-weight: 700; }
.menu-card[data-category="acompanhamentos"] .menu-card-art { background: radial-gradient(circle at 35% 25%, #c4d58c, #66854a 65%, #304e2c); }
.menu-card[data-category="bebidas"] .menu-card-art { background: radial-gradient(circle at 35% 25%, #9fcbdd, #397a9b 65%, #18465d); }
.menu-card[data-category="sobremesas"] .menu-card-art { background: radial-gradient(circle at 35% 25%, #e4ba8b, #a5683f 65%, #5a321e); }
.menu-card-art::after { position: absolute; right: -20px; bottom: -30px; width: 90px; height: 90px; content: ""; border: 14px solid rgba(255,255,255,.1); border-radius: 99px; }
.menu-card-art::before { position: absolute; inset: 0; content: ""; background-image: var(--img-url); background-size: cover; background-position: center; border-radius: inherit; }
.menu-card-art:has(::before) .menu-card-art-fallback { opacity: 0; }
.menu-card h3 { margin: 0; font-size: 12px; }
.menu-card p { display: -webkit-box; min-height: 30px; margin: 6px 0 10px; overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.menu-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.menu-card-price strong, .menu-card-price span { display: block; }
.menu-card-price strong { font-size: 12px; }
.menu-card-price span { margin-top: 1px; color: var(--muted); font-size: 7px; }
.add-button { display: inline-flex; min-width: 32px; height: 32px; align-items: center; justify-content: center; gap: 10px; padding: 0 11px; color: white; background: var(--accent); border-radius: 10px; font-size: 9px; font-weight: 900; }
.add-button-icon { font-size: 18px; font-weight: 500; line-height: 1; }
.menu-grid.layout-grid .menu-card-foot.no-price .add-button { width: 100%; justify-content: space-between; }
.menu-grid.layout-grid .menu-card-foot.has-price .add-button { min-width: 96px; }
.sold-out .add-button { background: #888; }
.sold-label { position: absolute; top: 22px; left: 22px; z-index: 1; padding: 5px 8px; color: white; background: var(--ink); border-radius: 6px; font-size: 7px; font-weight: 900; text-transform: uppercase; }

/* ---- Guided Ordering ---- */
.guided-page { width: min(1180px, 100%); padding: 25px 30px 100px; margin: 0 auto; }
.guided-progress { display: flex; gap: 7px; padding: 4px 0 20px; overflow-x: auto; scrollbar-width: none; }
.guided-progress::-webkit-scrollbar { display: none; }
.guided-progress button { min-height: 34px; flex: 0 0 auto; padding: 0 12px; color: var(--muted); background: #ebe7dd; border-radius: 99px; font-size: 8px; font-weight: 900; }
.guided-progress button.active { color: white; background: var(--accent); }
.guided-progress button.complete { color: var(--green); background: var(--green-soft); }
.guided-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 20px; align-items: start; }
.guided-main, .guided-summary { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.guided-main { min-height: 480px; padding: 25px; }
.guided-step-head { margin-bottom: 22px; }
.guided-step-head h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(30px, 4vw, 44px); font-weight: 500; letter-spacing: -.055em; }
.guided-step-head p:not(.eyebrow) { max-width: 600px; margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.guided-summary { position: sticky; top: 96px; padding: 18px; }
.guided-summary h2 { margin: 0 0 14px; font-size: 15px; }
.guided-summary .cart-lines { max-height: 430px; margin: 0; }
.guided-summary .cart-line { grid-template-columns: minmax(0, 1fr) auto; }
.guided-summary .cart-line-art { display: none; }
.guided-summary-total { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); }
.guided-summary-total .total-row strong { font-size: 18px; }
.guided-fields { display: grid; gap: 15px; max-width: 620px; }
.guided-fields label { color: #55534d; font-size: 9px; font-weight: 900; }
.guided-fields input, .guided-fields textarea { width: 100%; min-height: 49px; padding: 12px 14px; margin-top: 7px; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 12px; outline: none; font-size: 11px; }
.guided-fields textarea { min-height: 145px; resize: vertical; }
.guided-fields input:focus, .guided-fields textarea:focus { border-color: #e5ac9a; box-shadow: 0 0 0 4px rgba(239, 90, 47, .08); }
.guided-review { display: grid; gap: 14px; }
.guided-review-section { padding: 17px; background: #faf8f2; border: 1px solid #eee9de; border-radius: 15px; }
.guided-review-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 11px; }
.guided-review-head h3 { margin: 0; font-size: 12px; }
.guided-review-head button { color: var(--accent-dark); background: transparent; font-size: 8px; font-weight: 900; }
.guided-review-line { display: flex; justify-content: space-between; gap: 15px; padding: 7px 0; color: var(--muted); font-size: 10px; border-top: 1px solid var(--line); }
.guided-review-line:first-of-type { border-top: 0; }
.guided-review-line strong { color: var(--ink); }
.guided-review-line.is-incomplete, .cart-line.is-incomplete { border-color: #ef9a5a; background: #fff4e8; }
.guided-review-line em, .cart-line.is-incomplete small { color: #b95618; font-style: normal; font-weight: 900; }
.guided-success { display: grid; min-height: 420px; place-items: center; align-content: center; gap: 13px; text-align: center; }
.guided-success-icon { display: grid; width: 68px; height: 68px; place-items: center; color: white; background: var(--green); border-radius: 22px; box-shadow: 0 10px 28px rgba(39, 124, 83, .25); font-size: 30px; }
.guided-success h1 { margin: 5px 0 0; font-family: Georgia, serif; font-size: 38px; font-weight: 500; }
.guided-success p { max-width: 420px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.guided-success-actions { display: flex; gap: 8px; margin-top: 12px; }
.guided-success-actions button { min-height: 44px; padding: 0 16px; border-radius: 11px; font-size: 9px; font-weight: 900; }
.guided-success-actions .primary-button, .guided-success-actions .secondary-button { width: auto; margin: 0; }
.guided-footer { position: fixed; right: var(--order); bottom: 0; left: var(--side); z-index: 19; display: flex; justify-content: space-between; gap: 10px; padding: 12px max(30px, calc((100vw - var(--side) - var(--order) - 1120px) / 2 + 30px)); background: rgba(246, 244, 238, .94); border-top: 1px solid var(--line); backdrop-filter: blur(15px); }
.guided-footer:empty { display: none; }
.guided-footer button { min-width: 130px; min-height: 45px; padding: 0 18px; border-radius: 11px; font-size: 9px; font-weight: 900; }
.guided-footer .guided-back { color: var(--ink); background: #e8e4da; }
.guided-footer .guided-next { margin-left: auto; color: white; background: var(--accent); }

/* ---- Responsive ---- */
@media (max-width: 1500px) {
  .guided-main .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guided-main .menu-grid.layout-list,
  .guided-main .menu-grid.layout-hero { grid-template-columns: 1fr; }
  .guided-main .menu-grid.layout-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .page-title { align-items: flex-start; flex-direction: column; }
  .page-title-actions { width: 100%; }
  .page-title-actions button { flex: 1; justify-content: center; }
  .guided-page { padding: 14px 13px 145px; }
  .guided-main { min-height: 0; padding: 17px; }
  .guided-main .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guided-main .menu-grid.layout-list { grid-template-columns: 1fr; }
  .guided-main .menu-grid.layout-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guided-main .menu-grid.layout-hero { grid-template-columns: 1fr; }
  .guided-main .menu-card { min-height: 200px; padding: 11px; }
  .guided-main .menu-card-art { height: 82px; }
  .guided-summary { padding: 14px; }
  .guided-footer { bottom: var(--mobile-nav-h); padding: 9px 13px; }
  .guided-footer button { min-width: 0; flex: 1; }
  .guided-success-actions { width: 100%; flex-direction: column; }
  .guided-success-actions button { width: 100% !important; }
  .page-title h1 { font-size: 34px; }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .menu-grid.layout-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-grid.layout-list { grid-template-columns: 1fr; }
  .menu-grid.layout-hero { grid-template-columns: 1fr; }
  .menu-card { min-height: 190px; padding: 10px; border-radius: 15px; }
  .menu-card-art { height: 78px; margin-bottom: 10px; font-size: 32px; }
  .menu-card h3 { font-size: 10px; }
  .menu-card p { font-size: 7px; }
}