/* =========================================
   PROMOTION CONTAINER
   ========================================= */
.promotion-container {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    border-radius: 12px;
    overflow: visible;
    padding:3px;

    /* =========================================
       PROMOTION IMAGE SECTION
       ========================================= */
    .promotion-image {
        position: relative;
        width: 100%;
        overflow: hidden;
        border-radius: 12px 12px 0 0;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 12px 12px 0 0;
            aspect-ratio: 400.00/327.08;
        }

        picture {
            display: block;
            width: 100%;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 12px 12px 0 0;
                aspect-ratio: 400.00/327.08;
            }
        }

        /* Badge box inside promotion image */
        .promotion-badge-box {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: $promotion-color-2;
            padding: 5px 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10;
            height: 40px;

            .badge-keywords {
                display: flex;
                gap: 0.5rem;
                flex-wrap: wrap;
                align-items: center;
            }

            .badge-pricing {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 1rem;
                color: white;
            }

            .badge-text {
                background: $promotion-color-5;
                font-size: 12px;
                font-weight: 400;
                line-height: 18px;
                padding: 5px 8px;
                border-radius: 30px;
                text-transform: capitalize;
            }
        }
    }

    /* =========================================
       PROMOTION CONTENT SECTION
       ========================================= */
    .promotion-content {
        padding: 20px;
        border: 1px solid $drayton-blue;
        border-top: none;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;

        .promotion-title {
            font-size: 20px;
            font-weight: 700;
            color: $promotion-color-2;
            line-height: 30px;
            margin: 0;
            padding: 0;
            text-align: left;
        }

        .promotion-subtitle {
            color: $promotion-color-6;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            margin: 0;
            padding: 0;
        }

        .promotion-description {
            color: $promotion-color-2;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            margin: 15px 0 0 0;
            padding: 0;

            p {
                margin: 0;
                padding: 0;
            }
        }

        /* =========================================
           PROMOTION BUTTONS
           ========================================= */
        .promotion-buttons {
            display: flex;
            align-items: flex-start;
            align-self: stretch;
            flex-wrap: wrap;
            justify-content: center;
            text-align: center;

            &.button-inside {
                position: relative;
                margin-top: 15px;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                color: $promotion-color-4;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                text-transform: uppercase;

                .promo-button {
                    width: 50%;

                    &:only-child {
                        width: 100%;
                    }

                    &:hover {
                        box-shadow: none;
                    }
                }
            }

            &.button-outside {
                position: absolute;
                left: 50%;
                transform: translate(-50%, 50%);
                bottom: 0;
                z-index: 10;
            }
        }
    }
}

/* =========================================
   BADGE STYLES (shared across components)
   ========================================= */


.badge-actual-price {
    font-size: 1.25rem;
    font-weight: 400;
    color: $promotion-color-3;
    text-decoration: line-through;
    opacity: 0.9;
}

.badge-price {
    font-size: 1.75rem;
    font-weight: 700;
    color: $promotion-color-3;
}

/* =========================================
   BUTTON STYLES
   ========================================= */
.promo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;

    &.primary {
        background: $promotion-color-6;
        color: $promotion-color-4;
        border: 3px solid $promotion-color-6;

        &:hover {
            background: $promotion-color-6;
            border-color: $promotion-color-6;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(250, 183, 2, 0.4);
        }
    }

    &.secondary {
        background: $promotion-color-5;
        color: $promotion-color-3;
        border: 3px solid $promotion-color-5;

        &:hover {
            background: $promotion-color-5;
            border-color: $promotion-color-5;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(151, 71, 255, 0.4);
        }
    }

    &.outline {
        background: $promotion-color-9;
        border: 3px solid $promotion-color-2;
        color: $promotion-color-2;

        &:hover {
            background: $promotion-color-2;
            color: $promotion-color-3;
        }
    }
}

/* =========================================
   BUTTON ICON STYLES
   ========================================= */
.button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;

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

.button-icon-before {
    order: -1;
}

.button-icon-after {
    order: 1;
}

.button-text {
    order: 0;
    font-weight: 400;
}

/* =========================================
   RESPONSIVE STYLES
   ========================================= */
@media (max-width: 768px) {
    .promotion-container {
        // margin: 1rem;

        .promotion-image {
            height: 356px;

            img {
                height: 356px !important;
            }
        }

        .promotion-content {
            padding: 1.5rem;

            .promotion-title {
                font-size: 20px;
            }
        }
    }

    .badge-price {
        font-size: 1.2rem;
    }
}

@media (max-width: 767px) {
    .button-icon {
        width: 1rem;
        height: 1rem;
    }

    .promotion-container {
        .promotion-content {
            .promotion-buttons {
                &.button-outside {
                    transform: translate(-50%, 40%);
                }
            }
        }
    }
}