/* ===================================================================
   TRAINING QUEST WIDGET — выдвижная панель обучения (геймификация)
   =================================================================== */

.tqw{
    position:fixed;
    left:0;
    top:0;
    height:100vh;
    display:flex;
    align-items:center;
    z-index:1045;
    pointer-events:none; /* сам контейнер прозрачен для кликов */
}

.tqw-tab,
.tqw-overlay,
.tqw-panel{
    pointer-events:auto; /* а интерактивные элементы внутри — кликабельны */
}

/* --- Вкладка-выступ (десктоп) --- */
.tqw-tab{
    display:flex;
    align-items:center;
    gap:.5rem;
    background:linear-gradient(160deg,#0f1720 0%,#0a3a52 55%,#008fb7 100%);
    color:#fff;
    border:none;
    border-radius:0 16px 16px 0;
    padding:.9rem .7rem .9rem .8rem;
    box-shadow:4px 6px 24px rgba(0,60,90,.35);
    cursor:pointer;
    writing-mode:vertical-rl;
    text-orientation:mixed;
    font-weight:700;
    font-size:.86rem;
    letter-spacing:.02em;
    max-height:220px;
    animation:tqwPulse 2.6s infinite;
    transition:padding .2s, transform .2s;
}
.tqw-tab:hover{padding-right:1.1rem}
.tqw-tab-icon{display:inline-flex;color:var(--yellow,#ffe600);writing-mode:horizontal-tb}
.tqw-tab-icon svg{width:22px;height:22px}
.tqw-tab-arrow{writing-mode:horizontal-tb;transition:transform .25s}
.tqw-tab-arrow svg{width:16px;height:16px}
.tqw[data-open="true"] .tqw-tab-arrow{transform:rotate(180deg)}

@keyframes tqwPulse{
    0%,100%{box-shadow:4px 6px 24px rgba(0,60,90,.35)}
    50%{box-shadow:4px 6px 24px rgba(0,150,220,.55),0 0 0 6px rgba(0,180,255,.12)}
}
@keyframes tqwAttract{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(6px)}
    40%{transform:translateX(0)}
    60%{transform:translateX(4px)}
    80%{transform:translateX(0)}
}
.tqw-tab.tqw-tab-attract{animation:tqwAttract .9s ease}
@media (prefers-reduced-motion:reduce){
    .tqw-tab{animation:none}
    .tqw-tab.tqw-tab-attract{animation:none}
}

/* --- Overlay --- */
.tqw-overlay{
    position:fixed;inset:0;
    background:rgba(6,16,26,.55);
    opacity:0;visibility:hidden;
    transition:opacity .25s;
    z-index:1044;
}
.tqw[data-open="true"] .tqw-overlay{opacity:1;visibility:visible}

/* --- Панель (десктоп: центрированное модальное окно) --- */
.tqw-panel{
    position:fixed;
    top:50%;
    left:50%;
    width:min(760px, 90vw);
    max-height:85vh;
    height:auto;
    background:#fff;
    border-radius:28px;
    box-shadow:0 30px 90px rgba(0,0,0,.35);
    transform:translate(-50%,-48%) scale(.96);
    opacity:0;
    visibility:hidden;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
    z-index:1046;
    overflow-y:auto;
    padding:2.6rem 3rem;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    grid-template-areas:
        "head    rewards"
        "title   rewards"
        "text    rewards"
        "price   price";
    column-gap:2.4rem;
    row-gap:1.4rem;
    align-items:start;
}
.tqw[data-open="true"] .tqw-panel{
    transform:translate(-50%,-50%) scale(1);
    opacity:1;
    visibility:visible;
}

/* --- Открытая панель — максимальный z-index, перекрывает все виджеты --- */
.tqw[data-open="true"] .tqw-panel{z-index:2010}
.tqw[data-open="true"] .tqw-overlay{z-index:2009}

.tqw-quest-head{ grid-area:head; margin-bottom:0 }
.tqw-title{ grid-area:title; font-size:1.5rem; margin-bottom:0 }
.tqw-text{ grid-area:text; margin-bottom:0 }
.tqw-rewards{
    grid-area:rewards;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin:0;
}
.tqw-price-row{ grid-area:price }

.tqw-close{
    position:absolute;top:1rem;right:1rem;
    width:36px;height:36px;border-radius:50%;
    border:none;background:#f2f7fa;color:#5a6673;
    display:flex;align-items:center;justify-content:center;
}
.tqw-close svg{width:18px;height:18px}
.tqw-close{ top:1.4rem; right:1.4rem }
.tqw-quest-head{margin-bottom:1.2rem}
.tqw-quest-badge{
    display:inline-flex;align-items:center;
    background:rgba(255,230,0,.16);border:1px solid rgba(255,183,0,.55);
    color:#b8860b;border-radius:50px;padding:.35rem .9rem;
    font-weight:700;font-size:.78rem;
}
.tqw-level{display:flex;align-items:center;gap:.6rem;margin-top:.8rem}
.tqw-level-num{font-weight:800;color:var(--accent-dark,#008fb7);font-size:.85rem;white-space:nowrap}
.tqw-level-bar{flex:1;height:8px;border-radius:50px;background:#e6eef4;overflow:hidden}
.tqw-level-bar-fill{display:block;height:100%;width:0%;background:var(--accent-grad,linear-gradient(135deg,#00b4ff,#0077cc));transition:width 1s ease .2s}
.tqw-level-cap{font-size:.75rem;color:#8291a0;white-space:nowrap}

.tqw-title{font-size:1.25rem;font-weight:800;line-height:1.3;margin-bottom:.6rem}
.tqw-text{color:#5a6673;margin-bottom:1.2rem}

.tqw-rewards{list-style:none;padding:0;margin:0 0 1.4rem}
.tqw-rewards li{
    display:flex;align-items:center;gap:.6rem;
    padding:.6rem .8rem;margin-bottom:.5rem;
    background:#f2f7fa;border-radius:12px;font-weight:600;font-size:.92rem;
}
.tqw-rewards .ico{color:var(--accent,#00b4ff);width:20px;height:20px;flex-shrink:0}

.tqw-price-row{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:1rem;
    border-top:1px dashed #dde6ee;padding-top:1.2rem;
}
.tqw-price{display:block;font-size:1.6rem;font-weight:800;color:var(--accent-dark,#008fb7)}
.tqw-price-sub{display:block;font-size:.78rem;color:#8291a0}
.tqw-btn{white-space:nowrap}

/* ===================== МОБИЛЬНАЯ АДАПТАЦИЯ ===================== */
@media (max-width:768px){

    /* Виджет становится пилюлей с иконкой и подписью «Обучение ГБО»,
       чтобы было понятно назначение кнопки, и располагается над
       кнопкой обратного звонка (fab-btn) в правом нижнем углу */
    .tqw{
        top:auto;
        left:auto;
        right: 76px;
        bottom: 18px;
        height:auto;
        width:auto;
        display:block;
    }
    .tqw-tab{
        writing-mode:horizontal-tb;
        flex-direction:row;
        gap:.45rem;
        width:auto;
        height:44px;
        border-radius:50px;
        padding:0 1rem 0 .8rem;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        background:var(--accent-grad, linear-gradient(135deg,#00b4ff,#0077cc));
        box-shadow:0 8px 26px rgba(0,150,220,.5);
        max-height:none;
    }
    .tqw-tab-text{
        display:inline-block;
        writing-mode:horizontal-tb;
        font-size:.74rem;
        font-weight:700;
        white-space:nowrap;
        color:#fff;
    }
    .tqw-tab-arrow{display:none}
    .tqw-tab-icon{color:#fff;writing-mode:horizontal-tb}
    .tqw-tab-icon svg{width:19px;height:19px}

    /* Панель раскрытия — нижний лист (bottom sheet) */
    .tqw-panel{
        display:block; /* отключаем десктопный грид */
        top:auto;bottom:0;left:0;
        width:100%;
        height:auto;
        max-height:88vh;
        border-radius:24px 24px 0 0;
        transform:translateY(100%);
        padding:1.6rem 1.3rem 2rem;
    }
    .tqw[data-open="true"] .tqw-panel{transform:translateY(0)}
    .tqw-panel::before{
        content:"";
        display:block;
        width:44px;height:5px;
        border-radius:50px;
        background:#dde6ee;
        margin:0 auto 1rem;
    }
    .tqw-close{top:.9rem;right:.9rem}
    .tqw-title{font-size:1.05rem}
    .tqw-price{font-size:1.35rem}
    .tqw-price-row{padding-top:1rem}
}