/* ============================================================
   Carte — Template layouts + viewer components
   Loaded by the customer menu (menu.html). Builds on the base
   viewer styles in app.css, themed via --t-* variables.
   ============================================================ */

/* template fonts */
.viewer { font-family: var(--t-fb, var(--fb)); }
.viewer .vcover__name,
.viewer .vcat,
.viewer .vitem__price,
.viewer .crow__sub,
.viewer .crow--total b,
.viewer .vspecials__item b,
.viewer .cart__total { font-family: var(--t-fd, var(--fd)); }

/* ---------- header variants ---------- */
.viewer[data-header="solid"] .vcover { background: var(--t-surface2); color: var(--t-text); }
.viewer[data-header="solid"] .vcover__logo { background: var(--t-grad); border-color: transparent; color: #fff; }
.viewer[data-header="minimal"] .vcover { background: var(--t-surface); color: var(--t-text); border-bottom: 1px solid var(--t-line); }
.viewer[data-header="minimal"] .vcover__logo { background: transparent; border: 1.5px solid var(--t-accent); color: var(--t-accent); }
.viewer[data-header="image"] .vcover { background: var(--t-grad); color: #fff; position: relative; }
.vcover--img { position: relative; background-size: cover !important; background-position: center !important; }
.vcover--img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.65)); }
.vcover--img > * { position: relative; z-index: 1; }

/* ---------- about / info ---------- */
.vabout { color: var(--t-muted); font-size: .9rem; margin: 10px 18px 0; text-align: center; }
.vinfo { margin: 22px 14px 0; border-top: 1px solid var(--t-line); padding-top: 16px; display: grid; gap: 10px; }
.vinfo__row { display: flex; gap: 10px; align-items: flex-start; color: var(--t-text); font-size: .9rem; }
.vinfo__row svg { flex: none; width: 18px; height: 18px; stroke: var(--t-accent); margin-top: 1px; }
.vinfo__row a { color: var(--t-accent); }

/* ---------- search + filters ---------- */
.vtools { position: sticky; top: 0; z-index: 4; display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: color-mix(in srgb, var(--t-bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--t-line); }
.vsearch { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; background: var(--t-surface); border: 1.5px solid var(--t-line); border-radius: 999px; padding: 9px 14px; color: var(--t-text); }
.vsearch input { flex: 1; border: 0; background: transparent; color: var(--t-text); font: inherit; outline: none; }
.vsearch input::placeholder { color: var(--t-muted); }
.vfilters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1 1 100%; }
.vfilters::-webkit-scrollbar { display: none; }
.vchip { flex: none; font: inherit; font-size: .82rem; font-weight: 700; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--t-line); background: transparent; color: var(--t-text); cursor: pointer; white-space: nowrap; }
.vchip.is-on { background: var(--t-grad); border-color: transparent; color: #fff; }
.vempty { text-align: center; color: var(--t-muted); padding: 36px 20px; }

/* ---------- dish photo + tags (base) ---------- */
.vitem__photo { flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--t-surface2); }
.vitem__photo img { width: 100%; height: 100%; object-fit: cover; }
.vtag { display: inline-block; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 7px; border-radius: 6px; margin-left: 6px; vertical-align: middle; }
.vtag--bestseller { background: #FFE7B0; color: #7a4d00; }
.vtag--new { background: #D6F5DF; color: #146c2e; }
.vtag--chefs { background: #E6DBFF; color: #4a2a8a; }
.viewer[data-light="false"] .vtag--bestseller { background: rgba(255,200,80,.2); color: #FFD78A; }
.viewer[data-light="false"] .vtag--new { background: rgba(80,220,130,.18); color: #8DE3AB; }
.viewer[data-light="false"] .vtag--chefs { background: rgba(160,130,255,.2); color: #CBB6FF; }

/* ============================================================
   LAYOUTS
   ============================================================ */

/* ---- CARDS ---- */
.viewer[data-layout="cards"] .vlist { padding: 8px 14px; display: grid; gap: 10px; }
.viewer[data-layout="cards"] .vitem { background: var(--t-surface); border: 1px solid var(--t-line); border-radius: 16px; padding: 12px; box-shadow: 0 8px 24px -18px rgba(0,0,0,.4); }
.viewer[data-layout="cards"] .vitem__photo { width: 76px; height: 76px; }

/* ---- TICKET (street / dhaba) ---- */
.viewer[data-layout="ticket"] .vcat { display: inline-block; background: var(--t-grad); color: #fff; padding: 4px 12px; border-radius: 6px; letter-spacing: .1em; margin: 22px 14px 8px; }
.viewer[data-layout="ticket"] .vlist { padding: 0 14px; }
.viewer[data-layout="ticket"] .vitem { border-bottom: 1.5px dashed var(--t-line); }
.viewer[data-layout="ticket"] .vcover__name { letter-spacing: .04em; }
.viewer[data-layout="ticket"] .vitem__price { color: var(--t-accent); }

/* ---- ELEGANT (fine dining) ---- */
.viewer[data-layout="elegant"] .vcover { padding-top: 34px; }
.viewer[data-layout="elegant"] .vcover__name { font-weight: 600; letter-spacing: .01em; }
.viewer[data-layout="elegant"] .vcat { text-align: center; letter-spacing: .22em; margin: 28px 18px 10px; position: relative; }
.viewer[data-layout="elegant"] .vcat::after { content: ""; display: block; width: 40px; height: 1px; background: var(--t-accent); margin: 8px auto 0; }
.viewer[data-layout="elegant"] .vlist { padding: 0 18px; }
.viewer[data-layout="elegant"] .vitem { border-bottom: 1px solid var(--t-line); padding: 16px 0; }
.viewer[data-layout="elegant"] .vadd { border-color: var(--t-accent); }
.viewer[data-layout="elegant"] .vitem__name { font-weight: 600; font-size: 1.05rem; }

/* ---- EDITORIAL (heritage) ---- */
.viewer[data-layout="editorial"] .vcat { font-size: 1.5rem; text-transform: none; letter-spacing: 0; color: var(--t-text); border-bottom: 2px solid var(--t-accent); padding-bottom: 6px; margin: 26px 16px 8px; }
.viewer[data-layout="editorial"] .vitem__name { font-size: 1.06rem; }
.viewer[data-layout="editorial"] .vlist { padding: 0 8px; }

/* ---- MINIMAL ---- */
.viewer[data-layout="minimal"] .vcover { padding: 34px 20px 26px; }
.viewer[data-layout="minimal"] .vcat { letter-spacing: .18em; color: var(--t-muted); margin: 30px 18px 6px; }
.viewer[data-layout="minimal"] .vitem { border-bottom: 1px solid var(--t-line); padding: 15px 14px; }
.viewer[data-layout="minimal"] .vitem__desc { opacity: .85; }
.viewer[data-layout="minimal"] .vadd { background: transparent; }

/* ---- CLASSIC keeps app.css defaults ---- */

/* cart additions: table + UPI */
.cart__table{font-size:.84rem;font-weight:800;color:var(--t-text);margin-bottom:8px;font-family:var(--t-fd)}
.cart__upi{width:100%;margin-top:8px;border:1.5px solid var(--t-accent);background:transparent;color:var(--t-text);font-family:inherit;font-weight:800;padding:13px;border-radius:13px;font-size:1rem;cursor:pointer}
.cart__upi:hover{background:var(--t-surface2)}
.cart__upihint{font-size:.72rem;color:var(--t-muted);text-align:center;margin-top:6px}