/* ============================================================
   ماشین‌حساب کارتن اسباب‌کشی · نسخه ۱.۱
   رنگ‌ها از پوسته (یا تنظیمات افزونه) گرفته می‌شوند و بقیه‌ی
   سایه‌ها با color-mix از همان رنگ ساخته می‌شوند.
   ============================================================ */
.mbc{
  --brand:var(--mbc-brand,#1f5a4a);
  --accent:var(--mbc-accent,#f4c542);
  --kraft:#d7a86e;
  --kraft-2:#b98a52;
  --kraft-3:#f0d3a6;

  --ink:var(--brand);
  --ink-soft:color-mix(in oklch,var(--brand) 84%,white);
  --ink-deep:color-mix(in oklch,var(--brand) 78%,black);
  --paper:color-mix(in oklch,var(--brand) 2.5%,white);
  --paper-2:color-mix(in oklch,var(--brand) 5.5%,white);
  --paper-3:color-mix(in oklch,var(--brand) 11%,white);
  --line:color-mix(in oklch,var(--brand) 19%,white);
  --text:color-mix(in oklch,var(--brand) 22%,#161616);
  --muted:color-mix(in oklch,var(--brand) 18%,#555);
  --on-brand:#fff;
  --tape:var(--accent);
  --tape-ink:color-mix(in oklch,var(--accent) 30%,#1d1a12);
  --danger:#c2412d;
  --ok-bg:color-mix(in oklch,var(--brand) 10%,white);
  --ok:var(--brand);
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --r:var(--mbc-radius,20px);
  /* رنگ‌های هیرو (روی رنگ اصلی) */
  --hero-fg:var(--on-brand);
  --hero-muted:color-mix(in oklch,white 84%,var(--brand));
  --hero-glass:color-mix(in oklch,white 12%,transparent);
  --hero-line:color-mix(in oklch,white 18%,transparent);
  --hero-hl:var(--tape);
  --hero-hl-ink:var(--tape-ink);
  --hero-a:var(--ink-soft);--hero-b:var(--ink);--hero-c:var(--ink-deep);
  --cab:var(--tape);

  font-family:var(--mbc-font,Vazirmatn,Tahoma,system-ui,sans-serif);
  font-size:16px;line-height:1.6;color:var(--text);background:var(--paper);
  direction:rtl;text-align:right;max-width:1180px;margin-inline:auto;
  border-radius:var(--r);overflow:clip;isolation:isolate;
  font-feature-settings:"tnum";
  box-shadow:0 1px 0 var(--line),0 30px 60px -40px color-mix(in oklch,var(--brand) 45%,transparent);
}
.mbc *,.mbc *::before,.mbc *::after{box-sizing:border-box}
/* جلوگیری از تداخل استایل دکمه/فیلد پوسته */
.mbc button,.mbc input,.mbc textarea{font:inherit;color:inherit;letter-spacing:normal;text-transform:none;box-shadow:none;margin:0;min-height:0;line-height:1.3}
.mbc h2,.mbc h3{text-wrap:balance;font-family:inherit;letter-spacing:normal;text-transform:none}
.mbc svg{display:block;flex:none}
.mbc .mbc-ico{display:inline-flex;flex:none;width:20px;height:20px;line-height:0}
.mbc .mbc-ico svg{width:100%;height:100%;max-width:100%;max-height:100%}

/* رنگ اصلی روشن (مثل زرد/نارنجی): متن تیره روی هیرو، دکمه‌ها با نسخه‌ی تیره‌ی همان رنگ */
.mbc.mbc--light{
  --ink:color-mix(in oklch,var(--brand) 52%,#1a1206);
  --ink-soft:color-mix(in oklch,var(--brand) 64%,#1a1206);
  --ink-deep:color-mix(in oklch,var(--brand) 42%,#1a1206);
  --hero-fg:#1b1710;
  --hero-muted:color-mix(in oklch,#1b1710 82%,var(--brand));
  --hero-glass:rgba(255,255,255,.4);
  --hero-line:rgba(0,0,0,.12);
  --hero-hl:var(--ink);
  --hero-hl-ink:#fff;
  --hero-a:color-mix(in oklch,var(--brand) 70%,white);--hero-b:var(--brand);--hero-c:color-mix(in oklch,var(--brand) 88%,black);
}
/* رنگ تأکیدی خیلی شبیه رنگ اصلی: نوار چسب مشکی-زرد و کابین تیره */
.mbc.mbc--clash{--cab:var(--ink)}
.mbc.mbc--clash .mbc-tape{background:#1b1710!important;color:var(--accent)!important}

/* ---------- hero ---------- */
.mbc .mbc-hero{position:relative;overflow:hidden;color:var(--hero-fg);
  background:
    radial-gradient(120% 90% at 0% 0%,color-mix(in oklch,var(--hero-b) 70%,white) 0%,transparent 55%),
    linear-gradient(160deg,var(--hero-a),var(--hero-b) 45%,var(--hero-c));
  padding:52px 48px 128px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;align-items:center}
.mbc .mbc-hero::before{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;
  background-image:radial-gradient(circle,#fff 1px,transparent 1.5px);background-size:22px 22px}
.mbc .mbc-hero-text{position:relative;z-index:1}
.mbc .mbc-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:4px 12px 4px 6px;border-radius:99px;
  background:var(--hero-glass);font-size:.8125rem;font-weight:800;color:var(--hero-hl)}
.mbc .mbc-eyebrow .mbc-ico{width:22px;height:22px;padding:3px;border-radius:50%;background:var(--hero-hl);color:var(--hero-hl-ink)}
.mbc .mbc-hero h2{margin:0;font-size:clamp(1.9rem,4.2vw,3.2rem);font-weight:900;line-height:1.25;max-width:15ch;color:var(--hero-fg)}
.mbc .mbc-hero h2 mark{background:none;color:var(--hero-hl);position:relative;white-space:nowrap}
.mbc .mbc-hero h2 mark::after{content:"";position:absolute;inset-inline:0;bottom:.02em;height:.14em;border-radius:9px;background:var(--hero-hl);opacity:.35;
  transform-origin:right;animation:mbc-underline 1s .9s var(--ease) both}
.mbc .mbc-hero p.mbc-lead{margin:16px 0 0;max-width:54ch;font-size:1.0625rem;line-height:1.8;color:var(--hero-muted)}
.mbc .mbc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding:0;list-style:none}
.mbc .mbc-chips li{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:700;padding:6px 12px 6px 10px;border-radius:99px;
  background:var(--hero-glass);border:1px solid var(--hero-line)}
.mbc .mbc-chips .mbc-ico{width:16px;height:16px;color:var(--hero-hl)}

.mbc .mbc-hero-text > *{animation:mbc-rise .8s var(--ease) both}
.mbc .mbc-hero-text > :nth-child(2){animation-delay:.08s}
.mbc .mbc-hero-text > :nth-child(3){animation-delay:.16s}
.mbc .mbc-hero-text > :nth-child(4){animation-delay:.24s}

/* scene */
.mbc .mbc-scene{position:relative;z-index:1;width:100%;max-width:460px;justify-self:center;animation:mbc-rise 1s .2s var(--ease) both}
.mbc .mbc-scene svg{width:100%;height:auto;overflow:visible}
.mbc .s-sky{animation:mbc-pan 18s linear infinite}
.mbc .s-city{animation:mbc-pan 9s linear infinite}
.mbc .s-road{animation:mbc-dash .6s linear infinite}
.mbc .s-truck{animation:mbc-bob .5s ease-in-out infinite alternate}
.mbc .s-wheel{transform-box:fill-box;transform-origin:center;animation:mbc-spin .6s linear infinite}
.mbc .s-cargo > g{transform-box:fill-box;transform-origin:50% 100%;animation:mbc-jiggle 1s ease-in-out infinite alternate}
.mbc .s-cargo > g:nth-child(2){animation-delay:-.3s}
.mbc .s-cargo > g:nth-child(3){animation-delay:-.6s}
.mbc .s-wind line{animation:mbc-wind 1.1s linear infinite}
.mbc .s-wind line:nth-child(2){animation-delay:-.4s}
.mbc .s-wind line:nth-child(3){animation-delay:-.75s}
.mbc .s-sun{transform-box:fill-box;transform-origin:center;animation:mbc-pulse 4s ease-in-out infinite}
.mbc .s-float{animation:mbc-float 7s ease-in-out infinite}
.mbc .s-float:nth-of-type(2){animation-duration:9s;animation-delay:-3s}
.mbc .s-float:nth-of-type(3){animation-duration:8s;animation-delay:-5s}

.mbc .mbc-tape{position:absolute;inset-inline:-40px;bottom:26px;transform:rotate(-1.4deg);background:var(--tape);color:var(--tape-ink);z-index:2;
  font-weight:800;font-size:.875rem;white-space:nowrap;padding:8px 0;overflow:hidden;box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}
.mbc .mbc-tape span{display:inline-block;animation:mbc-roll 40s linear infinite}

/* ---------- layout ---------- */
.mbc .mbc-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,430px);gap:48px;padding:44px 48px 48px}

/* ---------- questions ---------- */
.mbc .mbc-q{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:2px 16px;align-items:center;padding:20px 16px;margin:0 -16px;
  border-radius:16px;border-bottom:1px solid var(--line);transition:background-color .25s var(--ease)}
.mbc .mbc-q:hover{background:var(--paper-2)}
.mbc .mbc-q:first-child{padding-top:8px}
.mbc .mbc-n{grid-row:span 2;align-self:start;position:relative;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:var(--paper-3);color:var(--ink);transition:transform .3s var(--spring),background-color .3s var(--ease),color .3s var(--ease)}
.mbc .mbc-n .mbc-ico{width:26px;height:26px}
.mbc .mbc-n b{position:absolute;top:-6px;inset-inline-start:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;display:grid;place-items:center;
  background:var(--tape);color:#1b1a14;font-size:.75rem;font-weight:900;border:2px solid var(--paper);line-height:1}
.mbc .mbc-q:hover .mbc-n{background:var(--ink);color:var(--on-brand);transform:rotate(-6deg)}
.mbc .mbc-n.is-pop{animation:mbc-pop .45s var(--spring)}
.mbc .mbc-q h3{margin:0;font-size:1.0625rem;font-weight:700;color:var(--text)}
.mbc .mbc-hint{grid-column:2;margin:0;font-size:.875rem;color:var(--muted)}
.mbc .mbc-ctl{grid-column:3;grid-row:1 / span 2}
.mbc .mbc-q--wide .mbc-ctl{grid-column:2 / -1;grid-row:auto;margin-top:16px}
.mbc .mbc-foot{display:flex;gap:10px;align-items:flex-start;margin:24px 0 0;max-width:64ch;font-size:.875rem;color:var(--muted)}
.mbc .mbc-foot .mbc-ico{width:20px;height:20px;color:var(--ink);margin-top:2px}

/* reveal on scroll */
.mbc .mbc-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
.mbc .mbc-reveal.is-in{opacity:1;transform:none}

/* ---------- area ---------- */
.mbc .mbc-area{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.mbc .mbc-area-val{display:flex;align-items:baseline;gap:8px;font-weight:500;color:var(--muted)}
.mbc .mbc-area-num{width:4.4ch;font-size:2.25rem;font-weight:900;color:var(--ink);border:0;border-bottom:2px solid var(--ink);
  background:transparent;text-align:center;padding:0;line-height:1.2;border-radius:0;height:auto}
.mbc .mbc-area-num:focus{outline:none;border-bottom-color:var(--tape-ink);background:var(--paper-2)}
.mbc .mbc-range-wrap{flex:1;min-width:200px;position:relative;padding-top:6px}
.mbc .mbc-range{width:100%;appearance:none;-webkit-appearance:none;height:8px;border-radius:99px;border:0;padding:0;margin:0;
  background:linear-gradient(to left,var(--ink) var(--p,30%),var(--paper-3) var(--p,30%));cursor:pointer}
.mbc .mbc-range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:9px;background:var(--kraft);border:3px solid var(--ink);
  box-shadow:inset 0 -9px 0 -6px var(--tape),0 4px 10px -3px rgba(0,0,0,.35);transition:transform .2s var(--spring)}
.mbc .mbc-range::-moz-range-thumb{width:24px;height:24px;border-radius:8px;background:var(--kraft);border:3px solid var(--ink)}
.mbc .mbc-range:active::-webkit-slider-thumb{transform:scale(1.18) rotate(-8deg)}
.mbc .mbc-range:focus-visible{outline:3px solid var(--tape-ink);outline-offset:6px}
.mbc .mbc-ticks{display:flex;justify-content:space-between;margin-top:8px;font-size:.75rem;color:var(--muted)}

/* ---------- stepper ---------- */
.mbc .mbc-step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--paper);padding:2px}
.mbc .mbc-step button{position:relative;overflow:hidden;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer;
  color:var(--ink);transition:background-color .15s var(--ease),transform .15s var(--ease)}
.mbc .mbc-step button .mbc-ico{width:18px;height:18px}
.mbc .mbc-step button:hover{background:var(--paper-3)}
.mbc .mbc-step button:active{transform:scale(.9)}
.mbc .mbc-step button:disabled{color:var(--line);cursor:not-allowed;background:transparent;transform:none}
.mbc .mbc-step button:focus-visible{outline:3px solid var(--tape-ink);outline-offset:-3px}
.mbc .mbc-step output{min-width:2.6ch;text-align:center;font-weight:800;font-size:1.0625rem;display:inline-block}
.mbc .mbc-step output.is-flip{animation:mbc-flip .35s var(--spring)}
.mbc .mbc-step--sm button{width:34px;height:34px}
.mbc .mbc-step--sm button .mbc-ico{width:15px;height:15px}
.mbc .mbc-step--sm output{font-size:.9375rem}
.mbc .mbc-ripple{position:absolute;inset:0;margin:auto;width:100%;height:100%;border-radius:50%;background:var(--ink);opacity:.25;pointer-events:none;animation:mbc-ripple .5s var(--ease) forwards}

/* ---------- segmented ---------- */
.mbc .mbc-seg{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:var(--paper-3)}
.mbc .mbc-seg-pill{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:var(--ink);
  box-shadow:0 4px 12px -4px color-mix(in oklch,var(--brand) 70%,transparent);transition:left .4s var(--spring),width .4s var(--spring);pointer-events:none}
.mbc .mbc-seg label{position:relative;z-index:1;cursor:pointer;margin:0}
.mbc .mbc-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;width:100%;height:100%}
.mbc .mbc-seg span{display:block;padding:8px 16px;border-radius:999px;font-size:.9375rem;font-weight:500;color:var(--muted);transition:color .25s var(--ease)}
.mbc .mbc-seg label:hover span{color:var(--text)}
.mbc .mbc-seg input:checked + span{color:var(--on-brand);font-weight:700}
.mbc .mbc-seg:not(.is-ready) input:checked + span{background:var(--ink)}
.mbc .mbc-seg input:focus-visible + span{outline:3px solid var(--tape-ink);outline-offset:2px}

/* ---------- sheet ---------- */
.mbc .mbc-sheet{position:sticky;top:24px;align-self:start;background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:0 22px 22px;overflow:hidden}
.mbc .mbc-sheet::before{content:"";display:block;height:14px;margin:0 -22px 22px;
  background:repeating-linear-gradient(-45deg,var(--kraft) 0 14px,var(--kraft-2) 14px 28px);opacity:.9}
.mbc .mbc-sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.mbc .mbc-sheet h3{display:flex;align-items:center;gap:10px;margin:0;font-size:1.375rem;font-weight:900;color:var(--text)}
.mbc .mbc-sheet h3 .mbc-ico{width:34px;height:34px;padding:6px;border-radius:10px;background:var(--ink);color:var(--on-brand)}
.mbc .mbc-meta{font-size:.8125rem;color:var(--muted);background:var(--paper);border:1px solid var(--line);padding:2px 10px;border-radius:99px}

/* جعبه‌های کوچک: هر کارتن یک مربع */
.mbc .mbc-stack{display:flex;flex-wrap:wrap;gap:3px;margin:16px 0 4px;min-height:14px;align-items:center}
.mbc .mbc-stack i{width:11px;height:11px;border-radius:2px;background:var(--kraft);box-shadow:inset 0 2px 0 -1px var(--tape),inset 0 -2px 0 var(--kraft-2);
  animation:mbc-drop .45s var(--spring) both;animation-delay:calc(var(--d,0) * 12ms)}
.mbc .mbc-stack i.s{width:8px;height:8px;margin-top:3px}
.mbc .mbc-stack i.l{width:14px;height:14px;margin-top:-3px}
.mbc .mbc-stack em{font-style:normal;font-size:.75rem;font-weight:800;color:var(--muted);margin-inline-start:4px}

.mbc .mbc-rows{list-style:none;margin:10px 0 0;padding:0}
.mbc .mbc-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:14px 0;border-top:1px dashed var(--line);margin:0;
  transition:opacity .3s var(--ease)}
.mbc .mbc-row-ico{grid-row:span 2;align-self:start;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);color:var(--ink);
  transition:transform .3s var(--spring)}
.mbc .mbc-row-ico .mbc-ico{width:24px;height:24px}
.mbc .mbc-row-ico.is-pop{animation:mbc-pop .45s var(--spring)}
.mbc .mbc-row:hover .mbc-row-ico{transform:translateY(-2px) rotate(-5deg)}
.mbc .mbc-row-main{display:flex;flex-direction:column}
.mbc .mbc-row-name{font-weight:700;font-size:.9375rem}
.mbc .mbc-row-spec{font-size:.75rem;color:var(--muted)}
.mbc .mbc-row-why{grid-column:2 / -1;margin:2px 0 0;font-size:.8125rem;line-height:1.6;color:var(--muted)}
.mbc .mbc-row-foot{grid-column:2 / -1;display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--muted)}
.mbc .mbc-row-sum{margin-inline-start:auto;font-size:.9375rem;font-weight:800;color:var(--text)}
.mbc .mbc-reset{display:inline-flex;align-items:center;gap:4px;border:0;background:var(--tape);color:var(--tape-ink);font-size:.75rem;font-weight:700;padding:2px 10px;border-radius:99px;cursor:pointer;
  animation:mbc-pop .35s var(--spring)}
.mbc .mbc-reset .mbc-ico{width:12px;height:12px}
.mbc .mbc-reset[hidden]{display:none}
.mbc .mbc-reset:hover .mbc-ico{animation:mbc-spin .6s var(--ease)}
.mbc .mbc-reset:focus-visible{outline:2px solid var(--tape-ink);outline-offset:2px}
.mbc .mbc-row.is-zero{opacity:.45}
.mbc .mbc-row.is-zero .mbc-row-ico{filter:grayscale(1)}

.mbc .mbc-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px;padding-top:16px;border-top:2px solid var(--text)}
.mbc .mbc-total > span{font-weight:700}
.mbc .mbc-total strong{font-size:1.75rem;font-weight:900;display:inline-block;color:var(--ink)}
.mbc .mbc-total small{font-size:.875rem;font-weight:500;color:var(--muted)}
.mbc .mbc-total strong.is-bump{animation:mbc-bump .5s var(--spring)}

/* ---------- order form ---------- */
.mbc .mbc-order{margin-top:20px}
.mbc .mbc-fields{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.mbc .mbc-fields-in{overflow:hidden;display:grid;gap:12px}
.mbc.is-ordering .mbc-fields{grid-template-rows:1fr}
.mbc.is-ordering .mbc-fields-in{padding-bottom:16px}
.mbc.is-ordering .mbc-fields label{animation:mbc-rise .5s var(--ease) both}
.mbc.is-ordering .mbc-fields label:nth-child(2){animation-delay:.05s}
.mbc.is-ordering .mbc-fields label:nth-child(3){animation-delay:.1s}
.mbc.is-ordering .mbc-fields label:nth-child(4){animation-delay:.15s}
.mbc .mbc-fields label{display:grid;gap:4px;font-size:.875rem;font-weight:700;margin:0}
.mbc .mbc-fields em{font-style:normal;font-weight:400;color:var(--muted)}
.mbc .mbc-field{position:relative;display:block}
.mbc .mbc-field .mbc-ico{position:absolute;inset-inline-start:12px;top:12px;width:18px;height:18px;color:var(--muted);pointer-events:none;transition:color .2s var(--ease)}
.mbc .mbc-fields input,.mbc .mbc-fields textarea{width:100%;border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:10px 12px 10px 12px;padding-inline-start:40px;font-weight:400;font-size:1rem;resize:vertical;height:auto;
  transition:border-color .15s var(--ease),box-shadow .2s var(--ease)}
.mbc .mbc-fields input:focus,.mbc .mbc-fields textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in oklch,var(--brand) 16%,transparent)}
.mbc .mbc-field:focus-within .mbc-ico{color:var(--ink)}
.mbc .mbc-fields .is-invalid{border-color:var(--danger);animation:mbc-shake .4s}
.mbc .mbc-err{margin:0;font-size:.8125rem;color:var(--danger)}
.mbc .mbc-err:empty{display:none}
.mbc .mbc-cta{position:relative;overflow:hidden;display:flex;gap:10px;align-items:center;justify-content:center;width:100%;min-height:54px;padding:0 20px;border:0;border-radius:14px;
  background:var(--ink);color:var(--on-brand);font-weight:800;font-size:1.0625rem;cursor:pointer;text-decoration:none;
  box-shadow:0 10px 24px -12px color-mix(in oklch,var(--brand) 80%,transparent);
  transition:background-color .15s var(--ease),transform .15s var(--ease),box-shadow .2s var(--ease)}
.mbc .mbc-cta .mbc-ico{width:22px;height:22px;transition:transform .35s var(--spring)}
.mbc .mbc-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(120%);animation:mbc-shine 3.2s 1.5s ease-in-out infinite}
.mbc .mbc-cta:hover{background:var(--ink-soft);transform:translateY(-1px);color:var(--on-brand)}
.mbc .mbc-cta:hover .mbc-ico{transform:translateX(-4px)}
.mbc .mbc-cta:active{transform:scale(.99)}
.mbc .mbc-cta:focus-visible{outline:3px solid var(--tape-ink);outline-offset:3px}
.mbc .mbc-cta:disabled{background:var(--paper-3);color:var(--muted);cursor:not-allowed;box-shadow:none;transform:none}
.mbc .mbc-cta:disabled::after{display:none}
.mbc .mbc-cta.is-loading{cursor:progress;background:var(--ink-soft)}
.mbc .mbc-cta.is-loading .mbc-ico{animation:mbc-spin .8s linear infinite}
.mbc .mbc-cta--wa{background:#1fa855}
.mbc .mbc-cta--wa:hover{background:#178d47}

.mbc .mbc-tracking{width:100%;margin:4px 0 2px;padding:10px 12px;border:1px dashed color-mix(in oklch,var(--ink) 35%,var(--line));border-radius:12px;background:color-mix(in oklch,var(--paper) 82%,var(--accent))}
.mbc .mbc-tracking[hidden]{display:none}
.mbc .mbc-tracking-label{display:block;color:var(--muted);font-size:.75rem;font-weight:700;margin-bottom:4px}
.mbc .mbc-tracking-code{display:flex;align-items:center;justify-content:space-between;gap:8px;direction:ltr}
.mbc .mbc-tracking-code b{letter-spacing:1.2px;color:var(--ink);font:900 .98rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}
.mbc .mbc-tracking-code button{display:inline-flex;align-items:center;gap:4px;border:0;border-radius:8px;padding:5px 8px;background:var(--ink);color:var(--on-brand);font:800 .75rem inherit;cursor:pointer}
.mbc .mbc-tracking-code button .mbc-ico{width:13px;height:13px}
.mbc .mbc-tracking small{display:block;min-height:14px;margin-top:3px;color:var(--ok);font-size:.7rem}
/* ---------- contact buttons (compact pills) ---------- */
.mbc .mbc-contact{width:100%;margin-top:6px}
.mbc .mbc-contact[hidden]{display:none!important}
.mbc .mbc-contact-title{margin:0 0 8px!important;color:var(--muted)!important;font-size:.8125rem!important}
.mbc .mbc-contact-actions{display:flex!important;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}
.mbc a.mbc-contact-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:6px;flex:1 1 0;min-width:0;height:40px;padding:0 12px!important;margin:0!important;border:0!important;border-radius:999px!important;
  background:var(--ink)!important;color:var(--on-brand)!important;text-decoration:none!important;font-size:.875rem!important;font-weight:800;line-height:1!important;box-shadow:none!important;transition:background-color .15s var(--ease),transform .15s var(--ease)}
.mbc a.mbc-contact-btn[hidden]{display:none!important}
.mbc a.mbc-contact-btn:hover{background:var(--ink-soft)!important;color:var(--on-brand)!important;transform:translateY(-1px)}
.mbc a.mbc-contact-btn span{color:inherit!important}
.mbc a.mbc-contact-btn .mbc-ico{width:16px!important;height:16px!important;color:var(--accent)!important}
.mbc a.mbc-contact-btn .mbc-ico svg{width:16px!important;height:16px!important}
.mbc.mbc--light a.mbc-contact-btn .mbc-ico{color:#fff!important}
.mbc .mbc-note{display:flex;gap:6px;justify-content:center;align-items:center;margin:10px 0 0;text-align:center;font-size:.8125rem;color:var(--muted)}
.mbc .mbc-note .mbc-ico{width:14px;height:14px}

.mbc .mbc-done{position:relative;margin-top:20px;padding:24px 20px 20px;border-radius:14px;background:var(--ok-bg);color:var(--ok);display:grid;gap:10px;justify-items:center;text-align:center}
.mbc .mbc-done[hidden]{display:none}
.mbc .mbc-done strong{font-size:1.25rem;font-weight:900}
.mbc .mbc-done p{margin:0;font-size:.9375rem;color:var(--text)}
.mbc .mbc-done .mbc-cta{margin-top:4px}
.mbc .mbc-link{border:0;background:none;padding:4px 0;color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.mbc .mbc-packed{width:120px;height:110px;overflow:visible}
.mbc .mbc-done:not([hidden]) .p-box{animation:mbc-drop .6s var(--spring) both}
.mbc .mbc-done:not([hidden]) .p-flap-r{transform-box:fill-box;transform-origin:100% 100%;animation:mbc-flap-r .5s .45s var(--ease) both}
.mbc .mbc-done:not([hidden]) .p-flap-l{transform-box:fill-box;transform-origin:0% 100%;animation:mbc-flap-l .5s .6s var(--ease) both}
.mbc .mbc-done:not([hidden]) .p-tape{stroke-dasharray:80;stroke-dashoffset:80;animation:mbc-draw .4s 1.05s var(--ease) forwards}
.mbc .mbc-done:not([hidden]) .p-badge{transform-box:fill-box;transform-origin:center;animation:mbc-pop-in .5s 1.3s var(--spring) both}
.mbc .mbc-done:not([hidden]) .p-check{stroke-dasharray:24;stroke-dashoffset:24;animation:mbc-draw .35s 1.55s var(--ease) forwards}
.mbc .mbc-confetti{position:absolute;inset:0;pointer-events:none;overflow:visible}
.mbc .mbc-confetti i{position:absolute;top:60px;left:50%;width:8px;height:12px;border-radius:2px;background:var(--c);opacity:0;
  animation:mbc-confetti 1.3s var(--dl) cubic-bezier(.2,.7,.3,1) forwards}

/* ---------- mobile bar ---------- */
.mbc .mbc-bar{display:none}

@media (max-width:900px){
  .mbc{border-radius:0}
  .mbc .mbc-hero{grid-template-columns:1fr;padding:36px 20px 92px;gap:8px}
  .mbc .mbc-scene{max-width:340px;order:-1}
  .mbc .mbc-body{grid-template-columns:1fr;gap:24px;padding:24px 20px calc(32px + var(--mbc-bar-offset,0px))}
  .mbc .mbc-sheet{position:static;padding:0 16px 20px}
  .mbc .mbc-sheet::before{margin:0 -16px 20px}
  .mbc .mbc-bar{display:flex;position:sticky;bottom:calc(var(--mbc-bar-offset,0px) + 12px + env(safe-area-inset-bottom,0px));z-index:50;transition:bottom .25s var(--ease);align-items:center;justify-content:space-between;gap:12px;
    background:var(--ink);color:var(--on-brand);border-radius:16px;padding:10px 12px 10px 14px;box-shadow:0 12px 28px -8px rgba(0,0,0,.35);
    animation:mbc-rise .6s .4s var(--ease) both}
  .mbc .mbc-bar > div{display:flex;align-items:center;gap:10px}
  .mbc .mbc-bar .mbc-ico{width:34px;height:34px;padding:6px;border-radius:10px;background:color-mix(in oklch,white 14%,transparent);color:var(--accent)}
  .mbc.mbc--light .mbc-bar .mbc-ico{color:#fff}
  .mbc .mbc-bar small{display:block;font-size:.75rem;opacity:.95}
  .mbc .mbc-bar strong{display:block;font-size:1.125rem;font-weight:900;line-height:1.2}
  .mbc .mbc-bar button{border:0;border-radius:12px;background:var(--accent);color:#1b1710;font-weight:800;padding:0 16px;min-height:44px;cursor:pointer}
}
@media (max-width:560px){
  .mbc .mbc-q{grid-template-columns:44px minmax(0,1fr);row-gap:4px;padding:18px 10px;margin:0 -10px}
  .mbc .mbc-n{width:40px;height:40px;border-radius:12px}
  .mbc .mbc-n .mbc-ico{width:22px;height:22px}
  .mbc .mbc-ctl,.mbc .mbc-q--wide .mbc-ctl{grid-column:2;grid-row:auto;margin-top:10px}
  .mbc .mbc-area-num{font-size:2rem}
  .mbc .mbc-chips{display:none}
}

/* ---------- keyframes ---------- */
@keyframes mbc-roll{from{transform:translateX(0)}to{transform:translateX(50%)}}
@keyframes mbc-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mbc-underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mbc-pan{from{transform:translateX(0)}to{transform:translateX(420px)}}
@keyframes mbc-dash{to{stroke-dashoffset:-32}}
@keyframes mbc-bob{from{transform:translateY(0)}to{transform:translateY(-2.5px)}}
@keyframes mbc-spin{to{transform:rotate(-360deg)}}
@keyframes mbc-jiggle{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg) translateY(-1px)}}
@keyframes mbc-wind{from{transform:translateX(-20px);opacity:0}30%{opacity:.8}to{transform:translateX(50px);opacity:0}}
@keyframes mbc-pulse{50%{transform:scale(1.08)}}
@keyframes mbc-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(8deg)}}
@keyframes mbc-pop{0%{transform:scale(1)}40%{transform:scale(1.22) rotate(-8deg)}100%{transform:scale(1)}}
@keyframes mbc-pop-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes mbc-flip{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
@keyframes mbc-bump{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes mbc-ripple{from{transform:scale(0);opacity:.3}to{transform:scale(1.6);opacity:0}}
@keyframes mbc-drop{from{transform:translateY(-14px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes mbc-shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@keyframes mbc-shine{0%{transform:translateX(120%)}35%,100%{transform:translateX(-120%)}}
@keyframes mbc-flap-r{from{transform:rotate(150deg)}to{transform:none}}
@keyframes mbc-flap-l{from{transform:rotate(-150deg)}to{transform:none}}
@keyframes mbc-draw{to{stroke-dashoffset:0}}
@keyframes mbc-confetti{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}

/* حرکت خاموش (تنظیمات یا ترجیح سیستم) */
.mbc.mbc--still *,.mbc.mbc--still *::before,.mbc.mbc--still *::after{animation:none!important;transition:none!important}
.mbc.mbc--still .mbc-reveal{opacity:1;transform:none}
.mbc.mbc--still .p-tape,.mbc.mbc--still .p-check{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .mbc *,.mbc *::before,.mbc *::after{animation:none!important;transition:none!important}
  .mbc .mbc-reveal{opacity:1;transform:none}
  .mbc .p-tape,.mbc .p-check{stroke-dashoffset:0!important}
}