/*==================================================
=            HYKI CONTACT CENTER                  =
=              ساختار اصلی کارت                   =
==================================================*/

.hyki-expert-card{

    width:100%;
    max-width:780px;

    margin:30px auto;

    border-radius:22px;

    overflow:hidden;

    direction:rtl;

    position:relative;

    border:1px solid rgba(255,255,255,.18);

    background:transparent;

    box-shadow:
        0 12px 35px rgba(0,0,0,.10);

    transition:.35s ease;

}

#hyki-expert-card.menu-open .hyki-question-wrap {
    display: none;
}

.hyki-expert-name{
    display:none;
    color:#ffffff;
    font-size:20px;
    font-weight:700;
    text-align:center;
}


#hyki-expert-card.menu-open .hyki-expert-name{
    display:block;
}


#hyki-expert-card.menu-open .hyki-question-wrap{
    display:none !important;
}

/*==================================================
=                هدر کارت                          =
==================================================*/

.hyki-card-header{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:18px;

    padding:26px 20px;

    background:transparent;

}


/*==================================================
=          سوال بالای کارت                        =
==================================================*/

.hyki-question{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    transition:
        opacity .35s ease,
        transform .35s ease;

}

.hyki-question-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#5bd604;

    color:#333;

    font-size:22px;

    font-weight:700;

    box-shadow:
        0 4px 14px rgba(0,0,0,.15);

}

.hyki-question-text{

    color:#ffffff;

    font-size:20px;

    font-weight:700;

}


/*==================================================
=         دکمه ارتباط با کارشناس                  =
==================================================*/

.hyki-expert-toggle{

    width:100%;

    max-width:360px;

    height:58px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    background:#5bd604;

    color:#222;

    font-size:17px;

    font-weight:700;

    transition:.30s ease;

}

.hyki-expert-toggle:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 24px rgba(0,0,0,.18);

}

.hyki-expert-toggle:active{

    transform:scale(.98);

}


/*==================================================
=              فلش دکمه                           =
==================================================*/

.hyki-toggle-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

}

.hyki-toggle-arrow img{

    width:20px;

    height:20px;

    transition:.35s ease;

}

.hyki-expert-toggle.active .hyki-toggle-arrow img{

    transform:rotate(180deg);

}
/*==================================================
=              بدنه شیشه‌ای منو                   =
==================================================*/

.hyki-expert-menu{

    position:relative;

    display:grid;

    grid-template-columns:repeat(3,110px);

    justify-content:center;

    justify-items:center;

    align-items:center;

    gap:26px 30px;

    overflow:hidden;

    max-height:0;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    padding:0 25px;

    margin:0;

    /* شیشه‌ای */
    background:rgba(255,255,255,.10);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    border-top:1px solid rgba(255,255,255,.18);

    transition:
        max-height .55s ease,
        opacity .45s ease,
        padding .45s ease,
        visibility .45s ease;

}


/*==================================================
=            حالت باز بودن منو                    =
==================================================*/

.hyki-expert-menu.active{

    max-height:750px;

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    padding:30px 25px;

}
/*==================================================
=          چیدمان آیکن‌های منو                     =
==================================================*/

/*
    ردیف اول
    فقط دکمه تماس
*/

.hyki-call{

    grid-column:2;

    grid-row:1;

}


/*
    ردیف دوم
*/

.hyki-whatsapp{

    grid-column:1;

    grid-row:2;

}

.hyki-sms{

    grid-column:2;

    grid-row:2;

}

.hyki-telegram{

    grid-column:3;

    grid-row:2;

}


/*
    ردیف سوم
*/

.hyki-bale{

    grid-column:1;

    grid-row:3;

}

.hyki-eitaa{

    grid-column:2;

    grid-row:3;

}

.hyki-rubika{

    grid-column:3;

    grid-row:3;

}


/*==================================================
=          تنظیم اندازه آیکن‌ها                    =
==================================================*/

.hyki-item{

    width:90px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    text-align:center;

    gap:10px;

    color:#333;

    font-weight:700;

}


/*
    آیکن تماس بزرگ‌تر
*/

.hyki-call img{

    width:90px;

    height:90px;

}


/*
    سایر آیکن‌ها
*/

.hyki-item:not(.hyki-call) img{

    width:62px;

    height:62px;

}


/*
    متن زیر آیکن
*/

.hyki-item span{

    font-size:13px;

    color:#222;

    transition:.25s ease;

}
/*==================================================
=          استایل آیکن‌های SVG                     =
==================================================*/

.hyki-item img{

    display:block;

    object-fit:contain;

    background:none;

    border:none;

    border-radius:0;

    box-shadow:none;

    padding:0;

    transition:
        transform .30s ease,
        filter .30s ease;

}


/*==================================================
=        آیکن‌های رنگی (رنگ اصلی خود SVG)          =
==================================================*/

.hyki-call img,
.hyki-whatsapp img,
.hyki-telegram img,
.hyki-rubika img{

    filter:none;

}


/*==================================================
=      آیکن‌های سیاه و سفید                        =
==================================================*/

.hyki-sms img,
.hyki-bale img,
.hyki-eitaa img{

    filter:none;

}

/*==================================================
=             Hover عمومی                           =
==================================================*/

