.sortable:hover { cursor: pointer; color: #007bff; }
        .table-hover tbody tr:hover { background-color: rgba(0,0,0,.03); }
        .action-buttons .btn { margin: 2px; }
        .pagination .page-item.active .page-link { background-color: #007bff; border-color: #007bff; }
	
    .pagination {
        flex-wrap: wrap;
        gap: 5px;
    }
    .page-link {
        min-width: 40px;
        text-align: center;
        color: #007bff;
        border: 1px solid #dee2e6;
    }
    .page-item.active .page-link {
        background-color: #007bff;
        border-color: #007bff;
        color: white;
    }
    .page-item.disabled .page-link {
        background: #f8f9fa;
        border-color: #dee2e6;
        color: #6c757d;
    }
    .page-link:hover {
        background-color: #e9ecef;
    }
	
.fa-heart.green { color: #28a745; }
.fa-heart.orange { color: #ffc107; }
.fa-heart.red { color: #dc3545; }
.fa-heart:not(.green):not(.orange):not(.red) { color: #6c757d; }

.card-header.bg-green { background-color: #28a745!important; }
.card-header.bg-orange { background-color: #ffc107!important; }
.card-header.bg-red { background-color: #dc3545!important; }

.favorite-btn {
    transition: all 0.3s ease;
}
.favorite-btn:hover i {
    transform: scale(1.2);

	.fa-heart {
    transition: all 0.3s ease;
    transform-origin: center;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}



.text-success {
    animation: fadeIn 0.5s ease-in-out;
}

    .text-success {
            animation: fadeIn 0.5s ease-in-out;
        }
        tr.in-cart {
    background-color: #e8f5e9;
    border-left: 3px solid #4caf50;
}

tr.in-cart td {
    font-weight: bold;
}

.tag-btn {
    font-size: 0.875rem; /* Малък размер на текста */
    padding: 0.25rem 0.5rem; /* Компактни размери */
    margin: 0.125rem; /* Малко разстояние между бутоните */
    border-radius: 0.25rem; /* Закръглени ъгли */
}

                /* Хоризонтален (оранжев) */
        .number-input.horizontal {
            display: flex;
            align-items: center;
            width: 120px;
            position: relative;
        }

        .number-input input {
            width: 100%;
            text-align: center;
            border: 1.5px solid #FF9800;
            padding: 3px 25px;
            font-size: 12px;
            font-weight: bold;
            border-radius: 4px;
            outline: none;
            background: #fff7e6;
            appearance: textfield;
            -moz-appearance: textfield;
        }

        .number-input input::-webkit-outer-spin-button,
        .number-input input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .number-input input:focus {
            outline: none;
            user-select: all;
            border-color: #ff5722;
            background: #fff3d4;
        }

        .number-input button {
            position: absolute;
            width: 25px;
            height: 100%;
            background: #FF9800;
            color: white;
            font-size: 12px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            transition: background 0.3s;
        }

        .number-input button:hover {
            background: #ff5722;
        }

        .number-input .decrement {
            left: 0;
            border-radius: 4px 0 0 4px;
        }

        .number-input .increment {
            right: 0;
            border-radius: 0 4px 4px 0;
        }

        .number-input .decrement::before {
            content: "◀";
            font-size: 12px;
        }

        .number-input .increment::before {
            content: "▶";
            font-size: 12px;
        }

        /* Вертикален (син) */
        .number-input.vertical {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 60px;
            position: relative;
        }

        .number-input.vertical input {
            width: 100%;
            text-align: center;
            border: 1.5px solid #007bff;
            background: #e6f2ff;
            padding: 5px;
            font-size: 12px;
            font-weight: bold;
            border-radius: 4px;
            outline: none;
        }

        .number-input.vertical input:focus {
            border-color: #0056b3;
            background: #d4e6ff;
        }

        .number-input.vertical button {
            width: 100%;
            height: 25px;
            background: #007bff;
            color: white;
            font-size: 12px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            transition: background 0.3s;
        }

        .number-input.vertical button:hover {
            background: #0056b3;
        }

        .number-input.vertical .increment {
            border-radius: 4px 4px 0 0;
            margin-bottom: 2px;
        }

        .number-input.vertical .decrement {
            border-radius: 0 0 4px 4px;
            margin-top: 2px;
        }

        .number-input.vertical .increment::before {
            content: "▲";
        }

        .number-input.vertical .decrement::before {
            content: "▼";
        }
}