.filter-sidebar {
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
    right: 0;
    left: auto;
}

.filter-sidebar.open {
    transform: translateX(0);
}

.search-with-icon {
    background-image: url('../public/assets/icon-search.png');
    background-repeat: no-repeat;
    background-position: 0.75rem center;
    background-size: 1rem;
    padding-left: 2.25rem !important;
}

.bg-light-theme {
    background-image: url('../public/assets/bg-phones.svg');
    background-repeat: repeat;
}

.bg-dark-theme {
    background-image: url('../public/assets/bg-phones-dark.svg');
    background-repeat: repeat;
}

.select-with-icon {
    appearance: none;
    background-repeat: no-repeat;
    background-position: 0.75rem center;
    background-size: 1rem;
    padding-left: 2.25rem !important;
}

.icon-sort {
    background-image: url('../public/assets/icon-sort.png');
}

.icon-sort-name {
    background-image: url('../public/assets/icon-sort-name.png');
}

.icon-sort-ascending {
    background-image: url('../public/assets/icon-sort-ascending.png');
}

.icon-sort-descending {
    background-image: url('../public/assets/icon-sort-descending.png');
}

.icon-ram {
    background-image: url('../public/assets/icon-ram.png');
}

.icon-memory {
    background-image: url('../public/assets/icon-memory.png');
}

.icon-display-size {
    background-image: url('../public/assets/icon-display-size.png');
}

.icon-display-rate {
    background-image: url('../public/assets/icon-display-rate.png');
}

.dark .icon-sort {
    background-image: url('../public/assets/icon-sort-white.png');
}

.dark .icon-sort-name {
    background-image: url('../public/assets/icon-sort-name-white.png');
}

.dark .icon-sort-ascending {
    background-image: url('../public/assets/icon-sort-ascending-white.png');
}

.dark .icon-sort-descending {
    background-image: url('../public/assets/icon-sort-descending-white.png');
}

.dark .icon-ram {
    background-image: url('../public/assets/icon-ram-white.png');
}

.dark .icon-memory {
    background-image: url('../public/assets/icon-memory-white.png');
}

.dark .icon-display-size {
    background-image: url('../public/assets/icon-display-size-white.png');
}

.dark .icon-display-rate {
    background-image: url('../public/assets/icon-display-rate-white.png');
}

#imageModalOverlay {
    @media (max-width: 639px) {
        align-items: stretch;
        justify-content: stretch;
    }
}

#imageModal {
    @media (max-width: 639px) {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

#modalImage {
    @media (max-width: 639px) {
        max-width: 100vw;
        max-height: 100vh;
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 0;
    }
}

@media (max-width: 640px) {
    .slide-out-left {
        transform: translateX(-100vw);
        opacity: 0;
    }

    .slide-out-right {
        transform: translateX(100vw);
        opacity: 0;
    }

    .slide-in-from-right {
        animation: slideInRight 0.3s forwards;
    }

    .slide-in-from-left {
        animation: slideInLeft 0.3s forwards;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(50vw);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-50vw);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.card-container {
    position: relative;
    width: 100%;
    height: 480px;
    display: block;
}

.card-side {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.front-side {
    opacity: 1;
    visibility: visible;
    z-index: 20;
    background-color: white;
}
.dark .front-side {
    background-color: #1f2937;
}

.back-side {
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    pointer-events: none;
    background-color: #f9fafb;
}
.dark .back-side {
    background-color: #111827;
}

.card-container.show-info .front-side {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.card-container.show-info .back-side {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 20;
}

.fade-enter {
    animation: fadeIn 0.4s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}