:root {
    --color-background-premium: #EEF2FF;
    --color-background-highlight-section: #EEF2FF;
    --color-border-highlight: #BFDBFE;
    --color-icon-highlight: #3B82F6;
    --color-background-highlight: #fff;

    --color-background-line: #ECFDF5;
    --color-border-line: #BBF7D0;
    --color-bg-qrcode: #fff;

    --color-border-input: #0002;
}

:root[data-theme="dark"] {
    --color-background-premium: #bfc0c61d;
    --color-background-highlight-section: #303030;
    --color-border-highlight: none;
    --color-icon-highlight: #3B82F6;
    --color-background-highlight: #c2c2c21d;

    --color-background-line: #303030;
    --color-border-line: none;
    --color-bg-qrcode: #c2c2c21d;

    --color-border-input: #F3F4F6;
}

main {
    margin-top: var(--padding-main);
    margin-bottom: var(--padding-main);

    section {
        background-color: var(--color-forground);
        border-radius: var(--card-radius);
        box-shadow: var(--shadow-card);
        padding: var(--padding-card);

        .row {
            display: flex;
            align-items: center;
            gap: 8px;

            &.between {
                width: 100%;
                justify-content: space-between;
            }
        }

        p {
            color: var(--color-text);
        }

        .mt {
            margin-top: 8px;
        }
    }
}

.hero-section {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;

    h1 {
        font-size: var(--text-heading1);
        font-weight: bold;
        color: var(--color-text-black);
    }

    .verify {
        display: flex;
        align-items: center;
        gap: 8px;
        background-color: var(--color-border-line);
        color: #15803D;
        padding: 4px 8px;
        border-radius: 16px;
    }

    .item2 {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: var(--box-radius);
        padding: var(--padding-button);
        border: none;
        outline: none;
        background-color: #F3F4F6;
        color: #374151;
        cursor: pointer;

        &.shared {
            background-color: #EFF6FF;
            color: #2563EB;
        }

        &.liked {
            background-color: #EF4444;
            color: #fff;

            svg path {
                fill: #fff !important;
            }
        }
    }

    .premium {
        grid-column: span 2;
        background-color: var(--color-background-premium);
        padding: var(--padding-card);
        border-radius: var(--box-radius);

        .icon {
            background-color: var(--color-icon-highlight);
            padding: 12px;
            border-radius: 100%;
        }

        h2 {
            font-size: var(--text-heading3);
            font-weight: 500;
            color: var(--color-text-black);
        }

        .price {
            text-align: right;

            h2 {
                color: #16A34A;
            }
        }
    }
}

.photo-section {
    h2 {
        font-size: var(--text-heading3);
        font-weight: bold;
        color: var(--color-text-black);
    }

    img {
        aspect-ratio: 16/9;
        border-radius: var(--box-radius);
    }
}

.overview-section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;

    h2 {
        font-size: var(--text-heading3);
        font-weight: bold;
        color: var(--color-text-black);
    }

    .border {
        border-left: 1px solid #0002;
        padding-left: 4px;
    }

    .verify {
        color: #15803D;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 8px;
        padding-top: 8px;
        margin-top: 12px;
        border-top: 1px solid #0001;
        grid-column: span 4;
    }
}

