html {
    scroll-behavior: smooth;
}

.map-container-compo {
    scroll-behavior: smooth;
}

.sh-kh-header-container {
    width: var(--default-spacing);
    max-width: var(--default-max-spacing);
    display: flex;
    justify-content: space-between;
    position: absolute;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--kh-reg);
    padding-top: 15px;
}

/* الصفحة الرئيسية بس (الصفحة يللي فيها #khabeer-map): الهيدر بياخد خلفية باللون الداكن تبع الهوية،
   وروابط الـ nav بتضل بيضا متل ما هي. باقي الصفحات ما بيتغير فيها شي.
   الهيدر هون بيصير جزء من ترتيب الصفحة (بدل ما يطوف فوقها) مشان الشريط ما يغطي راس الخريطة،
   والـ border-image بيمدّ اللون على كامل عرض الشاشة بدون ما يعمل scroll أفقي */
.sh-page:has(#khabeer-map) .sh-kh-header-container {
    position: relative;
    left: auto;
    transform: none;
    margin-inline: auto;
    padding-bottom: 15px;
    border-image: conic-gradient(var(--sec-color) 0 0) fill 0 / / 0 100vmax;
}

.sh-kh-left-header-side {

}

.sh-kh-tools-header-cont {
    display: flex;
    align-items: center;
    column-gap: 15px;
}

.sh-kh-bur-menu-box {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    cursor: pointer;
    display: none;
}

