// upsells_popup — global modal opened via EventBus 'upsells:open' after an
// assessment add-to-basket. Global chrome (not a .pageSection block), so it
// uses base brand tokens directly. Figma 4653-10948 ("Assessment/Upsell").

.upsellsPopup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.5);

    &__dialog {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 560px;
        max-height: calc(100vh - 48px);
        overflow: auto;
        background: #fff;
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);

        &:focus {
            outline: none;
        }

        @media @mobile {
            padding: 28px 20px;
            border-radius: 16px;
        }
    }

    &__close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--text_color, #292929);
        cursor: pointer;
        transition: background-color 0.15s ease;

        &:hover {
            background: rgba(0, 0, 0, 0.06);
        }

        &:focus-visible {
            outline: 2px solid var(--primary_color);
            outline-offset: 2px;
        }
    }

    &__header {
        margin: 0 32px 24px 0;
    }

    &__title {
        margin: 0 0 8px;
        font-family: var(--body_font);
        .rems(24);
        font-weight: 700;
        line-height: 1.3;
        color: #000;
    }

    &__subtitle {
        margin: 0;
        font-family: var(--body_font);
        .rems(14);
        font-weight: 400;
        line-height: 1.5;
        color: var(--card_text_muted, #535353);
    }

    &__body {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    // Pinned just-added product — confirmation only, no add button.
    &__pinned {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        background: var(--med_color, #f0eee8);
        border-radius: 16px;
    }

    &__pinnedText {
        flex: 1 1 auto;
        min-width: 0;
    }

    &__check {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--success_color, #176346);
    }

    // Upsell rows
    &__row {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 16px 0;
        border-top: 1px solid var(--border_color, #e6e6e6);

        &.is-added {
            opacity: 0.85;
        }
    }

    &__thumb {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 12px;
        background: var(--light_color, #f7f7f2);

        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }

    &__rowBody {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    &__rowText {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    &__rowName {
        margin: 0;
        font-family: var(--body_font);
        .rems(16);
        font-weight: 700;
        line-height: 1.4;
        color: #000;
    }

    &__rowMeta {
        margin: 0;
        font-family: var(--body_font);
        .rems(14);
        font-weight: 400;
        line-height: 1.5;
        color: var(--card_text_muted, #535353);
    }

    // The reused size selector sheds its product-page bottom padding inside a row.
    .productSizes {
        padding: 0;
    }

    &__rowFooter {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    &__price {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

    &__priceNow {
        font-family: var(--body_font);
        .rems(16);
        font-weight: 700;
        line-height: 1.4;
        color: #000;

        &--sale {
            color: var(--danger_color, #8f1923);
        }
    }

    &__priceWas {
        font-family: var(--body_font);
        .rems(14);
        font-weight: 400;
        line-height: 1.5;
        color: var(--card_text_muted, #535353);
        text-decoration: line-through;
    }

    &__add {
        flex: 0 0 auto;
        padding: 12px 20px;
        border: 0;
        border-radius: 12px;
        background: var(--dark_button_color, #000);
        color: #fff;
        font-family: var(--body_font);
        .rems(14);
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        transition: opacity 0.15s ease;

        &:hover {
            opacity: 0.88;
        }

        &:focus-visible {
            outline: 2px solid var(--primary_color);
            outline-offset: 2px;
        }

        &:disabled {
            cursor: default;
            opacity: 1;
        }
    }

    &__rowError {
        flex: 1 1 100%;
        margin: 8px 0 0;
        font-family: var(--body_font);
        .rems(14);
        line-height: 1.5;
        color: var(--danger_color, #8f1923);
    }

    &__footer {
        display: flex;
        justify-content: flex-end;
        margin-top: 24px;
    }

    &__skip {
        padding: 14px 24px;
        border: 1px solid var(--border_color, #e6e6e6);
        border-radius: 12px;
        background: transparent;
        color: #0d0d0d;
        font-family: var(--body_font);
        .rems(14);
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        transition: background-color 0.15s ease;

        &:hover {
            background: rgba(0, 0, 0, 0.04);
        }

        &:focus-visible {
            outline: 2px solid var(--primary_color);
            outline-offset: 2px;
        }

        // Once an upsell has been added, the footer button becomes the primary
        // "Continue to basket" CTA — filled and shimmering to draw the eye.
        &--continue {
            position: relative;
            overflow: hidden;
            border-color: transparent;
            background: var(--dark_button_color, #0d0d0d);
            color: #fff;

            &:hover {
                background: var(--dark_button_color, #0d0d0d);
                opacity: 0.92;
            }

            // Sweeping highlight.
            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: -150%;
                width: 75%;
                height: 100%;
                background: linear-gradient(
                    100deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.45) 50%,
                    rgba(255, 255, 255, 0) 100%
                );
                transform: skewX(-20deg);
                animation: upsellsShimmer 2.2s ease-in-out infinite;
            }
        }
    }
}

@keyframes upsellsShimmer {
    0% { left: -150%; }
    // Hold between sweeps so it reads as a periodic pulse, not a constant scan.
    60%, 100% { left: 150%; }
}

@media (prefers-reduced-motion: reduce) {
    .upsellsPopup__skip--continue::after {
        animation: none;
        opacity: 0;
    }
}

.upsellsPopup-enter-active,
.upsellsPopup-leave-active {
    transition: opacity 0.2s ease;

    .upsellsPopup__dialog {
        transition: transform 0.2s ease;
    }
}

.upsellsPopup-enter,
.upsellsPopup-leave-to {
    opacity: 0;

    .upsellsPopup__dialog {
        transform: translateY(12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .upsellsPopup-enter-active,
    .upsellsPopup-leave-active {
        transition: none;

        .upsellsPopup__dialog {
            transition: none;
        }
    }
}
