/* TraderFa DS — ORDER page (/order). p34 (8.3). Loaded only by Views/Home/Order.cshtml via PageStyles.
   Rhythm: product header (copy + code visual + price box) → benefits → packages compare → process →
   guidelines → FAQ → form (+ contact aside) · sticky mobile buy bar (js/ds/order.js). */
.od { display: grid; gap: clamp(40px, 28px + 2.6vw, 72px); padding-bottom: 24px; }
.od > * { min-width: 0; }
.od-sec { display: grid; gap: clamp(18px, 12px + 1.4vw, 30px); }

/* section heads */
.od-head { display: grid; gap: 6px; justify-items: center; text-align: center; }
.od-head--start { justify-items: start; text-align: start; }
.od-head > * { margin: 0; }
.od-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-black); color: var(--ds-primary); }
.od-kicker::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; }
.od-head__title { font-size: var(--ds-fs-h2); line-height: 1.5; font-weight: var(--ds-fw-black); color: var(--ds-text); text-wrap: balance; }
.od-head p:not(.od-kicker) { font-size: var(--ds-fs-sm); line-height: 1.9; color: var(--ds-text-2); max-width: 42rem; text-wrap: pretty; }

/* 1. product header */
.od-hero-wrap { padding-top: clamp(12px, 8px + 1vw, 28px); }
.od-hero { position: relative; overflow: hidden; padding: clamp(22px, 14px + 2.6vw, 52px); }
.od-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, hsl(199 89% 60% / .55), transparent); }
.od-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: clamp(24px, 16px + 3vw, 56px); align-items: center; }
.od-hero__copy { display: grid; gap: 16px; justify-items: start; }
.od-hero__copy > * { margin: 0; }
.od-hero__title { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); line-height: 1.45; font-weight: var(--ds-fw-black); color: var(--ds-text); text-wrap: balance; }
.od-hero__lead { font-size: var(--ds-fs-body); line-height: 2; color: var(--ds-text-2); max-width: 36rem; }
.od-hero__lead strong { color: var(--ds-text); font-weight: var(--ds-fw-black); }
.od-code { display: inline-block; margin-inline: 2px; padding: 1px 8px; border-radius: var(--ds-r-sm); font: 700 .82em/1.8 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ds-primary); background: var(--ds-primary-soft); }
.od-hero__facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.od-hero__facts li { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: var(--ds-r-pill);
  font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); color: var(--ds-text); background: var(--ds-surface-2); box-shadow: inset 0 0 0 1px var(--ds-line); }
.od-hero__facts .icon { width: 14px; height: 14px; color: var(--ds-up-ink); }
.od-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }

.od-hero__visual { position: relative; display: grid; gap: 12px; }
.od-code-card { border-radius: var(--ds-r-lg); overflow: hidden; background: hsl(222 32% 9%); box-shadow: 0 18px 40px -18px hsl(222 60% 10% / .55), inset 0 0 0 1px hsl(0 0% 100% / .08); }
.od-code-card__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: hsl(222 28% 13%); color: hsl(215 20% 65%); font: 600 11px/1 ui-monospace, Menlo, Consolas, monospace; direction: ltr; }
.od-code-card__bar i { width: 9px; height: 9px; border-radius: 50%; background: hsl(0 80% 62%); }
.od-code-card__bar i:nth-child(2) { background: hsl(45 95% 58%); }
.od-code-card__bar i:nth-child(3) { background: hsl(142 65% 48%); }
.od-code-card__bar span { margin-inline-start: 8px; }
.od-code-card__body { margin: 0; padding: 16px 18px; text-align: left; white-space: pre; overflow-x: auto; color: hsl(210 30% 88%);
  font: 500 12.5px/1.85 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.od-code-card__body b { color: hsl(215 15% 55%); font-weight: 500; }
.od-code-card__body em { color: hsl(199 90% 66%); font-style: normal; }
.od-code-card__body s { color: hsl(95 55% 65%); text-decoration: none; }
.od-code-card__body u { color: hsl(30 95% 66%); text-decoration: none; }
.od-price { display: grid; gap: 2px; padding: 14px 18px; border-radius: var(--ds-r-lg); background: var(--ds-surface-1); box-shadow: inset 0 0 0 1px var(--ds-line), var(--ds-shadow-1); }
.od-price__label { font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-bold); color: var(--ds-text-3); }
.od-price__value { font-size: 1.35rem; font-weight: var(--ds-fw-black); color: var(--ds-up-ink); }
.od-price__note { font-size: var(--ds-fs-xs); color: var(--ds-text-2); line-height: 1.8; }
.od-stat { position: absolute; inset-block-start: -14px; inset-inline-start: -14px; display: grid; justify-items: center; padding: 8px 14px; border-radius: var(--ds-r-lg);
  background: var(--ds-surface-1); box-shadow: inset 0 0 0 1px var(--ds-line), var(--ds-shadow-1); }
.od-stat b { font-size: 1.15rem; font-weight: var(--ds-fw-black); color: var(--ds-primary); line-height: 1.3; }
.od-stat span { font-size: var(--ds-fs-2xs); color: var(--ds-text-2); }

/* 2. benefits */
.od-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.od-benefit { display: grid; gap: 8px; align-content: start; justify-items: start; padding: 20px; }
.od-benefit > * { margin: 0; }
.od-benefit h3 { font-size: var(--ds-fs-body); font-weight: var(--ds-fw-black); color: var(--ds-text); }
.od-benefit p { font-size: var(--ds-fs-sm); line-height: 1.9; color: var(--ds-text-2); }