.sh-kh-bur-menu-box {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

.sh-kh-mn-line {
    width: 20px;
    height: 2px;
    background-color: #fff;
    border-radius: 5px;
}

.sh-kh-contact-btn {
    background-color: var(--pr-color);
    padding-inline: 20px;
    padding-block: 7px;
    border-radius: 12px;
    text-decoration: none;
    color: #000;
    font-family: var(--kh-reg);
    transition: 0.25s ease;
    width: 117px;
}


.sh-kh-righ-header-side {
    display: flex;
    column-gap: 20px;
    align-items: center;
}

.sh-kh-nav-container {
    display: flex;
    column-gap: 25px;
}

.sh-kh-nav-item {
    font-size: 1.1rem;
    text-decoration: none;
    color: #fff;
    font-family: var(--kh-reg);
    position: relative;
    cursor: pointer;
}

.sh-kh-nav-item:hover {
    color: #fff;
}

.sh-kh-nav-item::after {
     content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--pr-color);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.sh-kh-nav-item:hover::after {
    transform: scaleX(1);
}

.sh-kh-nav-item.active::after {
    transform: scaleX(1);
}

.sh-kh-contact-btn:hover {
    background-color: transparent;
    color: #fff;
    outline: 1px #5BE11E solid;
    cursor: pointer;
}



.sh-kh-line-fasel {
    width: 2px;
    height: 90%;
    background-color: #fff;
    opacity: 0.4;
}

.sh-kh-logo-box {
    width: 110px;
}

.sh-kh-logo-box img {
    width: 100%;
    object-fit: cover;
}

.sh-kh-hero-section img {
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
}

.sh-kh-logo-box {
    display: inline-block;
}

.logo-animate {
    animation: logo-draw-once 2.5s ease forwards;
}

@keyframes logo-draw-once {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.sh-kh-custom-nav-item {
/*    position: relative;
    padding-left: 20px;
    cursor: pointer;*/
}

/*.sh-kh-custom-nav-item::before {
  content: "";
  position: absolute;
  left: 5%;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);

  width: 0;
  height: 0;

    border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #5BE11E;*/ /* لون السهم */
/*}*/

.sh-kh-nav-item-branc-dt-container {
    display: none;
    flex-direction: column;
    row-gap: 12px;
    position: absolute;
    padding: 20px;
    align-items: center;
    background-color: red;
    left: -15PX;
    top: 30px;
    border-radius: 8px;
}

.sh-kh-nav-item-branc-dt {
    text-decoration: none;
}

.sh-kh-nav-item-branc-dt-container-active {
    display: flex;
    animation: brancDt 0.4s ease;
}

@keyframes brancDt {

    0% {
        opacity: 0;
        top: 10px;
    }

    100% {
        opacity: 1;
        top: 30px;
    }

}

.branc-cta-btn {
    z-index: 5;
    position: fixed;
    right: 35px;
    bottom: 60px;
    cursor: pointer;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.2);
    background-color: #42db87;
    border-radius: 50%;

}

.branc-cta-btn::before {

    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 100%;
    height: 100%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(37,211,102,.45);



    z-index: -1;

        animation: whatsappGlow 2s infinite;

}

.branc-cta-btn img {
    width: 80%;
    height: 80%;
    object-fit: cover;
}

@keyframes whatsappGlow {

    0% {

        transform: translate(-50%, -50%) scale(1);

        opacity: .8;

    }


    50% {

        transform: translate(-50%, -50%) scale(1.7);

        opacity: 0;

    }


    100% {

        transform: translate(-50%, -50%) scale(1.7);

        opacity: 0;

    }

}

.branch-cta-main-container {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    position: fixed;
    z-index: 6;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.branch-cta-main-container-disable {
    display: none;
    
}

.branch-cta-inner-container {
    background-color: #f9f9f9;
    position: relative;
    height: fit-content;
    padding-block: 60px;
    margin-inline: auto;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 10px;
    padding-inline: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #5BE11E;
    row-gap: 20px;
}

    .branch-cta-inner-container button {
        position: absolute;
        right: 10px;
        top: 4px;
        border: none;
        background-color: rgba(91, 225, 30, 1);
        padding: 5px;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
    }

    .branch-cta-inner-container button svg {
        width: 100%;
        height: 100%;
    }

        .branch-cta-inner-container button:hover {

        }

.brnch-cta-title {
    font-family: var(--kh-reg);
    font-size: 1.5rem;
}

.brnch-cta-item-box {
    display: flex;
    flex-direction: row;
    background-color: #edf8e8;
    align-items: center;
    padding-block: 5px;
    padding-inline: 5px;
    border-radius: 5px;
    text-decoration: none;
}

.brnch-cta-btns-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: relative;
    flex-direction: column;
    column-gap: 20px;
    row-gap: 20px;

}


.brnch-cta-item-name {
    font-family: var(--kh-reg);
    font-size: 1.2rem;
    margin-bottom: 0;
    color: #000;
}





.brnch-cta-item-img-box {
    width: 24px;
    height: 24px;
}

.brnch-cta-item-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*#region Media Query*/


/*#region 860px <= width <= 991px*/

@media (860px <= width <= 991px) {

    .sh-kh-nav-item {
        font-size: 1rem;
    }

}

/*#endregion*/

/*#region 830px <= width <=  860px*/

@media(830px <= width <= 860px) {

    .sh-kh-nav-item {
        font-size: 0.95rem;
    }

}

/*#endregion*/

@media(max-width: 678px) {
    .branch-cta-inner-container {
        overflow-y: auto;
        height: 350px;
        padding-top: 20px;
    }

    .brnch-cta-btns-container {
        grid-template-columns: 1fr;
        padding-inline: 40px;
    }

    .brnch-cta-item-box {
        justify-content: space-between;
    }

    .branch-cta-inner-container button {
        /*position: sticky;
        top: -53px;
        transform: translateX(110px);*/
        top: 8px;
        right: 8px;
    }

}

/*#region Max width 880px*/

@media(max-width: 880px) {

    .sh-kh-nav-container {
        display: none;
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
        border-radius: 25px;
        position: relative;
        left: 0;
        background-color: rgba(0,0,0,1);
        width: 100%;
        position: absolute;
        top: 110%;
        padding: 30px;
    }

    .sh-kh-nav-container-display {
        display: flex;
    }

    .sh-kh-nav-container-cancel {
        display:none;
    }

    .sh-kh-nav-item::after {
        height: 0;
    }

    .sh-kh-bur-menu-box {
        display: flex;
    }

    .sh-kh-line-fasel {
        display: none;
    }


    /*#region Branch*/

    .sh-kh-nav-item-branc-dt-container {
        position: relative; /* بدل absolute */
        left: 0;
        top: 0;
        background-color: transparent; /* أو لون مناسب */
        padding-left: 20px;
        width: 100%;
    }

    .sh-kh-nav-item-branc-dt {
        width: 100%;
        text-align: right;
    }

    /* animation اختياري */
    .sh-kh-nav-item-branc-dt-container {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .sh-kh-nav-item-branc-dt-container-active {
        max-height: 605px; /* قيمة كافية لتغطية كل العناصر */
    }

    .sh-kh-nav-container {
        align-items: flex-end;
    }

    /*#endregion*/
}

/*#endregion*/

/*#region  width <= 370px*/

@media(width <= 370px) {

    .sh-kh-logo-box {
        width: 105px;
    }

}

/*#endregion*/

/*#endregion*/




/* قواعد تجربة الفيديو القديمة (.container و .section و video و .content) انحذفت، لأنو ما في عنصر شغّال عم يستعملها.
   .panel ضلّت لأن الـ Hero بالرئيسية عليه class="sh-kh-hero-section panel"، بس صارت مربوطة فيه هو بس */
.sh-kh-hero-section.panel {
    height: 100vh;
    position: relative;
}

/*#region chat*/

.sy-map-container {
    width: 100%;
    padding-inline: 20px;
    display: flex;
    justify-content: center;
    margin-block: 20px;
    margin-inline: auto;
}

/* الخريطة بتاخد عرض الحاوية لحد 462px وبتحافظ على نسبتها */
.sy-map {
    width: 100%;
    max-width: 462px;
    height: auto;
}

.sy-map path {
    fill: #EDEDED;
    cursor: pointer;
}

/* تلوين المحافظات حسب data-status بالـ CSS مباشرة: الألوان بتبيّن من أول تحميل للصفحة بدل ما تستنى ApplyEffect() بـ test.js (يللي بتشتغل بعد Blazor) */
/* 1 = فرع فعّال (أخضر)، 2 = قريباً (أصفر)، 0 = رمادي من القاعدة يللي فوق */
.sy-map path[data-status="1"] {
    fill: #5BE11E;
}

.sy-map path[data-status="2"] {
    fill: #F2C94C;
}


/*.sy-map path:hover {
    fill: #5be11e;
}*/

/*#region Citeis*/

#Hasaka {
}

#deirAlZour {
}

