/* ============================================================
   WeGSM — وصف الخدمة المنظم (assets/svc-desc.js)
   ============================================================ */
.svd { container-type: inline-size; display: flex; flex-direction: column; gap: 12px; font-size: .9rem; line-height: 1.8; color: #0F1D16; text-align: right; }
.svd-sec { background: #fff; border: 1px solid rgba(18, 19, 23, .08); border-radius: 16px; padding: 12px 14px 14px; }
.svd-notes { background: #FFFBF2; border-color: #F0DFB5; }
.svd-h { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: .93rem; font-weight: 700; color: #0F1D16; line-height: 1.5; }
.svd-hi { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: .82rem; flex-shrink: 0; background: #DBF0E7; color: #0B7A5E; }
.svd-notes .svd-hi { background: #FBE3B8; color: #8A5200; }
.svd-emo { font-size: 1rem; line-height: 1; font-style: normal; }

.svd-alert { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: 12px; font-weight: 600; }
.svd-alert + .svd-alert, .svd-p + .svd-alert, .svd-ol + .svd-alert, .svd-ul + .svd-alert { margin-top: 8px; }
.svd-ai { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; flex-shrink: 0; margin-top: 2px; }
.svd-alert.is-danger { background: #FDECEC; color: #8E1A20; }
.svd-alert.is-danger .svd-ai { background: #B42329; color: #fff; }
.svd-alert.is-warn { background: #FEF3C7; color: #6E4205; }
.svd-alert.is-warn .svd-ai { background: #D97706; color: #fff; }
.svd-alert.is-ok { background: #E3F4EC; color: #075C46; }
.svd-alert.is-ok .svd-ai { background: #12A575; color: #fff; }
.svd-alert.is-info { background: #EEF3F8; color: #27415C; font-weight: 500; }
.svd-alert.is-info .svd-ai { background: #fff; color: #1D5FA8; }
.svd-at { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.svd-p { margin: 0; color: #33443B; overflow-wrap: anywhere; }
.svd-alert + .svd-p, .svd-ol + .svd-p, .svd-ul + .svd-p, .svd-p + .svd-p { margin-top: 8px; }

.svd-ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.svd-p + .svd-ol, .svd-alert + .svd-ol, .svd-ul + .svd-ol { margin-top: 10px; }
.svd-ol li { display: flex; gap: 10px; align-items: flex-start; }
.svd-n { width: 26px; height: 26px; border-radius: 50%; background: #0B7A5E; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; margin-top: 1px; font-family: "Inter", sans-serif; box-shadow: 0 0 0 3px #DBF0E7; }
.svd-st { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.svd-sub { margin-top: 5px; color: #5A6C63; font-size: .86rem; font-weight: 400; }

.svd-ul { margin: 0; padding: 0 20px 0 0; list-style: none; }
/* النقطة بنرسمها بنفسنا على الحرف اليمين (نفس ناحية النص): سطر dir=ltr كان بيحط النقطة الأصلية على شمال البند والنص ملزوق يمين */
.svd-ul li { margin: 3px 0; position: relative; }
.svd-ul li::before { content: ""; position: absolute; right: -15px; top: .8em; width: 6px; height: 6px; border-radius: 50%; background: #0B7A5E; }

.svd-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #EEF7F2; border: 1px solid #B5E0CD; color: #0B7A5E !important; font-weight: 600; text-decoration: none !important; font-size: .83rem; line-height: 1.5; unicode-bidi: isolate; max-width: 100%; overflow-wrap: anywhere; vertical-align: middle; transition: background .15s, border-color .15s; }
.svd-link:hover { background: #DBF0E7; border-color: #0B7A5E; }
.svd-link i { font-size: .72em; }
.svd-tok { font-family: "Inter", Consolas, monospace; font-weight: 700; font-size: .82em; background: rgba(11, 122, 94, .09); color: #075C46; padding: 1px 6px; border-radius: 6px; letter-spacing: .02em; }
.svd-alert .svd-tok { background: rgba(255, 255, 255, .65); color: inherit; }
.svd-c-red { color: #B42329; font-weight: 700; }
.svd-c-green { color: #0B7A5E; font-weight: 700; }
.svd-c-blue { color: #1D5FA8; font-weight: 700; }
.svd-c-gold { color: #9A6A00; font-weight: 700; }

/* الحاوية القديمة (خلفية دهبي) بتتشال لما الوصف يتعرض بالشكل الجديد */
#svc-desc-display.has-sd { background: none !important; border: 0 !important; padding: 0 !important; color: inherit !important; text-align: right !important; line-height: inherit !important; margin-bottom: 12px; }
#svc-desc-display.has-sd .sdd-h { display: none; }

@media (max-width: 480px) {
    .svd { font-size: .88rem; gap: 10px; }
    .svd-sec { padding: 11px 12px 12px; border-radius: 14px; }
}

/* ===== ملخص الوصف: شريحة لكل قسم + تفاصيل قابلة للفتح والقفل (قبل الطلب أحمر / البيانات أزرق / بعد النجاح أخضر) ===== */
.svd-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.svd-chip { --c-bg: #F3F5F4; --c-bd: #D9E0DC; --c-ink: #33443B; --c-ic: #5A6C63; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; border-radius: 14px; border: 1px solid var(--c-bd); background: var(--c-bg); color: var(--c-ink); text-align: right; font-family: inherit; cursor: pointer; transition: box-shadow .15s, transform .12s; }
.svd-chip:hover { box-shadow: 0 2px 8px -4px rgba(15, 29, 22, .35); }
.svd-chip:active { transform: scale(.98); }
.svd-ci { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; font-size: .85rem; background: #fff; color: var(--c-ic); }
.svd-ct { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.svd-ct b { font-size: .84rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svd-ct small { font-size: .72rem; opacity: .85; font-weight: 600; }
.svd-cv { font-size: .7rem; opacity: .7; transition: transform .2s; flex-shrink: 0; }
.svd-chip.is-open .svd-cv { transform: rotate(180deg); }
.svd-chip.svd-k-notes { --c-bg: #FDECEC; --c-bd: #F3C6C8; --c-ink: #8E1A20; --c-ic: #B42329; }
.svd-chip.svd-k-steps { --c-bg: #EAF2FC; --c-bd: #BFD6F2; --c-ink: #1B4F8C; --c-ic: #1D5FA8; }
.svd-chip.svd-k-after { --c-bg: #E3F4EC; --c-bd: #B5E0CD; --c-ink: #075C46; --c-ic: #0B7A5E; }
.svd-chip.is-open { box-shadow: 0 0 0 2px var(--c-bd); }

.svd-sec.is-collapsed { display: none; }
.svd-sec.svd-notes { background: #FFF7F7; border-color: #F3C6C8; }
.svd-sec.svd-notes .svd-hi { background: #FBD5D7; color: #B42329; }
.svd-sec.svd-steps { background: #F5F9FE; border-color: #BFD6F2; }
.svd-sec.svd-steps .svd-hi { background: #D5E6F9; color: #1D5FA8; }
.svd-sec.svd-after { background: #F3FBF7; border-color: #B5E0CD; }
.svd-sec.svd-after .svd-hi { background: #CDEBDD; color: #0B7A5E; }

@container (max-width: 480px) { /* حسب عرض صندوق الوصف نفسه (معاينة الأدمن الضيقة بتاخد شكل الموبايل حتى على شاشة كبيرة) */
    .svd-chips { gap: 6px; }
    .svd-chip { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 9px; position: relative; }
    .svd-ci { width: 26px; height: 26px; font-size: .78rem; border-radius: 9px; }
    .svd-ct { width: 100%; }
    .svd-ct b { font-size: .76rem; white-space: normal; line-height: 1.25; }
    .svd-ct small { font-size: .68rem; }
    .svd-cv { position: absolute; top: 10px; left: 9px; }
    /* شريحة واحدة بس: صف واحد (أيقونة + عنوان + سهم) بدل العمود */
    .svd-single .svd-chip { flex-direction: row; align-items: center; gap: 8px; padding: 9px 10px; }
    .svd-single .svd-ct { width: auto; }
    .svd-single .svd-cv { position: static; }
}