/* Pagination Block Frontend Styles */
.wp-block-crates-pagination {
    margin-top: 3rem; /* mt-12 */
    margin-bottom: 2rem;
}

.crates-pagination__container {
    display: flex;
    justify-content: center;
}

.crates-pagination__button {
    background-color: #0F2922; /* bg-[#182320] - using theme card background */
    color: #ffffff; /* text-white */
    padding: 0.75rem 1.5rem; /* px-6 py-3 */
    border-radius: 0.375rem; /* rounded-md */
    border: none;
    font-weight: 500; /* font-medium */
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease-in-out; /* transition-colors */
}

.crates-pagination__button:hover {
    background-color: #163832; /* hover:bg-[#233730] - using theme card hover */
}

.crates-pagination__text {
    margin-right: 0.5rem; /* mr-2 */
}

.crates-pagination__icon {
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
    stroke-width: 2;
}

/* Loading state styles */
.crates-pagination__button[data-loading="true"] {
    opacity: 0.75;
    cursor: not-allowed;
}

.crates-pagination__button[data-loading="true"] .crates-pagination__icon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}