/* =========================================
   DEMO 03 — INVENTORY ONLY
   Стили сценария, без правок общего styles.css
========================================= */
.cart-pills .pill.active img:last-child {
    margin-left: 2px;
}

.inventory-card {
    position: relative;
    overflow: visible;
}

.inventory-meta-grid {
    grid-template-columns:
        minmax(130px, .8fr)
        minmax(120px, .7fr)
        minmax(190px, 1fr)
        minmax(190px, 1fr)
        minmax(210px, 1fr)
        minmax(180px, .9fr);
}

.inventory-items-grid {
    grid-template-columns: minmax(210px, 0.85fr) minmax(150px, 0.6fr) minmax(130px, 0.5fr) minmax(190px, 0.5fr) minmax(140px, 1.3fr);
}

.inventory-items-grid > div:first-child,
.inventory-meta-grid > div:first-child {
    padding-left: 0;
}

.inventory-row-placeholder {
    min-height: 54px;
}

.inventory-fact-badge {
    display: inline;
}

.inventory-hint-image {
    display: block;
    width: 100%;
    height: 445px;
    margin-top: 24px;
    border-radius: 16px;
    object-fit: cover;
    object-position: center;
}

.inventory-image-placeholder {
    display: none;
}

.inventory-scan-frame {
    position: absolute;
    left: 8px;
    top: -209px;
    width: 298px;
    height: 182px;
    z-index: 4;
    border-radius: 24px;
    border: 1px solid #BA26DC;
    background: #fff;
    box-shadow: 0 8px 24px 0 rgba(149, 157, 165, 0.20);
    overflow: hidden;
}

.inventory-scan-frame__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #fff;
}

.inventory-scan-frame__label {
    display: none;
}

.phone-lesson.inventory-phone {
    display: block;
    z-index: 3;
}

.inventory-phone .image-container {
    max-width: 312px;
}

.inventory-phone-shadow::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 36px;
    width: 275px;
    height: 550px;
    background: rgba(0,0,0,.38);
    z-index: 2;
}

#inventory-phone-top-hint {
    position: absolute;
    top: 59px;
    left: 23px;
    width: 211px;
    height: auto;
    z-index: 7;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
}

#inventory-phone-final-top-hint {
    position: absolute;
    top: 36px;
    left: 19px;
    width: 275px;
    height: auto;
    z-index: 7;
    cursor: pointer;
    overflow: hidden;
}

.inventory-phone-filter-glow {
    position: absolute;
    right: -32px;
    top: 58px;
    width: 180px;
    height: 470px;
    pointer-events: none;
    background: radial-gradient(circle at 50% 45%, rgba(232,10,37,.36), rgba(232,10,37,0) 70%);
    z-index: 2;
}

.inventory-scan-button {
    width: 265px;
    height: 40px;
    border-radius: 24px;
    background: linear-gradient(91deg, #BA26DC 0%, #8C31AC 100%);
    color: #fff;
    font-size: 15px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}

.inventory-unload-button {
    width: 265px;
    height: 40px;
    border-radius: 24px;
    background: #06C99B;
    color: #fff;
    font-size: 15px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}

.inventory-button-disabled {
    pointer-events: none;
    opacity: .68;
}

.inventory-button-disabled.box-shadow,
.inventory-button-disabled .inventory-scan-button {
    animation: none;
    box-shadow: none;
}

.inventory-button-disabled .inventory-scan-button {
    cursor: default;
}

.inventory-success-actions {
    justify-content: center;
}

#button-lesson,
#button-lesson-1-2,
#button-lesson-2-2,
#button-lesson-3-2,
#button-lesson-4-2,
#button-lesson-5-2,
#button-lesson-6-2 {
    top: 805px;
    right: 47px;
    z-index: 5;
    height: 40px;
    border-radius: 24px;
}

#button-lesson-11 {
    top: 805px;
    right: 47px;
    z-index: 5;
    height: 40px;
    border-radius: 24px;
}

#button-lesson-11.box-shadow-green {
    box-shadow: 0 0 28px 6px rgba(6, 201, 155, 0.85);
    animation: buttonPulseGlowGreen 1.25s ease-in-out infinite;
}

@keyframes buttonPulseGlowGreen {
    0%, 100% {
        box-shadow: 0 0 28px 6px rgba(6, 201, 155, 0.85);
    }
    50% {
        box-shadow: 0 0 42px 12px rgba(6, 201, 155, 1);
    }
}

#button-inventory-back {
    top: 306px;
    right: 244px;
    z-index: 8;
    width: 92px;
    height: 74px;
    border-radius: 18px;
    cursor: pointer;
}

