/* قواعد صفحة تفاصيل الخدمة.
   المشترك (الهيدر/الناف/الفوتر) في css/site.css ويُحمَّل قبل هذا الملف.

   مقاسة من صفحة "تأهيل مطور عقاري" في الهيئة العامة للعقار المحفوظة في
   المشروع — عُرضت في متصفح حقيقي وقيست أنماطها المحسوبة، لأن أصنافها
   لا توجد في ملفات CSS المحفوظة:
       شريط علوي         background: rgb(247,253,249) = #f7fdf9، ارتفاع 300px
       زر بدء الخدمة     bg #1b8354، radius 4px  ← أخضر الجيومكانية نفسه
       الوسم             color rgb(8,93,58) = #085d3a، font-size 12px
       التبويبات         14px، النشط 700 والباقي 500، color #384250، padding 12px 16px
       الخطوات           list-style: decimal، padding-inline-start: 32px، 16px
       تسمية جانبية      16px/700 color #0d121c    قيمة: 16px/400 color #161616
       اللوحة الجانبية   على اليسار والمحتوى على اليمين
   ومرجع الهيئة السعودية للمهندسين أضاف: أيقونة لكل عنصر جانبي (بلون #1B8354).

   فروق مقصودة (مواءمة الثيم + كود المنصات الموحد):
     • ارتفاع سطر الخطوات 1.9 بدل 19.2px: الأخير ضيّق على النص العربي.
     • التبويبات أزرار role="tab" حقيقية بلوحة مفاتيح كاملة. */

/* UDesign تفرض section{padding:40px 0} على كل قسم، فكانت تترك شريطاً
   أبيض بارتفاع 40px بين الهيدر وأعلى الشريط الأخضر. الشريط يحمل حشوته
   العلوية بنفسه (24px)، فنُلغي حشوة القسم من الأعلى وحدها. */
.service-hero {
    padding-top: 0;
}

/* ===== الشريط العلوي ===== */
/* الشريط داخل عمود المحتوى في الشبكة، فتبقى البطاقة الجانبية بمحاذاته
   كما في مرجع العقار بدل أن تنزل تحته. وارتفاعه من محتواه لا رقماً ثابتاً:
   الرقم الثابت (300px سابقاً) كان يترك النص خارج اللون متى طال.

   اللون يمتد بعرض الشاشة رغم أن العنصر داخل الحاوية: ظلّ بانتشار 100vmax
   يملأ الجانبين، و clip-path يقصّه أفقياً فقط فلا ينشأ تمرير أفقي — أوثق
   من هوامش سالبة بـ100vw التي تتجاوز عرض المستند وتخلق شريط تمرير. */
.service-hero__band {
    position: relative;
    background: #f7fdf9;
    padding: 24px 0 32px;
    margin-bottom: 32px;
    box-shadow: 0 0 0 100vmax #f7fdf9;
    clip-path: inset(0 -100vmax);
}

/* الصف داخل عمود المحتوى؛ الزر عند طرفه بمحاذاة أعلى نص العنوان
   (المرجع: أعلى الزر − أعلى نص العنوان = 1px). */
.service-hero__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

/* تنكمش لتترك مكان الزر في العمود نفسه بدل أن يلتفّ لسطر جديد
   (المرجع: كتلة العنوان 762px + الزر 94px = 856px عرض العمود). */
.service-hero__info {
    flex: 1 1 320px;
    min-width: 0;
}

.service-hero h1 {
    margin: 0;
}

.service-tag {
    display: inline-block;
    margin-top: 12px;
    padding: 4px 10px;
    border: 1px solid #d7f0e2;
    border-radius: 4px;
    background: #f3fcf6;
    font-size: .75rem;
    color: #085d3a;
}

/* زر بدء الخدمة — مقاس من زر العقار حرفياً:
   bg rgb(27,131,84)=#1b8354، color #fff، 16px/400، line-height 19.2px،
   radius 4px، border 1px solid #1b8354، padding 6px 12px، الارتفاع 33px.
   .dga-btn تفرض margin-top:16px!important فنصفّرها هنا. */
.service-start-btn.dga-btn {
    margin-top: 0 !important;
    height: auto;
    padding: 6px 12px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    border: 1px solid #1b8354;
    border-radius: 4px;
    background: #1b8354;
    color: #fff;
    flex: 0 0 auto;
}

.service-start-btn.dga-btn:hover {
    background: #166a45;
    border-color: #166a45;
}

.service-summary {
    margin: 12px 0 0;
    font-size: 1rem;
    line-height: 1.9;
    color: #4b5563;
}

/* ===== التخطيط: المحتوى يميناً واللوحة يساراً (كما في العقار) ===== */
.service-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 412px;
    gap: 28px;
    align-items: start;
    padding-bottom: 56px;
}

