/* ==========================================================================
   SERVICE DETAIL PAGES — Wise Design System
   ========================================================================== */

/* Hero — sage canvas band */
.service-detail-hero { padding: calc(var(--nav-height) + var(--s-2xl)) var(--s-xl) var(--s-2xl); max-width: var(--content-max); margin: 0 auto; }
.service-detail-hero .service-detail-hero-label { display: block; font-size: 14px; font-weight: 600; color: var(--w-primary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--s-md); }
.service-detail-hero .service-detail-hero-title { font-size: 64px; font-weight: 900; line-height: 0.85; color: var(--w-ink); letter-spacing: -0.02em; margin-bottom: var(--s-lg); }
.service-detail-hero .service-detail-hero-sub { font-size: 20px; font-weight: 400; line-height: 1.5; color: var(--w-body); max-width: 620px; }
html[lang="fa"] .service-detail-hero .service-detail-hero-title { font-size: clamp(2rem, 6vw, 4rem); font-weight: 800; line-height: 1.15; letter-spacing: 0; }
html[lang="fa"] .service-detail-hero .service-detail-hero-sub { font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.6; }

/* Content */
.service-detail-content { background: var(--w-canvas); padding: var(--s-3xl) var(--s-xl); }
.service-detail-inner { max-width: 860px; margin: 0 auto; }
.service-section { margin-bottom: var(--s-3xl); }
.service-section:last-child { margin-bottom: 0; }
.service-section .mono-tag { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--w-primary); display: block; margin-bottom: var(--s-md); }
.service-section h2 { font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; color: var(--w-ink); margin-bottom: var(--s-lg); }
.service-section h3 { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--w-ink); margin-bottom: var(--s-md); margin-top: var(--s-xl); }
.service-section p { font-size: 16px; color: var(--w-body); line-height: 1.5; margin-bottom: var(--s-lg); }
.service-intro { font-size: 20px !important; color: var(--w-ink) !important; line-height: 1.5 !important; }
html[lang="fa"] .service-section h2 { font-size: clamp(1.3rem, 3.5vw, 2rem); letter-spacing: 0; line-height: 1.4; }
html[lang="fa"] .service-section p { font-size: clamp(0.95rem, 2vw, 1rem); line-height: 1.8; }

/* Lists */
.service-section ul { list-style: none; padding: 0; margin: var(--s-lg) 0 var(--s-xl); }
.service-section ul li { position: relative; padding: var(--s-xs) 0 var(--s-xs) 24px; font-size: 15px; color: var(--w-body); line-height: 1.5; }
html[dir="rtl"] .service-section ul li { padding: var(--s-xs) 24px var(--s-xs) 0; }
.service-section ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: var(--w-primary); border-radius: 50%; }
html[dir="rtl"] .service-section ul li::before { left: auto; right: 0; }

/* Eligibility Cards */
.service-eligibility-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s-lg); margin: var(--s-xl) 0; }
.service-eligibility-card { background: var(--w-canvas-soft); border-radius: var(--r-xl); padding: var(--s-xl); transition: background 0.3s ease; }
.service-eligibility-card:hover { background: var(--w-primary-pale); }
.service-eligibility-card .card-icon { width: 40px; height: 40px; background: var(--w-canvas-soft); color: var(--w-ink); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--s-md); transition: all 0.3s ease; }
.service-eligibility-card:hover .card-icon { background: var(--w-primary); color: var(--w-on-primary); }
.service-eligibility-card h4 { font-size: 16px; font-weight: 600; color: var(--w-ink); margin-bottom: var(--s-sm); line-height: 1.3; }
.service-eligibility-card p { font-size: 14px; color: var(--w-mute); line-height: 1.43; margin-bottom: 0; }

