/* جولة العهدة الشخصية: لقطات حقيقية من النظام تتنقل تلقائياً، وتقرّب الكاميرا من العنصر المقصود مع تظليل ومؤشر نقر،
   والخطوات قابلة للنقر. CSS عادي بلا اعتماد على Tailwind المبني. السلوك في custody-tour.js.
   بلا JavaScript تبقى اللقطة الأولى والخطوات نصاً. */
.cdt { position: relative; }
.cdt-frame {
    overflow: hidden; border-radius: 1.5rem; border: 1px solid #e2e8f0; background: #fff;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, .25);
}
.dark .cdt-frame { border-color: #334155; background: #1e293b; }
.cdt-stage { position: relative; width: 100%; aspect-ratio: 7 / 4; overflow: hidden; background: #f1f5f9; direction: ltr; cursor: pointer; }
@media (max-width: 639px) { .cdt-stage { aspect-ratio: 1.45; } }
.dark .cdt-stage { background: #0f172a; }

/* كل لقطة بعرض المسرح وارتفاعها من نسبة صورتها (aspect-ratio مضبوطة في الوسم)، والكاميرا transform عليها.
   التظليل والمؤشر داخل اللقطة فتتبع نسبها المئوية الصورة نفسها مهما كان التقريب. --inv = 1 / التقريب لتبقى الحدود والمؤشر بحجمها. */
.cdt-shot {
    --inv: 1;
    position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transform-origin: 0 0;
    transition: opacity .55s ease, transform 1.3s cubic-bezier(.45, 0, .2, 1); will-change: transform;
}
.cdt-shot.is-active { opacity: 1; }
.cdt-shot.is-jump { transition: opacity .55s ease; }
.cdt-shot img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }

/* تظليل العنصر المقصود: إطار + تعتيم ما حوله */
.cdt-spot {
    position: absolute; pointer-events: none; box-sizing: border-box; opacity: 0;
    border-radius: calc(.55rem * var(--inv)); border: calc(2px * var(--inv)) solid #10b981;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, .3), 0 0 0 calc(4px * var(--inv)) rgba(16, 185, 129, .25);
    transition: opacity .4s ease;
}
.cdt-spot.is-on { opacity: 1; animation: cdt-pulse 1.8s ease-in-out .5s infinite; }
@keyframes cdt-pulse { 50% { box-shadow: 0 0 0 9999px rgba(15, 23, 42, .3), 0 0 0 calc(9px * var(--inv)) rgba(16, 185, 129, .08); } }

/* مؤشر النقر */
.cdt-pointer {
    position: absolute; left: 0; top: 0; width: calc(1.5rem * var(--inv)); height: calc(1.5rem * var(--inv)); pointer-events: none; opacity: 0;
    transition: left .9s cubic-bezier(.22, 1, .36, 1), top .9s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
    filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .45));
}
.cdt-pointer.is-on { opacity: 1; }
.cdt-pointer.is-jump { transition: opacity .3s ease; }
.cdt-pointer svg { width: 100%; height: 100%; display: block; }
.cdt-ring {
    position: absolute; left: 0; top: 0; width: calc(2.4rem * var(--inv)); height: calc(2.4rem * var(--inv));
    margin: calc(-1.2rem * var(--inv)) 0 0 calc(-1.2rem * var(--inv)); border-radius: 9999px;
    border: calc(3px * var(--inv)) solid #2563eb; pointer-events: none; opacity: 0; transform: scale(.3);
}
.cdt-ring.is-click { animation: cdt-click .7s ease-out 1; }
@keyframes cdt-click { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.4); } }

