/* assets/css/custom.css */

/* Animation de survol pour les cartes */
.card-hover {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Badges pour les états des cartes */
.condition-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.condition-MT { background-color: #17a2b8; color: white; } /* Mint - vert */
.condition-NM { background-color: #3caf56; color: white; } /* Near Mint - bleu */
.condition-EX { background-color: #82891e; color: white; } /* Excellent - violet */
.condition-GD { background-color: #ffc107; color: black; } /* Good - orange */
.condition-LP { background-color: #fd8b2b; color: white; } /* Light Played - orange foncé */
.condition-PL { background-color: #e56874; color: white; } /* Moderately Played - rouge */
.condition-PO { background-color: #dc3545; color: white; } /* Heavily Played - rouge foncé */

/* Effet de zoom sur l'image des cartes lors du survol */
.card-image-zoom {
    overflow: hidden;
}

.card-image-zoom img {
    transition: transform 0.3s ease;
}

.card-image-zoom:hover img {
    transform: scale(1.05);
}

/* Animation de notification pour les ajouts au panier */
@keyframes addToCartPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.add-to-cart-pulse {
    animation: addToCartPulse 0.5s ease-in-out;
}

/* Styles pour les sélecteurs de quantité */
.quantity-selector {
    display: flex;
    align-items: center;
    border-radius: 0.375rem;
    overflow: hidden;
}

.quantity-selector button {
    width: 2rem;
    height: 2rem;
    background-color: #E5E7EB;
    color: #374151;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.quantity-selector button:hover {
    background-color: #D1D5DB;
}

.quantity-selector input {
    width: 3rem;
    height: 2rem;
    text-align: center;
    border: 1px solid #E5E7EB;
    border-left: none;
    border-right: none;
}

/* Styles pour les filtres latéraux */
.filter-container {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filter-title {
    border-bottom: 1px solid #E5E7EB;
    padding: 1rem;
    font-weight: 600;
}

.filter-content {
    padding: 1rem;
}

/* Boutons d'action */
.action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s;
}

.action-button.edit {
    background-color: #3B82F6;
    color: white;
}

.action-button.delete {
    background-color: #EF4444;
    color: white;
}

.action-button.view {
    background-color: #10B981;
    color: white;
}

.action-button:hover {
    opacity: 0.9;
}

.condition-badge.condition-multiple {
    background-color: #9333ea;
    color: white;
}

@keyframes scroll-left-loop {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 639px) {
    .animate-scroll-mobile {
        animation: scroll-left-loop 15s linear infinite;
    }

    .action-button-container {
        flex-direction: column;
        gap: 0.25rem;
    }

    form .md\\:col-span-4 + div {
        margin-top: 0.5rem;
    }
}

.truncate {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scroll-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: <?= $banner['height'] ?: 'auto' ?>;
}

.scroll-text {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
}