/* Checklist */
.service-checklist { list-style: none; padding: 0; margin: var(--s-xl) 0; }
.service-checklist li { position: relative; padding: var(--s-md) 0 var(--s-md) 32px; font-size: 15px; color: var(--w-body); line-height: 1.5; border-bottom: 1px solid var(--w-canvas-soft); }
html[dir="rtl"] .service-checklist li { padding: var(--s-md) 32px var(--s-md) 0; }
.service-checklist li::before { content: ''; position: absolute; left: 0; top: 16px; width: 18px; height: 18px; background: var(--w-canvas-soft); border-radius: 6px; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23868685' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
html[dir="rtl"] .service-checklist li::before { left: auto; right: 0; }
.service-checklist li:last-child { border-bottom: none; }

/* Process Steps */
.service-process { counter-reset: step; list-style: none; padding: 0; margin: var(--s-xl) 0; }
.service-process li { counter-increment: step; position: relative; padding: var(--s-lg) 0 var(--s-lg) 56px; border-left: 2px solid var(--w-canvas-soft); margin-left: 19px; }
html[dir="rtl"] .service-process li { padding: var(--s-lg) 56px var(--s-lg) 0; border-left: none; border-right: 2px solid var(--w-canvas-soft); margin-left: 0; margin-right: 19px; }
.service-process li::before { content: counter(step, decimal-leading-zero); position: absolute; left: -20px; top: var(--s-lg); width: 36px; height: 36px; background: var(--w-canvas); border: 2px solid var(--w-canvas-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--w-mute); transition: all 0.3s ease; }
html[dir="rtl"] .service-process li::before { left: auto; right: -20px; }
.service-process li:hover::before { background: var(--w-primary); border-color: var(--w-primary); color: var(--w-on-primary); }
.service-process li:last-child { border-color: transparent; }
.service-process li h4 { font-size: 16px; font-weight: 600; color: var(--w-ink); margin-bottom: var(--s-xs); line-height: 1.3; }
.service-process li p { font-size: 14px; color: var(--w-mute); line-height: 1.43; margin-bottom: 0; }

/* Info Box — pale red callout */
.service-info-box { background: var(--w-primary-pale); border-radius: var(--r-xl); padding: var(--s-xl) var(--s-2xl); margin: var(--s-xl) 0; border-left: 3px solid var(--w-primary); }
html[dir="rtl"] .service-info-box { border-left: none; border-right: 3px solid var(--w-primary); }
.service-info-box h4 { font-size: 16px; font-weight: 600; color: var(--w-ink); margin-bottom: var(--s-sm); }
.service-info-box p { font-size: 14px; color: var(--w-body); line-height: 1.5; margin-bottom: 0; }

/* Fee Table */
.service-fee-table { width: 100%; border-collapse: collapse; margin: var(--s-xl) 0; font-size: 14px; }
.service-fee-table th { text-align: left; padding: var(--s-md) var(--s-lg); background: var(--w-canvas-soft); color: var(--w-ink); font-weight: 600; border-radius: var(--r-sm) var(--r-sm) 0 0; }
html[dir="rtl"] .service-fee-table th { text-align: right; }
.service-fee-table td { padding: var(--s-md) var(--s-lg); border-bottom: 1px solid var(--w-canvas-soft); color: var(--w-body); line-height: 1.43; }
.service-fee-table tr:last-child td { border-bottom: none; }

/* CTA */
.service-detail-cta { background: var(--w-canvas-soft); padding: var(--s-2xl) 0; }
.service-detail-cta .cta-inner { max-width: 860px; margin: 0 auto; padding: 0 var(--s-xl); display: flex; align-items: center; justify-content: space-between; gap: var(--s-2xl); }
.service-detail-cta .cta-text h2 { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--w-ink); margin-bottom: var(--s-sm); }
.service-detail-cta .cta-text p { font-size: 15px; color: var(--w-body); line-height: 1.5; max-width: 400px; }
.service-detail-cta .cta-btn { display: inline-flex; align-items: center; gap: var(--s-sm); background: var(--w-primary); color: var(--w-on-primary); padding: var(--s-md) var(--s-xl); height: 48px; border-radius: var(--r-xl); font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease; }
.service-detail-cta .cta-btn:hover { background: var(--w-primary-active); }
.service-detail-cta .cta-btn svg { transition: transform 0.2s ease; }
.service-detail-cta .cta-btn:hover svg { transform: translateX(3px); }
html[dir="rtl"] .service-detail-cta .cta-btn svg { transform: scaleX(-1); }
html[dir="rtl"] .service-detail-cta .cta-btn:hover svg { transform: translateX(-3px); }

@media (max-width: 768px) {
  .service-detail-hero .service-detail-hero-title { font-size: 40px; }
  .service-section h2 { font-size: 24px; }
  .service-section p, .service-intro { font-size: 15px !important; }
  .service-eligibility-grid { grid-template-columns: 1fr; }
  .service-detail-cta .cta-inner { flex-direction: column; text-align: center; }
  .service-detail-cta .cta-text p { margin: 0 auto; }
}
@media (max-width: 480px) {
  .service-detail-hero .service-detail-hero-title { font-size: 28px; }
  .service-section h2 { font-size: 22px; }
}