/* ============================================================
   TravelAppBuilder — B2C · live telefoon-mockups
   Overgenomen uit template/reisapp/vandaag-dashboard-mockups.html
   (finaal ontwerp 15 juli 2026) en gescopet onder .tabmock zodat
   de generieke klassen (.grid, .chip, .tab, .phone …) niet botsen
   met b2c.css. Schermkleuren zijn bewust hardcoded dark — ze
   matchen exact het olijf/dark-thema van de site.

   Schalen: het ontwerp is pixel-vast (telefoon 342×668 incl. kader).
   .tabmock { --s: .8 } schaalt de hele telefoon proportioneel.
   ============================================================ */

.tabmock {
  --s: 1;
  width: calc(342px * var(--s));
  height: calc(668px * var(--s));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
  text-align: left;
}
.tabmock .phone {
  transform: scale(var(--s));
  transform-origin: top left;
}

/* ══ Interactieve demo (.tabmock--app): alle schermen in één kader ══ */
.tabmock .screen[hidden] { display: none; }  /* .screen is flex — hidden expliciet afdwingen */
.tabmock--app .tabbar .tab,
.tabmock--app .w.tap,
.tabmock--app .backrow .bk,
.tabmock--app .scamban,
.tabmock--app [data-open],
.tabmock--app .agbar,
.tabmock--app .pday,
.tabmock--app .idea,
.tabmock--app .ideas-more { cursor: pointer; }
.tabmock--app .idea:hover { border-color: #a3b763; }
.tabmock--app .w.tap:hover, .tabmock--app .pday:hover { border-color: #a3b763; }
.tabmock--app .scamban:hover { border-color: #f87171; }
.tabmock--app .tabbar .tab:hover { color: #c9c9d2; }
.tabmock--app .tabbar .tab.on:hover { color: #a3b763; }

/* ══ Telefoon ══ — width 342 i.p.v. 322: b2c.css zet * op border-box,
   het origineel rekende content-box (322 + 2×10 padding). */
.tabmock .phone {
  width: 342px; flex-shrink: 0; background: #000; border-radius: 42px;
  padding: 10px; box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .5);
}
.tabmock .screen {
  position: relative; background: #101014; color: #f2f2f5; border-radius: 32px;
  height: 648px; display: flex; flex-direction: column; overflow: hidden;
  font-size: 13.5px; line-height: 1.45;
}
.tabmock .sbar { display: flex; justify-content: space-between; align-items: center;
        padding: 12px 22px 2px; font-size: 12px; font-weight: 700; }
.tabmock .sbar .r { letter-spacing: .06em; }
.tabmock .sbody { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 13px 14px;
         display: flex; flex-direction: column; gap: 9px;
         scrollbar-width: thin; scrollbar-color: #2e2e38 transparent; }
.tabmock .sbody::-webkit-scrollbar { width: 5px; }
.tabmock .sbody::-webkit-scrollbar-thumb { background: #2e2e38; border-radius: 3px; }
/* sbody is kolom-flex: horizontaal scrollende rijen (foto's, chips, biljetten)
   hebben min-hoogte 0 en worden anders platgedrukt zodra de inhoud niet past */
.tabmock .sbody > * { flex-shrink: 0; }

/* white-label-banner van het reisbureau, vast boven de tabbar */
.tabmock .agbar { display: block; background: #0b0b0e; border-top: 1px solid #26262e;
        padding: 8px 12px; text-align: center; font-size: 10.5px; color: #8a8a95;
        text-decoration: none; }
.tabmock .agbar b { color: #c9c9d2; font-weight: 800; }
.tabmock .agbar .lnk-ic { color: #a3b763; }
/* Handgetekende rode cirkel om de bureaubanner (zie $agbar in _mockups.php).
   ⚠️ De telefoon klipt wat buiten het scherm valt, dus de speling blijft klein;
   max-width:none omdat een generieke svg-regel de breedte anders terugklemt, en de
   breedte staat expliciet omdat een svg mét viewBox een vervangen element is. */
.tabmock .tm-omcirkeld { position: relative; display: inline-block; }
.tabmock .tm-cirkel { position: absolute; left: -17px; top: 50%; transform: translateY(-50%);
        width: calc(100% + 34px); height: calc(100% + 19px); max-width: none;
        color: #ff4d4f; pointer-events: none; }
/* De tabbalk scrollt horizontaal, net als in de echte app: sinds Alex een eigen tab
   heeft passen er meer tabs dan er in beeld staan (style.css `.tab { min-width: 86px }`
   + `.tabbar { overflow-x:auto }`). De laatste tab is dus bewust half zichtbaar. */
.tabmock .tabbar { display: flex; border-top: 1px solid #26262e; background: #15151b;
          padding: 7px 4px 12px; overflow-x: auto; scrollbar-width: none; }
.tabmock .tabbar::-webkit-scrollbar { display: none; }
.tabmock .tab { flex: 0 0 auto; min-width: 72px; text-align: center; color: #8a8a95; font-size: 10px; font-weight: 700; padding: 3px 1px; border-radius: 10px; }
.tabmock .tab .ic { display: block; font-size: 19px; margin-bottom: 1px; }
.tabmock .tab.on { color: #a3b763; background: rgba(255, 255, 255, .06); }   /* subtiel lichter pilletje (feedback Carl 23/7) */

/* ── moderne line-iconen (card-p41nu2r): inline SVG op currentColor ──
   svg's zonder width/height-attributen — hier expliciet maten geven. */
.tabmock .tab .ic svg { width: 19px; height: 19px; display: inline-block; }
.tabmock .w-lbl svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 1px; }
.tabmock .apphead h3 svg { width: 17px; height: 17px; vertical-align: -2px; color: #a3b763; }
.tabmock .apphead h3.greet svg { width: 14px; height: 14px; }
.tabmock .fx .rate svg { width: 17px; height: 17px; vertical-align: -3px; color: #a3b763; }
.tabmock .today-stay svg { width: 16px; height: 16px; flex-shrink: 0; color: #8a8a95; }
.tabmock .note-prev { margin-top: 5px; font-size: 12px; color: #c9c9d2; line-height: 1.5; }
/* Notities-tab: de opmaak uit het controlepaneel (kopjes/lijstjes/vet) integraal getoond. */
.tabmock .notes-body { font-size: 12px; line-height: 1.6; color: #c9c9d2; }
.tabmock .notes-body p { margin: 0 0 6px; }
.tabmock .notes-body p:last-child { margin-bottom: 0; }
.tabmock .notes-body b { color: #f2f2f5; }
.tabmock .notes-body ul, .tabmock .notes-body ol { margin: 0 0 6px; padding-left: 16px; }
.tabmock .notes-body h4 { font-size: 13px; color: #f2f2f5; margin: 9px 0 3px; }
.tabmock .notes-body > :first-child { margin-top: 0; }

/* app-koppen & subpagina's */
.tabmock .apphead { padding: 6px 3px 2px; }
.tabmock .apphead .hi { font-size: 11px; font-weight: 800; text-transform: uppercase;
               letter-spacing: .09em; color: #8a8a95; }
.tabmock .apphead h3 { font-size: 23px; line-height: 1.15; margin: 1px 0 2px; }
/* de begroeting op Vandaag is bewust klein en subtiel (paginatitels blijven groot) */
.tabmock .apphead h3.greet { font-size: 14px; font-weight: 700; color: #8a8a95; letter-spacing: 0; }
.tabmock .apphead h3.greet b { color: #f2f2f5; font-weight: 700; }
.tabmock .apphead .sub { font-size: 12px; color: #8a8a95; }
.tabmock .apphead .sub b { color: #a3b763; }
/* Dashboardkop nieuw ontwerp (feedback Carl 22/7): gecentreerd — kleine, niet-vette
   begroeting + dagteller in het groen, zoals de echte app. Gescoped op .dash-head zodat
   de builder-live-preview (.apphead zonder dash-head) ongewijzigd blijft. */
.tabmock .apphead.dash-head { text-align: center; padding: 8px 3px 4px; }
.tabmock .apphead.dash-head h3 { font-size: 13px; font-weight: 400; color: #8a8a95; letter-spacing: 0; margin: 0; }
.tabmock .apphead.dash-head h3 b { font-weight: 400; color: inherit; }
.tabmock .apphead.dash-head .daycount { font-size: 15px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: #a3b763; margin-top: 2px; }
.tabmock .apphead.dash-head .daycount[hidden] { display: none; }
/* De sub-regel + chips onder de dagteller bestaan alleen in de builder-live-preview
   ("dit weten we al van je reis"); in de app en de mockups staat er niets. */
.tabmock .apphead.dash-head .sub { margin-top: 3px; }
/* Gecentreerde paginakop (feedback Carl 23/7): titel in hoofdletters, plaats eronder — zoals de
   echte app (.page-head). Gescoped zodat dash-head + builder-begroeting ongemoeid blijven. */
.tabmock .apphead.page-head { text-align: center; padding: 9px 3px 4px; }
.tabmock .apphead.page-head h3 { text-transform: uppercase; letter-spacing: .05em; font-size: 16px; color: #f2f2f5; margin: 0 0 3px; }
.tabmock .apphead.page-head .sub b { text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
/* Foto-tegel voor de suggestiekaarten (echte foto's i.p.v. emoji-kleurvlakken) — zoals de app. */
.tabmock .reco .ph.pic { height: 76px; background-size: cover; background-position: center; }
.tabmock .backrow { display: flex; align-items: center; gap: 8px; padding: 6px 3px 0; }
.tabmock .backrow .bk { width: 30px; height: 30px; border-radius: 10px; background: #1a1a20;
               border: 1px solid #26262e; display: grid; place-items: center;
               color: #a3b763; font-size: 15px; font-weight: 800; }
.tabmock .backrow h3 { font-size: 19px; }
.tabmock .backrow .loc { margin-left: auto; font-size: 11px; color: #8a8a95; }

/* widgets */
.tabmock .w { background: #1a1a20; border: 1px solid #26262e; border-radius: 16px;
     padding: 11px 13px; }
.tabmock .w-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tabmock .w-lbl { font-size: 9.5px; font-weight: 800; text-transform: uppercase;
         letter-spacing: .09em; color: #8a8a95; }
.tabmock .chev { color: #55555f; font-size: 15px; font-weight: 700; }
.tabmock .w.tap { border-color: #2e2e38; }

.tabmock .today-title { font-size: 15.5px; font-weight: 800; margin: 4px 0 6px; }
.tabmock .today-item { display: flex; gap: 8px; font-size: 12.5px; color: #c9c9d2; padding: 2px 0; }
.tabmock .today-item .t { color: #a3b763; font-weight: 700; font-variant-numeric: tabular-nums;
                 min-width: 38px; }
.tabmock .today-stay { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding-top: 8px;
              border-top: 1px solid #26262e; font-size: 12px; color: #8a8a95; }
.tabmock .today-stay b { color: #f2f2f5; }

.tabmock .wx { display: flex; align-items: center; gap: 12px; }
.tabmock .wx .ico { font-size: 34px; }
.tabmock .wx .deg { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tabmock .wx .met { font-size: 11.5px; color: #8a8a95; line-height: 1.4; }
.tabmock .wx .met b { color: #c9c9d2; }

/* ── "Ideeën voor vandaag" — fotokaarten-carrousel (template style.css .ideas-*) ──
   Verving op 27/7/2026 de oude "Aanbevolen voor jou"-rij (.reco), die in de app niet
   meer bestaat. Maten = de app, geschaald naar het mockup-telefoontje. */
.tabmock .ideas-block { display: flex; flex-direction: column; gap: 4px; }
.tabmock .ideas-head { padding: 2px 3px; }
.tabmock .ideas-row { display: flex; gap: 8px; overflow-x: auto; margin: 2px -13px 0;
            padding: 0 13px 4px; scrollbar-width: none; }
.tabmock .ideas-row::-webkit-scrollbar { display: none; }
.tabmock .idea { flex: 0 0 auto; width: 126px; display: flex; flex-direction: column;
        background: #1a1a20; border: 1px solid #26262e; border-radius: 14px; overflow: hidden; }
.tabmock .idea .iph { position: relative; height: 92px; flex: 0 0 auto; display: grid;
        place-items: center; font-size: 28px; background-size: cover; background-position: center; }
.tabmock .idea .iph::after { content: ''; position: absolute; inset: auto 0 0 0; height: 28px;
        background: linear-gradient(transparent, rgba(0, 0, 0, .28)); }
.tabmock .idea .itx { padding: 7px 9px 9px; }
.tabmock .idea .itx b { display: block; font-size: 12px; line-height: 1.25; }
.tabmock .idea .itx span { display: block; margin-top: 2px; font-size: 10.5px; color: #8a8a95;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabmock .idea-badge { position: absolute; left: 6px; top: 6px; z-index: 1; font-size: 9px;
        font-weight: 700; letter-spacing: .02em; color: #fff; background: rgba(16, 16, 20, .72);
        border-radius: 999px; padding: 2px 7px; }
.tabmock .ideas-more { align-self: flex-start; margin: 0 3px; padding: 2px 0; color: #a3b763;
        font-size: 12px; font-weight: 700; }

.tabmock .reco-row { display: flex; gap: 8px; overflow-x: auto; margin: 4px -13px 0;
            padding: 0 13px 4px; scrollbar-width: none; }
.tabmock .reco-row::-webkit-scrollbar { display: none; }
.tabmock .reco { min-width: 124px; max-width: 124px; background: #1a1a20; border: 1px solid #26262e;
        border-radius: 14px; overflow: hidden; }
.tabmock .reco .ph { height: 66px; display: grid; place-items: center; font-size: 26px; }
.tabmock .ph-strand { background: linear-gradient(135deg, #14506e, #2b8aa5); }
.tabmock .ph-wijn { background: linear-gradient(135deg, #4e1a30, #7e2f47); }
.tabmock .ph-boot { background: linear-gradient(135deg, #1e3a52, #3a6d8c); }
.tabmock .reco .tx { padding: 7px 9px 9px; }
.tabmock .reco .tx b { display: block; font-size: 12px; line-height: 1.25; }
.tabmock .reco .tx span { font-size: 10.5px; color: #8a8a95; }

.tabmock .fx { display: flex; align-items: center; gap: 12px; }
.tabmock .fx .rate { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tabmock .fx .ex { font-size: 11.5px; color: #8a8a95; }
.tabmock .fx .ex b { color: #a3b763; font-variant-numeric: tabular-nums; }

.tabmock .lena-row { display: flex; gap: 10px; align-items: center; }
.tabmock .ava { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
       background: linear-gradient(135deg, #a3b763, #6d8040); color: #15170d;
       display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.tabmock img.ava { object-fit: cover; background: #26262e; }
.tabmock .lena-row .who { display: flex; flex-direction: column; min-width: 0; }
.tabmock .lena-row .who b { display: block; font-size: 13.5px; }
.tabmock .lena-row .who span { font-size: 11.5px; color: #8a8a95; }
.tabmock .lena-row .who-line b { display: inline; }
.tabmock .lena-row .who-line > span::before { content: " · "; color: #8a8a95; }
.tabmock .lena-row .who .gtease { display: block; margin-top: 2px; font-size: 12px; font-style: italic; color: #c9c9d2; line-height: 1.35; }
.tabmock .chip { display: inline-block; background: #22222b; border: 1px solid #2e2e38;
        border-radius: 999px; padding: 5px 11px; font-size: 11.5px; color: #c9c9d2;
        margin-top: 8px; }
.tabmock .chip.acc { border-color: rgba(163, 183, 99, .5); color: #a3b763; }

.tabmock .word { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.tabmock .word .nl { font-size: 14px; font-weight: 800; }
.tabmock .word .hu { color: #a3b763; font-weight: 700; }
.tabmock .word .fon { font-size: 11px; color: #8a8a95; }
.tabmock .play { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
        background: rgba(163, 183, 99, .15); color: #a3b763; display: grid;
        place-items: center; font-size: 11px; }

/* sectielabel los in de sbody (Komende uren / Komende dagen) */
.tabmock .slbl { font-size: 10px; font-weight: 800; text-transform: uppercase;
       letter-spacing: .09em; color: #c4c4ce; padding: 4px 3px 0; text-align: center; }

/* weerpagina */
.tabmock .wx-now { text-align: center; padding: 4px 0 2px; }
.tabmock .wx-now .big { font-size: 54px; font-weight: 800; line-height: 1;
               font-variant-numeric: tabular-nums; }
.tabmock .wx-now .ico { font-size: 40px; display: block; margin-bottom: 4px; }
.tabmock .wx-now .cond { color: #8a8a95; font-size: 13px; margin-top: 4px; }
.tabmock .hours { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px;
         scrollbar-width: none; }
.tabmock .hours::-webkit-scrollbar { display: none; }
.tabmock .hr { min-width: 56px; text-align: center; background: #1a1a20; border: 1px solid #26262e;
      border-radius: 13px; padding: 8px 4px; }
.tabmock .hr .h { font-size: 10.5px; color: #8a8a95; }
.tabmock .hr .i { font-size: 17px; display: block; margin: 3px 0; }
.tabmock .hr .d { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tabmock .hr .p { display: block; font-size: 10px; color: #7dd3fc; font-weight: 700;
        margin-top: 1px; min-height: 13px; font-variant-numeric: tabular-nums; }
/* dagkaarten (komende dagen) — eigen kaart per dag, zoals in de echte app */
.tabmock .dayc { display: flex; align-items: center; gap: 10px; background: #1a1a20;
        border: 1px solid #26262e; border-radius: 14px; padding: 10px 12px; }
.tabmock .dayc .wi { font-size: 20px; flex-shrink: 0; }
.tabmock .dayc .pl { flex: 1; font-weight: 700; font-size: 13px; min-width: 0; }
.tabmock .dayc .pl span { display: block; font-size: 10.5px; color: #8a8a95; font-weight: 400;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabmock .dayc .pp { color: #7dd3fc; font-size: 11.5px; font-weight: 700; min-width: 33px;
        text-align: right; font-variant-numeric: tabular-nums; }
.tabmock .dayc .mm { font-variant-numeric: tabular-nums; color: #8a8a95; font-size: 12.5px;
        min-width: 64px; text-align: right; }
.tabmock .dayc .mm b { color: #f2f2f5; font-size: 13.5px; }
.tabmock .day-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px;
           border-bottom: 1px solid #1e1e26; font-size: 13px; }
.tabmock .day-row:last-child { border-bottom: none; }
.tabmock .day-row .dd { min-width: 46px; color: #8a8a95; font-size: 11.5px; font-weight: 700; }
.tabmock .day-row .pl { flex: 1; font-weight: 700; }
.tabmock .day-row .pl span { display: block; font-size: 10.5px; color: #8a8a95; font-weight: 400; }
.tabmock .day-row .wi { font-size: 17px; }
.tabmock .day-row .mm { font-variant-numeric: tabular-nums; color: #c9c9d2; font-size: 12px;
               min-width: 64px; text-align: right; }
.tabmock .day-row .mm b { color: #f2f2f5; }
.tabmock .wx-note { font-size: 11px; color: #8a8a95; text-align: center; padding: 4px 10px 0; }

/* valutapagina */
.tabmock .fx-disp { background: #1a1a20; border: 1px solid #26262e; border-radius: 18px;
           padding: 11px 16px 9px; text-align: right; }
.tabmock .fx-disp .in { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tabmock .fx-disp .out { font-size: 19px; color: #a3b763; font-weight: 800;
                font-variant-numeric: tabular-nums; margin-top: 2px; }
.tabmock .fx-disp .kr { font-size: 10.5px; color: #8a8a95; margin-top: 7px; text-align: left; }
.tabmock .bills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tabmock .bills::-webkit-scrollbar { display: none; }
.tabmock .bill { flex-shrink: 0; background: rgba(163, 183, 99, .13); color: #a3b763;
        border: 1px solid rgba(163, 183, 99, .35); border-radius: 999px;
        padding: 5px 12px; font-size: 11.5px; font-weight: 800;
        font-variant-numeric: tabular-nums; }
.tabmock .paycheck { display: flex; align-items: center; gap: 8px;
            background: rgba(163, 183, 99, .10); border: 1px solid rgba(163, 183, 99, .4);
            border-radius: 14px; padding: 9px 12px; font-size: 12px; }
.tabmock .paycheck b { font-variant-numeric: tabular-nums; }
.tabmock .paycheck .back { margin-left: auto; }
.tabmock .paycheck .back b { color: #4ade80; font-size: 14px; }
.tabmock .pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tabmock .key { background: #1a1a20; border: 1px solid #26262e; border-radius: 14px;
       text-align: center; padding: 8px 0; font-size: 17px; font-weight: 800;
       font-variant-numeric: tabular-nums; }
.tabmock .key.fn { color: #a3b763; font-size: 15px; }

/* ── Alex-tab (template style.css .nb-*) ────────────────────────────────────
   Sinds 27/7/2026 is Alex een hoofdtab met een eigen paginakop — géén subpagina
   met ‹-terugknop en géén "Meteen voorlezen"-schakelaar meer (die instelling is
   naar de Instellingen-tab verhuisd). Markup = nearby.js, maten geschaald. */
.tabmock .gps { display: inline-flex; align-items: center; gap: 5px; }
.tabmock .nb-cta { display: block; width: 100%; background: #a3b763; color: #101014;
        border-radius: 12px; padding: 12px; text-align: center; font-size: 13.5px; font-weight: 700; }
.tabmock .nb-cta svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }
.tabmock .nb-cta2 { display: block; width: 100%; border: 1px solid #2e2e38; color: #f2f2f5;
        border-radius: 10px; padding: 10px; text-align: center; font-size: 12.5px; font-weight: 700; }
.tabmock .nb-cta2 svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; color: #8a8a95; }
.tabmock .nb-card { background: #1a1a20; border-radius: 14px; padding: 12px 13px; }
.tabmock .nb-eyebrow { font-size: 9.5px; letter-spacing: .07em; color: #a3b763; margin-bottom: 4px; }
.tabmock .nb-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; line-height: 1.25; }
.tabmock .nb-story { font-size: 12.5px; line-height: 1.55; color: #c9c9d2; }
.tabmock .nb-actions { display: flex; gap: 7px; margin-top: 11px; }
.tabmock .nb-play { flex: 1; background: #a3b763; color: #101014; border-radius: 10px;
        padding: 9px; text-align: center; font-size: 12px; font-weight: 700; }
.tabmock .nb-play svg { width: 14px; height: 14px; vertical-align: -3px; margin-right: 3px; }
.tabmock .nb-map { background: #22222b; border-radius: 10px; padding: 9px 12px; font-size: 14px;
        display: flex; align-items: center; }
.tabmock .nb-lbl { font-size: 9.5px; letter-spacing: .07em; color: #8a8a95; padding: 4px 2px 0; }
.tabmock .nb-top { display: flex; gap: 9px; align-items: flex-start; background: #1a1a20;
        border-radius: 12px; padding: 9px 11px; }
.tabmock .nb-rank { flex: none; width: 19px; height: 19px; border-radius: 50%; background: #22222b;
        color: #8a8a95; font-size: 10.5px; font-weight: 700; display: flex; align-items: center;
        justify-content: center; margin-top: 1px; }
.tabmock .nb-top-must .nb-rank { background: #a3b763; color: #101014; }
.tabmock .nb-top b { display: block; font-size: 12.5px; font-weight: 600; }
.tabmock .nb-top span:not(.nb-rank) { display: block; font-size: 10.5px; color: #8a8a95;
        margin-top: 2px; line-height: 1.45; }
.tabmock .nb-top em { color: #a3b763; font-style: normal; font-weight: 700; }
.tabmock .nb-ev { background: #1a1a20; border-radius: 12px; padding: 10px 12px; }
.tabmock .nb-ev-row { font-size: 11.5px; line-height: 1.5; padding: 2px 0; }
.tabmock .nb-ev-row span { color: #8a8a95; margin-right: 5px; }
.tabmock .nb-ev-row em { color: #8a8a95; font-style: normal; font-size: 10.5px; }
.tabmock .nb-ev-at { font-size: 9.5px; color: #8a8a95; margin-top: 6px; }
.tabmock .bub { max-width: 86%; border-radius: 16px; padding: 9px 12px; font-size: 12.5px; }
.tabmock .bub.lena { background: #22222b; border-top-left-radius: 5px; }
.tabmock .bub.me { background: #a3b763; color: #15170d; font-weight: 600; margin-left: auto;
          border-top-right-radius: 5px; }
.tabmock .typing { display: inline-flex; gap: 4px; background: #22222b; border-radius: 16px;
          border-top-left-radius: 5px; padding: 12px 14px; }
.tabmock .typing i { width: 6px; height: 6px; border-radius: 50%; background: #8a8a95;
            animation: tabmockTick 1.2s infinite; }
.tabmock .typing i:nth-child(2) { animation-delay: .2s; }
.tabmock .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes tabmockTick { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tabmock .typing i { animation: none; } }
.tabmock .askrow { margin-top: auto; display: flex; gap: 8px; align-items: center; }
.tabmock .askrow .inp { flex: 1; background: #1a1a20; border: 1px solid #2e2e38;
               border-radius: 999px; padding: 10px 15px; color: #8a8a95; font-size: 12.5px; }
.tabmock .askrow .mic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
               background: #a3b763; color: #15170d; display: grid; place-items: center;
               font-size: 17px; }

/* woordjes */
.tabmock .cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tabmock .cats::-webkit-scrollbar { display: none; }
.tabmock .cat { flex-shrink: 0; background: #22222b; border: 1px solid #34343f;
       border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 700;
       color: #c9c9d2; }
.tabmock .cat.on { background: rgba(163, 183, 99, .18); border-color: #a3b763;
          color: #c8dc8a; }
.tabmock .ph-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px;
          border-bottom: 1px solid #1e1e26; }
.tabmock .ph-row:last-child { border-bottom: none; }
.tabmock .ph-row .txt b { display: block; font-size: 13.5px; }
.tabmock .ph-row .txt .hu { color: #a3b763; font-weight: 700; font-size: 13px; }
.tabmock .ph-row .txt .fon { font-size: 11px; color: #8a8a95; }

/* planning */
.tabmock .pday { display: flex; gap: 10px; background: #1a1a20; border: 1px solid #26262e;
        border-radius: 16px; padding: 11px 12px; }
.tabmock .pday.now { border-color: rgba(163, 183, 99, .55); }
.tabmock .pbadge { flex-shrink: 0; width: 44px; height: 50px; border-radius: 12px;
          background: rgba(163, 183, 99, .13); display: flex; flex-direction: column;
          align-items: center; justify-content: center; }
.tabmock .pbadge b { font-size: 18px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tabmock .pbadge small { font-size: 9px; font-weight: 800; letter-spacing: .08em;
                text-transform: uppercase; color: #a3b763; }
.tabmock .pday .bd { min-width: 0; flex: 1; }
/* Zelfde regel als de app (card-153184757): lange namen mogen over twee regels. */
.tabmock .pday .bd b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.3; }
.tabmock .pday .bd .st { font-size: 11.5px; color: #8a8a95; }
.tabmock .pday .bd .now-tag { display: inline-block; font-size: 9px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: #a3b763;
  background: rgba(163, 183, 99, .13); border-radius: 999px; padding: 2px 8px;
  margin-bottom: 3px; }
.tabmock .pday .chev { align-self: center; }

/* hotelpagina (via de weekplanning): fotostrip + website + suggesties */
.tabmock .hphotos { display: flex; gap: 8px; overflow-x: auto; margin: 0 -13px;
          padding: 0 13px 4px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.tabmock .hphotos::-webkit-scrollbar { display: none; }
.tabmock .hphoto { min-width: 205px; width: 205px; height: 132px; object-fit: cover;
         border-radius: 14px; border: 1px solid #26262e; scroll-snap-align: start; }
.tabmock .hstay { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px;
        line-height: 1.5; }
.tabmock .hstay b { font-weight: 700; }
.tabmock .hstay .lk { color: #a3b763; font-weight: 700; }
.tabmock .hstay .d { color: #8a8a95; }
.tabmock .hstay svg { width: 16px; height: 16px; flex-shrink: 0; color: #8a8a95; margin-top: 2px; }
.tabmock .sug2 { background: #1a1a20; border: 1px solid #26262e; border-radius: 16px;
        padding: 11px 13px; }
.tabmock .sug2 .s2top { display: flex; justify-content: space-between; gap: 8px;
               align-items: flex-start; }
.tabmock .sug2 .s2top b { font-size: 13.5px; line-height: 1.3; }
.tabmock .s2badge { flex-shrink: 0; background: rgba(163, 183, 99, .13); color: #a3b763;
          border-radius: 999px; padding: 3px 9px; font-size: 10.5px; font-weight: 700;
          white-space: nowrap; }
.tabmock .sug2 p { font-size: 12px; color: #c9c9d2; margin: 5px 0 6px; line-height: 1.5; }
.tabmock .s2link { color: #7dd3fc; font-size: 12px; font-weight: 700; }
/* Kaart-icoontje rechtsboven → in de echte app een Google Maps-routelink
   (card-969917474). Hier decoratief; maten geschaald naar de mockup. */
.tabmock .sug2 { position: relative; }
.tabmock .sug2 .s2maps { position: absolute; top: 6px; right: 8px; display: inline-flex;
          align-items: center; justify-content: center; color: #6b6b78; }
.tabmock .sug2 .s2maps svg { width: 14px; height: 14px; }
.tabmock .sug2 .s2top { padding-right: 20px; }

/* dagsuggesties */
.tabmock .sug { display: flex; align-items: center; gap: 10px; background: #1a1a20;
       border: 1px solid #26262e; border-radius: 14px; padding: 9px 11px; }
.tabmock .sug .ph { width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
           display: grid; place-items: center; font-size: 20px; }
.tabmock .sug .tx b { display: block; font-size: 12.5px; line-height: 1.3; }
.tabmock .sug .tx span { font-size: 11px; color: #8a8a95; }
.tabmock .ph-wandel { background: linear-gradient(135deg, #2c4a24, #4c7a3a); }
.tabmock .ph-bron { background: linear-gradient(135deg, #1c4f5c, #2f7d8c); }
.tabmock .sug.open { flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 10px;
            border-color: rgba(163, 183, 99, .5); }
.tabmock .sug.open .banner { height: 66px; border-radius: 13px 13px 0 0; display: grid;
                    place-items: center; font-size: 28px; }
.tabmock .sug.open .tx { padding: 8px 12px 0; }
.tabmock .lnks { display: flex; gap: 6px; padding: 8px 12px 0; }
.tabmock .lnk { background: rgba(163, 183, 99, .13); border: 1px solid rgba(163, 183, 99, .4);
       color: #a3b763; border-radius: 999px; padding: 5px 11px; font-size: 11px;
       font-weight: 700; }

/* info */
.tabmock .info-card .ln { font-size: 12.5px; color: #c9c9d2; padding: 2px 0; }
.tabmock .info-card .ln b { color: #f2f2f5; }
.tabmock .info-card .warn { color: #f87171; font-weight: 700; }
/* scam-waarschuwingsbanner op Info → opent het scams-scherm */
.tabmock .scamban { display: flex; align-items: center; gap: 10px;
        background: rgba(248, 113, 113, .10); border: 1px solid rgba(248, 113, 113, .45);
        border-radius: 16px; padding: 11px 13px; }
.tabmock .scamban .ic { font-size: 21px; flex-shrink: 0; }
.tabmock .scamban .tx { flex: 1; min-width: 0; }
.tabmock .scamban .tx b { display: block; font-size: 13.5px; color: #f87171; }
.tabmock .scamban .tx span { font-size: 11.5px; color: #c9c9d2; }

/* reiskosten (kostenverdeler — in elke reis-app inbegrepen) */
.tabmock .exp-total { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums;
          margin-top: 3px; }
.tabmock .exp-row { display: flex; align-items: center; gap: 10px; padding: 8px 0;
        border-bottom: 1px solid #1e1e26; }
.tabmock .exp-row:last-child { border-bottom: none; padding-bottom: 0; }
.tabmock .exp-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.tabmock .exp-tx { flex: 1; min-width: 0; }
.tabmock .exp-tx b { display: block; font-size: 13px; line-height: 1.3; }
.tabmock .exp-tx span { font-size: 10.5px; color: #8a8a95; }
.tabmock .exp-amt { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums;
        flex-shrink: 0; }
.tabmock .exp-bal { display: flex; justify-content: space-between; align-items: center;
        gap: 8px; padding: 6px 0; border-bottom: 1px solid #1e1e26; font-size: 13px; }
.tabmock .exp-bal:last-child { border-bottom: none; padding-bottom: 0; }
.tabmock .exp-bal .exp-name { font-weight: 700; }
.tabmock .exp-get { color: #4ade80; font-weight: 700; font-variant-numeric: tabular-nums; }
.tabmock .exp-pay { color: #f87171; font-weight: 700; font-variant-numeric: tabular-nums; }
.tabmock .exp-even { color: #8a8a95; font-size: 12px; }
.tabmock .exp-settle { display: flex; align-items: center; gap: 8px; padding: 7px 0;
           border-bottom: 1px solid #1e1e26; }
.tabmock .exp-settle:last-child { border-bottom: none; padding-bottom: 0; }
.tabmock .exp-stx { flex: 1; min-width: 0; font-size: 12.5px; color: #c9c9d2; }
.tabmock .exp-stx b { color: #f2f2f5; font-weight: 700; }
.tabmock .exp-pill { flex-shrink: 0; background: rgba(74, 222, 128, .13); color: #4ade80;
         border: 1px solid rgba(74, 222, 128, .4); border-radius: 999px;
         padding: 4px 10px; font-size: 10.5px; font-weight: 800; }

/* ── Alex: introductiescherm, plekken in de buurt, foto-antwoord (27/7/2026) ──
   Zelfde stijl als style.css in template/reisapp, pixelvast geschaald naar 342×668. */
.tabmock .ax-hi { text-align: center; padding: 4px 6px 2px; }
.tabmock .ax-ava { width: 62px; height: 62px; border-radius: 50%; object-fit: cover;
         border: 2px solid #a3b763; margin-bottom: 8px; }
.tabmock .ax-hi b { display: block; font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.tabmock .ax-hi p { font-size: 12.5px; line-height: 1.55; color: #c9c9d2; }
.tabmock .ax-priv .w-lbl { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.tabmock .ax-priv .w-lbl svg { width: 15px; height: 15px; color: #a3b763; flex-shrink: 0; }
.tabmock .ax-priv .ln { font-size: 11.5px; line-height: 1.5; color: #c9c9d2; padding: 2px 0; }

/* "Wat is hier bijzonder?" — de plekken eronder, op afstand gesorteerd */
.tabmock .nb-near { display: flex; gap: 9px; align-items: center; background: #1a1a20;
         border-radius: 12px; padding: 9px 11px; }
.tabmock .nb-dist { flex-shrink: 0; align-self: flex-start; margin-top: 1px;
         background: rgba(163, 183, 99, .14); color: #a3b763; border-radius: 999px;
         padding: 3px 8px; font-size: 10px; font-weight: 800; }
.tabmock .nb-near > div { flex: 1; min-width: 0; }
.tabmock .nb-near b { display: block; font-size: 12.5px; font-weight: 600; }
.tabmock .nb-near span:not(.nb-dist):not(.chev) { display: block; font-size: 10.5px;
         color: #8a8a95; line-height: 1.4; margin-top: 1px; }
.tabmock .backrow .loc svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }

/* Foto-antwoord: de foto die de reiziger net nam */
.tabmock .fo-shot { display: block; width: 100%; height: 150px; object-fit: cover;
         border-radius: 14px; }
/* ⚠️ display:block hierboven wint van [hidden], waardoor de foto in de lege staat
   tóch zichtbaar was. Zelfde valkuil als .screen[hidden] bovenaan dit bestand. */
.tabmock .fo-shot[hidden] { display: none; }

/* ── Delen: deelcode, knoppen en tegoed ─────────────────────────────────── */
.tabmock .sh-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
         font-size: 17px; font-weight: 800; letter-spacing: .06em; color: #a3b763;
         background: #101014; border: 1px dashed #3a3a46; border-radius: 10px;
         padding: 10px; text-align: center; margin: 6px 0 9px; }
.tabmock .sh-btns { display: flex; gap: 7px; }
.tabmock .sh-btn { flex: 1; background: #22222b; border-radius: 10px; padding: 9px 6px;
         text-align: center; font-size: 11.5px; font-weight: 700; }
.tabmock .sh-btn svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.tabmock .sh-bal { font-size: 22px; font-weight: 800; color: #4ade80; margin: 3px 0 8px; }
.tabmock .sh-bal span { font-size: 11px; font-weight: 700; color: #8a8a95;
         text-transform: uppercase; letter-spacing: .05em; margin-left: 4px; }
.tabmock .sh-row { display: flex; align-items: center; gap: 8px;
         border-top: 1px solid #26262e; padding: 8px 0 0; margin-top: 8px; }
.tabmock .sh-who { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; }
.tabmock .sh-pill { flex-shrink: 0; background: #22222b; color: #8a8a95;
         border-radius: 999px; padding: 4px 10px; font-size: 10.5px; font-weight: 800; }
.tabmock .sh-pill.ok { background: rgba(74, 222, 128, .13); color: #4ade80;
         border: 1px solid rgba(74, 222, 128, .4); }
.tabmock .sh-pill svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }

/* ── Instellingen: schakelrijen en verhaalvoorkeuren ────────────────────── */
.tabmock .set-row { display: flex; align-items: center; gap: 8px;
         border-top: 1px solid #26262e; padding: 9px 0; }
.tabmock .set-row:first-child { border-top: none; padding-top: 2px; }
.tabmock .set-row:last-child { padding-bottom: 2px; }
.tabmock .set-row > span:first-child { flex: 1; min-width: 0; font-size: 13px; font-weight: 600;
         display: flex; align-items: center; gap: 6px; }
.tabmock .set-row > span:first-child svg { width: 15px; height: 15px; color: #8a8a95; flex-shrink: 0; }
/* schakelaar: uit = grijs, aan = olijf met het bolletje rechts */
.tabmock .tgl { flex-shrink: 0; position: relative; width: 38px; height: 22px;
         border-radius: 999px; background: #34343f; }
.tabmock .tgl::after { content: ""; position: absolute; top: 3px; left: 3px;
         width: 16px; height: 16px; border-radius: 50%; background: #8a8a95; }
.tabmock .tgl.on { background: #a3b763; }
.tabmock .tgl.on::after { left: 19px; background: #101014; }
/* de acht onderwerpen mogen afbreken i.p.v. horizontaal scrollen */
.tabmock .set-topics { flex-wrap: wrap; overflow: visible; row-gap: 6px; }

/* QR op de Delen-tab (27/7/2026). Bewust op een WITTE tegel: een omgekeerde
   QR (licht op donker) wordt door lang niet elke scanner herkend. */
.tabmock .sh-qr { display: flex; justify-content: center; margin: 8px 0 10px; }
.tabmock .sh-qr img { width: 126px; height: 126px; display: block;
         background: #fff; border-radius: 12px; padding: 7px; }
/* ⚠️ Voetnoot-iconen kregen geen maat mee en werden paginabreed getekend. */
.tabmock .wx-note svg { width: 13px; height: 13px; vertical-align: -2px; }
/* aangeklikt biljet op de werkende valutarekenaar */
.tabmock .bill.on { background: #a3b763; color: #101014; border-color: #a3b763; }

/* ⚠️ Vangnet voor ALLE tmIcon()-iconen. De echte app heeft een globale
   .svgi-regel in style.css; hier ontbrak die, waardoor een icoon zonder eigen
   maatregel paginabreed werd getekend (dat gebeurde met het schild op het
   foto-scherm). Elementselector, dus elke specifiekere regel hierboven wint. */
.tabmock svg { width: 1.05em; height: 1.05em; vertical-align: -.15em; flex-shrink: 0; }
/* vervoermiddel in de planningrijen en op het dagblok */
.tabmock .pday .bd .st svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
.tabmock .today-title svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; color: #a3b763; }

/* Fotoherkenning: de lege staat — een camera op een donker vlak, precies waar
   straks de foto komt. Zelfde hoogte als .fo-shot zodat er niets verspringt. */
/* De lege staat vult de hele hoogte, zodat de camera midden op het scherm staat
   (feedback Carl 27/7). flex-grow overrulet de flex-shrink:0 op .sbody > *. */
.tabmock .fo-cam { display: flex; flex-direction: column; align-items: center; justify-content: center;
         gap: 7px; width: 100%; flex: 1 0 auto; min-height: 150px; border-radius: 14px;
         background: #101014; border: 1px dashed #3a3a46; color: #8a8a95;
         font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.tabmock .fo-cam[hidden] { display: none; }   /* display:flex wint anders van [hidden] */
.tabmock .fo-cam svg { width: 30px; height: 30px; }
.tabmock--app .fo-cam:hover { border-color: #a3b763; color: #f2f2f5; }

/* Lena-avatar in de vignetten van /hoe-het-werkt/: dezelfde illustratie als in de
   echte builder (lena.svg), met het online-stipje. */
.tabmock .lena-ava { position: relative; background: none; }
.tabmock .lena-ava img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.tabmock .lena-ava i { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
       border-radius: 50%; background: #4ade80; border: 2px solid #1a1a20; }
/* keuzechips mogen hier afbreken i.p.v. horizontaal scrollen */
.tabmock .cats.catwrap { flex-wrap: wrap; overflow: visible; row-gap: 6px; }