/* =========================================
   RECEIVING — HINTS AND TABLE STATES
   Только треугольники подсказок и состояния таблицы.
   Позиции кнопок и ТСД здесь не задаются.
========================================= */

.demo_02 .items-row.row-selected {
    background: #FEF5ED;
}

.demo_02 .receiving-fact-highlight {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    border: 1px solid #E0C2EA;
    border-radius: 50%;
    background: #FFF;
    color: #252424;
    box-shadow:
        0 2px 4px rgba(216, 77, 255, 0.18),
        0 6px 12px rgba(216, 77, 255, 0.16);
}

/* =========================================
   RECEIVING — FACT MARKER POSITIONS
   Менять положение нужно только здесь.
========================================= */
.demo_02 {
    --fact-marker-milk-left: 576px;
    --fact-marker-milk-top: 680px;
    --fact-marker-kefir-left: 576px;
    --fact-marker-kefir-top: 603px;
}

/* Цифра-подсказка находится вне таблицы и видна поверх затемнения. */
.demo_02 #number {
    position: absolute;
    z-index: 8;
}

.demo_02 #number[data-marker-position="milk"] {
    left: var(--fact-marker-milk-left);
    top: var(--fact-marker-milk-top);
}

.demo_02 #number[data-marker-position="kefir"] {
    left: var(--fact-marker-kefir-left);
    top: var(--fact-marker-kefir-top);
}

.demo_02 #number span {
    border: 1px solid #E0C2EA;
    background: #FFF;
    color: #252424;
    box-shadow:
        0 2px 4px rgba(216, 77, 255, 0.18),
        0 6px 12px rgba(216, 77, 255, 0.16);
}

/* Треугольник справа: подсказка указывает на ТСД. */
.demo_02 #hint-lesson-4::after,
.demo_02 #hint-lesson-6::after,
.demo_02 #hint-lesson-8::after,
.demo_02 #hint-lesson-11::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -25px;
    width: 26px;
    height: 36px;
    transform: translateY(-50%);
    background: #FFF;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    filter: drop-shadow(4px 0 4px rgba(149, 157, 165, 0.16));
    pointer-events: none;
}
.demo_02 #hint-lesson-11::after {
	transform: translateY(83%);
}
.demo_02 #hint-lesson-4::after {
	transform: translateY(25%);
}
/* Треугольник вниз: подсказка указывает на изменённое количество. */
.demo_02 #hint-lesson-5::after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 50%;
    width: 36px;
    height: 26px;
    transform: translateX(-50%);
    background: #FFF;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    filter: drop-shadow(0 4px 4px rgba(149, 157, 165, 0.16));
    pointer-events: none;
}

.demo_02 #hint-lesson-12 .hint__head {
    position: relative;
}

.demo_02 #hint-lesson-12 .hint__close {
    position: absolute;
    top: 0;
    right: 0;
}

/* =========================================
   RECEIVING — COMPLETION HINT — FIGMA 3272:20709
   Положение управляется только этими переменными.
========================================= */
.demo_02 {
    --receiving-complete-hint-top: 651px;
    --receiving-complete-hint-right: 466px;
    --receiving-complete-hint-width: 500px;
}

.demo_02 #hint-lesson-11 {
    top: var(--receiving-complete-hint-top);
    right: var(--receiving-complete-hint-right);
    left: auto;
    width: var(--receiving-complete-hint-width);
    max-width: var(--receiving-complete-hint-width);
    margin: 0;
    padding: 32px 24px 24px;
    transform: none;
}

.demo_02 #hint-lesson-11 .hint__body {
    width: 100%;
}

.demo_02 #hint-lesson-11 .image-block {
    display: none;
}