.service-layout__main {
    min-width: 0;
}

/* الشريط موضعي (position:relative) فيُرسم فوق العناصر الساكنة، وظلّه
   الممتد كان يغطّي أعلى البطاقة الجانبية. رفعها بطبقة يعيدها فوقه
   فتخترق الشريط ظاهرةً كما في مرجع العقار. */
.service-layout__side {
    position: relative;
    z-index: 1;
}

/* البطاقة تنزل قليلاً عن أعلى الشريط كما في المرجع: قِست هناك
   البطاقة 218 والشريط 172 ⇒ فرق 46px. تُطبَّق على تخطيط العمودين فقط،
   فعند التكدّس تتبع البطاقة المحتوى بمسافته الطبيعية. */
@media (min-width: 1200px) {
    .service-layout__side {
        margin-top: 46px;
    }
}

/* ===== اللوحة الجانبية ===== */
.service-side {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    padding: 24px;
}

.service-side__info {
    display: grid;
    gap: 20px;
}

.service-side__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.service-side__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;     /* العقار تستخدم 8px لا دائرة كاملة */
    background: #f3fcf6;
    flex: 0 0 auto;
}

.service-side__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.service-side__label {
    font-size: 1rem;
    font-weight: 700;
    color: #0d121c;
}

.service-side__value {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8;
    color: #161616;
    overflow-wrap: anywhere;   /* البريد والروابط الطويلة لا تكسر الصندوق */
}

.service-side__value a {
    color: #166a45;
}

/* فاصل قبل كتلة الدعم — كما في بطاقة العقار */
.service-side__divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0;
}

/* ===== التبويبات =====
   مقاسة من تبويبات العقار (li.REGAnav-item > a.nav-link داخل ul.nav.REGAnav-tabs):
       غير نشط   color #384250 (=--colors-gray-700)، font-weight 500، 14px
       نشط       اللون نفسه #384250 مع font-weight 700 — لا لون أغمق
       الزوايا   border-radius 4px على التبويب نفسه
       الخط      ::after بعرض calc(100% - 16px)، ارتفاع 3px، #1b8354،
                 bottom:0، border-radius 9999px
       هافر      color #0d121c + خلفية #f3f4f6 (=--colors-gray-100)
                 ويظهر الخط السفلي نفسه
       ضغط       خلفية #e5e7eb (=--colors-gray-200)
       تركيز     outline 2px solid #0d121c
   كنت أستخدم #161616 للنشط وتغيير لون فقط عند الهافر بلا خلفية ولا خط. */
.dga-tabs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 24px;
}

.dga-tabs__btn {
    position: relative;
    appearance: none;
    background: none;
    border: 0;
    border-radius: 4px;
    padding: 12px 16px;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    color: #384250;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

/* الخط السفلي: يظهر للنشط وعند الهافر والضغط، بالقياسات نفسها */
.dga-tabs__btn[aria-selected="true"]::after,
.dga-tabs__btn:hover::after,
.dga-tabs__btn:active::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: 50%;
    transform: translateX(50%);   /* RTL: النصف الموجب يوسّط */
    width: calc(100% - 16px);
    height: 3px;
    border-radius: 9999px;
    background: #1b8354;
}

.dga-tabs__btn[aria-selected="true"] {
    font-weight: 700;
}

.dga-tabs__btn:hover {
    color: #0d121c;
    background-color: #f3f4f6;
}

.dga-tabs__btn:active {
    color: #0d121c;
    background-color: #e5e7eb;
}

.dga-tabs__btn:focus-visible {
    outline: 2px solid #0d121c;
    outline-offset: -2px;
}

.dga-tabs__panel:focus-visible {
    outline: 2px solid #1b8354;
    outline-offset: 4px;
    border-radius: 8px;
}

/* ===== قوائم المحتوى ===== */
/* أرقام عادية بمحاذاة العقار، لا دوائر */
.service-steps,
.service-list {
    margin: 0;
    padding-inline-start: 32px;
    display: grid;
    gap: 10px;
}

.service-steps {
    list-style: decimal;
}

.service-list {
    list-style: disc;
}

.service-steps > li,
.service-list > li {
    font-size: 1rem;
    line-height: 1.9;      /* العقار 19.2px — ضيّق على العربية */
    color: #161616;
}

.service-steps > li::marker,
.service-list > li::marker {
    color: #1b8354;
    font-weight: 700;
}

.service-note {
    margin: 16px 0 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f3fcf6;
    border: 1px solid #d7f0e2;
    font-size: .9375rem;
    line-height: 1.9;
    color: #1f2a37;
}

/* ===== خدمات ذات صلة ===== */
.related-services {
    padding: 0 0 64px;
}

.related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.related-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #161616;
}

