/* --- KULDNE ANIME MULLIEFEKT – RESULT COUNT --- */
.woocommerce-result-count {
    background: linear-gradient(135deg, #fffaf0, #fff3d4); /* õrn kuldne pastel */
    padding: 10px 20px;
    border-radius: 18px;
    font-size: 15px;
    font-weight: 600;
    color: #8a6d32; /* mahe kuldne tekst */
    border: 1px solid #f1e2b8;
    position: relative;
    display: inline-block;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
}

/* Mullid */
.woocommerce-result-count:before,
.woocommerce-result-count:after {
    content: "";
    position: absolute;
    top: -8px;
    width: 22px;
    height: 22px;
    background: rgba(255, 220, 130, 0.35); /* kuldne mull */
    border-radius: 50%;
    animation: bubbleFloat 4s infinite ease-in-out;
}

.woocommerce-result-count:before {
    left: -6px;
    animation-delay: 0s;
}

.woocommerce-result-count:after {
    right: -6px;
    animation-delay: 1.2s;
}

/* --- KULDNE DROPDOWN ANIME MULLIEFEKT – SORTERING --- */
.woocommerce-ordering select {
    background: linear-gradient(135deg, #fffdf7, #fff5dd);
    border: 2px solid #f0d79d;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 600;
    color: #8a6d32;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
    appearance: none;
}

/* Mull efekt dropdownis */
.woocommerce-ordering select:before,
.woocommerce-ordering select:after {
    content: "";
    position: absolute;
    top: -6px;
    width: 18px;
    height: 18px;
    background: rgba(255, 218, 140, 0.4);
    border-radius: 50%;
    animation: bubbleFloat 5s infinite ease-in-out;
    pointer-events: none;
}

.woocommerce-ordering select:before {
    left: -5px;
}

.woocommerce-ordering select:after {
    right: -5px;
    animation-delay: 1.4s;
}

/* Hover – rohkem läiget */
.woocommerce-ordering select:hover {
    border-color: #eac67a;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

/* Mullide animeeritud liikumine */
@keyframes bubbleFloat {
    0% { transform: translateY(0) scale(1); opacity: 0.8; }
    50% { transform: translateY(-6px) scale(1.15); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 0.8; }
}


/* --- KULDNE ANIME MULLIEFEKT – PAGINATION --- */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    background: linear-gradient(135deg, #fffaf0, #fff3d4); /* sama kuldne pastel */
    border: 2px solid #f0d79d;
    color: #8a6d32;
    padding: 10px 16px;
    margin: 0 4px;
    border-radius: 14px;
    font-weight: 600;
    min-width: 38px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* Aktiivne leht */
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: linear-gradient(135deg, #ffe9b0, #ffd98a);
    border-color: #eac67a;
    color: #7a5b25;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* Hover */
.woocommerce nav.woocommerce-pagination ul li a:hover {
    transform: translateY(-2px);
    border-color: #eac67a;
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
}

/* Mulliefekt iga nupu ümber */
.woocommerce nav.woocommerce-pagination ul li a:before,
.woocommerce nav.woocommerce-pagination ul li span:before,
.woocommerce nav.woocommerce-pagination ul li a:after,
.woocommerce nav.woocommerce-pagination ul li span:after {
    content: "";
    position: absolute;
    top: -6px;
    width: 16px;
    height: 16px;
    background: rgba(255, 218, 140, 0.4);
    border-radius: 50%;
    animation: bubbleFloat 4.5s infinite ease-in-out;
    pointer-events: none;
    opacity: 0.8;
}

.woocommerce nav.woocommerce-pagination ul li a:before,
.woocommerce nav.woocommerce-pagination ul li span:before {
    left: -5px;
}

.woocommerce nav.woocommerce-pagination ul li a:after,
.woocommerce nav.woocommerce-pagination ul li span:after {
    right: -5px;
    animation-delay: 1.2s;
}

/* Mulli anime */
@keyframes bubbleFloat {
    0% { transform: translateY(0) scale(1); opacity: 0.7; }
    50% { transform: translateY(-6px) scale(1.15); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 0.7; }
}