/* ============================================================
   orthopro.ir — page.css — استایل صفحات محتوا — نسخهٔ ۲.۰
   افزودنی‌ها: خلاصهٔ ابتدای صفحه · فهرست پرشی · باکس نکتهٔ طلایی
   برچسب فاز درمان · آیکون بخش‌ها · جداکنندهٔ تصویری
   ============================================================ */

/* ————— Hero ————— */
.main .hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #F4F8FC 0%, #EAF2F9 60%, #E3EEF8 100%);
  border-radius: 22px;
  padding: 34px 30px 30px;
}
.main .hero::before,
.main .hero::after {
  content: '✦';
  position: absolute;
  color: rgba(30,58,95,.07);
  font-size: 90px;
  line-height: 1;
  pointer-events: none;
}
.main .hero::before { top: -18px; left: -8px; }
.main .hero::after  { bottom: -30px; right: 12%; font-size: 130px; }
.main .hero h1 {
  position: relative;
  color: #1E3A5F;
  font-size: clamp(24px, 4.2vw, 34px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 6px 0 10px;
}
.main .hero p {
  position: relative;
  color: #4A5D74;
  font-size: 15.5px;
  line-height: 1.9;
  max-width: 640px;
  margin: 0 0 14px;
}
.main .hero .kicker { position: relative; }

/* ————— چیپ‌ها ————— */
.hero-chips { position: relative; }
.hero-chips .chip {
  background: #fff;
  border: 1px solid #D8E4EF;
  color: #1E3A5F;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(30,58,95,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.hero-chips .chip:hover {
  transform: translateY(-2px);
  border-color: #7FB3E0;
  box-shadow: 0 5px 12px rgba(30,58,95,.10);
}
.hero-chips a.chip {
  background: linear-gradient(135deg, #2A5A8F, #1E3A5F);
  color: #fff;
  border: none;
}

/* ————— خلاصه برای عجله‌کننده‌ها ————— */
.summary-box {
  position: relative;
  overflow: hidden;
  border: 1px solid #CFE3F4;
  border-radius: 16px;
  background: linear-gradient(135deg, #EFF6FC, #E7F1FA);
  padding: 16px 18px;
  margin-top: 14px;
}
.summary-box .sum-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1E3A5F;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 8px;
}
.summary-box .sum-title .ic { color: #2A5A8F; flex: 0 0 auto; }
.summary-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.summary-box li {
  position: relative;
  padding-right: 18px;
  color: #37485C;
  font-size: 14.5px;
  line-height: 2;
}
.summary-box li::before {
  content: '';
  position: absolute;
  right: 2px;
  top: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7FB3E0;
}

/* ————— فهرست پرشی ————— */
.toc-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.toc-strip a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #D8E4EF;
  color: #33506F;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(30,58,95,.05);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.toc-strip a:hover {
  transform: translateY(-2px);
  border-color: #7FB3E0;
  box-shadow: 0 6px 14px rgba(30,58,95,.10);
}
.toc-strip a .ic { color: #7FB3E0; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }

/* ————— سربرگ بخش‌ها + آیکون ————— */
.sec-head h2 {
  color: #1E3A5F;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.sec-head p {
  color: #5A6C80;
  font-size: 14px;
}
.sec-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.sec-head .kicker .ic { color: #7FB3E0; }

/* ————— کارت‌های توضیح ————— */
.main .blk > .card {
  position: relative;
  border: 1px solid #E4EBF2;
  border-right: 4px solid #7FB3E0;
  border-radius: 16px;
  padding: 20px 22px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(30,58,95,.05);
  transition: box-shadow .18s ease, transform .18s ease;
}
.main .blk > .card:hover {
  box-shadow: 0 8px 20px rgba(30,58,95,.09);
  transform: translateY(-2px);
}
.main .blk > .card p {
  font-size: 15px;
  line-height: 2.05;
  color: #37485C;
  text-align: justify;
}
.main section.blk:nth-of-type(2) > .card { border-right-color: #8E7CC3; }
.main section.blk:nth-of-type(3) > .card { border-right-color: #E0A458; }

/* ————— جداکنندهٔ تصویری بین بخش‌ها ————— */
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 2px;
  color: rgba(30,58,95,.35);
  font-size: 15px;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C9DAEA, transparent);
}
.divider span { letter-spacing: 6px; }

/* ————— باکس نکتهٔ طلایی ————— */
.gold-box {
  position: relative;
  overflow: hidden;
  border: 1px solid #E8DDBF;
  border-right: 4px solid #E0A458;
  border-radius: 14px;
  background: linear-gradient(135deg, #FDF9EF, #FBF4E4);
  padding: 14px 18px;
  margin-top: 12px;
  box-shadow: 0 3px 10px rgba(224,164,88,.12);
}
.gold-box .gold-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.gold-box .ic {
  color: #C9962F;
  flex: 0 0 auto;
  margin-top: 3px;
}
.gold-box .gold-text {
  color: #6B5518;
  font-size: 14.5px;
  line-height: 1.95;
  font-weight: 600;
}

/* ————— کارت‌های درمان ————— */
.grid.g3 { gap: 16px; }
.grid.g3 .card.svc {
  position: relative;
  overflow: visible;
  border: 1px solid #E4EBF2;
  border-radius: 18px;
  background: #fff;
  padding: 0;
  box-shadow: 0 3px 10px rgba(30,58,95,.05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.grid.g3 .card.svc:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(30,58,95,.12);
}
.grid.g3 .card.svc h3 {
  position: relative;
  margin: 0;
  padding: 20px 18px 12px;
  background: linear-gradient(135deg, #F2F7FC, #EAF2F9);
  border-bottom: 1px solid #E4EBF2;
  color: #1E3A5F;
  font-size: 15.5px;
  font-weight: 800;
}
.grid.g3 .card.svc h3::before {
  content: '✦';
  display: inline-block;
  margin-left: 8px;
  color: #7FB3E0;
  font-size: 14px;
}
.grid.g3 .card.svc p {
  margin: 0;
  padding: 16px 18px 18px;
  font-size: 14.5px;
  line-height: 2;
  color: #43556A;
  text-align: justify;
}
.grid.g3 .card.svc:nth-child(1) h3 { border-top: 3px solid #7FB3E0; }
.grid.g3 .card.svc:nth-child(2) h3 { border-top: 3px solid #8E7CC3; }
.grid.g3 .card.svc:nth-child(3) h3 { border-top: 3px solid #E0A458; }

/* ————— برچسب فاز — کپسول وسط نوار بالای کارت ————— */
.phase-tag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-block;
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 3px 8px rgba(30,58,95,.22);
  white-space: nowrap;
}
.phase-1 { background: linear-gradient(135deg, #3A78B8, #1E5A8F); }
.phase-2 { background: linear-gradient(135deg, #8E7CC3, #5B4A94); }
.phase-3 { background: linear-gradient(135deg, #D9A84E, #B8860B); }

/* ————— باکس راهنمای مراجعه ————— */
.main .table-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid #D8E4EF;
  border-radius: 18px;
  background: linear-gradient(135deg, #F4F8FC, #EDF4FA);
  box-shadow: 0 3px 10px rgba(30,58,95,.05);
}
.main .table-wrap::before {
  content: '✦';
  position: absolute;
  left: -14px;
  bottom: -34px;
  font-size: 110px;
  color: rgba(30,58,95,.06);
  pointer-events: none;
}
.main .table-wrap p {
  position: relative;
  font-size: 15px;
  line-height: 2.05;
  color: #37485C;
}

/* ————— دکمه‌های CTA ————— */
.hero-cta { gap: 12px; }
.hero-cta .btn {
  border-radius: 14px;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.hero-cta .btn:hover { transform: translateY(-2px); }
.hero-cta .btn-primary {
  background: linear-gradient(135deg, #2A5A8F, #1E3A5F);
  box-shadow: 0 6px 16px rgba(30,58,95,.25);
}
.hero-cta .btn-primary:hover { box-shadow: 0 10px 22px rgba(30,58,95,.32); filter: brightness(1.06); }

/* ————— موبایل ————— */
@media (max-width: 640px) {
  .main .hero { padding: 26px 20px 24px; }
  .main .hero::after { font-size: 80px; }
  .main .blk > .card { padding: 16px 16px; }
  .grid.g3 .card.svc h3 { padding: 20px 14px 10px; padding-left: 74px; }
  .grid.g3 .card.svc p { padding: 14px 14px 16px; }
  .toc-strip a { font-size: 12px; padding: 6px 11px; }
}

/* ————— چاپ ————— */
@media print {
  .topbar, .sidebar, .overlay, .sb-close, .hero-cta, .toc-strip { display: none !important; }
  .main .hero, .main .blk > .card, .grid.g3 .card.svc, .main .table-wrap,
  .summary-box, .gold-box {
    box-shadow: none !important;
    transform: none !important;
  }
}