/* ============================================================
   الخدمة المفردة (service.php) — هيرو مدمج + بودي أبيض
   • هيرو داكن صغير: اسم الخدمة + ملخّص فقط.
   • بودي أبيض دائم: التفاصيل + المميزات (يظهر دائماً).
   ============================================================ */
.sv-page{
  --c-accent: var(--accent,#1f9296);
  --c-ink:    var(--ink,#0d2b2d);
  --c-paper:  var(--paper,#fff);
  --c-cream:  var(--cream,#f3f5f8);
  --c-muted:  var(--muted,#5e7a7b);
  background:var(--paper,#fff);
}

/* ===== هيرو مدمج (اسم الخدمة) ===== */
#sv-section-hero{position:relative;overflow:hidden;padding:64px 0 72px;background:var(--sv-hero-bg,var(--c-ink));text-align:center}
#sv-section-hero .container{position:relative;z-index:2}
.sv-deco-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--c-accent) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--c-accent) 8%,transparent) 1px,transparent 1px);
  background-size:64px 64px;opacity:.45;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000,transparent);
  mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000,transparent)}
.sv-deco-glow{position:absolute;top:-160px;inset-inline-start:50%;transform:translateX(-50%);width:520px;height:520px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--c-accent) 18%,transparent),transparent 62%)}

.sv-back{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--sv-back,color-mix(in srgb,var(--c-accent) 78%,#fff));text-decoration:none;margin-bottom:30px;position:relative;z-index:2;transition:gap .25s,opacity .25s}
.sv-back:hover{gap:13px;opacity:.85}
.sv-back svg{width:17px!important;height:17px!important;max-width:17px;flex:none}
html[dir="rtl"] .sv-back svg{transform:scaleX(-1)}

.sv-hero-ico{display:flex;width:var(--sv-ico-size,64px);height:var(--sv-ico-size,64px);border-radius:18px;background:var(--sv-ico,var(--c-accent));align-items:center;justify-content:center;margin:0 auto 22px;box-shadow:0 14px 32px color-mix(in srgb,var(--c-accent) 38%,transparent)}
.sv-hero-ico svg{width:auto!important;height:auto!important;max-width:60%;max-height:60%;flex:none;color:#fff;stroke:currentColor}
.sv-hero-ico svg *{stroke:currentColor}
.sv-hero-title{font-size:var(--sv-title-size,clamp(30px,4.2vw,48px));font-weight:800;margin:0 0 16px;letter-spacing:-.6px;line-height:1.2;color:var(--sv-title,#fff)}
.sv-hero-lead{font-size:var(--sv-lead-size,17px);line-height:1.9;color:var(--sv-lead,rgba(255,255,255,.78));margin:0 auto;font-weight:300;max-width:600px}

/* فاصل ذهبي ناعم */
#sv-section-hero::after{content:"";position:absolute;bottom:0;inset-inline:0;height:4px;z-index:3;background:linear-gradient(90deg,transparent,var(--c-accent),transparent);opacity:.6}

/* ===== بودي أبيض (التفاصيل + المميزات) ===== */
#sv-section-body{position:relative;padding:72px 0 84px;background:var(--sv-body-bg,var(--c-paper))}
.sv-body-inner{max-width:820px;margin:0 auto;position:relative;z-index:2}
.sv-body-img{margin:0 0 44px;border-radius:18px;overflow:hidden;aspect-ratio:16/8;background:var(--c-cream);border:1px solid color-mix(in srgb,var(--c-ink) 8%,transparent)}
.sv-body-img img{width:100%;height:100%;object-fit:cover}
.sv-eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:var(--sv-label-size,22px);font-weight:800;letter-spacing:.2px;color:var(--sv-label,var(--c-ink));margin-bottom:24px}
.sv-eyebrow>span:first-child{width:44px;height:3px;background:var(--sv-line,var(--c-accent));display:inline-block;border-radius:3px;flex:none}
.sv-eyebrow .sv-eyebrow-txt{width:auto;height:auto;background:none;display:inline}
.sv-body-text p{font-size:var(--sv-body-size,20px);line-height:2.2;color:var(--sv-body-text,var(--c-muted));margin:0 0 22px}
.sv-body-text p:last-child{margin-bottom:0}

/* المميزات داخل البودي */
.sv-features-block{margin-top:56px;padding-top:48px;border-top:1px solid color-mix(in srgb,var(--c-ink) 9%,transparent)}
.sv-features-title{font-size:var(--sv-ftitle-size,clamp(22px,2.6vw,30px));font-weight:800;text-align:center;margin:0 0 36px;color:var(--sv-ftitle,var(--c-ink));letter-spacing:-.02em}
.sv-features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.sv-feature{display:flex;align-items:flex-start;gap:15px;background:var(--c-cream);border:1px solid color-mix(in srgb,var(--c-ink) 8%,transparent);border-radius:14px;padding:22px 24px;transition:transform .3s,box-shadow .3s,border-color .3s}
.sv-feature:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.07);border-color:color-mix(in srgb,var(--c-accent) 26%,transparent)}
.sv-feature-ico{flex-shrink:0;width:40px;height:40px;border-radius:11px;background:color-mix(in srgb,var(--c-accent) 12%,transparent);display:flex;align-items:center;justify-content:center}
.sv-feature-ico svg{width:20px!important;height:20px!important;max-width:20px;flex:none;color:var(--sv-fcard-ico,var(--c-accent))}
.sv-feature strong{display:block;font-size:15.5px;font-weight:700;color:var(--sv-fcard-title,var(--c-ink));margin-bottom:4px}
.sv-feature span{font-size:13.5px;line-height:1.75;color:var(--sv-fcard-text,var(--c-muted))}

/* ===== تثبيت v2/v3: البودي أبيض دائماً (الهيرو وحده داكن) ===== */
.theme-v2 #sv-section-body,.theme-v3 #sv-section-body{background:var(--sv-body-bg,var(--paper,#fff))}
.theme-v2 .sv-body-text p,.theme-v3 .sv-body-text p{color:var(--sv-body-text,color-mix(in srgb,var(--ink) 84%,#fff))}
.theme-v2 .sv-features-title,.theme-v3 .sv-features-title{color:var(--ink)}
.theme-v2 .sv-feature,.theme-v3 .sv-feature{background:var(--cream,#f3f5f8);border-color:color-mix(in srgb,var(--ink) 8%,transparent)}
.theme-v2 .sv-feature strong,.theme-v3 .sv-feature strong{color:var(--ink)}
.theme-v2 .sv-feature span,.theme-v3 .sv-feature span{color:var(--muted)}
.theme-v2 .sv-feature-ico,.theme-v3 .sv-feature-ico{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.theme-v2 .sv-feature-ico svg,.theme-v3 .sv-feature-ico svg{color:var(--accent)}
.theme-v2 .sv-eyebrow,.theme-v3 .sv-eyebrow{color:var(--ink)}
.theme-v2 .sv-eyebrow>span:first-child,.theme-v3 .sv-eyebrow>span:first-child{background:var(--sv-line,var(--accent))}

/* ===== موبايل ===== */
@media(max-width:860px){
  #sv-section-hero{padding:48px 0 56px}
  #sv-section-body{padding:52px 0 64px}
  .sv-features-grid{grid-template-columns:1fr}
  .sv-back{margin-bottom:24px}
}