.related-services .contact .inner-card-wrapper {
    display: flex;
}

.related-services .contact .inner-card-wrapper .about-card {
    flex: 0 0 calc(33.3333% - 24px) !important;
    max-width: calc(33.3333% - 24px);
}

@media (max-width: 1199.98px) {
    .service-layout {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 991.98px) {
    .related-services .contact .inner-card-wrapper .about-card {
        flex: 0 0 calc(50% - 18px) !important;
        max-width: calc(50% - 18px);
    }
}

@media (max-width: 575.98px) {
    .related-services .contact .inner-card-wrapper .about-card {
        flex: 0 0 100% !important;
        max-width: 100%;
    }

    .dga-tabs__btn {
        padding: 10px 12px;
    }

}

/* خدمة بقسم واحد لا تبويبات — العنوان بدل شريط التبويبات، بالخط
   السفلي نفسه ليبقى الإيقاع البصري موحّداً مع بقية الصفحات. */
.service-single__title {
    position: relative;
    margin: 0 0 24px;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: .875rem;
    font-weight: 700;
    color: #161616;
}

.service-single__title::after {
    content: "";
    position: absolute;
    bottom: -1px;
    inset-inline-start: 0;
    width: 72px;
    height: 3px;
    border-radius: 9999px;
    background: #1b8354;
}

/* ===== إلغاء حلقة التركيز السوداء عند النقر بالفأرة =====
   UDesign تحمل قاعدة عامة:
     :where(a,button,…,[tabindex]):not([tabindex="-1"],…,.tab-pane):focus
         { box-shadow: 0 0 0 3px #161616 }
   وهي على :focus لا :focus-visible، فترسم إطاراً أسود بمجرد النقر بالفأرة.
   ولوحات التبويب عندنا tabindex="0" (ليكون محتواها في متناول لوحة المفاتيح
   حسب نمط WAI-ARIA) وصنفها ليس .tab-pane فلا يستثنيها الـ:not.

   نُلغي الحلقة عند :focus ونُبقي مؤشراً أخضر عند :focus-visible وحده —
   أي يظهر لمستخدم لوحة المفاتيح ويختفي عن مستخدم الفأرة، وهو المطلوب في
   كود المنصات الموحد (مؤشر تركيز ظاهر) بلا إزعاج بصري عند النقر. */
.dga-tabs__panel:focus,
.dga-tabs__btn:focus,
.service-single:focus {
    box-shadow: none;
    outline: none;
}

.dga-tabs__panel:focus-visible {
    outline: 2px solid #1b8354;
    outline-offset: 4px;
    border-radius: 8px;
}

.dga-tabs__btn:focus-visible {
    outline: 2px solid #0d121c;
    outline-offset: -2px;
}

/* ===== قائمة على عمودين =====
   للقوائم الطويلة (طبقات المنصة الخمس عشرة). القائمة الأساسية display:grid
   والأعمدة المتعددة لا تعمل على حاوية شبكية، فنعيدها block هنا ونستبدل
   الفجوة بهوامش. break-inside يمنع انقسام العنصر بين العمودين. */
.service-steps--cols,
.service-list--cols {
    display: block;
    columns: 2;
    column-gap: 40px;
}

.service-steps--cols > li,
.service-list--cols > li {
    break-inside: avoid;
    margin-bottom: 10px;
}

.service-steps--cols > li:last-child,
.service-list--cols > li:last-child {
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .service-steps--cols,
    .service-list--cols {
        columns: 1;
    }
}

/* ===== أرقام حجم الاستفادة =====
   <dl> لا شبكة divات: كل رقم قيمة (dd) مقترنة بتسميتها (dt)، فيقرأهما
   قارئ الشاشة مرتبطين. الرقم قبل التسمية بصرياً — وهو ترتيب الأصل — ولذلك
   جاء dd قبل dt في الترميز، وكلاهما داخل غلاف يحفظ الاقتران. */
.service-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
}

.service-stat {
    padding: 24px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f7fdf9;
    text-align: center;
}

.service-stat__value {
    margin: 0 0 6px;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1b8354;
    direction: ltr;          /* "+75" لا "75+" */
}

.service-stat__label {
    font-size: 1rem;
    font-weight: 400;
    color: #4b5563;
}

@media (max-width: 575.98px) {
    .service-stats {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* زر دليل المستخدم أسفل اللوحة — للخدمات التي تنشر دليلاً */
.service-side__action {
    margin-top: 20px;
}

.service-side__action .dga-btn {
    width: 100%;
    justify-content: center;
}

/* dd و dt يرثان محاذاة start من قاعدة عامة في UDesign ولا يأخذانها من
   text-align:center على البطاقة، فنضبطها عليهما صراحةً. */
.service-stat__value,
.service-stat__label {
    text-align: center;
}