/* مرشد ولي الأمر (ALAM) — 2026-11-09. كل الأسماء تبدأ بـ alam-coach حتى لا تتعارض مع الصفحة. */
.alam-coach-bubble {
    position: absolute;
    z-index: 2147483000;
    box-sizing: border-box;
    max-width: min(320px, calc(100vw - 32px));
    padding: 10px 12px 10px 34px;
    border-radius: 14px;
    background: #12306f;
    color: #ffffff;
    font-family: "Tajawal", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;
    direction: rtl;
    text-align: right;
    box-shadow: 0 10px 28px rgba(18, 48, 111, 0.28);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.alam-coach-bubble.alam-coach-show {
    opacity: 1;
}
.alam-coach-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.alam-coach-close {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    pointer-events: auto;
}
.alam-coach-close:hover,
.alam-coach-close:focus-visible {
    background: rgba(255, 255, 255, 0.32);
    outline: none;
}
/* السهم الواصل من الفقاعة إلى العنصر */
.alam-coach-connector {
    position: absolute;
    z-index: 2147482999;
    pointer-events: none;
    overflow: visible;
    display: none;
}
.alam-coach-connector line { stroke: #12306f; stroke-width: 3; stroke-linecap: round; }
.alam-coach-connector polygon { fill: #12306f; }
/* المثلث الصغير القديم: مخفي (السهم الواصل يحل محله) */
.alam-coach-bubble::after {
    display: none !important;
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: #12306f;
    transform: rotate(45deg);
}
.alam-coach-bubble[data-side="top"]::after { bottom: -6px; left: var(--alam-coach-arrow, 50%); margin-left: -6px; }
.alam-coach-bubble[data-side="bottom"]::after { top: -6px; left: var(--alam-coach-arrow, 50%); margin-left: -6px; }
.alam-coach-bubble[data-side="left"]::after { right: -6px; top: var(--alam-coach-arrow, 50%); margin-top: -6px; }
.alam-coach-bubble[data-side="right"]::after { left: -6px; top: var(--alam-coach-arrow, 50%); margin-top: -6px; }
/* وضع الشريط (عند عدم وجود مكان فارغ بجانب العنصر) */
.alam-coach-bubble.alam-coach-bar {
    position: fixed;
    left: 16px;
    right: 16px;
    max-width: none;
}
.alam-coach-bubble.alam-coach-bar::after { display: none; }
.alam-coach-bubble.alam-coach-bar[data-bar="bottom"] { bottom: 12px; top: auto; }
.alam-coach-bubble.alam-coach-bar[data-bar="top"] { top: 12px; bottom: auto; }
.alam-coach-bubble.alam-coach-offscreen { pointer-events: auto; cursor: pointer; }
.alam-coach-bubble[data-side="none"]::after { display: none; }

/* إبراز العنصر المطلوب (outline لا يغيّر التخطيط) */
.alam-coach-target {
    outline: 3px solid rgba(31, 79, 215, 0.55) !important;
    outline-offset: 3px !important;
    animation: alam-coach-pulse 1.8s ease-in-out infinite;
}
@keyframes alam-coach-pulse {
    0%, 100% { outline-color: rgba(31, 79, 215, 0.55); }
    50% { outline-color: rgba(31, 79, 215, 0.15); }
}

/* زر «؟» لإرجاع الإرشاد */
.alam-coach-help {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 2147483000;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #12306f;
    color: #ffffff;
    font-family: "Tajawal", sans-serif;
    font-size: 20px;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(18, 48, 111, 0.3);
    opacity: 0.85;
    cursor: pointer;
}
.alam-coach-help:hover,
.alam-coach-help:focus-visible { opacity: 1; outline: none; }
.alam-coach-help[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .alam-coach-bubble { transition: none; }
    .alam-coach-target { animation: none; }
}