/* Resseler app shell — shared by every /jumlo page (loaded from header.php): flat page, edge-to-edge tab bar, 56px help button,
   16px side margins, plus the Dalabyada (orders) list in native-app style. Scoped to body[class*="jumlo-"] so no other screen is touched. */
body[class*="jumlo-"]{ background:var(--bg,#f2f3f7); }
body[class*="jumlo-"] .mm-cfab{ right:16px; bottom:calc(var(--safe-bottom,0px) + 72px); }
body[class*="jumlo-"] .mm-cfab__btn{ width:56px; height:56px; box-shadow:0 4px 14px rgba(0,0,0,.28); }
html.jumlo-app .mm-cfab, html.jumlo-app .contact-fab{ bottom:calc(var(--safe-bottom,0px) + 72px) !important; }
body[class*="jumlo-"] .mm-pwa{ left:16px !important; bottom:calc(var(--safe-bottom,0px) + 72px) !important; height:44px; }
html body .jva-bar{ left:0; right:0; bottom:0; max-width:none; margin:0; padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); border-radius:0; gap:0; animation:none;
  background:var(--surface,#fff); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; border-top:.5px solid rgba(120,120,140,.32); }
html body .jva-bar .jva-ind{ display:none; }
html body .jva-bar a{ min-height:48px; border-radius:0; gap:2px; font-size:10px; font-weight:600; letter-spacing:0; color:#8a8fa0; }
html body .jva-bar a.on{ color:var(--mm-primary,var(--jv-a)); }
html body .jva-bar a.on svg{ transform:none; }
html body .jva-bar a svg{ width:24px; height:24px; }
html body .jva-bar a.lock::after{ right:calc(50% - 20px); top:2px; }
html.jumlo-app main.page{ padding-bottom:calc(var(--safe-bottom,0px) + 72px); }
body[class*="jumlo-"] .tabbar{ left:0 !important; right:0 !important; bottom:0 !important; width:100% !important; max-width:none !important; margin:0 !important; border-radius:0 !important; border:0 !important; border-top:.5px solid rgba(120,120,140,.32) !important;
  box-shadow:none !important; background:var(--surface,#fff) !important; animation:none !important; padding-bottom:env(safe-area-inset-bottom, 0px); }
body[class*="jumlo-"] .tabbar::after{ display:none !important; }
body[class*="jumlo-"] .tabbar a, body[class*="jumlo-"] .tabbar a:not(.tabbar-quicksend){ animation:none !important; font-size:10px; font-weight:600; letter-spacing:0; color:#8a8fa0; }
body[class*="jumlo-"] .tabbar a.active{ color:var(--mm-primary,var(--jv-a)); }
body[class*="jumlo-"] .tabbar a.active .ico{ background:none !important; box-shadow:none !important; animation:none !important; color:var(--mm-primary,var(--jv-a)) !important; }
body[class*="jumlo-"] .tabbar a.active .ico svg{ stroke:currentColor !important; }
body[class*="jumlo-"] .tabbar a.active .ico::after, body[class*="jumlo-"] .tabbar a.active::after{ display:none !important; }
body[class*="jumlo-"] .tabbar a.locked::after{ top:3px; right:calc(50% - 20px); }

/* ── Dalabyada (orders) ── */
body.jumlo-orders-page .mm-phero{ display:none; }
body.jumlo-orders-page .page{ padding:4px 0 calc(88px + env(safe-area-inset-bottom,0px)); }
body.jumlo-orders-page .container{ padding:0 16px; }
body.jumlo-orders-page .orders::before{ content:'Dalabyada'; display:block; margin:12px 0 14px; font-size:28px; line-height:34px; font-weight:800; letter-spacing:-.6px; color:var(--text,#111827); }
body.jumlo-orders-page .orders-tabs{ gap:0; padding:2px; margin:0 0 16px; border:0; border-radius:10px; background:rgba(120,120,140,.16); }
body.jumlo-orders-page .orders-tab{ padding:0 4px; min-height:32px; display:flex; align-items:center; justify-content:center; gap:5px; border-radius:8px; font-size:13px; font-weight:600; color:var(--text,#111827); }
body.jumlo-orders-page .orders-tab.active{ background:var(--surface,#fff); color:var(--text,#111827); box-shadow:0 1px 3px rgba(0,0,0,.18); }
body.jumlo-orders-page .orders-tab .tab-count{ display:inline; margin:0; font-size:12px; font-weight:600; opacity:.55; }
body.jumlo-orders-page .sec-title{ margin:0 2px 8px; font-size:12px; font-weight:600; letter-spacing:.6px; }
body.jumlo-orders-page .order-list{ display:grid; gap:12px; }
body.jumlo-orders-page .order-card{ margin:0; border:0; border-radius:14px; background:var(--surface,#fff); box-shadow:0 1px 3px rgba(15,23,42,.10); animation:none; }
body.jumlo-orders-page .order-card::before{ display:none; }
body.jumlo-orders-page .order-card-summary{ padding:12px 10px 12px 14px; gap:8px; }
body.jumlo-orders-page .order-card-summary .click-area{ gap:12px; }
body.jumlo-orders-page .order-card-summary .prov-logo-wrap{ width:44px; height:44px; border-radius:11px; box-shadow:0 0 0 1px rgba(15,23,42,.08); }
body.jumlo-orders-page .order-card-summary .pkg-plan{ font-size:15px; line-height:20px; font-weight:600; color:var(--text,#111827); }
body.jumlo-orders-page .order-card-summary .recipient-phone{ font-size:14px; font-weight:500; color:var(--muted,#6b7280); font-family:inherit; letter-spacing:.2px; }
body.jumlo-orders-page .order-card-summary .err-msg{ font-size:12px; font-weight:600; }
body.jumlo-orders-page .order-card-summary .date-row{ font-size:12px; }
body.jumlo-orders-page .order-card-summary .amount-row{ font-size:17px; font-weight:700; color:var(--text,#111827); }
body.jumlo-orders-page .order-menu-btn{ width:32px; height:32px; border:0; background:transparent; font-size:20px; }
body.jumlo-orders-page .order-card-detail-inner{ background:var(--surface,#fff); border-top:.5px solid rgba(120,120,140,.3); }
body.jumlo-orders-page .order-card-detail-inner .detail-item{ border:0; background:var(--surface-2,#f3f4f7); border-radius:10px; }
body.jumlo-orders-page .order-card-detail-inner .detail-btn{ border-radius:12px; min-height:48px; }
body.jumlo-orders-page .order-card-summary .pkg-plan{ font-size:14px; } body.jumlo-orders-page .order-card-summary .amount-row{ font-size:16px; }

/* ── Suuqa (market) ── */
body .jvm .jvs-hero{ padding:4px 0 0; border-radius:0; background:none; box-shadow:none; color:var(--text,#111827); animation:none; overflow:visible; }
body .jvm .jvs-hero::before, body .jvm .jvs-hero::after, body .jvm .jvs-sheen, body .jvm .jvs-orb, body .jvm .jvs-logo, body .jvm .jvs-top{ display:none; }
body .jvm .jvs-brand{ padding:0; gap:0; }
body .jvm .jvs-hi{ font-size:28px; line-height:34px; font-weight:800; letter-spacing:-.6px; color:var(--text,#111827); animation:none; text-shadow:none; }
body .jvm .jvm-sub{ display:block; margin:2px 0 0; font-size:14px; line-height:20px; color:var(--muted,#6b7280); animation:none; }
body .jvm .jvm-card{ border-radius:14px; background:var(--surface,#fff); box-shadow:0 1px 3px rgba(15,23,42,.10); }
body .jvm .jvm-chips{ margin:14px 0 12px; }
body .jvm .jvm-chips > *, body .jvm .jvm-range > *{ box-shadow:none !important; } body .jvm .jvm-card{ margin-bottom:12px; } body .jvm{ padding-bottom:16px; }

/* ── Branded look: every Resseler screen carries the company's brand colour (tinted page, brand titles, brand segmented controls, tinted cards) ── */
html body[class*="jumlo-"]{ --jb:var(--mm-primary,var(--jv-a,#6d28d9)); --jb-dark:color-mix(in oklab, var(--jb) 70%, var(--jv-dk,#0f0a1f)); background:color-mix(in oklab, var(--jb) 7%, var(--bg,#f6f7fb)); }
html body[class*="jumlo-"]{ --jb:var(--mm-primary,var(--jv-a,#6d28d9)); --jb-dark:color-mix(in oklab, var(--jb) 70%, var(--jv-dk,#0f0a1f)); }
html body[class*="jumlo-"] .jp-title, html body.jumlo-orders-page .orders::before, html body .jvf-wrap .jvs-hi, html body .jvm .jvs-hi{ color:var(--jb-dark); }
html body[class*="jumlo-"] .jp-sec, html body.jumlo-orders-page .sec-title, html body .jvs.jvs .jvs-head b, html body .jvf .jv-lbl, html body .jvf .jm-subhead{ color:var(--jb); }
/* segmented controls: brand fill on the active segment */
html body.jumlo-orders-page .orders-tab.active, html body .jvs.jvs .jvs-tabs button.on, html body .jp-seg button.active{ background:var(--jb); color:#fff; box-shadow:0 4px 10px -3px color-mix(in oklab, var(--jb) 60%, transparent); }
html body.jumlo-orders-page .orders-tab.active .tab-count, html body .jvs.jvs .jvs-tabs button.on span{ color:#fff; opacity:.85; background:none; }
html body.jumlo-orders-page .orders-tabs, html body .jvs.jvs .jvs-tabs, html body .jp-seg{ background:color-mix(in oklab, var(--jb) 11%, var(--surface,#fff)); }
/* cards: hairline in brand tint + soft brand shadow */
html body[class*="jumlo-"] .jp-me, html body[class*="jumlo-"] .jp-list, html body.jumlo-orders-page .order-card, html body .jvf .jv-card, html body .jvf .jv-strip, html body .jvf .jv-rcpt, html body .jvf .jvf-prov, html body .jvm .jvm-card{
  box-shadow:0 8px 20px -12px color-mix(in oklab, var(--jb) 55%, transparent), 0 0 0 1px color-mix(in oklab, var(--jb) 12%, transparent); }
html body[class*="jumlo-"] .jp-av{ background:linear-gradient(135deg, var(--jb), color-mix(in oklab, var(--jb) 70%, #000)); }
html body[class*="jumlo-"] .jp-ic{ background:linear-gradient(135deg, var(--jb), color-mix(in oklab, var(--jb) 72%, #000)); }
/* Dalabyada rows */
html body.jumlo-orders-page .order-card-summary .prov-logo-wrap{ background:color-mix(in oklab, var(--jb) 9%, var(--surface,#fff)); }
html body.jumlo-orders-page .order-card-summary .amount-row{ color:var(--jb-dark); }
html body.jumlo-orders-page .order-card-summary .recipient-phone{ color:color-mix(in oklab, var(--jb) 55%, #6b7280); }
html body.jumlo-orders-page .orders-tab{ color:var(--jb-dark); }
html body.jumlo-orders-page .order-card::before{ display:block; content:''; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:var(--jb); }
html body.jumlo-orders-page .order-card{ position:relative; }
/* one static tab bar: brand hairline, brand active tab */
html body[class*="jumlo-"] .tabbar{ border-top:1px solid color-mix(in oklab, var(--jb) 18%, transparent) !important; }
html body[class*="jumlo-"] .tabbar a.active, html body[class*="jumlo-"] .tabbar a.active .ico{ color:var(--jb) !important; }
html body[class*="jumlo-"] .tabbar, html body[class*="jumlo-"] .tabbar *{ transition:none !important; }
html body[class*="jumlo-"] .tabbar a:active{ transform:none !important; opacity:.7; }
html body[class*="jumlo-"] .mm-cfab__btn{ background:linear-gradient(135deg, var(--jb), color-mix(in oklab, var(--jb) 72%, #000)); }

/* instant navigation: immediate feedback while the next screen is fetched, soft one-shot entrance when it lands */
html.jv-nav main.page{ opacity:.55; transition:opacity .12s linear; pointer-events:none; }
html.jv-nav::before{ content:''; position:fixed; top:0; left:0; right:0; height:2px; z-index:99999; background:var(--jb,var(--mm-primary,#6d28d9)); transform-origin:left; animation:jvBar 1.1s ease-out forwards; }
@keyframes jvBar{ from{ transform:scaleX(.05); } to{ transform:scaleX(.9); } }
main.page.jv-in{ animation:jvIn .16s ease-out both; }
@keyframes jvIn{ from{ opacity:.6; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ main.page.jv-in{ animation:none; } }

/* ── nav: nothing lifts or moves; active tab = brand tint only; bar pinned to the bottom edge ──────────────────── */
html body[class*="jumlo-"] .tabbar a .ico, html body[class*="jumlo-"] .tabbar a.active .ico{ margin:0 !important; width:auto !important; height:auto !important; border-radius:0 !important; transform:none !important; animation:none !important; animation-name:none !important; background:none !important; box-shadow:none !important; display:grid; place-items:center; }
html body[class*="jumlo-"] .tabbar a.active .ico::after{ display:none !important; }
html body[class*="jumlo-"] .tabbar a{ gap:3px; }
html:not(.mm-kb-open) body[class*="jumlo-"] .tabbar{ position:fixed !important; bottom:0 !important; top:auto !important; transform:none !important; }

/* ── brand hero: every Resseler screen opens with a brand-colour card (title in white) ───────────────────────── */
html body[class*="jumlo-"]{ --jb-grad:linear-gradient(135deg, color-mix(in oklab, var(--jb) 88%, #fff) 0%, var(--jb) 48%, color-mix(in oklab, var(--jb) 62%, #000) 100%); }
html body[class*="jumlo-"]{ background:linear-gradient(180deg, color-mix(in oklab, var(--jb) 14%, var(--bg,#f6f7fb)) 0, color-mix(in oklab, var(--jb) 6%, var(--bg,#f6f7fb)) 340px); }
/* Dalabyada */
html body.jumlo-orders-page .orders::before{ padding:20px 18px 22px; margin:8px 0 16px; border-radius:22px; color:#fff; font-size:26px; line-height:30px;
  background:radial-gradient(120px 120px at 92% 20%, rgba(255,255,255,.22), transparent 70%), radial-gradient(160px 160px at 8% 130%, rgba(0,0,0,.25), transparent 70%), var(--jb-grad); box-shadow:0 14px 26px -14px color-mix(in oklab, var(--jb) 80%, #000); }
/* Suuqa + flow (Lacagta / Bixi) */
html body .jvm .jvs-hero, html body .jvf-wrap .jvs-hero.jvf-hero{ position:relative; overflow:hidden; margin-top:8px; padding:18px 18px 18px; border-radius:22px; color:#fff; background:var(--jb-grad); box-shadow:0 14px 26px -14px color-mix(in oklab, var(--jb) 80%, #000); }
html body .jvm .jvs-hero::before, html body .jvf-wrap .jvs-hero.jvf-hero::before{ display:block; content:''; position:absolute; right:-30px; top:-40px; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.14); }
html body .jvm .jvs-hero::after, html body .jvf-wrap .jvs-hero.jvf-hero::after{ display:block; content:''; position:absolute; right:30px; bottom:-60px; width:110px; height:110px; border-radius:50%; background:rgba(255,255,255,.08); }
html body .jvm .jvs-hi, html body .jvf-wrap .jvs-hi{ color:#fff; position:relative; z-index:1; }
html body .jvm .jvm-sub, html body .jvf-wrap .jvm-sub{ color:rgba(255,255,255,.88); position:relative; z-index:1; }
html body .jvf-wrap .jvf-prov{ position:relative; z-index:1; }
html body .jvf-steps{ position:relative; z-index:1; }
html body .jvf-steps li{ color:rgba(255,255,255,.78); }
html body .jvf-steps li i{ background:rgba(255,255,255,.22); color:#fff; }
html body .jvf-steps li.done i, html body .jvf-steps li.now i{ background:#fff; color:var(--jb); }
html body .jvf-steps li.now{ color:#fff; }
html body .jvf-steps li + li::before{ background:rgba(255,255,255,.3); }
html body .jvf-steps li.done + li::before{ background:#fff; }
html body .jvm .jvm-chips{ margin-top:14px; }
/* Profile */
html body.jumlo-profile-page .jp-title{ display:none; }
html body[class*="jumlo-"] .jp-me{ position:relative; overflow:hidden; margin-top:8px; padding:22px 18px; border-radius:22px; color:#fff; background:var(--jb-grad); box-shadow:0 14px 26px -14px color-mix(in oklab, var(--jb) 80%, #000); }
html body[class*="jumlo-"] .jp-me::before{ content:''; position:absolute; right:-30px; top:-40px; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.14); }
html body[class*="jumlo-"] .jp-me h1{ color:#fff; position:relative; } html body[class*="jumlo-"] .jp-me p{ color:rgba(255,255,255,.85); position:relative; }
html body[class*="jumlo-"] .jp-me .jp-av{ background:rgba(255,255,255,.22); box-shadow:inset 0 0 0 2px rgba(255,255,255,.55); position:relative; }
/* section labels on tinted background keep the brand colour */
html body .jvs.jvs .jvs-head b{ color:var(--jb-dark); }

/* Dark: accent text is made by mixing the accent with a "dark" base on light; on dark that base must be light. */
:root{ --jv-dk:#0f172a; }
@media (prefers-color-scheme: dark){ html:not(.theme-light){ --jv-dk:#fff; } }
html.theme-dark{ --jv-dk:#fff; }

/* Open popup menu / bottom sheet must paint ABOVE the fixed bottom tabbar. They sit inside main.page, which brand-v2 makes a z-index:1
   stacking context (below .tabbar z-index:50), so the nav hid the lower part ("Dalbo mar kale", the sheet's buttons). Drop that context while one is open. */
html.mm-pop-open main.page{ z-index:auto !important; }
html.mm-pop-open body[class*="jumlo-"] .modal-backdrop.show{ z-index:200; }