.hyki-item:hover{

    transform:
        translateY(-6px)
        scale(1.05);

}

.hyki-item:hover img{

    transform:scale(1.12);

}


/*==================================================
=          Glow اختصاصی هر آیکن                     =
==================================================*/

.hyki-call:hover img{

    filter:
        drop-shadow(0 0 10px rgba(0,176,80,.45));

}

.hyki-whatsapp:hover img{

    filter:
        drop-shadow(0 0 12px rgba(37,211,102,.55));

}

.hyki-telegram:hover img{

    filter:
        drop-shadow(0 0 12px rgba(42,171,238,.55));

}

.hyki-rubika:hover img{

    filter:
        drop-shadow(0 0 12px rgba(143,47,255,.55));

}


/*==================================================
=      سیاه و سفیدها هنگام هاور رنگی شوند          =
==================================================*/

.hyki-sms:hover img{

    filter:
        drop-shadow(0 0 10px rgba(0,188,255,.55));

}

.hyki-bale:hover img{

    filter:
        drop-shadow(0 0 10px rgba(40,167,69,.55));

}

.hyki-eitaa:hover img{

    filter:
        drop-shadow(0 0 10px rgba(255,136,0,.55));

}
/*==================================================
=          انیمیشن ورود و خروج آیکن‌ها            =
==================================================*/

.hyki-item{

    opacity:0;

    transform:translateY(25px) scale(.80);

    transition:
        opacity .35s ease,
        transform .35s ease;

}


/*
    وقتی منو باز شد
*/

.hyki-expert-menu.active .hyki-item{

    opacity:1;

    transform:translateY(0) scale(1);

}


/*==================================================
=      ترتیب ظاهر شدن آیکن‌ها                      =
==================================================*/

/* تماس */

.hyki-expert-menu.active .hyki-call{

    transition-delay:.05s;

}

/* واتساپ */

.hyki-expert-menu.active .hyki-whatsapp{

    transition-delay:.12s;

}

/* پیامک */

.hyki-expert-menu.active .hyki-sms{

    transition-delay:.20s;

}

/* تلگرام */

.hyki-expert-menu.active .hyki-telegram{

    transition-delay:.28s;

}

/* بله */

.hyki-expert-menu.active .hyki-bale{

    transition-delay:.36s;

}

/* ایتا */

.hyki-expert-menu.active .hyki-eitaa{

    transition-delay:.44s;

}

/* روبیکا */

.hyki-expert-menu.active .hyki-rubika{

    transition-delay:.52s;

}


/*==================================================
=      انیمیشن خروج                               =
==================================================*/

/*
    هنگام بسته شدن، چون کلاس active حذف می‌شود،
    transitionها به صورت خودکار برعکس اجرا می‌شوند.
*/

.hyki-call,
.hyki-whatsapp,
.hyki-sms,
.hyki-telegram,
.hyki-bale,
.hyki-eitaa,
.hyki-rubika{

    transition:
        opacity .30s ease,
        transform .30s ease;

}
/*==================================================
=                واکنش‌گرا (موبایل)               =
==================================================*/

@media (max-width:768px){

    .hyki-expert-card{

        margin:18px 12px;

        border-radius:18px;

    }

    .hyki-card-header{

        padding:20px 14px;

        gap:14px;

    }

    .hyki-question-text{

        font-size:17px;

    }

    .hyki-question-icon{

        width:36px;
        height:36px;
        font-size:19px;

    }

    .hyki-expert-toggle{

        width:100%;
        max-width:100%;
        height:52px;

        font-size:15px;

    }

    .hyki-expert-menu{

        grid-template-columns:repeat(3,85px);

        gap:18px 16px;

        padding:0 10px;

    }

    .hyki-expert-menu.active{

        padding:24px 10px;

    }

    .hyki-item{

        width:82px;

    }

    .hyki-call img{

        width:74px;
        height:74px;

    }

    .hyki-item:not(.hyki-call) img{

        width:54px;
        height:54px;

    }

    .hyki-item span{

        font-size:12px;

    }

}


/*==================================================
=             انیمیشن کلی کارت                    =
==================================================*/

.hyki-expert-card{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.hyki-expert-card:hover{

    transform:translateY(-2px);

    box-shadow:
        0 16px 42px rgba(0,0,0,.15);

}


/*==================================================
=              ظاهر کلی لینک‌ها                   =
==================================================*/

.hyki-item{

    user-select:none;

    cursor:pointer;

}

.hyki-item span{

    transition:.25s ease;

}

.hyki-item:hover span{

    color:#000;

}


/*==================================================
=          جلوگیری از انتخاب متن                  =
==================================================*/

.hyki-expert-toggle,
.hyki-question{

    user-select:none;

}

/*=========================================
=       لینک‌های غیرفعال کارشناس          =
=========================================*/

.hyki-disabled{
    opacity:.45;
    cursor:not-allowed !important;
}

.hyki-disabled:hover{
    transform:none !important;
}

.hyki-disabled:hover img{
    transform:none !important;
    filter:none !important;
}

.hyki-disabled:hover span{
    color:#222 !important;
}

/*==================================================
=            پایان فایل CSS                       =
==================================================*/