/* =====================================================================
 * Modern Fitness — v4.1 «فول ۲۰۲۶»
 * اتاق پرو سه‌بعدی، چک‌اوت سه‌بعدی مرحله‌ای، پری‌لودر، نوار پیشرفت، زبان
 * ===================================================================== */

/* ---------- ۱) صحنهٔ سه‌بعدی اتاق پرو ---------- */
.mfc-f3d-host { display: flex; flex-direction: column; gap: 12px; }
.mfc-f3d-stage {
  --stage-top: #f97316;
  position: relative; flex: 1; min-height: 350px;
  border-radius: var(--radius, 22px); overflow: hidden;
  background: var(--surface, #14181f);
  background:
    radial-gradient(120% 70% at 50% 100%, color-mix(in srgb, var(--stage-top) 16%, transparent) 0%, transparent 60%),
    radial-gradient(80% 50% at 50% 0%, rgba(255,255,255,.05), transparent 70%),
    var(--surface, #14181f);
  border: 1px solid var(--line, #242a36);
}
.mfc-f3d-stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: radial-gradient(75% 60% at 50% 55%, #000 30%, transparent 100%);
}
#mfc-fitting-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#mfc-fitting-canvas.mfc-grabbing { cursor: grabbing; }
.mfc-3d-off #mfc-fitting-canvas { display: none; }
.mfc-f3d-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-size: 11px; font-weight: 800; letter-spacing: .3px;
  background: rgba(12,14,18,.55); color: #fff; backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 5px 12px;
}
html[dir="ltr"] .mfc-f3d-badge { right: auto; left: 12px; }
.mfc-f3d-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mfc-f3d-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line, #242a36);
  background: var(--surface2, #1a2029); color: var(--text, #eef1f6); font-size: 17px;
  cursor: pointer; transition: background .25s, transform .25s, border-color .25s; line-height: 1;
}
.mfc-f3d-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.mfc-f3d-btn.mfc-on { background: var(--accent); border-color: var(--accent); color: var(--ink, #12100c); }
.mfc-f3d-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- ۲) نوار پیشرفت اسکرول ---------- */
.mfc-progress {
  position: fixed; top: 0; right: 0; height: 3px; width: 0; z-index: 5000;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  box-shadow: 0 0 12px rgba(249, 115, 22, .75);
}
html[dir="ltr"] .mfc-progress { right: auto; left: 0; }

/* ---------- ۳) پری‌لودر ---------- */
.mfc-pre {
  position: fixed; inset: 0; z-index: 9000; background: var(--bg, #0d0f12);
  display: grid; place-items: center; opacity: 1; visibility: visible;
  transition: opacity .5s ease, visibility .5s ease;
}
.mfc-pre.mfc-hide { opacity: 0; visibility: hidden; pointer-events: none; }
.mfc-pre-box { display: grid; place-items: center; gap: 16px; }
.mfc-pre-logo {
  width: 84px; height: 84px; border-radius: 26px; background: var(--grad-accent, linear-gradient(135deg, #f97316, #3b82f6));
  display: grid; place-items: center; font-size: 36px; color: #12100c;
  box-shadow: 0 16px 44px rgba(249, 115, 22, .35);
  animation: mfc-pre-b 1.05s ease-in-out infinite alternate;
}
.mfc-pre-bar { width: 160px; height: 4px; border-radius: 99px; background: var(--line, #242a36); overflow: hidden; }
.mfc-pre-bar i { display: block; height: 100%; width: 42%; border-radius: 99px; background: var(--accent); animation: mfc-pre-slide 1s ease-in-out infinite; }
@keyframes mfc-pre-b { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-9px) rotate(3deg); } }
@keyframes mfc-pre-slide { from { transform: translateX(130%); } to { transform: translateX(-330%); } }

/* ---------- ۴) چک‌اوت سه‌بعدی مرحله‌ای ---------- */
.mfc-co-3d { position: relative; padding-top: 8px; perspective: 1200px; }
.mfc-co-steps { display: flex; justify-content: space-between; margin: 6px 0 30px; position: relative; }
.mfc-co-steps::before {
  content: ''; position: absolute; top: 23px; right: 12%; left: 12%; height: 3px;
  background: var(--line, #242a36); border-radius: 99px;
}
.mfc-co-step {
  position: relative; z-index: 1; width: 25%; display: flex; flex-direction: column;
  align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--muted, #8b93a3); text-align: center;
}
.mfc-co-step i {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 19px; background: var(--surface, #151a22);
  border: 2px solid var(--line, #242a36); transition: transform .45s cubic-bezier(.2,1.4,.4,1), background .4s, border-color .4s, box-shadow .4s;
}
.mfc-co-step.mfc-done i { background: var(--accent); border-color: var(--accent); color: var(--ink, #12100c); }
.mfc-co-step.mfc-now { color: var(--text, #eef1f6); }
.mfc-co-step.mfc-now i { border-color: var(--accent); box-shadow: 0 0 0 7px var(--accent-soft, rgba(249,115,22,.14)); transform: translateY(-3px) translateZ(14px); }
.mfc-co-panel { transform-style: preserve-3d; transition: transform .5s ease, opacity .4s ease; will-change: transform; }
.mfc-co-tilting .mfc-co-panel { transition: transform .12s linear; }
.mfc-co-arrow { font-size: 20px; animation: mfc-arr 1.4s ease-in-out infinite; color: var(--accent); }
@keyframes mfc-arr { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-7px); } }
html[dir="ltr"] .mfc-co-arrow { animation-name: mfc-arr-l; }
@keyframes mfc-arr-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }

/* ---------- ۵) صفحهٔ تشکر (سفارش موفق) ---------- */
.mfc-thanks-hero { min-height: 46vh; display: grid; place-items: center; text-align: center; padding: 40px 0 10px; }
.mfc-thanks-tick {
  width: 94px; height: 94px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--grad-accent, linear-gradient(135deg, #f97316, #3b82f6));
  color: #12100c; font-size: 44px; display: grid; place-items: center;
  box-shadow: 0 20px 54px rgba(249, 115, 22, .4);
  animation: mfc-pop .65s cubic-bezier(.2, 1.5, .4, 1) both;
}
.mfc-thanks-hero h1 { font-size: clamp(24px, 4.5vw, 38px); margin: 0 0 8px; }
.mfc-thanks-hero p { color: var(--muted, #8b93a3); margin: 0 0 22px; }
.mfc-cf { position: fixed; top: -16px; width: 9px; height: 14px; z-index: 4000; border-radius: 2px; pointer-events: none; animation: mfc-cf-fall linear forwards; }
@keyframes mfc-cf-fall { to { transform: translate3d(var(--dx, 0), 108vh, 0) rotate(740deg); opacity: .9; } }
@keyframes mfc-pop { from { transform: scale(.35); opacity: 0; } }

/* ---------- ۶) حالت انگلیسی (LTR) ---------- */
html[dir="ltr"] body { font-family: Vazirmatn, Inter, Tahoma, Arial, sans-serif; letter-spacing: .1px; }
html[dir="ltr"] .mfc-hero-title, html[dir="ltr"] h1, html[dir="ltr"] h2, html[dir="ltr"] h3 { letter-spacing: -.2px; }

/* ---------- ۷) ریسپانسیو ---------- */
@media (max-width: 720px) {
  .mfc-f3d-stage { min-height: 300px; }
  .mfc-f3d-btn { width: 38px; height: 38px; font-size: 15px; }
  .mfc-co-step { font-size: 10.5px; }
  .mfc-co-step i { width: 38px; height: 38px; font-size: 16px; }
  .mfc-co-steps::before { top: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .mfc-pre-logo, .mfc-pre-bar i, .mfc-co-arrow, .mfc-cf, .mfc-thanks-tick { animation: none !important; }
  .mfc-co-panel, .mfc-co-step i { transition: none !important; }
}