/* الخطوات: العنوان والوصف وشريط تقدّم يمتلئ خلال مدة الخطوة */
.cdt-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e2e8f0; }
.dark .cdt-steps { border-top-color: #334155; }
.cdt-steps li { border-bottom: 1px solid #e2e8f0; }
.dark .cdt-steps li { border-bottom-color: #334155; }
.cdt-step {
    position: relative; display: flex; align-items: flex-start; gap: .85rem; width: 100%; padding: .9rem .25rem; text-align: start;
    background: transparent; border: 0; cursor: pointer; font: inherit; color: inherit; overflow: hidden;
}
.cdt-step:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; border-radius: .5rem; }
.cdt-num {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .7rem;
    background: #ecfdf5; color: #047857; font-weight: 800; font-size: .9rem; transition: background-color .3s, color .3s;
}
.dark .cdt-num { background: rgba(16, 185, 129, .15); color: #6ee7b7; }
.cdt-step strong { display: block; font-size: 1rem; line-height: 1.4; color: #0f172a; }
.dark .cdt-step strong { color: #fff; }
.cdt-step small { display: block; margin-top: .15rem; font-size: .875rem; line-height: 1.55; color: #64748b; }
.dark .cdt-step small { color: #94a3b8; }
.cdt-step[aria-current="true"] .cdt-num { background: #059669; color: #fff; }
.cdt-bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: transparent; }
.cdt-bar::after { content: ""; display: block; height: 100%; width: 100%; background: #10b981; transform: scaleX(0); transform-origin: left center; }
[dir="rtl"] .cdt-bar::after { transform-origin: right center; }
.cdt-step[aria-current="true"] .cdt-bar::after { animation: cdt-fill var(--cdt-dur, 6500ms) linear forwards; }
.is-paused .cdt-step[aria-current="true"] .cdt-bar::after { animation-play-state: paused; }
.is-static .cdt-step[aria-current="true"] .cdt-bar::after { animation: none; transform: scaleX(1); }
@keyframes cdt-fill { to { transform: scaleX(1); } }
.cdt-note { margin: 1rem 0 0; font-size: .75rem; line-height: 1.6; color: #64748b; }
.dark .cdt-note { color: #94a3b8; }
@media (prefers-reduced-motion: reduce) {
    .cdt-shot, .cdt-shot.is-jump, .cdt-pointer, .cdt-pointer.is-jump, .cdt-spot { transition: none; }
    .cdt-spot.is-on { animation: none; }
}

/* سطر «من الجوال»: يذكر أن التسجيل والتصوير يتمّان من الجوال */
.cdt-mobile {
    display: flex; align-items: flex-start; gap: .75rem; margin: 1rem 0 0; padding: .85rem 1rem; border-radius: 1rem;
    background: #ecfdf5; border: 1px solid #a7f3d0;
}
.dark .cdt-mobile { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .35); }
.cdt-mobile svg { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; margin-top: .1rem; color: #047857; }
.dark .cdt-mobile svg { color: #6ee7b7; }
.cdt-mobile strong { display: block; font-size: .95rem; line-height: 1.4; color: #064e3b; }
.dark .cdt-mobile strong { color: #d1fae5; }
.cdt-mobile span { display: block; margin-top: .15rem; font-size: .875rem; line-height: 1.55; color: #065f46; }
.dark .cdt-mobile span { color: #a7f3d0; }

/* Keep the heading, preview and controls together on phones. Desktop retains
   the screenshot beside the complete explanation. */
#personal-custody { scroll-margin-top: 6rem; }
.cdt-layout { row-gap: 0; }
.cdt-intro, .cdt-details { min-width: 0; }
.cdt-visual { grid-column: 1; grid-row: 1 / span 2; }
.cdt-intro { grid-column: 2; grid-row: 1; align-self: end; }
.cdt-details { grid-column: 2; grid-row: 2; align-self: start; }
.cdt-controls { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .75rem; background: #fff; border-top: 1px solid #e2e8f0; }
.cdt-position { font-size: .875rem; font-weight: 700; color: #475569; }
.cdt-expand, .cdt-viewer button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .5rem .75rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff; color: #0f172a; font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.cdt-expand svg { width: 1rem; height: 1rem; }
.cdt-expand:focus-visible, .cdt-viewer button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.cdt-stage:focus-visible { outline: 2px solid #2563eb; outline-offset: -3px; }
.cdt-expand:active, .cdt-viewer button:active { background: #ecfdf5; }
.cdt-current-detail { display: none; }
.dark .cdt-controls { background: #1e293b; border-color: #334155; }
.dark .cdt-position { color: #cbd5e1; }
.dark .cdt-expand { background: #0f172a; border-color: #475569; color: #e2e8f0; }

.cdt-viewer { width: min(96vw, 1200px); max-width: none; max-height: 90dvh; padding: 0; border: 0; border-radius: .75rem; background: #f8fafc; color: #0f172a; }
.cdt-viewer::backdrop { background: rgba(15, 23, 42, .85); }
.cdt-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem; border-bottom: 1px solid #cbd5e1; }
.cdt-viewer-head strong { font-size: 1rem; line-height: 1.5; }
.cdt-viewer-actions { display: flex; flex-shrink: 0; gap: .5rem; }
.cdt-viewer-close { min-width: 44px; font-size: 1.5rem !important; }
.cdt-viewer-help { margin: 0; padding: .5rem .75rem; font-size: .875rem; line-height: 1.5; color: #475569; }
.cdt-viewer-body { max-height: 65dvh; overflow: auto; direction: ltr; overscroll-behavior: contain; }
.cdt-viewer-body img { display: block; width: 100%; max-width: none; height: auto; }
.cdt-viewer-body.is-zoomed img { width: var(--cdt-image-width); }
.dark .cdt-viewer { background: #0f172a; color: #f8fafc; }
.dark .cdt-viewer-head { border-color: #334155; }
.dark .cdt-viewer button { background: #1e293b; color: #f8fafc; border-color: #475569; }
.dark .cdt-viewer-help { color: #cbd5e1; }
html.cdt-viewer-open, html.cdt-viewer-open body { overflow: hidden; }

@media (max-width: 1023px) {
    .cdt-layout { gap: 1.25rem; }
    .cdt-intro, .cdt-visual, .cdt-details { grid-column: 1; grid-row: auto; }
    .cdt-intro > p:last-child { margin-bottom: 0; }
    .cdt-visual > [aria-hidden="true"] { inset: -.75rem; opacity: .5; }
}
@media (max-width: 639px) {
    /* The wider mobile preview should not fade the text at the track edges.
       The custody feature is the third button in the existing showcase. */
    #smart-features:has(.fs-tab:nth-child(3)[aria-current="true"]) .fs-track { --fs-fade: 0; }
    #personal-custody.fs-slide { position: relative; z-index: 1; padding: 1rem .25rem; background: #fff; }
    .dark #personal-custody.fs-slide { background: #0f172a; }
    .cdt-intro h2 { font-size: clamp(1.375rem, 6.6vw, 1.625rem); line-height: 1.35; }
    .cdt-frame { border-radius: .875rem; box-shadow: none; }
    .cdt-stage { aspect-ratio: 4 / 3; }
    .cdt-visual .cdt-note { margin-top: .5rem; font-size: .75rem; }
    .cdt-enhanced .cdt-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; border: 0; }
    .cdt-enhanced .cdt-steps li { border: 1px solid #e2e8f0; border-radius: .625rem; overflow: hidden; }
    .cdt-enhanced .cdt-step { min-height: 72px; height: 100%; align-items: center; gap: .5rem; padding: .75rem .5rem; }
    .cdt-enhanced .cdt-step strong { font-size: .875rem; line-height: 1.5; }
    .cdt-enhanced .cdt-step small { display: none; }
    .cdt-enhanced .cdt-step[aria-current="true"] { background: #ecfdf5; }
    .cdt-enhanced .cdt-step .cdt-num { width: 1.75rem; height: 1.75rem; border-radius: .5rem; }
    .cdt-enhanced .cdt-current-detail { display: block; min-height: 5.5rem; margin: .75rem 0 0; font-size: .9375rem; line-height: 1.65; color: #475569; }
    .cdt-mobile { margin-top: .75rem; padding: .75rem; border-radius: .75rem; }
    .cdt-mobile span { font-size: .9375rem; line-height: 1.65; }
    .cdt-details > .cdt-note { font-size: .8125rem; }
    .dark .cdt-enhanced .cdt-steps li { border-color: #334155; }
    .dark .cdt-enhanced .cdt-step[aria-current="true"] { background: rgba(16, 185, 129, .12); }
    .dark .cdt-current-detail { color: #cbd5e1; }
    .cdt-viewer { width: calc(100vw - 1rem); max-height: 94dvh; }
    .cdt-viewer-head { flex-wrap: wrap; gap: .5rem; }
    .cdt-viewer-head strong { flex: 1 1 100%; }
    .cdt-viewer-actions { width: 100%; justify-content: space-between; }
    .cdt-viewer-body { max-height: 60dvh; }
}