.content-area {
    width: 100%;
    max-width: var(--content-width);
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;

    section {
        margin-bottom: 8px;
    }

    >div {
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    h2 {
        font-size: var(--text-heading3);
        font-weight: bold;
        color: var(--color-text-black);
    }

    .line-section {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 8px;
        background-color: var(--color-background-line);
        border: 1px solid var(--color-border-line);

        .icon {
            padding: 12px;
            background-color: #22C55E;
            border-radius: 100%;
        }

        .qrcode {
            background-color: var(--color-bg-qrcode);
            border: 1px solid #0001;
            display: flex;
            align-items: center;
            flex-direction: column;
            gap: 8px;
            padding: var(--padding-card);
            border-radius: var(--box-radius);
            box-shadow: var(--shadow-card);

            img {
                width: 50%;
                border: 1px solid #E5E7EB;
                border-radius: var(--box-radius);
            }

            strong {
                font-weight: bold;
                color: var(--color-text-black);
            }
        }

        button {
            background-color: #22C55E;
            border-radius: var(--box-radius);
            padding: var(--padding-button);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: #fff;
            width: 100%;
            border: none;
            outline: none;
            box-shadow: var(--shadow-card);
        }

        .verify {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 14px;
        }
    }

    .view-detail {
        margin-top: 8px;
        padding: var(--padding-button);
        background-color: var(--color-correct);
        border-radius: var(--box-radius);
        color: #fff;
        font-weight: 600;

        display: flex;
        gap: 4px;
        align-items: center;
    }
}

.highlight-section {
    background-color: var(--color-background-highlight-section);
    border: 1px solid var(--color-border-highlight);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;

    .row {
        grid-column: span 2;

        .icon {
            padding: 8px;
            border-radius: 100%;
            background-color: var(--color-icon-highlight);
        }
    }

    .highlight {
        box-sizing: border-box;
        width: 100%;
        display: block;
        background-color: var(--color-background-highlight);
        padding: var(--padding-button);
        border-radius: var(--box-radius);

        h3 {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: bold;
            color: var(--color-text-black);
        }
    }
}

.seller-section {
    h3 {
        font-weight: bold;
        color: #2563EB;
    }
}

.related-section {
    background-color: transparent;
    box-shadow: none;

    h2 {
        font-size: var(--text-heading2);
        font-weight: bold;
        color: var(--color-text-black);
    }

    .feature-section {
        padding-bottom: var(--padding-main);
        position: relative;

        .next,
        .prev {
            position: absolute;
            z-index: 9;
            top: 50%;
            left: -32px;
            border: 1px solid #0002;
            font-size: 20px;
            padding: 12px;
            border-radius: 8px;
            background-color: var(--color-forground);
            box-shadow: var(--shadow-card);
            cursor: pointer;
            outline: none;
            color: var(--color-text-black);

            &.next {
                left: unset;
                right: -32px;
            }
        }

        .featuredListing {
            margin-top: var(--padding-main);
            width: 100%;
            gap: 12px;
            width: 100%;
            display: flex;
            overflow-x: auto;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;

            scrollbar-width: none;
            -ms-overflow-style: none;

            .card {
                flex: 0 0 calc(33.33% - 6px);
                scroll-snap-align: start;
                border-radius: var(--card-radius);
                box-shadow: var(--shadow-card);
                overflow: hidden;

                background-color: var(--color-forground);
                cursor: pointer;

                .img-container {
                    width: 100%;
                    aspect-ratio: 16/9;
                    overflow: hidden;

                    img {
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                        object-position: center;
                    }
                }

                .detail {
                    width: 100%;
                    padding: var(--padding-card);
                    display: flex;
                    align-items: start;
                    flex-direction: column;
                    gap: 8px;

                    .row {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                    }

                    h3 {
                        font-weight: bold;
                        color: var(--color-heading);
                    }

                    h4 {
                        font-weight: bold;
                        color: #16A34A;
                    }

                    p {
                        font-size: 14px;
                        font-weight: 300;
                    }

                    span {
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        color: #16A34A;
                        font-size: 14px;
                        font-weight: 300;
                    }

                    a {
                        font-size: 14px;
                        font-weight: 500;
                        color: var(--color-primary);
                    }
                }
            }
        }

        .featuredListing::-webkit-scrollbar {
            display: none;
        }
    }
}


.flash-message {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background-color: #22c55e;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease-in-out;
    z-index: 50;
    opacity: 0;
}

.flash-message.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.flash-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.flash-message.error {
    background-color: #ef4444;
}


@media only screen and (max-width:800px) {
    .content-area {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 0;
        max-width: unset;
    }

    .overview-section {
        grid-template-columns: 1fr;
        gap: 8px;

        .border {
            border: none;
            padding-left: 0;
        }

        .verify {
            grid-column: span 1;
        }
    }

    .highlight-section {
        display: flex;
        flex-direction: column;

        .row {
            grid-column: unset;
        }
    }

    .hero-section {
        grid-template-columns: 1fr;
        gap: 8px;

        .item2 {
            justify-content: flex-end;
        }

        .premium {
            grid-column: span 1;
            text-align: center !important;

            .price {
                text-align: center !important;
                width: 100%;
            }

            .row {
                justify-content: center;
                gap: 4px;
                align-items: center;
            }
        }

        .row:not(.keep) {
            flex-direction: column;
            align-items: start;
            gap: 4px;
        }
    }

    .dot {
        display: none;
    }

    .photo-section {
        display: none;

        &.photo-section-mobile {
            display: block !important;
        }
    }

    .feature-section {
        display: flex;

        .featuredListing .card {
            flex: 0 0 100% !important;
            border: 1px solid #0002;

            .img-container {
                aspect-ratio: 1/1;
            }
        }
    }

}