#AlRaqqah {
}

#Aleppo {
}

#Sweida {
}

#Idlib {
}

#Hama {
}

#Homs {
}

#Tartus {
}

#Latakia {
}

#Daraa {
}

#Damascus {
}


.region-info {
    position: absolute;
    display: none;
}

.region-inner-info-box {
    display: flex;
    background: white;
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    background-color: black;
    flex-direction: column;
    width: fit-content;
    text-decoration: none;
    align-items: center;
    row-gap: 5px;
    position: relative;
}

.region-inner-info-box::after {
     content: "";
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 30px;
    background: #000;
    z-index: 1;
}

.region-inner-info-box::before {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background:#000;
    border-radius: 50%;
    z-index: 2;
}

.region-name {
    color: #fff;
    font-family: var(--kh-bold);
    font-size: 1rem;
}

.region-details {
    color: #fff;
    opacity: 0.7;
    font-size: 0.8rem;
    font-family: var(--kh-reg);
}

.hama-info {
    position: sticky;
    top: 0;
}


/* بطاقة اسم المحافظة لما يمرّ الماوس فوقها (المكان بيتحدد من test.js) */
.sy-map-container {
    position: relative;
}

.kh-map-tip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 2px;
    padding: 8px 16px;
    border-radius: 12px;
    background: var(--sec-color);
    color: #fff;
    box-shadow: 0 10px 24px -8px rgba(0, 34, 33, .45);
    direction: rtl;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, calc(-100% - 4px)) scale(.96);
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease, color .2s ease;
}

    /* السهم الصغير تحت البطاقة */
    .kh-map-tip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -7px;
        border: 7px solid transparent;
        border-top-color: var(--sec-color);
        border-bottom-width: 0;
        transition: border-top-color .2s ease;
    }