/* 3. packages */
.od-packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.od-pk { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.od-pk > * { margin: 0; }
.od-pk.is-featured { box-shadow: inset 0 0 0 2px var(--ds-primary), 0 20px 44px -24px hsl(199 89% 45% / .55); }
.od-pk__badge { position: absolute; inset-block-start: -11px; inset-inline-end: 18px; padding: 3px 12px; border-radius: var(--ds-r-pill);
  font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-black); color: #fff; background: var(--ds-primary); }
.od-pk__top { display: flex; align-items: center; gap: 12px; }
.od-pk__top h3 { margin: 0; font-size: 1.05rem; font-weight: var(--ds-fw-black); color: var(--ds-text); }
.od-pk__lang { display: block; font: 700 11px/1.8 ui-monospace, Menlo, Consolas, monospace; color: var(--ds-text-3); text-align: right; }
.od-pk__lead { font-size: var(--ds-fs-sm); line-height: 1.9; color: var(--ds-text-2); }
.od-pk__list { list-style: none; padding: 0; display: grid; gap: 8px; flex: 1; }
.od-pk__list li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--ds-fs-sm); line-height: 1.8; color: var(--ds-text); }
.od-pk__list .icon { flex: none; width: 16px; height: 16px; margin-top: 4px; color: var(--ds-up-ink); }
.od-pk__foot { display: grid; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--ds-line); }
.od-pk__price { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); color: var(--ds-text-2); text-align: center; }

/* 4. process */
.od-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; counter-reset: od; }
.od-steps li { position: relative; display: grid; justify-items: center; gap: 8px; padding: 18px 10px; text-align: center; border-radius: var(--ds-r-lg);
  background: var(--ds-surface-1); box-shadow: inset 0 0 0 1px var(--ds-line); }
.od-steps b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-black);
  color: var(--ds-primary); background: var(--ds-primary-soft); }
.od-steps .icon { width: 20px; height: 20px; color: var(--ds-text-3); }
.od-steps span { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); color: var(--ds-text); }
.od-steps li:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: -10px; width: 8px; height: 2px; background: var(--ds-line); }

/* 5. guidelines */
.od-rules { display: grid; gap: 18px; padding: clamp(20px, 14px + 1.6vw, 34px); }
.od-rules__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 22px; counter-reset: odr; }
.od-rules__list li { counter-increment: odr; display: flex; align-items: flex-start; gap: 10px; font-size: var(--ds-fs-sm); line-height: 1.9; color: var(--ds-text-2); }
.od-rules__list li::before { content: counter(odr, persian); flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; border-radius: var(--ds-r-sm);
  font-size: 11px; font-weight: var(--ds-fw-black); color: var(--ds-text-2); background: var(--ds-surface-2); box-shadow: inset 0 0 0 1px var(--ds-line); }

/* 6. FAQ */
.od-faq { max-width: 860px; margin-inline: auto; width: 100%; }

/* 7. order form */
.od-order { scroll-margin-top: 80px; }
.od-order__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
.od-form { position: relative; padding: clamp(20px, 14px + 1.8vw, 36px); }
.od-form::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--ds-primary), transparent); opacity: .6; }
.od-form textarea, .od-form input { min-height: 48px; }
.od-order__aside { display: grid; gap: 16px; }
.od-aside-stat { padding: 22px; text-align: center; }
.od-aside-stat .accent-gradient-text { font-size: 2.2rem; font-weight: var(--ds-fw-black); line-height: 1.4; }
.od-aside-stat p { margin: 4px 0 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2); }

/* code runs keep Latin digits: the site font (FaNum) would render 9/21 as Persian digits */
.od-code, .od-code-card, .od-code-card *, .od-pk__lang { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace !important; }

/* sticky mobile buy bar */
.od-sticky { display: none; }

@media (max-width: 1023.98px) {
  .od-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .od-hero__visual { max-width: 520px; width: 100%; justify-self: center; }
  .od-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .od-packages { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; width: 100%; }
  .od-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .od-steps li:nth-child(3)::after { display: none; }
  .od-rules__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .od-order__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  /* sits above the site bottom nav (.tf-bottomnav, ~70px, z 90) and leaves the inline-end corner to the back-to-top button */
  .od-sticky:not([hidden]) { position: fixed; z-index: 85; inset-inline-start: 10px; inset-inline-end: 66px; inset-block-end: calc(80px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 10px; border-radius: var(--ds-r-lg);
    background: color-mix(in srgb, var(--ds-surface-1) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: inset 0 0 0 1px var(--ds-line), 0 14px 34px -12px hsl(222 50% 8% / .45);
    transform: translateY(0); transition: transform var(--ds-dur-1, .2s) ease, opacity var(--ds-dur-1, .2s) ease; }
  .od-sticky.is-off { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .od-sticky__txt { display: grid; padding-inline-start: 6px; line-height: 1.5; }
  .od-sticky__txt b { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-black); color: var(--ds-text); }
  .od-sticky__txt span { font-size: var(--ds-fs-2xs); color: var(--ds-up-ink); font-weight: var(--ds-fw-bold); }
  .od-sticky .btn { flex: none; min-height: 44px; }
  .od { padding-bottom: 72px; }
  .od-stat { inset-block-start: -10px; inset-inline-start: -4px; }
  .od-hero__cta .btn { flex: 1 1 auto; }
  .od-rules__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479.98px) {
  .od-benefits { grid-template-columns: minmax(0, 1fr); }
  .od-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .od-steps li::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .od-sticky:not([hidden]) { transition: none; } }