#meteor-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.meteor {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--length);
    height: 1px;
    opacity: 0;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.15) 25%,
        rgba(255,255,255,.7) 80%,
        #fff 100%
    );

    transform: rotate(35deg);
    transform-origin: right center;

    filter: drop-shadow(0 0 3px rgba(255,255,255,.45));

    animation:
        meteor-fly var(--duration)
        linear
        var(--delay)
        infinite;
}

.meteor::after {
    content: "";
    position: absolute;
    right: -2px;
    top: -2px;

    width: 5px;
    height: 5px;

    border-radius: 50%;
    background: #fff;

    box-shadow:
        0 0 5px #fff,
        0 0 10px rgba(255,255,255,.55);
}

@keyframes meteor-fly {
    0% {
        opacity: 0;
        transform: translate(-150px,-105px) rotate(35deg);
    }

    8% {
        opacity: .85;
    }

    70% {
        opacity: .75;
    }

    100% {
        opacity: 0;
        transform: translate(120vw,84vw) rotate(35deg);
    }
}

@media (max-width: 768px) {
    .meteor {
        opacity: .65;
    }
}

@media (prefers-reduced-motion: reduce) {
    .meteor {
        animation: none;
        display: none;
    }
}

/* Diamond product cards */
.diamond-card-icon {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin: 8px auto 5px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.20));
}

.diamond-price-icon {
    width: 15px;
    height: 15px;
    object-fit: contain;
    margin-right: 5px;
    flex: 0 0 auto;
}

@media (max-width:640px) {
    .diamond-card-icon {
        width: 28px;
        height: 28px;
    }

    .diamond-price-icon {
        width: 14px;
        height: 14px;
    }
}

/* Diamond card final */
.diamond-card-icon {
    display: block !important;
    width: 25px !important;
    height: 25px !important;
    object-fit: contain !important;
    margin: 10px auto 6px !important;
    filter: none !important;
}

.diamond-price-icon {
    display: none !important;
}

/* Diamond compact seperti referensi */
.diamond-card-icon,
.diamond-price-icon {
    display: none !important;
}

.diamond-mini-icon {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    margin: 0 7px 0 0 !important;
    padding: 0 !important;
    filter: none !important;
    flex: 0 0 18px !important;
    vertical-align: middle !important;
}

/* Diamond mini final */
.diamond-mini-icon {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    max-width: 13px !important;
    flex: 0 0 13px !important;
    object-fit: contain !important;
    margin-right: 5px !important;
    padding: 0 !important;
    vertical-align: middle !important;
}
