/* Menu & Price List page (mn-*), 2026-10-31: the owner's square guest view in the hero, the PDF -> page strip -> Menu
   tab pipeline, the menu and price list cards with the customer app's tab bar, the page strip before and after an
   update, and the fit check. The tab bars and page strips follow the reading direction like the app does; only the
   arrows between the pipeline panels are turned for RTL, by hand. */

/* hero: the guest view is square, so its frame is too */
.bqr-feature .mn-hero-visual { width: 100%; max-width: 560px; justify-self: center; }
.bqr-feature .mn-hero-visual .geo-hero-stage { padding-block-end: 0; }
.bqr-feature .mn-hero-visual .geo-hero-frame img { aspect-ratio: 1 / 1; }
.bqr-feature .mn-hero-visual .geo-chip { top: 40px; }

/* the stand photo: the chip sits over the phones, not over the tent card's heading; the photo doesn't mirror */
/*rtl:ignore*/
.bqr-feature.mn-one-qr .geo-chip { top: auto; right: auto; bottom: 30px; left: -20px; }

/* a link that follows a finished sentence */
.bqr-feature .mn-more { display: inline-block; margin-inline-start: 4px; font-weight: 600; }

/* the customer app's tab bar: pills in a row, the open tab in the business's colour (bonusqrapp public/app/app.css) */
.bqr-feature .mn-tabbar { display: flex; gap: 2px; overflow: hidden; padding: 12px 12px 10px; background: #fff; white-space: nowrap; }
.bqr-feature .mn-tabbar span { flex: none; padding: 6px 12px; border-radius: 999px; color: #6a6b80; font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.bqr-feature .mn-tabbar .mn-tab-on { background: var(--mn-biz, #8c7dee); color: #fff; font-weight: 600; }

/* pipeline: three panels joined by arrows */
.bqr-feature.mn-pipe { padding: 104px 0; }
.bqr-feature .mn-pipe-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px; list-style: none; padding: 0; margin: 0; }
.bqr-feature .mn-pipe-step { position: relative; min-width: 0; }
.bqr-feature .mn-pipe-step + .mn-pipe-step::before { content: ""; position: absolute; z-index: 1; top: 142px; inset-inline-start: -50px; width: 36px; height: 36px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235944ad' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: 0 10px 24px -10px rgba(49,32,85,.5), 0 0 0 6px var(--feature-soft); }
/*rtl:ignore*/
[dir="rtl"] .bqr-feature .mn-pipe-step + .mn-pipe-step::before { transform: scaleX(-1); }
.bqr-feature .mn-pipe-art { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 12px; height: 320px; margin-block-end: 26px; overflow: hidden; padding: 24px; border-radius: 26px; background: #fff; box-shadow: 0 30px 60px -38px rgba(49,32,85,.6), 0 0 0 1px rgba(140,125,238,.12); }
.bqr-feature .mn-pipe-art > * { flex-shrink: 0; }
.bqr-feature .mn-pipe-step h3 { margin-bottom: 8px; font-size: 21px; }
.bqr-feature .mn-pipe-step p { margin: 0; color: var(--feature-muted); }
.bqr-feature .mn-pipe-step .mn-more { display: block; margin: 8px 0 0; }

/* panel 1: the PDF and the two tab names */
.bqr-feature .mn-pdf-file { display: flex; align-items: center; gap: 14px; margin-block-end: 8px; padding: 14px; border: 2px dashed #c9c0f2; border-radius: 18px; background: #faf8ff; }
.bqr-feature .mn-pdf-icon { position: relative; display: grid; flex: none; place-items: center; width: 50px; height: 60px; border-radius: 10px; background: #fff; box-shadow: 0 10px 20px -12px rgba(49,32,85,.5), inset 0 0 0 1px #e6e1f7; }
.bqr-feature .mn-pdf-icon svg { width: 28px; height: 28px; stroke: #b9aef3; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bqr-feature .mn-pdf-icon b { position: absolute; inset-inline-start: -7px; bottom: 7px; padding: 1px 6px; border-radius: 6px; background: #d2453a; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; }
.bqr-feature .mn-pdf-name { min-width: 0; overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.bqr-feature .mn-pdf-up { display: grid; flex: none; place-items: center; width: 34px; height: 34px; margin-inline-start: auto; border-radius: 50%; background: var(--feature-accent); }
.bqr-feature .mn-pdf-up svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bqr-feature .mn-pdf-label { color: var(--feature-muted); font-size: 13px; font-weight: 600; }
.bqr-feature .mn-pdf-opt { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1.5px solid #e6e1f7; border-radius: 14px; font-size: 14px; font-weight: 500; line-height: 1.35; }
.bqr-feature .mn-pdf-opt svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #cfc8ea; stroke: none; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bqr-feature .mn-pdf-opt--on { border-color: var(--feature-accent); background: #f3f0fe; font-weight: 600; }
.bqr-feature .mn-pdf-opt--on svg { background: var(--feature-accent); box-shadow: none; stroke: #fff; }

/* panel 2: the admin's page strip, the second page being dragged */
.bqr-feature .mn-strip { justify-content: flex-start; gap: 12px; background: linear-gradient(180deg, #fff 0%, #faf8ff 100%); }
.bqr-feature .mn-strip-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; margin-block: 6px 4px; }
.bqr-feature .mn-thumb { display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid #e4e4ec; border-radius: 8px; background: #fff; }
.bqr-feature .mn-thumb-bar { display: flex; align-items: center; gap: 3px; color: #86869c; font-size: 11px; font-weight: 600; line-height: 1; }
.bqr-feature .mn-thumb-bar svg { flex: none; width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bqr-feature .mn-thumb-bar svg:last-child { margin-inline-start: auto; stroke: #bd2f2b; }
.bqr-feature .mn-thumb img { display: block; width: 100%; height: auto; border-radius: 3px; }
.bqr-feature .mn-thumb--lift { border-color: #b9aef3; box-shadow: 0 16px 26px -14px rgba(49,32,85,.55); transform: translateY(-8px) rotate(-3deg); }
.bqr-feature .mn-strip-hint { color: var(--feature-muted); font-size: 12.5px; line-height: 1.45; }

/* panel 3: the guest's Menu tab */
.bqr-feature .mn-guest { --mn-biz: #b5651d; justify-content: flex-start; gap: 0; padding: 0; background: #f5f5f5; }
.bqr-feature .mn-guest::after { content: ""; position: absolute; inset: auto 0 0; height: 80px; background: linear-gradient(rgba(245,245,245,0), #f5f5f5); pointer-events: none; }
.bqr-feature .mn-guest-pages { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px 0; }
.bqr-feature .mn-guest-pages img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 8px rgba(37,35,55,.1); }
.bqr-feature .mn-zoom { position: absolute; z-index: 1; inset-inline-end: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding-block: 7px; padding-inline: 9px 13px; border-radius: 999px; background: #fff; color: var(--feature-accent); font-size: 13px; font-weight: 700; line-height: 1.3; box-shadow: 0 12px 24px -10px rgba(37,35,55,.4); }
.bqr-feature .mn-zoom svg { flex: none; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* menu or price list: two cards topped by the tab bar */
.bqr-feature.mn-kinds { padding: 104px 0; }
.bqr-feature .mn-kinds-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 1080px; margin: 0 auto; }
.bqr-feature .mn-kind { display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 40px 70px -44px rgba(49,32,85,.6), 0 0 0 1px rgba(140,125,238,.1); }
.bqr-feature .mn-kind-art { --mn-biz: #b5651d; position: relative; height: 280px; overflow: hidden; background: #f5f5f5; }
.bqr-feature .mn-kind--price .mn-kind-art { --mn-biz: #9b4f74; }
.bqr-feature .mn-kind-art::after { content: ""; position: absolute; inset: auto 0 0; height: 90px; background: linear-gradient(rgba(245,245,245,0), #f5f5f5); pointer-events: none; }
.bqr-feature .mn-kind-art .mn-tabbar { border-bottom: 1px solid #ececf1; }
.bqr-feature .mn-kind-page { display: block; width: 58%; margin: 18px auto 0; }
.bqr-feature .mn-kind-page img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 18px 30px -18px rgba(37,35,55,.45); }
.bqr-feature .mn-url { position: absolute; z-index: 1; inset-inline-start: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 7px; padding-block: 7px; padding-inline: 10px 14px; border-radius: 999px; background: #fff; color: var(--feature-ink); font-size: 13.5px; font-weight: 600; line-height: 1.3; box-shadow: 0 12px 24px -10px rgba(37,35,55,.4); }
.bqr-feature .mn-url svg { flex: none; width: 16px; height: 16px; stroke: var(--feature-accent); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bqr-feature .mn-kind-copy { flex: 1; padding: 28px 30px 30px; }
.bqr-feature .mn-kind-copy h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 21px; }
.bqr-feature .mn-kind-icon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--feature-accent); }
.bqr-feature .mn-kind-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bqr-feature .mn-kind-copy p { margin: 0; color: var(--feature-muted); }
.bqr-feature .mn-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 18px 0 0; }
.bqr-feature .mn-chips a:not(.btn) { display: inline-flex; padding: 7px 14px; border-radius: 999px; background: var(--feature-soft); font-size: 14.5px; font-weight: 600; line-height: 1.4; text-decoration: none; }
.bqr-feature .mn-chips a:not(.btn):hover { background: #e8e2fc; }
.bqr-feature .mn-kinds-note { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 820px; margin: 44px auto 0; font-size: 16.5px; font-weight: 500; line-height: 1.55; text-align: start; }
.bqr-feature .mn-kinds-note > svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--feature-accent); stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* update: the page strip now, after the new PDF and after saving */
.bqr-feature.mn-update { padding: 104px 0; }
.bqr-feature .mn-rows { position: relative; display: grid; padding: 8px 26px 26px; border-radius: 28px; background: #fff; box-shadow: 0 40px 80px -44px rgba(49,32,85,.55), 0 0 0 1px rgba(140,125,238,.14); }
.bqr-feature .mn-row { display: grid; gap: 12px; padding: 18px 0; border-bottom: 1px dashed #ddd6f7; }
.bqr-feature .mn-row-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; line-height: 1.35; }
.bqr-feature .mn-row-label svg { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: #ece8fd; stroke: var(--feature-accent); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bqr-feature .mn-row-note { margin-top: -6px; padding-inline-start: 32px; color: var(--feature-muted); font-size: 13.5px; line-height: 1.45; }
.bqr-feature .mn-row-pages { display: flex; flex-wrap: wrap; gap: 10px; padding-inline-start: 8px; }
.bqr-feature .mn-mini { position: relative; flex: none; width: 74px; padding: 3px; border: 1px solid #e4e4ec; border-radius: 7px; background: #fff; }
.bqr-feature .mn-mini img { display: block; width: 100%; height: auto; border-radius: 3px; }
.bqr-feature .mn-mini b { position: absolute; z-index: 1; inset-inline-start: -8px; top: -8px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--feature-ink); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1; }
.bqr-feature .mn-mini--old img { filter: grayscale(1); opacity: .35; }
.bqr-feature .mn-mini--old b { background: #a5a2b3; }
.bqr-feature .mn-mini--old i { position: absolute; inset: 0; display: grid; place-items: center; }
.bqr-feature .mn-mini--old i svg { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: #fde9e8; stroke: #bd2f2b; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bqr-feature .mn-mini--new { border-color: var(--feature-accent); box-shadow: 0 0 0 3px rgba(140,125,238,.25); }
.bqr-feature .mn-mini--new b { background: var(--feature-accent); }
.bqr-feature .mn-same { display: inline-flex; justify-self: start; align-items: center; gap: 10px; margin-top: 22px; padding-block: 9px; padding-inline: 9px 18px; border-radius: 999px; background: var(--feature-accent); color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.bqr-feature .mn-same svg { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: #fff; stroke: var(--feature-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* fit check: two panels of reasons, then three alternatives */
.bqr-feature .mn-fit-list { display: grid; list-style: none; padding: 0; margin: 0; }
.bqr-feature .mn-fit-list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid rgba(37,35,55,.1); font-size: 16.5px; font-weight: 600; line-height: 1.5; }
.bqr-feature .geo-vs-panel--geo .mn-fit-list li { border-color: rgba(255,255,255,.2); }
.bqr-feature .mn-fit-list li > svg { flex: none; width: 26px; height: 26px; margin-top: 1px; padding: 5px; border-radius: 50%; background: #fff; stroke: var(--feature-accent); fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.bqr-feature .mn-fit-list--no li > svg { background: #efeef3; stroke: #77748a; }
.bqr-feature .mn-alts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1080px; list-style: none; padding: 0; margin: 56px auto 0; }
.bqr-feature .mn-alts li { display: flex; gap: 14px; align-items: flex-start; padding: 22px; border-radius: 22px; background: #fff; box-shadow: 0 24px 44px -34px rgba(49,32,85,.5); }
.bqr-feature .mn-alt-icon { display: grid; flex: none; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #ece8fd; }
.bqr-feature .mn-alt-icon svg { width: 22px; height: 22px; stroke: var(--feature-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bqr-feature .mn-alts p { margin: 0; color: var(--feature-muted); font-size: 15px; line-height: 1.6; }
.bqr-feature .mn-alts .mn-more { display: block; margin: 6px 0 0; }

@media (max-width: 1199.98px) {
    .bqr-feature .mn-pipe-flow { gap: 52px; }
    .bqr-feature .mn-pipe-step + .mn-pipe-step::before { inset-inline-start: -44px; }
    .bqr-feature .mn-alts li { padding: 20px 18px; }
}
@media (max-width: 991.98px) {
    .bqr-feature.mn-pipe, .bqr-feature.mn-kinds, .bqr-feature.mn-update { padding: 72px 0; }
    .bqr-feature .mn-hero-visual { max-width: 520px; justify-self: start; }
    .bqr-feature .mn-pipe-flow { grid-template-columns: minmax(0, 1fr); gap: 76px; max-width: 460px; margin: 0 auto; }
    .bqr-feature .mn-pipe-step + .mn-pipe-step::before { top: -56px; inset-inline-start: 50%; margin-inline-start: -18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235944ad' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); }
    .bqr-feature .mn-alts { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
    /*rtl:ignore*/
    .bqr-feature.mn-one-qr .geo-chip { left: 16px; }
}
@media (max-width: 767.98px) {
    .bqr-feature .mn-kinds-grid { grid-template-columns: minmax(0, 1fr); max-width: 480px; }
}
@media (max-width: 575.98px) {
    .bqr-feature .mn-pipe-art { height: 300px; padding: 20px; }
    .bqr-feature .mn-guest { padding: 0; }
    .bqr-feature .mn-kind-art { height: 250px; }
    .bqr-feature .mn-kind-copy { padding: 24px 22px 26px; }
    .bqr-feature .mn-kinds-note { align-items: flex-start; font-size: 15.5px; }
    .bqr-feature .mn-rows { padding: 4px 18px 20px; }
    .bqr-feature .mn-row-pages { gap: 9px; }
    .bqr-feature .mn-mini { width: 58px; }
    .bqr-feature .mn-fit-list li { font-size: 15.5px; }
}