.kh-map-tip-on {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 12px));
}

.kh-map-tip-glide {
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease, color .2s ease, left .25s ease, top .25s ease;
}

.kh-map-tip-name {
    font-family: var(--kh-bold);
    font-size: 1rem;
    line-height: 1.4;
}

.kh-map-tip-more {
    font-family: var(--kh-reg);
    font-size: .8rem;
    line-height: 1.4;
    color: var(--pr-color);
}

/* محافظة فرعها لسا ما فتح (data-status = 0): بطاقة بيضا هادية و«قريباً» بشارة رمادية بنقطة صفرا */
.kh-map-tip-soon {
    background: #fff;
    color: var(--sec-color);
    box-shadow: 0 10px 24px -8px rgba(0, 34, 33, .3), 0 0 0 1px rgba(0, 34, 33, .08);
}

    .kh-map-tip-soon::after {
        border-top-color: #fff;
    }

    .kh-map-tip-soon .kh-map-tip-more {
        display: inline-flex;
        align-items: center;
        column-gap: 5px;
        margin-top: 2px;
        padding: 1px 9px;
        border-radius: 999px;
        background: #F1F3F2;
        color: #5F6B69;
    }

        .kh-map-tip-soon .kh-map-tip-more::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #F2C94C;
        }

/* المحافظة يللي عليها الماوس بتغمق شوي */
.sy-map path[id] {
    transition: filter .2s ease;
}

    .sy-map path[id]:hover {
        filter: brightness(.92);
    }

@media (prefers-reduced-motion: reduce) {
    .kh-map-tip, .kh-map-tip-glide {
        transition: opacity .15s ease;
    }
}


/*#endregion*/


/*#endregion*/


/*#region "كن شريكنا" مميّز بالهيدر (إضافة 23-10-2026)*/

/* الرابط بيتعرف من الـ href، فما في تعديل على Header.razor. هو الهدف الأساسي من الموقع، فبيطلع كبسولة خضرا فيها نقطة بتنبض ولمعة بتمرق كل شوي */
@media (min-width: 881px) {
    .sh-kh-nav-container {
        align-items: center;
    }
}

.sh-kh-nav-item[href="/partner"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 5px 16px;
    border-radius: 999px;
    border: 1px solid rgba(91, 225, 30, 0.7);
    background-color: rgba(91, 225, 30, 0.14);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* النقطة يللي بتنبض */
.sh-kh-nav-item[href="/partner"]::before {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--pr-color);
    animation: kh-partner-dot 2s ease-out infinite;
}

/* الخط الأخضر يللي تحت باقي الروابط صار هون لمعة بتمرق فوق الكبسولة */
.sh-kh-nav-item[href="/partner"]::after,
.sh-kh-nav-item[href="/partner"]:hover::after {
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    z-index: -1;
    animation: kh-partner-shine 5s ease-in-out infinite;
}

.sh-kh-nav-item[href="/partner"]:hover,
.sh-kh-nav-item[href="/partner"]:focus-visible {
    background-color: var(--pr-color);
    color: var(--sec-color);
    box-shadow: 0 0 18px rgba(91, 225, 30, 0.45);
}

.sh-kh-nav-item[href="/partner"]:hover::before,
.sh-kh-nav-item[href="/partner"]:focus-visible::before {
    background-color: var(--sec-color);
}

@keyframes kh-partner-dot {
    0% {
        box-shadow: 0 0 0 0 rgba(91, 225, 30, 0.7);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(91, 225, 30, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(91, 225, 30, 0);
    }
}

@keyframes kh-partner-shine {
    0%, 70% {
        left: -60%;
    }

    100% {
        left: 130%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sh-kh-nav-item[href="/partner"]::before,
    .sh-kh-nav-item[href="/partner"]::after,
    .sh-kh-nav-item[href="/partner"]:hover::after {
        animation: none;
    }
}

/*#endregion*/