#hint-lesson-3 {
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    max-width: 884px;
}

#hint-lesson-3 .hint__body p,
#hint-lesson-11 .hint__body p {
    color: #96A6C2;
}

#hint-lesson-4 {
    top: 684px;
    right: 460px;
    left: auto;
    max-width: 443px;
}

#hint-lesson-5 {
	top: 378px;
    right: 974px;
    left: auto;
    max-width: 360px;
}

#hint-lesson-6 {
	top: 270px;
    right: 466px;
    left: auto;
    max-width: 425px;
}

#hint-lesson-8,
#hint-lesson-14 {
	top: 683px;
    right: 461px;
    left: auto;
    max-width: 425px;
}

#hint-lesson-11 {
    top: var(--inventory-complete-hint-top);
    right: var(--inventory-complete-hint-right);
    left: auto;
    width: var(--inventory-complete-hint-width);
    max-width: var(--inventory-complete-hint-width);
    margin: 0;
    transform: none;
}

.demo-inventory #hint-lesson-11::after {
    transform: translateY(-50%);
}

.demo-inventory #hint-lesson-11 .inventory-hint-image {
    display: none;
}

#hint-lesson-12 {
    top: 50%;
    left: 50%;
    right: auto;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    max-width: 884px;
}

#hint-lesson-12 .hint__head {
    justify-content: center;
}

#hint-lesson-12 .action-button {
    justify-content: center;
}

.inventory-hidden {
    display: none;
}

/* =========================================
   INVENTORY — FACT MARKER POSITIONS
   Менять положение нужно только здесь.
========================================= */
.demo-inventory {

    --fact-marker-row-1-left: 744px;
    --fact-marker-row-1-top: 601px;
    --fact-marker-row-2-left: 744px;
    --fact-marker-row-2-top: 678px;

    --inventory-complete-hint-top: 654px;
    --inventory-complete-hint-right: 460px;
    --inventory-complete-hint-width: 571px;
}

.demo-inventory #number {
    z-index: 8;
}

.demo-inventory #number[data-marker-position="row-1"] {
    left: var(--fact-marker-row-1-left);
    top: var(--fact-marker-row-1-top);
}

.demo-inventory #number[data-marker-position="row-2"] {
    left: var(--fact-marker-row-2-left);
    top: var(--fact-marker-row-2-top);
}

/* ===== Scan button style from Figma ===== */
.inventory-scan-button {
    width: 265px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 32px 16px;
    border-radius: 60px;
    background: linear-gradient(96deg, #BA26DC 0%, #5F1075 211.82%);
    color: #FFF;
    font-size: 18px;
    line-height: 27px;
    font-weight: 400;
    white-space: nowrap;
    user-select: none;
    box-sizing: border-box;
}

.inventory-scan-button::before {
    content: "";
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background-color: currentColor;
    mask: url("/img/scan.svg") center / contain no-repeat;
    -webkit-mask: url("/img/scan.svg") center / contain no-repeat;
}

#button-lesson,
#button-lesson-1-2,
#button-lesson-2-2,
#button-lesson-3-2,
#button-lesson-4-2,
#button-lesson-5-2,
#button-lesson-6-2 {
    height: 42px;
    border-radius: 60px;
}

/* =========================================
   UNIFIED TSD GEOMETRY
   Размеры и позиция взяты из демо приёмки.
========================================= */
.phone-lesson.inventory-phone {
    top: 269px;
    right: 24px;
}

.inventory-phone .image-container {
    max-width: 400px;
}

.inventory-phone .image-container .phone-image {
    display: block;
    width: 400px;
    max-width: 100%;
}

.inventory-phone .image-container .phone-content {
    top: 45px;
    left: 32px;
    width: 337px;
    height: 544px;
}

.inventory-phone-shadow::before {
    top: 45px;
    left: 32px;
    width: 337px;
    height: 544px;
}

#inventory-phone-top-hint {
    top: 68px;
    left: 37px;
    width: 258px;
}

#inventory-phone-final-top-hint {
    top: 45px;
    left: 32px;
    width: 337px;
}

.inventory-scan-frame {
    top: -209px;
    left: 8px;
    width: 298px;
    height: 182px;
}

#button-lesson,
#button-lesson-1-2,
#button-lesson-2-2,
#button-lesson-3-2,
#button-lesson-4-2,
#button-lesson-5-2,
#button-lesson-6-2,
#button-lesson-11 {
    top: 808px;
    right: 50px;
}