/* ═══════════════════════════════════════════════════════
   AviationHub — CR-3 Flight Computer
   viewport (زوم/پن)  ›  stage (دیسک‌های چرخان)
═══════════════════════════════════════════════════════ */

.avhub-cr3 {
  --cr3-size: 560px;
  font-family: 'Inter', -apple-system, sans-serif;
  max-width: calc(var(--cr3-size) + 40px);
  margin: 0 auto;
  padding: 24px 20px 20px;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

/* ─ سربرگ ─ */
.avhub-cr3-head { text-align: center; margin-bottom: 16px; }
.avhub-cr3-title {
  font-size: 20px; font-weight: 600; color: #0F3460;
  margin: 0 0 6px; letter-spacing: -.01em;
}
.avhub-cr3-sub { font-size: 12.5px; color: #4A6B8A; margin: 0; line-height: 1.5; }

/* ─ تب‌های رو ─ */
.avhub-cr3-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.avhub-cr3-tab {
  background: #fff; border: 1px solid #dbe4ef; color: #4A6B8A;
  font-family: inherit; font-size: 13px; font-weight: 500;
  padding: 9px 20px; border-radius: 999px; cursor: pointer; transition: all .2s;
}
.avhub-cr3-tab:hover { border-color: #b9cbe0; color: #0F3460; }
.avhub-cr3-tab.is-active { background: #0F3460; border-color: #0F3460; color: #fff; }

/* ─ کادر نمایش (زوم و جابه‌جایی اینجا اعمال می‌شود) ─ */
.avhub-cr3-body { display: flex; justify-content: center; }
.avhub-cr3-side[hidden] { display: none !important; }

.avhub-cr3-viewport {
  position: relative;
  width: var(--cr3-size);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 40px -12px rgba(15,52,96,.35);
  overflow: hidden;
  touch-action: none;            /* کنترل کامل ژست‌ها با JS */
  user-select: none;
  cursor: grab;
  overscroll-behavior: contain;  /* صفحه پشت سر اسکرول نشود */
}
.avhub-cr3-viewport.is-dragging { cursor: grabbing; }
.avhub-cr3-viewport.is-zoomed { cursor: move; }

/* لایه‌ی داخلی که زوم/پن می‌شود */
.avhub-cr3-stage {
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
  transition: transform .18s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.avhub-cr3-viewport.is-dragging .avhub-cr3-stage { transition: none; }

/* هر لایه — <img> یا <div> حاوی SVG inline
   ابعاد و موقعیت از style اینلاین می‌آید (برای scale هر لایه) */
.avhub-cr3-layer {
  position: absolute;
  /* width/height/top/left از اینلاین‌استایل (config → scale) */
  object-fit: contain;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform;
  -webkit-user-drag: none;
  image-rendering: -webkit-optimize-contrast;  /* خطوط تیزتر هنگام زوم */
}
.avhub-cr3-layer > svg { width: 100%; height: 100%; display: block; }
.avhub-cr3-layer.is-rotatable { transition: transform .06s linear; }
.avhub-cr3-viewport.is-dragging .avhub-cr3-layer.is-rotatable { transition: none; }

/* ─ انتخاب لایه‌ی چرخان ─ */
.avhub-cr3-picks {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 14px; flex-wrap: wrap;
}
.avhub-cr3-picks-lbl {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #7A9BBE;
}
.avhub-cr3-pick {
  background: #fff; border: 1px solid #dbe4ef; color: #4A6B8A;
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: all .18s;
}
.avhub-cr3-pick:hover { border-color: #b9cbe0; color: #0F3460; }
.avhub-cr3-pick.is-active {
  background: #1A6ABF; border-color: #1A6ABF; color: #fff;
}

/* ─ پاورقی: زوم / زاویه / ریست ─ */
.avhub-cr3-foot {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 14px; flex-wrap: wrap;
}
.avhub-cr3-zoom {
  display: flex; align-items: center; gap: 4px;
  background: #fff; border: 1px solid #dbe4ef; border-radius: 999px; padding: 3px;
}
.avhub-cr3-zbtn {
  width: 32px; height: 32px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  color: #0F3460; font-size: 17px; font-weight: 600; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s;
}
.avhub-cr3-zbtn:hover { background: #eef2f8; }
.avhub-cr3-zlabel {
  font-size: 12px; font-weight: 600; color: #0F3460;
  min-width: 42px; text-align: center; font-variant-numeric: tabular-nums;
}
.avhub-cr3-angle {
  font-size: 12.5px; font-weight: 600; color: #0F3460;
  font-variant-numeric: tabular-nums;
  background: #eef2f8; border-radius: 999px; padding: 8px 14px;
  min-width: 62px; text-align: center;
}
.avhub-cr3-reset {
  background: none; border: 1px solid #dbe4ef; color: #4A6B8A;
  font-family: inherit; font-size: 12px; font-weight: 500;
  padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: all .18s;
}
.avhub-cr3-reset:hover { border-color: #1A6ABF; color: #1A6ABF; }

/* ─ موبایل ─ */
@media (max-width: 600px) {
  .avhub-cr3 { padding: 16px 10px; --cr3-size: 92vw; }
  .avhub-cr3-title { font-size: 17px; }
  .avhub-cr3-sub { font-size: 11.5px; }
  .avhub-cr3-tab { padding: 8px 14px; font-size: 12px; }
  .avhub-cr3-foot { gap: 10px; }
  .avhub-cr3-zbtn { width: 36px; height: 36px; }  /* هدف لمسی بزرگ‌تر */
  .avhub-cr3-pick { padding: 8px 14px; }
}

/* ─ بوم رسم (نقطه/خط — با دیسک رویی می‌چرخد) ─ */
.avhub-cr3-draw {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 50;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* ─ ابزارهای رسم ─ */
.avhub-cr3-tools {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
.avhub-cr3-tools-lbl {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #7A9BBE;
}
.avhub-cr3-tool {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #dbe4ef; color: #4A6B8A;
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: all .18s;
}
.avhub-cr3-tool:hover { border-color: #b9cbe0; color: #0F3460; }
.avhub-cr3-tool.is-active { background: #d81f26; border-color: #d81f26; color: #fff; }
.avhub-cr3-tool[data-tool="rotate"].is-active { background: #1A6ABF; border-color: #1A6ABF; }
.avhub-cr3-clear {
  background: none; border: 1px solid #dbe4ef; color: #4A6B8A;
  font-family: inherit; font-size: 12px; padding: 7px 14px;
  border-radius: 999px; cursor: pointer; transition: all .18s;
}
.avhub-cr3-clear:hover { border-color: #d81f26; color: #d81f26; }

/* در حالت رسم، نشانگر مداد شود */
.avhub-cr3.is-drawmode .avhub-cr3-viewport { cursor: crosshair; }

/* دکمه‌ی چرخش هم‌زمان (دیسک + نشانگر قفل‌شده) */
.avhub-cr3-pick-both.is-active { background: #0F3460; border-color: #0F3460; color: #fff; }

/* ════════════════════════════════════════════════════
   محافظت از دکمه‌ها در برابر استایل سراسری قالب
   (Hello Elementor به همه‌ی button زمینه/کادر/گوشه می‌دهد)
════════════════════════════════════════════════════ */
.avhub-cr3 button {
  -webkit-appearance: none !important;
  appearance: none !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* تب‌های رو */
.avhub-cr3 .avhub-cr3-tab {
  background: #fff !important; border: 1px solid #dbe4ef !important;
  color: #4A6B8A !important; border-radius: 999px !important;
  padding: 9px 20px !important; font-size: 13px !important; font-weight: 500 !important;
}
.avhub-cr3 .avhub-cr3-tab.is-active {
  background: #0F3460 !important; border-color: #0F3460 !important; color: #fff !important;
}

/* انتخاب دیسک: Disc / Cursor / Both */
.avhub-cr3 .avhub-cr3-pick {
  background: #fff !important; border: 1px solid #dbe4ef !important;
  color: #4A6B8A !important; border-radius: 999px !important;
  padding: 7px 16px !important; font-size: 12.5px !important; font-weight: 500 !important;
}
.avhub-cr3 .avhub-cr3-pick.is-active {
  background: #1A6ABF !important; border-color: #1A6ABF !important; color: #fff !important;
}
.avhub-cr3 .avhub-cr3-pick-both.is-active {
  background: #0F3460 !important; border-color: #0F3460 !important;
}

/* ابزار رسم: Move / Dot / Line */
.avhub-cr3 .avhub-cr3-tool {
  background: #fff !important; border: 1px solid #dbe4ef !important;
  color: #4A6B8A !important; border-radius: 999px !important;
  padding: 7px 14px !important; font-size: 12.5px !important; font-weight: 500 !important;
}
.avhub-cr3 .avhub-cr3-tool.is-active {
  background: #d81f26 !important; border-color: #d81f26 !important; color: #fff !important;
}
.avhub-cr3 .avhub-cr3-tool[data-tool="rotate"].is-active {
  background: #1A6ABF !important; border-color: #1A6ABF !important;
}

/* Clear و Reset */
.avhub-cr3 .avhub-cr3-clear,
.avhub-cr3 .avhub-cr3-reset {
  background: transparent !important; border: 1px solid #dbe4ef !important;
  color: #4A6B8A !important; border-radius: 999px !important;
  padding: 8px 16px !important; font-size: 12px !important; font-weight: 500 !important;
}
.avhub-cr3 .avhub-cr3-clear:hover { border-color: #d81f26 !important; color: #d81f26 !important; }
.avhub-cr3 .avhub-cr3-reset:hover { border-color: #1A6ABF !important; color: #1A6ABF !important; }

/* دکمه‌های زوم (باید دایره بمانند) */
.avhub-cr3 .avhub-cr3-zbtn {
  background: transparent !important; border: none !important;
  color: #0F3460 !important;
  width: 32px !important; height: 32px !important;
  min-width: 32px !important; max-width: 32px !important;
  border-radius: 50% !important; padding: 0 !important;
  font-size: 17px !important; font-weight: 600 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex: 0 0 auto !important;
}
.avhub-cr3 .avhub-cr3-zbtn:hover { background: #eef2f8 !important; }

/* عنوان‌ها هم از استایل قالب مصون بمانند */
.avhub-cr3 .avhub-cr3-title {
  font-size: 20px !important; font-weight: 600 !important; color: #0F3460 !important;
  margin: 0 0 6px !important; line-height: 1.3 !important;
}
.avhub-cr3 .avhub-cr3-sub {
  font-size: 12.5px !important; color: #4A6B8A !important; margin: 0 !important;
}

@media (max-width: 600px) {
  .avhub-cr3 .avhub-cr3-title { font-size: 17px !important; }
  .avhub-cr3 .avhub-cr3-tab { padding: 8px 14px !important; font-size: 12px !important; }
  .avhub-cr3 .avhub-cr3-zbtn { width: 36px !important; height: 36px !important; min-width: 36px !important; max-width: 36px !important; }
}

/* ═══════════════════════════════════════════════════════
   محافظت از دکمه‌ها در برابر استایل سراسری قالب
   (Hello Elementor به همه‌ی button زمینه/کادر تحمیل می‌کند)
═══════════════════════════════════════════════════════ */
.avhub-cr3 button {
  -webkit-appearance: none !important;
  appearance: none !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  min-height: 0 !important;
  width: auto !important;
  margin: 0 !important;
}

/* تب‌های رو (Calculator / Wind) */
.avhub-cr3 .avhub-cr3-tab {
  background: #fff !important;
  border: 1px solid #dbe4ef !important;
  color: #4A6B8A !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 20px !important;
  border-radius: 999px !important;
}
.avhub-cr3 .avhub-cr3-tab:hover { border-color: #b9cbe0 !important; color: #0F3460 !important; }
.avhub-cr3 .avhub-cr3-tab.is-active {
  background: #0F3460 !important; border-color: #0F3460 !important; color: #fff !important;
}

/* انتخاب دیسک چرخان (Disc / Cursor / Both) */
.avhub-cr3 .avhub-cr3-pick {
  background: #fff !important;
  border: 1px solid #dbe4ef !important;
  color: #4A6B8A !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
}
.avhub-cr3 .avhub-cr3-pick:hover { border-color: #b9cbe0 !important; color: #0F3460 !important; }
.avhub-cr3 .avhub-cr3-pick.is-active {
  background: #1A6ABF !important; border-color: #1A6ABF !important; color: #fff !important;
}
.avhub-cr3 .avhub-cr3-pick-both.is-active {
  background: #0F3460 !important; border-color: #0F3460 !important;
}

/* ابزار رسم (Move / Dot / Line) */
.avhub-cr3 .avhub-cr3-tool {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #fff !important;
  border: 1px solid #dbe4ef !important;
  color: #4A6B8A !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
}
.avhub-cr3 .avhub-cr3-tool:hover { border-color: #b9cbe0 !important; color: #0F3460 !important; }
.avhub-cr3 .avhub-cr3-tool.is-active {
  background: #d81f26 !important; border-color: #d81f26 !important; color: #fff !important;
}
.avhub-cr3 .avhub-cr3-tool[data-tool="rotate"].is-active {
  background: #1A6ABF !important; border-color: #1A6ABF !important;
}

/* پاک‌کردن نشانه‌ها */
.avhub-cr3 .avhub-cr3-clear {
  background: #fff !important;
  border: 1px solid #dbe4ef !important;
  color: #4A6B8A !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
}
.avhub-cr3 .avhub-cr3-clear:hover { border-color: #d81f26 !important; color: #d81f26 !important; }

/* دکمه‌های زوم + / − */
.avhub-cr3 .avhub-cr3-zbtn {
  background: transparent !important;
  border: none !important;
  color: #0F3460 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.avhub-cr3 .avhub-cr3-zbtn:hover { background: #eef2f8 !important; }

/* ریست */
.avhub-cr3 .avhub-cr3-reset {
  background: #fff !important;
  border: 1px solid #dbe4ef !important;
  color: #4A6B8A !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
}
.avhub-cr3 .avhub-cr3-reset:hover { border-color: #1A6ABF !important; color: #1A6ABF !important; }

/* جعبه‌ی زوم و برچسب‌ها */
.avhub-cr3 .avhub-cr3-zoom {
  background: #fff !important;
  border: 1px solid #dbe4ef !important;
  border-radius: 999px !important;
  padding: 3px !important;
}
.avhub-cr3 .avhub-cr3-zlabel { color: #0F3460 !important; font-size: 12px !important; }

/* ═══════════════════════════════════════════════════════
   رفع سرریز افقی در موبایل
   علت: .avhub-cr3-side یک flex item با min-width:auto بود و
   نمی‌توانست کوچک‌تر از محتوایش شود؛ ضمناً --cr3-size به‌صورت
   inline از شورت‌کد می‌آید و media query را زیر می‌گرفت.
   راه‌حل: min() برای عرض + min-width:0 روی flex itemها.
═══════════════════════════════════════════════════════ */
.avhub-cr3 {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: clip;
}
.avhub-cr3 * { box-sizing: border-box; }

/* body به‌جای flex، بلوک ساده — تا وابستگی حلقوی عرض ایجاد نشود */
.avhub-cr3-body {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
}
/* side عرض قطعی می‌گیرد (نه وابسته به محتوا) */
.avhub-cr3-side {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.avhub-cr3-side[hidden] { display: none !important; }
/* حالا 100% معنای روشن دارد: عرض side */
.avhub-cr3-viewport {
  width: min(var(--cr3-size), 100%) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}

/* ردیف‌های کنترل هم در موبایل نشکنند */
.avhub-cr3-tabs,
.avhub-cr3-picks,
.avhub-cr3-tools,
.avhub-cr3-foot {
  max-width: 100%;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .avhub-cr3 { padding: 14px 10px !important; }
  /* عرض امن: کل عرض صفحه منهای پدینگ */
  .avhub-cr3-viewport { width: min(var(--cr3-size), 100%, calc(100vw - 28px)) !important; }
  .avhub-cr3-title { font-size: 17px !important; }
  .avhub-cr3-sub { font-size: 11.5px !important; line-height: 1.5 !important; }
  .avhub-cr3-tab { padding: 8px 14px !important; font-size: 12px !important; }
  .avhub-cr3-pick,
  .avhub-cr3-tool,
  .avhub-cr3-clear { padding: 7px 13px !important; font-size: 12px !important; }
  .avhub-cr3-picks-lbl,
  .avhub-cr3-tools-lbl { font-size: 10px !important; }
  .avhub-cr3-picks, .avhub-cr3-tools { gap: 6px !important; margin-top: 10px !important; }
  .avhub-cr3-foot { gap: 10px !important; margin-top: 12px !important; }
}