/* PrimePost.be - Paper Texture Effects */

/* Effet papier froissé/déchiré pour la liste de produits */

/* Animation subtile de "respiration" du papier */
@keyframes paper-float {
    0%, 100% {
        transform: rotate(-0.5deg) translateY(0);
    }
    50% {
        transform: rotate(-0.3deg) translateY(-2px);
    }
}

.shopping-list {
    animation: paper-float 6s ease-in-out infinite;
    /* Texture de grain de papier via filter */
    filter: contrast(1.02);
}

/* Torn paper effect removed - using post-it style instead */
/*
.shopping-list::after {
    content: "";
    position: absolute;
    bottom: -2px;
    height: 20px;
    width: 100%;
    left: -2px;
    right: -2px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.5 19.6" preserveAspectRatio="none"><path fill="white" d="M0 0L0 18.8 1.1 15.3 2.2 19 3.3 16.5 4.4 18.8 5.5 15.6 6.6 19.6 7.7 16.2 8.8 19 9.9 14.8 11 17.7 12.1 16.3 13.2 19.6 14.3 15.8 15.4 18.6 16.5 15.2 17.6 19 18.7 16.8 19.8 18.3 20.9 15.6 22 19.6 23.1 16.2 24.2 18.8 25.3 15.5 26.4 19 27.5 16.3 28.6 18.5 29.7 15.8 30.8 19.2 31.9 16.5 33 19.6 34.1 15.3 35.2 18.6 36.3 16.2 37.4 19 38.5 15.8 39.6 18.3 40.7 16.5 41.8 19.6 42.9 15.2 44 18.8 45.1 16.3 46.2 19 47.3 15.5 48.4 18.6 49.5 16.2 50.6 19.6 51.7 15.8 52.8 18.3 53.9 16.5 55 19 56.1 15.3 57.2 18.8 58.3 16.2 59.4 19.6 60.5 15.5 61.6 18.6 62.7 16.3 63.8 19 64.9 15.8 66 18.3 67.1 16.5 68.2 19.6 69.3 15.2 70.4 18.8 71.5 16.3 72.6 19 73.7 15.5 74.8 18.6 75.9 16.2 77 19.6 78.1 15.8 79.2 18.3 80.3 16.5 81.4 19 82.5 15.3 83.6 18.8 84.7 16.2 85.8 19.6 86.9 15.5 88 18.6 89.1 16.3 90.2 19 91.3 15.8 92.4 18.3 93.5 16.5 94.6 19.6 95.7 15.2 96.8 18.8 97.9 16.3 99 19 100.1 15.5 101.2 18.6 102.3 16.2 103.4 19.6 104.5 15.8 105.6 18.3 106.7 16.5 107.8 19 108.9 15.3 110 18.8 111.1 16.2 112.2 19.6 113.3 15.5 114.4 18.6 115.5 16.3 116.6 19 117.7 15.8 118.8 18.3 119.9 16.5 121 19.6 122.1 15.2 123.2 18.8 124.3 16.3 125.4 19 126.5 15.5 127.6 18.6 128.7 16.2 129.8 19.6 130.9 15.8 132 18.3 133.1 16.5 134.2 19 135.3 15.3 136.4 18.8 137.5 16.2 138.6 19.6 139.7 15.5 140.8 18.6 141.9 16.3 143 19 144.1 15.8 145.2 18.3 146.3 16.5 147.4 19.6 148.5 15.2 149.6 18.8 150.7 16.3 151.8 19 152.9 15.5 154 18.6 155.1 16.2 156.2 19.6 157.3 15.8 158.4 18.3 159.5 16.5 160.6 19 161.7 15.3 162.8 18.8 163.9 16.2 165 19.6 166.1 15.5 167.2 18.6 168.3 16.3 169.4 19 170.5 15.8 171.6 18.3 172.7 16.5 173.8 19.6 174.9 15.2 176 18.8 177.1 16.3 178.2 19 179.3 15.5 180.4 18.6 181.5 16.2 182.6 19.6 183.7 15.8 184.8 18.3 185.9 16.5 187 19 188.1 15.3 189.2 18.8 190.3 16.2 191.4 19.6 192.5 15.5 193.6 18.6 194.7 16.3 195.8 19 196.9 15.8 198 18.3 199.1 16.5 200.2 19.6 201.3 15.2 202.4 18.8 203.5 16.3 204.6 19 205.7 15.5 206.8 18.6 207.9 16.2 209 19.6 210.1 15.8 211.2 18.3 212.3 16.5 213.4 19 214.5 15.3 215.6 18.8 216.7 16.2 217.8 19.6 218.9 15.5 220 18.6 221.1 16.3 222.2 19 223.3 15.8 224.4 18.3 225.5 16.5 226.6 19.6 227.7 15.2 228.8 18.8 229.9 16.3 231 19 232.1 15.5 233.2 18.6 234.3 16.2 235.4 19.6 236.5 15.8 237.6 18.3 238.7 16.5 239.8 19 240.9 15.3 242 18.8 243.1 16.2 244.2 19.6 245.3 15.5 246.4 18.6 247.5 16.3 248.6 19 249.7 15.8 250.8 18.3 251.9 16.5 253 19.6 254.1 15.2 255.2 18.8 256.3 16.3 257.4 19 258.5 15.5 259.6 18.6 260.7 16.2 261.8 19.6 262.9 15.8 264 18.3 265.1 16.5 266.2 19 267.3 15.3 268.4 18.8 269.5 16.2 270.6 19.6 271.7 15.5 272.8 18.6 273.9 16.3 275 19 276.1 15.8 277.2 18.3 278.3 16.5 279.4 19.6 280.5 15.2 281.6 18.8 282.7 16.3 283.5 19z"/></svg>') top center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 2;
}
*/

/* Alternance de rotation légère pour items */
.list-item:nth-child(odd) .item-name {
    transform: rotate(-0.3deg);
}

.list-item:nth-child(even) .item-name {
    transform: rotate(0.2deg);
}

/* Effet "écrit à la main" pour les prix */
.item-price {
    position: relative;
}

.item-price::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    opacity: 0.2;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.list-item:hover .item-price::before {
    transform: scaleX(1);
}

/* Post-it texture with subtle noise */
.shopping-list {
    /* Post-it yellow maintained */
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
    background-blend-mode: overlay;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    /* Le fond reste blanc pour contraste fort avec le fond sombre */
    .shopping-list {
        box-shadow:
            0 8px 16px rgba(0, 0, 0, 0.6),
            0 16px 32px rgba(0, 0, 0, 0.4);
    }
}

/* Responsive - Mobile optimizations */
@media (max-width: 768px) {
    .shopping-list::after {
        height: 15px; /* Effet moins haut sur mobile */
        background-size: 250%; /* Légèrement plus grand pour couvrir */
    }
}

@media (max-width: 480px) {
    .shopping-list::after {
        height: 12px; /* Encore plus petit sur très petits écrans */
    }

    /* Réduire animation pour performance mobile */
    .shopping-list {
        animation: paper-float 8s ease-in-out infinite;
    }
}

/* Réduire animations sur demande utilisateur */
@media (prefers-reduced-motion: reduce) {
    .shopping-list {
        animation: none;
    }

    .list-item:hover {
        transform: none;
    }

    .checkbox:hover {
        transform: rotate(-2deg);
    }
}